feat: add why work with us section cards

Author: stefanskoricdev

apps/website/src/assets/artificial_intelligence.svg

@@ -9,8 +9,8 @@ import Section from "../Section.astro";
 ---
 
 <Section
-  contentClassName={`${grid_classes} bg-[#5362DBE5]/[0.9] text-white rounded-[48px] mt-12 md:mt-22 max-sm:gap-0`}
-  className="bg-contrast"
+  contentClassName={`${grid_classes} bg-[#5362DBE5]/[0.9] text-white rounded-[48px] max-sm:gap-0`}
+  className="bg-contrast !pt-68"
 >
   <div
     class="flex flex-col gap-2 md:gap-4 col-span-6 md:col-span-12 md:px-8 lg:col-span-5 lg:col-start-2 max-md:px-4 lg:px-0"

apps/website/src/assets/shield_check.svg

@@ -5,10 +5,24 @@ import Pill from "../../components/Pill.astro";
 import Section from "../../components/Section.astro";
 import { grid_classes } from "../../components/_grid";
 import "../../styles/main.css";
+import { getCollection } from "astro:content";
+import { Image } from "astro:assets";
+
+const reasons = (await getCollection("vibecodemvpwhyworkwithus")) as {
+  data: {
+    image: string;
+    imageAlt: string;
+    title: string;
+  };
+}[];
+
+const images = import.meta.glob<{ default: ImageMetadata }>(
+  "/src/assets/*.svg"
+);
 ---
 
 <Section className="!p-0" contentClassName="md:max-w-screen">
-  <div class="relative pt-[196px] pb-24">
+  <div class="relative pt-49 pb-24 min-[1920px]:pb-48 min-[1920px]:pt-98">
     <Picture
       src={team}
       alt="Developers collaborating"
@@ -26,7 +40,7 @@ import "../../styles/main.css";
     </div>
     <div class="mx-auto xl:px-0">
       <div
-        class={`${grid_classes} md:max-w-[var(--max-width)] px-4 md:px-7 py-24 md:!py-[144px] md:mx-auto relative z-[2] min-[1281px]:px-0`}
+        class={`${grid_classes} md:max-w-[var(--max-width)] px-4 md:px-7 py-0 md:mx-auto relative z-[2] min-[1281px]:px-0`}
       >
         <div
           class="row-start-1
@@ -42,7 +56,7 @@ import "../../styles/main.css";
               >Why work with us</Pill
             >
             <h2
-              class="text-[18px] leading-[22px] min-[390px]:text-[24px] min-[390px]:leading-[28px] sm:text-[32px] sm:leading-[36px] md:text-[54px] md:leading-[59.4px] font-medium tracking-tight text-center"
+              class="text-[18px] leading-[22px] min-[390px]:text-[24px] min-[390px]:leading-[28px] sm:text-[32px] sm:leading-[36px] md:text-[54px] md:leading-[59.4px] font-medium lg:text-[74px] lg:leading-[82px] tracking-tight text-center"
             >
               The <span class="text-crocoder-orange">Dev Team</span> Who <span
                 class="text-crocoder-orange">Finishes</span
@@ -58,4 +72,33 @@ import "../../styles/main.css";
       </div>
     </div>
   </div>
+  <div class="bg-contrast">
+    <div
+      class={`${grid_classes} 
+    md:max-w-[var(--max-width)] 
+    px-4 md:px-7 py-0 
+    md:mx-auto 
+    relative 
+    min-[1281px]:px-0 
+    `}
+    >
+      <div
+        class="col-span-12 flex gap-2 flex-wrap items-center justify-center lg:items-stretch"
+      >
+        {
+          reasons.map((r) => (
+            <div class="bg-white/10 p-5 rounded-2xl flex flex-col gap-5 flex-grow sm:flex-[calc(50vw-40px)] min-lg:flex-1">
+              <Image
+                src={images[r.data.image]()}
+                alt={r.data.imageAlt}
+                width={48}
+                height={48}
+              />
+              <p class="text-[22px] leading-6 text-[#FFFFFF]">{r.data.title}</p>
+            </div>
+          ))
+        }
+      </div>
+    </div>
+  </div>
 </Section>

apps/website/src/assets/shipment.svg

@@ -0,0 +1,5 @@
+---
+image: "/src/assets/shipment.svg"
+imageAlt: "Illustration of a box with check mark on it"
+title: "We ship vibe-coded MVPs without rebuilding them from scratch."
+---

apps/website/src/assets/stopwatch.svg

@@ -0,0 +1,5 @@
+---
+image: "/src/assets/artificial_intelligence.svg"
+imageAlt: "Illustration of a brain"
+title: "We know your tools — GPT, Framer, Bubble, Supabase, Vercel, etc."
+---

apps/website/src/components/vibe-code-mvp/GetInTouch.astro

@@ -0,0 +1,5 @@
+---
+image: "/src/assets/target-icon-correct.svg"
+imageAlt: "Illustration of a target with arrow in its center"
+title: "We speak product, not just code."
+---