From 018de0ce36e051c7f85d09fedd398d0fb8819e73 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Thu, 26 Mar 2026 06:08:02 +0000
Subject: [PATCH] Update src/app/dashboard/page.tsx

---
 src/app/dashboard/page.tsx | 378 +++++++++----------------------------
 1 file changed, 88 insertions(+), 290 deletions(-)

diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx
index cc0ef71..764245f 100644
--- a/src/app/dashboard/page.tsx
+++ b/src/app/dashboard/page.tsx
@@ -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>
   );