From 7c6f1f42bb889553dea39e0d7ea1dc447ee90632 Mon Sep 17 00:00:00 2001
From: stefanskoricdev <stefan@crocoder.dev>
Date: Mon, 22 Sep 2025 11:56:41 +0200
Subject: [PATCH 1/2] feat: Add Trusted by and Testimonial section

---
 apps/website/astro.config.mjs                 |  5 ++-
 apps/website/src/components/Clients.astro     | 41 +------------------
 apps/website/src/components/TrustedBy.astro   | 38 +++++++++++++++++
 .../src/components/cto/Testimonial.astro      | 12 +++++-
 .../staff-agmentation/MainContent.astro       | 15 ++++---
 .../src/pages/staff-augmentation.astro        | 11 ++++-
 6 files changed, 74 insertions(+), 48 deletions(-)
 create mode 100644 apps/website/src/components/TrustedBy.astro

diff --git a/apps/website/astro.config.mjs b/apps/website/astro.config.mjs
index ddd9212e..4b2bcd0b 100644
--- a/apps/website/astro.config.mjs
+++ b/apps/website/astro.config.mjs
@@ -19,7 +19,10 @@ export default defineConfig({
   adapter: vercel({
     imageService: true,
     imagesConfig: {
-      sizes: [320, 480, 578, 640, 720, 800, 940, 1200, 1412, 1536, 1800, 1920],
+      sizes: [
+        320, 480, 578, 640, 720, 800, 940, 1200, 1280, 1412, 1440, 1536, 1600,
+        1800, 1920,
+      ],
       formats: ["image/avif", "image/webp"],
     },
   }),
diff --git a/apps/website/src/components/Clients.astro b/apps/website/src/components/Clients.astro
index 7eea4519..d54e7856 100644
--- a/apps/website/src/components/Clients.astro
+++ b/apps/website/src/components/Clients.astro
@@ -1,47 +1,10 @@
 ---
 import Section from "./Section.astro";
+import TrustedBy from "./TrustedBy.astro";
 ---
 
 <Section className="lg:py-24">
-  <h4
-    class="text-base text-start md:text-center mx-4 md:mx-7 font-bold uppercase"
-  >
-    Trusted By:
-  </h4>
-  <div class="overflow-x-auto whitespace-nowrap px-4 no-scrollbar mt-4">
-    <div class="flex gap-7 justify-center min-w-max max-h-10 lg:max-h-[60px]">
-      <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"
-        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>
-
+  <TrustedBy />
   <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 mt-[72px] md:mt-32 lg:mt-[138px]"
   >
diff --git a/apps/website/src/components/TrustedBy.astro b/apps/website/src/components/TrustedBy.astro
new file mode 100644
index 00000000..4458c588
--- /dev/null
+++ b/apps/website/src/components/TrustedBy.astro
@@ -0,0 +1,38 @@
+<h4
+  class="text-base text-start md:text-center mx-4 md:mx-7 font-bold uppercase"
+>
+  Trusted By:
+</h4>
+<div class="overflow-x-auto whitespace-nowrap px-4 no-scrollbar mt-4">
+  <div class="flex gap-7 justify-center min-w-max max-h-10 lg:max-h-[60px]">
+    <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"
+      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>
diff --git a/apps/website/src/components/cto/Testimonial.astro b/apps/website/src/components/cto/Testimonial.astro
index 86c8e06d..7e5999a4 100644
--- a/apps/website/src/components/cto/Testimonial.astro
+++ b/apps/website/src/components/cto/Testimonial.astro
@@ -3,15 +3,25 @@ import { grid_classes } from "../_grid";
 import Section from "../Section.astro";
 import { getImage } from "astro:assets";
 import raphaelBauerBubble from "../../assets/raphael-bauer-bubble.png";
+import classnames from "classnames";
 
 const optimizedTestimonial = await getImage({
   src: raphaelBauerBubble,
   width: 569,
   height: 547,
 });
+
+type Props = {
+  classNames?: string;
+};
+
+const { classNames } = Astro.props;
 ---
 
-<Section className="bg-white" contentClassName={grid_classes}>
+<Section
+  className={classnames("bg-white", classNames)}
+  contentClassName={grid_classes}
+>
   <div
     class="bg-[#F4F4F4] rounded-2xl col-span-6 md:col-span-12 lg:col-span-10 lg:col-start-2 p-12 md:pt-0 md:pr-0 gap-7 grid relative text-secondary md:grid-cols-[auto_1fr_auto]"
   >
diff --git a/apps/website/src/components/staff-agmentation/MainContent.astro b/apps/website/src/components/staff-agmentation/MainContent.astro
index 384d5473..7d39fbf5 100644
--- a/apps/website/src/components/staff-agmentation/MainContent.astro
+++ b/apps/website/src/components/staff-agmentation/MainContent.astro
@@ -8,6 +8,7 @@ import Pill from "../../components/Pill.astro";
 import Section from "../../components/Section.astro";
 import { grid_classes } from "../_grid";
 import CircleCheck from "../icons/CircleCheck.astro";
+import { Picture } from "astro:assets";
 
 export type MainContent = {
   pillText: string;
@@ -51,11 +52,11 @@ const { data } = content;
     <div
       class="relative
       col-span-6
-      overflow-hidden
       h-[calc(120vw+100px)]
       max-h-[700px]
       md:col-span-12
-      md:h-[70vw]
+      md:h-[calc(70vw+100px)]
+      lg:h-[70vw]
       lg:col-span-6
       lg:max-h-[870px]
       xl:overflow-visible"
@@ -75,16 +76,18 @@ const { data } = content;
           lg:-left-1/5
           lg:max-w-[800px]"
       >
-        <Image
+        <Picture
           src={staffCollaborationImg}
           alt="Two male developers in CroCoder hoodies collaborating"
           class="absolute top-1/12 left-1/6 md:left-0"
+          widths={[640, 800, 1280, 1600]}
+          sizes={"(max-width: 1280px) 640px, 800px"}
         />
       </div>
       <Image
         src={crocoIcon}
         alt="Illustration of a crocodile in a cloud with laptop"
-        class="absolute bottom-0 left-4 lg:left-7 w-[300px]"
+        class="absolute bottom-0 left-4 md:left-7 w-[300px]"
       />
     </div>
     <div
@@ -165,10 +168,12 @@ const { data } = content;
             ))
           }
         </div>
-        <Image
+        <Picture
           src={idealForIllustration}
           alt="Illustration of crocodile and developers collaborating"
           class="w-[calc(100%+32px)] max-w-[715px] relative top-21"
+          widths={[320, 480, 640, 720, 800, 940, 1200, 1280, 1440, 1600]}
+          sizes={"(max-width: 768px) 100vw, 720px"}
         />
       </div>
     </div>
diff --git a/apps/website/src/pages/staff-augmentation.astro b/apps/website/src/pages/staff-augmentation.astro
index 790b549a..df372ef9 100644
--- a/apps/website/src/pages/staff-augmentation.astro
+++ b/apps/website/src/pages/staff-augmentation.astro
@@ -1,15 +1,18 @@
 ---
 import BookACallForm from "../components/BookACallForm.astro";
-import GetYourPlan from "../components/staff-agmentation/GetYourPlan.astro";
+import Testimonial from "../components/cto/Testimonial.astro";
 import Footer from "../components/footer.astro";
 import Navigation from "../components/navigation.astro";
+import Section from "../components/Section.astro";
+import GetYourPlan from "../components/staff-agmentation/GetYourPlan.astro";
 import Hero from "../components/staff-agmentation/Hero.astro";
 import MainContent from "../components/staff-agmentation/MainContent.astro";
 import OurEngineers from "../components/staff-agmentation/OurEngineers.astro";
 import Specialization from "../components/staff-agmentation/Specialization.astro";
+import ThankYouCard from "../components/staff-agmentation/ThankYouCard.astro";
+import TrustedBy from "../components/TrustedBy.astro";
 import Base from "../layouts/base.astro";
 import "../styles/main.css";
-import ThankYouCard from "../components/staff-agmentation/ThankYouCard.astro";
 
 const { ogImage = "https://www.crocoder.dev/homepage-metadata-img.png" } =
   Astro.props;
@@ -21,6 +24,10 @@ const { ogImage = "https://www.crocoder.dev/homepage-metadata-img.png" } =
   <GetYourPlan />
   <ThankYouCard />
   <MainContent />
+  <Section className="!pb-0 lg:!pt-24">
+    <TrustedBy />
+  </Section>
+  <Testimonial classNames="lg:py-24" />
   <Specialization />
   <OurEngineers />
 

From 0e0374295b396c801c15df014e92657a528d11bb Mon Sep 17 00:00:00 2001
From: stefanskoricdev <stefan@crocoder.dev>
Date: Mon, 22 Sep 2025 13:01:02 +0200
Subject: [PATCH 2/2] feat: Optimize image for smaller screens

---
 apps/website/astro.config.mjs                               | 4 ++--
 .../src/components/staff-agmentation/MainContent.astro      | 6 ++++--
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/apps/website/astro.config.mjs b/apps/website/astro.config.mjs
index 4b2bcd0b..f971097b 100644
--- a/apps/website/astro.config.mjs
+++ b/apps/website/astro.config.mjs
@@ -20,8 +20,8 @@ export default defineConfig({
     imageService: true,
     imagesConfig: {
       sizes: [
-        320, 480, 578, 640, 720, 800, 940, 1200, 1280, 1412, 1440, 1536, 1600,
-        1800, 1920,
+        320, 480, 578, 640, 720, 800, 940, 960, 1200, 1280, 1412, 1440, 1536,
+        1600, 1800, 1920,
       ],
       formats: ["image/avif", "image/webp"],
     },
diff --git a/apps/website/src/components/staff-agmentation/MainContent.astro b/apps/website/src/components/staff-agmentation/MainContent.astro
index 7d39fbf5..cd242b1c 100644
--- a/apps/website/src/components/staff-agmentation/MainContent.astro
+++ b/apps/website/src/components/staff-agmentation/MainContent.astro
@@ -80,8 +80,9 @@ const { data } = content;
           src={staffCollaborationImg}
           alt="Two male developers in CroCoder hoodies collaborating"
           class="absolute top-1/12 left-1/6 md:left-0"
-          widths={[640, 800, 1280, 1600]}
-          sizes={"(max-width: 1280px) 640px, 800px"}
+          widths={[320, 480, 640, 800, 960, 1280, 1600]}
+          sizes={"(max-width: 500px) 120vw, (max-width: 1280px) 640px, 800px"}
+          format="avif"
         />
       </div>
       <Image
@@ -174,6 +175,7 @@ const { data } = content;
           class="w-[calc(100%+32px)] max-w-[715px] relative top-21"
           widths={[320, 480, 640, 720, 800, 940, 1200, 1280, 1440, 1600]}
           sizes={"(max-width: 768px) 100vw, 720px"}
+          format="avif"
         />
       </div>
     </div>