1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
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>
);
}
|
