274 lines
12 KiB
TypeScript
274 lines
12 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
|
import FaqDouble from '@/components/sections/faq/FaqDouble';
|
|
import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
|
|
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
|
import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
|
|
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
|
|
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
|
import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
|
|
import SplitAbout from '@/components/sections/about/SplitAbout';
|
|
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
|
|
import { Sparkles } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="expand-hover"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="rounded"
|
|
contentWidth="mediumLarge"
|
|
sizing="largeSizeMediumTitles"
|
|
background="circleGradient"
|
|
cardStyle="gradient-mesh"
|
|
primaryButtonStyle="radial-glow"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="semibold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
navItems={[
|
|
{
|
|
name: "Features", id: "features"},
|
|
{
|
|
name: "Pricing", id: "pricing"},
|
|
{
|
|
name: "Testimonials", id: "testimonials"},
|
|
{
|
|
name: "Support", id: "contact"},
|
|
]}
|
|
brandName="VoxAI"
|
|
button={{
|
|
text: "Get Started", href: "#contact"}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplitDualMedia
|
|
background={{
|
|
variant: "plain"}}
|
|
title="Voice Synthesis, Perfected."
|
|
description="Create studio-quality AI voiceovers in seconds. VoxAI brings advanced neural intelligence to every word, with unparalleled natural clarity and speed."
|
|
tag="Powered by Neural Clarity™"
|
|
buttons={[
|
|
{
|
|
text: "Start Generating", href: "#contact"},
|
|
{
|
|
text: "View Samples", href: "#features"},
|
|
]}
|
|
mediaItems={[
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/urban-apartment-with-minimalist-home-office-wooden-furniture_482257-120933.jpg", imageAlt: "AI Voice Interface"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/pretty-female-singer-listening-sound-headphones-happily-recording-new-song-professional-recording-studio_574295-1755.jpg", imageAlt: "Studio Microphone"}
|
|
]}
|
|
mediaAnimation="slide-up"
|
|
rating={5}
|
|
ratingText="Trusted by 10,000+ creators"
|
|
tagIcon={Sparkles}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<SplitAbout
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
title="The Future of Synthetic Sound"
|
|
description="We bridge the gap between artificial precision and human soul. Our voice models undergo extensive fine-tuning to ensure every intonation, breath, and pause sounds indistinguishable from real life."
|
|
bulletPoints={[
|
|
{
|
|
title: "Ultra-Low Latency", description: "Generate audio in milliseconds."},
|
|
{
|
|
title: "Human-Like Nuance", description: "Advanced emotional range control."},
|
|
{
|
|
title: "Multi-Language Support", description: "Master over 50 languages globally."},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/3d-rainbow-coloured-flowing-particle-waves_1048-18187.jpg"
|
|
mediaAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardEight
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
title: "Neural Voice Cloning", description: "Clone any voice with just 5 minutes of source audio.", imageSrc: "http://img.b2bpic.net/free-photo/african-american-musician-working-editing-new-music-with-greenscreen_482257-121209.jpg"},
|
|
{
|
|
title: "Studio Collaboration", description: "Built-in workspace for teams to sync projects.", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-photographer-with-camera_23-2148503555.jpg"},
|
|
{
|
|
title: "Real-time Text-to-Speech", description: "Instant generation with adaptive playback control.", imageSrc: "http://img.b2bpic.net/free-photo/customer-relationship-management-concept_23-2150038403.jpg"},
|
|
]}
|
|
title="Advanced Engine Capabilities"
|
|
description="Designed for professionals, built for creators. Every feature is tuned to streamline your production pipeline."
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardEleven
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
metrics={[
|
|
{
|
|
id: "m1", value: "99.9%", title: "Uptime Reliability", description: "Always available.", imageSrc: "http://img.b2bpic.net/free-photo/businesswoman-with-growing-chart_23-2152011772.jpg"},
|
|
{
|
|
id: "m2", value: "45ms", title: "Generation Speed", description: "Lightning fast.", imageSrc: "http://img.b2bpic.net/free-photo/business-graphs-figures-laptop-left-open-desk-empty-office_482257-84546.jpg"},
|
|
{
|
|
id: "m3", value: "24/7", title: "Global Support", description: "Always there.", imageSrc: "http://img.b2bpic.net/free-photo/business-chart-visual-graphics-report-concept_53876-125580.jpg"},
|
|
]}
|
|
title="Performance at Scale"
|
|
description="Industry-leading benchmarks for quality and reliability."
|
|
/>
|
|
</div>
|
|
|
|
<div id="pricing" data-section="pricing">
|
|
<PricingCardEight
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
plans={[
|
|
{
|
|
id: "starter", badge: "Starter", price: "$29", subtitle: "For individual creators.", buttons: [
|
|
{
|
|
text: "Get Started", href: "#contact"},
|
|
],
|
|
features: [
|
|
"10 hours audio", "Standard voices", "Email support"],
|
|
},
|
|
{
|
|
id: "professional", badge: "Professional", price: "$99", subtitle: "For growing studios.", buttons: [
|
|
{
|
|
text: "Get Started", href: "#contact"},
|
|
],
|
|
features: [
|
|
"100 hours audio", "All voices", "Priority access"],
|
|
},
|
|
{
|
|
id: "enterprise", badge: "Enterprise", price: "$299", subtitle: "Custom solutions for teams.", buttons: [
|
|
{
|
|
text: "Contact Us", href: "#contact"},
|
|
],
|
|
features: [
|
|
"Unlimited audio", "Custom voice cloning", "Dedicated account manager"],
|
|
},
|
|
]}
|
|
title="Plans That Fit Your Scale"
|
|
description="Choose the tier that matches your production requirements."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardSixteen
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Sarah Chen", role: "Creative Lead", company: "Vibe Media", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-standing-wall_23-2148415941.jpg"},
|
|
{
|
|
id: "2", name: "Mark Wilson", role: "Podcaster", company: "TechTalk", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-with-headphones_23-2149386585.jpg"},
|
|
{
|
|
id: "3", name: "Emma Roberts", role: "Product Manager", company: "Innovate", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/serious-focused-freelancer-using-laptop_1262-18611.jpg"},
|
|
{
|
|
id: "4", name: "David Smith", role: "Engineer", company: "SoundSoft", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/editorial-style-image-capturing-clothing-textures-with-poised-model-gentle-illumination_89887-1493.jpg"},
|
|
{
|
|
id: "5", name: "Lisa Wang", role: "Media Director", company: "GlobalMedia", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-man-working-his-photography-studio_23-2149033295.jpg"},
|
|
{
|
|
id: "6", name: "Tom Baker", role: "Creative Director", company: "StudioOne", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/impressed-young-handsome-caucasian-man-wearing-glasses-headphones-neck-standing-profile-view-touching-headphones-isolated-crimson-wall_141793-80164.jpg"},
|
|
]}
|
|
kpiItems={[
|
|
{
|
|
value: "50M+", label: "Words Generated"},
|
|
{
|
|
value: "15k+", label: "Active Creators"},
|
|
{
|
|
value: "98%", label: "Satisfied Clients"},
|
|
]}
|
|
title="Creator Testimonials"
|
|
description="See why top professionals choose VoxAI."
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqDouble
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
faqs={[
|
|
{
|
|
id: "faq1", title: "How does voice cloning work?", content: "Our AI analyzes audio samples to map vocal characteristics."},
|
|
{
|
|
id: "faq2", title: "Can I cancel anytime?", content: "Yes, our plans are month-to-month."},
|
|
{
|
|
id: "faq3", title: "What languages are supported?", content: "We support over 50 major languages."},
|
|
]}
|
|
title="Frequently Asked Questions"
|
|
description="Have questions? We have answers."
|
|
faqsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplitForm
|
|
useInvertedBackground={false}
|
|
title="Get Started Today"
|
|
description="Fill out the form to request a custom demo or explore enterprise solutions."
|
|
inputs={[
|
|
{
|
|
name: "name", type: "text", placeholder: "Your Name", required: true,
|
|
},
|
|
{
|
|
name: "email", type: "email", placeholder: "Your Email", required: true,
|
|
},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/table-lamp-laptop-yellow-paper-plane-cork-board-against-white-background_23-2147873583.jpg"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseCard
|
|
logoText="VoxAI"
|
|
columns={[
|
|
{
|
|
title: "Product", items: [
|
|
{
|
|
label: "Features", href: "#features"},
|
|
{
|
|
label: "Pricing", href: "#pricing"},
|
|
],
|
|
},
|
|
{
|
|
title: "Company", items: [
|
|
{
|
|
label: "About", href: "#"},
|
|
{
|
|
label: "Careers", href: "#"},
|
|
],
|
|
},
|
|
{
|
|
title: "Legal", items: [
|
|
{
|
|
label: "Privacy", href: "#"},
|
|
{
|
|
label: "Terms", href: "#"},
|
|
],
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|