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
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
|
import { Header } from "@/components/header";
import { Footer } from "@/components/footer";
import { ProductCard } from "@/components/product-card";
export default function MenPage() {
// Mock men's products data
const menProducts = [
{
id: "1",
name: "Oversized Cotton Hoodie",
price: 89,
originalPrice: 129,
image: "/api/placeholder/400/500",
images: ["/api/placeholder/400/500", "/api/placeholder/400/500"],
rating: 4.5,
reviewCount: 234,
isNew: true,
isSale: true,
category: "Hoodies",
colors: ["#000000", "#FFFFFF", "#6B7280"],
sizes: ["S", "M", "L", "XL"],
},
{
id: "2",
name: "Classic Denim Jacket",
price: 159,
originalPrice: 199,
image: "/api/placeholder/400/500",
rating: 4.7,
reviewCount: 189,
isSale: true,
category: "Jackets",
colors: ["#1E40AF", "#000000"],
sizes: ["M", "L", "XL"],
},
{
id: "3",
name: "Minimal White T-Shirt",
price: 45,
image: "/api/placeholder/400/500",
rating: 4.3,
reviewCount: 456,
isNew: true,
category: "T-Shirts",
colors: ["#FFFFFF", "#000000", "#6B7280"],
sizes: ["XS", "S", "M", "L", "XL"],
},
{
id: "4",
name: "Cargo Pants",
price: 119,
originalPrice: 149,
image: "/api/placeholder/400/500",
rating: 4.2,
reviewCount: 98,
isSale: true,
category: "Pants",
colors: ["#000000", "#4B5563", "#059669"],
sizes: ["28", "30", "32", "34", "36"],
},
{
id: "5",
name: "Oxford Button Shirt",
price: 79,
image: "/api/placeholder/400/500",
rating: 4.6,
reviewCount: 156,
category: "Shirts",
colors: ["#FFFFFF", "#3B82F6", "#6B7280"],
sizes: ["S", "M", "L", "XL"],
},
{
id: "6",
name: "Leather Sneakers",
price: 189,
originalPrice: 229,
image: "/api/placeholder/400/500",
rating: 4.8,
reviewCount: 267,
isSale: true,
category: "Shoes",
colors: ["#FFFFFF", "#000000", "#8B4513"],
sizes: ["8", "9", "10", "11", "12"],
},
{
id: "7",
name: "Wool Blazer",
price: 299,
image: "/api/placeholder/400/500",
rating: 4.9,
reviewCount: 78,
isNew: true,
category: "Blazers",
colors: ["#000000", "#374151", "#1E40AF"],
sizes: ["S", "M", "L", "XL"],
},
{
id: "8",
name: "Casual Chinos",
price: 89,
originalPrice: 109,
image: "/api/placeholder/400/500",
rating: 4.4,
reviewCount: 234,
isSale: true,
category: "Pants",
colors: ["#D2B48C", "#000000", "#1F2937"],
sizes: ["28", "30", "32", "34", "36"],
},
];
return (
<>
<Header />
<main className="min-h-screen bg-background">
{/* Hero Section */}
<section className="relative h-96 bg-gradient-to-r from-neutral-900 to-neutral-700 flex items-center justify-center">
<div className="text-center text-white space-y-4">
<h1 className="text-4xl md:text-6xl font-bold">Men's Collection</h1>
<p className="text-lg md:text-xl max-w-2xl mx-auto px-4">
Discover our latest men's fashion collection featuring premium quality pieces for the modern man
</p>
</div>
</section>
{/* Filter Section */}
<section className="border-b dark:border-neutral-800 py-6">
<div className="container mx-auto px-4">
<div className="flex flex-wrap items-center justify-between gap-4">
<div className="flex items-center space-x-4">
<span className="text-sm text-muted-foreground">
Showing {menProducts.length} products
</span>
</div>
<div className="flex items-center space-x-4">
<select className="px-3 py-2 border rounded-lg text-sm bg-background">
<option>Sort by: Featured</option>
<option>Price: Low to High</option>
<option>Price: High to Low</option>
<option>Newest First</option>
<option>Best Rating</option>
</select>
</div>
</div>
</div>
</section>
{/* Products Grid */}
<section className="py-12">
<div className="container mx-auto px-4">
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
{menProducts.map((product) => (
<ProductCard key={product.id} {...product} />
))}
</div>
</div>
</section>
{/* Load More Section */}
<section className="py-12 border-t dark:border-neutral-800">
<div className="container mx-auto px-4 text-center">
<button className="px-8 py-3 border border-primary text-primary hover:bg-primary hover:text-primary-foreground transition-colors rounded-lg">
Load More Products
</button>
</div>
</section>
</main>
<Footer />
</>
);
}
export async function generateMetadata() {
return {
title: "Men's Fashion Collection | blcklst",
description: "Shop the latest men's fashion at blcklst. Premium quality clothing, shoes, and accessories for the modern man.",
};
}
|
