209 lines
11 KiB
TypeScript
209 lines
11 KiB
TypeScript
"use client";
|
|
|
|
import { CheckCircle, Sparkles, Star, Zap } from "lucide-react";
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
|
import HeroBillboard from "@/components/sections/hero/HeroBillboard";
|
|
import FeatureCardTwentyThree from "@/components/sections/feature/FeatureCardTwentyThree";
|
|
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
|
|
import TestimonialCardOne from "@/components/sections/testimonial/TestimonialCardOne";
|
|
import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
|
|
import FooterMedia from "@/components/sections/footer/FooterMedia";
|
|
|
|
const handleContactSubmit = (data: Record<string, string>) => {
|
|
console.log("Contact form submitted:", data);
|
|
};
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="text-shift"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="rounded"
|
|
contentWidth="medium"
|
|
sizing="largeSmall"
|
|
background="noise"
|
|
cardStyle="soft-shadow"
|
|
primaryButtonStyle="diagonal-gradient"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="normal"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
brandName="VideoAI"
|
|
navItems={[
|
|
{ name: "Features", id: "features" },
|
|
{ name: "Testimonials", id: "testimonials" },
|
|
{ name: "FAQ", id: "faq" },
|
|
]}
|
|
button={{ text: "Get Started Free", href: "contact" }}
|
|
animateOnLoad={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboard
|
|
title="Create Professional Videos in Minutes with AI"
|
|
description="No filming, no editing skills needed. Just enter your email and start generating stunning videos instantly. Completely free."
|
|
background={{ variant: "sparkles-gradient" }}
|
|
tag="AI-Powered"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="slide-up"
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AjJU4O3zBUQ47Df2IOOrZgdlT1/a-sleek-ai-video-generator-dashboard-int-1773100344935-17e165b6.png?_wi=1"
|
|
imageAlt="AI video generator dashboard interface"
|
|
mediaAnimation="blur-reveal"
|
|
avatars={[
|
|
{
|
|
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AjJU4O3zBUQ47Df2IOOrZgdlT1/a-professional-portrait-photograph-of-a--1773100342983-0117cf2e.png", alt: "User 1"},
|
|
{
|
|
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AjJU4O3zBUQ47Df2IOOrZgdlT1/a-professional-portrait-photograph-of-a--1773100345026-242327a2.png", alt: "User 2"},
|
|
{
|
|
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AjJU4O3zBUQ47Df2IOOrZgdlT1/a-professional-portrait-of-a-diverse-wom-1773100343550-7ffb3bf0.png", alt: "User 3"},
|
|
]}
|
|
avatarText="Join 50,000+ creators"
|
|
buttons={[
|
|
{ text: "Get Started Free", href: "contact" },
|
|
{ text: "Watch Demo", href: "#features" },
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardTwentyThree
|
|
title="Powerful Features, Zero Complexity"
|
|
description="Everything you need to create professional videos without the steep learning curve."
|
|
tag="Features"
|
|
tagIcon={Zap}
|
|
tagAnimation="slide-up"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
id: "1", title: "AI Text-to-Video Magic", tags: ["AI-Powered", "Instant"],
|
|
imageSrc:
|
|
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AjJU4O3zBUQ47Df2IOOrZgdlT1/a-visual-representation-of-an-ai-video-b-1773100343647-65f1afa8.png", imageAlt: "AI video creation from text"},
|
|
{
|
|
id: "2", title: "Customize Everything Your Way", tags: ["Flexible", "Professional"],
|
|
imageSrc:
|
|
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AjJU4O3zBUQ47Df2IOOrZgdlT1/an-interface-showing-various-video-custo-1773100344839-66700617.png", imageAlt: "Video customization options"},
|
|
{
|
|
id: "3", title: "Export & Share Instantly", tags: ["Social-Ready", "One-Click"],
|
|
imageSrc:
|
|
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AjJU4O3zBUQ47Df2IOOrZgdlT1/a-clean-interface-showing-video-export-a-1773100345960-7e5eb090.png", imageAlt: "Export and sharing interface"},
|
|
]}
|
|
buttons={[{ text: "Start Creating", href: "contact" }]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="socialproof" data-section="socialproof">
|
|
<SocialProofOne
|
|
title="Trusted by Creators & Brands"
|
|
description="Join thousands of content creators, marketers, and businesses using our platform daily."
|
|
tag="Partners"
|
|
tagIcon={CheckCircle}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
names=[
|
|
"TechFlow Studios", "Creative Labs", "Digital Agency Co", "Content Hub", "Brand Media", "Innovate Studio", "Vision Creative"]
|
|
logos={[
|
|
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AjJU4O3zBUQ47Df2IOOrZgdlT1/a-minimalist-tech-company-logo-featuring-1773100343409-28e56add.png", "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AjJU4O3zBUQ47Df2IOOrZgdlT1/a-modern-technology-company-logo-with-ab-1773100342863-cbb6d8de.png", "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AjJU4O3zBUQ47Df2IOOrZgdlT1/a-sleek-minimalist-logo-for-a-technology-1773100343540-4f2839e6.png", "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AjJU4O3zBUQ47Df2IOOrZgdlT1/a-contemporary-tech-company-logo-with-cl-1773100343062-ac331bc9.png", "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AjJU4O3zBUQ47Df2IOOrZgdlT1/a-professional-technology-company-logo-f-1773100343591-b1c1ebdd.png"]}
|
|
speed={40}
|
|
showCard={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardOne
|
|
title="What Our Users Say"
|
|
description="Real feedback from creators who've transformed their content workflow."
|
|
tag="Testimonials"
|
|
tagIcon={Star}
|
|
tagAnimation="slide-up"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
gridVariant="uniform-all-items-equal"
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Sarah Johnson", role: "Content Creator", company: "Creative Studios", rating: 5,
|
|
imageSrc:
|
|
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AjJU4O3zBUQ47Df2IOOrZgdlT1/a-professional-portrait-photograph-of-a--1773100342983-0117cf2e.png"},
|
|
{
|
|
id: "2", name: "Michael Chen", role: "Marketing Director", company: "Brand Agency", rating: 5,
|
|
imageSrc:
|
|
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AjJU4O3zBUQ47Df2IOOrZgdlT1/a-professional-portrait-photograph-of-a--1773100345026-242327a2.png"},
|
|
{
|
|
id: "3", name: "Emily Rodriguez", role: "Social Media Manager", company: "Digital Hub", rating: 5,
|
|
imageSrc:
|
|
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AjJU4O3zBUQ47Df2IOOrZgdlT1/a-professional-portrait-of-a-diverse-wom-1773100343550-7ffb3bf0.png"},
|
|
{
|
|
id: "4", name: "David Kim", role: "Content Producer", company: "Media House", rating: 5,
|
|
imageSrc:
|
|
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AjJU4O3zBUQ47Df2IOOrZgdlT1/a-professional-portrait-photograph-of-a--1773100343574-8e6f6869.png"},
|
|
]}
|
|
buttons={[{ text: "Join Creators Today", href: "contact" }]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplitForm
|
|
title="Start Creating Videos Today"
|
|
description="Join thousands of creators already using our free AI video generator. No credit card required. Just enter your email and start creating stunning videos in minutes."
|
|
inputs={[
|
|
{
|
|
name: "email", type: "email", placeholder: "your@email.com", required: true,
|
|
},
|
|
{
|
|
name: "name", type: "text", placeholder: "Your name", required: true,
|
|
},
|
|
]}
|
|
useInvertedBackground={true}
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AjJU4O3zBUQ47Df2IOOrZgdlT1/a-sleek-ai-video-generator-dashboard-int-1773100344935-17e165b6.png?_wi=2"
|
|
imageAlt="AI video creation in action"
|
|
mediaAnimation="blur-reveal"
|
|
mediaPosition="right"
|
|
buttonText="Get Started Free"
|
|
onSubmit={handleContactSubmit}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterMedia
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AjJU4O3zBUQ47Df2IOOrZgdlT1/a-vibrant-abstract-video-background-show-1773100343453-5875c605.png"
|
|
imageAlt="AI video creation background"
|
|
logoText="VideoAI"
|
|
copyrightText="© 2025 VideoAI. Free AI Video Generator. All rights reserved."
|
|
columns={[
|
|
{
|
|
title: "Product", items: [
|
|
{ label: "Features", href: "#features" },
|
|
{ label: "Pricing", href: "#pricing" },
|
|
{ label: "Get Started", href: "#contact" },
|
|
],
|
|
},
|
|
{
|
|
title: "Resources", items: [
|
|
{ label: "Blog", href: "#blog" },
|
|
{ label: "Tutorials", href: "#tutorials" },
|
|
{ label: "FAQ", href: "#faq" },
|
|
],
|
|
},
|
|
{
|
|
title: "Legal", items: [
|
|
{ label: "Privacy Policy", href: "#privacy" },
|
|
{ label: "Terms of Service", href: "#terms" },
|
|
{ label: "Contact Us", href: "#contact" },
|
|
],
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|