Add landing page for voicebox.sh

- Created a new landing page using Next.js 16, featuring a modern design with Tailwind CSS. - Implemented essential components including Header, Footer, and DownloadSection for user navigation and download options. - Configured Tailwind CSS and PostCSS for styling, and set up TypeScript for type safety. - Added a README with setup instructions, project structure, and deployment guidelines. - Integrated GitHub links for easy access to the repository and releases. - Established a consistent UI with reusable components and responsive design.
2026-09-19 23:00:45 -07:00 · 2026-01-25 13:40:18 -08:00
parent f80f870e93
commit d3ca3a9deb
28 changed files with 1177 additions and 2 deletions
@@ -0,0 +1,65 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 0%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 0%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 0%;
+    --primary: 0 0% 0%;
+    --primary-foreground: 0 0% 100%;
+    --secondary: 0 0% 96%;
+    --secondary-foreground: 0 0% 0%;
+    --muted: 0 0% 96%;
+    --muted-foreground: 0 0% 45%;
+    --accent: 0 0% 96%;
+    --accent-foreground: 0 0% 0%;
+    --destructive: 0 0% 0%;
+    --destructive-foreground: 0 0% 100%;
+    --border: 0 0% 90%;
+    --input: 0 0% 90%;
+    --ring: 0 0% 0%;
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 0 0% 0%;
+    --foreground: 0 0% 100%;
+    --card: 0 0% 0%;
+    --card-foreground: 0 0% 100%;
+    --popover: 0 0% 0%;
+    --popover-foreground: 0 0% 100%;
+    --primary: 0 0% 100%;
+    --primary-foreground: 0 0% 0%;
+    --secondary: 0 0% 10%;
+    --secondary-foreground: 0 0% 100%;
+    --muted: 0 0% 10%;
+    --muted-foreground: 0 0% 65%;
+    --accent: 0 0% 10%;
+    --accent-foreground: 0 0% 100%;
+    --destructive: 0 0% 100%;
+    --destructive-foreground: 0 0% 0%;
+    --border: 0 0% 20%;
+    --input: 0 0% 20%;
+    --ring: 0 0% 100%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+}
@@ -0,0 +1,39 @@
+import type { Metadata } from 'next';
+import { Inter } from 'next/font/google';
+import './globals.css';
+import { Header } from '@/components/Header';
+import { Footer } from '@/components/Footer';
+
+const inter = Inter({ subsets: ['latin'], variable: '--font-sans' });
+
+export const metadata: Metadata = {
+  title: 'voicebox - Professional 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'],
+  openGraph: {
+    title: 'voicebox',
+    description: 'Professional voice cloning with Qwen3-TTS',
+    type: 'website',
+    url: 'https://voicebox.sh',
+  },
+};
+
+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">
+          <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>
+    </html>
+  );
+}
@@ -0,0 +1,102 @@
+'use client';
+
+import Link from 'next/link';
+import { Github, Zap, Cpu, Cloud, Shield, Code } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Hero } from '@/components/ui/hero';
+import { Section, SectionTitle } from '@/components/ui/section';
+import { Card, CardContent } from '@/components/ui/card';
+import { FeatureCard } from '@/components/ui/feature-card';
+import { DownloadSection } from '@/components/DownloadSection';
+import { GITHUB_REPO } from '@/lib/constants';
+
+export default function Home() {
+  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: 'Multi-Sample Support',
+      description: 'Combine multiple voice samples for higher quality and more natural-sounding results.',
+      icon: <Code className="h-6 w-6" />,
+    },
+    {
+      title: 'Smart Caching',
+      description: 'Instant re-generation with voice prompt caching. No need to reprocess samples.',
+      icon: <Zap 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: 'Production Ready',
+      description: 'Type-safe, modular architecture. Desktop-first experience with native performance.',
+      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 */}
+      <Hero
+        title="voicebox"
+        description="Professional voice cloning powered by Qwen3-TTS. Create natural-sounding speech from text with near-perfect voice replication."
+        actions={
+          <>
+            <Button asChild size="lg">
+              <a href="#download">
+                Download Now
+              </a>
+            </Button>
+            <Button 
+              variant="outline" 
+              size="lg"
+              asChild
+            >
+              <a href={GITHUB_REPO} target="_blank" rel="noopener noreferrer">
+                <Github className="h-4 w-4 mr-2" />
+                View on GitHub
+              </a>
+            </Button>
+          </>
+        }
+      />
+
+      {/* Features Section */}
+      <Section id="features">
+        <SectionTitle className="mb-4 text-center">Features</SectionTitle>
+        <p className="text-sm text-muted-foreground mb-8 text-center max-w-2xl mx-auto">
+          Everything you need for professional voice cloning in a desktop app.
+        </p>
+        <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>
+      </Section>
+
+      {/* Download Section */}
+      <Section id="download">
+        <SectionTitle className="mb-4 text-center">Download</SectionTitle>
+        <p className="text-sm text-muted-foreground mb-8 text-center max-w-2xl mx-auto">
+          Available for macOS, Windows, and Linux. Choose your platform below.
+        </p>
+        <DownloadSection />
+      </Section>
+    </div>
+  );
+}
@@ -0,0 +1,65 @@
+'use client';
+
+import { Download, Laptop, Monitor, Terminal } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
+import { DOWNLOAD_LINKS, LATEST_VERSION } from '@/lib/constants';
+
+export function DownloadSection() {
+  const downloads = [
+    {
+      platform: 'Mac',
+      icon: Laptop,
+      link: DOWNLOAD_LINKS.mac,
+      description: 'macOS (Intel + Apple Silicon)',
+    },
+    {
+      platform: 'Windows',
+      icon: Monitor,
+      link: DOWNLOAD_LINKS.windows,
+      description: 'Windows x64',
+    },
+    {
+      platform: 'Linux',
+      icon: Terminal,
+      link: DOWNLOAD_LINKS.linux,
+      description: 'Linux AppImage',
+    },
+  ];
+
+  return (
+    <div className="space-y-6">
+      <div className="text-center">
+        <p className="text-sm text-muted-foreground mb-2">Latest Version</p>
+        <p className="text-2xl font-bold">{LATEST_VERSION}</p>
+      </div>
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4 sm:gap-6">
+        {downloads.map(({ platform, icon: Icon, link, description }) => (
+          <Card key={platform} className="hover:border-primary/50 transition-colors">
+            <CardContent className="p-6">
+              <div className="flex flex-col items-center text-center space-y-4">
+                <div className="p-3 rounded-lg bg-muted">
+                  <Icon className="h-8 w-8" />
+                </div>
+                <div>
+                  <h3 className="text-lg font-semibold mb-1">{platform}</h3>
+                  <p className="text-sm text-muted-foreground">{description}</p>
+                </div>
+                <Button
+                  asChild
+                  size="lg"
+                  className="w-full"
+                >
+                  <a href={link} download>
+                    <Download className="h-4 w-4 mr-2" />
+                    Download
+                  </a>
+                </Button>
+              </div>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,64 @@
+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.
+            </p>
+          </div>
+          <div>
+            <h4 className="font-semibold mb-3">Product</h4>
+            <ul className="space-y-2 text-muted-foreground text-sm">
+              <li>
+                <a href="#features" className="hover:text-foreground transition-colors">
+                  Features
+                </a>
+              </li>
+              <li>
+                <a href="#download" className="hover:text-foreground transition-colors">
+                  Download
+                </a>
+              </li>
+              <li>
+                <Link href={GITHUB_REPO} target="_blank" rel="noopener noreferrer" className="hover:text-foreground transition-colors">
+                  GitHub
+                </Link>
+              </li>
+            </ul>
+          </div>
+          <div>
+            <h4 className="font-semibold mb-3">Resources</h4>
+            <ul className="space-y-2 text-muted-foreground text-sm">
+              <li>
+                <Link href={GITHUB_REPO} target="_blank" rel="noopener noreferrer" className="hover:text-foreground transition-colors">
+                  Source Code
+                </Link>
+              </li>
+              <li>
+                <Link href={`${GITHUB_REPO}/releases`} target="_blank" rel="noopener noreferrer" className="hover:text-foreground transition-colors">
+                  Releases
+                </Link>
+              </li>
+              <li>
+                <Link href={`${GITHUB_REPO}/issues`} target="_blank" rel="noopener noreferrer" className="hover:text-foreground transition-colors">
+                  Issues
+                </Link>
+              </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>
+      </div>
+    </footer>
+  );
+}
@@ -0,0 +1,46 @@
+'use client';
+
+import Link from 'next/link';
+import { Github } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { GITHUB_REPO } from '@/lib/constants';
+
+export function Header() {
+  return (
+    <header className="border-b border-border bg-background/80 backdrop-blur-xl sticky top-0 z-50">
+      <div className="container mx-auto px-4">
+        <div className="flex items-center justify-between h-16">
+          {/* Logo */}
+          <Link href="/" className="flex items-center gap-2 font-bold text-xl sm:text-2xl hover:opacity-80 transition-opacity">
+            voicebox
+          </Link>
+
+          {/* Actions */}
+          <div className="flex items-center gap-2 sm:gap-4">
+            <Button
+              variant="outline"
+              size="sm"
+              asChild
+              className="hidden sm:flex"
+            >
+              <a href={GITHUB_REPO} target="_blank" rel="noopener noreferrer">
+                <Github className="h-4 w-4 mr-2" />
+                GitHub
+              </a>
+            </Button>
+            <Button
+              variant="ghost"
+              size="icon"
+              asChild
+              className="sm:hidden"
+            >
+              <a href={GITHUB_REPO} target="_blank" rel="noopener noreferrer" aria-label="GitHub">
+                <Github className="h-5 w-5" />
+              </a>
+            </Button>
+          </div>
+        </div>
+      </div>
+    </header>
+  );
+}
@@ -0,0 +1,55 @@
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+        outline:
+          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+        secondary:
+          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-10 px-4 py-2',
+        sm: 'h-9 rounded-md px-3',
+        lg: 'h-11 rounded-md text-lg px-8',
+        icon: 'h-10 w-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button';
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Button.displayName = 'Button';
+
+export { Button, buttonVariants };
@@ -0,0 +1,78 @@
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      'rounded-lg border bg-card text-card-foreground shadow-sm',
+      className
+    )}
+    {...props}
+  />
+));
+Card.displayName = 'Card';
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn('flex flex-col space-y-1.5 p-6', className)}
+    {...props}
+  />
+));
+CardHeader.displayName = 'CardHeader';
+
+const CardTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn(
+      'text-2xl font-semibold leading-none tracking-tight',
+      className
+    )}
+    {...props}
+  />
+));
+CardTitle.displayName = 'CardTitle';
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn('text-sm text-muted-foreground', className)}
+    {...props}
+  />
+));
+CardDescription.displayName = 'CardDescription';
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
+));
+CardContent.displayName = 'CardContent';
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn('flex items-center p-6 pt-0', className)}
+    {...props}
+  />
+));
+CardFooter.displayName = 'CardFooter';
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };
@@ -0,0 +1,26 @@
+import { ReactNode } from 'react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './card';
+import { cn } from '@/lib/utils';
+
+interface FeatureCardProps {
+  title: string;
+  description: string;
+  icon?: ReactNode;
+  className?: string;
+}
+
+export function FeatureCard({ title, description, icon, className }: FeatureCardProps) {
+  return (
+    <Card className={cn('text-center', className)}>
+      <CardHeader>
+        {icon && <div className="flex justify-center mb-2">{icon}</div>}
+        <CardTitle className="text-xl sm:text-2xl">{title}</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <CardDescription className="text-sm sm:text-base">
+          {description}
+        </CardDescription>
+      </CardContent>
+    </Card>
+  );
+}
@@ -0,0 +1,45 @@
+'use client';
+
+import { ReactNode } from 'react';
+import { cn } from '@/lib/utils';
+import Image from 'next/image';
+
+interface HeroProps {
+  title: ReactNode;
+  description: string;
+  actions?: ReactNode;
+  className?: string;
+  showLogo?: boolean;
+}
+
+export function Hero({ title, description, actions, className, showLogo = true }: HeroProps) {
+  return (
+    <section className={cn('relative text-center pt-8 sm:pt-12 md:pt-14 -mb-6 sm:-mb-8 md:-mb-10 overflow-hidden -mx-4 sm:-mx-6 md:-mx-4 -mt-4 sm:mt-0 md:mt-0', className)}>
+      <div className="relative z-10 px-4">
+        {showLogo && (
+          <div className="flex justify-center mb-4 sm:mb-6">
+            <Image
+              src="/voicebox-logo.png"
+              alt="Voicebox Logo"
+              width={1024}
+              height={1024}
+              className="w-32 sm:w-40 md:w-48 h-auto"
+              priority
+            />
+          </div>
+        )}
+        <h1 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold mb-4 sm:mb-6">
+          {title}
+        </h1>
+        <p className="text-base sm:text-lg md:text-xl text-foreground/60 mb-6 sm:mb-8 max-w-2xl mx-auto px-2">
+          {description}
+        </p>
+        {actions && (
+          <div className="flex flex-col sm:flex-row gap-3 sm:gap-4 justify-center px-2">
+            {actions}
+          </div>
+        )}
+      </div>
+    </section>
+  );
+}
@@ -0,0 +1,24 @@
+import { cn } from '@/lib/utils';
+import { ReactNode } from 'react';
+
+interface SectionProps {
+  children: ReactNode;
+  className?: string;
+  id?: string;
+}
+
+export function Section({ children, className, id }: SectionProps) {
+  return (
+    <section id={id} className={cn('space-y-4 sm:space-y-6', className)}>
+      {children}
+    </section>
+  );
+}
+
+export function SectionTitle({ children, className }: { children: ReactNode; className?: string }) {
+  return (
+    <h2 className={cn('text-2xl sm:text-3xl md:text-4xl font-bold text-center md:text-left', className)}>
+      {children}
+    </h2>
+  );
+}
@@ -0,0 +1,28 @@
+import * as React from 'react';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+import { cn } from '@/lib/utils';
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = 'horizontal', decorative = true, ...props },
+    ref
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        'shrink-0 bg-border',
+        orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
+        className
+      )}
+      {...props}
+    />
+  )
+);
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+
+export { Separator };
@@ -0,0 +1,11 @@
+// Download links for voicebox releases
+// Update these when new releases are published
+export const LATEST_VERSION = 'v0.1.0';
+
+export const DOWNLOAD_LINKS = {
+  mac: 'https://github.com/USERNAME/voicebox/releases/download/v0.1.0/voicebox-macos-universal.dmg',
+  windows: 'https://github.com/USERNAME/voicebox/releases/download/v0.1.0/voicebox-windows-x64.msi',
+  linux: 'https://github.com/USERNAME/voicebox/releases/download/v0.1.0/voicebox-linux-x86_64.AppImage',
+} as const;
+
+export const GITHUB_REPO = 'https://github.com/USERNAME/voicebox';
@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}