186 lines
12 KiB
TypeScript
186 lines
12 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
|
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
|
import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
|
|
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
|
|
import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
|
|
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
|
|
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
|
import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
|
|
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
|
|
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="text-stagger"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="pill"
|
|
contentWidth="medium"
|
|
sizing="mediumLargeSizeMediumTitles"
|
|
background="fluid"
|
|
cardStyle="glass-elevated"
|
|
primaryButtonStyle="diagonal-gradient"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="extrabold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleApple
|
|
navItems={[
|
|
{ name: "Features", id: "features" },
|
|
{ name: "Pricing", id: "pricing" },
|
|
{ name: "Testimonials", id: "testimonials" },
|
|
{ name: "Contact", id: "contact" },
|
|
]}
|
|
brandName="VidGenAI"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardTestimonial
|
|
background={{ variant: "gradient-bars" }}
|
|
title="Create Professional AI Videos in Seconds"
|
|
description="Unlock infinite creative potential with our advanced AI video generation platform. From concept to finished masterpiece, VidGenAI simplifies the production process."
|
|
testimonials={[
|
|
{ name: "Alice R.", handle: "@alicer", testimonial: "The best AI tool for creators! Saved me hundreds of hours of production time.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-bearded-young-reporter-with-photo-camera-dark-photo-studio_613910-3843.jpg" },
|
|
{ name: "Marcus V.", handle: "@mv_tech", testimonial: "Unbelievable quality. The video consistency is unmatched in the industry.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/middle-eastern-businessman-does-daily-tasks-corporate-job_482257-116713.jpg" },
|
|
{ name: "Elena P.", handle: "@elena_edits", testimonial: "Professional-grade results from simple text prompts. A total game changer.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/experienced-tattoo-artist-working-client-tattoo_23-2149479239.jpg" },
|
|
{ name: "David W.", handle: "@dw_creative", testimonial: "Everything I needed to scale my video content. Highly recommended.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-business-woman-standing-outside-office-buildings-business-success-concept_58466-11854.jpg" },
|
|
{ name: "Sarah K.", handle: "@sarahk_pro", testimonial: "Incredibly fast render times and stunning aesthetic choices.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/happy-young-professional-posing-office_1262-21170.jpg" },
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/cyberpunk-illustration-with-neon-colors-futuristic-technology_23-2151672026.jpg?_wi=1"
|
|
imageAlt="ai video generation interface"
|
|
avatars={[
|
|
{ src: "http://img.b2bpic.net/free-photo/cyberpunk-city-stroll-with-drone-companions_23-2152007986.jpg", alt: "Cyberpunk city stroll" },
|
|
{ src: "http://img.b2bpic.net/free-photo/man-with-vr-headset-touching-holographic-screen_53876-101150.jpg", alt: "VR headset" },
|
|
{ src: "http://img.b2bpic.net/free-photo/door-leading-magical-world_23-2151038214.jpg", alt: "Door" },
|
|
{ src: "http://img.b2bpic.net/free-photo/blockchain-technology-cartoon-illustration_23-2151572140.jpg", alt: "Blockchain" },
|
|
{ src: "http://img.b2bpic.net/free-photo/portrait-bearded-young-reporter-with-photo-camera-dark-photo-studio_613910-3843.jpg", alt: "Creative director" },
|
|
]}
|
|
avatarText="Trusted by 10,000+ creators worldwide"
|
|
marqueeItems={[
|
|
{ type: "text", text: "High Resolution" },
|
|
{ type: "text", text: "Ultra-Fast Rendering" },
|
|
{ type: "text", text: "Cinematic Motion" },
|
|
{ type: "text", text: "Smart Tracking" },
|
|
{ type: "text", text: "Professional Grading" },
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TextSplitAbout
|
|
useInvertedBackground={false}
|
|
title="Redefining Visual Creation"
|
|
description={[
|
|
"VidGenAI leverages proprietary neural networks to turn simple text prompts into high-fidelity video assets.", "Our platform is built for creators, marketers, and enterprises looking for scalable content production without compromising on artistic quality."]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardSeven
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{ title: "Neural Motion Synthesis", description: "Generate fluid, natural motion in every frame using our trained AI models.", imageSrc: "http://img.b2bpic.net/free-photo/movie-reels-bicolored-background-with-copy-space_23-2148416772.jpg" },
|
|
{ title: "Smart Tracking", description: "Auto-track objects and subjects with perfect precision during video generation.", imageSrc: "http://img.b2bpic.net/free-photo/neon-lights-swirling_23-2147785920.jpg" },
|
|
{ title: "Precision Grading", description: "Professional-grade cinematic color grading baked into your generated files.", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-video-editor-working-with-dual-monitors-creative-agency_482257-118838.jpg" },
|
|
]}
|
|
title="Advanced AI Features"
|
|
description="Packed with powerful tools to help you produce professional videos seamlessly."
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardFourteen
|
|
useInvertedBackground={false}
|
|
title="Production Powerhouse"
|
|
tag="Reliability"
|
|
metrics={[
|
|
{ id: "m1", value: "1M+", description: "Videos generated" },
|
|
{ id: "m2", value: "99.9%", description: "Render uptime" },
|
|
{ id: "m3", value: "200ms", description: "Avg latency" },
|
|
]}
|
|
metricsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="pricing" data-section="pricing">
|
|
<PricingCardNine
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
plans={[
|
|
{ id: "starter", title: "Starter", price: "$29", period: "/mo", features: ["10 AI Videos/mo", "720p Resolution", "Standard Support"], button: { text: "Get Started" }, imageSrc: "http://img.b2bpic.net/free-photo/man-doing-it-support-job-from-home-walking-around-personal-office-with-laptop_482257-92977.jpg" },
|
|
{ id: "pro", title: "Professional", price: "$99", period: "/mo", features: ["100 AI Videos/mo", "4K Resolution", "Priority Support", "Advanced Customization"], button: { text: "Get Pro" }, imageSrc: "http://img.b2bpic.net/free-photo/cyberpunk-illustration-with-neon-colors-futuristic-technology_23-2151672026.jpg?_wi=2" },
|
|
{ id: "enterprise", title: "Enterprise", price: "Custom", period: "", features: ["Unlimited Videos", "API Access", "Dedicated Manager", "White-label"], button: { text: "Contact Sales" }, imageSrc: "http://img.b2bpic.net/free-photo/african-american-man-with-impairment-analyzing-online-report-laptop-planning-project-strategy-disability-friendly-office-entrepreneur-with-health-condition-sitting-wheelchair-job_482257-47246.jpg?_wi=1" },
|
|
]}
|
|
title="Flexible Plans"
|
|
description="Choose the perfect plan for your production needs."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardThirteen
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{ id: "t1", name: "Alice R.", handle: "@alicer", testimonial: "Fantastic output quality, easy to use interface.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-man-holding-disposable-coffee-cup-looking-digital-tablet-standing-front-streamlined-mirror-round-copper-chandelier_23-2147937519.jpg" },
|
|
{ id: "t2", name: "Marcus V.", handle: "@mv_tech", testimonial: "Best in class AI video technology.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-woman-digital-nomad-standing-office-with-laptop-smiling-working-her_1258-195350.jpg" },
|
|
{ id: "t3", name: "Elena P.", handle: "@elena_edits", testimonial: "Scalability is what makes this tool essential.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-male-personal-shopper-working_23-2148924142.jpg" },
|
|
{ id: "t4", name: "David W.", handle: "@dw_creative", testimonial: "Incredibly high rendering quality and speed.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/studio-shot-smiling-confident-young-african-american-clean-shaven-man-enjoying-new-album-his-favourite-artist-via-stylish-headphones-using-online-music-application-some-electronic-device_343059-343.jpg" },
|
|
{ id: "t5", name: "Sarah K.", handle: "@sarahk_pro", testimonial: "Game changing platform for my studio.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/closeup-content-pretty-businesswoman-glasses_1262-1740.jpg" },
|
|
]}
|
|
showRating={true}
|
|
title="Trusted by Creators"
|
|
description="Join thousands of professionals using VidGenAI."
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitMedia
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
faqs={[
|
|
{ id: "q1", title: "How do I get started?", content: "Simply sign up, verify your email, and start generating your first video immediately from the dashboard." },
|
|
{ id: "q2", title: "What resolution do you support?", content: "We support resolutions ranging from 720p up to full 4K Cinematic resolution." },
|
|
{ id: "q3", title: "Is my data secure?", content: "We take data privacy very seriously. All uploaded assets are encrypted and only accessible by you." },
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/african-american-man-with-impairment-analyzing-online-report-laptop-planning-project-strategy-disability-friendly-office-entrepreneur-with-health-condition-sitting-wheelchair-job_482257-47246.jpg?_wi=2"
|
|
mediaAnimation="slide-up"
|
|
title="Frequently Asked Questions"
|
|
description="Everything you need to know about our AI platform."
|
|
faqsAnimation="blur-reveal"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCenter
|
|
useInvertedBackground={false}
|
|
background={{ variant: "plain" }}
|
|
title="Ready to Start?"
|
|
description="Subscribe to our newsletter to receive updates and exclusive access to new AI models."
|
|
tag="Newsletter"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoEmphasis
|
|
columns={[
|
|
{ items: [{ label: "Features", href: "#features" }, { label: "Pricing", href: "#pricing" }, { label: "Contact", href: "#contact" }] },
|
|
{ items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }] },
|
|
]}
|
|
logoText="VidGenAI"
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|