Hugging Face's logo

Spaces:
SanaBytes
/
boujeebox
Running

App Files Community
SanaBytes commited on
Commit
aded351
·
verified ·
1 Parent(s): e520690

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +992 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Boujeebox
3
- emoji: 📉
4
- colorFrom: red
5
- colorTo: indigo
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: boujeebox
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,992 @@
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>BoujeeBox | Trendy Fashion & Beauty</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
+ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Montserrat', sans-serif;
14
+ background-color: #faf9f6;
15
+ }
16
+
17
+ .title-font {
18
+ font-family: 'Playfair Display', serif;
19
+ }
20
+
21
+ .gradient-bg {
22
+ background: linear-gradient(135deg, #f5d9ff 0%, #fff4e6 100%);
23
+ }
24
+
25
+ .product-card:hover {
26
+ transform: translateY(-5px);
27
+ box-shadow: 0 10px 25px rgba(0,0,0,0.1);
28
+ }
29
+
30
+ .product-card {
31
+ transition: all 0.3s ease;
32
+ }
33
+
34
+ .cart-badge {
35
+ position: absolute;
36
+ top: -8px;
37
+ right: -8px;
38
+ background-color: #e86a92;
39
+ color: white;
40
+ border-radius: 50%;
41
+ width: 20px;
42
+ height: 20px;
43
+ display: flex;
44
+ align-items: center;
45
+ justify-content: center;
46
+ font-size: 12px;
47
+ }
48
+
49
+ /* Custom scrollbar */
50
+ ::-webkit-scrollbar {
51
+ width: 8px;
52
+ }
53
+
54
+ ::-webkit-scrollbar-track {
55
+ background: #f1f1f1;
56
+ }
57
+
58
+ ::-webkit-scrollbar-thumb {
59
+ background: #d8b4fe;
60
+ border-radius: 10px;
61
+ }
62
+
63
+ ::-webkit-scrollbar-thumb:hover {
64
+ background: #c084fc;
65
+ }
66
+
67
+ /* Animation for product cards */
68
+ @keyframes fadeIn {
69
+ from { opacity: 0; transform: translateY(20px); }
70
+ to { opacity: 1; transform: translateY(0); }
71
+ }
72
+
73
+ .animate-fade-in {
74
+ animation: fadeIn 0.5s ease-out forwards;
75
+ }
76
+
77
+ .delay-100 {
78
+ animation-delay: 0.1s;
79
+ }
80
+
81
+ .delay-200 {
82
+ animation-delay: 0.2s;
83
+ }
84
+
85
+ .delay-300 {
86
+ animation-delay: 0.3s;
87
+ }
88
+ </style>
89
+ </head>
90
+ <body class="bg-[#faf9f6]">
91
+ <!-- Navigation -->
92
+ <nav class="bg-white shadow-sm sticky top-0 z-50">
93
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
94
+ <div class="flex justify-between h-16">
95
+ <div class="flex items-center">
96
+ <a href="#" class="flex-shrink-0 flex items-center">
97
+ <span class="title-font text-2xl font-bold text-pink-500">Boujee<span class="text-purple-400">Box</span></span>
98
+ </a>
99
+ <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
100
+ <a href="#" class="border-pink-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Home</a>
101
+ <a href="#shop" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Shop</a>
102
+ <a href="#collections" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Collections</a>
103
+ <a href="#about" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">About</a>
104
+ </div>
105
+ </div>
106
+ <div class="hidden sm:ml-6 sm:flex sm:items-center space-x-4">
107
+ <div class="relative">
108
+ <input type="text" placeholder="Search..." class="bg-gray-100 rounded-full py-1 px-4 pl-10 text-sm focus:outline-none focus:ring-2 focus:ring-pink-300 w-64">
109
+ <i class="fas fa-search absolute left-3 top-2 text-gray-400"></i>
110
+ </div>
111
+ <button class="p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none">
112
+ <i class="far fa-heart text-xl"></i>
113
+ </button>
114
+ <div class="relative">
115
+ <button class="p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none" id="cart-btn">
116
+ <i class="fas fa-shopping-bag text-xl"></i>
117
+ <span class="cart-badge hidden">0</span>
118
+ </button>
119
+ </div>
120
+ <button class="bg-gradient-to-r from-pink-400 to-purple-400 text-white px-4 py-1 rounded-full text-sm font-medium hover:opacity-90 transition">Sign In</button>
121
+ </div>
122
+ <div class="-mr-2 flex items-center sm:hidden">
123
+ <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-pink-500" id="mobile-menu-button">
124
+ <i class="fas fa-bars text-xl"></i>
125
+ </button>
126
+ </div>
127
+ </div>
128
+ </div>
129
+
130
+ <!-- Mobile menu -->
131
+ <div class="hidden sm:hidden bg-white shadow-lg" id="mobile-menu">
132
+ <div class="pt-2 pb-3 space-y-1 px-4">
133
+ <a href="#" class="bg-pink-50 border-pink-500 text-pink-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Home</a>
134
+ <a href="#shop" class="border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Shop</a>
135
+ <a href="#collections" class="border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Collections</a>
136
+ <a href="#about" class="border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">About</a>
137
+ <div class="pt-4 pb-3 border-t border-gray-200">
138
+ <div class="flex items-center px-4 space-x-3">
139
+ <div class="relative flex-1">
140
+ <input type="text" placeholder="Search..." class="bg-gray-100 rounded-full py-1 px-4 pl-10 text-sm focus:outline-none focus:ring-2 focus:ring-pink-300 w-full">
141
+ <i class="fas fa-search absolute left-3 top-2 text-gray-400"></i>
142
+ </div>
143
+ <button class="p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none">
144
+ <i class="far fa-heart text-xl"></i>
145
+ </button>
146
+ <div class="relative">
147
+ <button class="p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none">
148
+ <i class="fas fa-shopping-bag text-xl"></i>
149
+ <span class="cart-badge hidden">0</span>
150
+ </button>
151
+ </div>
152
+ </div>
153
+ <div class="mt-3 space-y-1 px-4">
154
+ <button class="w-full bg-gradient-to-r from-pink-400 to-purple-400 text-white px-4 py-2 rounded-full text-sm font-medium hover:opacity-90 transition">Sign In</button>
155
+ </div>
156
+ </div>
157
+ </div>
158
+ </div>
159
+ </nav>
160
+
161
+ <!-- Hero Section -->
162
+ <section class="gradient-bg">
163
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 md:py-24">
164
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
165
+ <div class="text-center md:text-left">
166
+ <h1 class="title-font text-4xl md:text-5xl lg:text-6xl font-bold text-gray-800 mb-6">Elevate Your Everyday</h1>
167
+ <p class="text-lg text-gray-600 mb-8 max-w-lg">Curated collections of the most boujee fashion, beauty & lifestyle essentials for the modern trendsetter.</p>
168
+ <div class="flex flex-col sm:flex-row gap-4 justify-center md:justify-start">
169
+ <a href="#shop" class="bg-pink-500 hover:bg-pink-600 text-white px-8 py-3 rounded-full font-medium transition duration-300 shadow-lg hover:shadow-xl">Shop Now</a>
170
+ <a href="#collections" class="bg-white hover:bg-gray-50 text-gray-800 px-8 py-3 rounded-full font-medium transition duration-300 shadow-lg hover:shadow-xl">Explore Collections</a>
171
+ </div>
172
+ </div>
173
+ <div class="relative">
174
+ <img src="https://images.unsplash.com/photo-1551232864-3f0890e580d9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1287&q=80" alt="BoujeeBox Products" class="rounded-2xl shadow-2xl w-full h-auto max-h-[500px] object-cover">
175
+ <div class="absolute -bottom-6 -right-6 bg-white p-4 rounded-2xl shadow-lg hidden md:block">
176
+ <div class="flex items-center">
177
+ <div class="bg-pink-100 p-3 rounded-full mr-3">
178
+ <i class="fas fa-star text-pink-500"></i>
179
+ </div>
180
+ <div>
181
+ <p class="font-bold text-gray-800">4.9/5 Stars</p>
182
+ <p class="text-sm text-gray-500">From 2K+ Reviews</p>
183
+ </div>
184
+ </div>
185
+ </div>
186
+ </div>
187
+ </div>
188
+ </div>
189
+ </section>
190
+
191
+ <!-- Categories Section -->
192
+ <section class="py-16 bg-white" id="collections">
193
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
194
+ <div class="text-center mb-12">
195
+ <h2 class="title-font text-3xl font-bold text-gray-800 mb-4">Our Collections</h2>
196
+ <p class="text-gray-500 max-w-2xl mx-auto">Discover your perfect aesthetic with our carefully curated categories</p>
197
+ </div>
198
+
199
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
200
+ <a href="#" class="category-card group relative overflow-hidden rounded-2xl shadow-md h-48 md:h-64">
201
+ <img src="https://images.unsplash.com/photo-1551232864-3f0890e580d9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1287&q=80" alt="Fashion" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
202
+ <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end p-6">
203
+ <h3 class="text-white font-bold text-xl">Fashion</h3>
204
+ </div>
205
+ </a>
206
+
207
+ <a href="#" class="category-card group relative overflow-hidden rounded-2xl shadow-md h-48 md:h-64">
208
+ <img src="https://images.unsplash.com/photo-1596462502278-27bfdc403348?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Beauty" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
209
+ <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end p-6">
210
+ <h3 class="text-white font-bold text-xl">Beauty</h3>
211
+ </div>
212
+ </a>
213
+
214
+ <a href="#" class="category-card group relative overflow-hidden rounded-2xl shadow-md h-48 md:h-64">
215
+ <img src="https://images.unsplash.com/photo-1556228453-efd6c1ff04f6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Lifestyle" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
216
+ <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end p-6">
217
+ <h3 class="text-white font-bold text-xl">Lifestyle</h3>
218
+ </div>
219
+ </a>
220
+
221
+ <a href="#" class="category-card group relative overflow-hidden rounded-2xl shadow-md h-48 md:h-64">
222
+ <img src="https://images.unsplash.com/photo-1560343090-f0409e92791a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1128&q=80" alt="Accessories" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
223
+ <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end p-6">
224
+ <h3 class="text-white font-bold text-xl">Accessories</h3>
225
+ </div>
226
+ </a>
227
+ </div>
228
+ </div>
229
+ </section>
230
+
231
+ <!-- Featured Products -->
232
+ <section class="py-16 bg-[#faf9f6]" id="shop">
233
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
234
+ <div class="flex flex-col md:flex-row justify-between items-center mb-12">
235
+ <div>
236
+ <h2 class="title-font text-3xl font-bold text-gray-800 mb-2">Trending Now</h2>
237
+ <p class="text-gray-500">What's hot in the boujee community</p>
238
+ </div>
239
+ <div class="mt-4 md:mt-0">
240
+ <div class="flex space-x-2">
241
+ <button class="px-4 py-2 bg-white rounded-full text-sm font-medium shadow-sm">All</button>
242
+ <button class="px-4 py-2 bg-white rounded-full text-sm font-medium shadow-sm">Fashion</button>
243
+ <button class="px-4 py-2 bg-white rounded-full text-sm font-medium shadow-sm">Beauty</button>
244
+ <button class="px-4 py-2 bg-white rounded-full text-sm font-medium shadow-sm">Lifestyle</button>
245
+ </div>
246
+ </div>
247
+ </div>
248
+
249
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
250
+ <!-- Product 1 -->
251
+ <div class="product-card bg-white rounded-xl overflow-hidden shadow-md animate-fade-in">
252
+ <div class="relative">
253
+ <img src="https://images.unsplash.com/photo-1591047139829-d91aecb6caea?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=736&q=80" alt="Silk Scrunchie Set" class="w-full h-64 object-cover">
254
+ <button class="absolute top-3 right-3 bg-white p-2 rounded-full shadow-md text-gray-400 hover:text-pink-500">
255
+ <i class="far fa-heart"></i>
256
+ </button>
257
+ <span class="absolute top-3 left-3 bg-pink-500 text-white text-xs font-bold px-2 py-1 rounded-full">BESTSELLER</span>
258
+ </div>
259
+ <div class="p-4">
260
+ <div class="flex justify-between items-start">
261
+ <div>
262
+ <h3 class="font-bold text-gray-800">Silk Scrunchie Set</h3>
263
+ <p class="text-gray-500 text-sm">3-piece set</p>
264
+ </div>
265
+ <span class="font-bold text-pink-500">$24.99</span>
266
+ </div>
267
+ <div class="mt-3 flex justify-between items-center">
268
+ <div class="flex text-yellow-400 text-sm">
269
+ <i class="fas fa-star"></i>
270
+ <i class="fas fa-star"></i>
271
+ <i class="fas fa-star"></i>
272
+ <i class="fas fa-star"></i>
273
+ <i class="fas fa-star-half-alt"></i>
274
+ <span class="text-gray-400 ml-1">(128)</span>
275
+ </div>
276
+ <button class="add-to-cart bg-pink-100 text-pink-600 p-2 rounded-full hover:bg-pink-200 transition">
277
+ <i class="fas fa-shopping-bag"></i>
278
+ </button>
279
+ </div>
280
+ </div>
281
+ </div>
282
+
283
+ <!-- Product 2 -->
284
+ <div class="product-card bg-white rounded-xl overflow-hidden shadow-md animate-fade-in delay-100">
285
+ <div class="relative">
286
+ <img src="https://images.unsplash.com/photo-1616486338812-3dadae4b4ace?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1632&q=80" alt="Glossy Lip Oil" class="w-full h-64 object-cover">
287
+ <button class="absolute top-3 right-3 bg-white p-2 rounded-full shadow-md text-gray-400 hover:text-pink-500">
288
+ <i class="far fa-heart"></i>
289
+ </button>
290
+ </div>
291
+ <div class="p-4">
292
+ <div class="flex justify-between items-start">
293
+ <div>
294
+ <h3 class="font-bold text-gray-800">Glossy Lip Oil</h3>
295
+ <p class="text-gray-500 text-sm">4 shades</p>
296
+ </div>
297
+ <span class="font-bold text-pink-500">$18.99</span>
298
+ </div>
299
+ <div class="mt-3 flex justify-between items-center">
300
+ <div class="flex text-yellow-400 text-sm">
301
+ <i class="fas fa-star"></i>
302
+ <i class="fas fa-star"></i>
303
+ <i class="fas fa-star"></i>
304
+ <i class="fas fa-star"></i>
305
+ <i class="far fa-star"></i>
306
+ <span class="text-gray-400 ml-1">(96)</span>
307
+ </div>
308
+ <button class="add-to-cart bg-pink-100 text-pink-600 p-2 rounded-full hover:bg-pink-200 transition">
309
+ <i class="fas fa-shopping-bag"></i>
310
+ </button>
311
+ </div>
312
+ </div>
313
+ </div>
314
+
315
+ <!-- Product 3 -->
316
+ <div class="product-card bg-white rounded-xl overflow-hidden shadow-md animate-fade-in delay-200">
317
+ <div class="relative">
318
+ <img src="https://images.unsplash.com/photo-1594035910387-fea47794261f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=880&q=80" alt="Velvet Hair Clips" class="w-full h-64 object-cover">
319
+ <button class="absolute top-3 right-3 bg-white p-2 rounded-full shadow-md text-gray-400 hover:text-pink-500">
320
+ <i class="far fa-heart"></i>
321
+ </button>
322
+ <span class="absolute top-3 left-3 bg-purple-500 text-white text-xs font-bold px-2 py-1 rounded-full">NEW</span>
323
+ </div>
324
+ <div class="p-4">
325
+ <div class="flex justify-between items-start">
326
+ <div>
327
+ <h3 class="font-bold text-gray-800">Velvet Hair Clips</h3>
328
+ <p class="text-gray-500 text-sm">Set of 5</p>
329
+ </div>
330
+ <span class="font-bold text-pink-500">$22.99</span>
331
+ </div>
332
+ <div class="mt-3 flex justify-between items-center">
333
+ <div class="flex text-yellow-400 text-sm">
334
+ <i class="fas fa-star"></i>
335
+ <i class="fas fa-star"></i>
336
+ <i class="fas fa-star"></i>
337
+ <i class="fas fa-star"></i>
338
+ <i class="fas fa-star"></i>
339
+ <span class="text-gray-400 ml-1">(204)</span>
340
+ </div>
341
+ <button class="add-to-cart bg-pink-100 text-pink-600 p-2 rounded-full hover:bg-pink-200 transition">
342
+ <i class="fas fa-shopping-bag"></i>
343
+ </button>
344
+ </div>
345
+ </div>
346
+ </div>
347
+
348
+ <!-- Product 4 -->
349
+ <div class="product-card bg-white rounded-xl overflow-hidden shadow-md animate-fade-in delay-300">
350
+ <div class="relative">
351
+ <img src="https://images.unsplash.com/photo-1616486338812-3dadae4b4ace?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1632&q=80" alt="Satin Sleep Mask" class="w-full h-64 object-cover">
352
+ <button class="absolute top-3 right-3 bg-white p-2 rounded-full shadow-md text-gray-400 hover:text-pink-500">
353
+ <i class="far fa-heart"></i>
354
+ </button>
355
+ </div>
356
+ <div class="p-4">
357
+ <div class="flex justify-between items-start">
358
+ <div>
359
+ <h3 class="font-bold text-gray-800">Satin Sleep Mask</h3>
360
+ <p class="text-gray-500 text-sm">3 colors</p>
361
+ </div>
362
+ <span class="font-bold text-pink-500">$19.99</span>
363
+ </div>
364
+ <div class="mt-3 flex justify-between items-center">
365
+ <div class="flex text-yellow-400 text-sm">
366
+ <i class="fas fa-star"></i>
367
+ <i class="fas fa-star"></i>
368
+ <i class="fas fa-star"></i>
369
+ <i class="fas fa-star"></i>
370
+ <i class="fas fa-star-half-alt"></i>
371
+ <span class="text-gray-400 ml-1">(176)</span>
372
+ </div>
373
+ <button class="add-to-cart bg-pink-100 text-pink-600 p-2 rounded-full hover:bg-pink-200 transition">
374
+ <i class="fas fa-shopping-bag"></i>
375
+ </button>
376
+ </div>
377
+ </div>
378
+ </div>
379
+ </div>
380
+
381
+ <div class="mt-12 text-center">
382
+ <a href="#" class="inline-block px-8 py-3 bg-white text-pink-500 rounded-full font-medium shadow-md hover:shadow-lg transition">View All Products</a>
383
+ </div>
384
+ </div>
385
+ </section>
386
+
387
+ <!-- Testimonials -->
388
+ <section class="py-16 bg-white">
389
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
390
+ <div class="text-center mb-12">
391
+ <h2 class="title-font text-3xl font-bold text-gray-800 mb-4">Boujee Babes Love Us</h2>
392
+ <p class="text-gray-500 max-w-2xl mx-auto">Don't just take our word for it - hear what our community has to say</p>
393
+ </div>
394
+
395
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
396
+ <div class="bg-pink-50 rounded-2xl p-6 shadow-sm">
397
+ <div class="flex items-center mb-4">
398
+ <div class="flex text-yellow-400 mr-2">
399
+ <i class="fas fa-star"></i>
400
+ <i class="fas fa-star"></i>
401
+ <i class="fas fa-star"></i>
402
+ <i class="fas fa-star"></i>
403
+ <i class="fas fa-star"></i>
404
+ </div>
405
+ <span class="text-sm text-gray-500">2 days ago</span>
406
+ </div>
407
+ <p class="text-gray-700 mb-4">"The silk scrunchies are absolutely worth the hype! My hair has never looked better and they're so gentle."</p>
408
+ <div class="flex items-center">
409
+ <img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Sophia" class="w-10 h-10 rounded-full mr-3">
410
+ <div>
411
+ <h4 class="font-bold text-gray-800">Sophia R.</h4>
412
+ <p class="text-sm text-gray-500">Verified Buyer</p>
413
+ </div>
414
+ </div>
415
+ </div>
416
+
417
+ <div class="bg-pink-50 rounded-2xl p-6 shadow-sm">
418
+ <div class="flex items-center mb-4">
419
+ <div class="flex text-yellow-400 mr-2">
420
+ <i class="fas fa-star"></i>
421
+ <i class="fas fa-star"></i>
422
+ <i class="fas fa-star"></i>
423
+ <i class="fas fa-star"></i>
424
+ <i class="fas fa-star"></i>
425
+ </div>
426
+ <span class="text-sm text-gray-500">1 week ago</span>
427
+ </div>
428
+ <p class="text-gray-700 mb-4">"I'm obsessed with the lip oils! Perfect amount of shine without being sticky. Will definitely repurchase."</p>
429
+ <div class="flex items-center">
430
+ <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Emma" class="w-10 h-10 rounded-full mr-3">
431
+ <div>
432
+ <h4 class="font-bold text-gray-800">Emma L.</h4>
433
+ <p class="text-sm text-gray-500">Verified Buyer</p>
434
+ </div>
435
+ </div>
436
+ </div>
437
+
438
+ <div class="bg-pink-50 rounded-2xl p-6 shadow-sm">
439
+ <div class="flex items-center mb-4">
440
+ <div class="flex text-yellow-400 mr-2">
441
+ <i class="fas fa-star"></i>
442
+ <i class="fas fa-star"></i>
443
+ <i class="fas fa-star"></i>
444
+ <i class="fas fa-star"></i>
445
+ <i class="fas fa-star-half-alt"></i>
446
+ </div>
447
+ <span class="text-sm text-gray-500">3 weeks ago</span>
448
+ </div>
449
+ <p class="text-gray-700 mb-4">"The sleep mask is a game changer! Super soft and actually stays on all night. Love the lavender color."</p>
450
+ <div class="flex items-center">
451
+ <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Olivia" class="w-10 h-10 rounded-full mr-3">
452
+ <div>
453
+ <h4 class="font-bold text-gray-800">Olivia M.</h4>
454
+ <p class="text-sm text-gray-500">Verified Buyer</p>
455
+ </div>
456
+ </div>
457
+ </div>
458
+ </div>
459
+ </div>
460
+ </section>
461
+
462
+ <!-- Newsletter -->
463
+ <section class="py-16 gradient-bg">
464
+ <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
465
+ <h2 class="title-font text-3xl font-bold text-gray-800 mb-4">Join the Boujee Club</h2>
466
+ <p class="text-gray-600 mb-8 max-w-2xl mx-auto">Subscribe to get exclusive offers, early access to new drops, and 10% off your first order.</p>
467
+
468
+ <div class="flex flex-col sm:flex-row gap-4 justify-center max-w-md mx-auto">
469
+ <input type="email" placeholder="Your email address" class="flex-grow px-4 py-3 rounded-full focus:outline-none focus:ring-2 focus:ring-pink-300">
470
+ <button class="bg-pink-500 hover:bg-pink-600 text-white px-6 py-3 rounded-full font-medium transition duration-300 shadow-lg hover:shadow-xl">Subscribe</button>
471
+ </div>
472
+
473
+ <p class="text-xs text-gray-500 mt-4">We respect your privacy. Unsubscribe at any time.</p>
474
+ </div>
475
+ </section>
476
+
477
+ <!-- About Section -->
478
+ <section class="py-16 bg-white" id="about">
479
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
480
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
481
+ <div>
482
+ <h2 class="title-font text-3xl font-bold text-gray-800 mb-6">Our Story</h2>
483
+ <p class="text-gray-600 mb-4">BoujeeBox was born from a simple idea: that luxury should be accessible, fun, and unapologetically extra. Founded in 2022 by two best friends who were tired of compromising between quality and aesthetics, we set out to create a brand that celebrates self-expression through beautifully designed everyday essentials.</p>
484
+ <p class="text-gray-600 mb-6">Every product in our collection is carefully curated and designed with intention, blending functionality with that Instagram-worthy aesthetic we all crave.</p>
485
+ <a href="#" class="inline-block px-6 py-2 border-2 border-pink-400 text-pink-500 rounded-full font-medium hover:bg-pink-50 transition">Learn More</a>
486
+ </div>
487
+ <div class="grid grid-cols-2 gap-4">
488
+ <img src="https://images.unsplash.com/photo-1522335789203-aabd1fc54bc9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80" alt="Our Team" class="rounded-xl h-64 w-full object-cover shadow-md">
489
+ <img src="https://images.unsplash.com/photo-1556228578-8c6dacdc6a6c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80" alt="Our Products" class="rounded-xl h-64 w-full object-cover shadow-md mt-8">
490
+ </div>
491
+ </div>
492
+ </div>
493
+ </section>
494
+
495
+ <!-- Instagram Feed -->
496
+ <section class="py-16 bg-[#faf9f6]">
497
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
498
+ <div class="text-center mb-12">
499
+ <h2 class="title-font text-3xl font-bold text-gray-800 mb-4">#BoujeeBox</h2>
500
+ <p class="text-gray-500 max-w-2xl mx-auto">Tag us for a chance to be featured!</p>
501
+ </div>
502
+
503
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
504
+ <a href="#" class="group relative overflow-hidden rounded-xl h-48 md:h-64">
505
+ <img src="https://images.unsplash.com/photo-1616486338812-3dadae4b4ace?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1632&q=80" alt="Instagram Post" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
506
+ <div class="absolute inset-0 bg-black/20 flex items-center justify-center opacity-0 group-hover:opacity-100 transition">
507
+ <i class="fab fa-instagram text-white text-2xl"></i>
508
+ </div>
509
+ </a>
510
+
511
+ <a href="#" class="group relative overflow-hidden rounded-xl h-48 md:h-64">
512
+ <img src="https://images.unsplash.com/photo-1591047139829-d91aecb6caea?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=736&q=80" alt="Instagram Post" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
513
+ <div class="absolute inset-0 bg-black/20 flex items-center justify-center opacity-0 group-hover:opacity-100 transition">
514
+ <i class="fab fa-instagram text-white text-2xl"></i>
515
+ </div>
516
+ </a>
517
+
518
+ <a href="#" class="group relative overflow-hidden rounded-xl h-48 md:h-64">
519
+ <img src="https://images.unsplash.com/photo-1594035910387-fea47794261f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=880&q=80" alt="Instagram Post" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
520
+ <div class="absolute inset-0 bg-black/20 flex items-center justify-center opacity-0 group-hover:opacity-100 transition">
521
+ <i class="fab fa-instagram text-white text-2xl"></i>
522
+ </div>
523
+ </a>
524
+
525
+ <a href="#" class="group relative overflow-hidden rounded-xl h-48 md:h-64">
526
+ <img src="https://images.unsplash.com/photo-1556228453-efd6c1ff04f6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Instagram Post" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
527
+ <div class="absolute inset-0 bg-black/20 flex items-center justify-center opacity-0 group-hover:opacity-100 transition">
528
+ <i class="fab fa-instagram text-white text-2xl"></i>
529
+ </div>
530
+ </a>
531
+ </div>
532
+ </div>
533
+ </section>
534
+
535
+ <!-- Footer -->
536
+ <footer class="bg-gray-900 text-white pt-16 pb-8">
537
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
538
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-12">
539
+ <div>
540
+ <h3 class="title-font text-2xl font-bold text-pink-400 mb-4">Boujee<span class="text-purple-300">Box</span></h3>
541
+ <p class="text-gray-300 mb-4">Elevating your everyday with curated luxury essentials.</p>
542
+ <div class="flex space-x-4">
543
+ <a href="#" class="text-gray-300 hover:text-pink-400"><i class="fab fa-instagram text-xl"></i></a>
544
+ <a href="#" class="text-gray-300 hover:text-pink-400"><i class="fab fa-tiktok text-xl"></i></a>
545
+ <a href="#" class="text-gray-300 hover:text-pink-400"><i class="fab fa-pinterest text-xl"></i></a>
546
+ <a href="#" class="text-gray-300 hover:text-pink-400"><i class="fab fa-twitter text-xl"></i></a>
547
+ </div>
548
+ </div>
549
+
550
+ <div>
551
+ <h4 class="font-bold text-lg mb-4">Shop</h4>
552
+ <ul class="space-y-2">
553
+ <li><a href="#" class="text-gray-300 hover:text-pink-400">All Products</a></li>
554
+ <li><a href="#" class="text-gray-300 hover:text-pink-400">New Arrivals</a></li>
555
+ <li><a href="#" class="text-gray-300 hover:text-pink-400">Bestsellers</a></li>
556
+ <li><a href="#" class="text-gray-300 hover:text-pink-400">Sale</a></li>
557
+ <li><a href="#" class="text-gray-300 hover:text-pink-400">Gift Cards</a></li>
558
+ </ul>
559
+ </div>
560
+
561
+ <div>
562
+ <h4 class="font-bold text-lg mb-4">Help</h4>
563
+ <ul class="space-y-2">
564
+ <li><a href="#" class="text-gray-300 hover:text-pink-400">FAQs</a></li>
565
+ <li><a href="#" class="text-gray-300 hover:text-pink-400">Shipping & Returns</a></li>
566
+ <li><a href="#" class="text-gray-300 hover:text-pink-400">Track Order</a></li>
567
+ <li><a href="#" class="text-gray-300 hover:text-pink-400">Contact Us</a></li>
568
+ <li><a href="#" class="text-gray-300 hover:text-pink-400">Privacy Policy</a></li>
569
+ </ul>
570
+ </div>
571
+
572
+ <div>
573
+ <h4 class="font-bold text-lg mb-4">Contact</h4>
574
+ <ul class="space-y-2">
575
+ <li class="flex items-center">
576
+ <i class="fas fa-map-marker-alt text-pink-400 mr-2"></i>
577
+ <span class="text-gray-300">123 Boujee Ave, Suite 456<br>Los Angeles, CA 90069</span>
578
+ </li>
579
+ <li class="flex items-center">
580
+ <i class="fas fa-envelope text-pink-400 mr-2"></i>
581
+ <span class="text-gray-300">[email protected]</span>
582
+ </li>
583
+ <li class="flex items-center">
584
+ <i class="fas fa-phone-alt text-pink-400 mr-2"></i>
585
+ <span class="text-gray-300">(555) 123-4567</span>
586
+ </li>
587
+ </ul>
588
+ </div>
589
+ </div>
590
+
591
+ <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
592
+ <p class="text-gray-400 text-sm mb-4 md:mb-0">© 2023 BoujeeBox. All rights reserved.</p>
593
+ <div class="flex space-x-6">
594
+ <img src="https://cdn-icons-png.flaticon.com/512/196/196578.png" alt="Visa" class="h-8">
595
+ <img src="https://cdn-icons-png.flaticon.com/512/196/196561.png" alt="Mastercard" class="h-8">
596
+ <img src="https://cdn-icons-png.flaticon.com/512/196/196566.png" alt="American Express" class="h-8">
597
+ <img src="https://cdn-icons-png.flaticon.com/512/196/196554.png" alt="PayPal" class="h-8">
598
+ </div>
599
+ </div>
600
+ </div>
601
+ </footer>
602
+
603
+ <!-- Shopping Cart Sidebar -->
604
+ <div class="fixed inset-0 z-50 overflow-hidden hidden" id="cart-sidebar">
605
+ <div class="absolute inset-0 overflow-hidden">
606
+ <div class="absolute inset-0 bg-gray-500 bg-opacity-75 transition-opacity" id="cart-overlay"></div>
607
+ <div class="fixed inset-y-0 right-0 pl-10 max-w-full flex">
608
+ <div class="w-screen max-w-md">
609
+ <div class="h-full flex flex-col bg-white shadow-xl overflow-y-scroll">
610
+ <div class="flex-1 py-6 overflow-y-auto px-4 sm:px-6">
611
+ <div class="flex items-start justify-between">
612
+ <h2 class="title-font text-lg font-medium text-gray-900">Shopping cart</h2>
613
+ <div class="ml-3 h-7 flex items-center">
614
+ <button type="button" class="-m-2 p-2 text-gray-400 hover:text-gray-500" id="close-cart">
615
+ <span class="sr-only">Close panel</span>
616
+ <i class="fas fa-times"></i>
617
+ </button>
618
+ </div>
619
+ </div>
620
+
621
+ <div class="mt-8">
622
+ <div class="flow-root">
623
+ <ul role="list" class="-my-6 divide-y divide-gray-200" id="cart-items">
624
+ <!-- Cart items will be added here dynamically -->
625
+ <li class="py-6 flex text-center">
626
+ <p class="text-gray-500">Your cart is empty</p>
627
+ </li>
628
+ </ul>
629
+ </div>
630
+ </div>
631
+ </div>
632
+
633
+ <div class="border-t border-gray-200 py-6 px-4 sm:px-6">
634
+ <div class="flex justify-between text-base font-medium text-gray-900 mb-4">
635
+ <p>Subtotal</p>
636
+ <p id="cart-total">$0.00</p>
637
+ </div>
638
+ <p class="mt-0.5 text-sm text-gray-500 mb-6">Shipping and taxes calculated at checkout.</p>
639
+ <button class="w-full bg-gradient-to-r from-pink-400 to-purple-400 text-white px-6 py-3 rounded-full font-medium transition duration-300 shadow-lg hover:shadow-xl">Checkout</button>
640
+ <div class="mt-6 flex justify-center text-sm text-center text-gray-500">
641
+ <p>
642
+ or
643
+ <button type="button" class="text-pink-500 font-medium hover:text-pink-400 ml-1" id="continue-shopping">Continue Shopping</button>
644
+ </p>
645
+ </div>
646
+ </div>
647
+ </div>
648
+ </div>
649
+ </div>
650
+ </div>
651
+ </div>
652
+
653
+ <!-- Login Modal -->
654
+ <div class="fixed z-50 inset-0 overflow-y-auto hidden" id="login-modal">
655
+ <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
656
+ <div class="fixed inset-0 transition-opacity" aria-hidden="true">
657
+ <div class="absolute inset-0 bg-gray-500 opacity-75" id="login-overlay"></div>
658
+ </div>
659
+ <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
660
+ <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
661
+ <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
662
+ <div class="sm:flex sm:items-start">
663
+ <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
664
+ <div class="flex justify-between items-center mb-6">
665
+ <h3 class="title-font text-2xl leading-6 font-bold text-gray-900" id="modal-title">Welcome Back</h3>
666
+ <button type="button" class="text-gray-400 hover:text-gray-500" id="close-login">
667
+ <i class="fas fa-times"></i>
668
+ </button>
669
+ </div>
670
+ <div class="mt-2">
671
+ <form class="space-y-6">
672
+ <div>
673
+ <label for="email" class="block text-sm font-medium text-gray-700">Email address</label>
674
+ <div class="mt-1">
675
+ <input id="email" name="email" type="email" autocomplete="email" required class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-pink-500 focus:border-pink-500 sm:text-sm">
676
+ </div>
677
+ </div>
678
+
679
+ <div>
680
+ <label for="password" class="block text-sm font-medium text-gray-700">Password</label>
681
+ <div class="mt-1">
682
+ <input id="password" name="password" type="password" autocomplete="current-password" required class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-pink-500 focus:border-pink-500 sm:text-sm">
683
+ </div>
684
+ </div>
685
+
686
+ <div class="flex items-center justify-between">
687
+ <div class="flex items-center">
688
+ <input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-pink-500 focus:ring-pink-500 border-gray-300 rounded">
689
+ <label for="remember-me" class="ml-2 block text-sm text-gray-900">Remember me</label>
690
+ </div>
691
+
692
+ <div class="text-sm">
693
+ <a href="#" class="font-medium text-pink-500 hover:text-pink-400">Forgot your password?</a>
694
+ </div>
695
+ </div>
696
+
697
+ <div>
698
+ <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-pink-500 hover:bg-pink-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500">Sign in</button>
699
+ </div>
700
+ </form>
701
+ <div class="mt-6">
702
+ <div class="relative">
703
+ <div class="absolute inset-0 flex items-center">
704
+ <div class="w-full border-t border-gray-300"></div>
705
+ </div>
706
+ <div class="relative flex justify-center text-sm">
707
+ <span class="px-2 bg-white text-gray-500">Or continue with</span>
708
+ </div>
709
+ </div>
710
+
711
+ <div class="mt-6 grid grid-cols-2 gap-3">
712
+ <div>
713
+ <a href="#" class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
714
+ <i class="fab fa-google text-pink-500"></i>
715
+ </a>
716
+ </div>
717
+
718
+ <div>
719
+ <a href="#" class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
720
+ <i class="fab fa-apple"></i>
721
+ </a>
722
+ </div>
723
+ </div>
724
+ </div>
725
+ <div class="mt-6 text-center">
726
+ <p class="text-sm text-gray-500">
727
+ Don't have an account?
728
+ <a href="#" class="font-medium text-pink-500 hover:text-pink-400">Sign up</a>
729
+ </p>
730
+ </div>
731
+ </div>
732
+ </div>
733
+ </div>
734
+ </div>
735
+ </div>
736
+ </div>
737
+ </div>
738
+
739
+ <script>
740
+ // Mobile menu toggle
741
+ const mobileMenuButton = document.getElementById('mobile-menu-button');
742
+ const mobileMenu = document.getElementById('mobile-menu');
743
+
744
+ mobileMenuButton.addEventListener('click', () => {
745
+ const isHidden = mobileMenu.classList.contains('hidden');
746
+ if (isHidden) {
747
+ mobileMenu.classList.remove('hidden');
748
+ } else {
749
+ mobileMenu.classList.add('hidden');
750
+ }
751
+ });
752
+
753
+ // Cart functionality
754
+ const cartButton = document.getElementById('cart-btn');
755
+ const cartSidebar = document.getElementById('cart-sidebar');
756
+ const cartOverlay = document.getElementById('cart-overlay');
757
+ const closeCart = document.getElementById('close-cart');
758
+ const continueShopping = document.getElementById('continue-shopping');
759
+ const cartItemsContainer = document.getElementById('cart-items');
760
+ const cartTotal = document.getElementById('cart-total');
761
+ const cartBadge = document.querySelector('.cart-badge');
762
+ const addToCartButtons = document.querySelectorAll('.add-to-cart');
763
+
764
+ // Sample products data
765
+ const products = [
766
+ {
767
+ id: 1,
768
+ name: 'Silk Scrunchie Set',
769
+ description: '3-piece set',
770
+ price: 24.99,
771
+ image: 'https://images.unsplash.com/photo-1591047139829-d91aecb6caea?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=736&q=80',
772
+ quantity: 1
773
+ },
774
+ {
775
+ id: 2,
776
+ name: 'Glossy Lip Oil',
777
+ description: '4 shades',
778
+ price: 18.99,
779
+ image: 'https://images.unsplash.com/photo-1616486338812-3dadae4b4ace?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1632&q=80',
780
+ quantity: 1
781
+ },
782
+ {
783
+ id: 3,
784
+ name: 'Velvet Hair Clips',
785
+ description: 'Set of 5',
786
+ price: 22.99,
787
+ image: 'https://images.unsplash.com/photo-1594035910387-fea47794261f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=880&q=80',
788
+ quantity: 1
789
+ },
790
+ {
791
+ id: 4,
792
+ name: 'Satin Sleep Mask',
793
+ description: '3 colors',
794
+ price: 19.99,
795
+ image: 'https://images.unsplash.com/photo-1556228453-efd6c1ff04f6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80',
796
+ quantity: 1
797
+ }
798
+ ];
799
+
800
+ let cart = [];
801
+
802
+ // Toggle cart sidebar
803
+ function toggleCart() {
804
+ const isHidden = cartSidebar.classList.contains('hidden');
805
+ if (isHidden) {
806
+ cartSidebar.classList.remove('hidden');
807
+ renderCartItems();
808
+ } else {
809
+ cartSidebar.classList.add('hidden');
810
+ }
811
+ }
812
+
813
+ cartButton.addEventListener('click', toggleCart);
814
+ cartOverlay.addEventListener('click', toggleCart);
815
+ closeCart.addEventListener('click', toggleCart);
816
+ continueShopping.addEventListener('click', toggleCart);
817
+
818
+ // Add to cart functionality
819
+ addToCartButtons.forEach((button, index) => {
820
+ button.addEventListener('click', () => {
821
+ const product = products[index];
822
+ const existingItem = cart.find(item => item.id === product.id);
823
+
824
+ if (existingItem) {
825
+ existingItem.quantity += 1;
826
+ } else {
827
+ cart.push({...product});
828
+ }
829
+
830
+ updateCartBadge();
831
+ showAddedToCartToast(product.name);
832
+ });
833
+ });
834
+
835
+ // Update cart badge
836
+ function updateCartBadge() {
837
+ const totalItems = cart.reduce((total, item) => total + item.quantity, 0);
838
+
839
+ if (totalItems > 0) {
840
+ cartBadge.textContent = totalItems;
841
+ cartBadge.classList.remove('hidden');
842
+ } else {
843
+ cartBadge.classList.add('hidden');
844
+ }
845
+ }
846
+
847
+ // Render cart items
848
+ function renderCartItems() {
849
+ if (cart.length === 0) {
850
+ cartItemsContainer.innerHTML = '<li class="py-6 flex text-center"><p class="text-gray-500">Your cart is empty</p></li>';
851
+ cartTotal.textContent = '$0.00';
852
+ return;
853
+ }
854
+
855
+ cartItemsContainer.innerHTML = '';
856
+
857
+ cart.forEach(item => {
858
+ const cartItem = document.createElement('li');
859
+ cartItem.className = 'py-6 flex';
860
+ cartItem.innerHTML = `
861
+ <div class="flex-shrink-0 w-24 h-24 border border-gray-200 rounded-md overflow-hidden">
862
+ <img src="${item.image}" alt="${item.name}" class="w-full h-full object-center object-cover">
863
+ </div>
864
+ <div class="ml-4 flex-1 flex flex-col">
865
+ <div>
866
+ <div class="flex justify-between text-base font-medium text-gray-900">
867
+ <h3>${item.name}</h3>
868
+ <p class="ml-4">$${(item.price * item.quantity).toFixed(2)}</p>
869
+ </div>
870
+ <p class="mt-1 text-sm text-gray-500">${item.description}</p>
871
+ </div>
872
+ <div class="flex-1 flex items-end justify-between text-sm">
873
+ <div class="flex items-center border border-gray-300 rounded-md">
874
+ <button class="quantity-decrease px-2 py-1" data-id="${item.id}">-</button>
875
+ <span class="px-2">${item.quantity}</span>
876
+ <button class="quantity-increase px-2 py-1" data-id="${item.id}">+</button>
877
+ </div>
878
+ <button type="button" class="font-medium text-pink-500 hover:text-pink-400 remove-item" data-id="${item.id}">Remove</button>
879
+ </div>
880
+ </div>
881
+ `;
882
+
883
+ cartItemsContainer.appendChild(cartItem);
884
+ });
885
+
886
+ // Calculate total
887
+ const total = cart.reduce((sum, item) => sum + (item.price * item.quantity), 0);
888
+ cartTotal.textContent = `$${total.toFixed(2)}`;
889
+
890
+ // Add event listeners to quantity buttons
891
+ document.querySelectorAll('.quantity-increase').forEach(button => {
892
+ button.addEventListener('click', (e) => {
893
+ const id = parseInt(e.target.getAttribute('data-id'));
894
+ const item = cart.find(item => item.id === id);
895
+ if (item) {
896
+ item.quantity += 1;
897
+ renderCartItems();
898
+ updateCartBadge();
899
+ }
900
+ });
901
+ });
902
+
903
+ document.querySelectorAll('.quantity-decrease').forEach(button => {
904
+ button.addEventListener('click', (e) => {
905
+ const id = parseInt(e.target.getAttribute('data-id'));
906
+ const item = cart.find(item => item.id === id);
907
+ if (item && item.quantity > 1) {
908
+ item.quantity -= 1;
909
+ renderCartItems();
910
+ updateCartBadge();
911
+ }
912
+ });
913
+ });
914
+
915
+ document.querySelectorAll('.remove-item').forEach(button => {
916
+ button.addEventListener('click', (e) => {
917
+ const id = parseInt(e.target.getAttribute('data-id'));
918
+ cart = cart.filter(item => item.id !== id);
919
+ renderCartItems();
920
+ updateCartBadge();
921
+ });
922
+ });
923
+ }
924
+
925
+ // Show "added to cart" toast
926
+ function showAddedToCartToast(productName) {
927
+ const toast = document.createElement('div');
928
+ toast.className = 'fixed bottom-4 right-4 bg-green-500 text-white px-4 py-2 rounded-md shadow-lg flex items-center';
929
+ toast.innerHTML = `
930
+ <i class="fas fa-check-circle mr-2"></i>
931
+ <span>${productName} added to cart!</span>
932
+ `;
933
+
934
+ document.body.appendChild(toast);
935
+
936
+ setTimeout(() => {
937
+ toast.classList.add('opacity-0', 'transition-opacity', 'duration-300');
938
+ setTimeout(() => {
939
+ toast.remove();
940
+ }, 300);
941
+ }, 2000);
942
+ }
943
+
944
+ // Login modal functionality
945
+ const loginButton = document.querySelector('nav button.bg-gradient-to-r');
946
+ const loginModal = document.getElementById('login-modal');
947
+ const loginOverlay = document.getElementById('login-overlay');
948
+ const closeLogin = document.getElementById('close-login');
949
+
950
+ if (loginButton) {
951
+ loginButton.addEventListener('click', (e) => {
952
+ e.preventDefault();
953
+ loginModal.classList.remove('hidden');
954
+ });
955
+ }
956
+
957
+ if (loginOverlay) {
958
+ loginOverlay.addEventListener('click', () => {
959
+ loginModal.classList.add('hidden');
960
+ });
961
+ }
962
+
963
+ if (closeLogin) {
964
+ closeLogin.addEventListener('click', () => {
965
+ loginModal.classList.add('hidden');
966
+ });
967
+ }
968
+
969
+ // Smooth scrolling for anchor links
970
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
971
+ anchor.addEventListener('click', function (e) {
972
+ e.preventDefault();
973
+
974
+ const targetId = this.getAttribute('href');
975
+ if (targetId === '#') return;
976
+
977
+ const targetElement = document.querySelector(targetId);
978
+ if (targetElement) {
979
+ targetElement.scrollIntoView({
980
+ behavior: 'smooth'
981
+ });
982
+
983
+ // Close mobile menu if open
984
+ if (!mobileMenu.classList.contains('hidden')) {
985
+ mobileMenu.classList.add('hidden');
986
+ }
987
+ }
988
+ });
989
+ });
990
+ </script>
991
+ <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=SanaBytes/boujeebox" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
992
+ </html>