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/components/Footer.tsx

@@ -1,22 +1,33 @@
+import Image from 'next/image';
 import Link from 'next/link';
-import { Separator } from '@/components/ui/separator';
 import { GITHUB_REPO } from '@/lib/constants';
 
 export function Footer() {
   return (
-    <footer className="border-t border-border pt-8 sm:pt-12 pb-6 sm:pb-8 mt-12 sm:mt-16 md:mt-20">
-      <div className="container mx-auto px-4">
-        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 sm:gap-8 mb-6 sm:mb-8">
-          <div>
-            <h3 className="font-bold text-lg mb-4">voicebox</h3>
-            <p className="text-muted-foreground text-sm">
-              Professional voice cloning powered by Qwen3-TTS. Desktop app for Mac, Windows, and
-              Linux.
+    <footer className="border-t border-border py-12">
+      <div className="mx-auto max-w-7xl px-6">
+        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-8 mb-10">
+          {/* Brand */}
+          <div className="md:col-span-1">
+            <div className="flex items-center gap-2.5 mb-4">
+              <Image
+                src="/voicebox-logo-app.webp"
+                alt="Voicebox"
+                width={24}
+                height={24}
+                className="h-6 w-6"
+              />
+              <span className="text-sm font-semibold">Voicebox</span>
+            </div>
+            <p className="text-sm text-muted-foreground leading-relaxed">
+              Open source voice cloning studio. Local-first, free forever.
             </p>
           </div>
+
+          {/* Product */}
           <div>
-            <h4 className="font-semibold mb-3">Product</h4>
-            <ul className="space-y-2 text-muted-foreground text-sm">
+            <h4 className="text-sm font-semibold mb-3">Product</h4>
+            <ul className="space-y-2 text-sm text-muted-foreground">
               <li>
                 <a href="#features" className="hover:text-foreground transition-colors">
                   Features
@@ -28,20 +39,17 @@ export function Footer() {
                 </a>
               </li>
               <li>
-                <Link
-                  href={GITHUB_REPO}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="hover:text-foreground transition-colors"
-                >
-                  GitHub
-                </Link>
+                <a href="#about" className="hover:text-foreground transition-colors">
+                  About
+                </a>
               </li>
             </ul>
           </div>
+
+          {/* Resources */}
           <div>
-            <h4 className="font-semibold mb-3">Resources</h4>
-            <ul className="space-y-2 text-muted-foreground text-sm">
+            <h4 className="text-sm font-semibold mb-3">Resources</h4>
+            <ul className="space-y-2 text-sm text-muted-foreground">
               <li>
                 <Link
                   href={GITHUB_REPO}
@@ -74,10 +82,39 @@ export function Footer() {
               </li>
             </ul>
           </div>
+
+          {/* Also by */}
+          <div>
+            <h4 className="text-sm font-semibold mb-3">Also By</h4>
+            <ul className="space-y-2 text-sm text-muted-foreground">
+              <li>
+                <a
+                  href="https://spacebot.sh"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="hover:text-foreground transition-colors"
+                >
+                  Spacebot
+                </a>
+              </li>
+              <li>
+                <a
+                  href="https://spacedrive.com"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="hover:text-foreground transition-colors"
+                >
+                  Spacedrive
+                </a>
+              </li>
+            </ul>
+          </div>
         </div>
-        <Separator className="my-8" />
-        <div className="text-center text-muted-foreground text-sm space-y-2">
-          <p>© 2026 voicebox. All rights reserved.</p>
+
+        <div className="border-t border-border pt-6">
+          <p className="text-center text-sm text-muted-foreground">
+            &copy; {new Date().getFullYear()} Voicebox. Open source under MIT license.
+          </p>
         </div>
       </div>
     </footer>