FEAT: Add Trusted by and Testimonial section (#626)

stefanskoricdev · web-flow · commit 0ff1ae6ca9a0 · 2025-09-22T13:19:17.000+02:00
* feat: Add Trusted by and Testimonial section

* feat: Optimize image for smaller screens
diff --git 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, 960, 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
@@ -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
@@ -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
@@ -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
@@ -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,19 @@ 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={[320, 480, 640, 800, 960, 1280, 1600]}
+          sizes={"(max-width: 500px) 120vw, (max-width: 1280px) 640px, 800px"}
+          format="avif"
         />
       </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 +169,13 @@ 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"}
+          format="avif"
         />
       </div>
     </div>
diff --git 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 />
 
