crocoder-dev · gloriababic · Sep 1, 2025 · Aug 28, 2025 · Aug 28, 2025 · Aug 28, 2025
diff --git a/apps/contact/app/layout.tsx b/apps/contact/app/layout.tsx
@@ -1,13 +1,9 @@
-export default function Layout({
-  children,
-}: {
-  children: React.ReactNode
-}) {
+export default function Layout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en">
       <body>
         <main>{children}</main>
       </body>
     </html>
-  )
+  );
 }
diff --git a/apps/contact/app/page.tsx b/apps/contact/app/page.tsx
@@ -1,7 +1,3 @@
 export default function Home() {
-  return (
-    <div>
-      THIS IS API
-    </div>
-  );
+  return <div>THIS IS API</div>;
 }
diff --git a/apps/website/src/components/Avatar.astro b/apps/website/src/components/Avatar.astro
@@ -6,7 +6,7 @@ const optimizedImage = await getImage({
   src: image.default,
   width: 72,
   height: 72,
-  format: 'webp'
+  format: "webp",
 });
 ---
 

diff --git a/apps/website/src/components/BookACallForm.astro b/apps/website/src/components/BookACallForm.astro
@@ -11,10 +11,7 @@ export interface Props {
   eventType?: string;
 }
 
-const {
-  calLink = "team/crocoder/hello",
-  eventType = "hello",
-} = Astro.props;
+const { calLink = "team/crocoder/hello", eventType = "hello" } = Astro.props;
 ---
 
 <!-- YELLOW-1 = #FEB534 -->

diff --git a/apps/website/src/components/Field.astro b/apps/website/src/components/Field.astro
@@ -41,7 +41,7 @@ const { classNames, labelProps, label, errorText } = Astro.props;
     {
       "after:h-[46px]": !Astro.props.isTextArea,
       "after:h-[139px] after:max-h-[139px]": Astro.props.isTextArea,
-    }
+    },
   )}
 >
   {
@@ -83,7 +83,7 @@ const { classNames, labelProps, label, errorText } = Astro.props;
           focus:border-transparent
           text-secondary
           `,
-          Astro.props.textAreaProps.class
+          Astro.props.textAreaProps.class,
         )}
         {...Astro.props.textAreaProps}
       />
@@ -133,7 +133,7 @@ const { classNames, labelProps, label, errorText } = Astro.props;
       {
         "h-[48px] top-[23px]": !Astro.props.isTextArea,
         "h-[142px] top-[23px]": Astro.props.isTextArea,
-      }
+      },
     )}
   >
   </div>

diff --git a/apps/website/src/components/Pill.astro b/apps/website/src/components/Pill.astro
@@ -7,7 +7,7 @@ const { className } = Astro.props;
 <div
   class={classNames(
     "bg-white py-2 px-4 gap-2.5 border border-[rgb(60,56,67)]/[0.2] rounded-full uppercase font-bold text-base w-fit leading-none tracking-normal text-secondary whitespace-nowrap",
-    className
+    className,
   )}
 >
   <slot />

diff --git a/apps/website/src/components/Values.astro b/apps/website/src/components/Values.astro
@@ -30,7 +30,7 @@ const { src } = await getImage({
   src: bgImage,
   alt: "",
   width: 1920,
-  format: 'avif',
+  format: "avif",
 });
 ---
 

diff --git a/apps/website/src/components/cto/Hero.astro b/apps/website/src/components/cto/Hero.astro
@@ -32,7 +32,8 @@ import heroImage from "../../assets/cto-hero.png";
       <p
         class="font-normal leading-7 md:text-[22px] md:leading-8 tracking-normal"
       >
-        A Web Development Consultancy Helping CTOs Minimize Their Hands-on Involvement in Daily Operations
+        A Web Development Consultancy Helping CTOs Minimize Their Hands-on
+        Involvement in Daily Operations
       </p>
 
       <a
@@ -69,7 +70,7 @@ import heroImage from "../../assets/cto-hero.png";
 
 <script is:inline>
   const bookACallActionHero = document.getElementById(
-    "book-a-call-action-hero"
+    "book-a-call-action-hero",
   );
 
   function handleBookACallHero() {

diff --git a/apps/website/src/components/cto/InfoBlock.astro b/apps/website/src/components/cto/InfoBlock.astro
@@ -5,7 +5,12 @@ const { icon, title, description, className } = Astro.props;
 ---
 
 <div class={classNames("grid auto-rows-min text-white gap-7", className)}>
-  <img src={icon} alt="" role="presentation" class="h-[72px] w-[72px] md:h-[90px] md:w-[90px]" />
+  <img
+    src={icon}
+    alt=""
+    role="presentation"
+    class="h-[72px] w-[72px] md:h-[90px] md:w-[90px]"
+  />
   <h3
     class="text-[28px] leading-[30px] md:text-[36px] md:leading-[40px] tracking-tight"
   >

diff --git a/apps/website/src/components/cto/ServiceBlock.astro b/apps/website/src/components/cto/ServiceBlock.astro
@@ -1,28 +1,59 @@
 ---
 import classnames from "classnames";
-const { image, iconFirst, iconSecond, sectionTitle, titleFirst, titleSecond, descriptionFirst, descriptionSecond, classNames } = Astro.props;
+const {
+  image,
+  iconFirst,
+  iconSecond,
+  sectionTitle,
+  titleFirst,
+  titleSecond,
+  descriptionFirst,
+  descriptionSecond,
+  classNames,
+} = Astro.props;
 ---
 
-<div class={classnames("relative lg:h-[600px] overflow-hidden px-7 sm:pt-24 pt-16 sm:px-12", classNames)}>
+<div
+  class={classnames(
+    "relative lg:h-[600px] overflow-hidden px-7 sm:pt-24 pt-16 sm:px-12",
+    classNames,
+  )}
+>
   <div class="grid grid-cols-1 md:grid-cols-2 gap-7">
     <div class="rounded-2xl gap-7">
-      <h2 class="font-medium text-[28px] leading-[30px] md:text-4xl md:leading-10 xl:text-[54px] xl:leading-[60px] -tracking-[2%]">
+      <h2
+        class="font-medium text-[28px] leading-[30px] md:text-4xl md:leading-10 xl:text-[54px] xl:leading-[60px] -tracking-[2%]"
+      >
         {sectionTitle}
       </h2>
     </div>
     <div class="rounded-2xl grid grid-cols-1 lg:grid-cols-2 gap-7 items-start">
       <div class="grid grid-cols-1 gap-y-4 text-left sm:text-left">
-        <img src={iconFirst} alt="" class="w-16 h-16 sm:mx-0" role="presentation" />
-        <h4 class="font-medium text-xl leading-[22px] md:text-[28px] md:leading-[30px] tracking-tight">
+        <img
+          src={iconFirst}
+          alt=""
+          class="w-16 h-16 sm:mx-0"
+          role="presentation"
+        />
+        <h4
+          class="font-medium text-xl leading-[22px] md:text-[28px] md:leading-[30px] tracking-tight"
+        >
           {titleFirst}
         </h4>
         <span class="font-normal text-4 leading-[26px]">
           {descriptionFirst}
         </span>
       </div>
       <div class="grid grid-cols-1 gap-y-4 text-left sm:text-left">
-        <img src={iconSecond} alt="" class="w-16 h-16 sm:mx-0" role="presentation" />
-        <h4 class="font-medium text-xl leading-[22px] md:text-[28px] md:leading-[30px] tracking-tight">
+        <img
+          src={iconSecond}
+          alt=""
+          class="w-16 h-16 sm:mx-0"
+          role="presentation"
+        />
+        <h4
+          class="font-medium text-xl leading-[22px] md:text-[28px] md:leading-[30px] tracking-tight"
+        >
           {titleSecond}
         </h4>
         <span class="font-normal text-base leading-[26px]">
@@ -31,7 +62,9 @@ const { image, iconFirst, iconSecond, sectionTitle, titleFirst, titleSecond, des
       </div>
     </div>
   </div>
-  <img src={image}
-  alt="CroCoder team member illustration"
-  class="md:absolute bottom-0 left-0 h-40 sm:h-56 lg:h-80 max-w-xs sm:max-w-md relative max-md:top-12 max-md:mt-12" />
+  <img
+    src={image}
+    alt="CroCoder team member illustration"
+    class="md:absolute bottom-0 left-0 h-40 sm:h-56 lg:h-80 max-w-xs sm:max-w-md relative max-md:top-12 max-md:mt-12"
+  />
 </div>
diff --git a/apps/website/src/components/cto/Testimonial.astro b/apps/website/src/components/cto/Testimonial.astro
@@ -7,7 +7,7 @@ import raphaelBauerBubble from "../../assets/raphael-bauer-bubble.png";
 const optimizedTestimonial = await getImage({
   src: raphaelBauerBubble,
   width: 569,
-  height: 547
+  height: 547,
 });
 ---
 

diff --git a/apps/website/src/components/cto/Values.astro b/apps/website/src/components/cto/Values.astro
@@ -11,13 +11,13 @@ import douglasIcon from "../../assets/douglas-icon.png";
 const optimizedDouglasIcon = await getImage({
   src: douglasIcon,
   width: 72,
-  height: 72
+  height: 72,
 });
 
 const optimizedTeamsImage = await getImage({
   src: teamsImage,
   width: 560,
-  height: 326
+  height: 326,
 });
 ---
 
@@ -114,7 +114,12 @@ const optimizedTeamsImage = await getImage({
         making process. Working with them is easy. They are organised,
         communicative, and have a great internal culture.
       </p>
-      <img src="/quotes.svg" alt="" role="presentation" class="hidden md:block" />
+      <img
+        src="/quotes.svg"
+        alt=""
+        role="presentation"
+        class="hidden md:block"
+      />
       <div class="flex gap-3 col-span-2">
         <img
           src={optimizedDouglasIcon.src}

diff --git a/apps/website/src/components/footer.astro b/apps/website/src/components/footer.astro
@@ -6,7 +6,7 @@ const optimizedLogo = await getImage({
   src: crocoderLogo,
   width: 64,
   height: 48,
-  format: 'webp'
+  format: "webp",
 });
 
 const copyright = `
@@ -51,17 +51,21 @@ const copyright = `
         class="flex flex-col md:flex-row gap-4 text-left w-fit col-span-3 lg:col-span-1 lg:grow lg:justify-center lg:w-full"
       >
         <a href="/" class="text-white w-fit block whitespace-nowrap">Home</a>
-        <a href="/for-ctos" class="text-white w-fit block whitespace-nowrap"
-          >For CTOs</a
-        >
-        <a href="/staff-augmentation" class="text-white w-fit block whitespace-nowrap"
-          >Staff Augmentation</a
-        >
-        <a href="/blog" class="text-white w-fit block whitespace-nowrap">Blog</a
+        <a href="/for-ctos" class="text-white w-fit block whitespace-nowrap">
+          For CTOs
+        </a>
+        <a
+          href="/staff-augmentation"
+          class="text-white w-fit block whitespace-nowrap"
         >
+          Staff Augmentation
+        </a>
+        <a href="/blog" class="text-white w-fit block whitespace-nowrap">
+          Blog
+        </a>
         <a href="/contact" class="text-white w-fit block whitespace-nowrap">
-          Contact</a
-        >
+          Contact
+        </a>
       </div>
       <div
         class="flex items-center col-span-3 row-start-4 min-[400px]:col-span-1 min-[400px]:col-start-3 min-[400px]:justify-end lg:row-start-1"
@@ -117,8 +121,8 @@ const copyright = `
         The content and information provided on this website are intended solely
         for marketing and promotional purposes. This website is a collaborative
         platform representing the interests of both CroCoder, Inc. and Abram
-        d.o.o. Please be advised that the materials and information available
-        on this site are designed to promote the products, services, and
+        d.o.o. Please be advised that the materials and information available on
+        this site are designed to promote the products, services, and
         initiatives of the aforementioned companies.
       </p>
     </div>

diff --git a/apps/website/src/components/navigation.astro b/apps/website/src/components/navigation.astro
@@ -10,7 +10,7 @@ const optimizedLogo = await getImage({
   format: "webp",
 });
 
-const isContact = Astro.url.pathname === "/contact"
+const isContact = Astro.url.pathname === "/contact";
 ---
 
 <header
@@ -109,7 +109,7 @@ const isContact = Astro.url.pathname === "/contact"
           id="book-a-call-action"
           class="invisible w-fit font-medium h-[39px] items-center px-4 py-2 rounded-md text-base text-center whitespace-nowrap bg-[#545664] text-[#ffffff] hover:opacity-90"
           href={isContact ? "/#book-a-call-section" : "#book-a-call-section"}
-          >
+        >
           Book a call
         </a>
       </li>
@@ -151,9 +151,10 @@ const isContact = Astro.url.pathname === "/contact"
             text-base text-center
             whitespace-nowrap
              bg-[#545664] text-[#ffffff] hover:opacity-90"
-             href={isContact ? "/#book-a-call-section" : "#book-a-call-section"}
-             >Book a call</a
+      href={isContact ? "/#book-a-call-section" : "#book-a-call-section"}
     >
+      Book a call
+    </a>
     <a
       class="font-medium
           w-full !h-[40px] items-center px-4 py-2 rounded-md
@@ -173,7 +174,7 @@ const isContact = Astro.url.pathname === "/contact"
   const allDataHidden = document.querySelectorAll("[data-navhidden]");
   const bookACallAction = document.getElementById("book-a-call-action");
   const mobileBookACallAction = document.getElementById(
-    "mobile-book-a-call-action"
+    "mobile-book-a-call-action",
   );
   const navMenuToggle = document.getElementById("nav-menu-toggle");
   const mobileContact = document.getElementById("mobile-contact");
@@ -233,7 +234,7 @@ const isContact = Astro.url.pathname === "/contact"
       const currentVal = node.getAttribute("data-navhidden");
       node.setAttribute(
         "data-navhidden",
-        currentVal === "true" ? "false" : "true"
+        currentVal === "true" ? "false" : "true",
       );
 
       node.style.animationName = "none";

diff --git a/apps/website/src/components/testimonial.astro b/apps/website/src/components/testimonial.astro
@@ -47,12 +47,7 @@ for (const testimonial of testimonialCollections) {
         <article class="flex-1 bg-[#F4F4F4] rounded-2xl p-7 min-w-[318px] md:min-w-[474px] xl:min-w-0 max-h-fit max-w-full [&_p]:leading-7 [&_p]:text-black [&_p]:w-full">
           <p set:html={content?.html} class="text-base leading-[26px]" />
           <div class="pt-7">
-            <Avatar
-              name={name}
-              role={title}
-              image={image}
-              company={company}
-            />
+            <Avatar name={name} role={title} image={image} company={company} />
           </div>
         </article>
       ))

diff --git a/...ntent/partials/how-to-write-custom-react-hooks/demos/NextLevelButtonClickTracker/demo.tsx b/...ntent/partials/how-to-write-custom-react-hooks/demos/NextLevelButtonClickTracker/demo.tsx
@@ -1,16 +1,23 @@
-import React from 'react';
-import { useClickTracker } from './useClickTracker';
+import React from "react";
+import { useClickTracker } from "./useClickTracker";
 const NextLevelButtonClickTracker: React.FC = () => {
   const [state, incrementCount] = useClickTracker();
   return (
-    <div className='border rounded-md p-4'>
+    <div className="border rounded-md p-4">
       <p>Button has been clicked {state.count} times</p>
       <p>
-        Last clicked at:{' '}
-        {state.lastClicked ? new Date(state.lastClicked).toLocaleString() : 'Never'}
+        Last clicked at:{" "}
+        {state.lastClicked
+          ? new Date(state.lastClicked).toLocaleString()
+          : "Never"}
       </p>
-      <button className='rounded p-2 bg-slate-300 hover:bg-slate-200' onClick={incrementCount}>Click me</button>
+      <button
+        className="rounded p-2 bg-slate-300 hover:bg-slate-200"
+        onClick={incrementCount}
+      >
+        Click me
+      </button>
     </div>
   );
 };
-export default NextLevelButtonClickTracker;
+export default NextLevelButtonClickTracker;