120 lines
4.7 KiB
TypeScript
120 lines
4.7 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import FooterCard from '@/components/sections/footer/FooterCard';
|
|
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
|
|
import MediaAbout from '@/components/sections/about/MediaAbout';
|
|
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
|
|
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
|
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
|
import TeamCardTen from '@/components/sections/team/TeamCardTen';
|
|
import { CheckCircle, Github, TrendingUp, Twitter, Zap } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="hover-magnetic"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="pill"
|
|
contentWidth="compact"
|
|
sizing="large"
|
|
background="noise"
|
|
cardStyle="gradient-bordered"
|
|
primaryButtonStyle="flat"
|
|
secondaryButtonStyle="layered"
|
|
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="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="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="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="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>
|
|
);
|
|
}
|