From 46356b78ede4fe6a0baa96488d3c14890eef9601 Mon Sep 17 00:00:00 2001
From: Lisa Chen <lycheen915@gmail.com>
Date: Sat, 7 Mar 2026 19:37:19 +0000
Subject: [PATCH 1/4] feat(landing): landing page stripe mock hero

---
 src/components/content/LandingHero.astro | 158 +++++++++++++++++++++++
 src/pages/index.astro                    |   2 +
 2 files changed, 160 insertions(+)
 create mode 100644 src/components/content/LandingHero.astro

diff --git a/src/components/content/LandingHero.astro b/src/components/content/LandingHero.astro
new file mode 100644
index 0000000..fb76aab
--- /dev/null
+++ b/src/components/content/LandingHero.astro
@@ -0,0 +1,158 @@
+---
+const {
+  eyebrow = "UBC Agrobot",
+  title = "Robotics for agriculture",
+  subtitle = "We design and build field-ready systems—perception, autonomy, and real-world deployment.",
+  primaryCta = { label: "Get involved", href: "/recruitment" },
+  secondaryCta = { label: "Explore projects", href: "/projects" },
+  rightImage = "/landing-hero-card.png", // optional (place in /public)
+} = Astro.props;
+---
+
+<section class="relative isolate overflow-hidden">
+  <!-- subtle page background -->
+  <div class="pointer-events-none absolute inset-0 -z-20">
+    <div
+      class="absolute inset-0 bg-gradient-to-b from-white via-white to-slate-50"
+    >
+    </div>
+  </div>
+
+  <!-- STRIPE RIBBON (make it visible by anchoring to mid/lower hero, not bottom of page) -->
+  <div class="pointer-events-none absolute inset-x-[-25%] top-[62%] -z-10">
+    <div class="agrobot-ribbon agrobot-ribbon--blur"></div>
+    <div class="agrobot-ribbon"></div>
+  </div>
+
+  <div class="mx-auto max-w-6xl px-6">
+    <div
+      class="grid min-h-[calc(100vh-var(--header-height,5rem))] items-center gap-12 py-16 lg:grid-cols-12"
+    >
+      <!-- Left: copy -->
+      <div class="lg:col-span-6">
+        <p class="text-sm font-semibold tracking-wide text-emerald-700">
+          {eyebrow}
+        </p>
+
+        <h1
+          class="mt-4 text-4xl leading-[1.05] font-semibold tracking-tight text-slate-900 sm:text-5xl md:text-6xl"
+        >
+          {title}
+        </h1>
+
+        <p class="mt-5 text-lg leading-relaxed text-slate-700 sm:text-xl">
+          {subtitle}
+        </p>
+
+        <div class="mt-8 flex flex-col gap-3 sm:flex-row sm:items-center">
+          <a
+            href={primaryCta.href}
+            class="inline-flex items-center justify-center rounded-full bg-emerald-600 px-6 py-3 text-base font-semibold text-white transition hover:bg-emerald-700"
+          >
+            {primaryCta.label}
+          </a>
+
+          <a
+            href={secondaryCta.href}
+            class="inline-flex items-center justify-center rounded-full bg-white px-6 py-3 text-base font-semibold text-slate-900 ring-1 ring-slate-200 transition hover:bg-slate-50 hover:ring-slate-300"
+          >
+            {secondaryCta.label}
+          </a>
+        </div>
+
+        <p class="mt-6 text-sm text-slate-500">
+          Build • Test • Deploy • Iterate
+        </p>
+      </div>
+
+      <!-- Right: preview card (optional) -->
+      <div class="lg:col-span-6">
+        <div class="relative mx-auto max-w-xl">
+          <div
+            class="absolute -inset-6 -z-10 rounded-[28px] bg-white/70 ring-1 ring-slate-200/70 blur-xl"
+          >
+          </div>
+
+          <div
+            class="overflow-hidden rounded-[28px] bg-white shadow-[0_24px_70px_-40px_rgba(2,6,23,0.45)] ring-1 ring-slate-200"
+          >
+            <div
+              class="flex items-center gap-2 border-b border-slate-100 px-5 py-4"
+            >
+              <span class="h-2.5 w-2.5 rounded-full bg-slate-200"></span>
+              <span class="h-2.5 w-2.5 rounded-full bg-slate-200"></span>
+              <span class="h-2.5 w-2.5 rounded-full bg-slate-200"></span>
+              <span class="ml-2 text-xs font-medium text-slate-500"
+                >Agrobot</span
+              >
+            </div>
+
+            <div class="p-6">
+              <img
+                src={rightImage}
+                alt=""
+                class="h-auto w-full rounded-2xl"
+                loading="lazy"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <style>
+    .agrobot-ribbon {
+      height: 220px;
+      width: 140%;
+      margin: 0 auto;
+      transform: rotate(-8deg);
+      border-radius: 999px;
+      opacity: 0.95;
+
+      background-size: 240% 240%;
+      background-position: 0% 50%;
+      animation: agrobotGradientMove 10s ease-in-out infinite;
+
+      /* Agrobot palette: leaf → teal → sky → lime */
+      background-image: linear-gradient(
+        115deg,
+        #22c55e 0%,
+        #10b981 18%,
+        #06b6d4 40%,
+        #60a5fa 60%,
+        #a3e635 78%,
+        #22c55e 100%
+      );
+    }
+
+    .agrobot-ribbon--blur {
+      position: absolute;
+      inset: 0;
+      transform: rotate(-8deg);
+      filter: blur(36px);
+      opacity: 0.6;
+      mix-blend-mode: multiply;
+      animation-duration: 12s;
+    }
+
+    @keyframes agrobotGradientMove {
+      0% {
+        background-position: 0% 50%;
+      }
+      50% {
+        background-position: 100% 50%;
+      }
+      100% {
+        background-position: 0% 50%;
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .agrobot-ribbon,
+      .agrobot-ribbon--blur {
+        animation: none;
+      }
+    }
+  </style>
+</section>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index e47087c..a5031a2 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,11 +1,13 @@
 ---
 import Welcome from "../components/Welcome.astro";
 import Layout from "../layouts/Layout.astro";
+import LandingHero from "../components/content/LandingHero.astro";
 
 // Welcome to Astro! Wondering what to do next? Check out the Astro documentation at https://docs.astro.build
 // Don't want to use any of this? Delete everything in this file, the `assets`, `components`, and `layouts` directories, and start fresh.
 ---
 
 <Layout>
+  <LandingHero />
   <Welcome />
 </Layout>

From eb66b0f413e3e8fba3ab8c79a8329d919613b0b9 Mon Sep 17 00:00:00 2001
From: Lisa Chen <lycheen915@gmail.com>
Date: Sat, 7 Mar 2026 20:25:27 +0000
Subject: [PATCH 2/4] feat(landing): fix stripe and add dashboard

---
 src/components/content/LandingHero.astro | 126 ++++++++++++++++++++---
 src/pages/index.astro                    |   5 +-
 2 files changed, 112 insertions(+), 19 deletions(-)

diff --git a/src/components/content/LandingHero.astro b/src/components/content/LandingHero.astro
index fb76aab..0f73ccf 100644
--- a/src/components/content/LandingHero.astro
+++ b/src/components/content/LandingHero.astro
@@ -5,12 +5,10 @@ const {
   subtitle = "We design and build field-ready systems—perception, autonomy, and real-world deployment.",
   primaryCta = { label: "Get involved", href: "/recruitment" },
   secondaryCta = { label: "Explore projects", href: "/projects" },
-  rightImage = "/landing-hero-card.png", // optional (place in /public)
 } = Astro.props;
 ---
 
-<section class="relative isolate overflow-hidden">
-  <!-- subtle page background -->
+<section class="relative isolate">
   <div class="pointer-events-none absolute inset-0 -z-20">
     <div
       class="absolute inset-0 bg-gradient-to-b from-white via-white to-slate-50"
@@ -18,7 +16,6 @@ const {
     </div>
   </div>
 
-  <!-- STRIPE RIBBON (make it visible by anchoring to mid/lower hero, not bottom of page) -->
   <div class="pointer-events-none absolute inset-x-[-25%] top-[62%] -z-10">
     <div class="agrobot-ribbon agrobot-ribbon--blur"></div>
     <div class="agrobot-ribbon"></div>
@@ -28,7 +25,7 @@ const {
     <div
       class="grid min-h-[calc(100vh-var(--header-height,5rem))] items-center gap-12 py-16 lg:grid-cols-12"
     >
-      <!-- Left: copy -->
+      <!-- Left -->
       <div class="lg:col-span-6">
         <p class="text-sm font-semibold tracking-wide text-emerald-700">
           {eyebrow}
@@ -65,7 +62,7 @@ const {
         </p>
       </div>
 
-      <!-- Right: preview card (optional) -->
+      <!-- Right -->
       <div class="lg:col-span-6">
         <div class="relative mx-auto max-w-xl">
           <div
@@ -76,6 +73,7 @@ const {
           <div
             class="overflow-hidden rounded-[28px] bg-white shadow-[0_24px_70px_-40px_rgba(2,6,23,0.45)] ring-1 ring-slate-200"
           >
+            <!-- top bar -->
             <div
               class="flex items-center gap-2 border-b border-slate-100 px-5 py-4"
             >
@@ -83,17 +81,114 @@ const {
               <span class="h-2.5 w-2.5 rounded-full bg-slate-200"></span>
               <span class="h-2.5 w-2.5 rounded-full bg-slate-200"></span>
               <span class="ml-2 text-xs font-medium text-slate-500"
-                >Agrobot</span
+                >Agrobot Dashboard</span
               >
             </div>
 
-            <div class="p-6">
-              <img
-                src={rightImage}
-                alt=""
-                class="h-auto w-full rounded-2xl"
-                loading="lazy"
-              />
+            <div class="p-5">
+              <!-- fake camera feed -->
+              <div class="relative overflow-hidden rounded-2xl bg-slate-900">
+                <div
+                  class="aspect-[16/10] w-full bg-[linear-gradient(180deg,#c7f9cc_0%,#95d5b2_38%,#40916c_38%,#2d6a4f_100%)]"
+                >
+                </div>
+
+                <!-- crop rows -->
+                <div
+                  class="absolute inset-x-0 top-[42%] bottom-0 flex justify-evenly opacity-70"
+                >
+                  <div class="h-full w-1 bg-emerald-200/40"></div>
+                  <div class="h-full w-1 bg-emerald-200/40"></div>
+                  <div class="h-full w-1 bg-emerald-200/40"></div>
+                  <div class="h-full w-1 bg-emerald-200/40"></div>
+                </div>
+
+                <!-- detection boxes -->
+                <div
+                  class="absolute top-[48%] left-[18%] h-16 w-14 rounded-md border-2 border-lime-300"
+                >
+                  <span
+                    class="absolute -top-6 left-0 rounded bg-lime-300 px-2 py-0.5 text-[10px] font-semibold text-slate-900"
+                  >
+                    crop
+                  </span>
+                </div>
+
+                <div
+                  class="absolute top-[58%] left-[46%] h-12 w-12 rounded-md border-2 border-emerald-300"
+                >
+                  <span
+                    class="absolute -top-6 left-0 rounded bg-emerald-300 px-2 py-0.5 text-[10px] font-semibold text-slate-900"
+                  >
+                    weed
+                  </span>
+                </div>
+
+                <div
+                  class="absolute top-[52%] right-[18%] h-14 w-12 rounded-md border-2 border-sky-300"
+                >
+                  <span
+                    class="absolute -top-6 left-0 rounded bg-sky-300 px-2 py-0.5 text-[10px] font-semibold text-slate-900"
+                  >
+                    row
+                  </span>
+                </div>
+
+                <!-- small status chip -->
+                <div
+                  class="absolute top-4 left-4 rounded-full bg-white/90 px-3 py-1 text-xs font-medium text-slate-700 shadow-sm"
+                >
+                  Live vision
+                </div>
+              </div>
+
+              <!-- stats -->
+              <div class="mt-4 grid grid-cols-2 gap-3">
+                <div class="rounded-2xl bg-slate-50 p-4 ring-1 ring-slate-200">
+                  <p class="text-xs font-medium text-slate-500">Mode</p>
+                  <p class="mt-1 text-sm font-semibold text-slate-900">
+                    Autonomous
+                  </p>
+                </div>
+
+                <div class="rounded-2xl bg-slate-50 p-4 ring-1 ring-slate-200">
+                  <p class="text-xs font-medium text-slate-500">Battery</p>
+                  <p class="mt-1 text-sm font-semibold text-slate-900">92%</p>
+                </div>
+
+                <div class="rounded-2xl bg-slate-50 p-4 ring-1 ring-slate-200">
+                  <p class="text-xs font-medium text-slate-500">
+                    Detected crops
+                  </p>
+                  <p class="mt-1 text-sm font-semibold text-slate-900">67</p>
+                </div>
+
+                <div class="rounded-2xl bg-slate-50 p-4 ring-1 ring-slate-200">
+                  <p class="text-xs font-medium text-slate-500">Path status</p>
+                  <p class="mt-1 text-sm font-semibold text-emerald-700">
+                    On track
+                  </p>
+                </div>
+              </div>
+
+              <!-- bottom status row -->
+              <div
+                class="mt-4 flex items-center justify-between rounded-2xl bg-white px-4 py-3 ring-1 ring-slate-200"
+              >
+                <div>
+                  <p class="text-xs font-medium text-slate-500">
+                    System health
+                  </p>
+                  <p class="text-sm font-semibold text-slate-900">Nominal</p>
+                </div>
+
+                <div
+                  class="flex items-center gap-2 rounded-full bg-emerald-50 px-3 py-1 text-xs font-semibold text-emerald-700"
+                >
+                  <span class="h-2 w-2 rounded-full bg-emerald-500"></span>
+                  Online
+                </div>
+              </div>
             </div>
           </div>
         </div>
@@ -109,12 +204,9 @@ const {
       transform: rotate(-8deg);
       border-radius: 999px;
       opacity: 0.95;
-
       background-size: 240% 240%;
       background-position: 0% 50%;
       animation: agrobotGradientMove 10s ease-in-out infinite;
-
-      /* Agrobot palette: leaf → teal → sky → lime */
       background-image: linear-gradient(
         115deg,
         #22c55e 0%,
diff --git a/src/pages/index.astro b/src/pages/index.astro
index a5031a2..288205c 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -8,6 +8,7 @@ import LandingHero from "../components/content/LandingHero.astro";
 ---
 
 <Layout>
-  <LandingHero />
-  <Welcome />
+  <main class="pb-64">
+    <LandingHero />
+  </main>
 </Layout>

From 3d156ec0c55c7a7d16b07b7acb7fb2f4d0aba2a0 Mon Sep 17 00:00:00 2001
From: Lisa Chen <lycheen915@gmail.com>
Date: Sat, 7 Mar 2026 20:36:38 +0000
Subject: [PATCH 3/4] feat(landing): add comments to hero for better
 maintainabiliyy

---
 src/components/content/LandingHero.astro | 105 ++++++++++++++++++++---
 1 file changed, 92 insertions(+), 13 deletions(-)

diff --git a/src/components/content/LandingHero.astro b/src/components/content/LandingHero.astro
index 0f73ccf..aa53328 100644
--- a/src/components/content/LandingHero.astro
+++ b/src/components/content/LandingHero.astro
@@ -1,14 +1,32 @@
 ---
+/*
+Props allow this component to be reused with different text
+without modifying the layout or styling.
+*/
 const {
   eyebrow = "UBC Agrobot",
   title = "Robotics for agriculture",
-  subtitle = "We design and build field-ready systems—perception, autonomy, and real-world deployment.",
+  subtitle = "We design and build field-ready systems. For perception, autonomy, and real-world deployment.",
   primaryCta = { label: "Get involved", href: "/recruitment" },
   secondaryCta = { label: "Explore projects", href: "/projects" },
 } = Astro.props;
 ---
 
+<!--
+Hero section container.
+
+relative + isolate:
+Creates a new stacking context so our background layers,
+gradient ribbon, and content can use z-index safely.
+-->
 <section class="relative isolate">
+  <!--
+  Background gradient layer.
+
+  This sits behind everything else and provides a subtle
+  page background similar to Stripe's landing pages.
+  pointer-events-none ensures it never blocks interactions.
+  -->
   <div class="pointer-events-none absolute inset-0 -z-20">
     <div
       class="absolute inset-0 bg-gradient-to-b from-white via-white to-slate-50"
@@ -16,31 +34,69 @@ const {
     </div>
   </div>
 
+  <!--
+  Animated gradient ribbon.
+
+  This creates the moving "Stripe-style" diagonal band
+  that flows across the hero and into the next section.
+
+  inset-x-[-25%] makes it wider than the viewport so the
+  rotation doesn't expose empty edges.
+
+  Two layers are used:
+  1) blurred glow layer
+  2) crisp ribbon layer
+  -->
   <div class="pointer-events-none absolute inset-x-[-25%] top-[62%] -z-10">
     <div class="agrobot-ribbon agrobot-ribbon--blur"></div>
     <div class="agrobot-ribbon"></div>
   </div>
 
+  <!--
+  Main content container.
+
+  max-w-6xl centers the layout and keeps it readable
+  on large screens.
+  -->
   <div class="mx-auto max-w-6xl px-6">
+    <!--
+    Hero layout grid.
+
+    lg:grid-cols-12 creates a 12-column grid on large screens
+    so we can split content 50/50 between text and dashboard.
+
+    min-h ensures the hero fills the viewport minus the header.
+    -->
     <div
       class="grid min-h-[calc(100vh-var(--header-height,5rem))] items-center gap-12 py-16 lg:grid-cols-12"
     >
-      <!-- Left -->
+      <!-- ===================== -->
+      <!-- LEFT SIDE: HERO TEXT -->
+      <!-- ===================== -->
       <div class="lg:col-span-6">
+        <!-- Small label above the title -->
         <p class="text-sm font-semibold tracking-wide text-emerald-700">
           {eyebrow}
         </p>
 
+        <!-- Main headline -->
         <h1
           class="mt-4 text-4xl leading-[1.05] font-semibold tracking-tight text-slate-900 sm:text-5xl md:text-6xl"
         >
           {title}
         </h1>
 
+        <!-- Supporting description -->
         <p class="mt-5 text-lg leading-relaxed text-slate-700 sm:text-xl">
           {subtitle}
         </p>
 
+        <!--
+        Primary and secondary CTA buttons.
+
+        Primary = filled green button
+        Secondary = outlined button
+        -->
         <div class="mt-8 flex flex-col gap-3 sm:flex-row sm:items-center">
           <a
             href={primaryCta.href}
@@ -57,43 +113,60 @@ const {
           </a>
         </div>
 
+        <!-- Small tagline -->
         <p class="mt-6 text-sm text-slate-500">
           Build • Test • Deploy • Iterate
         </p>
       </div>
 
-      <!-- Right -->
+      <!-- =========================== -->
+      <!-- RIGHT SIDE: DASHBOARD MOCK -->
+      <!-- =========================== -->
       <div class="lg:col-span-6">
+        <!--
+        Card wrapper.
+
+        This adds the glowing blurred halo behind the dashboard
+        to make it feel elevated above the ribbon background.
+        -->
         <div class="relative mx-auto max-w-xl">
+          <!-- Glow effect behind the card -->
           <div
             class="absolute -inset-6 -z-10 rounded-[28px] bg-white/70 ring-1 ring-slate-200/70 blur-xl"
           >
           </div>
 
+          <!-- Main dashboard card -->
           <div
             class="overflow-hidden rounded-[28px] bg-white shadow-[0_24px_70px_-40px_rgba(2,6,23,0.45)] ring-1 ring-slate-200"
           >
-            <!-- top bar -->
+            <!-- Fake window title bar -->
             <div
               class="flex items-center gap-2 border-b border-slate-100 px-5 py-4"
             >
               <span class="h-2.5 w-2.5 rounded-full bg-slate-200"></span>
               <span class="h-2.5 w-2.5 rounded-full bg-slate-200"></span>
               <span class="h-2.5 w-2.5 rounded-full bg-slate-200"></span>
-              <span class="ml-2 text-xs font-medium text-slate-500"
-                >Agrobot Dashboard</span
-              >
+              <span class="ml-2 text-xs font-medium text-slate-500">
+                Agrobot Dashboard
+              </span>
             </div>
 
             <div class="p-5">
-              <!-- fake camera feed -->
+              <!--
+              Mock "live camera feed" for robot vision.
+
+              This simulates what a real robotics UI might show
+              (computer vision detections in crop rows).
+              -->
               <div class="relative overflow-hidden rounded-2xl bg-slate-900">
+                <!-- Fake field background -->
                 <div
                   class="aspect-[16/10] w-full bg-[linear-gradient(180deg,#c7f9cc_0%,#95d5b2_38%,#40916c_38%,#2d6a4f_100%)]"
                 >
                 </div>
 
-                <!-- crop rows -->
+                <!-- Crop rows -->
                 <div
                   class="absolute inset-x-0 top-[42%] bottom-0 flex justify-evenly opacity-70"
                 >
@@ -103,7 +176,7 @@ const {
                   <div class="h-full w-1 bg-emerald-200/40"></div>
                 </div>
 
-                <!-- detection boxes -->
+                <!-- Simulated object detection boxes -->
                 <div
                   class="absolute top-[48%] left-[18%] h-16 w-14 rounded-md border-2 border-lime-300"
                 >
@@ -134,7 +207,7 @@ const {
                   </span>
                 </div>
 
-                <!-- small status chip -->
+                <!-- Status badge -->
                 <div
                   class="absolute top-4 left-4 rounded-full bg-white/90 px-3 py-1 text-xs font-medium text-slate-700 shadow-sm"
                 >
@@ -142,7 +215,7 @@ const {
                 </div>
               </div>
 
-              <!-- stats -->
+              <!-- Robot status cards -->
               <div class="mt-4 grid grid-cols-2 gap-3">
                 <div class="rounded-2xl bg-slate-50 p-4 ring-1 ring-slate-200">
                   <p class="text-xs font-medium text-slate-500">Mode</p>
@@ -171,7 +244,7 @@ const {
                 </div>
               </div>
 
-              <!-- bottom status row -->
+              <!-- System health row -->
               <div
                 class="mt-4 flex items-center justify-between rounded-2xl bg-white px-4 py-3 ring-1 ring-slate-200"
               >
@@ -196,6 +269,12 @@ const {
     </div>
   </div>
 
+  <!--
+  Custom CSS for the animated gradient ribbon.
+
+  Tailwind handles most styling, but this animation
+  is easier to implement with custom CSS.
+  -->
   <style>
     .agrobot-ribbon {
       height: 220px;

From 95e5221ab61a8ce18de240c500f43e91ccbcb786 Mon Sep 17 00:00:00 2001
From: Lisa Chen <lycheen915@gmail.com>
Date: Sat, 7 Mar 2026 21:09:19 +0000
Subject: [PATCH 4/4] feat(landing): split into componenets for better
 maintainability

---
 src/components/content/LandingHero.astro | 274 ++---------------------
 src/components/hero/HeroDashboard.astro  | 133 +++++++++++
 src/components/hero/HeroRibbon.astro     |  62 +++++
 3 files changed, 216 insertions(+), 253 deletions(-)
 create mode 100644 src/components/hero/HeroDashboard.astro
 create mode 100644 src/components/hero/HeroRibbon.astro

diff --git a/src/components/content/LandingHero.astro b/src/components/content/LandingHero.astro
index aa53328..9a65896 100644
--- a/src/components/content/LandingHero.astro
+++ b/src/components/content/LandingHero.astro
@@ -1,4 +1,11 @@
 ---
+/*
+Import the visual sub-components so the landing hero
+only handles layout + text content.
+*/
+import HeroRibbon from "../hero/HeroRibbon.astro";
+import HeroDashboard from "../hero/HeroDashboard.astro";
+
 /*
 Props allow this component to be reused with different text
 without modifying the layout or styling.
@@ -16,17 +23,11 @@ const {
 Hero section container.
 
 relative + isolate:
-Creates a new stacking context so our background layers,
-gradient ribbon, and content can use z-index safely.
+Creates a local stacking context so the background, ribbon,
+and content layer in a predictable way.
 -->
 <section class="relative isolate">
-  <!--
-  Background gradient layer.
-
-  This sits behind everything else and provides a subtle
-  page background similar to Stripe's landing pages.
-  pointer-events-none ensures it never blocks interactions.
-  -->
+  <!-- Subtle page background -->
   <div class="pointer-events-none absolute inset-0 -z-20">
     <div
       class="absolute inset-0 bg-gradient-to-b from-white via-white to-slate-50"
@@ -34,69 +35,37 @@ gradient ribbon, and content can use z-index safely.
     </div>
   </div>
 
-  <!--
-  Animated gradient ribbon.
-
-  This creates the moving "Stripe-style" diagonal band
-  that flows across the hero and into the next section.
-
-  inset-x-[-25%] makes it wider than the viewport so the
-  rotation doesn't expose empty edges.
-
-  Two layers are used:
-  1) blurred glow layer
-  2) crisp ribbon layer
-  -->
-  <div class="pointer-events-none absolute inset-x-[-25%] top-[62%] -z-10">
-    <div class="agrobot-ribbon agrobot-ribbon--blur"></div>
-    <div class="agrobot-ribbon"></div>
-  </div>
-
-  <!--
-  Main content container.
+  <!-- Animated Stripe-style ribbon -->
+  <HeroRibbon />
 
-  max-w-6xl centers the layout and keeps it readable
-  on large screens.
-  -->
+  <!-- Main content wrapper -->
   <div class="mx-auto max-w-6xl px-6">
     <!--
-    Hero layout grid.
+    12-column responsive hero layout.
 
-    lg:grid-cols-12 creates a 12-column grid on large screens
-    so we can split content 50/50 between text and dashboard.
-
-    min-h ensures the hero fills the viewport minus the header.
+    Left = text content
+    Right = product/dashboard mock
     -->
     <div
       class="grid min-h-[calc(100vh-var(--header-height,5rem))] items-center gap-12 py-16 lg:grid-cols-12"
     >
-      <!-- ===================== -->
-      <!-- LEFT SIDE: HERO TEXT -->
-      <!-- ===================== -->
+      <!-- Left: hero messaging -->
       <div class="lg:col-span-6">
-        <!-- Small label above the title -->
         <p class="text-sm font-semibold tracking-wide text-emerald-700">
           {eyebrow}
         </p>
 
-        <!-- Main headline -->
         <h1
           class="mt-4 text-4xl leading-[1.05] font-semibold tracking-tight text-slate-900 sm:text-5xl md:text-6xl"
         >
           {title}
         </h1>
 
-        <!-- Supporting description -->
         <p class="mt-5 text-lg leading-relaxed text-slate-700 sm:text-xl">
           {subtitle}
         </p>
 
-        <!--
-        Primary and secondary CTA buttons.
-
-        Primary = filled green button
-        Secondary = outlined button
-        -->
+        <!-- CTA buttons -->
         <div class="mt-8 flex flex-col gap-3 sm:flex-row sm:items-center">
           <a
             href={primaryCta.href}
@@ -113,217 +82,16 @@ gradient ribbon, and content can use z-index safely.
           </a>
         </div>
 
-        <!-- Small tagline -->
+        <!-- Small supporting tagline -->
         <p class="mt-6 text-sm text-slate-500">
           Build • Test • Deploy • Iterate
         </p>
       </div>
 
-      <!-- =========================== -->
-      <!-- RIGHT SIDE: DASHBOARD MOCK -->
-      <!-- =========================== -->
+      <!-- Right: dashboard visual -->
       <div class="lg:col-span-6">
-        <!--
-        Card wrapper.
-
-        This adds the glowing blurred halo behind the dashboard
-        to make it feel elevated above the ribbon background.
-        -->
-        <div class="relative mx-auto max-w-xl">
-          <!-- Glow effect behind the card -->
-          <div
-            class="absolute -inset-6 -z-10 rounded-[28px] bg-white/70 ring-1 ring-slate-200/70 blur-xl"
-          >
-          </div>
-
-          <!-- Main dashboard card -->
-          <div
-            class="overflow-hidden rounded-[28px] bg-white shadow-[0_24px_70px_-40px_rgba(2,6,23,0.45)] ring-1 ring-slate-200"
-          >
-            <!-- Fake window title bar -->
-            <div
-              class="flex items-center gap-2 border-b border-slate-100 px-5 py-4"
-            >
-              <span class="h-2.5 w-2.5 rounded-full bg-slate-200"></span>
-              <span class="h-2.5 w-2.5 rounded-full bg-slate-200"></span>
-              <span class="h-2.5 w-2.5 rounded-full bg-slate-200"></span>
-              <span class="ml-2 text-xs font-medium text-slate-500">
-                Agrobot Dashboard
-              </span>
-            </div>
-
-            <div class="p-5">
-              <!--
-              Mock "live camera feed" for robot vision.
-
-              This simulates what a real robotics UI might show
-              (computer vision detections in crop rows).
-              -->
-              <div class="relative overflow-hidden rounded-2xl bg-slate-900">
-                <!-- Fake field background -->
-                <div
-                  class="aspect-[16/10] w-full bg-[linear-gradient(180deg,#c7f9cc_0%,#95d5b2_38%,#40916c_38%,#2d6a4f_100%)]"
-                >
-                </div>
-
-                <!-- Crop rows -->
-                <div
-                  class="absolute inset-x-0 top-[42%] bottom-0 flex justify-evenly opacity-70"
-                >
-                  <div class="h-full w-1 bg-emerald-200/40"></div>
-                  <div class="h-full w-1 bg-emerald-200/40"></div>
-                  <div class="h-full w-1 bg-emerald-200/40"></div>
-                  <div class="h-full w-1 bg-emerald-200/40"></div>
-                </div>
-
-                <!-- Simulated object detection boxes -->
-                <div
-                  class="absolute top-[48%] left-[18%] h-16 w-14 rounded-md border-2 border-lime-300"
-                >
-                  <span
-                    class="absolute -top-6 left-0 rounded bg-lime-300 px-2 py-0.5 text-[10px] font-semibold text-slate-900"
-                  >
-                    crop
-                  </span>
-                </div>
-
-                <div
-                  class="absolute top-[58%] left-[46%] h-12 w-12 rounded-md border-2 border-emerald-300"
-                >
-                  <span
-                    class="absolute -top-6 left-0 rounded bg-emerald-300 px-2 py-0.5 text-[10px] font-semibold text-slate-900"
-                  >
-                    weed
-                  </span>
-                </div>
-
-                <div
-                  class="absolute top-[52%] right-[18%] h-14 w-12 rounded-md border-2 border-sky-300"
-                >
-                  <span
-                    class="absolute -top-6 left-0 rounded bg-sky-300 px-2 py-0.5 text-[10px] font-semibold text-slate-900"
-                  >
-                    row
-                  </span>
-                </div>
-
-                <!-- Status badge -->
-                <div
-                  class="absolute top-4 left-4 rounded-full bg-white/90 px-3 py-1 text-xs font-medium text-slate-700 shadow-sm"
-                >
-                  Live vision
-                </div>
-              </div>
-
-              <!-- Robot status cards -->
-              <div class="mt-4 grid grid-cols-2 gap-3">
-                <div class="rounded-2xl bg-slate-50 p-4 ring-1 ring-slate-200">
-                  <p class="text-xs font-medium text-slate-500">Mode</p>
-                  <p class="mt-1 text-sm font-semibold text-slate-900">
-                    Autonomous
-                  </p>
-                </div>
-
-                <div class="rounded-2xl bg-slate-50 p-4 ring-1 ring-slate-200">
-                  <p class="text-xs font-medium text-slate-500">Battery</p>
-                  <p class="mt-1 text-sm font-semibold text-slate-900">92%</p>
-                </div>
-
-                <div class="rounded-2xl bg-slate-50 p-4 ring-1 ring-slate-200">
-                  <p class="text-xs font-medium text-slate-500">
-                    Detected crops
-                  </p>
-                  <p class="mt-1 text-sm font-semibold text-slate-900">67</p>
-                </div>
-
-                <div class="rounded-2xl bg-slate-50 p-4 ring-1 ring-slate-200">
-                  <p class="text-xs font-medium text-slate-500">Path status</p>
-                  <p class="mt-1 text-sm font-semibold text-emerald-700">
-                    On track
-                  </p>
-                </div>
-              </div>
-
-              <!-- System health row -->
-              <div
-                class="mt-4 flex items-center justify-between rounded-2xl bg-white px-4 py-3 ring-1 ring-slate-200"
-              >
-                <div>
-                  <p class="text-xs font-medium text-slate-500">
-                    System health
-                  </p>
-                  <p class="text-sm font-semibold text-slate-900">Nominal</p>
-                </div>
-
-                <div
-                  class="flex items-center gap-2 rounded-full bg-emerald-50 px-3 py-1 text-xs font-semibold text-emerald-700"
-                >
-                  <span class="h-2 w-2 rounded-full bg-emerald-500"></span>
-                  Online
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
+        <HeroDashboard />
       </div>
     </div>
   </div>
-
-  <!--
-  Custom CSS for the animated gradient ribbon.
-
-  Tailwind handles most styling, but this animation
-  is easier to implement with custom CSS.
-  -->
-  <style>
-    .agrobot-ribbon {
-      height: 220px;
-      width: 140%;
-      margin: 0 auto;
-      transform: rotate(-8deg);
-      border-radius: 999px;
-      opacity: 0.95;
-      background-size: 240% 240%;
-      background-position: 0% 50%;
-      animation: agrobotGradientMove 10s ease-in-out infinite;
-      background-image: linear-gradient(
-        115deg,
-        #22c55e 0%,
-        #10b981 18%,
-        #06b6d4 40%,
-        #60a5fa 60%,
-        #a3e635 78%,
-        #22c55e 100%
-      );
-    }
-
-    .agrobot-ribbon--blur {
-      position: absolute;
-      inset: 0;
-      transform: rotate(-8deg);
-      filter: blur(36px);
-      opacity: 0.6;
-      mix-blend-mode: multiply;
-      animation-duration: 12s;
-    }
-
-    @keyframes agrobotGradientMove {
-      0% {
-        background-position: 0% 50%;
-      }
-      50% {
-        background-position: 100% 50%;
-      }
-      100% {
-        background-position: 0% 50%;
-      }
-    }
-
-    @media (prefers-reduced-motion: reduce) {
-      .agrobot-ribbon,
-      .agrobot-ribbon--blur {
-        animation: none;
-      }
-    }
-  </style>
 </section>
diff --git a/src/components/hero/HeroDashboard.astro b/src/components/hero/HeroDashboard.astro
new file mode 100644
index 0000000..9d749bb
--- /dev/null
+++ b/src/components/hero/HeroDashboard.astro
@@ -0,0 +1,133 @@
+---
+/*
+Dashboard mock shown on the right side of the landing hero.
+
+This simulates a robotics/computer vision interface so the page
+feels like a real product/engineering site instead of just text.
+*/
+---
+
+<div class="relative mx-auto max-w-xl">
+  <!-- Soft blurred glow behind the dashboard card -->
+  <div
+    class="absolute -inset-6 -z-10 rounded-[28px] bg-white/70 ring-1 ring-slate-200/70 blur-xl"
+  >
+  </div>
+
+  <!-- Main dashboard card -->
+  <div
+    class="overflow-hidden rounded-[28px] bg-white shadow-[0_24px_70px_-40px_rgba(2,6,23,0.45)] ring-1 ring-slate-200"
+  >
+    <!-- Fake window bar -->
+    <div class="flex items-center gap-2 border-b border-slate-100 px-5 py-4">
+      <span class="h-2.5 w-2.5 rounded-full bg-slate-200"></span>
+      <span class="h-2.5 w-2.5 rounded-full bg-slate-200"></span>
+      <span class="h-2.5 w-2.5 rounded-full bg-slate-200"></span>
+      <span class="ml-2 text-xs font-medium text-slate-500">
+        Agrobot Dashboard
+      </span>
+    </div>
+
+    <div class="p-5">
+      <!-- Mock camera / computer vision feed -->
+      <div class="relative overflow-hidden rounded-2xl bg-slate-900">
+        <!-- Fake field background -->
+        <div
+          class="aspect-[16/10] w-full"
+          style="background: linear-gradient(180deg, #c7f9cc 0%, #95d5b2 38%, #40916c 38%, #2d6a4f 100%);"
+        >
+        </div>
+
+        <!-- Crop rows -->
+        <div
+          class="absolute inset-x-0 top-[42%] bottom-0 flex justify-evenly opacity-70"
+        >
+          <div class="h-full w-1 bg-emerald-200/40"></div>
+          <div class="h-full w-1 bg-emerald-200/40"></div>
+          <div class="h-full w-1 bg-emerald-200/40"></div>
+          <div class="h-full w-1 bg-emerald-200/40"></div>
+        </div>
+
+        <!-- Detection box: crop -->
+        <div
+          class="absolute top-[48%] left-[18%] h-16 w-14 rounded-md border-2 border-lime-300"
+        >
+          <span
+            class="absolute -top-6 left-0 rounded bg-lime-300 px-2 py-0.5 text-[10px] font-semibold text-slate-900"
+          >
+            crop
+          </span>
+        </div>
+
+        <!-- Detection box: weed -->
+        <div
+          class="absolute top-[58%] left-[46%] h-12 w-12 rounded-md border-2 border-emerald-300"
+        >
+          <span
+            class="absolute -top-6 left-0 rounded bg-emerald-300 px-2 py-0.5 text-[10px] font-semibold text-slate-900"
+          >
+            weed
+          </span>
+        </div>
+
+        <!-- Detection box: row -->
+        <div
+          class="absolute top-[52%] right-[18%] h-14 w-12 rounded-md border-2 border-sky-300"
+        >
+          <span
+            class="absolute -top-6 left-0 rounded bg-sky-300 px-2 py-0.5 text-[10px] font-semibold text-slate-900"
+          >
+            row
+          </span>
+        </div>
+
+        <!-- Small status chip -->
+        <div
+          class="absolute top-4 left-4 rounded-full bg-white/90 px-3 py-1 text-xs font-medium text-slate-700 shadow-sm"
+        >
+          Live vision
+        </div>
+      </div>
+
+      <!-- Robot status cards -->
+      <div class="mt-4 grid grid-cols-2 gap-3">
+        <div class="rounded-2xl bg-slate-50 p-4 ring-1 ring-slate-200">
+          <p class="text-xs font-medium text-slate-500">Mode</p>
+          <p class="mt-1 text-sm font-semibold text-slate-900">Autonomous</p>
+        </div>
+
+        <div class="rounded-2xl bg-slate-50 p-4 ring-1 ring-slate-200">
+          <p class="text-xs font-medium text-slate-500">Battery</p>
+          <p class="mt-1 text-sm font-semibold text-slate-900">92%</p>
+        </div>
+
+        <div class="rounded-2xl bg-slate-50 p-4 ring-1 ring-slate-200">
+          <p class="text-xs font-medium text-slate-500">Detected crops</p>
+          <p class="mt-1 text-sm font-semibold text-slate-900">67</p>
+        </div>
+
+        <div class="rounded-2xl bg-slate-50 p-4 ring-1 ring-slate-200">
+          <p class="text-xs font-medium text-slate-500">Path status</p>
+          <p class="mt-1 text-sm font-semibold text-emerald-700">On track</p>
+        </div>
+      </div>
+
+      <!-- Bottom health/status row -->
+      <div
+        class="mt-4 flex items-center justify-between rounded-2xl bg-white px-4 py-3 ring-1 ring-slate-200"
+      >
+        <div>
+          <p class="text-xs font-medium text-slate-500">System health</p>
+          <p class="text-sm font-semibold text-slate-900">Nominal</p>
+        </div>
+
+        <div
+          class="flex items-center gap-2 rounded-full bg-emerald-50 px-3 py-1 text-xs font-semibold text-emerald-700"
+        >
+          <span class="h-2 w-2 rounded-full bg-emerald-500"></span>
+          Online
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/src/components/hero/HeroRibbon.astro b/src/components/hero/HeroRibbon.astro
new file mode 100644
index 0000000..a71fbd8
--- /dev/null
+++ b/src/components/hero/HeroRibbon.astro
@@ -0,0 +1,62 @@
+---
+/*
+Animated gradient ribbon background.
+*/
+---
+
+<div class="pointer-events-none absolute inset-x-[-25%] top-[62%] -z-10">
+  <div class="agrobot-ribbon agrobot-ribbon--blur"></div>
+  <div class="agrobot-ribbon"></div>
+</div>
+
+<style>
+  .agrobot-ribbon {
+    height: 220px;
+    width: 140%;
+    margin: 0 auto;
+    transform: rotate(-8deg);
+    border-radius: 999px;
+    opacity: 0.95;
+    background-size: 240% 240%;
+    background-position: 0% 50%;
+    animation: agrobotGradientMove 10s ease-in-out infinite;
+    background-image: linear-gradient(
+      115deg,
+      #22c55e 0%,
+      #10b981 18%,
+      #06b6d4 40%,
+      #60a5fa 60%,
+      #a3e635 78%,
+      #22c55e 100%
+    );
+  }
+
+  .agrobot-ribbon--blur {
+    position: absolute;
+    inset: 0;
+    transform: rotate(-8deg);
+    filter: blur(36px);
+    opacity: 0.6;
+    mix-blend-mode: multiply;
+    animation-duration: 12s;
+  }
+
+  @keyframes agrobotGradientMove {
+    0% {
+      background-position: 0% 50%;
+    }
+    50% {
+      background-position: 100% 50%;
+    }
+    100% {
+      background-position: 0% 50%;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .agrobot-ribbon,
+    .agrobot-ribbon--blur {
+      animation: none;
+    }
+  }
+</style>