Hugging Face's logo

Spaces:
aakinlalu
/
codestreet-ai
Running

App Files Community
aakinlalu commited on
Commit
561798c
·
verified ·
1 Parent(s): 7ffe26d

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +1002 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Codestreet Ai
3
- emoji: 💻
4
- colorFrom: blue
5
  colorTo: blue
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: codestreet-ai
3
+ emoji: 🐳
4
+ colorFrom: green
5
  colorTo: blue
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,1002 @@
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>PurpleCurves | Custom Women's Hats & Bead Necklaces</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=Playfair+Display:wght@400;500;600;700&family=Poppins:wght@300;400;500;600&display=swap');
11
+
12
+ body {
13
+ font-family: 'Poppins', sans-serif;
14
+ }
15
+
16
+ .heading-font {
17
+ font-family: 'Playfair Display', serif;
18
+ }
19
+
20
+ .product-card:hover .product-overlay {
21
+ opacity: 1;
22
+ transform: translateY(0);
23
+ }
24
+
25
+ .product-overlay {
26
+ transition: all 0.3s ease;
27
+ opacity: 0;
28
+ transform: translateY(10px);
29
+ }
30
+
31
+ .hero-pattern {
32
+ background-image: radial-gradient(rgba(255,255,255,0.2) 1px, transparent 1px);
33
+ background-size: 20px 20px;
34
+ }
35
+
36
+ .cart-count {
37
+ position: absolute;
38
+ top: -8px;
39
+ right: -8px;
40
+ background-color: #8a4fff;
41
+ color: white;
42
+ border-radius: 50%;
43
+ width: 20px;
44
+ height: 20px;
45
+ display: flex;
46
+ align-items: center;
47
+ justify-content: center;
48
+ font-size: 12px;
49
+ }
50
+
51
+ .dropdown:hover .dropdown-menu {
52
+ display: block;
53
+ }
54
+
55
+ .purple-gradient {
56
+ background: linear-gradient(135deg, #8a4fff 0%, #6e33ff 100%);
57
+ }
58
+
59
+ .swirl-pattern {
60
+ background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%238a4fff' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");
61
+ }
62
+
63
+ @keyframes float {
64
+ 0% { transform: translateY(0px); }
65
+ 50% { transform: translateY(-10px); }
66
+ 100% { transform: translateY(0px); }
67
+ }
68
+
69
+ .floating {
70
+ animation: float 6s ease-in-out infinite;
71
+ }
72
+
73
+ /* Customization modal styles */
74
+ .customization-modal {
75
+ display: none;
76
+ position: fixed;
77
+ top: 0;
78
+ left: 0;
79
+ width: 100%;
80
+ height: 100%;
81
+ background-color: rgba(0,0,0,0.7);
82
+ z-index: 1000;
83
+ overflow-y: auto;
84
+ }
85
+
86
+ .customization-content {
87
+ background-color: white;
88
+ margin: 5% auto;
89
+ padding: 30px;
90
+ width: 80%;
91
+ max-width: 800px;
92
+ border-radius: 10px;
93
+ box-shadow: 0 5px 15px rgba(0,0,0,0.3);
94
+ }
95
+
96
+ .option-group {
97
+ margin-bottom: 20px;
98
+ }
99
+
100
+ .option-title {
101
+ font-weight: 600;
102
+ margin-bottom: 10px;
103
+ color: #6b46c1;
104
+ }
105
+
106
+ .option-choices {
107
+ display: flex;
108
+ flex-wrap: wrap;
109
+ gap: 10px;
110
+ }
111
+
112
+ .option-choice {
113
+ border: 2px solid #ddd;
114
+ padding: 8px 15px;
115
+ border-radius: 20px;
116
+ cursor: pointer;
117
+ transition: all 0.3s;
118
+ }
119
+
120
+ .option-choice:hover, .option-choice.selected {
121
+ border-color: #8a4fff;
122
+ background-color: #f3f0ff;
123
+ }
124
+
125
+ .color-option {
126
+ width: 30px;
127
+ height: 30px;
128
+ border-radius: 50%;
129
+ cursor: pointer;
130
+ border: 2px solid transparent;
131
+ }
132
+
133
+ .color-option.selected {
134
+ border-color: #333;
135
+ transform: scale(1.1);
136
+ }
137
+
138
+ .preview-image {
139
+ max-width: 100%;
140
+ height: auto;
141
+ border-radius: 5px;
142
+ box-shadow: 0 2px 10px rgba(0,0,0,0.1);
143
+ }
144
+ </style>
145
+ </head>
146
+ <body class="bg-gray-50">
147
+ <!-- Header/Navigation -->
148
+ <header class="bg-white shadow-sm sticky top-0 z-50">
149
+ <div class="container mx-auto px-4 py-4 flex justify-between items-center">
150
+ <div class="flex items-center space-x-2">
151
+ <div class="w-8 h-8 rounded-full purple-gradient flex items-center justify-center">
152
+ <i class="fas fa-gem text-white text-sm"></i>
153
+ </div>
154
+ <h1 class="heading-font text-2xl font-bold text-gray-800">PurpleCurves</h1>
155
+ </div>
156
+
157
+ <nav class="hidden md:flex space-x-8">
158
+ <a href="#" class="text-gray-700 hover:text-purple-600 transition">Home</a>
159
+ <div class="dropdown relative">
160
+ <button class="text-gray-700 hover:text-purple-600 transition flex items-center">
161
+ Shop <i class="fas fa-chevron-down ml-1 text-xs"></i>
162
+ </button>
163
+ <div class="dropdown-menu absolute hidden bg-white shadow-lg rounded-md mt-2 py-2 w-48">
164
+ <a href="#necklaces" class="block px-4 py-2 hover:bg-purple-50 hover:text-purple-600">Bead Necklaces</a>
165
+ <a href="#hats" class="block px-4 py-2 hover:bg-purple-50 hover:text-purple-600">Women's Hats</a>
166
+ <a href="#custom" class="block px-4 py-2 hover:bg-purple-50 hover:text-purple-600">Custom Designs</a>
167
+ </div>
168
+ </div>
169
+ <a href="#" class="text-gray-700 hover:text-purple-600 transition">About</a>
170
+ <a href="#" class="text-gray-700 hover:text-purple-600 transition">Blog</a>
171
+ <a href="#" class="text-gray-700 hover:text-purple-600 transition">Contact</a>
172
+ </nav>
173
+
174
+ <div class="flex items-center space-x-6">
175
+ <div class="relative">
176
+ <i class="fas fa-search text-gray-600 hover:text-purple-600 cursor-pointer"></i>
177
+ </div>
178
+ <div class="relative">
179
+ <i class="fas fa-user text-gray-600 hover:text-purple-600 cursor-pointer"></i>
180
+ </div>
181
+ <div class="relative">
182
+ <i class="fas fa-shopping-bag text-gray-600 hover:text-purple-600 cursor-pointer" id="cart-icon"></i>
183
+ <span class="cart-count" id="cart-count">0</span>
184
+ </div>
185
+ <button class="md:hidden" id="mobile-menu-button">
186
+ <i class="fas fa-bars text-gray-600"></i>
187
+ </button>
188
+ </div>
189
+ </div>
190
+
191
+ <!-- Mobile Menu -->
192
+ <div class="md:hidden hidden bg-white shadow-lg py-4 px-4" id="mobile-menu">
193
+ <div class="flex flex-col space-y-4">
194
+ <a href="#" class="text-gray-700 hover:text-purple-600 transition">Home</a>
195
+ <a href="#necklaces" class="text-gray-700 hover:text-purple-600 transition">Bead Necklaces</a>
196
+ <a href="#hats" class="text-gray-700 hover:text-purple-600 transition">Women's Hats</a>
197
+ <a href="#custom" class="text-gray-700 hover:text-purple-600 transition">Custom Designs</a>
198
+ <a href="#" class="text-gray-700 hover:text-purple-600 transition">About</a>
199
+ <a href="#" class="text-gray-700 hover:text-purple-600 transition">Blog</a>
200
+ <a href="#" class="text-gray-700 hover:text-purple-600 transition">Contact</a>
201
+ </div>
202
+ </div>
203
+ </header>
204
+
205
+ <!-- Hero Section -->
206
+ <section class="swirl-pattern bg-gradient-to-r from-purple-50 to-purple-100 py-16 md:py-24">
207
+ <div class="container mx-auto px-4 flex flex-col md:flex-row items-center">
208
+ <div class="md:w-1/2 mb-10 md:mb-0">
209
+ <span class="inline-block purple-gradient text-white text-xs font-bold px-3 py-1 rounded-full mb-4">New Collection</span>
210
+ <h2 class="heading-font text-4xl md:text-5xl font-bold text-gray-800 mb-4">Custom Hats & Necklaces Made Just For You</h2>
211
+ <p class="text-gray-600 mb-8 text-lg">At PurpleCurves, we create unique, handcrafted accessories that reflect your personal style. Customize your perfect hat or necklace today!</p>
212
+ <div class="flex space-x-4">
213
+ <a href="#custom" class="purple-gradient hover:bg-purple-700 text-white px-6 py-3 rounded-md font-medium transition shadow-lg hover:shadow-purple-200">Design Yours</a>
214
+ <a href="#necklaces" class="border border-purple-600 text-purple-600 hover:bg-purple-50 px-6 py-3 rounded-md font-medium transition">Shop Now</a>
215
+ </div>
216
+ <div class="mt-8 flex items-center space-x-4">
217
+ <div class="flex -space-x-2">
218
+ <img src="https://randomuser.me/api/portraits/women/12.jpg" class="w-10 h-10 rounded-full border-2 border-white" alt="Customer">
219
+ <img src="https://randomuser.me/api/portraits/women/24.jpg" class="w-10 h-10 rounded-full border-2 border-white" alt="Customer">
220
+ <img src="https://randomuser.me/api/portraits/women/33.jpg" class="w-10 h-10 rounded-full border-2 border-white" alt="Customer">
221
+ </div>
222
+ <p class="text-sm text-gray-600"><span class="font-bold text-purple-600">1,200+</span> happy customers this month</p>
223
+ </div>
224
+ </div>
225
+ <div class="md:w-1/2 flex justify-center relative">
226
+ <div class="relative floating">
227
+ <img src="https://images.unsplash.com/photo-1599643478518-a784e5dc4c8f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Bead Necklace" class="rounded-lg shadow-xl w-full max-w-md h-auto">
228
+ <div class="absolute -bottom-6 -right-6 bg-white p-4 rounded-lg shadow-lg">
229
+ <p class="text-sm text-gray-600">Handcrafted with love</p>
230
+ </div>
231
+ </div>
232
+ <div class="absolute -bottom-10 left-0 bg-white p-4 rounded-lg shadow-lg hidden md:block">
233
+ <div class="flex items-center">
234
+ <div class="w-10 h-10 purple-gradient rounded-full flex items-center justify-center text-white mr-3">
235
+ <i class="fas fa-award"></i>
236
+ </div>
237
+ <div>
238
+ <p class="text-xs text-gray-500">Premium Quality</p>
239
+ <p class="text-sm font-medium">100% Satisfaction</p>
240
+ </div>
241
+ </div>
242
+ </div>
243
+ </div>
244
+ </div>
245
+ </section>
246
+
247
+ <!-- Custom Design Section -->
248
+ <section id="custom" class="py-16 bg-white">
249
+ <div class="container mx-auto px-4">
250
+ <div class="text-center mb-12">
251
+ <h2 class="heading-font text-3xl font-bold text-gray-800 mb-2">Create Your Custom Design</h2>
252
+ <p class="text-gray-600 max-w-2xl mx-auto">Personalize your perfect accessory with our easy customization tool</p>
253
+ </div>
254
+
255
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
256
+ <div>
257
+ <img src="https://images.unsplash.com/photo-1605100804763-247f67b3557e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Custom Design" class="rounded-lg shadow-lg w-full">
258
+ </div>
259
+ <div>
260
+ <h3 class="heading-font text-2xl font-bold text-gray-800 mb-4">Your Style, Your Way</h3>
261
+ <p class="text-gray-600 mb-6">At PurpleCurves, we believe your accessories should be as unique as you are. Our customization tool lets you:</p>
262
+ <ul class="space-y-3 mb-8">
263
+ <li class="flex items-start">
264
+ <div class="flex-shrink-0 h-6 w-6 text-purple-600">
265
+ <i class="fas fa-check-circle"></i>
266
+ </div>
267
+ <p class="ml-2 text-gray-600">Choose from dozens of colors and materials</p>
268
+ </li>
269
+ <li class="flex items-start">
270
+ <div class="flex-shrink-0 h-6 w-6 text-purple-600">
271
+ <i class="fas fa-check-circle"></i>
272
+ </div>
273
+ <p class="ml-2 text-gray-600">Add personalized engravings or charms</p>
274
+ </li>
275
+ <li class="flex items-start">
276
+ <div class="flex-shrink-0 h-6 w-6 text-purple-600">
277
+ <i class="fas fa-check-circle"></i>
278
+ </div>
279
+ <p class="ml-2 text-gray-600">Select the perfect size and fit</p>
280
+ </li>
281
+ <li class="flex items-start">
282
+ <div class="flex-shrink-0 h-6 w-6 text-purple-600">
283
+ <i class="fas fa-check-circle"></i>
284
+ </div>
285
+ <p class="ml-2 text-gray-600">See a preview before you buy</p>
286
+ </li>
287
+ </ul>
288
+ <button id="start-customizing" class="purple-gradient hover:bg-purple-700 text-white px-8 py-3 rounded-md font-medium transition shadow-lg hover:shadow-purple-200">Start Customizing</button>
289
+ </div>
290
+ </div>
291
+ </div>
292
+ </section>
293
+
294
+ <!-- Customization Modal -->
295
+ <div id="customization-modal" class="customization-modal">
296
+ <div class="customization-content">
297
+ <div class="flex justify-between items-center mb-6">
298
+ <h2 class="heading-font text-2xl font-bold text-gray-800">Design Your Custom Accessory</h2>
299
+ <button id="close-customization" class="text-gray-500 hover:text-gray-700">
300
+ <i class="fas fa-times text-xl"></i>
301
+ </button>
302
+ </div>
303
+
304
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
305
+ <div>
306
+ <div class="mb-8">
307
+ <h3 class="heading-font text-xl font-bold text-gray-800 mb-4">Choose Product Type</h3>
308
+ <div class="option-group">
309
+ <div class="option-choices">
310
+ <div class="option-choice selected" data-type="necklace">Necklace</div>
311
+ <div class="option-choice" data-type="hat">Hat</div>
312
+ </div>
313
+ </div>
314
+ </div>
315
+
316
+ <!-- Necklace Options -->
317
+ <div id="necklace-options">
318
+ <div class="option-group">
319
+ <div class="option-title">Necklace Style</div>
320
+ <div class="option-choices">
321
+ <div class="option-choice selected" data-style="choker">Choker</div>
322
+ <div class="option-choice" data-style="strand">Strand</div>
323
+ <div class="option-choice" data-style="layered">Layered</div>
324
+ <div class="option-choice" data-style="pendant">Pendant</div>
325
+ </div>
326
+ </div>
327
+
328
+ <div class="option-group">
329
+ <div class="option-title">Bead Material</div>
330
+ <div class="option-choices">
331
+ <div class="option-choice selected" data-material="amethyst">Amethyst</div>
332
+ <div class="option-choice" data-material="turquoise">Turquoise</div>
333
+ <div class="option-choice" data-material="pearl">Pearl</div>
334
+ <div class="option-choice" data-material="wood">Wood</div>
335
+ </div>
336
+ </div>
337
+
338
+ <div class="option-group">
339
+ <div class="option-title">Chain Material</div>
340
+ <div class="option-choices">
341
+ <div class="option-choice selected" data-chain="silver">Silver</div>
342
+ <div class="option-choice" data-chain="gold">Gold</div>
343
+ <div class="option-choice" data-chain="leather">Leather</div>
344
+ </div>
345
+ </div>
346
+
347
+ <div class="option-group">
348
+ <div class="option-title">Color Scheme</div>
349
+ <div class="option-choices">
350
+ <div class="color-option selected" style="background-color: #8a4fff;" data-color="#8a4fff"></div>
351
+ <div class="color-option" style="background-color: #6b46c1;" data-color="#6b46c1"></div>
352
+ <div class="color-option" style="background-color: #553c9a;" data-color="#553c9a"></div>
353
+ <div class="color-option" style="background-color: #9f7aea;" data-color="#9f7aea"></div>
354
+ <div class="color-option" style="background-color: #d6bcfa;" data-color="#d6bcfa"></div>
355
+ </div>
356
+ </div>
357
+
358
+ <div class="option-group">
359
+ <div class="option-title">Add Engraving</div>
360
+ <input type="text" id="engraving-text" placeholder="Enter text (max 15 characters)" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent">
361
+ </div>
362
+ </div>
363
+
364
+ <!-- Hat Options -->
365
+ <div id="hat-options" class="hidden">
366
+ <div class="option-group">
367
+ <div class="option-title">Hat Style</div>
368
+ <div class="option-choices">
369
+ <div class="option-choice selected" data-hatstyle="fedora">Fedora</div>
370
+ <div class="option-choice" data-hatstyle="floppy">Floppy</div>
371
+ <div class="option-choice" data-hatstyle="beret">Beret</div>
372
+ <div class="option-choice" data-hatstyle="bucket">Bucket</div>
373
+ </div>
374
+ </div>
375
+
376
+ <div class="option-group">
377
+ <div class="option-title">Material</div>
378
+ <div class="option-choices">
379
+ <div class="option-choice selected" data-hatmaterial="wool">Wool</div>
380
+ <div class="option-choice" data-hatmaterial="straw">Straw</div>
381
+ <div class="option-choice" data-hatmaterial="cotton">Cotton</div>
382
+ <div class="option-choice" data-hatmaterial="felt">Felt</div>
383
+ </div>
384
+ </div>
385
+
386
+ <div class="option-group">
387
+ <div class="option-title">Color</div>
388
+ <div class="option-choices">
389
+ <div class="color-option selected" style="background-color: #8a4fff;" data-hatcolor="#8a4fff"></div>
390
+ <div class="color-option" style="background-color: #6b46c1;" data-hatcolor="#6b46c1"></div>
391
+ <div class="color-option" style="background-color: #553c9a;" data-hatcolor="#553c9a"></div>
392
+ <div class="color-option" style="background-color: #9f7aea;" data-hatcolor="#9f7aea"></div>
393
+ <div class="color-option" style="background-color: #d6bcfa;" data-hatcolor="#d6bcfa"></div>
394
+ </div>
395
+ </div>
396
+
397
+ <div class="option-group">
398
+ <div class="option-title">Size</div>
399
+ <div class="option-choices">
400
+ <div class="option-choice selected" data-hatsize="S">Small</div>
401
+ <div class="option-choice" data-hatsize="M">Medium</div>
402
+ <div class="option-choice" data-hatsize="L">Large</div>
403
+ </div>
404
+ </div>
405
+
406
+ <div class="option-group">
407
+ <div class="option-title">Add Embellishment</div>
408
+ <select id="hat-embellishment" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent">
409
+ <option value="none">None</option>
410
+ <option value="feather">Feather</option>
411
+ <option value="ribbon">Ribbon</option>
412
+ <option value="brooch">Brooch</option>
413
+ <option value="beading">Beading</option>
414
+ </select>
415
+ </div>
416
+ </div>
417
+ </div>
418
+
419
+ <div>
420
+ <div class="mb-6">
421
+ <h3 class="heading-font text-xl font-bold text-gray-800 mb-4">Your Design Preview</h3>
422
+ <div class="bg-gray-100 rounded-lg p-4 flex items-center justify-center" style="min-height: 300px;">
423
+ <img id="design-preview" src="https://images.unsplash.com/photo-1605100804763-247f67b3557e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" class="preview-image max-h-64">
424
+ </div>
425
+ </div>
426
+
427
+ <div class="mb-6">
428
+ <h3 class="heading-font text-xl font-bold text-gray-800 mb-2">Design Summary</h3>
429
+ <div id="design-summary" class="bg-purple-50 rounded-lg p-4">
430
+ <p class="text-gray-700">Custom Beaded Necklace</p>
431
+ <p class="text-gray-600 text-sm">Choker style with amethyst beads on silver chain</p>
432
+ </div>
433
+ </div>
434
+
435
+ <div class="flex justify-between items-center mb-4">
436
+ <span class="font-bold text-gray-800 text-lg">Total:</span>
437
+ <span id="custom-price" class="font-bold text-purple-600 text-xl">$89.99</span>
438
+ </div>
439
+
440
+ <button id="add-to-cart-custom" class="w-full purple-gradient hover:bg-purple-700 text-white px-6 py-3 rounded-md font-medium transition shadow-lg hover:shadow-purple-200">Add to Cart</button>
441
+ </div>
442
+ </div>
443
+ </div>
444
+ </div>
445
+
446
+ <!-- Bead Necklaces Section -->
447
+ <section id="necklaces" class="py-16 bg-purple-50">
448
+ <div class="container mx-auto px-4">
449
+ <div class="text-center mb-12">
450
+ <h2 class="heading-font text-3xl font-bold text-gray-800 mb-2">Bead Necklaces</h2>
451
+ <p class="text-gray-600 max-w-2xl mx-auto">Each necklace is a unique work of art, crafted with precision and passion</p>
452
+ </div>
453
+
454
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
455
+ <!-- Product 1 -->
456
+ <div class="product-card bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition duration-300 relative">
457
+ <div class="relative overflow-hidden">
458
+ <img src="https://images.unsplash.com/photo-1603974370799-71a0cec81d52?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Amethyst Bead Necklace" class="w-full h-80 object-cover">
459
+ <div class="product-overlay absolute inset-0 bg-black/20 flex items-center justify-center">
460
+ <button class="bg-white text-purple-600 px-6 py-2 rounded-full font-medium hover:bg-purple-600 hover:text-white transition quick-view" data-id="1">Quick View</button>
461
+ </div>
462
+ <div class="absolute top-4 right-4 bg-purple-600 text-white text-xs font-bold px-2 py-1 rounded-full">BESTSELLER</div>
463
+ </div>
464
+ <div class="p-4">
465
+ <h3 class="font-medium text-gray-800 mb-1">Amethyst Elegance</h3>
466
+ <p class="text-gray-600 text-sm mb-2">Handcrafted amethyst bead necklace</p>
467
+ <div class="flex justify-between items-center">
468
+ <span class="font-bold text-gray-800">$89.99</span>
469
+ <button class="text-purple-600 hover:text-purple-700 add-to-cart" data-id="1">
470
+ <i class="fas fa-shopping-cart"></i>
471
+ </button>
472
+ </div>
473
+ </div>
474
+ </div>
475
+
476
+ <!-- Product 2 -->
477
+ <div class="product-card bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition duration-300 relative">
478
+ <div class="relative overflow-hidden">
479
+ <img src="https://images.unsplash.com/photo-1611591437281-460914d22819?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Turquoise Bead Necklace" class="w-full h-80 object-cover">
480
+ <div class="product-overlay absolute inset-0 bg-black/20 flex items-center justify-center">
481
+ <button class="bg-white text-purple-600 px-6 py-2 rounded-full font-medium hover:bg-purple-600 hover:text-white transition quick-view" data-id="2">Quick View</button>
482
+ </div>
483
+ <div class="absolute top-4 right-4 bg-purple-600 text-white text-xs font-bold px-2 py-1 rounded-full">NEW</div>
484
+ </div>
485
+ <div class="p-4">
486
+ <h3 class="font-medium text-gray-800 mb-1">Turquoise Dream</h3>
487
+ <p class="text-gray-600 text-sm mb-2">Statement turquoise bead necklace</p>
488
+ <div class="flex justify-between items-center">
489
+ <span class="font-bold text-gray-800">$79.99</span>
490
+ <button class="text-purple-600 hover:text-purple-700 add-to-cart" data-id="2">
491
+ <i class="fas fa-shopping-cart"></i>
492
+ </button>
493
+ </div>
494
+ </div>
495
+ </div>
496
+
497
+ <!-- Product 3 -->
498
+ <div class="product-card bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition duration-300 relative">
499
+ <div class="relative overflow-hidden">
500
+ <img src="https://images.unsplash.com/photo-1605100804763-247f67b3557e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Pearl Bead Necklace" class="w-full h-80 object-cover">
501
+ <div class="product-overlay absolute inset-0 bg-black/20 flex items-center justify-center">
502
+ <button class="bg-white text-purple-600 px-6 py-2 rounded-full font-medium hover:bg-purple-600 hover:text-white transition quick-view" data-id="3">Quick View</button>
503
+ </div>
504
+ <div class="absolute top-4 right-4 bg-red-500 text-white text-xs font-bold px-2 py-1 rounded-full">SALE</div>
505
+ </div>
506
+ <div class="p-4">
507
+ <h3 class="font-medium text-gray-800 mb-1">Lavender Pearl</h3>
508
+ <p class="text-gray-600 text-sm mb-2">Luxury freshwater pearl necklace</p>
509
+ <div class="flex justify-between items-center">
510
+ <div>
511
+ <span class="font-bold text-gray-800">$129.99</span>
512
+ <span class="text-sm text-red-500 line-through ml-2">$159.99</span>
513
+ </div>
514
+ <button class="text-purple-600 hover:text-purple-700 add-to-cart" data-id="3">
515
+ <i class="fas fa-shopping-cart"></i>
516
+ </button>
517
+ </div>
518
+ </div>
519
+ </div>
520
+
521
+ <!-- Product 4 -->
522
+ <div class="product-card bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition duration-300 relative">
523
+ <div class="relative overflow-hidden">
524
+ <img src="https://images.unsplash.com/photo-1602173574767-37ac01994b2a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Wooden Bead Necklace" class="w-full h-80 object-cover">
525
+ <div class="product-overlay absolute inset-0 bg-black/20 flex items-center justify-center">
526
+ <button class="bg-white text-purple-600 px-6 py-2 rounded-full font-medium hover:bg-purple-600 hover:text-white transition quick-view" data-id="4">Quick View</button>
527
+ </div>
528
+ <div class="absolute top-4 right-4 bg-green-500 text-white text-xs font-bold px-2 py-1 rounded-full">ECO</div>
529
+ </div>
530
+ <div class="p-4">
531
+ <h3 class="font-medium text-gray-800 mb-1">Violet Woodland</h3>
532
+ <p class="text-gray-600 text-sm mb-2">Eco-friendly wooden bead necklace</p>
533
+ <div class="flex justify-between items-center">
534
+ <span class="font-bold text-gray-800">$59.99</span>
535
+ <button class="text-purple-600 hover:text-purple-700 add-to-cart" data-id="4">
536
+ <i class="fas fa-shopping-cart"></i>
537
+ </button>
538
+ </div>
539
+ </div>
540
+ </div>
541
+ </div>
542
+
543
+ <div class="text-center mt-12">
544
+ <a href="#" class="inline-block border-2 border-purple-600 text-purple-600 hover:bg-purple-600 hover:text-white px-8 py-3 rounded-md font-medium transition">View All Necklaces</a>
545
+ </div>
546
+ </div>
547
+ </section>
548
+
549
+ <!-- Women's Hats Section -->
550
+ <section id="hats" class="py-16 bg-white">
551
+ <div class="container mx-auto px-4">
552
+ <div class="text-center mb-12">
553
+ <h2 class="heading-font text-3xl font-bold text-gray-800 mb-2">Women's Hats</h2>
554
+ <p class="text-gray-600 max-w-2xl mx-auto">Complete your look with our stylish collection of hats for every occasion</p>
555
+ </div>
556
+
557
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
558
+ <!-- Product 1 -->
559
+ <div class="product-card bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition duration-300 relative">
560
+ <div class="relative overflow-hidden">
561
+ <img src="https://images.unsplash.com/photo-1534215754734-18e55d13e346?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Wide Brim Floppy Hat" class="w-full h-80 object-cover">
562
+ <div class="product-overlay absolute inset-0 bg-black/20 flex items-center justify-center">
563
+ <button class="bg-white text-purple-600 px-6 py-2 rounded-full font-medium hover:bg-purple-600 hover:text-white transition quick-view" data-id="5">Quick View</button>
564
+ </div>
565
+ </div>
566
+ <div class="p-4">
567
+ <h3 class="font-medium text-gray-800 mb-1">Royal Brim</h3>
568
+ <p class="text-gray-600 text-sm mb-2">Wide brim floppy hat in purple</p>
569
+ <div class="flex justify-between items-center">
570
+ <span class="font-bold text-gray-800">$49.99</span>
571
+ <button class="text-purple-600 hover:text-purple-700 add-to-cart" data-id="5">
572
+ <i class="fas fa-shopping-cart"></i>
573
+ </button>
574
+ </div>
575
+ </div>
576
+ </div>
577
+
578
+ <!-- Product 2 -->
579
+ <div class="product-card bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition duration-300 relative">
580
+ <div class="relative overflow-hidden">
581
+ <img src="https://images.unsplash.com/photo-1528243170459-31a2b5465c4e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Fedora Hat" class="w-full h-80 object-cover">
582
+ <div class="product-overlay absolute inset-0 bg-black/20 flex items-center justify-center">
583
+ <button class="bg-white text-purple-600 px-6 py-2 rounded-full font-medium hover:bg-purple-600 hover:text-white transition quick-view" data-id="6">Quick View</button>
584
+ </div>
585
+ <div class="absolute top-4 right-4 bg-purple-600 text-white text-xs font-bold px-2 py-1 rounded-full">BESTSELLER</div>
586
+ </div>
587
+ <div class="p-4">
588
+ <h3 class="font-medium text-gray-800 mb-1">Violet Fedora</h3>
589
+ <p class="text-gray-600 text-sm mb-2">Classic fedora hat in deep purple</p>
590
+ <div class="flex justify-between items-center">
591
+ <span class="font-bold text-gray-800">$59.99</span>
592
+ <button class="text-purple-600 hover:text-purple-700 add-to-cart" data-id="6">
593
+ <i class="fas fa-shopping-cart"></i>
594
+ </button>
595
+ </div>
596
+ </div>
597
+ </div>
598
+
599
+ <!-- Product 3 -->
600
+ <div class="product-card bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition duration-300 relative">
601
+ <div class="relative overflow-hidden">
602
+ <img src="https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Beret Hat" class="w-full h-80 object-cover">
603
+ <div class="product-overlay absolute inset-0 bg-black/20 flex items-center justify-center">
604
+ <button class="bg-white text-purple-600 px-6 py-2 rounded-full font-medium hover:bg-purple-600 hover:text-white transition quick-view" data-id="7">Quick View</button>
605
+ </div>
606
+ </div>
607
+ <div class="p-4">
608
+ <h3 class="font-medium text-gray-800 mb-1">Lilac Beret</h3>
609
+ <p class="text-gray-600 text-sm mb-2">Wool beret hat in soft lilac</p>
610
+ <div class="flex justify-between items-center">
611
+ <span class="font-bold text-gray-800">$39.99</span>
612
+ <button class="text-purple-600 hover:text-purple-700 add-to-cart" data-id="7">
613
+ <i class="fas fa-shopping-cart"></i>
614
+ </button>
615
+ </div>
616
+ </div>
617
+ </div>
618
+
619
+ <!-- Product 4 -->
620
+ <div class="product-card bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition duration-300 relative">
621
+ <div class="relative overflow-hidden">
622
+ <img src="https://images.unsplash.com/photo-1554412933-514a83d2f3c8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Bucket Hat" class="w-full h-80 object-cover">
623
+ <div class="product-overlay absolute inset-0 bg-black/20 flex items-center justify-center">
624
+ <button class="bg-white text-purple-600 px-6 py-2 rounded-full font-medium hover:bg-purple-600 hover:text-white transition quick-view" data-id="8">Quick View</button>
625
+ </div>
626
+ <div class="absolute top-4 right-4 bg-green-500 text-white text-xs font-bold px-2 py-1 rounded-full">ECO</div>
627
+ </div>
628
+ <div class="p-4">
629
+ <h3 class="font-medium text-gray-800 mb-1">Plum Bucket</h3>
630
+ <p class="text-gray-600 text-sm mb-2">Recycled cotton bucket hat</p>
631
+ <div class="flex justify-between items-center">
632
+ <span class="font-bold text-gray-800">$44.99</span>
633
+ <button class="text-purple-600 hover:text-purple-700 add-to-cart" data-id="8">
634
+ <i class="fas fa-shopping-cart"></i>
635
+ </button>
636
+ </div>
637
+ </div>
638
+ </div>
639
+ </div>
640
+
641
+ <div class="text-center mt-12">
642
+ <a href="#" class="inline-block border-2 border-purple-600 text-purple-600 hover:bg-purple-600 hover:text-white px-8 py-3 rounded-md font-medium transition">View All Hats</a>
643
+ </div>
644
+ </div>
645
+ </section>
646
+
647
+ <!-- Quick View Modal -->
648
+ <div id="quick-view-modal" class="customization-modal">
649
+ <div class="customization-content">
650
+ <div class="flex justify-between items-center mb-6">
651
+ <h2 class="heading-font text-2xl font-bold text-gray-800" id="quick-view-title">Product Details</h2>
652
+ <button id="close-quick-view" class="text-gray-500 hover:text-gray-700">
653
+ <i class="fas fa-times text-xl"></i>
654
+ </button>
655
+ </div>
656
+
657
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
658
+ <div>
659
+ <img id="quick-view-image" src="https://images.unsplash.com/photo-1605100804763-247f67b3557e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" class="preview-image w-full rounded-lg">
660
+ </div>
661
+
662
+ <div>
663
+ <h3 class="heading-font text-xl font-bold text-gray-800 mb-2" id="quick-view-name">Product Name</h3>
664
+ <div class="flex items-center mb-4">
665
+ <div class="text-purple-500 text-sm mr-2">
666
+ <i class="fas fa-star"></i>
667
+ <i class="fas fa-star"></i>
668
+ <i class="fas fa-star"></i>
669
+ <i class="fas fa-star"></i>
670
+ <i class="fas fa-star-half-alt"></i>
671
+ </div>
672
+ <span class="text-gray-600 text-sm">(24 reviews)</span>
673
+ </div>
674
+
675
+ <p class="text-gray-800 font-bold text-xl mb-4" id="quick-view-price">$89.99</p>
676
+ <p class="text-gray-600 mb-6" id="quick-view-description">Product description goes here with all the details about materials, sizing, and care instructions.</p>
677
+
678
+ <div class="mb-6">
679
+ <div class="option-title">Color</div>
680
+ <div class="option-choices">
681
+ <div class="color-option selected" style="background-color: #8a4fff;"></div>
682
+ <div class="color-option" style="background-color: #6b46c1;"></div>
683
+ <div class="color-option" style="background-color: #553c9a;"></div>
684
+ </div>
685
+ </div>
686
+
687
+ <div class="mb-6">
688
+ <div class="option-title">Size</div>
689
+ <div class="option-choices">
690
+ <div class="option-choice selected">S</div>
691
+ <div class="option-choice">M</div>
692
+ <div class="option-choice">L</div>
693
+ </div>
694
+ </div>
695
+
696
+ <div class="flex items-center mb-6">
697
+ <div class="flex items-center border border-gray-300 rounded-md mr-4">
698
+ <button class="px-3 py-1 text-gray-600 hover:bg-gray-100">-</button>
699
+ <span class="px-3 py-1">1</span>
700
+ <button class="px-3 py-1 text-gray-600 hover:bg-gray-100">+</button>
701
+ </div>
702
+ <button id="add-to-cart-quick-view" class="flex-1 purple-gradient hover:bg-purple-700 text-white px-6 py-2 rounded-md font-medium transition shadow-lg hover:shadow-purple-200">Add to Cart</button>
703
+ </div>
704
+
705
+ <div class="border-t border-gray-200 pt-4">
706
+ <div class="flex items-start">
707
+ <div class="text-purple-600 mr-3 mt-1">
708
+ <i class="fas fa-truck"></i>
709
+ </div>
710
+ <div>
711
+ <p class="text-gray-800 font-medium">Free Shipping</p>
712
+ <p class="text-gray-600 text-sm">On all orders over $50 within the US</p>
713
+ </div>
714
+ </div>
715
+ </div>
716
+ </div>
717
+ </div>
718
+ </div>
719
+ </div>
720
+
721
+ <!-- Testimonials -->
722
+ <section class="py-16 bg-purple-100">
723
+ <div class="container mx-auto px-4">
724
+ <div class="text-center mb-12">
725
+ <h2 class="heading-font text-3xl font-bold text-gray-800 mb-2">What Our Customers Say</h2>
726
+ <p class="text-gray-600 max-w-2xl mx-auto">Join thousands of satisfied customers who love our products</p>
727
+ </div>
728
+
729
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
730
+ <div class="bg-white p-8 rounded-lg shadow-md">
731
+ <div class="flex items-center mb-4">
732
+ <div class="text-purple-500 text-xl mr-1">
733
+ <i class="fas fa-star"></i>
734
+ <i class="fas fa-star"></i>
735
+ <i class="fas fa-star"></i>
736
+ <i class="fas fa-star"></i>
737
+ <i class="fas fa-star"></i>
738
+ </div>
739
+ </div>
740
+ <p class="text-gray-600 mb-6">"The amethyst necklace is absolutely stunning! The craftsmanship is exceptional and it arrived beautifully packaged. I've received so many compliments."</p>
741
+ <div class="flex items-center">
742
+ <img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Sarah J." class="w-12 h-12 rounded-full mr-4">
743
+ <div>
744
+ <h4 class="font-medium text-gray-800">Sarah J.</h4>
745
+ <p class="text-gray-500 text-sm">Verified Customer</p>
746
+ </div>
747
+ </div>
748
+ </div>
749
+
750
+ <div class="bg-white p-8 rounded-lg shadow-md">
751
+ <div class="flex items-center mb-4">
752
+ <div class="text-purple-500 text-xl mr-1">
753
+ <i class="fas fa-star"></i>
754
+ <i class="fas fa-star"></i>
755
+ <i class="fas fa-star"></i>
756
+ <i class="fas fa-star"></i>
757
+ <i class="fas fa-star"></i>
758
+ </div>
759
+ </div>
760
+ <p class="text-gray-600 mb-6">"I bought the Violet Fedora for my vacation and it was perfect! Great quality, comfortable to wear, and provided excellent sun protection."</p>
761
+ <div class="flex items-center">
762
+ <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Michelle T." class="w-12 h-12 rounded-full mr-4">
763
+ <div>
764
+ <h4 class="font-medium text-gray-800">Michelle T.</h4>
765
+ <p class="text-gray-500 text-sm">Verified Customer</p>
766
+ </div>
767
+ </div>
768
+ </div>
769
+
770
+ <div class="bg-white p-8 rounded-lg shadow-md">
771
+ <div class="flex items-center mb-4">
772
+ <div class="text-purple-500 text-xl mr-1">
773
+ <i class="fas fa-star"></i>
774
+ <i class="fas fa-star"></i>
775
+ <i class="fas fa-star"></i>
776
+ <i class="fas fa-star"></i>
777
+ <i class="fas fa-star-half-alt"></i>
778
+ </div>
779
+ </div>
780
+ <p class="text-gray-600 mb-6">"The Lavender Pearl necklace is my new favorite accessory. It elevates every outfit and the quality is outstanding. Will definitely be purchasing more items!"</p>
781
+ <div class="flex items-center">
782
+ <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Emily R." class="w-12 h-12 rounded-full mr-4">
783
+ <div>
784
+ <h4 class="font-medium text-gray-800">Emily R.</h4>
785
+ <p class="text-gray-500 text-sm">Verified Customer</p>
786
+ </div>
787
+ </div>
788
+ </div>
789
+ </div>
790
+ </div>
791
+ </section>
792
+
793
+ <!-- Value Propositions -->
794
+ <section class="py-16 bg-white">
795
+ <div class="container mx-auto px-4">
796
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
797
+ <div class="text-center p-6 rounded-lg bg-purple-50">
798
+ <div class="w-16 h-16 purple-gradient rounded-full flex items-center justify-center text-white mx-auto mb-4">
799
+ <i class="fas fa-truck text-xl"></i>
800
+ </div>
801
+ <h3 class="heading-font text-xl font-bold text-gray-800 mb-2">Free Shipping</h3>
802
+ <p class="text-gray-600">On all orders over $50 within the US</p>
803
+ </div>
804
+
805
+ <div class="text-center p-6 rounded-lg bg-purple-50">
806
+ <div class="w-16 h-16 purple-gradient rounded-full flex items-center justify-center text-white mx-auto mb-4">
807
+ <i class="fas fa-undo text-xl"></i>
808
+ </div>
809
+ <h3 class="heading-font text-xl font-bold text-gray-800 mb-2">Easy Returns</h3>
810
+ <p class="text-gray-600">30-day hassle-free return policy</p>
811
+ </div>
812
+
813
+ <div class="text-center p-6 rounded-lg bg-purple-50">
814
+ <div class="w-16 h-16 purple-gradient rounded-full flex items-center justify-center text-white mx-auto mb-4">
815
+ <i class="fas fa-gem text-xl"></i>
816
+ </div>
817
+ <h3 class="heading-font text-xl font-bold text-gray-800 mb-2">Premium Quality</h3>
818
+ <p class="text-gray-600">Handcrafted with the finest materials</p>
819
+ </div>
820
+ </div>
821
+ </div>
822
+ </section>
823
+
824
+ <!-- Newsletter -->
825
+ <section class="py-16 bg-purple-100">
826
+ <div class="container mx-auto px-4">
827
+ <div class="max-w-3xl mx-auto bg-white rounded-xl p-8 md:p-12 shadow-sm text-center">
828
+ <h2 class="heading-font text-3xl font-bold text-gray-800 mb-4">Join Our Community</h2>
829
+ <p class="text-gray-600 mb-8 max-w-2xl mx-auto">Subscribe to our newsletter for exclusive offers, styling tips, and early access to new collections.</p>
830
+
831
+ <form class="flex flex-col sm:flex-row gap-4 max-w-md mx-auto">
832
+ <input type="email" placeholder="Your email address" class="flex-grow px-4 py-3 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent">
833
+ <button type="submit" class="purple-gradient hover:bg-purple-700 text-white px-6 py-3 rounded-md font-medium transition shadow-lg hover:shadow-purple-200">Subscribe</button>
834
+ </form>
835
+
836
+ <p class="text-xs text-gray-500 mt-4">We respect your privacy. Unsubscribe at any time.</p>
837
+ </div>
838
+ </div>
839
+ </section>
840
+
841
+ <!-- Instagram Feed -->
842
+ <section class="py-16 bg-white">
843
+ <div class="container mx-auto px-4">
844
+ <div class="text-center mb-12">
845
+ <h2 class="heading-font text-3xl font-bold text-gray-800 mb-2">Follow Us @PurpleCurves</h2>
846
+ <p class="text-gray-600 max-w-2xl mx-auto">Tag us in your photos for a chance to be featured!</p>
847
+ </div>
848
+
849
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
850
+ <a href="#" class="group relative overflow-hidden rounded-lg">
851
+ <img src="https://images.unsplash.com/photo-1599643478518-a784e5dc4c8f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="Instagram post" class="w-full h-64 object-cover transition duration-500 group-hover:scale-110">
852
+ <div class="absolute inset-0 bg-black/30 flex items-center justify-center opacity-0 group-hover:opacity-100 transition">
853
+ <i class="fab fa-instagram text-white text-2xl"></i>
854
+ </div>
855
+ </a>
856
+ <a href="#" class="group relative overflow-hidden rounded-lg">
857
+ <img src="https://images.unsplash.com/photo-1534215754734-18e55d13e346?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="Instagram post" class="w-full h-64 object-cover transition duration-500 group-hover:scale-110">
858
+ <div class="absolute inset-0 bg-black/30 flex items-center justify-center opacity-0 group-hover:opacity-100 transition">
859
+ <i class="fab fa-instagram text-white text-2xl"></i>
860
+ </div>
861
+ </a>
862
+ <a href="#" class="group relative overflow-hidden rounded-lg">
863
+ <img src="https://images.unsplash.com/photo-1528243170459-31a2b5465c4e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="Instagram post" class="w-full h-64 object-cover transition duration-500 group-hover:scale-110">
864
+ <div class="absolute inset-0 bg-black/30 flex items-center justify-center opacity-0 group-hover:opacity-100 transition">
865
+ <i class="fab fa-instagram text-white text-2xl"></i>
866
+ </div>
867
+ </a>
868
+ <a href="#" class="group relative overflow-hidden rounded-lg">
869
+ <img src="https://images.unsplash.com/photo-1611591437281-460914d22819?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="Instagram post" class="w-full h-64 object-cover transition duration-500 group-hover:scale-110">
870
+ <div class="absolute inset-0 bg-black/30 flex items-center justify-center opacity-0 group-hover:opacity-100 transition">
871
+ <i class="fab fa-instagram text-white text-2xl"></i>
872
+ </div>
873
+ </a>
874
+ </div>
875
+ </div>
876
+ </section>
877
+
878
+ <!-- Footer -->
879
+ <footer class="bg-gray-800 text-white pt-16 pb-8">
880
+ <div class="container mx-auto px-4">
881
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-12 mb-12">
882
+ <div>
883
+ <div class="flex items-center space-x-2 mb-4">
884
+ <div class="w-8 h-8 rounded-full purple-gradient flex items-center justify-center">
885
+ <i class="fas fa-gem text-white text-sm"></i>
886
+ </div>
887
+ <h3 class="heading-font text-xl font-bold">PurpleCurves</h3>
888
+ </div>
889
+ <p class="text-gray-400 mb-4">Elevating your style with handcrafted bead necklaces and elegant women's hats since 2015.</p>
890
+ <div class="flex space-x-4">
891
+ <a href="#" class="text-gray-400 hover:text-purple-400 transition"><i class="fab fa-facebook-f"></i></a>
892
+ <a href="#" class="text-gray-400 hover:text-purple-400 transition"><i class="fab fa-instagram"></i></a>
893
+ <a href="#" class="text-gray-400 hover:text-purple-400 transition"><i class="fab fa-pinterest-p"></i></a>
894
+ <a href="#" class="text-gray-400 hover:text-purple-400 transition"><i class="fab fa-tiktok"></i></a>
895
+ </div>
896
+ </div>
897
+
898
+ <div>
899
+ <h4 class="heading-font text-lg font-bold mb-4">Shop</h4>
900
+ <ul class="space-y-2">
901
+ <li><a href="#" class="text-gray-400 hover:text-purple-400 transition">Bead Necklaces</a></li>
902
+ <li><a href="#" class="text-gray-400 hover:text-purple-400 transition">Women's Hats</a></li>
903
+ <li><a href="#" class="text-gray-400 hover:text-purple-400 transition">New Arrivals</a></li>
904
+ <li><a href="#" class="text-gray-400 hover:text-purple-400 transition">Best Sellers</a></li>
905
+ <li><a href="#" class="text-gray-400 hover:text-purple-400 transition">Sale Items</a></li>
906
+ </ul>
907
+ </div>
908
+
909
+ <div>
910
+ <h4 class="heading-font text-lg font-bold mb-4">Customer Service</h4>
911
+ <ul class="space-y-2">
912
+ <li><a href="#" class="text-gray-400 hover:text-purple-400 transition">Contact Us</a></li>
913
+ <li><a href="#" class="text-gray-400 hover:text-purple-400 transition">FAQs</a></li>
914
+ <li><a href="#" class="text-gray-400 hover:text-purple-400 transition">Shipping & Returns</a></li>
915
+ <li><a href="#" class="text-gray-400 hover:text-purple-400 transition">Size Guide</a></li>
916
+ <li><a href="#" class="text-gray-400 hover:text-purple-400 transition">Track Order</a></li>
917
+ </ul>
918
+ </div>
919
+
920
+ <div>
921
+ <h4 class="heading-font text-lg font-bold mb-4">About</h4>
922
+ <ul class="space-y-2">
923
+ <li><a href="#" class="text-gray-400 hover:text-purple-400 transition">Our Story</a></li>
924
+ <li><a href="#" class="text-gray-400 hover:text-purple-400 transition">Sustainability</a></li>
925
+ <li><a href="#" class="text-gray-400 hover:text-purple-400 transition">Blog</a></li>
926
+ <li><a href="#" class="text-gray-400 hover:text-purple-400 transition">Careers</a></li>
927
+ <li><a href="#" class="text-gray-400 hover:text-purple-400 transition">Wholesale</a></li>
928
+ </ul>
929
+ </div>
930
+ </div>
931
+
932
+ <div class="pt-8 border-t border-gray-700 flex flex-col md:flex-row justify-between items-center">
933
+ <p class="text-gray-400 text-sm mb-4 md:mb-0">© 2023 PurpleCurves Accessories. All rights reserved.</p>
934
+ <div class="flex space-x-6">
935
+ <a href="#" class="text-gray-400 hover:text-purple-400 text-sm transition">Privacy Policy</a>
936
+ <a href="#" class="text-gray-400 hover:text-purple-400 text-sm transition">Terms of Service</a>
937
+ <a href="#" class="text-gray-400 hover:text-purple-400 text-sm transition">Cookie Policy</a>
938
+ </div>
939
+ </div>
940
+ </div>
941
+ </footer>
942
+
943
+ <!-- Shopping Cart Sidebar -->
944
+ <div class="fixed inset-0 z-50 overflow-hidden hidden" id="cart-sidebar">
945
+ <div class="absolute inset-0 overflow-hidden">
946
+ <div class="absolute inset-0 bg-gray-500 bg-opacity-75 transition-opacity" id="cart-overlay"></div>
947
+ <div class="fixed inset-y-0 right-0 max-w-full flex">
948
+ <div class="relative w-screen max-w-md">
949
+ <div class="h-full flex flex-col bg-white shadow-xl">
950
+ <div class="flex-1 py-6 overflow-y-auto px-4 sm:px-6">
951
+ <div class="flex items-start justify-between">
952
+ <h2 class="heading-font text-lg font-medium text-gray-900">Shopping cart</h2>
953
+ <button class="text-gray-400 hover:text-gray-500" id="close-cart">
954
+ <i class="fas fa-times"></i>
955
+ </button>
956
+ </div>
957
+
958
+ <div class="mt-8">
959
+ <div class="flow-root">
960
+ <ul id="cart-items" class="-my-6 divide-y divide-gray-200">
961
+ <!-- Cart items will be added here dynamically -->
962
+ </ul>
963
+ </div>
964
+ </div>
965
+ </div>
966
+
967
+ <div class="border-t border-gray-200 py-6 px-4 sm:px-6">
968
+ <div class="flex justify-between text-base font-medium text-gray-900">
969
+ <p>Subtotal</p>
970
+ <p id="cart-subtotal">$0.00</p>
971
+ </div>
972
+ <p class="mt-0.5 text-sm text-gray-500">Shipping and taxes calculated at checkout.</p>
973
+ <div class="mt-6">
974
+ <a href="#" class="flex justify-center items-center px-6 py-3 border border-transparent rounded-md shadow-sm text-base font-medium text-white purple-gradient hover:bg-purple-700">Checkout</a>
975
+ </div>
976
+ <div class="mt-6 flex justify-center text-sm text-center text-gray-500">
977
+ <p>
978
+ or <button type="button" class="text-purple-600 font-medium hover:text-purple-500" id="continue-shopping">Continue Shopping</button>
979
+ </p>
980
+ </div>
981
+ </div>
982
+ </div>
983
+ </div>
984
+ </div>
985
+ </div>
986
+ </div>
987
+
988
+ <!-- SQLite Database Script -->
989
+ <script>
990
+ // Initialize SQLite database
991
+ const dbName = "PurpleCurvesDB";
992
+ const dbVersion = 1;
993
+
994
+ // Product database
995
+ const products = [
996
+ { id: 1, name: "Amethyst Elegance", description: "Handcrafted amethyst bead necklace", price: 89.99, category: "necklace", image: "https://images.unsplash.com/photo-1603974370799-71a0cec81d52?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" },
997
+ { id: 2, name: "Turquoise Dream", description: "Statement turquoise bead necklace", price: 79.99, category: "necklace", image: "https://images.unsplash.com/photo-1611591437281-460914d22819?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" },
998
+ { id: 3, name: "Lavender Pearl", description: "Luxury freshwater pearl necklace", price: 129.99, category: "necklace", image: "https://images.unsplash.com/photo-1605100804763-247f67b3557e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" },
999
+ { id: 4, name: "Violet Woodland", description: "Eco-friendly wooden bead necklace", price: 59.99, category: "necklace", image: "https://images.unsplash.com/photo-1602173574767-37ac01994b2a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" },
1000
+ { id: 5, name: "Royal Brim", description: "Wide brim floppy hat in purple", price: 49.99, category: "hat", image: "https://images.unsplash.com/photo-1534215754734-18e55d13e346?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" },
1001
+ { id: 6, name: "Violet Fedora", description: "Classic fedora hat in deep purple", price: 59.99, category: "hat", image: "https://images.unsplash.com/photo-1528243170459-31a2b5465c4e?ix
1002
+ </html>