Add Getting Started video section to homepage

Co-authored-by: garrytrinder <11563347+garrytrinder@users.noreply.github.com>

Author: Copilot

src/pages/index.astro

@@ -245,6 +245,29 @@ import Layout from '../layouts/Layout.astro';
     </div>
   </section>
 
+  <!-- Getting started video -->
+  <section class="py-32 px-6 sm:px-8">
+    <div class="max-w-4xl mx-auto text-center">
+      <p class="section-reveal text-sm font-semibold tracking-widest uppercase text-purple-400 mb-4">See It In Action</p>
+      <h2 class="section-reveal text-3xl md:text-5xl font-bold mb-8">Get started with Dev Proxy.</h2>
+      <p class="section-reveal text-lg md:text-xl mb-12" style="color: var(--text-muted);">
+        Watch how to set up Dev Proxy and start testing your app in minutes.
+      </p>
+      <div class="section-reveal rounded-2xl border overflow-hidden" style="border-color: var(--border-primary);">
+        <div style="position: relative; padding-bottom: 56.25%; height: 0;">
+          <iframe
+            src="https://www.youtube-nocookie.com/embed/HVTJlGSxhcw"
+            title="Get started with Dev Proxy"
+            style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
+            frameborder="0"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+            allowfullscreen
+          ></iframe>
+        </div>
+      </div>
+    </div>
+  </section>
+
   <!-- Quick start scenarios -->
   <section class="py-32 px-6 sm:px-8" style="background: var(--bg-secondary);">
     <div class="max-w-5xl mx-auto">