Hugging Face's logo

Spaces:
Okwutecloud
/
undefined
Running

App Files Community
Okwutecloud commited on
Commit
23a5515
·
verified ·
1 Parent(s): c6b5fb6

Can you add items to the shop by category

Browse files
Files changed (2) hide show
  1. README.md +9 -5
  2. index.html +441 -18
README.md CHANGED
@@ -1,10 +1,14 @@
1
  ---
2
- title: Undefined
3
- emoji: 🏃
4
- colorFrom: purple
5
- colorTo: purple
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
 
1
  ---
2
+ title: undefined
3
+ colorFrom: blue
4
+ colorTo: pink
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
14
+
index.html CHANGED
@@ -1,19 +1,442 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>NaijaDeals - Online Shopping in Nigeria</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script>
12
+ tailwind.config = {
13
+ theme: {
14
+ extend: {
15
+ colors: {
16
+ primary: '#FF6B00',
17
+ secondary: '#0047AB',
18
+ }
19
+ }
20
+ }
21
+ }
22
+ </script>
23
+ <style>
24
+ .product-card:hover {
25
+ transform: translateY(-5px);
26
+ box-shadow: 0 10px 20px rgba(0,0,0,0.1);
27
+ }
28
+ .hero-section {
29
+ background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('http://static.photos/retail/1200x630/42');
30
+ background-size: cover;
31
+ background-position: center;
32
+ }
33
+ </style>
34
+ </head>
35
+ <body class="bg-gray-100">
36
+ <!-- Top Bar -->
37
+ <div class="bg-gray-800 text-white py-2 px-4 hidden md:block">
38
+ <div class="container mx-auto flex justify-between items-center">
39
+ <div class="flex space-x-4 text-sm">
40
+ <a href="#" class="hover:text-primary">Sell on NaijaDeals</a>
41
+ <a href="#" class="hover:text-primary">Track Order</a>
42
+ <a href="#" class="hover:text-primary">Customer Care</a>
43
+ </div>
44
+ <div class="flex space-x-4 text-sm">
45
+ <a href="#" class="hover:text-primary"><i data-feather="user" class="w-4 h-4 mr-1"></i> Account</a>
46
+ <a href="#" class="hover:text-primary"><i data-feather="help-circle" class="w-4 h-4 mr-1"></i> Help</a>
47
+ <a href="#" class="hover:text-primary"><i data-feather="shopping-cart" class="w-4 h-4 mr-1"></i> Cart</a>
48
+ </div>
49
+ </div>
50
+ </div>
51
+
52
+ <!-- Main Header -->
53
+ <header class="bg-white shadow-md">
54
+ <div class="container mx-auto px-4 py-4">
55
+ <div class="flex flex-col md:flex-row md:items-center justify-between space-y-4 md:space-y-0">
56
+ <!-- Logo -->
57
+ <div class="flex items-center">
58
+ <a href="#" class="text-2xl font-bold text-primary">Naija<span class="text-secondary">Deals</span></a>
59
+ </div>
60
+
61
+ <!-- Search Bar -->
62
+ <div class="w-full md:w-1/2">
63
+ <div class="relative">
64
+ <input type="text" placeholder="Search for products, brands and categories"
65
+ class="w-full py-2 px-4 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary">
66
+ <button class="absolute right-0 top-0 h-full px-4 bg-primary text-white rounded-r-md hover:bg-opacity-90">
67
+ <i data-feather="search" class="w-4 h-4"></i>
68
+ </button>
69
+ </div>
70
+ </div>
71
+
72
+ <!-- Cart & Account -->
73
+ <div class="flex items-center space-x-4">
74
+ <a href="#" class="flex items-center hover:text-primary">
75
+ <i data-feather="user" class="w-5 h-5 mr-1"></i>
76
+ <span class="hidden md:inline">Account</span>
77
+ </a>
78
+ <a href="#" class="flex items-center hover:text-primary">
79
+ <i data-feather="shopping-cart" class="w-5 h-5 mr-1"></i>
80
+ <span class="hidden md:inline">Cart</span>
81
+ <span class="ml-1 bg-primary text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">0</span>
82
+ </a>
83
+ </div>
84
+ </div>
85
+ </div>
86
+ </header>
87
+
88
+ <!-- Categories -->
89
+ <nav class="bg-white shadow-sm">
90
+ <div class="container mx-auto px-4 py-3 overflow-x-auto">
91
+ <div class="flex space-x-6 whitespace-nowrap">
92
+ <a href="#" class="text-sm font-medium hover:text-primary">Phones & Tablets</a>
93
+ <a href="#" class="text-sm font-medium hover:text-primary">Electronics</a>
94
+ <a href="#" class="text-sm font-medium hover:text-primary">Fashion</a>
95
+ <a href="#" class="text-sm font-medium hover:text-primary">Home & Office</a>
96
+ <a href="#" class="text-sm font-medium hover:text-primary">Health & Beauty</a>
97
+ <a href="#" class="text-sm font-medium hover:text-primary">Supermarket</a>
98
+ <a href="#" class="text-sm font-medium hover:text-primary">Computing</a>
99
+ <a href="#" class="text-sm font-medium hover:text-primary">Sporting Goods</a>
100
+ <a href="#" class="text-sm font-medium hover:text-primary">Baby Products</a>
101
+ <a href="#" class="text-sm font-medium hover:text-primary">Automobile</a>
102
+ <a href="#" class="text-sm font-medium hover:text-primary">Books & Media</a>
103
+ <a href="#" class="text-sm font-medium hover:text-primary">Jewelry</a>
104
+ <a href="#" class="text-sm font-medium hover:text-primary">Toys & Games</a>
105
+ <a href="#" class="text-sm font-medium hover:text-primary">Pet Supplies</a>
106
+ </div>
107
+ </div>
108
+ </nav>
109
+
110
+ <!-- Hero Section -->
111
+ <section class="hero-section text-white py-16 md:py-24">
112
+ <div class="container mx-auto px-4 text-center">
113
+ <h1 class="text-3xl md:text-5xl font-bold mb-4">Shop Anything Online in Nigeria</h1>
114
+ <p class="text-xl mb-8">Millions of products at the best prices</p>
115
+ <a href="#" class="bg-primary hover:bg-opacity-90 text-white font-bold py-3 px-8 rounded-md inline-block">Start Shopping</a>
116
+ </div>
117
+ </section>
118
+
119
+ <!-- Flash Sales -->
120
+ <section class="py-8 bg-white">
121
+ <div class="container mx-auto px-4">
122
+ <div class="flex justify-between items-center mb-6">
123
+ <h2 class="text-xl font-bold">Flash Sales</h2>
124
+ <a href="#" class="text-primary hover:underline">View All</a>
125
+ </div>
126
+ <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
127
+ <!-- Product Cards -->
128
+ <div class="product-card bg-white rounded-lg shadow-md overflow-hidden transition-transform duration-300">
129
+ <div class="relative">
130
+ <img src="http://static.photos/technology/320x240/1" alt="Product" class="w-full h-40 object-cover">
131
+ <span class="absolute top-2 right-2 bg-red-500 text-white text-xs px-2 py-1 rounded">-20%</span>
132
+ </div>
133
+ <div class="p-3">
134
+ <h3 class="font-medium text-sm mb-1 line-clamp-2">Samsung Galaxy S21 Ultra 5G 256GB</h3>
135
+ <div class="flex items-center mb-1">
136
+ <div class="flex text-yellow-400">
137
+ <i data-feather="star" class="w-3 h-3 fill-current"></i>
138
+ <i data-feather="star" class="w-3 h-3 fill-current"></i>
139
+ <i data-feather="star" class="w-3 h-3 fill-current"></i>
140
+ <i data-feather="star" class="w-3 h-3 fill-current"></i>
141
+ <i data-feather="star" class="w-3 h-3 fill-current"></i>
142
+ </div>
143
+ <span class="text-gray-500 text-xs ml-1">(24)</span>
144
+ </div>
145
+ <div class="flex items-baseline">
146
+ <span class="text-primary font-bold">₦420,000</span>
147
+ <span class="text-gray-500 text-xs line-through ml-2">₦525,000</span>
148
+ </div>
149
+ </div>
150
+ </div>
151
+
152
+ <div class="product-card bg-white rounded-lg shadow-md overflow-hidden transition-transform duration-300">
153
+ <div class="relative">
154
+ <img src="http://static.photos/technology/320x240/2" alt="Product" class="w-full h-40 object-cover">
155
+ <span class="absolute top-2 right-2 bg-red-500 text-white text-xs px-2 py-1 rounded">-15%</span>
156
+ </div>
157
+ <div class="p-3">
158
+ <h3 class="font-medium text-sm mb-1 line-clamp-2">HP EliteBook 840 G8 14" Laptop</h3>
159
+ <div class="flex items-center mb-1">
160
+ <div class="flex text-yellow-400">
161
+ <i data-feather="star" class="w-3 h-3 fill-current"></i>
162
+ <i data-feather="star" class="w-3 h-3 fill-current"></i>
163
+ <i data-feather="star" class="w-3 h-3 fill-current"></i>
164
+ <i data-feather="star" class="w-3 h-3 fill-current"></i>
165
+ <i data-feather="star" class="w-3 h-3"></i>
166
+ </div>
167
+ <span class="text-gray-500 text-xs ml-1">(18)</span>
168
+ </div>
169
+ <div class="flex items-baseline">
170
+ <span class="text-primary font-bold">���598,000</span>
171
+ <span class="text-gray-500 text-xs line-through ml-2">₦703,500</span>
172
+ </div>
173
+ </div>
174
+ </div>
175
+
176
+ <div class="product-card bg-white rounded-lg shadow-md overflow-hidden transition-transform duration-300">
177
+ <div class="relative">
178
+ <img src="http://static.photos/home/320x240/3" alt="Product" class="w-full h-40 object-cover">
179
+ <span class="absolute top-2 right-2 bg-red-500 text-white text-xs px-2 py-1 rounded">-30%</span>
180
+ </div>
181
+ <div class="p-3">
182
+ <h3 class="font-medium text-sm mb-1 line-clamp-2">LG 55" 4K UHD Smart TV</h3>
183
+ <div class="flex items-center mb-1">
184
+ <div class="flex text-yellow-400">
185
+ <i data-feather="star" class="w-3 h-3 fill-current"></i>
186
+ <i data-feather="star" class="w-3 h-3 fill-current"></i>
187
+ <i data-feather="star" class="w-3 h-3 fill-current"></i>
188
+ <i data-feather="star" class="w-3 h-3 fill-current"></i>
189
+ <i data-feather="star" class="w-3 h-3 fill-current"></i>
190
+ </div>
191
+ <span class="text-gray-500 text-xs ml-1">(42)</span>
192
+ </div>
193
+ <div class="flex items-baseline">
194
+ <span class="text-primary font-bold">₦320,000</span>
195
+ <span class="text-gray-500 text-xs line-through ml-2">₦457,000</span>
196
+ </div>
197
+ </div>
198
+ </div>
199
+
200
+ <div class="product-card bg-white rounded-lg shadow-md overflow-hidden transition-transform duration-300">
201
+ <div class="relative">
202
+ <img src="http://static.photos/fashion/320x240/4" alt="Product" class="w-full h-40 object-cover">
203
+ <span class="absolute top-2 right-2 bg-red-500 text-white text-xs px-2 py-1 rounded">-40%</span>
204
+ </div>
205
+ <div class="p-3">
206
+ <h3 class="font-medium text-sm mb-1 line-clamp-2">Nike Air Max Running Shoes</h3>
207
+ <div class="flex items-center mb-1">
208
+ <div class="flex text-yellow-400">
209
+ <i data-feather="star" class="w-3 h-3 fill-current"></i>
210
+ <i data-feather="star" class="w-3 h-3 fill-current"></i>
211
+ <i data-feather="star" class="w-3 h-3 fill-current"></i>
212
+ <i data-feather="star" class="w-3 h-3 fill-current"></i>
213
+ <i data-feather="star" class="w-3 h-3"></i>
214
+ </div>
215
+ <span class="text-gray-500 text-xs ml-1">(31)</span>
216
+ </div>
217
+ <div class="flex items-baseline">
218
+ <span class="text-primary font-bold">₦25,000</span>
219
+ <span class="text-gray-500 text-xs line-through ml-2">₦41,500</span>
220
+ </div>
221
+ </div>
222
+ </div>
223
+
224
+ <div class="product-card bg-white rounded-lg shadow-md overflow-hidden transition-transform duration-300">
225
+ <div class="relative">
226
+ <img src="http://static.photos/electronics/320x240/5" alt="Product" class="w-full h-40 object-cover">
227
+ <span class="absolute top-2 right-2 bg-red-500 text-white text-xs px-2 py-1 rounded">-25%</span>
228
+ </div>
229
+ <div class="p-3">
230
+ <h3 class="font-medium text-sm mb-1 line-clamp-2">Sony WH-1000XM4 Wireless Headphones</h3>
231
+ <div class="flex items-center mb-1">
232
+ <div class="flex text-yellow-400">
233
+ <i data-feather="star" class="w-3 h-3 fill-current"></i>
234
+ <i data-feather="star" class="w-3 h-3 fill-current"></i>
235
+ <i data-feather="star" class="w-3 h-3 fill-current"></i>
236
+ <i data-feather="star" class="w-3 h-3 fill-current"></i>
237
+ <i data-feather="star" class="w-3 h-3 fill-current"></i>
238
+ </div>
239
+ <span class="text-gray-500 text-xs ml-1">(56)</span>
240
+ </div>
241
+ <div class="flex items-baseline">
242
+ <span class="text-primary font-bold">₦120,000</span>
243
+ <span class="text-gray-500 text-xs line-through ml-2">₦160,000</span>
244
+ </div>
245
+ </div>
246
+ </div>
247
+
248
+ <div class="product-card bg-white rounded-lg shadow-md overflow-hidden transition-transform duration-300">
249
+ <div class="relative">
250
+ <img src="http://static.photos/home/320x240/6" alt="Product" class="w-full h-40 object-cover">
251
+ <span class="absolute top-2 right-2 bg-red-500 text-white text-xs px-2 py-1 rounded">-10%</span>
252
+ </div>
253
+ <div class="p-3">
254
+ <h3 class="font-medium text-sm mb-1 line-clamp-2">Royal Air Fryer 5.5L Digital</h3>
255
+ <div class="flex items-center mb-1">
256
+ <div class="flex text-yellow-400">
257
+ <i data-feather="star" class="w-3 h-3 fill-current"></i>
258
+ <i data-feather="star" class="w-3 h-3 fill-current"></i>
259
+ <i data-feather="star" class="w-3 h-3 fill-current"></i>
260
+ <i data-feather="star" class="w-3 h-3 fill-current"></i>
261
+ <i data-feather="star" class="w-3 h-3"></i>
262
+ </div>
263
+ <span class="text-gray-500 text-xs ml-1">(12)</span>
264
+ </div>
265
+ <div class="flex items-baseline">
266
+ <span class="text-primary font-bold">₦45,000</span>
267
+ <span class="text-gray-500 text-xs line-through ml-2">₦50,000</span>
268
+ </div>
269
+ </div>
270
+ </div>
271
+ </div>
272
+ </div>
273
+ </section>
274
+
275
+ <!-- Categories Section -->
276
+ <section class="py-8 bg-gray-50">
277
+ <div class="container mx-auto px-4">
278
+ <h2 class="text-xl font-bold mb-6">Shop By Category</h2>
279
+ <div class="grid grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
280
+ <a href="#" class="bg-white rounded-lg shadow-sm p-4 text-center hover:shadow-md transition-shadow">
281
+ <div class="bg-gray-100 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-2">
282
+ <i data-feather="smartphone" class="text-primary"></i>
283
+ </div>
284
+ <span class="text-sm font-medium">Phones</span>
285
+ </a>
286
+ <a href="#" class="bg-white rounded-lg shadow-sm p-4 text-center hover:shadow-md transition-shadow">
287
+ <div class="bg-gray-100 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-2">
288
+ <i data-feather="tv" class="text-primary"></i>
289
+ </div>
290
+ <span class="text-sm font-medium">Electronics</span>
291
+ </a>
292
+ <a href="#" class="bg-white rounded-lg shadow-sm p-4 text-center hover:shadow-md transition-shadow">
293
+ <div class="bg-gray-100 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-2">
294
+ <i data-feather="tshirt" class="text-primary"></i>
295
+ </div>
296
+ <span class="text-sm font-medium">Fashion</span>
297
+ </a>
298
+ <a href="#" class="bg-white rounded-lg shadow-sm p-4 text-center hover:shadow-md transition-shadow">
299
+ <div class="bg-gray-100 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-2">
300
+ <i data-feather="home" class="text-primary"></i>
301
+ </div>
302
+ <span class="text-sm font-medium">Home</span>
303
+ </a>
304
+ <a href="#" class="bg-white rounded-lg shadow-sm p-4 text-center hover:shadow-md transition-shadow">
305
+ <div class="bg-gray-100 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-2">
306
+ <i data-feather="shopping-bag" class="text-primary"></i>
307
+ </div>
308
+ <span class="text-sm font-medium">Supermarket</span>
309
+ </a>
310
+ <a href="#" class="bg-white rounded-lg shadow-sm p-4 text-center hover:shadow-md transition-shadow">
311
+ <div class="bg-gray-100 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-2">
312
+ <i data-feather="cpu" class="text-primary"></i>
313
+ </div>
314
+ <span class="text-sm font-medium">Computing</span>
315
+ </a>
316
+ <a href="#" class="bg-white rounded-lg shadow-sm p-4 text-center hover:shadow-md transition-shadow">
317
+ <div class="bg-gray-100 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-2">
318
+ <i data-feather="droplet" class="text-primary"></i>
319
+ </div>
320
+ <span class="text-sm font-medium">Beauty</span>
321
+ </a>
322
+ <a href="#" class="bg-white rounded-lg shadow-sm p-4 text-center hover:shadow-md transition-shadow">
323
+ <div class="bg-gray-100 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-2">
324
+ <i data-feather="car" class="text-primary"></i>
325
+ </div>
326
+ <span class="text-sm font-medium">Automotive</span>
327
+ </a>
328
+ <a href="#" class="bg-white rounded-lg shadow-sm p-4 text-center hover:shadow-md transition-shadow">
329
+ <div class="bg-gray-100 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-2">
330
+ <i data-feather="book-open" class="text-primary"></i>
331
+ </div>
332
+ <span class="text-sm font-medium">Books</span>
333
+ </a>
334
+ <a href="#" class="bg-white rounded-lg shadow-sm p-4 text-center hover:shadow-md transition-shadow">
335
+ <div class="bg-gray-100 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-2">
336
+ <i data-feather="gift" class="text-primary"></i>
337
+ </div>
338
+ <span class="text-sm font-medium">Gifts</span>
339
+ </a>
340
+ <a href="#" class="bg-white rounded-lg shadow-sm p-4 text-center hover:shadow-md transition-shadow">
341
+ <div class="bg-gray-100 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-2">
342
+ <i data-feather="watch" class="text-primary"></i>
343
+ </div>
344
+ <span class="text-sm font-medium">Watches</span>
345
+ </a>
346
+ </div>
347
+ </div>
348
+ </section>
349
+
350
+ <!-- Featured Products -->
351
+ <section class="py-8 bg-white">
352
+ <div class="container mx-auto px-4">
353
+ <div class="flex justify-between items-center mb-6">
354
+ <h2 class="text-xl font-bold">Featured Products</h2>
355
+ <a href="#" class="text-primary hover:underline">View All</a>
356
+ </div>
357
+ <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4">
358
+ <!-- Featured Product Cards (similar to Flash Sales) -->
359
+ <!-- Only showing one example to keep code concise -->
360
+ <div class="product-card bg-white rounded-lg shadow-md overflow-hidden transition-transform duration-300">
361
+ <div class="relative">
362
+ <img src="http://static.photos/technology/320x240/7" alt="Product" class="w-full h-40 object-cover">
363
+ </div>
364
+ <div class="p-3">
365
+ <h3 class="font-medium text-sm mb-1 line-clamp-2">Apple iPhone 13 Pro Max 128GB</h3>
366
+ <div class="flex items-center mb-1">
367
+ <div class="flex text-yellow-400">
368
+ <i data-feather="star" class="w-3 h-3 fill-current"></i>
369
+ <i data-feather="star" class="w-3 h-3 fill-current"></i>
370
+ <i data-feather="star" class="w-3 h-3 fill-current"></i>
371
+ <i data-feather="star" class="w-3 h-3 fill-current"></i>
372
+ <i data-feather="star" class="w-3 h-3"></i>
373
+ </div>
374
+ <span class="text-gray-500 text-xs ml-1">(38)</span>
375
+ </div>
376
+ <div class="flex items-baseline">
377
+ <span class="text-primary font-bold">₦750,000</span>
378
+ </div>
379
+ </div>
380
+ </div>
381
+ <!-- Additional product cards would go here -->
382
+ </div>
383
+ </div>
384
+ </section>
385
+
386
+ <!-- Footer -->
387
+ <footer class="bg-gray-800 text-white pt-12 pb-6">
388
+ <div class="container mx-auto px-4">
389
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-8">
390
+ <div>
391
+ <h3 class="text-lg font-bold mb-4">Customer Service</h3>
392
+ <ul class="space-y-2">
393
+ <li><a href="#" class="hover:text-primary">Help Center</a></li>
394
+ <li><a href="#" class="hover:text-primary">How to Buy</a></li>
395
+ <li><a href="#" class="hover:text-primary">Returns & Refunds</a></li>
396
+ <li><a href="#" class="hover:text-primary">Contact Us</a></li>
397
+ </ul>
398
+ </div>
399
+ <div>
400
+ <h3 class="text-lg font-bold mb-4">About NaijaDeals</h3>
401
+ <ul class="space-y-2">
402
+ <li><a href="#" class="hover:text-primary">About Us</a></li>
403
+ <li><a href="#" class="hover:text-primary">NaijaDeals Careers</a></li>
404
+ <li><a href="#" class="hover:text-primary">Terms & Conditions</a></li>
405
+ <li><a href="#" class="hover:text-primary">Privacy Policy</a></li>
406
+ </ul>
407
+ </div>
408
+ <div>
409
+ <h3 class="text-lg font-bold mb-4">Payment</h3>
410
+ <div class="flex flex-wrap gap-2">
411
+ <img src="https://via.placeholder.com/40x25" alt="Visa" class="border rounded">
412
+ <img src="https://via.placeholder.com/40x25" alt="Mastercard" class="border rounded">
413
+ <img src="https://via.placeholder.com/40x25" alt="Verve" class="border rounded">
414
+ <img src="https://via.placeholder.com/40x25" alt="Pay on Delivery" class="border rounded">
415
+ </div>
416
+ </div>
417
+ <div>
418
+ <h3 class="text-lg font-bold mb-4">Follow Us</h3>
419
+ <div class="flex space-x-4">
420
+ <a href="#" class="hover:text-primary"><i data-feather="facebook"></i></a>
421
+ <a href="#" class="hover:text-primary"><i data-feather="twitter"></i></a>
422
+ <a href="#" class="hover:text-primary"><i data-feather="instagram"></i></a>
423
+ <a href="#" class="hover:text-primary"><i data-feather="youtube"></i></a>
424
+ </div>
425
+ <h3 class="text-lg font-bold mt-6 mb-2">Download App</h3>
426
+ <div class="flex space-x-2">
427
+ <a href="#"><img src="https://via.placeholder.com/120x40" alt="Google Play" class="h-10"></a>
428
+ <a href="#"><img src="https://via.placeholder.com/120x40" alt="App Store" class="h-10"></a>
429
+ </div>
430
+ </div>
431
+ </div>
432
+ <div class="pt-6 border-t border-gray-700 text-center text-sm text-gray-400">
433
+ <p>© 2023 NaijaDeals. All Rights Reserved.</p>
434
+ </div>
435
+ </div>
436
+ </footer>
437
+
438
+ <script>
439
+ feather.replace();
440
+ </script>
441
+ </body>
442
  </html>