Hugging Face's logo

Spaces:
dmoedbeck
/
expressdeal
Running

App Files Community
dmoedbeck commited on
Commit
4e8ab4f
·
verified ·
1 Parent(s): 8792749

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +962 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Expressdeal
3
- emoji: 🌖
4
- colorFrom: yellow
5
- colorTo: pink
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: expressdeal
3
+ emoji: 🐳
4
+ colorFrom: gray
5
+ colorTo: red
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,962 @@
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>ExpressDeal - Online Shopping Marketplace</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .product-card:hover {
11
+ transform: translateY(-5px);
12
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
13
+ }
14
+ .category-item:hover .category-icon {
15
+ transform: scale(1.1);
16
+ }
17
+ .dropdown:hover .dropdown-menu {
18
+ display: block;
19
+ }
20
+ .carousel {
21
+ scroll-behavior: smooth;
22
+ }
23
+ .price-slider::-webkit-slider-thumb {
24
+ -webkit-appearance: none;
25
+ appearance: none;
26
+ width: 20px;
27
+ height: 20px;
28
+ background: #f59e0b;
29
+ cursor: pointer;
30
+ border-radius: 50%;
31
+ }
32
+ </style>
33
+ </head>
34
+ <body class="bg-gray-50">
35
+ <!-- Top Navigation Bar -->
36
+ <div class="bg-gray-900 text-white py-2 px-4 text-sm hidden md:block">
37
+ <div class="container mx-auto flex justify-between items-center">
38
+ <div class="flex space-x-4">
39
+ <a href="#" class="hover:text-yellow-400">Ship to: United States</a>
40
+ <a href="#" class="hover:text-yellow-400">Buyer Protection</a>
41
+ <a href="#" class="hover:text-yellow-400">Customer Service</a>
42
+ </div>
43
+ <div class="flex space-x-4">
44
+ <a href="#" class="hover:text-yellow-400"><i class="fas fa-bell mr-1"></i> Notifications</a>
45
+ <a href="#" class="hover:text-yellow-400"><i class="fas fa-heart mr-1"></i> Wish List</a>
46
+ <a href="#" class="hover:text-yellow-400"><i class="fas fa-user mr-1"></i> My Account</a>
47
+ </div>
48
+ </div>
49
+ </div>
50
+
51
+ <!-- Main Navigation -->
52
+ <header class="bg-white shadow-sm sticky top-0 z-50">
53
+ <div class="container mx-auto px-4 py-3">
54
+ <div class="flex items-center justify-between">
55
+ <!-- Logo -->
56
+ <div class="flex items-center">
57
+ <a href="#" class="text-2xl font-bold text-red-600">Express<span class="text-yellow-500">Deal</span></a>
58
+ </div>
59
+
60
+ <!-- Search Bar -->
61
+ <div class="flex-1 mx-8 hidden md:block">
62
+ <div class="relative">
63
+ <input type="text" placeholder="Search for products..."
64
+ class="w-full py-2 px-4 border border-gray-300 rounded-full focus:outline-none focus:ring-2 focus:ring-yellow-500">
65
+ <button class="absolute right-0 top-0 h-full px-6 bg-yellow-500 text-white rounded-r-full hover:bg-yellow-600">
66
+ <i class="fas fa-search"></i>
67
+ </button>
68
+ </div>
69
+ </div>
70
+
71
+ <!-- Cart and User -->
72
+ <div class="flex items-center space-x-4">
73
+ <a href="#" class="text-gray-700 hover:text-yellow-500 relative">
74
+ <i class="fas fa-shopping-cart text-xl"></i>
75
+ <span class="absolute -top-2 -right-2 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">3</span>
76
+ </a>
77
+ <a href="#" class="hidden md:block text-gray-700 hover:text-yellow-500">
78
+ <i class="fas fa-user-circle text-xl"></i>
79
+ </a>
80
+ <button class="md:hidden text-gray-700">
81
+ <i class="fas fa-bars text-xl"></i>
82
+ </button>
83
+ </div>
84
+ </div>
85
+
86
+ <!-- Mobile Search -->
87
+ <div class="mt-3 md:hidden">
88
+ <div class="relative">
89
+ <input type="text" placeholder="Search for products..."
90
+ class="w-full py-2 px-4 border border-gray-300 rounded-full focus:outline-none focus:ring-2 focus:ring-yellow-500">
91
+ <button class="absolute right-0 top-0 h-full px-4 bg-yellow-500 text-white rounded-r-full hover:bg-yellow-600">
92
+ <i class="fas fa-search"></i>
93
+ </button>
94
+ </div>
95
+ </div>
96
+ </div>
97
+ </header>
98
+
99
+ <!-- Categories Navigation -->
100
+ <nav class="bg-white border-b border-gray-200 hidden md:block">
101
+ <div class="container mx-auto px-4">
102
+ <div class="flex items-center space-x-6 py-3 overflow-x-auto">
103
+ <a href="#" class="whitespace-nowrap text-gray-700 hover:text-yellow-500 font-medium">Home</a>
104
+ <div class="dropdown relative">
105
+ <button class="whitespace-nowrap text-gray-700 hover:text-yellow-500 font-medium flex items-center">
106
+ Categories <i class="fas fa-chevron-down ml-1 text-xs"></i>
107
+ </button>
108
+ <div class="dropdown-menu absolute left-0 mt-2 w-48 bg-white shadow-lg rounded-md py-1 z-50 hidden">
109
+ <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-gray-100">Electronics</a>
110
+ <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-gray-100">Fashion</a>
111
+ <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-gray-100">Home & Garden</a>
112
+ <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-gray-100">Toys & Hobbies</a>
113
+ <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-gray-100">Beauty & Health</a>
114
+ </div>
115
+ </div>
116
+ <a href="#" class="whitespace-nowrap text-gray-700 hover:text-yellow-500 font-medium">New Arrivals</a>
117
+ <a href="#" class="whitespace-nowrap text-gray-700 hover:text-yellow-500 font-medium">Deals</a>
118
+ <a href="#" class="whitespace-nowrap text-gray-700 hover:text-yellow-500 font-medium">Coupons</a>
119
+ <a href="#" class="whitespace-nowrap text-gray-700 hover:text-yellow-500 font-medium">Top Brands</a>
120
+ <a href="#" class="whitespace-nowrap text-gray-700 hover:text-yellow-500 font-medium">Super Value</a>
121
+ </div>
122
+ </div>
123
+ </nav>
124
+
125
+ <!-- Main Content -->
126
+ <main class="container mx-auto px-4 py-6">
127
+ <!-- Hero Carousel -->
128
+ <div class="relative overflow-hidden rounded-lg mb-8">
129
+ <div class="carousel flex overflow-x-auto snap-x snap-mandatory scroll-smooth h-64 md:h-96">
130
+ <div class="flex-none w-full snap-start">
131
+ <img src="https://via.placeholder.com/1200x400?text=Summer+Sale+Up+to+70%25+Off" alt="Summer Sale" class="w-full h-full object-cover">
132
+ </div>
133
+ <div class="flex-none w-full snap-start">
134
+ <img src="https://via.placeholder.com/1200x400?text=New+Arrivals+from+Top+Brands" alt="New Arrivals" class="w-full h-full object-cover">
135
+ </div>
136
+ <div class="flex-none w-full snap-start">
137
+ <img src="https://via.placeholder.com/1200x400?text=Free+Shipping+on+Orders+Over+%2410" alt="Free Shipping" class="w-full h-full object-cover">
138
+ </div>
139
+ </div>
140
+ <div class="absolute bottom-4 left-0 right-0 flex justify-center space-x-2">
141
+ <button class="w-3 h-3 rounded-full bg-white opacity-50" onclick="scrollCarousel(0)"></button>
142
+ <button class="w-3 h-3 rounded-full bg-white opacity-50" onclick="scrollCarousel(1)"></button>
143
+ <button class="w-3 h-3 rounded-full bg-white opacity-50" onclick="scrollCarousel(2)"></button>
144
+ </div>
145
+ </div>
146
+
147
+ <!-- Categories Grid -->
148
+ <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 lg:grid-cols-8 gap-4 mb-8">
149
+ <a href="#" class="category-item bg-white p-4 rounded-lg shadow-sm text-center hover:shadow-md transition-all">
150
+ <div class="category-icon w-12 h-12 mx-auto mb-2 text-yellow-500 transition-transform">
151
+ <i class="fas fa-mobile-alt text-3xl"></i>
152
+ </div>
153
+ <span class="text-sm font-medium">Phones</span>
154
+ </a>
155
+ <a href="#" class="category-item bg-white p-4 rounded-lg shadow-sm text-center hover:shadow-md transition-all">
156
+ <div class="category-icon w-12 h-12 mx-auto mb-2 text-blue-500 transition-transform">
157
+ <i class="fas fa-laptop text-3xl"></i>
158
+ </div>
159
+ <span class="text-sm font-medium">Computers</span>
160
+ </a>
161
+ <a href="#" class="category-item bg-white p-4 rounded-lg shadow-sm text-center hover:shadow-md transition-all">
162
+ <div class="category-icon w-12 h-12 mx-auto mb-2 text-green-500 transition-transform">
163
+ <i class="fas fa-tshirt text-3xl"></i>
164
+ </div>
165
+ <span class="text-sm font-medium">Fashion</span>
166
+ </a>
167
+ <a href="#" class="category-item bg-white p-4 rounded-lg shadow-sm text-center hover:shadow-md transition-all">
168
+ <div class="category-icon w-12 h-12 mx-auto mb-2 text-red-500 transition-transform">
169
+ <i class="fas fa-home text-3xl"></i>
170
+ </div>
171
+ <span class="text-sm font-medium">Home</span>
172
+ </a>
173
+ <a href="#" class="category-item bg-white p-4 rounded-lg shadow-sm text-center hover:shadow-md transition-all">
174
+ <div class="category-icon w-12 h-12 mx-auto mb-2 text-purple-500 transition-transform">
175
+ <i class="fas fa-gamepad text-3xl"></i>
176
+ </div>
177
+ <span class="text-sm font-medium">Toys</span>
178
+ </a>
179
+ <a href="#" class="category-item bg-white p-4 rounded-lg shadow-sm text-center hover:shadow-md transition-all">
180
+ <div class="category-icon w-12 h-12 mx-auto mb-2 text-pink-500 transition-transform">
181
+ <i class="fas fa-heart text-3xl"></i>
182
+ </div>
183
+ <span class="text-sm font-medium">Beauty</span>
184
+ </a>
185
+ <a href="#" class="category-item bg-white p-4 rounded-lg shadow-sm text-center hover:shadow-md transition-all">
186
+ <div class="category-icon w-12 h-12 mx-auto mb-2 text-indigo-500 transition-transform">
187
+ <i class="fas fa-car text-3xl"></i>
188
+ </div>
189
+ <span class="text-sm font-medium">Automotive</span>
190
+ </a>
191
+ <a href="#" class="category-item bg-white p-4 rounded-lg shadow-sm text-center hover:shadow-md transition-all">
192
+ <div class="category-icon w-12 h-12 mx-auto mb-2 text-yellow-600 transition-transform">
193
+ <i class="fas fa-tools text-3xl"></i>
194
+ </div>
195
+ <span class="text-sm font-medium">Tools</span>
196
+ </a>
197
+ </div>
198
+
199
+ <!-- Deals Section -->
200
+ <section class="mb-8">
201
+ <div class="flex items-center justify-between mb-4">
202
+ <h2 class="text-xl font-bold">Today's Deals</h2>
203
+ <a href="#" class="text-yellow-600 hover:underline">See All</a>
204
+ </div>
205
+ <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
206
+ <!-- Product Card 1 -->
207
+ <div class="product-card bg-white rounded-lg overflow-hidden shadow-sm transition-all duration-300">
208
+ <div class="relative">
209
+ <img src="https://via.placeholder.com/300x300?text=Wireless+Earbuds" alt="Wireless Earbuds" class="w-full h-48 object-contain">
210
+ <div class="absolute top-2 left-2 bg-red-500 text-white text-xs px-2 py-1 rounded">-30%</div>
211
+ </div>
212
+ <div class="p-3">
213
+ <h3 class="text-sm font-medium mb-1 line-clamp-2">Bluetooth Wireless Earbuds with Charging Case</h3>
214
+ <div class="flex items-center mb-1">
215
+ <div class="flex text-yellow-400 text-xs">
216
+ <i class="fas fa-star"></i>
217
+ <i class="fas fa-star"></i>
218
+ <i class="fas fa-star"></i>
219
+ <i class="fas fa-star"></i>
220
+ <i class="fas fa-star-half-alt"></i>
221
+ </div>
222
+ <span class="text-gray-500 text-xs ml-1">(1245)</span>
223
+ </div>
224
+ <div class="flex items-end">
225
+ <span class="text-red-500 font-bold">$15.99</span>
226
+ <span class="text-gray-500 text-xs line-through ml-2">$22.99</span>
227
+ </div>
228
+ <div class="text-green-600 text-xs mt-1">Free Shipping</div>
229
+ </div>
230
+ </div>
231
+
232
+ <!-- Product Card 2 -->
233
+ <div class="product-card bg-white rounded-lg overflow-hidden shadow-sm transition-all duration-300">
234
+ <div class="relative">
235
+ <img src="https://via.placeholder.com/300x300?text=Smart+Watch" alt="Smart Watch" class="w-full h-48 object-contain">
236
+ <div class="absolute top-2 left-2 bg-red-500 text-white text-xs px-2 py-1 rounded">-45%</div>
237
+ </div>
238
+ <div class="p-3">
239
+ <h3 class="text-sm font-medium mb-1 line-clamp-2">Smart Watch Fitness Tracker with Heart Rate Monitor</h3>
240
+ <div class="flex items-center mb-1">
241
+ <div class="flex text-yellow-400 text-xs">
242
+ <i class="fas fa-star"></i>
243
+ <i class="fas fa-star"></i>
244
+ <i class="fas fa-star"></i>
245
+ <i class="fas fa-star"></i>
246
+ <i class="fas fa-star"></i>
247
+ </div>
248
+ <span class="text-gray-500 text-xs ml-1">(892)</span>
249
+ </div>
250
+ <div class="flex items-end">
251
+ <span class="text-red-500 font-bold">$28.50</span>
252
+ <span class="text-gray-500 text-xs line-through ml-2">$51.99</span>
253
+ </div>
254
+ <div class="text-green-600 text-xs mt-1">Free Shipping</div>
255
+ </div>
256
+ </div>
257
+
258
+ <!-- Product Card 3 -->
259
+ <div class="product-card bg-white rounded-lg overflow-hidden shadow-sm transition-all duration-300">
260
+ <div class="relative">
261
+ <img src="https://via.placeholder.com/300x300?text=Power+Bank" alt="Power Bank" class="w-full h-48 object-contain">
262
+ <div class="absolute top-2 left-2 bg-red-500 text-white text-xs px-2 py-1 rounded">-25%</div>
263
+ </div>
264
+ <div class="p-3">
265
+ <h3 class="text-sm font-medium mb-1 line-clamp-2">20000mAh Power Bank Fast Charging Portable</h3>
266
+ <div class="flex items-center mb-1">
267
+ <div class="flex text-yellow-400 text-xs">
268
+ <i class="fas fa-star"></i>
269
+ <i class="fas fa-star"></i>
270
+ <i class="fas fa-star"></i>
271
+ <i class="fas fa-star"></i>
272
+ <i class="far fa-star"></i>
273
+ </div>
274
+ <span class="text-gray-500 text-xs ml-1">(756)</span>
275
+ </div>
276
+ <div class="flex items-end">
277
+ <span class="text-red-500 font-bold">$19.99</span>
278
+ <span class="text-gray-500 text-xs line-through ml-2">$26.99</span>
279
+ </div>
280
+ <div class="text-green-600 text-xs mt-1">Free Shipping</div>
281
+ </div>
282
+ </div>
283
+
284
+ <!-- Product Card 4 -->
285
+ <div class="product-card bg-white rounded-lg overflow-hidden shadow-sm transition-all duration-300">
286
+ <div class="relative">
287
+ <img src="https://via.placeholder.com/300x300?text=LED+Strip" alt="LED Strip" class="w-full h-48 object-contain">
288
+ <div class="absolute top-2 left-2 bg-red-500 text-white text-xs px-2 py-1 rounded">-50%</div>
289
+ </div>
290
+ <div class="p-3">
291
+ <h3 class="text-sm font-medium mb-1 line-clamp-2">RGB LED Strip Lights with Remote Control</h3>
292
+ <div class="flex items-center mb-1">
293
+ <div class="flex text-yellow-400 text-xs">
294
+ <i class="fas fa-star"></i>
295
+ <i class="fas fa-star"></i>
296
+ <i class="fas fa-star"></i>
297
+ <i class="fas fa-star"></i>
298
+ <i class="fas fa-star-half-alt"></i>
299
+ </div>
300
+ <span class="text-gray-500 text-xs ml-1">(1342)</span>
301
+ </div>
302
+ <div class="flex items-end">
303
+ <span class="text-red-500 font-bold">$8.99</span>
304
+ <span class="text-gray-500 text-xs line-through ml-2">$17.99</span>
305
+ </div>
306
+ <div class="text-green-600 text-xs mt-1">Free Shipping</div>
307
+ </div>
308
+ </div>
309
+
310
+ <!-- Product Card 5 -->
311
+ <div class="product-card bg-white rounded-lg overflow-hidden shadow-sm transition-all duration-300">
312
+ <div class="relative">
313
+ <img src="https://via.placeholder.com/300x300?text=Phone+Case" alt="Phone Case" class="w-full h-48 object-contain">
314
+ <div class="absolute top-2 left-2 bg-red-500 text-white text-xs px-2 py-1 rounded">-60%</div>
315
+ </div>
316
+ <div class="p-3">
317
+ <h3 class="text-sm font-medium mb-1 line-clamp-2">Shockproof Phone Case for iPhone 14 Pro Max</h3>
318
+ <div class="flex items-center mb-1">
319
+ <div class="flex text-yellow-400 text-xs">
320
+ <i class="fas fa-star"></i>
321
+ <i class="fas fa-star"></i>
322
+ <i class="fas fa-star"></i>
323
+ <i class="fas fa-star"></i>
324
+ <i class="far fa-star"></i>
325
+ </div>
326
+ <span class="text-gray-500 text-xs ml-1">(567)</span>
327
+ </div>
328
+ <div class="flex items-end">
329
+ <span class="text-red-500 font-bold">$3.99</span>
330
+ <span class="text-gray-500 text-xs line-through ml-2">$9.99</span>
331
+ </div>
332
+ <div class="text-green-600 text-xs mt-1">Free Shipping</div>
333
+ </div>
334
+ </div>
335
+
336
+ <!-- Product Card 6 -->
337
+ <div class="product-card bg-white rounded-lg overflow-hidden shadow-sm transition-all duration-300">
338
+ <div class="relative">
339
+ <img src="https://via.placeholder.com/300x300?text=Wireless+Charger" alt="Wireless Charger" class="w-full h-48 object-contain">
340
+ <div class="absolute top-2 left-2 bg-red-500 text-white text-xs px-2 py-1 rounded">-35%</div>
341
+ </div>
342
+ <div class="p-3">
343
+ <h3 class="text-sm font-medium mb-1 line-clamp-2">15W Fast Wireless Charger Stand for iPhone</h3>
344
+ <div class="flex items-center mb-1">
345
+ <div class="flex text-yellow-400 text-xs">
346
+ <i class="fas fa-star"></i>
347
+ <i class="fas fa-star"></i>
348
+ <i class="fas fa-star"></i>
349
+ <i class="fas fa-star"></i>
350
+ <i class="fas fa-star-half-alt"></i>
351
+ </div>
352
+ <span class="text-gray-500 text-xs ml-1">(1023)</span>
353
+ </div>
354
+ <div class="flex items-end">
355
+ <span class="text-red-500 font-bold">$12.49</span>
356
+ <span class="text-gray-500 text-xs line-through ml-2">$19.99</span>
357
+ </div>
358
+ <div class="text-green-600 text-xs mt-1">Free Shipping</div>
359
+ </div>
360
+ </div>
361
+ </div>
362
+ </section>
363
+
364
+ <!-- Recommended Products -->
365
+ <section class="mb-8">
366
+ <div class="flex items-center justify-between mb-4">
367
+ <h2 class="text-xl font-bold">Recommended For You</h2>
368
+ <a href="#" class="text-yellow-600 hover:underline">See All</a>
369
+ </div>
370
+ <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
371
+ <!-- Repeat product cards or add new ones -->
372
+ <!-- Product Card 7 -->
373
+ <div class="product-card bg-white rounded-lg overflow-hidden shadow-sm transition-all duration-300">
374
+ <div class="relative">
375
+ <img src="https://via.placeholder.com/300x300?text=Air+Fryer" alt="Air Fryer" class="w-full h-48 object-contain">
376
+ </div>
377
+ <div class="p-3">
378
+ <h3 class="text-sm font-medium mb-1 line-clamp-2">5.5L Digital Air Fryer with Touch Screen</h3>
379
+ <div class="flex items-center mb-1">
380
+ <div class="flex text-yellow-400 text-xs">
381
+ <i class="fas fa-star"></i>
382
+ <i class="fas fa-star"></i>
383
+ <i class="fas fa-star"></i>
384
+ <i class="fas fa-star"></i>
385
+ <i class="far fa-star"></i>
386
+ </div>
387
+ <span class="text-gray-500 text-xs ml-1">(432)</span>
388
+ </div>
389
+ <div class="flex items-end">
390
+ <span class="text-red-500 font-bold">$59.99</span>
391
+ </div>
392
+ <div class="text-green-600 text-xs mt-1">Free Shipping</div>
393
+ </div>
394
+ </div>
395
+
396
+ <!-- Product Card 8 -->
397
+ <div class="product-card bg-white rounded-lg overflow-hidden shadow-sm transition-all duration-300">
398
+ <div class="relative">
399
+ <img src="https://via.placeholder.com/300x300?text=Blender" alt="Blender" class="w-full h-48 object-contain">
400
+ </div>
401
+ <div class="p-3">
402
+ <h3 class="text-sm font-medium mb-1 line-clamp-2">1500W Professional Blender for Smoothies</h3>
403
+ <div class="flex items-center mb-1">
404
+ <div class="flex text-yellow-400 text-xs">
405
+ <i class="fas fa-star"></i>
406
+ <i class="fas fa-star"></i>
407
+ <i class="fas fa-star"></i>
408
+ <i class="fas fa-star-half-alt"></i>
409
+ <i class="far fa-star"></i>
410
+ </div>
411
+ <span class="text-gray-500 text-xs ml-1">(289)</span>
412
+ </div>
413
+ <div class="flex items-end">
414
+ <span class="text-red-500 font-bold">$45.99</span>
415
+ </div>
416
+ <div class="text-green-600 text-xs mt-1">Free Shipping</div>
417
+ </div>
418
+ </div>
419
+
420
+ <!-- Product Card 9 -->
421
+ <div class="product-card bg-white rounded-lg overflow-hidden shadow-sm transition-all duration-300">
422
+ <div class="relative">
423
+ <img src="https://via.placeholder.com/300x300?text=Robot+Vacuum" alt="Robot Vacuum" class="w-full h-48 object-contain">
424
+ </div>
425
+ <div class="p-3">
426
+ <h3 class="text-sm font-medium mb-1 line-clamp-2">Smart Robot Vacuum Cleaner with App Control</h3>
427
+ <div class="flex items-center mb-1">
428
+ <div class="flex text-yellow-400 text-xs">
429
+ <i class="fas fa-star"></i>
430
+ <i class="fas fa-star"></i>
431
+ <i class="fas fa-star"></i>
432
+ <i class="fas fa-star"></i>
433
+ <i class="fas fa-star"></i>
434
+ </div>
435
+ <span class="text-gray-500 text-xs ml-1">(678)</span>
436
+ </div>
437
+ <div class="flex items-end">
438
+ <span class="text-red-500 font-bold">$129.99</span>
439
+ </div>
440
+ <div class="text-green-600 text-xs mt-1">Free Shipping</div>
441
+ </div>
442
+ </div>
443
+
444
+ <!-- Product Card 10 -->
445
+ <div class="product-card bg-white rounded-lg overflow-hidden shadow-sm transition-all duration-300">
446
+ <div class="relative">
447
+ <img src="https://via.placeholder.com/300x300?text=Projector" alt="Projector" class="w-full h-48 object-contain">
448
+ </div>
449
+ <div class="p-3">
450
+ <h3 class="text-sm font-medium mb-1 line-clamp-2">Mini Portable Projector 1080P Support 4K</h3>
451
+ <div class="flex items-center mb-1">
452
+ <div class="flex text-yellow-400 text-xs">
453
+ <i class="fas fa-star"></i>
454
+ <i class="fas fa-star"></i>
455
+ <i class="fas fa-star"></i>
456
+ <i class="fas fa-star"></i>
457
+ <i class="far fa-star"></i>
458
+ </div>
459
+ <span class="text-gray-500 text-xs ml-1">(543)</span>
460
+ </div>
461
+ <div class="flex items-end">
462
+ <span class="text-red-500 font-bold">$89.99</span>
463
+ </div>
464
+ <div class="text-green-600 text-xs mt-1">Free Shipping</div>
465
+ </div>
466
+ </div>
467
+
468
+ <!-- Product Card 11 -->
469
+ <div class="product-card bg-white rounded-lg overflow-hidden shadow-sm transition-all duration-300">
470
+ <div class="relative">
471
+ <img src="https://via.placeholder.com/300x300?text=Drone" alt="Drone" class="w-full h-48 object-contain">
472
+ </div>
473
+ <div class="p-3">
474
+ <h3 class="text-sm font-medium mb-1 line-clamp-2">4K Camera Drone with GPS Foldable RC Quadcopter</h3>
475
+ <div class="flex items-center mb-1">
476
+ <div class="flex text-yellow-400 text-xs">
477
+ <i class="fas fa-star"></i>
478
+ <i class="fas fa-star"></i>
479
+ <i class="fas fa-star"></i>
480
+ <i class="fas fa-star-half-alt"></i>
481
+ <i class="far fa-star"></i>
482
+ </div>
483
+ <span class="text-gray-500 text-xs ml-1">(321)</span>
484
+ </div>
485
+ <div class="flex items-end">
486
+ <span class="text-red-500 font-bold">$159.99</span>
487
+ </div>
488
+ <div class="text-green-600 text-xs mt-1">Free Shipping</div>
489
+ </div>
490
+ </div>
491
+ </div>
492
+ </section>
493
+
494
+ <!-- Flash Sale Banner -->
495
+ <div class="bg-red-600 text-white rounded-lg p-4 mb-8 flex items-center justify-between">
496
+ <div>
497
+ <h3 class="text-xl font-bold">FLASH SALE</h3>
498
+ <p class="text-sm">Ends in 12:34:56</p>
499
+ </div>
500
+ <div class="flex items-center space-x-2">
501
+ <div class="bg-white text-red-600 px-3 py-1 rounded font-bold">12</div>
502
+ <span>:</span>
503
+ <div class="bg-white text-red-600 px-3 py-1 rounded font-bold">34</div>
504
+ <span>:</span>
505
+ <div class="bg-white text-red-600 px-3 py-1 rounded font-bold">56</div>
506
+ </div>
507
+ <a href="#" class="bg-white text-red-600 px-6 py-2 rounded-full font-bold hover:bg-gray-100">SHOP NOW</a>
508
+ </div>
509
+
510
+ <!-- Filter and Products Section -->
511
+ <section class="mb-8">
512
+ <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-4">
513
+ <h2 class="text-xl font-bold mb-2 md:mb-0">All Products</h2>
514
+ <div class="flex items-center space-x-4">
515
+ <div class="flex items-center">
516
+ <span class="text-gray-600 mr-2">Sort by:</span>
517
+ <select class="border border-gray-300 rounded px-3 py-1 focus:outline-none focus:ring-2 focus:ring-yellow-500">
518
+ <option>Best Match</option>
519
+ <option>Price Low to High</option>
520
+ <option>Price High to Low</option>
521
+ <option>Newest</option>
522
+ <option>Top Sales</option>
523
+ </select>
524
+ </div>
525
+ <button class="md:hidden text-gray-700">
526
+ <i class="fas fa-filter"></i>
527
+ </button>
528
+ </div>
529
+ </div>
530
+
531
+ <div class="flex flex-col md:flex-row">
532
+ <!-- Filters Sidebar -->
533
+ <div class="hidden md:block w-64 mr-6">
534
+ <div class="bg-white p-4 rounded-lg shadow-sm mb-4">
535
+ <h3 class="font-bold mb-3">Price</h3>
536
+ <input type="range" min="1" max="500" value="100" class="w-full price-slider mb-2">
537
+ <div class="flex justify-between text-sm">
538
+ <span>$1</span>
539
+ <span>$500+</span>
540
+ </div>
541
+ <div class="flex items-center mt-3">
542
+ <input type="text" placeholder="Min" class="w-20 border border-gray-300 rounded px-2 py-1 mr-2">
543
+ <span>-</span>
544
+ <input type="text" placeholder="Max" class="w-20 border border-gray-300 rounded px-2 py-1 ml-2">
545
+ </div>
546
+ </div>
547
+
548
+ <div class="bg-white p-4 rounded-lg shadow-sm mb-4">
549
+ <h3 class="font-bold mb-3">Categories</h3>
550
+ <div class="space-y-2">
551
+ <div class="flex items-center">
552
+ <input type="checkbox" id="electronics" class="mr-2">
553
+ <label for="electronics">Electronics</label>
554
+ </div>
555
+ <div class="flex items-center">
556
+ <input type="checkbox" id="fashion" class="mr-2">
557
+ <label for="fashion">Fashion</label>
558
+ </div>
559
+ <div class="flex items-center">
560
+ <input type="checkbox" id="home" class="mr-2">
561
+ <label for="home">Home & Garden</label>
562
+ </div>
563
+ <div class="flex items-center">
564
+ <input type="checkbox" id="beauty" class="mr-2">
565
+ <label for="beauty">Beauty & Health</label>
566
+ </div>
567
+ <div class="flex items-center">
568
+ <input type="checkbox" id="toys" class="mr-2">
569
+ <label for="toys">Toys & Hobbies</label>
570
+ </div>
571
+ </div>
572
+ </div>
573
+
574
+ <div class="bg-white p-4 rounded-lg shadow-sm">
575
+ <h3 class="font-bold mb-3">Shipping Options</h3>
576
+ <div class="space-y-2">
577
+ <div class="flex items-center">
578
+ <input type="checkbox" id="free-shipping" class="mr-2">
579
+ <label for="free-shipping">Free Shipping</label>
580
+ </div>
581
+ <div class="flex items-center">
582
+ <input type="checkbox" id="fast-delivery" class="mr-2">
583
+ <label for="fast-delivery">Fast Delivery</label>
584
+ </div>
585
+ </div>
586
+ </div>
587
+ </div>
588
+
589
+ <!-- Products Grid -->
590
+ <div class="flex-1">
591
+ <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4">
592
+ <!-- Repeat product cards or add new ones -->
593
+ <!-- Product Card 12 -->
594
+ <div class="product-card bg-white rounded-lg overflow-hidden shadow-sm transition-all duration-300">
595
+ <div class="relative">
596
+ <img src="https://via.placeholder.com/300x300?text=Neck+Massager" alt="Neck Massager" class="w-full h-48 object-contain">
597
+ </div>
598
+ <div class="p-3">
599
+ <h3 class="text-sm font-medium mb-1 line-clamp-2">Neck and Shoulder Massager with Heat</h3>
600
+ <div class="flex items-center mb-1">
601
+ <div class="flex text-yellow-400 text-xs">
602
+ <i class="fas fa-star"></i>
603
+ <i class="fas fa-star"></i>
604
+ <i class="fas fa-star"></i>
605
+ <i class="fas fa-star"></i>
606
+ <i class="far fa-star"></i>
607
+ </div>
608
+ <span class="text-gray-500 text-xs ml-1">(234)</span>
609
+ </div>
610
+ <div class="flex items-end">
611
+ <span class="text-red-500 font-bold">$35.99</span>
612
+ </div>
613
+ <div class="text-green-600 text-xs mt-1">Free Shipping</div>
614
+ </div>
615
+ </div>
616
+
617
+ <!-- Product Card 13 -->
618
+ <div class="product-card bg-white rounded-lg overflow-hidden shadow-sm transition-all duration-300">
619
+ <div class="relative">
620
+ <img src="https://via.placeholder.com/300x300?text=Desk+Lamp" alt="Desk Lamp" class="w-full h-48 object-contain">
621
+ </div>
622
+ <div class="p-3">
623
+ <h3 class="text-sm font-medium mb-1 line-clamp-2">LED Desk Lamp with USB Charging Port</h3>
624
+ <div class="flex items-center mb-1">
625
+ <div class="flex text-yellow-400 text-xs">
626
+ <i class="fas fa-star"></i>
627
+ <i class="fas fa-star"></i>
628
+ <i class="fas fa-star"></i>
629
+ <i class="fas fa-star-half-alt"></i>
630
+ <i class="far fa-star"></i>
631
+ </div>
632
+ <span class="text-gray-500 text-xs ml-1">(189)</span>
633
+ </div>
634
+ <div class="flex items-end">
635
+ <span class="text-red-500 font-bold">$22.99</span>
636
+ </div>
637
+ <div class="text-green-600 text-xs mt-1">Free Shipping</div>
638
+ </div>
639
+ </div>
640
+
641
+ <!-- Product Card 14 -->
642
+ <div class="product-card bg-white rounded-lg overflow-hidden shadow-sm transition-all duration-300">
643
+ <div class="relative">
644
+ <img src="https://via.placeholder.com/300x300?text=Backpack" alt="Backpack" class="w-full h-48 object-contain">
645
+ </div>
646
+ <div class="p-3">
647
+ <h3 class="text-sm font-medium mb-1 line-clamp-2">Anti-Theft Laptop Backpack with USB Port</h3>
648
+ <div class="flex items-center mb-1">
649
+ <div class="flex text-yellow-400 text-xs">
650
+ <i class="fas fa-star"></i>
651
+ <i class="fas fa-star"></i>
652
+ <i class="fas fa-star"></i>
653
+ <i class="fas fa-star"></i>
654
+ <i class="fas fa-star"></i>
655
+ </div>
656
+ <span class="text-gray-500 text-xs ml-1">(456)</span>
657
+ </div>
658
+ <div class="flex items-end">
659
+ <span class="text-red-500 font-bold">$29.99</span>
660
+ </div>
661
+ <div class="text-green-600 text-xs mt-1">Free Shipping</div>
662
+ </div>
663
+ </div>
664
+
665
+ <!-- Product Card 15 -->
666
+ <div class="product-card bg-white rounded-lg overflow-hidden shadow-sm transition-all duration-300">
667
+ <div class="relative">
668
+ <img src="https://via.placeholder.com/300x300?text=Water+Bottle" alt="Water Bottle" class="w-full h-48 object-contain">
669
+ </div>
670
+ <div class="p-3">
671
+ <h3 class="text-sm font-medium mb-1 line-clamp-2">Insulated Stainless Steel Water Bottle</h3>
672
+ <div class="flex items-center mb-1">
673
+ <div class="flex text-yellow-400 text-xs">
674
+ <i class="fas fa-star"></i>
675
+ <i class="fas fa-star"></i>
676
+ <i class="fas fa-star"></i>
677
+ <i class="fas fa-star"></i>
678
+ <i class="far fa-star"></i>
679
+ </div>
680
+ <span class="text-gray-500 text-xs ml-1">(321)</span>
681
+ </div>
682
+ <div class="flex items-end">
683
+ <span class="text-red-500 font-bold">$14.99</span>
684
+ </div>
685
+ <div class="text-green-600 text-xs mt-1">Free Shipping</div>
686
+ </div>
687
+ </div>
688
+
689
+ <!-- Product Card 16 -->
690
+ <div class="product-card bg-white rounded-lg overflow-hidden shadow-sm transition-all duration-300">
691
+ <div class="relative">
692
+ <img src="https://via.placeholder.com/300x300?text=Yoga+Mat" alt="Yoga Mat" class="w-full h-48 object-contain">
693
+ </div>
694
+ <div class="p-3">
695
+ <h3 class="text-sm font-medium mb-1 line-clamp-2">Non-Slip Yoga Mat with Carrying Strap</h3>
696
+ <div class="flex items-center mb-1">
697
+ <div class="flex text-yellow-400 text-xs">
698
+ <i class="fas fa-star"></i>
699
+ <i class="fas fa-star"></i>
700
+ <i class="fas fa-star"></i>
701
+ <i class="fas fa-star-half-alt"></i>
702
+ <i class="far fa-star"></i>
703
+ </div>
704
+ <span class="text-gray-500 text-xs ml-1">(278)</span>
705
+ </div>
706
+ <div class="flex items-end">
707
+ <span class="text-red-500 font-bold">$18.99</span>
708
+ </div>
709
+ <div class="text-green-600 text-xs mt-1">Free Shipping</div>
710
+ </div>
711
+ </div>
712
+
713
+ <!-- Product Card 17 -->
714
+ <div class="product-card bg-white rounded-lg overflow-hidden shadow-sm transition-all duration-300">
715
+ <div class="relative">
716
+ <img src="https://via.placeholder.com/300x300?text=Wireless+Keyboard" alt="Wireless Keyboard" class="w-full h-48 object-contain">
717
+ </div>
718
+ <div class="p-3">
719
+ <h3 class="text-sm font-medium mb-1 line-clamp-2">Wireless Keyboard and Mouse Combo</h3>
720
+ <div class="flex items-center mb-1">
721
+ <div class="flex text-yellow-400 text-xs">
722
+ <i class="fas fa-star"></i>
723
+ <i class="fas fa-star"></i>
724
+ <i class="fas fa-star"></i>
725
+ <i class="fas fa-star"></i>
726
+ <i class="far fa-star"></i>
727
+ </div>
728
+ <span class="text-gray-500 text-xs ml-1">(412)</span>
729
+ </div>
730
+ <div class="flex items-end">
731
+ <span class="text-red-500 font-bold">$24.99</span>
732
+ </div>
733
+ <div class="text-green-600 text-xs mt-1">Free Shipping</div>
734
+ </div>
735
+ </div>
736
+
737
+ <!-- Product Card 18 -->
738
+ <div class="product-card bg-white rounded-lg overflow-hidden shadow-sm transition-all duration-300">
739
+ <div class="relative">
740
+ <img src="https://via.placeholder.com/300x300?text=Electric+Toothbrush" alt="Electric Toothbrush" class="w-full h-48 object-contain">
741
+ </div>
742
+ <div class="p-3">
743
+ <h3 class="text-sm font-medium mb-1 line-clamp-2">Sonic Electric Toothbrush with 4 Brush Heads</h3>
744
+ <div class="flex items-center mb-1">
745
+ <div class="flex text-yellow-400 text-xs">
746
+ <i class="fas fa-star"></i>
747
+ <i class="fas fa-star"></i>
748
+ <i class="fas fa-star"></i>
749
+ <i class="fas fa-star"></i>
750
+ <i class="fas fa-star-half-alt"></i>
751
+ </div>
752
+ <span class="text-gray-500 text-xs ml-1">(367)</span>
753
+ </div>
754
+ <div class="flex items-end">
755
+ <span class="text-red-500 font-bold">$32.99</span>
756
+ </div>
757
+ <div class="text-green-600 text-xs mt-1">Free Shipping</div>
758
+ </div>
759
+ </div>
760
+
761
+ <!-- Product Card 19 -->
762
+ <div class="product-card bg-white rounded-lg overflow-hidden shadow-sm transition-all duration-300">
763
+ <div class="relative">
764
+ <img src="https://via.placeholder.com/300x300?text=Smart+Scale" alt="Smart Scale" class="w-full h-48 object-contain">
765
+ </div>
766
+ <div class="p-3">
767
+ <h3 class="text-sm font-medium mb-1 line-clamp-2">Digital Body Fat Scale with Bluetooth</h3>
768
+ <div class="flex items-center mb-1">
769
+ <div class="flex text-yellow-400 text-xs">
770
+ <i class="fas fa-star"></i>
771
+ <i class="fas fa-star"></i>
772
+ <i class="fas fa-star"></i>
773
+ <i class="fas fa-star"></i>
774
+ <i class="far fa-star"></i>
775
+ </div>
776
+ <span class="text-gray-500 text-xs ml-1">(298)</span>
777
+ </div>
778
+ <div class="flex items-end">
779
+ <span class="text-red-500 font-bold">$26.99</span>
780
+ </div>
781
+ <div class="text-green-600 text-xs mt-1">Free Shipping</div>
782
+ </div>
783
+ </div>
784
+ </div>
785
+
786
+ <!-- Pagination -->
787
+ <div class="flex justify-center mt-8">
788
+ <nav class="flex items-center space-x-1">
789
+ <button class="px-3 py-1 rounded border border-gray-300 text-gray-600 hover:bg-gray-100">
790
+ <i class="fas fa-chevron-left"></i>
791
+ </button>
792
+ <button class="px-3 py-1 rounded border border-yellow-500 bg-yellow-500 text-white">1</button>
793
+ <button class="px-3 py-1 rounded border border-gray-300 text-gray-600 hover:bg-gray-100">2</button>
794
+ <button class="px-3 py-1 rounded border border-gray-300 text-gray-600 hover:bg-gray-100">3</button>
795
+ <button class="px-3 py-1 rounded border border-gray-300 text-gray-600 hover:bg-gray-100">4</button>
796
+ <button class="px-3 py-1 rounded border border-gray-300 text-gray-600 hover:bg-gray-100">5</button>
797
+ <span class="px-2">...</span>
798
+ <button class="px-3 py-1 rounded border border-gray-300 text-gray-600 hover:bg-gray-100">10</button>
799
+ <button class="px-3 py-1 rounded border border-gray-300 text-gray-600 hover:bg-gray-100">
800
+ <i class="fas fa-chevron-right"></i>
801
+ </button>
802
+ </nav>
803
+ </div>
804
+ </div>
805
+ </div>
806
+ </section>
807
+
808
+ <!-- Newsletter -->
809
+ <div class="bg-gray-100 rounded-lg p-6 mb-8 text-center">
810
+ <h3 class="text-xl font-bold mb-2">Get the Latest Deals</h3>
811
+ <p class="text-gray-600 mb-4">Subscribe to our newsletter and get $10 off your first order</p>
812
+ <div class="max-w-md mx-auto flex">
813
+ <input type="email" placeholder="Your email address" class="flex-1 py-2 px-4 border border-gray-300 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-yellow-500">
814
+ <button class="bg-yellow-500 text-white px-6 py-2 rounded-r-lg hover:bg-yellow-600">Subscribe</button>
815
+ </div>
816
+ </div>
817
+ </main>
818
+
819
+ <!-- Footer -->
820
+ <footer class="bg-gray-900 text-white pt-10 pb-6">
821
+ <div class="container mx-auto px-4">
822
+ <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-8 mb-8">
823
+ <div>
824
+ <h4 class="text-lg font-bold mb-4">Customer Service</h4>
825
+ <ul class="space-y-2">
826
+ <li><a href="#" class="text-gray-400 hover:text-white">Help Center</a></li>
827
+ <li><a href="#" class="text-gray-400 hover:text-white">Contact Us</a></li>
828
+ <li><a href="#" class="text-gray-400 hover:text-white">Returns & Refunds</a></li>
829
+ <li><a href="#" class="text-gray-400 hover:text-white">Order Tracking</a></li>
830
+ <li><a href="#" class="text-gray-400 hover:text-white">FAQs</a></li>
831
+ </ul>
832
+ </div>
833
+ <div>
834
+ <h4 class="text-lg font-bold mb-4">About Us</h4>
835
+ <ul class="space-y-2">
836
+ <li><a href="#" class="text-gray-400 hover:text-white">About ExpressDeal</a></li>
837
+ <li><a href="#" class="text-gray-400 hover:text-white">Careers</a></li>
838
+ <li><a href="#" class="text-gray-400 hover:text-white">Corporate News</a></li>
839
+ <li><a href="#" class="text-gray-400 hover:text-white">Investor Relations</a></li>
840
+ <li><a href="#" class="text-gray-400 hover:text-white">Social Responsibility</a></li>
841
+ </ul>
842
+ </div>
843
+ <div>
844
+ <h4 class="text-lg font-bold mb-4">Payment & Shipping</h4>
845
+ <ul class="space-y-2">
846
+ <li><a href="#" class="text-gray-400 hover:text-white">Payment Methods</a></li>
847
+ <li><a href="#" class="text-gray-400 hover:text-white">Shipping Guide</a></li>
848
+ <li><a href="#" class="text-gray-400 hover:text-white">Local Shipping</a></li>
849
+ <li><a href="#" class="text-gray-400 hover:text-white">International Shipping</a></li>
850
+ <li><a href="#" class="text-gray-400 hover:text-white">Dropshipping</a></li>
851
+ </ul>
852
+ </div>
853
+ <div>
854
+ <h4 class="text-lg font-bold mb-4">Buyer Protection</h4>
855
+ <ul class="space-y-2">
856
+ <li><a href="#" class="text-gray-400 hover:text-white">Money Back Guarantee</a></li>
857
+ <li><a href="#" class="text-gray-400 hover:text-white">Buyer Safety Policy</a></li>
858
+ <li><a href="#" class="text-gray-400 hover:text-white">Product Quality</a></li>
859
+ <li><a href="#" class="text-gray-400 hover:text-white">Dispute Resolution</a></li>
860
+ <li><a href="#" class="text-gray-400 hover:text-white">Report IPR Infringement</a></li>
861
+ </ul>
862
+ </div>
863
+ <div class="col-span-2 md:col-span-4 lg:col-span-1">
864
+ <h4 class="text-lg font-bold mb-4">Download App</h4>
865
+ <div class="space-y-4">
866
+ <div class="flex items-center bg-black p-2 rounded">
867
+ <div class="text-3xl mr-3">
868
+ <i class="fab fa-apple"></i>
869
+ </div>
870
+ <div>
871
+ <div class="text-xs">Download on the</div>
872
+ <div class="font-bold">App Store</div>
873
+ </div>
874
+ </div>
875
+ <div class="flex items-center bg-black p-2 rounded">
876
+ <div class="text-3xl mr-3">
877
+ <i class="fab fa-google-play"></i>
878
+ </div>
879
+ <div>
880
+ <div class="text-xs">Get it on</div>
881
+ <div class="font-bold">Google Play</div>
882
+ </div>
883
+ </div>
884
+ </div>
885
+ </div>
886
+ </div>
887
+
888
+ <div class="border-t border-gray-800 pt-6">
889
+ <div class="flex flex-col md:flex-row md:items-center md:justify-between">
890
+ <div class="mb-4 md:mb-0">
891
+ <a href="#" class="text-2xl font-bold text-red-600">Express<span class="text-yellow-500">Deal</span></a>
892
+ </div>
893
+ <div class="flex space-x-4 mb-4 md:mb-0">
894
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a>
895
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a>
896
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a>
897
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-youtube"></i></a>
898
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-pinterest-p"></i></a>
899
+ </div>
900
+ <div class="text-gray-400 text-sm">
901
+ © 2023 ExpressDeal. All Rights Reserved.
902
+ </div>
903
+ </div>
904
+ </div>
905
+ </div>
906
+ </footer>
907
+
908
+ <!-- Back to Top Button -->
909
+ <button id="back-to-top" class="fixed bottom-6 right-6 bg-gray-800 text-white p-3 rounded-full shadow-lg opacity-0 invisible transition-all duration-300">
910
+ <i class="fas fa-arrow-up"></i>
911
+ </button>
912
+
913
+ <script>
914
+ // Back to Top Button
915
+ const backToTopButton = document.getElementById('back-to-top');
916
+
917
+ window.addEventListener('scroll', () => {
918
+ if (window.pageYOffset > 300) {
919
+ backToTopButton.classList.remove('opacity-0', 'invisible');
920
+ backToTopButton.classList.add('opacity-100', 'visible');
921
+ } else {
922
+ backToTopButton.classList.remove('opacity-100', 'visible');
923
+ backToTopButton.classList.add('opacity-0', 'invisible');
924
+ }
925
+ });
926
+
927
+ backToTopButton.addEventListener('click', () => {
928
+ window.scrollTo({
929
+ top: 0,
930
+ behavior: 'smooth'
931
+ });
932
+ });
933
+
934
+ // Carousel Navigation
935
+ function scrollCarousel(index) {
936
+ const carousel = document.querySelector('.carousel');
937
+ const items = document.querySelectorAll('.carousel > div');
938
+ carousel.scrollTo({
939
+ left: items[index].offsetLeft,
940
+ behavior: 'smooth'
941
+ });
942
+ }
943
+
944
+ // Mobile Menu Toggle (placeholder for functionality)
945
+ document.querySelector('.md\\:hidden.text-gray-700').addEventListener('click', function() {
946
+ alert('Mobile menu would open here in a full implementation');
947
+ });
948
+
949
+ // Filter Toggle for Mobile
950
+ document.querySelector('.md\\:hidden.text-gray-700 + button').addEventListener('click', function() {
951
+ alert('Filters would open here in a full implementation');
952
+ });
953
+
954
+ // Product Card Click
955
+ document.querySelectorAll('.product-card').forEach(card => {
956
+ card.addEventListener('click', function() {
957
+ alert('Product details page would open here in a full implementation');
958
+ });
959
+ });
960
+ </script>
961
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=dmoedbeck/expressdeal" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
962
+ </html>