Hugging Face's logo

Spaces:
mickey1994
/
stylo-com
Running

App Files Community
mickey1994 commited on
Commit
e92b7b0
·
verified ·
1 Parent(s): 790fd1e

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +763 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Stylo Com
3
- emoji: 👁
4
- colorFrom: purple
5
  colorTo: green
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: stylo-com
3
+ emoji: 🐳
4
+ colorFrom: blue
5
  colorTo: green
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,763 @@
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>Stylo - Fashion Ecommerce</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
+ .dropdown:hover .dropdown-menu {
11
+ display: block;
12
+ }
13
+ .product-card:hover {
14
+ transform: translateY(-5px);
15
+ box-shadow: 0 10px 20px rgba(0,0,0,0.1);
16
+ }
17
+ .carousel {
18
+ scroll-snap-type: x mandatory;
19
+ }
20
+ .carousel-item {
21
+ scroll-snap-align: start;
22
+ }
23
+ .skeleton {
24
+ animation: pulse 1.5s infinite;
25
+ }
26
+ @keyframes pulse {
27
+ 0%, 100% {
28
+ opacity: 1;
29
+ }
30
+ 50% {
31
+ opacity: 0.5;
32
+ }
33
+ }
34
+ </style>
35
+ </head>
36
+ <body class="bg-gray-50">
37
+ <!-- Top Banner -->
38
+ <div class="bg-indigo-900 text-white text-center py-1 text-sm">
39
+ Free shipping on orders above ₹799 | Use code STYLO20 for 20% off
40
+ </div>
41
+
42
+ <!-- Header -->
43
+ <header class="sticky top-0 z-50 bg-white shadow-sm">
44
+ <div class="container mx-auto px-4 py-3">
45
+ <div class="flex items-center justify-between">
46
+ <!-- Logo -->
47
+ <div class="flex items-center">
48
+ <a href="#" class="text-2xl font-bold text-indigo-600">STYLO</a>
49
+ </div>
50
+
51
+ <!-- Search Bar -->
52
+ <div class="hidden md:flex flex-1 mx-8">
53
+ <div class="relative w-full">
54
+ <input type="text" placeholder="Search for brands and products"
55
+ class="w-full py-2 px-4 border border-gray-300 rounded-l-full focus:outline-none focus:ring-2 focus:ring-indigo-500">
56
+ <button class="absolute right-0 top-0 h-full px-4 bg-indigo-600 text-white rounded-r-full hover:bg-indigo-700">
57
+ <i class="fas fa-search"></i>
58
+ </button>
59
+ </div>
60
+ </div>
61
+
62
+ <!-- Navigation -->
63
+ <div class="flex items-center space-x-6">
64
+ <div class="hidden md:flex items-center space-x-6">
65
+ <a href="#" class="text-gray-700 hover:text-indigo-600">
66
+ <div class="text-center">
67
+ <i class="far fa-user text-xl"></i>
68
+ <p class="text-xs mt-1">Profile</p>
69
+ </div>
70
+ </a>
71
+ <a href="#" class="text-gray-700 hover:text-indigo-600">
72
+ <div class="text-center">
73
+ <i class="far fa-heart text-xl"></i>
74
+ <p class="text-xs mt-1">Wishlist</p>
75
+ </div>
76
+ </a>
77
+ <a href="#" class="text-gray-700 hover:text-indigo-600">
78
+ <div class="text-center">
79
+ <i class="fas fa-shopping-bag text-xl"></i>
80
+ <p class="text-xs mt-1">Bag</p>
81
+ </div>
82
+ </a>
83
+ </div>
84
+ <button class="md:hidden text-gray-700">
85
+ <i class="fas fa-bars text-xl"></i>
86
+ </button>
87
+ </div>
88
+ </div>
89
+
90
+ <!-- Mobile Search -->
91
+ <div class="mt-3 md:hidden">
92
+ <div class="relative">
93
+ <input type="text" placeholder="Search for brands and products"
94
+ class="w-full py-2 px-4 border border-gray-300 rounded-full focus:outline-none focus:ring-2 focus:ring-indigo-500">
95
+ <button class="absolute right-0 top-0 h-full px-4 text-gray-500">
96
+ <i class="fas fa-search"></i>
97
+ </button>
98
+ </div>
99
+ </div>
100
+ </div>
101
+
102
+ <!-- Categories -->
103
+ <nav class="hidden md:block bg-white border-t">
104
+ <div class="container mx-auto px-4">
105
+ <div class="flex justify-between">
106
+ <div class="dropdown relative">
107
+ <button class="py-3 px-4 text-gray-700 hover:text-indigo-600 font-medium flex items-center">
108
+ Men <i class="fas fa-chevron-down ml-1 text-xs"></i>
109
+ </button>
110
+ <div class="dropdown-menu absolute hidden bg-white shadow-lg rounded-md mt-0 py-2 w-48 z-50">
111
+ <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">T-Shirts</a>
112
+ <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Shirts</a>
113
+ <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Jeans</a>
114
+ <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Shoes</a>
115
+ <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Accessories</a>
116
+ </div>
117
+ </div>
118
+ <div class="dropdown relative">
119
+ <button class="py-3 px-4 text-gray-700 hover:text-indigo-600 font-medium flex items-center">
120
+ Women <i class="fas fa-chevron-down ml-1 text-xs"></i>
121
+ </button>
122
+ <div class="dropdown-menu absolute hidden bg-white shadow-lg rounded-md mt-0 py-2 w-48 z-50">
123
+ <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Tops</a>
124
+ <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Dresses</a>
125
+ <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Jeans</a>
126
+ <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Shoes</a>
127
+ <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Accessories</a>
128
+ </div>
129
+ </div>
130
+ <div class="dropdown relative">
131
+ <button class="py-3 px-4 text-gray-700 hover:text-indigo-600 font-medium flex items-center">
132
+ Kids <i class="fas fa-chevron-down ml-1 text-xs"></i>
133
+ </button>
134
+ <div class="dropdown-menu absolute hidden bg-white shadow-lg rounded-md mt-0 py-2 w-48 z-50">
135
+ <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Clothing</a>
136
+ <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Footwear</a>
137
+ <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Toys</a>
138
+ <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Accessories</a>
139
+ </div>
140
+ </div>
141
+ <div class="dropdown relative">
142
+ <button class="py-3 px-4 text-gray-700 hover:text-indigo-600 font-medium flex items-center">
143
+ Home & Living <i class="fas fa-chevron-down ml-1 text-xs"></i>
144
+ </button>
145
+ <div class="dropdown-menu absolute hidden bg-white shadow-lg rounded-md mt-0 py-2 w-48 z-50">
146
+ <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Bedding</a>
147
+ <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Decor</a>
148
+ <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Kitchen</a>
149
+ <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Bath</a>
150
+ </div>
151
+ </div>
152
+ <div class="dropdown relative">
153
+ <button class="py-3 px-4 text-gray-700 hover:text-indigo-600 font-medium flex items-center">
154
+ Beauty <i class="fas fa-chevron-down ml-1 text-xs"></i>
155
+ </button>
156
+ <div class="dropdown-menu absolute hidden bg-white shadow-lg rounded-md mt-0 py-2 w-48 z-50">
157
+ <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Makeup</a>
158
+ <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Skincare</a>
159
+ <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Haircare</a>
160
+ <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Fragrances</a>
161
+ </div>
162
+ </div>
163
+ <a href="#" class="py-3 px-4 text-gray-700 hover:text-indigo-600 font-medium">Offers</a>
164
+ <a href="#" class="py-3 px-4 text-gray-700 hover:text-indigo-600 font-medium">New</a>
165
+ </div>
166
+ </div>
167
+ </nav>
168
+ </header>
169
+
170
+ <!-- Main Content -->
171
+ <main class="container mx-auto px-4 py-6">
172
+ <!-- Hero Carousel -->
173
+ <div class="relative overflow-hidden rounded-xl mb-8">
174
+ <div class="carousel flex overflow-x-auto snap-x snap-mandatory scroll-smooth whitespace-nowrap hide-scrollbar">
175
+ <div class="carousel-item w-full flex-shrink-0">
176
+ <img src="https://images.unsplash.com/photo-1483985988355-763728e1935b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
177
+ alt="Fashion Sale" class="w-full h-64 md:h-96 object-cover">
178
+ </div>
179
+ <div class="carousel-item w-full flex-shrink-0">
180
+ <img src="https://images.unsplash.com/photo-1469334031218-e382a71b716b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
181
+ alt="Summer Collection" class="w-full h-64 md:h-96 object-cover">
182
+ </div>
183
+ <div class="carousel-item w-full flex-shrink-0">
184
+ <img src="https://images.unsplash.com/photo-1556905055-8f358a7a47b2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
185
+ alt="New Arrivals" class="w-full h-64 md:h-96 object-cover">
186
+ </div>
187
+ </div>
188
+ <div class="absolute bottom-4 left-0 right-0 flex justify-center space-x-2">
189
+ <button class="w-3 h-3 rounded-full bg-white opacity-50"></button>
190
+ <button class="w-3 h-3 rounded-full bg-white opacity-50"></button>
191
+ <button class="w-3 h-3 rounded-full bg-white opacity-50"></button>
192
+ </div>
193
+ </div>
194
+
195
+ <!-- Categories Grid -->
196
+ <div class="mb-10">
197
+ <h2 class="text-2xl font-bold mb-6">Shop By Category</h2>
198
+ <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
199
+ <a href="#" class="bg-white rounded-lg shadow-sm p-4 text-center hover:shadow-md transition-shadow">
200
+ <div class="w-16 h-16 mx-auto mb-2 bg-gray-100 rounded-full flex items-center justify-center">
201
+ <i class="fas fa-tshirt text-2xl text-indigo-600"></i>
202
+ </div>
203
+ <p class="text-sm font-medium">Men's Topwear</p>
204
+ </a>
205
+ <a href="#" class="bg-white rounded-lg shadow-sm p-4 text-center hover:shadow-md transition-shadow">
206
+ <div class="w-16 h-16 mx-auto mb-2 bg-gray-100 rounded-full flex items-center justify-center">
207
+ <i class="fas fa-female text-2xl text-indigo-600"></i>
208
+ </div>
209
+ <p class="text-sm font-medium">Women's Ethnic</p>
210
+ </a>
211
+ <a href="#" class="bg-white rounded-lg shadow-sm p-4 text-center hover:shadow-md transition-shadow">
212
+ <div class="w-16 h-16 mx-auto mb-2 bg-gray-100 rounded-full flex items-center justify-center">
213
+ <i class="fas fa-shoe-prints text-2xl text-indigo-600"></i>
214
+ </div>
215
+ <p class="text-sm font-medium">Footwear</p>
216
+ </a>
217
+ <a href="#" class="bg-white rounded-lg shadow-sm p-4 text-center hover:shadow-md transition-shadow">
218
+ <div class="w-16 h-16 mx-auto mb-2 bg-gray-100 rounded-full flex items-center justify-center">
219
+ <i class="fas fa-child text-2xl text-indigo-600"></i>
220
+ </div>
221
+ <p class="text-sm font-medium">Kids</p>
222
+ </a>
223
+ <a href="#" class="bg-white rounded-lg shadow-sm p-4 text-center hover:shadow-md transition-shadow">
224
+ <div class="w-16 h-16 mx-auto mb-2 bg-gray-100 rounded-full flex items-center justify-center">
225
+ <i class="fas fa-home text-2xl text-indigo-600"></i>
226
+ </div>
227
+ <p class="text-sm font-medium">Home & Living</p>
228
+ </a>
229
+ <a href="#" class="bg-white rounded-lg shadow-sm p-4 text-center hover:shadow-md transition-shadow">
230
+ <div class="w-16 h-16 mx-auto mb-2 bg-gray-100 rounded-full flex items-center justify-center">
231
+ <i class="fas fa-mobile-alt text-2xl text-indigo-600"></i>
232
+ </div>
233
+ <p class="text-sm font-medium">Electronics</p>
234
+ </a>
235
+ </div>
236
+ </div>
237
+
238
+ <!-- Deals of the Day -->
239
+ <div class="mb-10">
240
+ <div class="flex justify-between items-center mb-6">
241
+ <h2 class="text-2xl font-bold">Deals of the Day</h2>
242
+ <div class="flex items-center">
243
+ <span class="text-sm mr-2">Ends in</span>
244
+ <div class="bg-gray-800 text-white px-3 py-1 rounded-md flex items-center">
245
+ <span class="font-bold">08</span>
246
+ <span class="mx-1">:</span>
247
+ <span class="font-bold">45</span>
248
+ <span class="mx-1">:</span>
249
+ <span class="font-bold">32</span>
250
+ </div>
251
+ </div>
252
+ </div>
253
+ <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
254
+ <!-- Product Card 1 -->
255
+ <div class="product-card bg-white rounded-lg overflow-hidden shadow-sm transition-all duration-300">
256
+ <div class="relative">
257
+ <img src="https://images.unsplash.com/photo-1529374255404-311a2a4f1fd9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=880&q=80"
258
+ alt="Men's T-Shirt" class="w-full h-64 object-cover">
259
+ <div class="absolute top-2 right-2 bg-white rounded-full w-8 h-8 flex items-center justify-center shadow-md">
260
+ <i class="far fa-heart text-gray-400 hover:text-red-500 cursor-pointer"></i>
261
+ </div>
262
+ <div class="absolute bottom-2 left-2 bg-indigo-600 text-white text-xs px-2 py-1 rounded">
263
+ 40% OFF
264
+ </div>
265
+ </div>
266
+ <div class="p-4">
267
+ <h3 class="text-sm font-medium text-gray-800 mb-1">Roadster</h3>
268
+ <p class="text-xs text-gray-500 mb-2">Men's Printed Round Neck T-Shirt</p>
269
+ <div class="flex items-center mb-1">
270
+ <span class="text-sm font-bold text-gray-800">₹399</span>
271
+ <span class="text-xs text-gray-500 line-through ml-2">₹999</span>
272
+ <span class="text-xs text-green-600 font-medium ml-2">(60% OFF)</span>
273
+ </div>
274
+ <div class="flex items-center text-xs text-gray-500">
275
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
276
+ <span>4.2 | 1.2k</span>
277
+ </div>
278
+ </div>
279
+ </div>
280
+
281
+ <!-- Product Card 2 -->
282
+ <div class="product-card bg-white rounded-lg overflow-hidden shadow-sm transition-all duration-300">
283
+ <div class="relative">
284
+ <img src="https://images.unsplash.com/photo-1543076449-ae0315e7e16e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
285
+ alt="Women's Dress" class="w-full h-64 object-cover">
286
+ <div class="absolute top-2 right-2 bg-white rounded-full w-8 h-8 flex items-center justify-center shadow-md">
287
+ <i class="far fa-heart text-gray-400 hover:text-red-500 cursor-pointer"></i>
288
+ </div>
289
+ <div class="absolute bottom-2 left-2 bg-indigo-600 text-white text-xs px-2 py-1 rounded">
290
+ 50% OFF
291
+ </div>
292
+ </div>
293
+ <div class="p-4">
294
+ <h3 class="text-sm font-medium text-gray-800 mb-1">H&M</h3>
295
+ <p class="text-xs text-gray-500 mb-2">Women's Floral Print Maxi Dress</p>
296
+ <div class="flex items-center mb-1">
297
+ <span class="text-sm font-bold text-gray-800">₹1,299</span>
298
+ <span class="text-xs text-gray-500 line-through ml-2">₹2,599</span>
299
+ <span class="text-xs text-green-600 font-medium ml-2">(50% OFF)</span>
300
+ </div>
301
+ <div class="flex items-center text-xs text-gray-500">
302
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
303
+ <span>4.5 | 2.4k</span>
304
+ </div>
305
+ </div>
306
+ </div>
307
+
308
+ <!-- Product Card 3 -->
309
+ <div class="product-card bg-white rounded-lg overflow-hidden shadow-sm transition-all duration-300">
310
+ <div class="relative">
311
+ <img src="https://images.unsplash.com/photo-1600269452121-1f5d141f8ef1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
312
+ alt="Sneakers" class="w-full h-64 object-cover">
313
+ <div class="absolute top-2 right-2 bg-white rounded-full w-8 h-8 flex items-center justify-center shadow-md">
314
+ <i class="far fa-heart text-gray-400 hover:text-red-500 cursor-pointer"></i>
315
+ </div>
316
+ <div class="absolute bottom-2 left-2 bg-indigo-600 text-white text-xs px-2 py-1 rounded">
317
+ 30% OFF
318
+ </div>
319
+ </div>
320
+ <div class="p-4">
321
+ <h3 class="text-sm font-medium text-gray-800 mb-1">Nike</h3>
322
+ <p class="text-xs text-gray-500 mb-2">Men's Air Max Running Shoes</p>
323
+ <div class="flex items-center mb-1">
324
+ <span class="text-sm font-bold text-gray-800">₹4,199</span>
325
+ <span class="text-xs text-gray-500 line-through ml-2">₹5,999</span>
326
+ <span class="text-xs text-green-600 font-medium ml-2">(30% OFF)</span>
327
+ </div>
328
+ <div class="flex items-center text-xs text-gray-500">
329
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
330
+ <span>4.7 | 3.1k</span>
331
+ </div>
332
+ </div>
333
+ </div>
334
+
335
+ <!-- Product Card 4 -->
336
+ <div class="product-card bg-white rounded-lg overflow-hidden shadow-sm transition-all duration-300">
337
+ <div class="relative">
338
+ <img src="https://images.unsplash.com/photo-1591047139829-d91aecb6caea?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1632&q=80"
339
+ alt="Watch" class="w-full h-64 object-cover">
340
+ <div class="absolute top-2 right-2 bg-white rounded-full w-8 h-8 flex items-center justify-center shadow-md">
341
+ <i class="far fa-heart text-gray-400 hover:text-red-500 cursor-pointer"></i>
342
+ </div>
343
+ <div class="absolute bottom-2 left-2 bg-indigo-600 text-white text-xs px-2 py-1 rounded">
344
+ 25% OFF
345
+ </div>
346
+ </div>
347
+ <div class="p-4">
348
+ <h3 class="text-sm font-medium text-gray-800 mb-1">Fossil</h3>
349
+ <p class="text-xs text-gray-500 mb-2">Men's Chronograph Watch</p>
350
+ <div class="flex items-center mb-1">
351
+ <span class="text-sm font-bold text-gray-800">₹8,999</span>
352
+ <span class="text-xs text-gray-500 line-through ml-2">₹11,999</span>
353
+ <span class="text-xs text-green-600 font-medium ml-2">(25% OFF)</span>
354
+ </div>
355
+ <div class="flex items-center text-xs text-gray-500">
356
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
357
+ <span>4.8 | 1.8k</span>
358
+ </div>
359
+ </div>
360
+ </div>
361
+
362
+ <!-- Product Card 5 -->
363
+ <div class="product-card bg-white rounded-lg overflow-hidden shadow-sm transition-all duration-300">
364
+ <div class="relative">
365
+ <img src="https://images.unsplash.com/photo-1525507119028-ed4c629a60a3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
366
+ alt="Backpack" class="w-full h-64 object-cover">
367
+ <div class="absolute top-2 right-2 bg-white rounded-full w-8 h-8 flex items-center justify-center shadow-md">
368
+ <i class="far fa-heart text-gray-400 hover:text-red-500 cursor-pointer"></i>
369
+ </div>
370
+ <div class="absolute bottom-2 left-2 bg-indigo-600 text-white text-xs px-2 py-1 rounded">
371
+ 20% OFF
372
+ </div>
373
+ </div>
374
+ <div class="p-4">
375
+ <h3 class="text-sm font-medium text-gray-800 mb-1">American Tourister</h3>
376
+ <p class="text-xs text-gray-500 mb-2">15.6 inch Laptop Backpack</p>
377
+ <div class="flex items-center mb-1">
378
+ <span class="text-sm font-bold text-gray-800">₹1,599</span>
379
+ <span class="text-xs text-gray-500 line-through ml-2">₹1,999</span>
380
+ <span class="text-xs text-green-600 font-medium ml-2">(20% OFF)</span>
381
+ </div>
382
+ <div class="flex items-center text-xs text-gray-500">
383
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
384
+ <span>4.3 | 1.5k</span>
385
+ </div>
386
+ </div>
387
+ </div>
388
+ </div>
389
+ </div>
390
+
391
+ <!-- Top Brands -->
392
+ <div class="mb-10">
393
+ <h2 class="text-2xl font-bold mb-6">Top Brands</h2>
394
+ <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
395
+ <div class="bg-white rounded-lg shadow-sm p-4 flex items-center justify-center">
396
+ <img src="https://logos-world.net/wp-content/uploads/2020/04/Nike-Logo.png" alt="Nike" class="h-12 object-contain">
397
+ </div>
398
+ <div class="bg-white rounded-lg shadow-sm p-4 flex items-center justify-center">
399
+ <img src="https://logos-world.net/wp-content/uploads/2020/04/Adidas-Logo.png" alt="Adidas" class="h-12 object-contain">
400
+ </div>
401
+ <div class="bg-white rounded-lg shadow-sm p-4 flex items-center justify-center">
402
+ <img src="https://logos-world.net/wp-content/uploads/2020/04/Puma-Logo.png" alt="Puma" class="h-12 object-contain">
403
+ </div>
404
+ <div class="bg-white rounded-lg shadow-sm p-4 flex items-center justify-center">
405
+ <img src="https://logos-world.net/wp-content/uploads/2020/04/HM-Logo.png" alt="H&M" class="h-12 object-contain">
406
+ </div>
407
+ <div class="bg-white rounded-lg shadow-sm p-4 flex items-center justify-center">
408
+ <img src="https://logos-world.net/wp-content/uploads/2020/04/Zara-Logo.png" alt="Zara" class="h-12 object-contain">
409
+ </div>
410
+ <div class="bg-white rounded-lg shadow-sm p-4 flex items-center justify-center">
411
+ <img src="https://logos-world.net/wp-content/uploads/2020/04/Levis-Logo.png" alt="Levi's" class="h-12 object-contain">
412
+ </div>
413
+ </div>
414
+ </div>
415
+
416
+ <!-- New Arrivals -->
417
+ <div class="mb-10">
418
+ <h2 class="text-2xl font-bold mb-6">New Arrivals</h2>
419
+ <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
420
+ <!-- Product Card 1 -->
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://images.unsplash.com/photo-1595950653106-6c9ebd614d3a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80"
424
+ alt="Denim Jacket" class="w-full h-64 object-cover">
425
+ <div class="absolute top-2 right-2 bg-white rounded-full w-8 h-8 flex items-center justify-center shadow-md">
426
+ <i class="far fa-heart text-gray-400 hover:text-red-500 cursor-pointer"></i>
427
+ </div>
428
+ <div class="absolute bottom-2 left-2 bg-red-600 text-white text-xs px-2 py-1 rounded">
429
+ NEW
430
+ </div>
431
+ </div>
432
+ <div class="p-4">
433
+ <h3 class="text-sm font-medium text-gray-800 mb-1">Levi's</h3>
434
+ <p class="text-xs text-gray-500 mb-2">Men's Denim Jacket</p>
435
+ <div class="flex items-center mb-1">
436
+ <span class="text-sm font-bold text-gray-800">₹2,499</span>
437
+ <span class="text-xs text-gray-500 line-through ml-2">₹3,499</span>
438
+ <span class="text-xs text-green-600 font-medium ml-2">(29% OFF)</span>
439
+ </div>
440
+ <div class="flex items-center text-xs text-gray-500">
441
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
442
+ <span>4.6 | 876</span>
443
+ </div>
444
+ </div>
445
+ </div>
446
+
447
+ <!-- Product Card 2 -->
448
+ <div class="product-card bg-white rounded-lg overflow-hidden shadow-sm transition-all duration-300">
449
+ <div class="relative">
450
+ <img src="https://images.unsplash.com/photo-1551232864-3f0890e580d9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80"
451
+ alt="Handbag" class="w-full h-64 object-cover">
452
+ <div class="absolute top-2 right-2 bg-white rounded-full w-8 h-8 flex items-center justify-center shadow-md">
453
+ <i class="far fa-heart text-gray-400 hover:text-red-500 cursor-pointer"></i>
454
+ </div>
455
+ <div class="absolute bottom-2 left-2 bg-red-600 text-white text-xs px-2 py-1 rounded">
456
+ NEW
457
+ </div>
458
+ </div>
459
+ <div class="p-4">
460
+ <h3 class="text-sm font-medium text-gray-800 mb-1">Michael Kors</h3>
461
+ <p class="text-xs text-gray-500 mb-2">Women's Leather Handbag</p>
462
+ <div class="flex items-center mb-1">
463
+ <span class="text-sm font-bold text-gray-800">₹12,999</span>
464
+ <span class="text-xs text-gray-500 line-through ml-2">₹15,999</span>
465
+ <span class="text-xs text-green-600 font-medium ml-2">(19% OFF)</span>
466
+ </div>
467
+ <div class="flex items-center text-xs text-gray-500">
468
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
469
+ <span>4.9 | 432</span>
470
+ </div>
471
+ </div>
472
+ </div>
473
+
474
+ <!-- Product Card 3 -->
475
+ <div class="product-card bg-white rounded-lg overflow-hidden shadow-sm transition-all duration-300">
476
+ <div class="relative">
477
+ <img src="https://images.unsplash.com/photo-1523170335258-f5ed11844a49?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=880&q=80"
478
+ alt="Sunglasses" class="w-full h-64 object-cover">
479
+ <div class="absolute top-2 right-2 bg-white rounded-full w-8 h-8 flex items-center justify-center shadow-md">
480
+ <i class="far fa-heart text-gray-400 hover:text-red-500 cursor-pointer"></i>
481
+ </div>
482
+ <div class="absolute bottom-2 left-2 bg-red-600 text-white text-xs px-2 py-1 rounded">
483
+ NEW
484
+ </div>
485
+ </div>
486
+ <div class="p-4">
487
+ <h3 class="text-sm font-medium text-gray-800 mb-1">Ray-Ban</h3>
488
+ <p class="text-xs text-gray-500 mb-2">Aviator Sunglasses</p>
489
+ <div class="flex items-center mb-1">
490
+ <span class="text-sm font-bold text-gray-800">₹8,499</span>
491
+ <span class="text-xs text-gray-500 line-through ml-2">₹9,999</span>
492
+ <span class="text-xs text-green-600 font-medium ml-2">(15% OFF)</span>
493
+ </div>
494
+ <div class="flex items-center text-xs text-gray-500">
495
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
496
+ <span>4.8 | 654</span>
497
+ </div>
498
+ </div>
499
+ </div>
500
+
501
+ <!-- Product Card 4 -->
502
+ <div class="product-card bg-white rounded-lg overflow-hidden shadow-sm transition-all duration-300">
503
+ <div class="relative">
504
+ <img src="https://images.unsplash.com/photo-1600185365483-26d7a4cc7519?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1025&q=80"
505
+ alt="Perfume" class="w-full h-64 object-cover">
506
+ <div class="absolute top-2 right-2 bg-white rounded-full w-8 h-8 flex items-center justify-center shadow-md">
507
+ <i class="far fa-heart text-gray-400 hover:text-red-500 cursor-pointer"></i>
508
+ </div>
509
+ <div class="absolute bottom-2 left-2 bg-red-600 text-white text-xs px-2 py-1 rounded">
510
+ NEW
511
+ </div>
512
+ </div>
513
+ <div class="p-4">
514
+ <h3 class="text-sm font-medium text-gray-800 mb-1">Dior</h3>
515
+ <p class="text-xs text-gray-500 mb-2">Sauvage Eau de Parfum</p>
516
+ <div class="flex items-center mb-1">
517
+ <span class="text-sm font-bold text-gray-800">₹6,499</span>
518
+ <span class="text-xs text-gray-500 line-through ml-2">₹7,499</span>
519
+ <span class="text-xs text-green-600 font-medium ml-2">(13% OFF)</span>
520
+ </div>
521
+ <div class="flex items-center text-xs text-gray-500">
522
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
523
+ <span>4.9 | 987</span>
524
+ </div>
525
+ </div>
526
+ </div>
527
+
528
+ <!-- Product Card 5 -->
529
+ <div class="product-card bg-white rounded-lg overflow-hidden shadow-sm transition-all duration-300">
530
+ <div class="relative">
531
+ <img src="https://images.unsplash.com/photo-1616486338812-3dadae4b4ce1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1632&q=80"
532
+ alt="Smartwatch" class="w-full h-64 object-cover">
533
+ <div class="absolute top-2 right-2 bg-white rounded-full w-8 h-8 flex items-center justify-center shadow-md">
534
+ <i class="far fa-heart text-gray-400 hover:text-red-500 cursor-pointer"></i>
535
+ </div>
536
+ <div class="absolute bottom-2 left-2 bg-red-600 text-white text-xs px-2 py-1 rounded">
537
+ NEW
538
+ </div>
539
+ </div>
540
+ <div class="p-4">
541
+ <h3 class="text-sm font-medium text-gray-800 mb-1">Apple</h3>
542
+ <p class="text-xs text-gray-500 mb-2">Apple Watch Series 8</p>
543
+ <div class="flex items-center mb-1">
544
+ <span class="text-sm font-bold text-gray-800">₹41,999</span>
545
+ <span class="text-xs text-gray-500 line-through ml-2">₹45,999</span>
546
+ <span class="text-xs text-green-600 font-medium ml-2">(9% OFF)</span>
547
+ </div>
548
+ <div class="flex items-center text-xs text-gray-500">
549
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
550
+ <span>4.7 | 1.2k</span>
551
+ </div>
552
+ </div>
553
+ </div>
554
+ </div>
555
+ </div>
556
+
557
+ <!-- Banner -->
558
+ <div class="mb-10">
559
+ <div class="bg-gradient-to-r from-indigo-500 to-purple-600 rounded-xl p-8 text-white">
560
+ <div class="flex flex-col md:flex-row items-center">
561
+ <div class="md:w-1/2 mb-6 md:mb-0">
562
+ <h2 class="text-2xl md:text-3xl font-bold mb-4">Summer Sale is Live!</h2>
563
+ <p class="text-lg mb-6">Up to 60% off on selected items. Limited time offer.</p>
564
+ <button class="bg-white text-indigo-600 px-6 py-2 rounded-full font-medium hover:bg-gray-100 transition-colors">
565
+ Shop Now
566
+ </button>
567
+ </div>
568
+ <div class="md:w-1/2 flex justify-center">
569
+ <img src="https://images.unsplash.com/photo-1556905055-8f358a7a47b2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
570
+ alt="Summer Sale" class="h-48 md:h-64 rounded-lg object-cover shadow-lg">
571
+ </div>
572
+ </div>
573
+ </div>
574
+ </div>
575
+
576
+ <!-- Trending Styles -->
577
+ <div class="mb-10">
578
+ <h2 class="text-2xl font-bold mb-6">Trending Styles</h2>
579
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
580
+ <div class="relative rounded-xl overflow-hidden h-48">
581
+ <img src="https://images.unsplash.com/photo-1539533018447-63fcdfd7f3c2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
582
+ alt="Casual Wear" class="w-full h-full object-cover">
583
+ <div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center">
584
+ <span class="text-white font-bold text-lg">Casual Wear</span>
585
+ </div>
586
+ </div>
587
+ <div class="relative rounded-xl overflow-hidden h-48">
588
+ <img src="https://images.unsplash.com/photo-1551232864-3f0890e580d9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80"
589
+ alt="Handbags" class="w-full h-full object-cover">
590
+ <div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center">
591
+ <span class="text-white font-bold text-lg">Handbags</span>
592
+ </div>
593
+ </div>
594
+ <div class="relative rounded-xl overflow-hidden h-48">
595
+ <img src="https://images.unsplash.com/photo-1525507119028-ed4c629a60a3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
596
+ alt="Backpacks" class="w-full h-full object-cover">
597
+ <div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center">
598
+ <span class="text-white font-bold text-lg">Backpacks</span>
599
+ </div>
600
+ </div>
601
+ <div class="relative rounded-xl overflow-hidden h-48">
602
+ <img src="https://images.unsplash.com/photo-1523170335258-f5ed11844a49?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=880&q=80"
603
+ alt="Sunglasses" class="w-full h-full object-cover">
604
+ <div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center">
605
+ <span class="text-white font-bold text-lg">Sunglasses</span>
606
+ </div>
607
+ </div>
608
+ </div>
609
+ </div>
610
+ </main>
611
+
612
+ <!-- Footer -->
613
+ <footer class="bg-gray-900 text-white pt-12 pb-6">
614
+ <div class="container mx-auto px-4">
615
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
616
+ <div>
617
+ <h3 class="text-lg font-bold mb-4">ONLINE SHOPPING</h3>
618
+ <ul class="space-y-2">
619
+ <li><a href="#" class="text-gray-400 hover:text-white">Men</a></li>
620
+ <li><a href="#" class="text-gray-400 hover:text-white">Women</a></li>
621
+ <li><a href="#" class="text-gray-400 hover:text-white">Kids</a></li>
622
+ <li><a href="#" class="text-gray-400 hover:text-white">Home & Living</a></li>
623
+ <li><a href="#" class="text-gray-400 hover:text-white">Beauty</a></li>
624
+ <li><a href="#" class="text-gray-400 hover:text-white">Gift Cards</a></li>
625
+ </ul>
626
+ </div>
627
+ <div>
628
+ <h3 class="text-lg font-bold mb-4">CUSTOMER POLICIES</h3>
629
+ <ul class="space-y-2">
630
+ <li><a href="#" class="text-gray-400 hover:text-white">Contact Us</a></li>
631
+ <li><a href="#" class="text-gray-400 hover:text-white">FAQ</a></li>
632
+ <li><a href="#" class="text-gray-400 hover:text-white">T&C</a></li>
633
+ <li><a href="#" class="text-gray-400 hover:text-white">Shipping</a></li>
634
+ <li><a href="#" class="text-gray-400 hover:text-white">Cancellation</a></li>
635
+ <li><a href="#" class="text-gray-400 hover:text-white">Returns</a></li>
636
+ </ul>
637
+ </div>
638
+ <div>
639
+ <h3 class="text-lg font-bold mb-4">STYLO</h3>
640
+ <ul class="space-y-2">
641
+ <li><a href="#" class="text-gray-400 hover:text-white">About Us</a></li>
642
+ <li><a href="#" class="text-gray-400 hover:text-white">Careers</a></li>
643
+ <li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li>
644
+ <li><a href="#" class="text-gray-400 hover:text-white">Press</a></li>
645
+ <li><a href="#" class="text-gray-400 hover:text-white">Corporate</a></li>
646
+ </ul>
647
+ </div>
648
+ <div>
649
+ <h3 class="text-lg font-bold mb-4">EXPERIENCE STYLO APP</h3>
650
+ <div class="flex space-x-4 mb-4">
651
+ <a href="#">
652
+ <img src="https://www.freepnglogos.com/uploads/app-store-logo-png/google-play-and-app-store-apple-google-play-store-and-apple-app-store-5.png"
653
+ alt="Download on App Store" class="h-12">
654
+ </a>
655
+ </div>
656
+ <h3 class="text-lg font-bold mb-2">CONNECT WITH US</h3>
657
+ <div class="flex space-x-4">
658
+ <a href="#" class="text-gray-400 hover:text-white">
659
+ <i class="fab fa-facebook-f text-xl"></i>
660
+ </a>
661
+ <a href="#" class="text-gray-400 hover:text-white">
662
+ <i class="fab fa-twitter text-xl"></i>
663
+ </a>
664
+ <a href="#" class="text-gray-400 hover:text-white">
665
+ <i class="fab fa-instagram text-xl"></i>
666
+ </a>
667
+ <a href="#" class="text-gray-400 hover:text-white">
668
+ <i class="fab fa-youtube text-xl"></i>
669
+ </a>
670
+ </div>
671
+ </div>
672
+ </div>
673
+ <div class="border-t border-gray-800 pt-6">
674
+ <div class="flex flex-col md:flex-row justify-between items-center">
675
+ <div class="mb-4 md:mb-0">
676
+ <p class="text-gray-400 text-sm">
677
+ © 2023 www.stylo.com. All rights reserved.
678
+ </p>
679
+ </div>
680
+ <div class="flex space-x-6">
681
+ <a href="#" class="text-gray-400 hover:text-white text-sm">Privacy Policy</a>
682
+ <a href="#" class="text-gray-400 hover:text-white text-sm">Terms of Use</a>
683
+ <a href="#" class="text-gray-400 hover:text-white text-sm">Payment Policy</a>
684
+ </div>
685
+ </div>
686
+ </div>
687
+ </div>
688
+ </footer>
689
+
690
+ <!-- Mobile Bottom Navigation -->
691
+ <div class="md:hidden fixed bottom-0 left-0 right-0 bg-white shadow-lg border-t">
692
+ <div class="flex justify-around py-3">
693
+ <a href="#" class="flex flex-col items-center text-indigo-600">
694
+ <i class="fas fa-home text-xl"></i>
695
+ <span class="text-xs mt-1">Home</span>
696
+ </a>
697
+ <a href="#" class="flex flex-col items-center text-gray-600">
698
+ <i class="fas fa-search text-xl"></i>
699
+ <span class="text-xs mt-1">Search</span>
700
+ </a>
701
+ <a href="#" class="flex flex-col items-center text-gray-600">
702
+ <i class="far fa-heart text-xl"></i>
703
+ <span class="text-xs mt-1">Wishlist</span>
704
+ </a>
705
+ <a href="#" class="flex flex-col items-center text-gray-600">
706
+ <i class="fas fa-shopping-bag text-xl"></i>
707
+ <span class="text-xs mt-1">Bag</span>
708
+ </a>
709
+ <a href="#" class="flex flex-col items-center text-gray-600">
710
+ <i class="far fa-user text-xl"></i>
711
+ <span class="text-xs mt-1">Account</span>
712
+ </a>
713
+ </div>
714
+ </div>
715
+
716
+ <script>
717
+ // Simple carousel functionality
718
+ document.addEventListener('DOMContentLoaded', function() {
719
+ const carousel = document.querySelector('.carousel');
720
+ const items = document.querySelectorAll('.carousel-item');
721
+ const dots = document.querySelectorAll('.absolute.bottom-4 button');
722
+ let currentIndex = 0;
723
+
724
+ function updateCarousel() {
725
+ const itemWidth = items[0].clientWidth;
726
+ carousel.scrollTo({
727
+ left: currentIndex * itemWidth,
728
+ behavior: 'smooth'
729
+ });
730
+
731
+ // Update dots
732
+ dots.forEach((dot, index) => {
733
+ if(index === currentIndex) {
734
+ dot.classList.remove('opacity-50');
735
+ dot.classList.add('opacity-100');
736
+ } else {
737
+ dot.classList.add('opacity-50');
738
+ dot.classList.remove('opacity-100');
739
+ }
740
+ });
741
+ }
742
+
743
+ // Auto slide
744
+ setInterval(() => {
745
+ currentIndex = (currentIndex + 1) % items.length;
746
+ updateCarousel();
747
+ }, 3000);
748
+
749
+ // Dot navigation
750
+ dots.forEach((dot, index) => {
751
+ dot.addEventListener('click', () => {
752
+ currentIndex = index;
753
+ updateCarousel();
754
+ });
755
+ });
756
+
757
+ // Initialize first dot
758
+ dots[0].classList.remove('opacity-50');
759
+ dots[0].classList.add('opacity-100');
760
+ });
761
+ </script>
762
+ <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=mickey1994/stylo-com" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
763
+ </html>