Merge version_1 into main #2
441
src/app/page.tsx
441
src/app/page.tsx
@@ -20,324 +20,151 @@ export default function LandingPage() {
|
||||
defaultButtonVariant="shift-hover"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="pill"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "Features",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "Pricing",
|
||||
id: "pricing",
|
||||
},
|
||||
{
|
||||
name: "Testimonials",
|
||||
id: "testimonials",
|
||||
},
|
||||
]}
|
||||
brandName="ViralClip AI"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Features", id: "features" },
|
||||
{ name: "Pricing", id: "pricing" },
|
||||
{ name: "Testimonials", id: "testimonials" },
|
||||
]}
|
||||
brandName="ViralClip AI"
|
||||
button={{ text: "Get Started", href: "#contact" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitKpi
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
title="Turn 1 YouTube Link into 10 Viral TikToks in 60 Seconds."
|
||||
description="The No-Watermark AI engine that re-frames, transcribes, and captions your long-form content into high-converting vertical clips automatically."
|
||||
kpis={[
|
||||
{
|
||||
value: "100%",
|
||||
label: "Watermark Free",
|
||||
},
|
||||
{
|
||||
value: "60s",
|
||||
label: "Processing Time",
|
||||
},
|
||||
{
|
||||
value: "10x",
|
||||
label: "Growth Engine",
|
||||
},
|
||||
]}
|
||||
enableKpiAnimation={true}
|
||||
buttons={[
|
||||
{
|
||||
text: "Start Clipping",
|
||||
href: "#",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/3d-abstract-techno-background-with-connecting-lines-dots_1048-11693.jpg?_wi=1"
|
||||
mediaAnimation="slide-up"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/happy-girl-is-working-laptop-girl-with-laptop-emotion-concept_169016-66637.jpg",
|
||||
alt: "User avatar 1",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/young-female-student-stands-with-digital-tablet-her-hands-outside_169016-25043.jpg",
|
||||
alt: "User avatar 2",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/modern-man-checking-social-media-laptop_23-2148422225.jpg",
|
||||
alt: "User avatar 3",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/portrait-hacker_23-2148165965.jpg",
|
||||
alt: "User avatar 4",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/portrait-smiley-businesswoman-indoors-with-arms-closed_23-2148824828.jpg",
|
||||
alt: "User avatar 5",
|
||||
},
|
||||
]}
|
||||
avatarText="Trusted by 5,000+ creators"
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "AI Clipping",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Viral Analytics",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Auto-Subtitles",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Face-Tracking",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Seamless Workflow",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitKpi
|
||||
background={{ variant: "plain" }}
|
||||
title="Turn 1 YouTube Link into 10 Viral TikToks in 60 Seconds."
|
||||
description="The No-Watermark AI engine that re-frames, transcribes, and captions your long-form content into high-converting vertical clips automatically."
|
||||
kpis={[
|
||||
{ value: "100%", label: "Watermark Free" },
|
||||
{ value: "60s", label: "Processing Time" },
|
||||
{ value: "10x", label: "Growth Engine" },
|
||||
]}
|
||||
enableKpiAnimation={true}
|
||||
buttons={[{ text: "Start Clipping", href: "#" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/3d-abstract-techno-background-with-connecting-lines-dots_1048-11693.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/happy-girl-is-working-laptop-girl-with-laptop-emotion-concept_169016-66637.jpg", alt: "User 1" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/young-female-student-stands-with-digital-tablet-her-hands-outside_169016-25043.jpg", alt: "User 2" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/modern-man-checking-social-media-laptop_23-2148422225.jpg", alt: "User 3" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/portrait-hacker_23-2148165965.jpg", alt: "User 4" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/portrait-smiley-businesswoman-indoors-with-arms-closed_23-2148824828.jpg", alt: "User 5" },
|
||||
]}
|
||||
avatarText="Trusted by 5,000+ creators"
|
||||
marqueeItems={[{ type: "text", text: "AI Clipping" }, { type: "text", text: "Viral Analytics" }, { type: "text", text: "Auto-Subtitles" }, { type: "text", text: "Face-Tracking" }, { type: "text", text: "Seamless Workflow" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TestimonialAboutCard
|
||||
useInvertedBackground={false}
|
||||
tag="How it works"
|
||||
title="The Viral Pipeline Engine"
|
||||
description="Our open-source rendering engine ensures your content remains yours. We don't bake branding into your files—just high-energy clips ready to perform."
|
||||
subdescription="From YouTube URL to perfectly formatted TikTok assets, our stack handles the heavy lifting, including face-tracking reframing and AI-burnt subtitles."
|
||||
icon={Zap}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/technology-circuit-processor-innovation-network-concept_53876-133726.jpg?_wi=1"
|
||||
mediaAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<TestimonialAboutCard
|
||||
tag="How it works"
|
||||
title="The Viral Pipeline Engine"
|
||||
description="Our open-source rendering engine ensures your content remains yours. We don't bake branding into your files—just high-energy clips ready to perform."
|
||||
subdescription="From YouTube URL to perfectly formatted TikTok assets, our stack handles the heavy lifting, including face-tracking reframing and AI-burnt subtitles."
|
||||
icon={Zap}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/technology-circuit-processor-innovation-network-concept_53876-133726.jpg"
|
||||
mediaAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardEight
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
title: "Auto-Reframing",
|
||||
description: "AI-powered face tracking follows your speakers in 9:16 vertical crop.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=aiduuu",
|
||||
imageAlt: "tech brand minimalist logo",
|
||||
},
|
||||
{
|
||||
title: "Dynamic Subtitles",
|
||||
description: "Word-by-word highlight animations with custom TikTok-ready fonts.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-abstract-techno-background-with-connecting-lines-dots_1048-11693.jpg?_wi=2",
|
||||
imageAlt: "tech brand minimalist logo",
|
||||
},
|
||||
{
|
||||
title: "Hook Detection",
|
||||
description: "LLM-based analysis finds high-retention moments automatically.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/technology-circuit-processor-innovation-network-concept_53876-133726.jpg?_wi=2",
|
||||
imageAlt: "tech brand minimalist logo",
|
||||
},
|
||||
]}
|
||||
title="Viral-First Features"
|
||||
description="Built for creators, by engineers who know what works."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardEight
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{ title: "Auto-Reframing", description: "AI-powered face tracking follows your speakers in 9:16 vertical crop.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=aiduuu", imageAlt: "reframing" },
|
||||
{ title: "Dynamic Subtitles", description: "Word-by-word highlight animations with custom TikTok-ready fonts.", imageSrc: "http://img.b2bpic.net/free-photo/3d-abstract-techno-background-with-connecting-lines-dots_1048-11693.jpg", imageAlt: "subtitles" },
|
||||
{ title: "Hook Detection", description: "LLM-based analysis finds high-retention moments automatically.", imageSrc: "http://img.b2bpic.net/free-photo/technology-circuit-processor-innovation-network-concept_53876-133726.jpg", imageAlt: "hook" },
|
||||
]}
|
||||
title="Viral-First Features"
|
||||
description="Built for creators, by engineers who know what works."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="socialProof" data-section="socialProof">
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
names={[
|
||||
"ClipLab",
|
||||
"Trendify",
|
||||
"ViralMakers",
|
||||
"SnapStudio",
|
||||
"GrowthVids",
|
||||
"ClipBoost",
|
||||
"FastForward",
|
||||
]}
|
||||
title="Trusted by Top Creators"
|
||||
description="Join the creators who build content at scale."
|
||||
/>
|
||||
</div>
|
||||
<div id="socialProof" data-section="socialProof">
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
names={["ClipLab", "Trendify", "ViralMakers", "SnapStudio", "GrowthVids", "ClipBoost", "FastForward"]}
|
||||
title="Trusted by Top Creators"
|
||||
description="Join the creators who build content at scale."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
plans={[
|
||||
{
|
||||
id: "basic",
|
||||
badge: "Starter",
|
||||
price: "$19/mo",
|
||||
subtitle: "For individual creators",
|
||||
features: [
|
||||
"50 clips/mo",
|
||||
"Standard Subtitles",
|
||||
"Watermark-Free",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "pro",
|
||||
badge: "Pro",
|
||||
price: "$49/mo",
|
||||
subtitle: "For growing teams",
|
||||
features: [
|
||||
"Unlimited clips",
|
||||
"Advanced Analytics",
|
||||
"Priority Rendering",
|
||||
],
|
||||
},
|
||||
]}
|
||||
title="Simple Viral Pricing"
|
||||
description="Scale your production without the platform tax."
|
||||
/>
|
||||
</div>
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
plans={[
|
||||
{ id: "basic", badge: "Starter", price: "$19/mo", subtitle: "For individual creators", features: ["50 clips/mo", "Standard Subtitles", "Watermark-Free"] },
|
||||
{ id: "pro", badge: "Pro", price: "$49/mo", subtitle: "For growing teams", features: ["Unlimited clips", "Advanced Analytics", "Priority Rendering"] },
|
||||
]}
|
||||
title="Simple Viral Pricing"
|
||||
description="Scale your production without the platform tax."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "100k+",
|
||||
description: "Clips processed",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "95%",
|
||||
description: "User growth rate",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "2ms",
|
||||
description: "Transcription speed",
|
||||
},
|
||||
]}
|
||||
title="Impact by the Numbers"
|
||||
description="Our pipeline consistently delivers results for viral content."
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
metrics={[
|
||||
{ id: "m1", value: "100k+", description: "Clips processed" },
|
||||
{ id: "m2", value: "95%", description: "User growth rate" },
|
||||
{ id: "m3", value: "2ms", description: "Transcription speed" },
|
||||
]}
|
||||
title="Impact by the Numbers"
|
||||
description="Our pipeline consistently delivers results for viral content."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTen
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
title: "Game Changer",
|
||||
quote: "I stopped spending hours editing. My TikToks now go viral consistently.",
|
||||
name: "Sarah Johnson",
|
||||
role: "CEO",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/bearded-male-eyeglasses-with-tattoo-his-arm-sits-chair-using-tablet-pc_613910-12174.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "Incredible Engine",
|
||||
quote: "The no-watermark output is exactly what I needed for my brand.",
|
||||
name: "Michael Chen",
|
||||
role: "CTO",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-with-digital-tablet-cafe_23-2147778648.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "Scale Multiplied",
|
||||
quote: "My workflow is 10x faster now. Highly recommended.",
|
||||
name: "Emily Rodriguez",
|
||||
role: "Marketing",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-young-handsome-man-sitting-cafe-table_1262-975.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
title: "Best in Class",
|
||||
quote: "The caption animations look professional and high-effort.",
|
||||
name: "David Kim",
|
||||
role: "Manager",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/male-graphic-designer-using-digital-tablet_1170-1092.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
title: "So Smooth",
|
||||
quote: "The auto-reframe feature saved me so much time every single day.",
|
||||
name: "Alex Smith",
|
||||
role: "Editor",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/military-girl-camouflage-uniform-against-army-background-shooting-range_627829-8532.jpg",
|
||||
},
|
||||
]}
|
||||
title="Voices of the Viral Engine"
|
||||
description="Hear what creators say about their workflow transformation."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTen
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{ id: "1", title: "Game Changer", quote: "I stopped spending hours editing. My TikToks now go viral consistently.", name: "Sarah Johnson", role: "CEO", imageSrc: "http://img.b2bpic.net/free-photo/bearded-male-eyeglasses-with-tattoo-his-arm-sits-chair-using-tablet-pc_613910-12174.jpg" },
|
||||
{ id: "2", title: "Incredible Engine", quote: "The no-watermark output is exactly what I needed for my brand.", name: "Michael Chen", role: "CTO", imageSrc: "http://img.b2bpic.net/free-photo/woman-with-digital-tablet-cafe_23-2147778648.jpg" },
|
||||
{ id: "3", title: "Scale Multiplied", quote: "My workflow is 10x faster now. Highly recommended.", name: "Emily Rodriguez", role: "Marketing", imageSrc: "http://img.b2bpic.net/free-photo/happy-young-handsome-man-sitting-cafe-table_1262-975.jpg" },
|
||||
{ id: "4", title: "Best in Class", quote: "The caption animations look professional and high-effort.", name: "David Kim", role: "Manager", imageSrc: "http://img.b2bpic.net/free-photo/male-graphic-designer-using-digital-tablet_1170-1092.jpg" },
|
||||
{ id: "5", title: "So Smooth", quote: "The auto-reframe feature saved me so much time every single day.", name: "Alex Smith", role: "Editor", imageSrc: "http://img.b2bpic.net/free-photo/military-girl-camouflage-uniform-against-army-background-shooting-range_627829-8532.jpg" },
|
||||
]}
|
||||
title="Voices of the Viral Engine"
|
||||
description="Hear what creators say about their workflow transformation."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
title="Start Your Viral Engine Today"
|
||||
description="Enter your email to get early access to our beta."
|
||||
tag="Early Access"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
tag="Early Access"
|
||||
title="Start Your Viral Engine Today"
|
||||
description="Enter your email to get early access to our beta."
|
||||
background={{ variant: "plain" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{
|
||||
title: "Product",
|
||||
items: [
|
||||
{
|
||||
label: "Features",
|
||||
href: "#features",
|
||||
},
|
||||
{
|
||||
label: "Pricing",
|
||||
href: "#pricing",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{
|
||||
label: "About",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Legal",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
logoText="ViralClip AI"
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
logoText="ViralClip AI"
|
||||
columns={[
|
||||
{ title: "Product", items: [{ label: "Features", href: "#features" }, { label: "Pricing", href: "#pricing" }] },
|
||||
{ title: "Company", items: [{ label: "About", href: "#" }, { label: "Legal", href: "#" }] },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user