From 585c03385b6b699ea0b3e20a88a72f1b733e2e67 Mon Sep 17 00:00:00 2001
From: Ruslan Strazhnyk <strazhnyk@gmail.com>
Date: Sun, 11 Oct 2026 23:46:13 +0200
Subject: [PATCH] Embed the interactive Supademo tour inline

---
 website/app/globals.css |  7 +++----
 website/app/page.tsx    | 14 ++++++++++----
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/website/app/globals.css b/website/app/globals.css
index 4b219a2..d8c9f74 100644
--- a/website/app/globals.css
+++ b/website/app/globals.css
@@ -173,10 +173,9 @@ footer .legal-note { grid-column: 1 / -1; }
 }
 
 .feature-tour { padding-top: 24px; }
-.interactive-demo { display: block; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; margin-bottom: 32px; text-decoration: none; }
-.interactive-demo:focus-visible { outline: 3px solid var(--cyan); outline-offset: 4px; }
-.interactive-demo img { display: block; width: 100%; height: auto; }
-.interactive-demo-cta { display: block; padding: 20px; background: var(--surface); color: var(--cyan); font-weight: 700; text-align: center; }
+.interactive-demo { position: relative; box-sizing: content-box; max-height: 80vh; max-height: 80svh; aspect-ratio: 1.67; padding: 40px 0; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; margin-bottom: 24px; }
+.interactive-demo iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
+.interactive-demo iframe:focus-visible { outline: 3px solid var(--cyan); outline-offset: -4px; }
 .feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
 .feature-grid h3 { font-size: 20px; margin: 0 0 10px; }
 .feature-grid p { color: var(--muted); line-height: 1.7; margin: 0; }
diff --git a/website/app/page.tsx b/website/app/page.tsx
index 92f53a8..ea1b768 100644
--- a/website/app/page.tsx
+++ b/website/app/page.tsx
@@ -176,10 +176,16 @@ export default function Home() {
           <h2 id="feature-tour-heading">Create. Assess. Run. Heal. Challenge.</h2>
           <span>Explore the 9lives workflow in an interactive demo, then try the runner on your own Playwright tests. Native healing is experimental; a demo is not a comparative benchmark.</span>
         </div>
-        <a className="interactive-demo" href={interactiveDemo} target="_blank" rel="noreferrer" aria-label="Open the interactive 9lives demo on Supademo (new tab)">
-          <Image src="/workflows/workflow-illustration.png" alt="9lives workflow illustration" width={1280} height={720} unoptimized />
-          <span className="interactive-demo-cta">Explore the interactive demo <span aria-hidden="true">↗</span></span>
-        </a>
+        <div className="interactive-demo">
+          <iframe
+            src="https://app.supademo.com/embed/cmv43czgb0031wi0jzgno1y8r?embed_v=2&utm_source=embed"
+            loading="lazy"
+            title="9lives: repair a broken Playwright locator"
+            allow="clipboard-write"
+            allowFullScreen
+          />
+        </div>
+        <p className="hero-note"><a href={interactiveDemo} target="_blank" rel="noreferrer">Open the demo in a new tab ↗</a></p>
         <div className="feature-grid">
           <article key="Agent-assisted test generation"><h3>Agent-assisted test generation</h3><p>Your coding agent drafts Playwright specs from reviewed requirements. Capture creation provenance before assessing and executing them.</p></article>
           <article key="Test assessment"><h3>Test assessment</h3><p>9l assess flags fixed waits, skips, missing or unawaited assertions, and requirement-mapping gaps. Static findings are advisory.</p></article>