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 UnisexPage() {
// Mock unisex products data
const unisexProducts = [
{
id: "17",
name: "Organic Cotton Hoodie",
price: 89,
originalPrice: 119,
image: "/api/placeholder/400/500",
images: ["/api/placeholder/400/500", "/api/placeholder/400/500"],
rating: 4.7,
reviewCount: 342,
isNew: true,
isSale: true,
category: "Hoodies",
colors: ["#000000", "#FFFFFF", "#6B7280", "#059669"],
sizes: ["XS", "S", "M", "L", "XL", "XXL"],
},
{
id: "18",
name: "Minimalist T-Shirt",
price: 39,
originalPrice: 49,
image: "/api/placeholder/400/500",
rating: 4.5,
reviewCount: 567,
isSale: true,
category: "T-Shirts",
colors: ["#FFFFFF", "#000000", "#6B7280", "#1E40AF"],
sizes: ["XS", "S", "M", "L", "XL", "XXL"],
},
{
id: "19",
name: "Relaxed Fit Jeans",
price: 119,
image: "/api/placeholder/400/500",
rating: 4.6,
reviewCount: 234,
isNew: true,
category: "Jeans",
colors: ["#4169E1", "#000000", "#6B7280"],
sizes: ["26", "28", "30", "32", "34", "36"],
},
{
id: "20",
name: "Oversized Sweatshirt",
price: 79,
originalPrice: 99,
image: "/api/placeholder/400/500",
rating: 4.8,
reviewCount: 189,
isSale: true,
category: "Sweatshirts",
colors: ["#F5F5DC", "#000000", "#6B7280", "#059669"],
sizes: ["XS", "S", "M", "L", "XL", "XXL"],
},
{
id: "21",
name: "Canvas Backpack",
price: 89,
image: "/api/placeholder/400/500",
rating: 4.4,
reviewCount: 156,
category: "Accessories",
colors: ["#000000", "#8B4513", "#6B7280", "#FFFFFF"],
sizes: ["One Size"],
},
{
id: "22",
name: "Cargo Joggers",
price: 99,
originalPrice: 129,
image: "/api/placeholder/400/500",
rating: 4.3,
reviewCount: 278,
isSale: true,
category: "Pants",
colors: ["#000000", "#6B7280", "#059669", "#8B4513"],
sizes: ["XS", "S", "M", "L", "XL", "XXL"],
},
{
id: "23",
name: "Bomber Jacket",
price: 159,
image: "/api/placeholder/400/500",
rating: 4.9,
reviewCount: 123,
isNew: true,
category: "Outerwear",
colors: ["#000000", "#1E40AF", "#6B7280", "#8B4513"],
sizes: ["XS", "S", "M", "L", "XL", "XXL"],
},
{
id: "24",
name: "Classic Sneakers",
price: 129,
originalPrice: 159,
image: "/api/placeholder/400/500",
rating: 4.6,
reviewCount: 445,
isSale: true,
category: "Shoes",
colors: ["#FFFFFF", "#000000", "#6B7280"],
sizes: ["36", "37", "38", "39", "40", "41", "42", "43", "44"],
},
];
return (
<>
<Header />
<main className="min-h-screen bg-background">
{/* Hero Section */}
<section className="relative h-96 bg-gradient-to-r from-neutral-100 to-neutral-200 dark:from-neutral-800 dark:to-neutral-900 flex items-center justify-center">
<div className="text-center space-y-4">
<h1 className="text-4xl md:text-6xl font-bold text-foreground">Unisex Collection</h1>
<p className="text-lg md:text-xl max-w-2xl mx-auto px-4 text-muted-foreground">
Gender-neutral fashion for everyone. Discover versatile pieces designed for all body types and styles
</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 {unisexProducts.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">
{unisexProducts.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: "Unisex Fashion Collection | blcklst",
description: "Shop gender-neutral fashion at blcklst. Versatile, inclusive clothing designed for all body types and personal styles.",
};
}
|
