mirror of
https://github.com/jamiepine/voicebox.git
synced 2026-09-20 15:20:39 -07:00
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.
This commit is contained in:
Jamie Pine
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user