crocoder-dev · ivke995 · Aug 29, 2025 · Aug 29, 2025 · Aug 29, 2025 · Aug 29, 2025
diff --git a/apps/website/astro.config.mjs b/apps/website/astro.config.mjs
@@ -1,31 +1,34 @@
-import { defineConfig } from 'astro/config';
-import react from '@astrojs/react';
-import vercel from '@astrojs/vercel'
-import createRemarkPlugin from '@crocoder-dev/remark-plugin';
+import { defineConfig } from "astro/config";
+import react from "@astrojs/react";
+import vercel from "@astrojs/vercel";
+import createRemarkPlugin from "@crocoder-dev/remark-plugin";
 import tailwindcss from "@tailwindcss/vite";
 
 const classes = {
-  titleClass: 'font-bold text-[1.25rem] mt-[2.5rem]',
-  summaryClass: 'cursor-pointer font-bold text-[1.25rem]',
-  detailsClass: 'mt-[2.5rem]',
-  iframeClass: 'border-none w-full h-[360px] overflow-y-hidden'
-}
+  titleClass: "font-bold text-[1.25rem] mt-[2.5rem]",
+  summaryClass: "cursor-pointer font-bold text-[1.25rem]",
+  detailsClass: "mt-[2.5rem]",
+  iframeClass: "border-none w-full h-[360px] overflow-y-hidden",
+};
 
 const remarkPlugin = createRemarkPlugin(classes);
 
 export default defineConfig({
   prefetch: true,
-  output: 'server',
+  output: "server",
   adapter: vercel({
     imageService: true,
+    imagesConfig: {
+      sizes: [320, 480, 578, 640, 720, 800, 940, 1920],
+      formats: ["image/avif", "image/webp"],
+    },
   }),
   redirects: {
-    '/feed': '/rss.xml',
-    '/sitemap': '/sitemap.xml'
+    "/feed": "/rss.xml",
+    "/sitemap": "/sitemap.xml",
   },
   integrations: [tailwindcss(), react()],
   markdown: {
     remarkPlugins: [remarkPlugin],
   },
 });
-
diff --git a/apps/website/src/components/Clients.astro b/apps/website/src/components/Clients.astro
@@ -10,31 +10,46 @@ import Section from "./Section.astro";
   </h4>
   <div class="overflow-x-auto whitespace-nowrap px-4 no-scrollbar">
     <div class="flex gap-7 justify-center my-8 lg:my-10 min-w-max">
-      <img src="/conductor.svg" alt="Conductor logo" class="grayscale opacity-50 w-[200px]" />
+      <img
+        src="/conductor.svg"
+        alt="Conductor logo"
+        class="grayscale opacity-50 w-[200px]"
+      />
       <img
         src="/lynes.svg"
+        width="200"
         alt="Lynes logo"
         class="grayscale opacity-50 w-[200px] md:hidden xl:block"
       />
       <img
         src="/submix.svg"
+        width="200"
         alt="Submix logo"
         class="grayscale invert opacity-50 w-[200px]"
       />
-      <img src="/sevdesk.svg" alt="SevDesk logo" class="grayscale opacity-50 w-[200px]" />
+      <img
+        src="/sevdesk.svg"
+        width="200"
+        alt="SevDesk logo"
+        class="grayscale opacity-50 w-[200px]"
+      />
       <img
         src="/misterspex.svg"
+        width="200"
         alt="Misterspex logo"
         class="grayscale opacity-50 w-[200px]"
       />
     </div>
   </div>
 
-  <div class="text-[#3C3843] md:text-center text-2xl leading-9 md:text-4xl md:leading-[54px] font-medium px-4 md:px-7 xl:px-60 py-[72px] md:pt-32  md:pb-[138px]">
-    Our tailored software services bridge the gap between the big-picture strategy
+  <div
+    class="text-[#3C3843] md:text-center text-2xl leading-9 md:text-4xl md:leading-[54px] font-medium px-4 md:px-7 xl:px-60 py-[72px] md:pt-32 md:pb-[138px]"
+  >
+    Our tailored software services bridge the gap between the big-picture
+    strategy
     <span class="text-[#3C384380]">
       and day-to-day operations, turning ambitious goals into concrete,
-    actionable steps that drive results.
+      actionable steps that drive results.
     </span>
   </div>
 </Section>
diff --git a/apps/website/src/components/ContactUs.astro b/apps/website/src/components/ContactUs.astro
@@ -28,8 +28,8 @@ import peopleCollaborating from "../assets/people-collaborating.png";
   <div class="col-span-6 min-xl:col-span-7 hidden lg:block">
     <Image
       src={peopleCollaborating}
-      widths={[540, 720, 800]}
-      sizes="(max-width: 1280px) 540px, 720px"
+      widths={[640, 720]}
+      sizes="(max-width: 1280px) 640px, 720px"
       alt={contactUsContent.frontmatter.imgAlt}
       loading="eager"
     />

diff --git a/apps/website/src/components/ServiceCard.astro b/apps/website/src/components/ServiceCard.astro
@@ -94,11 +94,11 @@ const image = await src();
         class="flex flex-col justify-center items-center row-start-3 lg:justify-start lg:col-span-1 lg:row-start-2"
       >
         <Image
-          class="object-cover xl:p-6"
+          class="object-cover w-full max-lg:max-w-[640px] xl:p-6"
           src={image.default}
           alt={imgAlt}
           widths={[320, 480, 578, 640]}
-          sizes="(max-width: 1024px) calc(100vw - 56px), calc(50vw - 28px)"
+          sizes="(max-width: 1024px) calc(100vw - 56px), 640px"
           loading="lazy"
         />
       </div>

diff --git a/apps/website/src/components/ValueCard.astro b/apps/website/src/components/ValueCard.astro
@@ -16,7 +16,6 @@ interface Props {
 
 const { title, content, img, styles, onDark, icon } = Astro.props;
 
-
 const images = import.meta.glob("../assets/*.*");
 const src = images[`../assets${img.path}`] as any as () => Promise<{
   default: ImageMetadata;
@@ -29,19 +28,28 @@ const image = await src();
   class={`col-span-6 rounded-2xl p-7 md:p-12 md:pb-0 max-md:max-w-[470px] mx-auto xl:p-12 xl:pb-0 pb-0 flex flex-col overflow-hidden lg:h-fit md:col-span-12 xl:col-span-4 ${styles} ${onDark ? "text-[#ffff]" : "text-secondary"}`}
 >
   <div class="flex gap-7 flex-col md:flex-row xl:flex-col mb-5 xl:mb-[61px]">
-    <img class="h-[72px] w-[72px] xl:h-[90px] xl:w-[90px]" src={icon} alt="" role="presentation">
+    <img
+      class="h-[72px] w-[72px] xl:h-[90px] xl:w-[90px]"
+      src={icon}
+      alt=""
+      role="presentation"
+    />
     <div>
-      <h3 class="font-medium text-[28px] md:text-4xl leading-[30px] md:leading-10 mb-7">{title}</h3>
-      <div class="text-base leading-7 antialiased" set:html={content.html}></div>
+      <h3
+        class="font-medium text-[28px] md:text-4xl leading-[30px] md:leading-10 mb-7"
+      >
+        {title}
+      </h3>
+      <div class="text-base leading-7 antialiased" set:html={content.html} />
     </div>
   </div>
   <div class="flex justify-center">
     <Image
       class="mt-auto max-w-[466px] w-full"
       src={image.default}
       alt={img.alt}
-      widths={[320, 466, 640, 800]}
-      sizes="(max-width: 768px) calc(100vw - 32px), (max-width: 1280px) calc(100vw - 56px), calc(33vw - 28px)"
+      widths={[320, 480, 640, 800]}
+      sizes="(max-width: 768px) calc(100vw - 32px), (max-width: 1280px) calc(100vw - 56px), 320px"
       loading="lazy"
     />
   </div>

diff --git a/apps/website/src/components/hero.astro b/apps/website/src/components/hero.astro
@@ -2,8 +2,8 @@
 import { grid_classes } from "./_grid";
 import Pill from "./Pill.astro";
 import Section from "./Section.astro";
-import { Image } from "astro:assets";
 import heroImage from "../assets/croco-13.png";
+import { Picture } from "astro:assets";
 ---
 
 <Section className="!py-0 !px-0">
@@ -13,34 +13,35 @@ import heroImage from "../assets/croco-13.png";
     <div
       class="col-start-3 col-span-4 md:col-start-6 md:col-span-7 xl:col-start-7 xl:col-span-6 rounded-bl-lg"
     >
-      <Image
+      <Picture
         src={heroImage}
         alt="CroCoder team collaborating on web development projects"
-        widths={[320, 480, 640, 800, 1196]}
+        widths={[320, 480, 578, 640, heroImage.width]}
         sizes="(max-width: 540px) calc(67vw - 21px), (max-width: 768px) calc(67vw - 21px), (max-width: 1280px) calc(58vw - 32px), calc(50vw - 28px)"
+        quality={80}
         loading="eager"
         fetchpriority="high"
       />
     </div>
     <div
       class="text-white my-auto
-    col-start-1
-    col-span-6
-    row-start-3
-    md:col-start-1
-    md:col-span-12
-    md:row-start-2
-    xl:row-start-1
-    xl:col-start-1
-    xl:col-span-6
-    p-7
-    !pt-0
-    md:p-12
-    xl:pl-[104px]
-    mx-0 z-10
-    xl:pr-0
-    xl:mt-0
-    xl:py-24"
+      col-start-1
+      col-span-6
+      row-start-3
+      md:col-start-1
+      md:col-span-12
+      md:row-start-2
+      xl:row-start-1
+      xl:col-start-1
+      xl:col-span-6
+      p-7
+      !pt-0
+      md:p-12
+      xl:pl-[104px]
+      mx-0 z-10
+      xl:pr-0
+      xl:mt-0
+      xl:py-24"
     >
       <div class="w-full pb-2 lg:pb-4 xl:pt-[92px] md:py-0 lg:px-0 z-10">
         <Pill className="max-md:text-sm">More than just developers</Pill>
@@ -65,7 +66,8 @@ import heroImage from "../assets/croco-13.png";
           class="fadeInUp"
           style="animation-delay: 900ms;animation-fill-mode: backwards;"
         >
-          A web development consultancy delivering scalable solutions that drive real business impact.
+          A web development consultancy delivering scalable solutions that drive
+          real business impact.
         </span>
       </div>
       <div class="flex flex-col sm:flex-row gap-[10px]">

diff --git a/apps/website/src/layouts/post-base.astro b/apps/website/src/layouts/post-base.astro
@@ -71,6 +71,8 @@ const dateObj = new Date(createdAt);
                 src={image}
                 height={500}
                 width={1000}
+                widths={[320, 480, 578, 640, 800, 920]}
+                sizes={"(max-width: 1024px): calc(100vw-64px), 940px"}
                 alt={title}
                 class="rounded-lg"
                 loading="eager"

diff --git a/apps/website/src/pages/blog/index.astro b/apps/website/src/pages/blog/index.astro
@@ -67,6 +67,12 @@ posts.sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime());
                         alt={title}
                         width={936}
                         height={528}
+                        widths={[320, 480, 578, 640, 800]}
+                        sizes={
+                          i > 0
+                            ? "(max-width: 540px) 100vw, (max-width: 1024px) calc(50vw - 64px), 480px"
+                            : "(max-width: 1024px) calc(100vw - 64px), 940px"
+                        }
                         loading={i < 3 ? "eager" : "lazy"}
                         decoding="auto"
                       />

diff --git a/apps/website/src/pages/contact/success.astro b/apps/website/src/pages/contact/success.astro
@@ -11,68 +11,75 @@ import contactSuccessHero from "../../assets/contact-success-hero.png";
   <main class="min-h-screen bg-gray-100">
     <div class="w-full h-screen flex items-center justify-center">
       <Section className="!py-0 !px-7 flex items-center justify-center w-full">
-        <div class="max-w-[1440px] w-full flex flex-col lg:flex-row items-center justify-center gap-7">
-        <!-- Content Column -->
-        <div class="w-full max-w-[501px] flex flex-col gap-7 text-center lg:text-left">
-          <!-- Main Content -->
-          <div class="flex flex-col gap-7">
-            <!-- Header -->
-            <div class="flex flex-col gap-4">
-              <h1 class="font-medium text-4xl md:text-[54px] leading-[1.1] text-secondary">
-                You're All Set!
-              </h1>
-            </div>
-
-            <!-- Description -->
-            <p class="text-lg md:text-[22px] leading-[1.45] text-secondary">
-              <span id="meeting-confirmation">
-                Your meeting is confirmed.<br>
-                A calendar invite is on its way to your inbox.<br>
-              </span>
-              Talk soon — we're looking forward to it.
-            </p>
-
-            <!-- Button -->
-            <div class="flex flex-col gap-[10px]">
-              <a
-                href="/"
-                class="flex items-center justify-center gap-[10px] px-[25px] py-4 bg-crocoder-yellow rounded-md font-medium text-base leading-[1.8] tracking-[0.02em] uppercase text-contrast hover:opacity-90 w-fit mx-auto lg:mx-0"
-              >
-                Back to homepage
-              </a>
+        <div
+          class="max-w-[1440px] w-full flex flex-col lg:flex-row items-center justify-center gap-7"
+        >
+          <!-- Content Column -->
+          <div
+            class="w-full max-w-[501px] flex flex-col gap-7 text-center lg:text-left"
+          >
+            <!-- Main Content -->
+            <div class="flex flex-col gap-7">
+              <!-- Header -->
+              <div class="flex flex-col gap-4">
+                <h1
+                  class="font-medium text-4xl md:text-[54px] leading-[1.1] text-secondary"
+                >
+                  You're All Set!
+                </h1>
+              </div>
+
+              <!-- Description -->
+              <p class="text-lg md:text-[22px] leading-[1.45] text-secondary">
+                <span id="meeting-confirmation">
+                  Your meeting is confirmed.<br />
+                  A calendar invite is on its way to your inbox.<br />
+                </span>
+                Talk soon — we're looking forward to it.
+              </p>
+
+              <!-- Button -->
+              <div class="flex flex-col gap-[10px]">
+                <a
+                  href="/"
+                  class="flex items-center justify-center gap-[10px] px-[25px] py-4 bg-crocoder-yellow rounded-md font-medium text-base leading-[1.8] tracking-[0.02em] uppercase text-contrast hover:opacity-90 w-fit mx-auto lg:mx-0"
+                >
+                  Back to homepage
+                </a>
+              </div>
             </div>
           </div>
-        </div>
-
-        <!-- Image Container -->
-        <div class="hidden md:flex w-full max-w-[706px] items-center justify-center">
-          <div class="w-full h-[529px] flex items-center justify-center">
-            <Image
-              src={contactSuccessHero}
-              alt="Success illustration"
-              class="w-full h-full object-contain"
-              loading="eager"
-              fetchpriority="high"
-              width={1652}
-              height={939}
-              widths={[320, 480, 640, 800, 1200]}
-              sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 706px"
-            />
+
+          <!-- Image Container -->
+          <div
+            class="hidden md:flex w-full max-w-[706px] items-center justify-center"
+          >
+            <div class="w-full h-[529px] flex items-center justify-center">
+              <Image
+                src={contactSuccessHero}
+                alt="Success illustration"
+                class="w-full h-full object-contain max-w-[640px]"
+                loading="eager"
+                fetchpriority="high"
+                widths={[640, 720]}
+                sizes="(max-width: 1024px) 720px, calc(50vw-56px)"
+              />
+            </div>
           </div>
         </div>
       </Section>
     </div>
   </main>
-</Base>
 
-<script is:inline>
-  // Check if the page was accessed from Calcom
-  const urlParams = new URLSearchParams(window.location.search);
-  const src = urlParams.get('src');
-  const meetingConfirmation = document.getElementById('meeting-confirmation');
-
-  if (src !== 'calcom' && meetingConfirmation) {
-    // Hide only the meeting-specific text if not from Calcom
-    meetingConfirmation.style.display = 'none';
-  }
-</script>
+  <script is:inline>
+    // Check if the page was accessed from Calcom
+    const urlParams = new URLSearchParams(window.location.search);
+    const src = urlParams.get("src");
+    const meetingConfirmation = document.getElementById("meeting-confirmation");
+
+    if (src !== "calcom" && meetingConfirmation) {
+      // Hide only the meeting-specific text if not from Calcom
+      meetingConfirmation.style.display = "none";
+    }
+  </script></Base
+>