From a56038ed86cb42ab60787ea06cecd9cfec54ca8b Mon Sep 17 00:00:00 2001
From: Victor Soria <victor.soria@disruptive-works.com>
Date: Tue, 7 Jul 2026 00:27:01 -0500
Subject: [PATCH] feat(website): embed anchor demo video between hero and demo
 banner
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds a responsive 16:9 YouTube iframe embed as the second visible
element on archipulse.org, right after the hero pitch and before the
demo banner. This is the highest-conversion placement — visitors see
the pitch, then watch it demonstrated, then click the demo CTA.

- New CSS section for #video with a padding-bottom hack for aspect
  ratio and a max width of 900px to keep it centered and readable.
- Iframe uses the standard YouTube embed with the recommended
  attributes (allow, referrerpolicy, allowfullscreen).
- Video ID: TjIFE7yhzrg (unlisted, hosted on the Disruptive Works
  YouTube channel).
---
 website/index.html | 39 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 39 insertions(+)

diff --git a/website/index.html b/website/index.html
index 46e673b..cfb30ea 100644
--- a/website/index.html
+++ b/website/index.html
@@ -204,6 +204,30 @@
       margin: 0 auto;
     }
 
+    /* ── Video section ───────────────────────────────────────────────── */
+    #video {
+      padding: 24px 24px 8px;
+      max-width: 1100px;
+      margin: 0 auto;
+    }
+    .video-wrap {
+      position: relative;
+      padding-bottom: 56.25%; /* 16:9 aspect ratio */
+      height: 0;
+      max-width: 900px;
+      margin: 0 auto;
+      border-radius: 12px;
+      overflow: hidden;
+      box-shadow: 0 8px 32px rgba(15, 23, 42, 0.08);
+    }
+    .video-wrap iframe {
+      position: absolute;
+      top: 0; left: 0;
+      width: 100%;
+      height: 100%;
+      border: 0;
+    }
+
     /* ── Demo banner ─────────────────────────────────────────────────── */
     .demo-banner {
       background: var(--brand-lt);
@@ -615,6 +639,21 @@ <h1 class="fade-up delay-1">
 
 <div class="section-divider"></div>
 
+<!-- ── Video ─────────────────────────────────────────────────────────── -->
+<section id="video">
+  <div class="video-wrap">
+    <iframe
+      src="https://www.youtube.com/embed/TjIFE7yhzrg"
+      title="ArchiPulse — AI-native Enterprise Architecture (demo)"
+      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+      referrerpolicy="strict-origin-when-cross-origin"
+      allowfullscreen
+    ></iframe>
+  </div>
+</section>
+
+<div class="section-divider"></div>
+
 <!-- ── Demo banner ───────────────────────────────────────────────────── -->
 <div class="demo-banner">
   <div class="demo-banner-text">