Add landing page hero video demo (#40)

* Add hero video demo to landing page

* Add fallback text to landing page video

* Style landing page video fallback content

* Simplify landing page video fallback

* Improve landing page video fallback text

* Add accessible label to landing page video

* Polish landing page hero video markup

* Simplify hero video fallback markup

* Use local hero demo video with controls

* Match hero video aspect ratio

* Add mute toggle for hero demo video

* Improve hero video mute control

* Refine hero video mute toggle

* Tweak hero video layout

* Add poster frame and safer playback

* Clarify hero demo video playback

---------

Co-authored-by: CharlieHelps <charlie@charlielabs.ai>
Co-authored-by: michael magan <magan@tambo.co>

Author: 3 people

public/videos/hero-demo-poster.jpg

@@ -1,6 +1,8 @@
 import type { Metadata } from "next";
 import Link from "next/link";
 
+import { HeroDemoVideo } from "@/components/landing/hero-demo-video";
+
 export const metadata: Metadata = {
   title: "StrudelLM - AI-Powered Live Coding Music",
   description:
@@ -61,6 +63,8 @@ export default function LandingPage() {
             Powered by Strudel and AI.
           </p>
 
+          <HeroDemoVideo />
+
           {/* CTA Button */}
           <Link
             href="/chat"
@@ -85,33 +89,6 @@ export default function LandingPage() {
         </div>
       </main>
 
-      {/* Video Section - uncomment when video asset is ready
-      <section className="px-6 py-16 bg-muted/50">
-        <div className="max-w-4xl mx-auto">
-          <h2 className="text-2xl md:text-3xl font-semibold text-center mb-8">
-            See it in action
-          </h2>
-
-          <div className="relative aspect-video bg-muted rounded-xl overflow-hidden border border-border">
-            <video
-              className="w-full h-full object-cover"
-              controls
-              playsInline
-              preload="metadata"
-            >
-              <source
-                src="https://github.com/user-attachments/assets/YOUR_VIDEO.mp4"
-                type="video/mp4"
-              />
-              <p className="absolute inset-0 flex items-center justify-center text-muted-foreground">
-                Your browser does not support the video tag.
-              </p>
-            </video>
-          </div>
-        </div>
-      </section>
-      */}
-
       {/* Features Section */}
       <section className="px-6 py-16">
         <div className="max-w-4xl mx-auto">

public/videos/hero-demo.mp4

@@ -0,0 +1,57 @@
+"use client";
+
+import { useCallback, useRef, useState } from "react";
+
+export function HeroDemoVideo() {
+  const videoRef = useRef<HTMLVideoElement | null>(null);
+  const [isMuted, setIsMuted] = useState(true);
+
+  const toggleMuted = useCallback(() => {
+    setIsMuted((prevMuted) => {
+      const video = videoRef.current;
+      const nextMuted = !prevMuted;
+
+      if (video) {
+        video.muted = nextMuted;
+        if (!nextMuted) {
+          void video.play().catch(() => {
+            // Ignore: some browsers block play() depending on autoplay policy.
+          });
+        }
+      }
+
+      return nextMuted;
+    });
+  }, []);
+
+  return (
+    // Matches `public/videos/hero-demo.mp4` (1700x1080).
+    <div className="relative mb-10 w-full aspect-[85/54] rounded-2xl overflow-hidden border border-border/50 shadow-2xl shadow-success/5 bg-black/50 backdrop-blur-sm">
+      <video
+        ref={videoRef}
+        className="w-full h-full object-cover"
+        autoPlay
+        // Only loop while muted to reduce the chance of unexpected background audio.
+        loop={isMuted}
+        muted={isMuted}
+        playsInline
+        preload="metadata"
+        poster="/videos/hero-demo-poster.jpg"
+        aria-label="StrudelLM live coding music demo"
+      >
+        <source src="/videos/hero-demo.mp4" type="video/mp4" />
+        Demo video (StrudelLM live coding with AI) is not supported in this browser.
+      </video>
+
+      <button
+        type="button"
+        onClick={toggleMuted}
+        aria-pressed={!isMuted}
+        aria-label={isMuted ? "Unmute demo video audio" : "Mute demo video audio"}
+        className="absolute bottom-3 right-3 rounded-lg border border-border/50 bg-background/80 px-3 py-1.5 text-sm text-foreground shadow-sm backdrop-blur hover:bg-background/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-success focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+      >
+        {isMuted ? "Unmute" : "Mute"}
+      </button>
+    </div>
+  );
+}