Update src/app/page.tsx

This commit is contained in:
2026-04-11 09:18:53 +00:00
parent d713b5ef1e
commit 1510dfa235

View File

@@ -26,93 +26,93 @@ export default function LandingPage() {
headingFontWeight="normal"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
navItems={[
{ name: "Dashboard", id: "/" },
{ name: "Create Video", id: "/create" },
{ name: "My Videos", id: "/my-videos" },
{ name: "Settings", id: "/settings" },
]}
brandName="AI Shortform"
button={{ text: "Upgrade" }}
/>
</div>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
navItems={[
{ name: "Dashboard", id: "/" },
{ name: "Create Video", id: "/create" },
{ name: "My Videos", id: "/my-videos" },
{ name: "Settings", id: "/settings" },
]}
brandName="AI Shortform"
button={{ text: "Upgrade" }}
/>
</div>
<div id="hero" data-section="hero">
<HeroLogoBillboard
background={{ variant: "sparkles-gradient" }}
logoText="AI Video Creator"
description="Generate viral short-form content in seconds. High-fidelity videos tailored for social platforms."
buttons={[{ text: "Start Creating", href: "/create" }]}
imageSrc="http://img.b2bpic.net/free-photo/3d-modern-techno-background-with-abstract-cyber-particles_1048-12198.jpg"
imageAlt="AI Dashboard"
mediaAnimation="blur-reveal"
/>
</div>
<div id="hero" data-section="hero">
<HeroLogoBillboard
background={{ variant: "sparkles-gradient" }}
logoText="AI Video Creator"
description="Generate viral short-form content in seconds. High-fidelity videos tailored for social platforms."
buttons={[{ text: "Start Creating", href: "/create" }]}
imageSrc="http://img.b2bpic.net/free-photo/3d-modern-techno-background-with-abstract-cyber-particles_1048-12198.jpg"
imageAlt="AI Dashboard"
mediaAnimation="blur-reveal"
/>
</div>
<div id="stats" data-section="stats">
<MetricCardThree
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={true}
metrics={[
{ id: "m1", title: "Videos Generated", value: "142", icon: CheckCircle },
{ id: "m2", title: "Total Reach", value: "12.5k", icon: TrendingUp },
{ id: "m3", title: "Active Projects", value: "8", icon: Zap },
]}
title="Platform Activity"
description="Your account overview"
/>
</div>
<div id="stats" data-section="stats">
<MetricCardThree
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={true}
metrics={[
{ id: "m1", title: "Videos Generated", value: "142", icon: CheckCircle },
{ id: "m2", title: "Total Reach", value: "12.5k", icon: TrendingUp },
{ id: "m3", title: "Active Projects", value: "8", icon: Zap },
]}
title="Platform Activity"
description="Your account overview"
/>
</div>
<div id="recent" data-section="recent">
<ProductCardThree
animationType="slide-up"
textboxLayout="default"
gridVariant="three-columns-all-equal-width"
useInvertedBackground={false}
products={[
{ id: "p1", name: "Top 5 Scary Places", price: "15s", imageSrc: "http://img.b2bpic.net/free-photo/close-up-water-drops-plant-s-leaves_181624-20541.jpg" },
{ id: "p2", name: "Motivation Monday", price: "30s", imageSrc: "http://img.b2bpic.net/free-photo/note-with-encouragement-quote-starting-with-dear_23-2150105114.jpg" },
{ id: "p3", name: "Fun Fact #42", price: "15s", imageSrc: "http://img.b2bpic.net/free-photo/copy-space-light-bulb-table_23-2148519411.jpg" },
]}
title="Recent Videos"
description="Your latest masterpieces"
/>
</div>
<div id="recent" data-section="recent">
<ProductCardThree
animationType="slide-up"
textboxLayout="default"
gridVariant="three-columns-all-equal-width"
useInvertedBackground={false}
products={[
{ id: "p1", name: "Top 5 Scary Places", price: "15s", imageSrc: "http://img.b2bpic.net/free-photo/close-up-water-drops-plant-s-leaves_181624-20541.jpg" },
{ id: "p2", name: "Motivation Monday", price: "30s", imageSrc: "http://img.b2bpic.net/free-photo/note-with-encouragement-quote-starting-with-dear_23-2150105114.jpg" },
{ id: "p3", name: "Fun Fact #42", price: "15s", imageSrc: "http://img.b2bpic.net/free-photo/copy-space-light-bulb-table_23-2148519411.jpg" },
]}
title="Recent Videos"
description="Your latest masterpieces"
/>
</div>
<div id="team" data-section="team">
<TeamCardTen
title="Our Team"
tag="Experts"
membersAnimation="slide-up"
memberVariant="grid"
members={[]}
useInvertedBackground={false}
/>
</div>
<div id="team" data-section="team">
<TeamCardTen
title="Our Team"
tag="Experts"
membersAnimation="slide-up"
memberVariant="default"
members={[]}
useInvertedBackground={false}
/>
</div>
<div id="about" data-section="about">
<MediaAbout
title="About Us"
description="We simplify AI video creation."
useInvertedBackground={false}
imageSrc="http://img.b2bpic.net/free-photo/abstract-swirl-background_1017-2756.jpg"
imageAlt="Abstract swirl background"
/>
</div>
<div id="about" data-section="about">
<MediaAbout
title="About Us"
description="We simplify AI video creation."
useInvertedBackground={false}
imageSrc="http://img.b2bpic.net/free-photo/abstract-swirl-background_1017-2756.jpg"
imageAlt="Abstract swirl background"
/>
</div>
<div id="footer" data-section="footer">
<FooterCard
logoText="AI Video Creator"
copyrightText="© 2025 AI Shortform Inc."
socialLinks={[
{ icon: Twitter, href: "#", ariaLabel: "Twitter" },
{ icon: Github, href: "#", ariaLabel: "Github" },
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterCard
logoText="AI Video Creator"
copyrightText="© 2025 AI Shortform Inc."
socialLinks={[
{ icon: Twitter, href: "#", ariaLabel: "Twitter" },
{ icon: Github, href: "#", ariaLabel: "Github" },
]}
/>
</div>
</ReactLenis>
</ThemeProvider>
);