From 73b3cc10135dc365d46007ba96b9d23be0943113 Mon Sep 17 00:00:00 2001
From: Gerard Louis Recinto <gerardrecinto@gmail.com>
Date: Sat, 3 Oct 2026 17:12:44 -0700
Subject: [PATCH] add a Watch demo button to the header that jumps to the video

---
 demo/index.html        | 11 +++++++++--
 tests/homepage.spec.ts |  8 ++++++++
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/demo/index.html b/demo/index.html
index 7f087fd79..10709ae53 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -312,7 +312,7 @@
         <div>
           <div class="flex items-center space-x-2">
             <a href="./" class="font-extrabold tracking-tight text-white text-lg hover:text-brand-400 transition">Joltrin</a>
-            <span class="text-xs px-2 py-0.5 rounded-full bg-brand-500/10 border border-brand-500/30 text-brand-400 font-mono font-medium">WASM demo</span>
+            <span class="hidden min-[440px]:inline text-xs px-2 py-0.5 rounded-full bg-brand-500/10 border border-brand-500/30 text-brand-400 font-mono font-medium whitespace-nowrap">WASM demo</span>
           </div>
           <p class="text-[10px] text-slate-400 font-mono hidden sm:block">Memory and verification for AI agents</p>
         </div>
@@ -363,6 +363,12 @@
           </button>
         </div>
 
+        <a href="#demo-video" id="watch-demo-btn"
+           class="flex items-center space-x-1.5 px-3 py-1.5 rounded-lg bg-brand-500 hover:bg-brand-400 text-black text-xs font-bold whitespace-nowrap transition">
+          <svg viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4" aria-hidden="true"><path d="M8 5v14l11-7z"/></svg>
+          <span class="sm:hidden">Demo</span><span class="hidden sm:inline">Watch demo</span>
+        </a>
+
         <button onclick="openCommandPalette()" aria-label="Open command palette"
                 class="hidden sm:flex items-center space-x-2 px-3 py-1.5 rounded-lg bg-dark-800 hover:bg-dark-700 border border-dark-700 text-xs text-slate-400 hover:text-slate-200 transition">
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
@@ -386,6 +392,7 @@
 
     <!-- Mobile Nav Panel: same destinations as the Funnel Navigation Links above, stacked for a narrow viewport. -->
     <nav id="mobile-menu-panel" class="hidden lg:hidden border-t border-dark-800 bg-dark-900 px-4 py-3 space-y-1 text-sm font-mono">
+      <a href="#demo-video" onclick="closeMobileMenu()" class="block px-3 py-2 rounded-lg text-brand-400 hover:text-white hover:bg-dark-800 transition">Watch demo</a>
       <button onclick="closeMobileMenu(); openCommandPalette();" class="block w-full text-left px-3 py-2 rounded-lg text-slate-300 hover:text-white hover:bg-dark-800 transition">🔍 Search</button>
       <a href="#verification-barrier" onclick="closeMobileMenu()" class="block px-3 py-2 rounded-lg text-slate-300 hover:text-white hover:bg-dark-800 transition">🛡️ Barrier</a>
       <a href="#durable-memory" onclick="closeMobileMenu()" class="block px-3 py-2 rounded-lg text-slate-300 hover:text-white hover:bg-dark-800 transition">🧠 Memory</a>
@@ -485,7 +492,7 @@ <h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-white tracking-t
     </section>
 
     <!-- Intro video (muted so browsers allow autoplay) -->
-    <section aria-label="Joltrin intro video" class="mb-8 rounded-2xl overflow-hidden border border-dark-700/80 bg-dark-900">
+    <section id="demo-video" aria-label="Joltrin intro video" class="scroll-mt-20 mb-8 rounded-2xl overflow-hidden border border-dark-700/80 bg-dark-900">
       <div class="relative w-full" style="aspect-ratio:16/9">
         <iframe class="absolute inset-0 w-full h-full"
           src="https://www.youtube-nocookie.com/embed/F0jYkBHJluI?autoplay=1&mute=1&loop=1&playlist=F0jYkBHJluI&playsinline=1&rel=0"
diff --git a/tests/homepage.spec.ts b/tests/homepage.spec.ts
index 8e8a799e0..288a50b71 100644
--- a/tests/homepage.spec.ts
+++ b/tests/homepage.spec.ts
@@ -24,6 +24,14 @@ test.describe('Homepage', () => {
     expect(frameY).toBeGreaterThan(heroY);
   });
 
+  test('header has a Watch demo button that jumps to the video', async ({ page }) => {
+    await page.goto('/', { waitUntil: 'domcontentloaded' });
+    const btn = page.locator('#watch-demo-btn');
+    await expect(btn).toBeVisible();
+    await expect(btn).toHaveAttribute('href', '#demo-video');
+    await expect(page.locator('#demo-video iframe')).toHaveCount(1);
+  });
+
   test('explains how to test the barrier with your own AI agent', async ({ page }) => {
     await page.goto('/', { waitUntil: 'domcontentloaded' });
     const section = page.locator('#test-your-agent');