Hugging Face's logo

Spaces:
Devirus
/
glamnail-studio
Running

App Files Community
Devirus commited on
Commit
282dfb4
·
verified ·
1 Parent(s): cdd43ec

AI Nail Art Studio

Browse files
Files changed (2) hide show
  1. README.md +8 -5
  2. index.html +470 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Glamnail Studio
3
- emoji: 🐠
4
- colorFrom: purple
5
- colorTo: purple
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
1
  ---
2
+ title: GlamNail Studio ✨
3
+ colorFrom: pink
4
+ colorTo: blue
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
index.html CHANGED
@@ -1,19 +1,471 @@
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>GlamNail Studio | AI-Powered Nail Art</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
12
+ <style>
13
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap');
14
+
15
+ .hero-gradient {
16
+ background: linear-gradient(135deg, #f5f7fa 0%, #ffeef8 50%, #f3e5ff 100%);
17
+ }
18
+
19
+ .nail-card {
20
+ transition: all 0.3s ease;
21
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
22
+ }
23
+
24
+ .nail-card:hover {
25
+ transform: translateY(-5px);
26
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
27
+ }
28
+
29
+ .design-preview {
30
+ background-image: radial-gradient(circle at 50% 50%, #f3e5ff 0%, #f5f7fa 100%);
31
+ }
32
+ </style>
33
+ </head>
34
+ <body class="font-sans antialiased text-gray-800">
35
+ <!-- Navigation -->
36
+ <nav class="bg-white border-b border-gray-100 fixed w-full z-10">
37
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
38
+ <div class="flex justify-between h-16">
39
+ <div class="flex items-center">
40
+ <div class="flex-shrink-0 flex items-center">
41
+ <i data-feather="droplet" class="h-6 w-6 text-pink-500"></i>
42
+ <span class="ml-2 text-xl font-bold text-pink-600">GlamNail</span>
43
+ </div>
44
+ </div>
45
+ <div class="hidden md:flex items-center space-x-8">
46
+ <a href="#" class="text-pink-600 hover:text-pink-800 font-medium">Home</a>
47
+ <a href="#" class="text-gray-600 hover:text-pink-600 font-medium">Gallery</a>
48
+ <a href="#" class="text-gray-600 hover:text-pink-600 font-medium">AI Studio</a>
49
+ <a href="#" class="text-gray-600 hover:text-pink-600 font-medium">Tutorials</a>
50
+ <a href="#" class="text-gray-600 hover:text-pink-600 font-medium">Book Now</a>
51
+ </div>
52
+ <div class="flex items-center">
53
+ <button class="bg-pink-500 hover:bg-pink-600 text-white px-4 py-2 rounded-full text-sm font-medium transition duration-300">
54
+ Try AI Designer
55
+ </button>
56
+ <button class="md:hidden ml-4">
57
+ <i data-feather="menu" class="h-6 w-6 text-gray-600"></i>
58
+ </button>
59
+ </div>
60
+ </div>
61
+ </div>
62
+ </nav>
63
+
64
+ <!-- Hero Section -->
65
+ <section class="hero-gradient pt-32 pb-20 px-4 sm:px-6 lg:px-8">
66
+ <div class="max-w-7xl mx-auto">
67
+ <div class="grid md:grid-cols-2 gap-12 items-center">
68
+ <div class="space-y-6">
69
+ <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-gray-900 font-serif leading-tight">
70
+ Revolutionize Your Nail Art with <span class="text-pink-600">AI Magic</span>
71
+ </h1>
72
+ <p class="text-lg text-gray-600">
73
+ Our AI-powered nail studio creates personalized designs just for you.
74
+ Get inspired, visualize before you commit, and discover your perfect style.
75
+ </p>
76
+ <div class="flex space-x-4 pt-4">
77
+ <button class="bg-pink-600 hover:bg-pink-700 text-white px-6 py-3 rounded-full font-medium transition duration-300 flex items-center">
78
+ <i data-feather="sparkles" class="mr-2"></i> Try Now
79
+ </button>
80
+ <button class="border border-pink-600 text-pink-600 hover:bg-pink-50 px-6 py-3 rounded-full font-medium transition duration-300 flex items-center">
81
+ <i data-feather="play-circle" class="mr-2"></i> Watch Demo
82
+ </button>
83
+ </div>
84
+ </div>
85
+ <div class="relative">
86
+ <div class="design-preview rounded-3xl p-6 shadow-lg">
87
+ <div class="grid grid-cols-5 gap-2">
88
+ <div class="aspect-square bg-white rounded-lg shadow-sm flex items-center justify-center">
89
+ <div class="h-3/4 w-3/4 rounded-full bg-gradient-to-br from-pink-200 to-purple-200"></div>
90
+ </div>
91
+ <div class="aspect-square bg-white rounded-lg shadow-sm flex items-center justify-center">
92
+ <div class="h-3/4 w-3/4 rounded-full bg-gradient-to-br from-blue-200 to-teal-200"></div>
93
+ </div>
94
+ <div class="aspect-square bg-white rounded-lg shadow-sm flex items-center justify-center">
95
+ <div class="h-3/4 w-3/4 rounded-full bg-gradient-to-br from-yellow-200 to-orange-200"></div>
96
+ </div>
97
+ <div class="aspect-square bg-white rounded-lg shadow-sm flex items-center justify-center">
98
+ <div class="h-3/4 w-3/4 rounded-full bg-gradient-to-br from-green-200 to-emerald-200"></div>
99
+ </div>
100
+ <div class="aspect-square bg-white rounded-lg shadow-sm flex items-center justify-center">
101
+ <div class="h-3/4 w-3/4 rounded-full bg-gradient-to-br from-purple-200 to-fuchsia-200"></div>
102
+ </div>
103
+ </div>
104
+ <div class="mt-4 text-center">
105
+ <div class="inline-block px-4 py-2 bg-white rounded-full shadow-sm">
106
+ <span class="text-sm font-medium text-pink-600">AI is generating your design...</span>
107
+ </div>
108
+ </div>
109
+ </div>
110
+ <div class="absolute -bottom-6 -right-6 bg-white p-4 rounded-full shadow-lg">
111
+ <i data-feather="cpu" class="h-8 w-8 text-pink-500"></i>
112
+ </div>
113
+ </div>
114
+ </div>
115
+ </div>
116
+ </section>
117
+
118
+ <!-- Trending Designs -->
119
+ <section class="py-16 px-4 sm:px-6 lg:px-8">
120
+ <div class="max-w-7xl mx-auto">
121
+ <div class="text-center mb-12">
122
+ <h2 class="text-3xl font-bold text-gray-900 font-serif">Trending AI Designs</h2>
123
+ <p class="mt-2 text-gray-600 max-w-2xl mx-auto">
124
+ Explore our most popular AI-generated nail art designs loved by thousands
125
+ </p>
126
+ </div>
127
+
128
+ <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-6">
129
+ <!-- Design Card 1 -->
130
+ <div class="nail-card bg-white rounded-xl overflow-hidden">
131
+ <div class="aspect-square bg-gradient-to-br from-pink-100 to-purple-100 flex items-center justify-center">
132
+ <div class="w-1/2 h-1/2 rounded-full bg-pink-500 opacity-20"></div>
133
+ </div>
134
+ <div class="p-4">
135
+ <h3 class="font-medium text-gray-900">Floral Fantasy</h3>
136
+ <div class="flex items-center mt-1">
137
+ <div class="flex -space-x-1">
138
+ <img class="w-5 h-5 rounded-full border border-white" src="http://static.photos/people/200x200/1" alt="">
139
+ <img class="w-5 h-5 rounded-full border border-white" src="http://static.photos/people/200x200/2" alt="">
140
+ <img class="w-5 h-5 rounded-full border border-white" src="http://static.photos/people/200x200/3" alt="">
141
+ </div>
142
+ <span class="ml-2 text-sm text-gray-500">1.2k saves</span>
143
+ </div>
144
+ </div>
145
+ </div>
146
+
147
+ <!-- Design Card 2 -->
148
+ <div class="nail-card bg-white rounded-xl overflow-hidden">
149
+ <div class="aspect-square bg-gradient-to-br from-blue-100 to-cyan-100 flex items-center justify-center">
150
+ <div class="w-1/2 h-1/2 rounded-full bg-blue-500 opacity-20"></div>
151
+ </div>
152
+ <div class="p-4">
153
+ <h3 class="font-medium text-gray-900">Ocean Breeze</h3>
154
+ <div class="flex items-center mt-1">
155
+ <div class="flex -space-x-1">
156
+ <img class="w-5 h-5 rounded-full border border-white" src="http://static.photos/people/200x200/4" alt="">
157
+ <img class="w-5 h-5 rounded-full border border-white" src="http://static.photos/people/200x200/5" alt="">
158
+ </div>
159
+ <span class="ml-2 text-sm text-gray-500">856 saves</span>
160
+ </div>
161
+ </div>
162
+ </div>
163
+
164
+ <!-- Design Card 3 -->
165
+ <div class="nail-card bg-white rounded-xl overflow-hidden">
166
+ <div class="aspect-square bg-gradient-to-br from-yellow-100 to-amber-100 flex items-center justify-center">
167
+ <div class="w-1/2 h-1/2 rounded-full bg-yellow-500 opacity-20"></div>
168
+ </div>
169
+ <div class="p-4">
170
+ <h3 class="font-medium text-gray-900">Golden Hour</h3>
171
+ <div class="flex items-center mt-1">
172
+ <div class="flex -space-x-1">
173
+ <img class="w-5 h-5 rounded-full border border-white" src="http://static.photos/people/200x200/6" alt="">
174
+ <img class="w-5 h-5 rounded-full border border-white" src="http://static.photos/people/200x200/7" alt="">
175
+ <img class="w-5 h-5 rounded-full border border-white" src="http://static.photos/people/200x200/8" alt="">
176
+ </div>
177
+ <span class="ml-2 text-sm text-gray-500">2.3k saves</span>
178
+ </div>
179
+ </div>
180
+ </div>
181
+
182
+ <!-- Design Card 4 -->
183
+ <div class="nail-card bg-white rounded-xl overflow-hidden">
184
+ <div class="aspect-square bg-gradient-to-br from-green-100 to-emerald-100 flex items-center justify-center">
185
+ <div class="w-1/2 h-1/2 rounded-full bg-green-500 opacity-20"></div>
186
+ </div>
187
+ <div class="p-4">
188
+ <h3 class="font-medium text-gray-900">Jungle Vibes</h3>
189
+ <div class="flex items-center mt-1">
190
+ <div class="flex -space-x-1">
191
+ <img class="w-5 h-5 rounded-full border border-white" src="http://static.photos/people/200x200/9" alt="">
192
+ <img class="w-5 h-5 rounded-full border border-white" src="http://static.photos/people/200x200/10" alt="">
193
+ </div>
194
+ <span class="ml-2 text-sm text-gray-500">723 saves</span>
195
+ </div>
196
+ </div>
197
+ </div>
198
+
199
+ <!-- Design Card 5 -->
200
+ <div class="nail-card bg-white rounded-xl overflow-hidden">
201
+ <div class="aspect-square bg-gradient-to-br from-purple-100 to-fuchsia-100 flex items-center justify-center">
202
+ <div class="w-1/2 h-1/2 rounded-full bg-purple-500 opacity-20"></div>
203
+ </div>
204
+ <div class="p-4">
205
+ <h3 class="font-medium text-gray-900">Midnight Sparkle</h3>
206
+ <div class="flex items-center mt-1">
207
+ <div class="flex -space-x-1">
208
+ <img class="w-5 h-5 rounded-full border border-white" src="http://static.photos/people/200x200/11" alt="">
209
+ <img class="w-5 h-5 rounded-full border border-white" src="http://static.photos/people/200x200/12" alt="">
210
+ </div>
211
+ <span class="ml-2 text-sm text-gray-500">945 saves</span>
212
+ </div>
213
+ </div>
214
+ </div>
215
+ </div>
216
+
217
+ <div class="text-center mt-12">
218
+ <button class="border border-pink-600 text-pink-600 hover:bg-pink-50 px-6 py-3 rounded-full font-medium transition duration-300">
219
+ View All Designs
220
+ </button>
221
+ </div>
222
+ </div>
223
+ </section>
224
+
225
+ <!-- How It Works -->
226
+ <section class="py-16 px-4 sm:px-6 lg:px-8 bg-gray-50">
227
+ <div class="max-w-7xl mx-auto">
228
+ <div class="text-center mb-12">
229
+ <h2 class="text-3xl font-bold text-gray-900 font-serif">How Our AI Studio Works</h2>
230
+ <p class="mt-2 text-gray-600 max-w-2xl mx-auto">
231
+ Get your perfect nail design in just 3 simple steps
232
+ </p>
233
+ </div>
234
+
235
+ <div class="grid md:grid-cols-3 gap-8">
236
+ <!-- Step 1 -->
237
+ <div class="bg-white p-6 rounded-xl shadow-sm">
238
+ <div class="w-14 h-14 rounded-full bg-pink-100 flex items-center justify-center mb-4">
239
+ <span class="text-xl font-bold text-pink-600">1</span>
240
+ </div>
241
+ <h3 class="text-xl font-medium text-gray-900 mb-2">Upload Your Photo</h3>
242
+ <p class="text-gray-600">
243
+ Take or upload a photo of your hands to visualize designs on your actual nails.
244
+ </p>
245
+ </div>
246
+
247
+ <!-- Step 2 -->
248
+ <div class="bg-white p-6 rounded-xl shadow-sm">
249
+ <div class="w-14 h-14 rounded-full bg-pink-100 flex items-center justify-center mb-4">
250
+ <span class="text-xl font-bold text-pink-600">2</span>
251
+ </div>
252
+ <h3 class="text-xl font-medium text-gray-900 mb-2">Choose Your Style</h3>
253
+ <p class="text-gray-600">
254
+ Select from trending styles or let our AI suggest designs based on your preferences.
255
+ </p>
256
+ </div>
257
+
258
+ <!-- Step 3 -->
259
+ <div class="bg-white p-6 rounded-xl shadow-sm">
260
+ <div class="w-14 h-14 rounded-full bg-pink-100 flex items-center justify-center mb-4">
261
+ <span class="text-xl font-bold text-pink-600">3</span>
262
+ </div>
263
+ <h3 class="text-xl font-medium text-gray-900 mb-2">Customize & Save</h3>
264
+ <p class="text-gray-600">
265
+ Fine-tune colors and elements, then save or book an appointment with your design.
266
+ </p>
267
+ </div>
268
+ </div>
269
+
270
+ <div class="mt-12 bg-white rounded-xl overflow-hidden shadow-sm">
271
+ <div class="grid md:grid-cols-2">
272
+ <div class="p-8 md:p-12 flex flex-col justify-center">
273
+ <h3 class="text-2xl font-bold text-gray-900 font-serif mb-4">Try Our Virtual Try-On</h3>
274
+ <p class="text-gray-600 mb-6">
275
+ See how different designs would look on your hands before committing. Our augmented reality technology gives you a realistic preview.
276
+ </p>
277
+ <button class="bg-pink-600 hover:bg-pink-700 text-white px-6 py-3 rounded-full font-medium transition duration-300 w-fit">
278
+ <i data-feather="camera" class="mr-2 inline"></i> Activate Camera
279
+ </button>
280
+ </div>
281
+ <div class="bg-gradient-to-br from-pink-50 to-purple-50 flex items-center justify-center p-8">
282
+ <div class="relative">
283
+ <img src="http://static.photos/320x240" alt="Hand model" class="rounded-lg shadow-md">
284
+ <div class="absolute -bottom-4 -right-4 bg-white p-3 rounded-full shadow-lg">
285
+ <i data-feather="maximize-2" class="h-6 w-6 text-pink-500"></i>
286
+ </div>
287
+ </div>
288
+ </div>
289
+ </div>
290
+ </div>
291
+ </div>
292
+ </section>
293
+
294
+ <!-- Testimonials -->
295
+ <section class="py-16 px-4 sm:px-6 lg:px-8">
296
+ <div class="max-w-7xl mx-auto">
297
+ <div class="text-center mb-12">
298
+ <h2 class="text-3xl font-bold text-gray-900 font-serif">What Our Community Says</h2>
299
+ <p class="mt-2 text-gray-600 max-w-2xl mx-auto">
300
+ Join thousands of satisfied users who found their perfect nail design
301
+ </p>
302
+ </div>
303
+
304
+ <div class="grid md:grid-cols-3 gap-8">
305
+ <!-- Testimonial 1 -->
306
+ <div class="bg-white p-6 rounded-xl shadow-sm">
307
+ <div class="flex items-center mb-4">
308
+ <img src="http://static.photos/people/200x200/30" alt="Sarah J." class="w-12 h-12 rounded-full">
309
+ <div class="ml-4">
310
+ <h4 class="font-medium text-gray-900">Sarah J.</h4>
311
+ <div class="flex mt-1">
312
+ <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-yellow-400"></i>
313
+ <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-yellow-400"></i>
314
+ <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-yellow-400"></i>
315
+ <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-yellow-400"></i>
316
+ <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-yellow-400"></i>
317
+ </div>
318
+ </div>
319
+ </div>
320
+ <p class="text-gray-600">
321
+ "I'm obsessed! The AI suggested a design I would have never picked myself but gets me compliments every time. Game changer!"
322
+ </p>
323
+ </div>
324
+
325
+ <!-- Testimonial 2 -->
326
+ <div class="bg-white p-6 rounded-xl shadow-sm">
327
+ <div class="flex items-center mb-4">
328
+ <img src="http://static.photos/people/200x200/31" alt="Mia K." class="w-12 h-12 rounded-full">
329
+ <div class="ml-4">
330
+ <h4 class="font-medium text-gray-900">Mia K.</h4>
331
+ <div class="flex mt-1">
332
+ <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-yellow-400"></i>
333
+ <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-yellow-400"></i>
334
+ <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-yellow-400"></i>
335
+ <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-yellow-400"></i>
336
+ <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-yellow-400"></i>
337
+ </div>
338
+ </div>
339
+ </div>
340
+ <p class="text-gray-600">
341
+ "As a nail tech, this tool saves me so much time consulting with clients. They come in knowing exactly what they want!"
342
+ </p>
343
+ </div>
344
+
345
+ <!-- Testimonial 3 -->
346
+ <div class="bg-white p-6 rounded-xl shadow-sm">
347
+ <div class="flex items-center mb-4">
348
+ <img src="http://static.photos/people/200x200/32" alt="Alex T." class="w-12 h-12 rounded-full">
349
+ <div class="ml-4">
350
+ <h4 class="font-medium text-gray-900">Alex T.</h4>
351
+ <div class="flex mt-1">
352
+ <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-yellow-400"></i>
353
+ <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-yellow-400"></i>
354
+ <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-yellow-400"></i>
355
+ <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-yellow-400"></i>
356
+ <i data-feather="star" class="w-4 h-4 text-yellow-400"></i>
357
+ </div>
358
+ </div>
359
+ </div>
360
+ <p class="text-gray-600">
361
+ "The virtual try-on is spooky accurate. My nails looked exactly like the preview when I got them done professionally."
362
+ </p>
363
+ </div>
364
+ </div>
365
+ </div>
366
+ </section>
367
+
368
+ <!-- CTA -->
369
+ <section class="py-16 px-4 sm:px-6 lg:px-8 bg-pink-600">
370
+ <div class="max-w-4xl mx-auto text-center">
371
+ <h2 class="text-3xl font-bold text-white font-serif mb-4">Ready to Discover Your Perfect Nail Design?</h2>
372
+ <p class="text-pink-100 mb-8 text-lg">
373
+ Join our community of nail art lovers and never struggle to choose a design again.
374
+ </p>
375
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
376
+ <button class="bg-white text-pink-600 hover:bg-gray-100 px-6 py-3 rounded-full font-medium transition duration-300">
377
+ Try AI Designer Free
378
+ </button>
379
+ <button class="border border-white text-white hover:bg-pink-700 px-6 py-3 rounded-full font-medium transition duration-300">
380
+ Book Appointment
381
+ </button>
382
+ </div>
383
+ </div>
384
+ </section>
385
+
386
+ <!-- Footer -->
387
+ <footer class="bg-gray-900 text-white py-12 px-4 sm:px-6 lg:px-8">
388
+ <div class="max-w-7xl mx-auto">
389
+ <div class="grid md:grid-cols-4 gap-8">
390
+ <div>
391
+ <div class="flex items-center">
392
+ <i data-feather="droplet" class="h-6 w-6 text-pink-500"></i>
393
+ <span class="ml-2 text-xl font-bold">GlamNail</span>
394
+ </div>
395
+ <p class="mt-4 text-gray-400">
396
+ Revolutionizing nail art with AI technology to bring your perfect manicure to life.
397
+ </p>
398
+ <div class="flex space-x-4 mt-6">
399
+ <a href="#" class="text-gray-400 hover:text-white">
400
+ <i data-feather="instagram"></i>
401
+ </a>
402
+ <a href="#" class="text-gray-400 hover:text-white">
403
+ <i data-feather="facebook"></i>
404
+ </a>
405
+ <a href="#" class="text-gray-400 hover:text-white">
406
+ <i data-feather="twitter"></i>
407
+ </a>
408
+ <a href="#" class="text-gray-400 hover:text-white">
409
+ <i data-feather="youtube"></i>
410
+ </a>
411
+ </div>
412
+ </div>
413
+
414
+ <div>
415
+ <h4 class="text-lg font-medium mb-4">Company</h4>
416
+ <ul class="space-y-2">
417
+ <li><a href="#" class="text-gray-400 hover:text-white">About Us</a></li>
418
+ <li><a href="#" class="text-gray-400 hover:text-white">Careers</a></li>
419
+ <li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li>
420
+ <li><a href="#" class="text-gray-400 hover:text-white">Press</a></li>
421
+ </ul>
422
+ </div>
423
+
424
+ <div>
425
+ <h4 class="text-lg font-medium mb-4">Resources</h4>
426
+ <ul class="space-y-2">
427
+ <li><a href="#" class="text-gray-400 hover:text-white">Tutorials</a></li>
428
+ <li><a href="#" class="text-gray-400 hover:text-white">Help Center</a></li>
429
+ <li><a href="#" class="text-gray-400 hover:text-white">Community</a></li>
430
+ <li><a href="#" class="text-gray-400 hover:text-white">Nail Health</a></li>
431
+ </ul>
432
+ </div>
433
+
434
+ <div>
435
+ <h4 class="text-lg font-medium mb-4">Legal</h4>
436
+ <ul class="space-y-2">
437
+ <li><a href="#" class="text-gray-400 hover:text-white">Privacy</a></li>
438
+ <li><a href="#" class="text-gray-400 hover:text-white">Terms</a></li>
439
+ <li><a href="#" class="text-gray-400 hover:text-white">Cookie Policy</a></li>
440
+ <li><a href="#" class="text-gray-400 hover:text-white">Licenses</a></li>
441
+ </ul>
442
+ </div>
443
+ </div>
444
+
445
+ <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
446
+ <p class="text-gray-400 text-sm">
447
+ © 2023 GlamNail Studio. All rights reserved.
448
+ </p>
449
+ <div class="mt-4 md:mt-0">
450
+ <div class="flex items-center space-x-6">
451
+ <a href="#" class="text-gray-400 hover:text-white text-sm">Status</a>
452
+ <a href="#" class="text-gray-400 hover:text-white text-sm">Contact</a>
453
+ <a href="#" class="text-gray-400 hover:text-white text-sm">Change Region</a>
454
+ </div>
455
+ </div>
456
+ </div>
457
+ </div>
458
+ </footer>
459
+
460
+ <script>
461
+ feather.replace();
462
+
463
+ // Simple animation for hero section elements
464
+ gsap.from("nav", {duration: 0.8, y: -50, opacity: 0, ease: "power2.out"});
465
+ gsap.from(".hero-gradient h1", {duration: 0.8, y: 30, opacity: 0, delay: 0.3, ease: "power2.out"});
466
+ gsap.from(".hero-gradient p", {duration: 0.8, y: 30, opacity: 0, delay: 0.5, ease: "power2.out"});
467
+ gsap.from(".hero-gradient button", {duration: 0.8, y: 30, opacity: 0, delay: 0.7, ease: "power2.out", stagger: 0.1});
468
+ gsap.from(".design-preview", {duration: 1, scale: 0.8, opacity: 0, delay: 0.8, ease: "elastic.out(1, 0.5)"});
469
+ </script>
470
+ </body>
471
  </html>