Update src/app/wardrobe-ai/page.tsx

src/app/ai-stylist/page.tsx

@@ -0,0 +1,89 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import HeroLogo from '@/components/sections/hero/HeroLogo';
+import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
+import FooterCard from '@/components/sections/footer/FooterCard';
+import { Instagram, Linkedin, Twitter } from "lucide-react";
+
+export default function AIStylistPage() {
+  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: "Home", id: "/" },
+              { name: "AI Stylist", id: "/ai-stylist" },
+            ]}
+            brandName="StyleGen AI"
+          />
+        </div>
+
+        <div id="hero" data-section="hero">
+          <HeroLogo
+            logoText="Your Virtual AI Stylist"
+            description="Experience hyper-personalized fashion advice driven by advanced agentic AI models."
+            buttons={[{ text: "Get Started", href: "#features" }]}
+            imageSrc="http://img.b2bpic.net/free-photo/high-angle-hands-taking-photos_23-2149731132.jpg"
+          />
+        </div>
+
+        <div id="features" data-section="features">
+          <FeatureCardSeven
+            title="Styling Features"
+            description="Unlock powerful styling capabilities curated for your lifestyle."
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+            features={[
+              { title: "Trend Forecasting", description: "Stay ahead with real-time trend analysis tailored to your taste." },
+              { title: "Virtual Closet", description: "Manage and visualize your wardrobe with seamless digital integration." },
+              { title: "Personalized Lookbooks", description: "Get curated outfit suggestions for every occasion automatically." },
+            ]}
+          />
+        </div>
+
+        <div id="personalization" data-section="personalization">
+          <FeatureCardSeven
+            title="Hyper-Personalization"
+            description="Our AI learns your preferences, sizing, and style evolution over time."
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+            features={[
+              { title: "Adaptive Sizing", description: "Advanced neural networks predict your best fit across thousands of brands." },
+              { title: "Style DNA", description: "Deep-dive analysis into your fashion preferences, skin tone, and body metrics." },
+              { title: "Contextual Suggestions", description: "Styling recommendations that consider the weather, your calendar, and current trends." },
+            ]}
+          />
+        </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>
+  );
+}

src/app/customization-studio/page.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import HeroLogo from '@/components/sections/hero/HeroLogo';
+import FooterCard from '@/components/sections/footer/FooterCard';
+import { Instagram, Linkedin, Twitter } from "lucide-react";
+
+export default function CustomizationStudioPage() {
+  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: "Home", id: "/" },
+              { name: "Studio", id: "/customization-studio" },
+            ]}
+            brandName="StyleGen AI"
+          />
+        </div>
+
+        <div id="hero" data-section="hero">
+            <HeroLogo
+            logoText="Customization Studio"
+            description="Bring your designs to life with our real-time AI fabric simulation and advanced pattern adjustment tools."
+            buttons={[{ text: "Start Designing", href: "#preview" }]}
+            imageSrc="http://img.b2bpic.net/free-photo/still-life-fashion-designer-s-office_23-2150543691.jpg"
+          />
+        </div>
+
+        <div id="customization-tools" data-section="customization-tools">
+            <div className="py-20 px-6 max-w-5xl mx-auto text-center">
+              <h2 className="text-4xl font-bold mb-6">Creative Controls</h2>
+              <p className="text-lg opacity-80">Use our real-time adjustment panel to modify fabrics, textures, and silhouettes.</p>
+            </div>
+        </div>
+
+        <div id="preview" data-section="preview">
+            <div className="py-20 px-6 max-w-5xl mx-auto">
+              <div className="aspect-video bg-gradient-to-br from-purple-500/20 to-blue-500/20 rounded-2xl flex items-center justify-center border-2 border-dashed border-white/20">
+                <p className="text-2xl font-medium">Live Preview Canvas</p>
+              </div>
+            </div>
+        </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>
+  );
+}

src/app/page.tsx

@@ -30,22 +30,11 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarStyleCentered
       navItems={[
-        {
+        { name: "Features", id: "#features" },
-          name: "Features",
+        { name: "Studio", id: "#studio" },
-          id: "#features",
+        { name: "Pricing", id: "#pricing" },
-        },
+        { name: "Wardrobe AI", id: "/wardrobe-ai" },
-        {
+        { name: "Contact", id: "#contact" },
-          name: "Studio",
-          id: "#studio",
-        },
-        {
-          name: "Pricing",
-          id: "#pricing",
-        },
-        {
-          name: "Contact",
-          id: "#contact",
-        },
       ]}
       brandName="StyleGen AI"
     />
@@ -56,14 +45,8 @@ export default function LandingPage() {
       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: "Get Started",
+        { text: "Explore Studio", href: "#studio" },
-          href: "#contact",
-        },
-        {
-          text: "Explore Studio",
-          href: "#studio",
-        },
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/painted-eyeglasses-aeroplane-camera-against-pink-background_23-2148084278.jpg"
     />
@@ -76,20 +59,11 @@ export default function LandingPage() {
       useInvertedBackground={false}
       features={[
         {
-          title: "Smart Fit Intelligence",
+          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"},
-          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",
+          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"},
-          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",
+          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"},
-          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."
@@ -101,14 +75,7 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={false}
       names={[
-        "FashionAI",
+        "FashionAI",        "RetailPulse",        "StyleMetric",        "TrendSet",        "FitLogic",        "ApparelLab",        "ClothVision"]}
-        "RetailPulse",
-        "StyleMetric",
-        "TrendSet",
-        "FitLogic",
-        "ApparelLab",
-        "ClothVision",
-      ]}
       title="Trusted by Fashion Forward Brands"
       description="Join leading innovators revolutionizing the future of retail."
     />
@@ -121,37 +88,16 @@ export default function LandingPage() {
       useInvertedBackground={false}
       plans={[
         {
-          id: "basic",
+          id: "basic",          badge: "Entry",          price: "$19/mo",          subtitle: "For personal styling",          features: [
-          badge: "Entry",
+            "Virtual Try-On",            "Fit Suggestions",            "Outfit Memory"],
-          price: "$19/mo",
-          subtitle: "For personal styling",
-          features: [
-            "Virtual Try-On",
-            "Fit Suggestions",
-            "Outfit Memory",
-          ],
         },
         {
-          id: "pro",
+          id: "pro",          badge: "Pro",          price: "$49/mo",          subtitle: "For fashion enthusiasts",          features: [
-          badge: "Pro",
+            "Advanced Customization",            "Personal Stylist Agent",            "Trend Insights"],
-          price: "$49/mo",
-          subtitle: "For fashion enthusiasts",
-          features: [
-            "Advanced Customization",
-            "Personal Stylist Agent",
-            "Trend Insights",
-          ],
         },
         {
-          id: "business",
+          id: "business",          badge: "Expert",          price: "$99/mo",          subtitle: "For power creators",          features: [
-          badge: "Expert",
+            "Advanced Studio Access",            "API Access",            "Prioritized Support"],
-          price: "$99/mo",
-          subtitle: "For power creators",
-          features: [
-            "Advanced Studio Access",
-            "API Access",
-            "Prioritized Support",
-          ],
         },
       ]}
       title="Simple, Transparent Pricing"
@@ -166,40 +112,15 @@ export default function LandingPage() {
       useInvertedBackground={false}
       testimonials={[
         {
-          id: "1",
+          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"},
-          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",
+          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"},
-          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",
+          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"},
-          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",
+          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"},
-          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",
+          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"},
-          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."
@@ -210,8 +131,7 @@ export default function LandingPage() {
       <ContactSplit
       useInvertedBackground={false}
       background={{
-        variant: "gradient-bars",
+        variant: "gradient-bars"}}
-      }}
       tag="Early Access"
       title="Ready to Redefine Your Style?"
       description="Sign up for early access to the most intelligent fashion platform."
@@ -227,19 +147,13 @@ export default function LandingPage() {
       socialLinks={[
         {
           icon: Twitter,
-          href: "#",
+          href: "#",          ariaLabel: "Twitter"},
-          ariaLabel: "Twitter",
-        },
         {
           icon: Instagram,
-          href: "#",
+          href: "#",          ariaLabel: "Instagram"},
-          ariaLabel: "Instagram",
-        },
         {
           icon: Linkedin,
-          href: "#",
+          href: "#",          ariaLabel: "LinkedIn"},
-          ariaLabel: "LinkedIn",
-        },
       ]}
     />
   </div>

src/app/smart-fit-intelligence/page.tsx

@@ -0,0 +1,101 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import HeroLogo from '@/components/sections/hero/HeroLogo';
+import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
+import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
+import FooterCard from '@/components/sections/footer/FooterCard';
+import { Instagram, Linkedin, Twitter, Zap, Target, Cpu } from "lucide-react";
+
+export default function SmartFitIntelligencePage() {
+  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: "Smart Fit", id: "/smart-fit-intelligence" },
+              { name: "Contact", id: "/#contact" },
+            ]}
+            brandName="StyleGen AI"
+          />
+        </div>
+
+        <div id="hero" data-section="hero">
+            <HeroLogo
+            logoText="Smart Fit Intelligence"
+            description="Next-generation body measurement and predictive fit technology designed to eliminate returns and guarantee perfection."
+            buttons={[
+              { text: "Learn More", href: "#tech" },
+            ]}
+            imageSrc="http://img.b2bpic.net/free-photo/virtual-reality-shopping-experience_23-2151952989.jpg"
+          />
+        </div>
+
+        <div id="features" data-section="features">
+            <FeatureCardSeven
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+            title="Advanced Fit Features"
+            description="Precision measurement algorithms that bring retail confidence to your digital shopping experience."
+            features={[
+              {
+                title: "3D Body Mapping",                description: "Instant virtual scans that capture thousands of data points for unparalleled accuracy.",                imageSrc: "http://img.b2bpic.net/free-photo/high-angle-hands-taking-photos_23-2149731132.jpg"},
+              {
+                title: "Predictive Fit Scoring",                description: "AI-driven analysis that compares your measurements against garment specs to predict sizing accuracy.",                imageSrc: "http://img.b2bpic.net/free-photo/still-life-fashion-designer-s-office_23-2150543691.jpg"},
+              {
+                title: "Virtual Fabric Physics",                description: "Simulated movement and drape testing so you can see how fabric interacts with your body shape.",                imageSrc: "http://img.b2bpic.net/free-photo/painted-eyeglasses-aeroplane-camera-against-pink-background_23-2148084278.jpg"}
+            ]}
+          />
+        </div>
+
+        <div id="tech" data-section="tech">
+            <MetricCardEleven
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+            title="Technology Overview"
+            description="Built on a robust foundation of agentic intelligence and computer vision."
+            metrics={[
+              {
+                id: "vision",                value: "99.9%",                title: "Accuracy",                description: "Computer vision precision for accurate measurements.",                imageSrc: "http://img.b2bpic.net/free-photo/high-angle-hands-taking-photos_23-2149731132.jpg"
+              },
+              {
+                id: "speed",                value: "< 2s",                title: "Processing",                description: "Real-time fit analytics processing speed.",                imageSrc: "http://img.b2bpic.net/free-photo/still-life-fashion-designer-s-office_23-2150543691.jpg"
+              }
+            ]}
+          />
+        </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>
+  );
+}

src/app/wardrobe-ai/page.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import HeroLogo from '@/components/sections/hero/HeroLogo';
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import FooterCard from '@/components/sections/footer/FooterCard';
+import { Sparkles, Twitter, Instagram, Linkedin } from "lucide-react";
+
+export default function WardrobeAIPage() {
+  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: "Home", id: "/" },
+              { name: "Wardrobe AI", id: "/wardrobe-ai" }
+            ]}
+            brandName="StyleGen AI"
+          />
+        </div>
+
+        <div id="hero" data-section="hero">
+          <HeroLogo
+            logoText="Your Digital Wardrobe, Powered by AI"
+            description="Manage your clothing collection, get intelligent outfit suggestions, and optimize your style effortlessly."
+            buttons={[{ text: "Get Started", href: "#" }]}
+            imageSrc="http://img.b2bpic.net/free-photo/wardrobe-with-clothes_23-2148762744.jpg"
+          />
+        </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>
+  );
+}