1 files changed, 154 insertions, 0 deletions
diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
new file mode 100644
index 0000000..7a9bea6
--- /dev/null
+++ b/frontend/src/app/page.tsx
@@ -0,0 +1,154 @@
+import { Header } from "@/components/header";
+import { HeroSection } from "@/components/hero-section";
+import { ProductCard } from "@/components/product-card";
+import { Footer } from "@/components/footer";
+
+export default function Home() {
+  // Sample product data for demonstration
+  const featuredProducts = [
+    {
+      id: "1",
+      name: "Premium Cotton T-Shirt",
+      price: 29.99,
+      originalPrice: 39.99,
+      image: "/api/placeholder/400/500",
+      rating: 4.8,
+      reviewCount: 124,
+      isNew: true,
+      isSale: true,
+      category: "Men's Clothing",
+      colors: ["#000000", "#FFFFFF", "#808080", "#000080"],
+      sizes: ["S", "M", "L", "XL"],
+    },
+    {
+      id: "2",
+      name: "Elegant Summer Dress",
+      price: 89.99,
+      originalPrice: 119.99,
+      image: "/api/placeholder/400/500",
+      rating: 4.9,
+      reviewCount: 89,
+      isSale: true,
+      category: "Women's Clothing",
+      colors: ["#FF69B4", "#000000", "#800080"],
+      sizes: ["XS", "S", "M", "L"],
+    },
+    {
+      id: "3",
+      name: "Classic Denim Jacket",
+      price: 79.99,
+      image: "/api/placeholder/400/500",
+      rating: 4.7,
+      reviewCount: 156,
+      isNew: true,
+      category: "Outerwear",
+      colors: ["#4169E1", "#000000", "#708090"],
+      sizes: ["S", "M", "L", "XL", "XXL"],
+    },
+    {
+      id: "4",
+      name: "Comfortable Sneakers",
+      price: 99.99,
+      originalPrice: 129.99,
+      image: "/api/placeholder/400/500",
+      rating: 4.6,
+      reviewCount: 203,
+      isSale: true,
+      category: "Footwear",
+      colors: ["#FFFFFF", "#000000", "#FF0000"],
+      sizes: ["7", "8", "9", "10", "11", "12"],
+    },
+    {
+      id: "5",
+      name: "Cozy Winter Sweater",
+      price: 69.99,
+      image: "/api/placeholder/400/500",
+      rating: 4.8,
+      reviewCount: 78,
+      isNew: true,
+      category: "Knitwear",
+      colors: ["#8B4513", "#000000", "#008000", "#800080"],
+      sizes: ["S", "M", "L", "XL"],
+    },
+    {
+      id: "6",
+      name: "Stylish Crossbody Bag",
+      price: 45.99,
+      originalPrice: 59.99,
+      image: "/api/placeholder/400/500",
+      rating: 4.5,
+      reviewCount: 92,
+      isSale: true,
+      category: "Accessories",
+      colors: ["#000000", "#8B4513", "#800080"],
+      sizes: ["One Size"],
+    },
+  ];
+
+  return (
+    <div className="min-h-screen bg-background">
+      <Header />
+      
+      <main>
+        <HeroSection />
+        
+        {/* Featured Products Section */}
+        <section className="py-16 bg-white">
+          <div className="container mx-auto px-4">
+            <div className="text-center mb-12">
+              <h2 className="text-3xl font-bold mb-4">Featured Products</h2>
+              <p className="text-muted-foreground max-w-2xl mx-auto">
+                Discover our handpicked selection of trending items that our customers love most.
+              </p>
+            </div>
+            
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+              {featuredProducts.map((product) => (
+                <ProductCard key={product.id} {...product} />
+              ))}
+            </div>
+            
+            <div className="text-center mt-12">
+              <button className="bg-primary text-primary-foreground px-8 py-3 rounded-lg font-medium hover:bg-primary/90 transition-colors">
+                View All Products
+              </button>
+            </div>
+          </div>
+        </section>
+
+        {/* Categories Section */}
+        <section className="py-16 bg-neutral-50">
+          <div className="container mx-auto px-4">
+            <div className="text-center mb-12">
+              <h2 className="text-3xl font-bold mb-4">Shop by Category</h2>
+              <p className="text-muted-foreground">
+                Explore our diverse range of fashion categories
+              </p>
+            </div>
+            
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+              {[
+                { name: "Women", image: "/api/placeholder/600/400", count: "2,345+ items" },
+                { name: "Men", image: "/api/placeholder/600/400", count: "1,892+ items" },
+                { name: "Kids", image: "/api/placeholder/600/400", count: "756+ items" },
+              ].map((category) => (
+                <div
+                  key={category.name}
+                  className="relative group cursor-pointer overflow-hidden rounded-lg bg-gradient-to-br from-neutral-200 to-neutral-300 aspect-[4/3]"
+                >
+                  <div className="absolute inset-0 bg-black/20 group-hover:bg-black/30 transition-colors" />
+                  <div className="absolute inset-0 flex flex-col justify-end p-6 text-white">
+                    <h3 className="text-2xl font-bold mb-1">{category.name}</h3>
+                    <p className="text-sm opacity-90">{category.count}</p>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </section>
+      </main>
+      
+      <Footer />
+    </div>
+  );
+}