diff --git a/src/app/wardrobe-ai/page.tsx b/src/app/wardrobe-ai/page.tsx
new file mode 100644
index 0000000..e950893
--- /dev/null
+++ b/src/app/wardrobe-ai/page.tsx
@@ -0,0 +1,106 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import HeroBillboardDashboard from '@/components/sections/hero/HeroBillboardDashboard';
+import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
+import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import FooterCard from '@/components/sections/footer/FooterCard';
+import { Sparkles, BarChart3, Shirt, Zap, Instagram, Linkedin, Twitter } 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" },
+              { name: "Features", id: "#features" },
+              { name: "Pricing", id: "#pricing" }
+            ]}
+            brandName="StyleGen AI"
+          />
+        </div>
+
+        <div id="hero" data-section="hero">
+          <HeroBillboardDashboard
+            title="Your Digital Wardrobe, Powered by AI"
+            description="Manage your clothing collection, get intelligent outfit suggestions, and optimize your style effortlessly."
+            background={{ variant: "sparkles-gradient" }}
+            dashboard={{
+              title: "Wardrobe Analytics",              stats: [
+                { title: "Outfits", values: [150, 200, 250], description: "Unique outfits curated" },
+                { title: "Inventory", values: [45, 60, 80], description: "Items in collection" }
+              ],
+              logoIcon: Sparkles,
+              sidebarItems: [{ icon: Shirt, active: true }, { icon: BarChart3 }, { icon: Zap }],
+              listTitle: "Recent Additions",              listItems: [
+                { icon: Shirt, title: "Navy Blue Blazer", status: "Active" },
+                { icon: Shirt, title: "Silk Evening Gown", status: "Archived" }
+              ],
+              imageSrc: "http://img.b2bpic.net/free-photo/wardrobe-with-clothes_23-2148762744.jpg"
+            }}
+          />
+        </div>
+
+        <div id="features" data-section="features">
+          <FeatureCardNine
+            showStepNumbers={true}
+            animationType="slide-up"
+            textboxLayout="inline-image"
+            title="Intelligent Wardrobe Management"
+            features={[
+              {
+                title: "Smart Categorization",                description: "Automatically tag and organize your clothing using advanced computer vision.",                phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/smart-closet-app_23-2151952989.jpg" },
+                phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/virtual-closet-layout_23-2150543691.jpg" }
+              },
+              {
+                title: "Style Recommendations",                description: "AI-driven suggestions for daily outfits based on local weather and event calendars.",                phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/outfit-planning_23-2148503623.jpg" },
+                phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/personal-stylist_23-2149731132.jpg" }
+              }
+            ]}
+          />
+        </div>
+
+        <div id="metrics" data-section="metrics">
+            <MetricCardThree
+                title="Your Wardrobe Insights"
+                description="Data-driven metrics to optimize your fashion journey."
+                animationType="scale-rotate"
+                metrics={[
+                    { id: "1", icon: Zap, title: "Efficiency Score", value: "94%" },
+                    { id: "2", icon: BarChart3, title: "Cost Per Wear", value: "$2.40" },
+                    { id: "3", icon: Sparkles, title: "Style Versatility", value: "8.5/10" }
+                ]}
+            />
+        </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>
+  );
+}