Redesign landing page with animated ControlUI hero

New Spacedrive-inspired landing page with dark warm color system, glassmorphic navbar, feature cards with animated illustrations, and an interactive ControlUI mockup that cycles through voice generations with real audio playback via WaveSurfer.

The ControlUI demo script is fully data-driven - profiles, generation text, audio samples, and effects are all configurable from a single DEMO_SCRIPT array.

Includes 6 real voice samples (Jarvis, Morgan Freeman, Sam Altman, Samuel L. Jackson, Linus Tech Tips, Fireship) converted to webm opus.

landing/src/app/globals.css

@@ -16,7 +16,7 @@
     --secondary-foreground: 0 0% 0%;
     --muted: 0 0% 96%;
     --muted-foreground: 0 0% 45%;
-    --accent: 0 0% 96%;
+    --accent: 43 50% 50%;
     --accent-foreground: 0 0% 0%;
     --destructive: 0 0% 0%;
     --destructive-foreground: 0 0% 100%;
@@ -27,26 +27,52 @@
   }
 
   .dark {
-    --background: 0 0% 3%;
-    --foreground: 0 0% 98%;
-    --card: 0 0% 8% / 0.6;
-    --card-foreground: 0 0% 98%;
-    --popover: 0 0% 8% / 0.8;
-    --popover-foreground: 0 0% 98%;
-    --primary: 0 0% 98%;
-    --primary-foreground: 0 0% 8%;
-    --secondary: 0 0% 12% / 0.5;
-    --secondary-foreground: 0 0% 98%;
-    --muted: 0 0% 12% / 0.4;
-    --muted-foreground: 0 0% 65%;
-    --accent: 0 0% 15% / 0.5;
-    --accent-foreground: 0 0% 98%;
+    /* Surfaces -- slightly warm-tinted darks */
+    --background: 30 4% 4%;
+    --foreground: 30 10% 94%;
+    --card: 30 4% 7%;
+    --card-foreground: 30 10% 94%;
+    --popover: 30 4% 7%;
+    --popover-foreground: 30 10% 94%;
+    --primary: 30 10% 94%;
+    --primary-foreground: 30 4% 7%;
+    --secondary: 30 4% 10%;
+    --secondary-foreground: 30 10% 94%;
+    --muted: 30 3% 12%;
+    --muted-foreground: 30 5% 55%;
+    --accent: 43 50% 45%;
+    --accent-foreground: 30 10% 94%;
     --destructive: 0 62% 50%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 15% / 0.5;
-    --input: 0 0% 15% / 0.5;
-    --ring: 0 0% 98% / 0.2;
-    --radius: 1rem;
+    --destructive-foreground: 30 10% 94%;
+    --border: 30 4% 13%;
+    --input: 30 4% 13%;
+    --ring: 30 10% 94% / 0.2;
+    --radius: 0.75rem;
+
+    /* App-specific surface tokens */
+    --app: 30 4% 4%;
+    --app-box: 30 4% 7%;
+    --app-dark-box: 30 4% 5%;
+    --app-darker-box: 30 4% 3%;
+    --app-light-box: 30 4% 14%;
+    --app-line: 30 4% 13%;
+    --app-button: 30 4% 11%;
+    --app-hover: 30 4% 15%;
+    --app-selected: 30 4% 17%;
+
+    /* Text hierarchy */
+    --ink: 30 10% 94%;
+    --ink-dull: 30 5% 55%;
+    --ink-faint: 30 3% 38%;
+
+    /* Accent shades */
+    --accent-faint: 43 45% 55%;
+    --accent-deep: 43 55% 35%;
+    --accent-glow: 43 60% 50%;
+
+    /* Sidebar */
+    --sidebar: 30 4% 3%;
+    --sidebar-line: 30 4% 10%;
   }
 }
 
@@ -60,9 +86,9 @@
   body {
     @apply bg-background text-foreground antialiased;
     overflow-x: hidden;
-    background-image:
-      radial-gradient(at 0% 0%, rgba(255, 255, 255, 0.03) 0px, transparent 50%),
-      radial-gradient(at 100% 100%, rgba(255, 255, 255, 0.02) 0px, transparent 50%);
+    font-family:
+      ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+      "Helvetica Neue", Arial, sans-serif;
   }
 }
 
@@ -71,3 +97,41 @@
     text-wrap: balance;
   }
 }
+
+/* Staggered fade-in animation for hero elements */
+@keyframes fadeUp {
+  from {
+    opacity: 0;
+    transform: translateY(16px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.fade-in {
+  opacity: 0;
+  animation: fadeUp 0.6s ease-out forwards;
+}
+
+/* Noise texture overlay for hero glow */
+.hero-glow::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 5;
+  pointer-events: none;
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.8' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
+  opacity: 0.3;
+  mix-blend-mode: overlay;
+}
+
+/* Scrollbar hiding */
+::-webkit-scrollbar {
+  display: none;
+}
+
+* {
+  scrollbar-width: none;
+}

landing/src/app/layout.tsx

@@ -1,17 +1,19 @@
 import type { Metadata } from 'next';
-import { Inter } from 'next/font/google';
 import './globals.css';
-import { Banner } from '@/components/Banner';
-import { Footer } from '@/components/Footer';
-import { Header } from '@/components/Header';
-
-const inter = Inter({ subsets: ['latin'], variable: '--font-sans' });
 
 export const metadata: Metadata = {
-  title: 'Voicebox - Open Source Voice Cloning Desktop App Powered by Qwen3-TTS',
+  title: 'Voicebox - Open Source Voice Cloning Desktop App',
   description:
     'Near-perfect voice cloning powered by Qwen3-TTS. Desktop app for Mac, Windows, and Linux. Multi-sample support, smart caching, local or remote inference.',
-  keywords: ['voice cloning', 'TTS', 'Qwen3', 'desktop app', 'AI voice'],
+  keywords: [
+    'voice cloning',
+    'TTS',
+    'Qwen3',
+    'desktop app',
+    'AI voice',
+    'open source',
+    'text to speech',
+  ],
   icons: {
     icon: [
       { url: '/favicon.png', type: 'image/png' },
@@ -20,8 +22,8 @@ export const metadata: Metadata = {
     apple: [{ url: '/apple-touch-icon.png', sizes: '180x180', type: 'image/png' }],
   },
   openGraph: {
-    title: 'voicebox',
-    description: 'Professional voice cloning with Qwen3-TTS',
+    title: 'Voicebox',
+    description: 'Open source voice cloning. Local-first. Free forever.',
     type: 'website',
     url: 'https://voicebox.sh',
   },
@@ -30,15 +32,8 @@ export const metadata: Metadata = {
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en" suppressHydrationWarning className="dark">
-      <body className={inter.variable}>
-        <div className="relative min-h-screen bg-background font-sans flex flex-col">
-          <Banner />
-          <Header />
-          <main className="container mx-auto px-4 sm:px-6 md:px-4 flex-1 py-4 sm:py-6 md:py-0">
-            {children}
-          </main>
-          <Footer />
-        </div>
+      <body>
+        <div className="relative min-h-screen bg-background font-sans">{children}</div>
       </body>
     </html>
   );

landing/src/app/page.tsx

@@ -1,304 +1,227 @@
 'use client';
 
-import { Cloud, Code, Cpu, Github, Shield, Zap } from 'lucide-react';
+import { Github } from 'lucide-react';
 import Image from 'next/image';
 import { useEffect, useState } from 'react';
+import { ControlUI } from '@/components/ControlUI';
+import { Features } from '@/components/Features';
+import { Footer } from '@/components/Footer';
+import { Navbar } from '@/components/Navbar';
 import { AppleIcon, LinuxIcon, WindowsIcon } from '@/components/PlatformIcons';
-import { Button } from '@/components/ui/button';
-import { Section } from '@/components/ui/section';
 import { DOWNLOAD_LINKS, GITHUB_REPO } from '@/lib/constants';
 import type { DownloadLinks } from '@/lib/releases';
-import { FeatureCard } from '../components/ui/feature-card';
 
 export default function Home() {
   const [downloadLinks, setDownloadLinks] = useState<DownloadLinks>(DOWNLOAD_LINKS);
 
   useEffect(() => {
-    // Fetch latest release info
     fetch('/api/releases')
       .then((res) => {
-        if (!res.ok) {
-          throw new Error('Failed to fetch releases');
-        }
+        if (!res.ok) throw new Error('Failed to fetch releases');
         return res.json();
       })
       .then((data) => {
-        if (data.downloadLinks) {
-          setDownloadLinks(data.downloadLinks);
-        }
+        if (data.downloadLinks) setDownloadLinks(data.downloadLinks);
       })
       .catch((error) => {
         console.error('Failed to fetch release info:', error);
-        // Keep fallback links (releases page) on error
       });
   }, []);
-  const features = [
-    {
-      title: 'Near-Perfect Voice Cloning',
-      description:
-        "Powered by Alibaba's Qwen3-TTS model for exceptional voice quality and accuracy.",
-      icon: <Zap className="h-6 w-6" />,
-    },
-    {
-      title: 'Stories Editor',
-      description:
-        'Create multi-voice narratives with a timeline-based editor. Arrange tracks, trim clips, and mix conversations.',
-      icon: <Code className="h-6 w-6" />,
-    },
-    {
-      title: 'Multi-Sample Support',
-      description:
-        'Combine multiple voice samples for higher quality and more natural-sounding results.',
-      icon: <Code className="h-6 w-6" />,
-    },
-
-    {
-      title: 'Local or Remote',
-      description:
-        'Run GPU inference locally or connect to a remote machine. One-click server setup.',
-      icon: <Cloud className="h-6 w-6" />,
-    },
-    {
-      title: 'Audio Transcription',
-      description:
-        'Powered by Whisper for accurate speech-to-text. Extract reference text from voice samples automatically.',
-      icon: <Shield className="h-6 w-6" />,
-    },
-    {
-      title: 'Cross-Platform',
-      description: 'Available for macOS, Windows, and Linux. No Python installation required.',
-      icon: <Cpu className="h-6 w-6" />,
-    },
-  ];
 
   return (
-    <div className="space-y-12 sm:space-y-16 md:space-y-20">
-      {/* Hero Section */}
-      <section className="relative py-12 sm:py-16 md:py-20 lg:py-24">
-        <div className="container mx-auto px-4 sm:px-6 lg:px-8 relative max-w-7xl">
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 items-start">
-            {/* Left side - Content */}
-            <div className="space-y-6 lg:pr-8">
-              <div className="flex lg:justify-start justify-center mb-6">
-                <Image
-                  src="/voicebox-logo-2.png"
-                  alt="Voicebox Logo"
-                  width={1024}
-                  height={1024}
-                  className="w-32 sm:w-40 md:w-48 h-auto"
-                  priority
-                />
-              </div>
-              <h1 className="text-5xl sm:text-6xl md:text-7xl lg:text-8xl font-bold leading-tight text-center lg:text-left">
-                Voicebox
-              </h1>
-              <p className="text-lg sm:text-xl md:text-2xl text-foreground/70 max-w-xl text-center lg:text-left mx-auto lg:mx-0">
-                Open source voice cloning powered by Qwen3-TTS. Create natural-sounding speech from
-                text with near-perfect voice replication.
-              </p>
+    <>
+      <Navbar />
 
-              {/* Mobile: centered screenshot above download buttons */}
-              <div className="flex justify-center lg:hidden my-8">
-                <div className="w-full max-w-2xl">
-                  <Image
-                    src="/assets/app-screenshot-1.webp"
-                    alt="Voicebox Application Screenshot"
-                    width={1920}
-                    height={1080}
-                    className="w-full h-auto rounded-lg shadow-lg"
-                    priority
-                  />
-                </div>
-              </div>
-
-              {/* Download buttons under left content */}
-              <div className="space-y-4 pt-4">
-                <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 w-full max-w-2xl">
-                  <Button asChild size="lg" className="w-full px-0">
-                    <a
-                      href={downloadLinks.macArm}
-                      download
-                      className="flex items-center w-full relative"
-                    >
-                      <div className="flex items-center gap-2 flex-shrink-0 pl-4">
-                        <AppleIcon className="h-5 w-5" />
-                        <div className="h-5 w-px bg-border" />
-                      </div>
-                      <span className="flex-1 text-center px-4">macOS (ARM)</span>
-                    </a>
-                  </Button>
-                  <Button asChild size="lg" className="w-full px-0">
-                    <a
-                      href={downloadLinks.macIntel}
-                      download
-                      className="flex items-center w-full relative"
-                    >
-                      <div className="flex items-center gap-2 flex-shrink-0 pl-4">
-                        <AppleIcon className="h-5 w-5" />
-                        <div className="h-5 w-px bg-border" />
-                      </div>
-                      <span className="flex-1 text-center px-4">macOS (Intel)</span>
-                    </a>
-                  </Button>
-                  <Button asChild size="lg" className="w-full px-0">
-                    <a
-                      href={downloadLinks.windows}
-                      download
-                      className="flex items-center w-full relative"
-                    >
-                      <div className="flex items-center gap-2 flex-shrink-0 pl-4">
-                        <WindowsIcon className="h-5 w-5" />
-                        <div className="h-5 w-px bg-border" />
-                      </div>
-                      <span className="flex-1 text-center px-4">Windows</span>
-                    </a>
-                  </Button>
-                  <Button asChild size="lg" className="w-full px-0" disabled>
-                    <a
-                      href={downloadLinks.linux}
-                      onClick={(e) => e.preventDefault()}
-                      className="flex items-center w-full relative opacity-50 cursor-not-allowed"
-                      title="Linux builds coming soon — Currently blocked by GitHub runner disk space limitations."
-                      aria-label="Linux builds coming soon — Currently blocked by GitHub runner disk space limitations."
-                    >
-                      <div className="flex items-center gap-2 flex-shrink-0 pl-4">
-                        <LinuxIcon className="h-5 w-5" />
-                        <div className="h-5 w-px bg-border" />
-                      </div>
-                      <span className="flex-1 text-center px-4">Linux</span>
-                    </a>
-                  </Button>
-                </div>
-                <Button variant="outline" size="lg" asChild className="w-full max-w-2xl">
-                  <a href={GITHUB_REPO} target="_blank" rel="noopener noreferrer">
-                    <Github className="h-4 w-4 mr-2" />
-                    View on GitHub
-                  </a>
-                </Button>
-              </div>
-            </div>
-
-            {/* Desktop: Large screenshot positioned off-screen */}
-            <div className="hidden lg:block relative">
-              <div className="absolute right-0 top-0 -mt-10 w-[200%] -mr-[100%]">
-                <Image
-                  src="/assets/app-screenshot-1.webp"
-                  alt="Voicebox Application Screenshot"
-                  width={1920}
-                  height={1080}
-                  className="w-full h-auto"
-                  priority
-                />
-              </div>
-            </div>
-          </div>
+      {/* ── Hero Section ─────────────────────────────────────────────── */}
+      <section className="relative pt-32 pb-16">
+        {/* Background glow */}
+        <div className="hero-glow pointer-events-none absolute inset-0 -top-32">
+          <div className="absolute left-1/2 top-0 -translate-x-1/2 w-[800px] h-[600px] rounded-full bg-accent/15 blur-[150px]" />
+          <div className="absolute left-1/2 top-12 -translate-x-1/2 w-[500px] h-[400px] rounded-full bg-accent/10 blur-[80px]" />
         </div>
-      </section>
 
-      {/* Screenshots Section */}
-      <section className="py-12 sm:py-16 md:py-20">
-        <div className="w-full md:w-[150%] md:-ml-[25%]">
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 px-8">
-            <div className="w-full">
-              <Image
-                src="/assets/app-screenshot-2.webp"
-                alt="Voicebox Screenshot 2"
-                width={1920}
-                height={1080}
-                className="w-full h-auto rounded-lg shadow-lg"
-              />
-            </div>
-            <div className="w-full">
-              <Image
-                src="/assets/app-screenshot-1.webp"
-                alt="Voicebox Screenshot 1"
-                width={1920}
-                height={1080}
-                className="w-full h-auto rounded-lg shadow-lg"
-              />
-            </div>
-            <div className="w-full">
-              <Image
-                src="/assets/app-screenshot-3.webp"
-                alt="Voicebox Screenshot 3"
-                width={1920}
-                height={1080}
-                className="w-full h-auto rounded-lg shadow-lg"
-              />
-            </div>
-          </div>
-        </div>
-      </section>
-
-      {/* Description Section */}
-      <section className="py-12 sm:py-16 md:py-20">
-        <div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-4xl">
-          <h2 className="text-3xl sm:text-4xl md:text-5xl font-bold text-center mb-6 sm:mb-8">
-            What is Voicebox?
-          </h2>
-          <div className="space-y-6 text-lg text-foreground/80 text-center">
-            <p>
-              Voicebox is a <strong>local-first voice cloning studio</strong> with DAW-like features
-              for professional voice synthesis. Think of it as a{' '}
-              <strong>local, free and open-source alternative to ElevenLabs</strong> — download
-              models, clone voices, and generate speech entirely on your machine.
-            </p>
-            <p>
-              Unlike cloud services that lock your voice data behind subscriptions, Voicebox gives
-              you complete privacy, professional tools, and native performance. Download a voice
-              model, clone any voice from a few seconds of audio, and compose multi-voice projects
-              with studio-grade editing tools.
-            </p>
-            <p>
-              Optimized for performance with <strong>Metal acceleration on Mac</strong> and{' '}
-              <strong>CUDA acceleration on Windows/Linux</strong> for fast, local inference.
-            </p>
-            <p className="text-foreground/60">No Python install required.</p>
-          </div>
-        </div>
-      </section>
-
-      {/* Demo Video Section */}
-      <section className="py-12 sm:py-16 md:py-20">
-        <div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl">
-          <h2 className="text-3xl sm:text-4xl md:text-5xl font-bold text-center mb-8 sm:mb-12">
-            See it in action...
-          </h2>
-          <div className="flex justify-center">
-            <div className="w-full max-w-5xl">
-              {/** biome-ignore lint/a11y/useMediaCaption: not generating captions for this, ya damn linter */}
-              <video
-                className="w-full h-auto rounded-lg shadow-lg"
-                controls
-                playsInline
-                preload="metadata"
-                poster="/assets/app-screenshot-1.webp"
-              >
-                <source
-                  src="/voicebox-demo.webm"
-                  type="video/webm"
-                  aria-label="Voicebox Demo Video"
-                />
-                Your browser does not support the video tag.
-              </video>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      {/* Features Section */}
-      <Section id="features">
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6">
-          {features.map((feature) => (
-            <FeatureCard
-              key={feature.title}
-              title={feature.title}
-              description={feature.description}
-              icon={feature.icon}
+        <div className="relative mx-auto max-w-7xl px-6 text-center">
+          {/* Logo */}
+          <div
+            className="fade-in mx-auto mb-8 h-[120px] w-[120px] md:h-[160px] md:w-[160px]"
+            style={{ animationDelay: '0ms' }}
+          >
+            <Image
+              src="/voicebox-logo-app.webp"
+              alt="Voicebox"
+              width={160}
+              height={160}
+              className="h-full w-full object-contain"
+              style={{
+                filter:
+                  'drop-shadow(0 0 20px hsl(43 60% 50% / 0.4)) drop-shadow(0 0 60px hsl(43 60% 50% / 0.2))',
+              }}
+              priority
             />
-          ))}
+          </div>
+
+          {/* Headline */}
+          <div className="fade-in relative" style={{ animationDelay: '100ms' }}>
+            <h1 className="text-5xl font-bold tracking-tighter leading-[0.9] text-foreground drop-shadow-[0_16px_50px_rgba(0,0,0,0.95)] md:text-7xl lg:text-8xl">
+              Your voice, your machine.
+            </h1>
+          </div>
+
+          {/* Subtitle */}
+          <p
+            className="fade-in mx-auto mt-6 max-w-2xl text-lg text-muted-foreground md:text-xl"
+            style={{ animationDelay: '200ms' }}
+          >
+            Open source voice cloning studio powered by Qwen3-TTS. Clone any voice, generate natural
+            speech, and compose multi-voice projects — all running locally.
+          </p>
+
+          {/* CTAs */}
+          <div
+            className="fade-in mt-10 flex flex-col sm:flex-row items-center justify-center gap-4"
+            style={{ animationDelay: '300ms' }}
+          >
+            <a
+              href="#download"
+              className="rounded-full bg-accent px-8 py-3.5 text-sm font-semibold uppercase tracking-wider text-white shadow-[0_4px_20px_hsl(43_60%_50%/0.3),inset_0_2px_0_rgba(255,255,255,0.2),inset_0_-2px_0_rgba(0,0,0,0.1)] transition-all hover:bg-accent-faint active:shadow-[0_2px_10px_hsl(43_60%_50%/0.3),inset_0_4px_8px_rgba(0,0,0,0.3)]"
+            >
+              Download
+            </a>
+            <a
+              href={GITHUB_REPO}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex items-center gap-2 rounded-full border border-border/60 bg-card/40 backdrop-blur-sm px-6 py-3 text-sm font-medium text-muted-foreground transition-colors hover:text-foreground hover:border-border"
+            >
+              <Github className="h-4 w-4" />
+              View on GitHub
+            </a>
+          </div>
+
+          {/* Version */}
+          <p
+            className="fade-in mt-4 text-xs text-muted-foreground/50"
+            style={{ animationDelay: '400ms' }}
+          >
+            Free and open source &middot; macOS, Windows, Linux
+          </p>
         </div>
-      </Section>
-    </div>
+
+        {/* ── ControlUI mockup ─────────────────────────────────────── */}
+        <div className="mt-16">
+          <ControlUI />
+        </div>
+      </section>
+
+      {/* ── Features ─────────────────────────────────────────────── */}
+      <Features />
+
+      {/* ── About / Manifesto ────────────────────────────────────── */}
+      <section id="about" className="border-t border-border py-24">
+        <div className="mx-auto max-w-3xl px-6">
+          <h2 className="mb-10 text-center text-3xl font-semibold tracking-tight text-foreground md:text-4xl">
+            Why Voicebox exists
+          </h2>
+          <div className="space-y-6 text-center">
+            <p className="text-base leading-relaxed text-muted-foreground">
+              Cloud voice cloning services lock your voice data behind subscriptions, rate limits,
+              and terms of service that can change at any time. Your voice — and the voices you
+              clone — should belong to you.
+            </p>
+            <p className="text-lg font-medium text-foreground">
+              Voicebox is a local-first voice cloning studio. Download a model, clone any voice from
+              a few seconds of audio, and generate speech entirely on your machine.
+            </p>
+            <p className="text-sm leading-relaxed text-muted-foreground">
+              Optimized with Metal acceleration on Mac and CUDA on Windows/Linux. No Python install
+              required. No cloud. No subscriptions. Free and open-source, forever.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      {/* ── Download Section ─────────────────────────────────────── */}
+      <section id="download" className="border-t border-border py-24">
+        <div className="mx-auto max-w-4xl px-6">
+          <div className="text-center mb-12">
+            <h2 className="text-3xl font-semibold tracking-tight text-foreground md:text-4xl mb-4">
+              Download Voicebox
+            </h2>
+            <p className="text-muted-foreground">
+              Available for macOS, Windows, and Linux. No dependencies required.
+            </p>
+          </div>
+
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 max-w-2xl mx-auto">
+            {/* macOS ARM */}
+            <a
+              href={downloadLinks.macArm}
+              download
+              className="flex items-center rounded-xl border border-border bg-card/60 backdrop-blur-sm px-5 py-4 transition-all hover:border-accent/30 hover:bg-card group"
+            >
+              <AppleIcon className="h-6 w-6 shrink-0 text-muted-foreground group-hover:text-foreground transition-colors" />
+              <div className="ml-4">
+                <div className="text-sm font-medium">macOS</div>
+                <div className="text-xs text-muted-foreground">Apple Silicon (ARM)</div>
+              </div>
+            </a>
+
+            {/* macOS Intel */}
+            <a
+              href={downloadLinks.macIntel}
+              download
+              className="flex items-center rounded-xl border border-border bg-card/60 backdrop-blur-sm px-5 py-4 transition-all hover:border-accent/30 hover:bg-card group"
+            >
+              <AppleIcon className="h-6 w-6 shrink-0 text-muted-foreground group-hover:text-foreground transition-colors" />
+              <div className="ml-4">
+                <div className="text-sm font-medium">macOS</div>
+                <div className="text-xs text-muted-foreground">Intel (x64)</div>
+              </div>
+            </a>
+
+            {/* Windows */}
+            <a
+              href={downloadLinks.windows}
+              download
+              className="flex items-center rounded-xl border border-border bg-card/60 backdrop-blur-sm px-5 py-4 transition-all hover:border-accent/30 hover:bg-card group"
+            >
+              <WindowsIcon className="h-6 w-6 shrink-0 text-muted-foreground group-hover:text-foreground transition-colors" />
+              <div className="ml-4">
+                <div className="text-sm font-medium">Windows</div>
+                <div className="text-xs text-muted-foreground">64-bit (MSI)</div>
+              </div>
+            </a>
+
+            {/* Linux */}
+            <div
+              className="flex items-center rounded-xl border border-border bg-card/60 backdrop-blur-sm px-5 py-4 opacity-50 cursor-not-allowed"
+              title="Linux builds coming soon"
+            >
+              <LinuxIcon className="h-6 w-6 shrink-0 text-muted-foreground" />
+              <div className="ml-4">
+                <div className="text-sm font-medium">Linux</div>
+                <div className="text-xs text-muted-foreground">Coming soon</div>
+              </div>
+            </div>
+          </div>
+
+          {/* GitHub link */}
+          <div className="mt-6 text-center">
+            <a
+              href={`${GITHUB_REPO}/releases`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors"
+            >
+              <Github className="h-4 w-4" />
+              View all releases on GitHub
+            </a>
+          </div>
+        </div>
+      </section>
+
+      {/* ── Footer ───────────────────────────────────────────────── */}
+      <Footer />
+    </>
   );
 }