Merge version_1 into main #3
@@ -2,14 +2,23 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
|
||||
import FooterBase from '@/components/sections/footer/FooterBase';
|
||||
import HeroBillboardDashboard from '@/components/sections/hero/HeroBillboardDashboard';
|
||||
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
|
||||
// Corrected imports based on LOCKED_SELECTION JSON
|
||||
import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
|
||||
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
|
||||
import HeroCentered from '@/components/sections/hero/HeroCentered';
|
||||
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
||||
import { Calendar, Check, Clock, Cloud, Eye, Heart, LayoutDashboard, Palette, PieChart, Plus, Scan, Settings, Sparkles, TrendingUp, Wand2, Shirt, View, Brain } from "lucide-react";
|
||||
// Refined LucideIcon imports
|
||||
import { Plus, Wand2, Shirt, Sparkles, TrendingUp, Settings, Check, Heart, Eye } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
const imageSrcDashboard = "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BTEkLfKMy48GDgE7b9QK7UtsOz/a-sleek-dark-ui-screenshot-of-vestra-s-w-1774504954179-b22b8bb5.png";
|
||||
const imageAltDashboard = "VESTRA Dashboard Interface showing wardrobe stats";
|
||||
|
||||
const featureImage1 = "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BTEkLfKMy48GDgE7b9QK7UtsOz/a-futuristic-3d-rotating-smart-wardrobe--1774504954222-ebcba7c0.png";
|
||||
const featureImageAlt1 = "Interactive 3D wardrobe display";
|
||||
const featureImage2 = "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BTEkLfKMy48GDgE7b9QK7UtsOz/a-dark-modern-ui-screenshot-of-vestra-s--1774504954621-501aab5d.png";
|
||||
const featureImageAlt2 = "AI outfit recommendation interface";
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-stagger"
|
||||
@@ -24,295 +33,84 @@ export default function LandingPage() {
|
||||
headingFontWeight="medium"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "Features",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "Wardrobe",
|
||||
id: "wardrobe",
|
||||
},
|
||||
{
|
||||
name: "Testimonials",
|
||||
id: "testimonials",
|
||||
},
|
||||
{
|
||||
name: "FAQ",
|
||||
id: "faq",
|
||||
},
|
||||
]}
|
||||
brandName="VESTRA"
|
||||
button={{
|
||||
text: "Get Started",
|
||||
href: "/login",
|
||||
}}
|
||||
animateOnLoad={true}
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Features", id: "features" },
|
||||
{ name: "Wardrobe", id: "wardrobe" },
|
||||
{ name: "Testimonials", id: "testimonials" },
|
||||
{ name: "FAQ", id: "faq" }
|
||||
]}
|
||||
brandName="VESTRA"
|
||||
button={{ text: "Get Started", href: "/login" }}
|
||||
animateOnLoad={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardDashboard
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
title="Welcome Back to Your Style Hub, User!"
|
||||
description="Get a quick overview of your wardrobe, recent activity, and personalized recommendations."
|
||||
tag="Dashboard Overview"
|
||||
tagIcon={LayoutDashboard}
|
||||
dashboard={{
|
||||
title: "Your VESTRA Snapshot",
|
||||
logoIcon: Sparkles,
|
||||
stats: [
|
||||
{
|
||||
values: "120+",
|
||||
label: "Items Managed",
|
||||
},
|
||||
{
|
||||
values: "98%",
|
||||
label: "Style Match",
|
||||
},
|
||||
{
|
||||
values: "15",
|
||||
label: "New Outfits",
|
||||
},
|
||||
],
|
||||
sidebarItems: [
|
||||
{
|
||||
icon: Shirt,
|
||||
text: "My Wardrobe",
|
||||
href: "/wardrobe",
|
||||
},
|
||||
{
|
||||
icon: Sparkles,
|
||||
text: "Outfit Ideas",
|
||||
href: "/outfits",
|
||||
},
|
||||
{
|
||||
icon: TrendingUp,
|
||||
text: "Style Trends",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
icon: Settings,
|
||||
text: "Settings",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
buttons: [
|
||||
{
|
||||
text: "Add New Item",
|
||||
leftIcon: Plus,
|
||||
},
|
||||
{
|
||||
text: "Generate Outfit",
|
||||
leftIcon: Wand2,
|
||||
},
|
||||
],
|
||||
listItems: [
|
||||
{
|
||||
title: "Added new blazer",
|
||||
subtitle: "Category: Outerwear",
|
||||
icon: Plus,
|
||||
},
|
||||
{
|
||||
title: "Wore 'Evening Chic'",
|
||||
subtitle: "Last worn: 2 days ago",
|
||||
icon: Check,
|
||||
},
|
||||
{
|
||||
title: "Liked 'Summer Vibes'",
|
||||
subtitle: "New favorite outfit",
|
||||
icon: Heart,
|
||||
},
|
||||
],
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BTEkLfKMy48GDgE7b9QK7UtsOz/a-sleek-dark-ui-screenshot-of-vestra-s-w-1774504954179-b22b8bb5.png",
|
||||
imageAlt: "VESTRA Dashboard Interface showing wardrobe stats",
|
||||
chartTitle: "Wardrobe Composition",
|
||||
chartData: [
|
||||
{
|
||||
label: "Tops",
|
||||
value: 40,
|
||||
},
|
||||
{
|
||||
label: "Bottoms",
|
||||
value: 30,
|
||||
},
|
||||
{
|
||||
label: "Dresses",
|
||||
value: 15,
|
||||
},
|
||||
{
|
||||
label: "Outerwear",
|
||||
value: 10,
|
||||
},
|
||||
{
|
||||
label: "Accessories",
|
||||
value: 5,
|
||||
},
|
||||
],
|
||||
listTitle: "Recent Updates",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroCentered
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Welcome Back to Your Style Hub, User!"
|
||||
description="Get a quick overview of your wardrobe, recent activity, and personalized recommendations."
|
||||
avatars={[{ src: imageSrcDashboard, alt: imageAltDashboard }]}
|
||||
avatarText="Dashboard Overview"
|
||||
buttons={[
|
||||
{ text: "Add New Item", href: "#" },
|
||||
{ text: "Generate Outfit", href: "#" }
|
||||
]}
|
||||
marqueeItems={[
|
||||
// Stats
|
||||
{ type: 'text-icon', text: "120+ Items Managed", icon: Shirt },
|
||||
{ type: 'text-icon', text: "98% Style Match", icon: TrendingUp },
|
||||
{ type: 'text-icon', text: "15 New Outfits", icon: Sparkles },
|
||||
// Sidebar Items
|
||||
{ type: 'text-icon', text: "My Wardrobe", icon: Shirt },
|
||||
{ type: 'text-icon', text: "Outfit Ideas", icon: Wand2 },
|
||||
{ type: 'text-icon', text: "Style Trends", icon: TrendingUp },
|
||||
{ type: 'text-icon', text: "Settings", icon: Settings },
|
||||
// List Items
|
||||
{ type: 'text-icon', text: "Added new blazer", icon: Plus },
|
||||
{ type: 'text-icon', text: "Wore 'Evening Chic'", icon: Check },
|
||||
{ type: 'text-icon', text: "Liked 'Summer Vibes'", icon: Heart },
|
||||
// Chart Data (aggregated)
|
||||
{ type: 'text', text: "Wardrobe Composition: Tops (40%), Bottoms (30%), Dresses (15%), Outerwear (10%), Accessories (5%)" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="feature" data-section="feature">
|
||||
<FeatureCardTen
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: "1",
|
||||
title: "3D Wardrobe Visualization",
|
||||
description: "Interact with your clothes in a stunning 3D environment, seeing how each piece looks and fits.",
|
||||
media: {
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BTEkLfKMy48GDgE7b9QK7UtsOz/a-futuristic-3d-rotating-smart-wardrobe--1774504954222-ebcba7c0.png",
|
||||
imageAlt: "Interactive 3D wardrobe display",
|
||||
},
|
||||
items: [
|
||||
{
|
||||
icon: View,
|
||||
text: "Rotate & Zoom",
|
||||
},
|
||||
{
|
||||
icon: Palette,
|
||||
text: "Color Filters",
|
||||
},
|
||||
{
|
||||
icon: Scan,
|
||||
text: "Detailed Views",
|
||||
},
|
||||
],
|
||||
reverse: false,
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "AI-Powered Style Assistant",
|
||||
description: "Get instant outfit suggestions based on weather, occasion, and your personal style preferences.",
|
||||
media: {
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BTEkLfKMy48GDgE7b9QK7UtsOz/a-dark-modern-ui-screenshot-of-vestra-s--1774504954621-501aab5d.png",
|
||||
imageAlt: "AI outfit recommendation interface",
|
||||
},
|
||||
items: [
|
||||
{
|
||||
icon: Cloud,
|
||||
text: "Weather-aware",
|
||||
},
|
||||
{
|
||||
icon: Calendar,
|
||||
text: "Event Matching",
|
||||
},
|
||||
{
|
||||
icon: Brain,
|
||||
text: "Learning Preferences",
|
||||
},
|
||||
],
|
||||
reverse: true,
|
||||
},
|
||||
]}
|
||||
title="Enhanced Dashboard Features"
|
||||
description="Explore powerful tools to make the most of your digital wardrobe experience."
|
||||
tag="Deeper Dive"
|
||||
tagIcon={Eye}
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentyFour
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: "1", title: "3D Wardrobe Visualization", author: "VESTRA Team", description: "Interact with your clothes in a stunning 3D environment, seeing how each piece looks and fits.", tags: ["Visualization", "3D", "Innovation"],
|
||||
imageSrc: featureImage1,
|
||||
imageAlt: featureImageAlt1
|
||||
},
|
||||
{
|
||||
id: "2", title: "AI-Powered Style Assistant", author: "VESTRA Team", description: "Get instant outfit suggestions based on weather, occasion, and your personal style preferences.", tags: ["AI", "Recommendations", "Personalization"],
|
||||
imageSrc: featureImage2,
|
||||
imageAlt: featureImageAlt2
|
||||
}
|
||||
]}
|
||||
title="Enhanced Dashboard Features"
|
||||
description="Explore powerful tools to make the most of your digital wardrobe experience."
|
||||
tag="Deeper Dive"
|
||||
tagIcon={Eye}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metric" data-section="metric">
|
||||
<MetricCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "1",
|
||||
value: "85%",
|
||||
title: "Wardrobe Utilization",
|
||||
description: "Maximize the use of your existing clothes.",
|
||||
icon: PieChart,
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
value: "30+",
|
||||
title: "New Outfits Created",
|
||||
description: "Effortlessly generate fresh looks.",
|
||||
icon: Sparkles,
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
value: "50Hrs",
|
||||
title: "Time Saved Styling",
|
||||
description: "Streamline your daily routine.",
|
||||
icon: Clock,
|
||||
},
|
||||
]}
|
||||
title="Your Style, Quantified."
|
||||
description="Track your fashion impact and discover new insights about your wearing habits."
|
||||
/>
|
||||
</div>
|
||||
{/* MetricCardOne section removed as it's not in LOCKED_SELECTION */}
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{
|
||||
title: "Features",
|
||||
items: [
|
||||
{
|
||||
label: "Wardrobe Management",
|
||||
href: "/wardrobe",
|
||||
},
|
||||
{
|
||||
label: "Outfit Recommendations",
|
||||
href: "/outfits",
|
||||
},
|
||||
{
|
||||
label: "Style Discovery",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{
|
||||
label: "About Us",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Careers",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Press",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support",
|
||||
items: [
|
||||
{
|
||||
label: "FAQ",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Contact Us",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Privacy Policy",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
logoText="VESTRA"
|
||||
copyrightText="© 2024 VESTRA. All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="VESTRA"
|
||||
leftLink={{ text: "Wardrobe Management", href: "/wardrobe" }}
|
||||
rightLink={{ text: "About Us", href: "#" }}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user