164 lines
7.9 KiB
TypeScript
164 lines
7.9 KiB
TypeScript
"use client";
|
||
|
||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||
import ReactLenis from "lenis/react";
|
||
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
||
import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
|
||
import FooterCard from '@/components/sections/footer/FooterCard';
|
||
import HeroLogo from '@/components/sections/hero/HeroLogo';
|
||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||
import PricingCardOne from '@/components/sections/pricing/PricingCardOne';
|
||
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
||
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
|
||
import { Instagram, Linkedin, Twitter } from "lucide-react";
|
||
|
||
export default function LandingPage() {
|
||
return (
|
||
<ThemeProvider
|
||
defaultButtonVariant="shift-hover"
|
||
defaultTextAnimation="entrance-slide"
|
||
borderRadius="soft"
|
||
contentWidth="smallMedium"
|
||
sizing="mediumLargeSizeLargeTitles"
|
||
background="floatingGradient"
|
||
cardStyle="gradient-mesh"
|
||
primaryButtonStyle="gradient"
|
||
secondaryButtonStyle="glass"
|
||
headingFontWeight="bold"
|
||
>
|
||
<ReactLenis root>
|
||
<div id="nav" data-section="nav">
|
||
<NavbarStyleCentered
|
||
navItems={[
|
||
{ name: "Features", id: "#features" },
|
||
{ name: "Studio", id: "#studio" },
|
||
{ name: "Pricing", id: "#pricing" },
|
||
{ name: "Wardrobe AI", id: "/wardrobe-ai" },
|
||
{ name: "Contact", id: "#contact" },
|
||
]}
|
||
brandName="StyleGen AI"
|
||
/>
|
||
</div>
|
||
|
||
<div id="hero" data-section="hero">
|
||
<HeroLogo
|
||
logoText="StyleGen AI"
|
||
description="Your AI-powered personal stylist and virtual try-on studio. See exactly how outfits look and fit before you buy, powered by agentic intelligence."
|
||
buttons={[
|
||
{ text: "Get Started", href: "#contact" },
|
||
{ text: "Explore Studio", href: "#studio" },
|
||
]}
|
||
imageSrc="http://img.b2bpic.net/free-photo/painted-eyeglasses-aeroplane-camera-against-pink-background_23-2148084278.jpg"
|
||
/>
|
||
</div>
|
||
|
||
<div id="features" data-section="features">
|
||
<FeatureCardSeven
|
||
animationType="slide-up"
|
||
textboxLayout="default"
|
||
useInvertedBackground={false}
|
||
features={[
|
||
{
|
||
title: "Smart Fit Intelligence", description: "Accurate body measurements and fit scores that predict exactly how a garment will feel on you.", imageSrc: "http://img.b2bpic.net/free-photo/virtual-reality-shopping-experience_23-2151952989.jpg"},
|
||
{
|
||
title: "AI Stylist Agent", description: "A personal fashion agent that suggests outfits based on skin tone, body shape, and current trends.", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-hands-taking-photos_23-2149731132.jpg"},
|
||
{
|
||
title: "Customization Studio", description: "Push creative boundaries with real-time fabric simulations, pattern generation, and adjustment controls.", imageSrc: "http://img.b2bpic.net/free-photo/still-life-fashion-designer-s-office_23-2150543691.jpg"},
|
||
]}
|
||
title="Beyond Visuals: Intelligent Fashion"
|
||
description="Our AI goes deeper than simple overlays to provide meaningful style and fit insights."
|
||
/>
|
||
</div>
|
||
|
||
<div id="social-proof" data-section="social-proof">
|
||
<SocialProofOne
|
||
textboxLayout="default"
|
||
useInvertedBackground={false}
|
||
names={[
|
||
"FashionAI", "RetailPulse", "StyleMetric", "TrendSet", "FitLogic", "ApparelLab", "ClothVision"]}
|
||
title="Trusted by Fashion Forward Brands"
|
||
description="Join leading innovators revolutionizing the future of retail."
|
||
/>
|
||
</div>
|
||
|
||
<div id="pricing" data-section="pricing">
|
||
<PricingCardOne
|
||
animationType="slide-up"
|
||
textboxLayout="default"
|
||
useInvertedBackground={false}
|
||
plans={[
|
||
{
|
||
id: "basic", badge: "Entry", price: "$19/mo", subtitle: "For personal styling", features: [
|
||
"Virtual Try-On", "Fit Suggestions", "Outfit Memory"],
|
||
},
|
||
{
|
||
id: "pro", badge: "Pro", price: "$49/mo", subtitle: "For fashion enthusiasts", features: [
|
||
"Advanced Customization", "Personal Stylist Agent", "Trend Insights"],
|
||
},
|
||
{
|
||
id: "business", badge: "Expert", price: "$99/mo", subtitle: "For power creators", features: [
|
||
"Advanced Studio Access", "API Access", "Prioritized Support"],
|
||
},
|
||
]}
|
||
title="Simple, Transparent Pricing"
|
||
description="Choose the right plan to unlock your fashion potential."
|
||
/>
|
||
</div>
|
||
|
||
<div id="testimonials" data-section="testimonials">
|
||
<TestimonialCardSix
|
||
animationType="slide-up"
|
||
textboxLayout="default"
|
||
useInvertedBackground={false}
|
||
testimonials={[
|
||
{
|
||
id: "1", name: "Sarah J.", handle: "@sarah_style", testimonial: "Finally, I can know if a dress fits before ordering! The fit intelligence is incredible.", imageSrc: "http://img.b2bpic.net/free-photo/elderly-client-looking-formal-blazers-shopping-mall_482257-93110.jpg"},
|
||
{
|
||
id: "2", name: "Marcus C.", handle: "@marcus_tech", testimonial: "As a developer, I love the agentic approach. The stylist engine actually understands my personal taste.", imageSrc: "http://img.b2bpic.net/free-photo/man-black-working-laptop-cafe_23-2147962625.jpg"},
|
||
{
|
||
id: "3", name: "Elena R.", handle: "@elena_fashion", testimonial: "The customization studio is a game-changer. Being able to visualize custom designs in real-time is magic.", imageSrc: "http://img.b2bpic.net/free-photo/smiley-man-holding-photos-indoors_23-2148503623.jpg"},
|
||
{
|
||
id: "4", name: "David K.", handle: "@david_k", testimonial: "The confidence meter helped me pick the perfect outfit for my interview. I felt great and got the job!", imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-confident-businessman-wearing-glasses_158595-5358.jpg"},
|
||
{
|
||
id: "5", name: "Jessica L.", handle: "@jess_designs", testimonial: "A complete fashion assistant. I’ve stopped buying clothes that don’t fit, saving both money and time.", imageSrc: "http://img.b2bpic.net/free-photo/attentive-fashionable-woman-with-bun-hairstyle-looks-seriously-camera-dressed-stylish-pink-jacket-poses-against-city-background-has-bright-vivid-makeup-people-style-fashion-concept_273609-57798.jpg"},
|
||
]}
|
||
title="What Our Community Says"
|
||
description="See how StyleGen AI has transformed fashion confidence for thousands of users."
|
||
/>
|
||
</div>
|
||
|
||
<div id="contact" data-section="contact">
|
||
<ContactSplit
|
||
useInvertedBackground={false}
|
||
background={{
|
||
variant: "gradient-bars"}}
|
||
tag="Early Access"
|
||
title="Ready to Redefine Your Style?"
|
||
description="Sign up for early access to the most intelligent fashion platform."
|
||
imageSrc="http://img.b2bpic.net/free-photo/3d-modern-abstract-network-communications-background_1048-16222.jpg"
|
||
mediaAnimation="slide-up"
|
||
/>
|
||
</div>
|
||
|
||
<div id="footer" data-section="footer">
|
||
<FooterCard
|
||
logoText="StyleGen AI"
|
||
copyrightText="© 2025 StyleGen AI. All rights reserved."
|
||
socialLinks={[
|
||
{
|
||
icon: Twitter,
|
||
href: "#", ariaLabel: "Twitter"},
|
||
{
|
||
icon: Instagram,
|
||
href: "#", ariaLabel: "Instagram"},
|
||
{
|
||
icon: Linkedin,
|
||
href: "#", ariaLabel: "LinkedIn"},
|
||
]}
|
||
/>
|
||
</div>
|
||
</ReactLenis>
|
||
</ThemeProvider>
|
||
);
|
||
}
|