From 4416c65ee1a4fb6a677bff5ca92128af54c83994 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 5 May 2026 13:27:15 +0000
Subject: [PATCH 1/3] ADD YouTube play button overlay on hero sync diagram

Renders a YouTube-style play SVG centered on the replication diagram in
the hero section. Clicking it opens the existing main video modal.
---
 .../src/components/hero-section/T4_hero_b.tsx |  9 +++-
 .../src/components/replication-diagram.tsx    | 49 +++++++++++++++++++
 2 files changed, 57 insertions(+), 1 deletion(-)

diff --git a/docs-src/src/components/hero-section/T4_hero_b.tsx b/docs-src/src/components/hero-section/T4_hero_b.tsx
index d22a5c6f471..a7347279251 100644
--- a/docs-src/src/components/hero-section/T4_hero_b.tsx
+++ b/docs-src/src/components/hero-section/T4_hero_b.tsx
@@ -77,7 +77,14 @@ export function HeroSection_B(props: {
                         alignItems: 'center',
                     }}
                 >
-                    <ReplicationDiagram dark={true} hasIcon={false} />
+                    <ReplicationDiagram
+                        dark={true}
+                        hasIcon={false}
+                        onPlayClick={() => {
+                            setOpenVideo(true);
+                            triggerTrackingEvent('hero_section_video_open_diagram', 0.4);
+                        }}
+                    />
                 </div>
             </div>
             <div className="flex-start-center" style={{display: 'flex'}}>
diff --git a/docs-src/src/components/replication-diagram.tsx b/docs-src/src/components/replication-diagram.tsx
index 1700b212ec9..fd55e7544b9 100644
--- a/docs-src/src/components/replication-diagram.tsx
+++ b/docs-src/src/components/replication-diagram.tsx
@@ -19,11 +19,13 @@ export function ReplicationDiagram({
   dark,
   hasIcon = true,
   demoOffline = false,
+  onPlayClick,
 }: {
   scale?: number;
   dark: boolean;
   hasIcon?: boolean;
   demoOffline?: boolean;
+  onPlayClick?: () => void;
 }) {
   const containerRef = useRef<HTMLDivElement | null>(null);
 
@@ -232,6 +234,33 @@ export function ReplicationDiagram({
           <Cloud darkMode={dark} style={{ width: '100%' }} hasIcon={hasIcon} />
         </div>
 
+        {/* YouTube play button (center overlay) */}
+        {onPlayClick && (
+          <div
+            onClick={onPlayClick}
+            role="button"
+            aria-label="Play video"
+            style={{
+              position: 'absolute',
+              left: centerX + offsetX,
+              top: centerY + offsetY,
+              transform: 'translate(-50%, -50%)',
+              cursor: 'pointer',
+              zIndex: 10,
+              filter: 'drop-shadow(0 4px 12px rgba(0,0,0,0.45))',
+              transition: 'transform 0.15s ease-out',
+            }}
+            onMouseEnter={(e) => {
+              e.currentTarget.style.transform = 'translate(-50%, -50%) scale(1.08)';
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.transform = 'translate(-50%, -50%) scale(1)';
+            }}
+          >
+            <YouTubePlayButtonSvg width={68 * scale} />
+          </div>
+        )}
+
         {/* Lines & devices */}
         {linesData.map(({ angleDeg, lineLength, deviceX, deviceY, inwardName, outwardName }, i) => {
           const lineStart = serverRadius + serverMargin;
@@ -369,3 +398,23 @@ const styles = {
     overflow: 'visible', // let diagram content grow
   } as React.CSSProperties,
 };
+
+function YouTubePlayButtonSvg({ width = 68 }: { width?: number; }) {
+  const height = (width * 48) / 68;
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={width}
+      height={height}
+      viewBox="0 0 68 48"
+      aria-hidden="true"
+      focusable="false"
+    >
+      <path
+        d="M66.52 7.74c-.78-2.93-2.49-5.41-5.42-6.19C55.79.13 34 0 34 0S12.21.13 6.9 1.55c-2.93.78-4.63 3.26-5.42 6.19C.06 13.05 0 24 0 24s.06 10.95 1.48 16.26c.78 2.93 2.49 5.41 5.42 6.19C12.21 47.87 34 48 34 48s21.79-.13 27.1-1.55c2.93-.78 4.64-3.26 5.42-6.19C67.94 34.95 68 24 68 24s-.06-10.95-1.48-16.26z"
+        fill="#f00"
+      />
+      <path d="M45 24 27 14v20" fill="#fff" />
+    </svg>
+  );
+}

From df5d61122e93ee2b979ebb950176acd614a7c65d Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 5 May 2026 14:15:16 +0000
Subject: [PATCH 2/3] Reduce YouTube play button size by 40% (68 -> 41px)

Agent-Logs-Url: https://github.com/pubkey/rxdb/sessions/2a76b43c-7816-46a9-b42d-cfc310c17597

Co-authored-by: pubkey <8926560+pubkey@users.noreply.github.com>
---
 docs-src/src/components/replication-diagram.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs-src/src/components/replication-diagram.tsx b/docs-src/src/components/replication-diagram.tsx
index fd55e7544b9..7e6ac96137d 100644
--- a/docs-src/src/components/replication-diagram.tsx
+++ b/docs-src/src/components/replication-diagram.tsx
@@ -257,7 +257,7 @@ export function ReplicationDiagram({
               e.currentTarget.style.transform = 'translate(-50%, -50%) scale(1)';
             }}
           >
-            <YouTubePlayButtonSvg width={68 * scale} />
+            <YouTubePlayButtonSvg width={41 * scale} />
           </div>
         )}
 

From 4f75ca8cca50633a0724a88b7747f853bab5a984 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 6 May 2026 07:48:29 +0000
Subject: [PATCH 3/3] Set play button top position to 207px (fixed)

Agent-Logs-Url: https://github.com/pubkey/rxdb/sessions/296a3eb6-416f-4f1b-91ef-b7ccf8fb3722

Co-authored-by: pubkey <8926560+pubkey@users.noreply.github.com>
---
 docs-src/src/components/replication-diagram.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs-src/src/components/replication-diagram.tsx b/docs-src/src/components/replication-diagram.tsx
index 7e6ac96137d..f6218fe5b1f 100644
--- a/docs-src/src/components/replication-diagram.tsx
+++ b/docs-src/src/components/replication-diagram.tsx
@@ -243,7 +243,7 @@ export function ReplicationDiagram({
             style={{
               position: 'absolute',
               left: centerX + offsetX,
-              top: centerY + offsetY,
+              top: 207,
               transform: 'translate(-50%, -50%)',
               cursor: 'pointer',
               zIndex: 10,