Hugging Face's logo

Spaces:
mobenta
/
bvcxvcxvcx
Running

App Files Community
mobenta commited on
Commit
4bf1648
·
verified ·
1 Parent(s): 87d05bf

the bottons should be contained in smal sotial media bubble - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +785 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Bvcxvcxvcx
3
- emoji: ⚡
4
- colorFrom: gray
5
- colorTo: red
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: bvcxvcxvcx
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: yellow
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,785 @@
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="de">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Hafida's Beauty Room | Professionelle Aquafacial-Behandlungen in Frankfurt</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
+ <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap" rel="stylesheet">
10
+ <style>
11
+ body {
12
+ font-family: 'Montserrat', sans-serif;
13
+ scroll-behavior: smooth;
14
+ }
15
+ .title-font {
16
+ font-family: 'Playfair Display', serif;
17
+ }
18
+ .hero-image {
19
+ background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('https://images.unsplash.com/photo-1522335789203-aabd1fc54bc9');
20
+ background-size: cover;
21
+ background-position: center;
22
+ background-attachment: fixed;
23
+ }
24
+ .treatment-card {
25
+ transition: all 0.3s ease;
26
+ }
27
+ .treatment-card:hover {
28
+ transform: translateY(-5px);
29
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
30
+ }
31
+ .fade-in {
32
+ opacity: 0;
33
+ transition: opacity 1s ease-in;
34
+ }
35
+ .fade-in.show {
36
+ opacity: 1;
37
+ }
38
+ .before-after-img {
39
+ transition: transform 0.5s ease;
40
+ }
41
+ .before-after-img:hover {
42
+ transform: scale(1.05);
43
+ }
44
+ .testimonial-card {
45
+ transition: all 0.3s ease;
46
+ }
47
+ .testimonial-card:hover {
48
+ transform: translateY(-5px);
49
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
50
+ }
51
+ .form-input:focus {
52
+ outline: none;
53
+ box-shadow: 0 0 0 2px rgba(236, 72, 153, 0.3);
54
+ }
55
+ .social-icon {
56
+ transition: all 0.3s ease;
57
+ }
58
+ .social-icon:hover {
59
+ transform: translateY(-3px);
60
+ }
61
+ </style>
62
+ </head>
63
+ <body class="bg-gray-50 text-gray-700">
64
+ <!-- Header/Navigation -->
65
+ <header class="bg-white shadow-sm fixed w-full z-50">
66
+ <div class="container mx-auto px-4 py-4 flex justify-between items-center">
67
+ <div class="flex items-center">
68
+ <a href="#home" class="title-font text-2xl font-bold text-pink-600 flex items-center">
69
+ <i class="fas fa-spa mr-2"></i>
70
+ Hafida's Beauty Room
71
+ </a>
72
+ </div>
73
+ <nav class="hidden md:block">
74
+ <ul class="flex space-x-8">
75
+ <li><a href="#home" class="hover:text-pink-600 transition duration-300 font-medium">Startseite</a></li>
76
+ <li><a href="#about" class="hover:text-pink-600 transition duration-300 font-medium">Über uns</a></li>
77
+ <li><a href="#treatments" class="hover:text-pink-600 transition duration-300 font-medium">Behandlungen</a></li>
78
+ <li><a href="#results" class="hover:text-pink-600 transition duration-300 font-medium">Ergebnisse</a></li>
79
+ <li><a href="#contact" class="hover:text-pink-600 transition duration-300 font-medium">Kontakt</a></li>
80
+ </ul>
81
+ </nav>
82
+ <button class="md:hidden text-gray-700 focus:outline-none" id="menu-toggle">
83
+ <i class="fas fa-bars text-2xl"></i>
84
+ </button>
85
+ </div>
86
+ <!-- Mobile menu -->
87
+ <div class="md:hidden hidden bg-white w-full py-4 px-4 border-t" id="mobile-menu">
88
+ <ul class="space-y-3">
89
+ <li><a href="#home" class="block hover:text-pink-600 transition duration-300 font-medium py-2">Startseite</a></li>
90
+ <li><a href="#about" class="block hover:text-pink-600 transition duration-300 font-medium py-2">Über uns</a></li>
91
+ <li><a href="#treatments" class="block hover:text-pink-600 transition duration-300 font-medium py-2">Behandlungen</a></li>
92
+ <li><a href="#results" class="block hover:text-pink-600 transition duration-300 font-medium py-2">Ergebnisse</a></li>
93
+ <li><a href="#contact" class="block hover:text-pink-600 transition duration-300 font-medium py-2">Kontakt</a></li>
94
+ </ul>
95
+ </div>
96
+ </header>
97
+
98
+ <!-- Hero Section -->
99
+ <section id="home" class="hero-image h-screen flex items-center pt-16">
100
+ <div class="container mx-auto px-4 text-center">
101
+ <h1 class="title-font text-white text-4xl md:text-6xl font-bold mb-6 leading-tight fade-in">
102
+ Luxuriöse Hautbehandlungen <br> in Frankfurt
103
+ </h1>
104
+ <p class="text-white text-xl mb-8 max-w-2xl mx-auto fade-in" style="transition-delay: 0.2s;">
105
+ Erleben Sie die transformative Kraft unserer Aquafacial-Behandlungen, die auf Ihre individuellen Hautbedürfnisse abgestimmt sind.
106
+ </p>
107
+ <div class="flex flex-col sm:flex-row justify-center gap-4 fade-in" style="transition-delay: 0.4s;">
108
+ <a href="#treatments" class="bg-pink-600 hover:bg-pink-700 text-white font-bold py-3 px-8 rounded-full transition duration-300 transform hover:scale-105 shadow-lg">
109
+ Unsere Behandlungen
110
+ </a>
111
+ <a href="#contact" class="bg-transparent hover:bg-white hover:text-pink-600 text-white font-bold py-3 px-8 border-2 border-white rounded-full transition duration-300 transform hover:scale-105">
112
+ Jetzt buchen
113
+ </a>
114
+ </div>
115
+ </div>
116
+ <div class="absolute bottom-8 left-0 right-0 flex justify-center">
117
+ <a href="#about" class="text-white animate-bounce">
118
+ <i class="fas fa-chevron-down text-2xl"></i>
119
+ </a>
120
+ </div>
121
+ </section>
122
+
123
+ <!-- About Section -->
124
+ <section id="about" class="py-20 bg-white">
125
+ <div class="container mx-auto px-4">
126
+ <div class="text-center mb-16 fade-in">
127
+ <h2 class="title-font text-3xl md:text-4xl font-bold mb-4">Willkommen bei Hafida's Beauty Room</h2>
128
+ <div class="w-24 h-1 bg-pink-500 mx-auto mb-6"></div>
129
+ <p class="max-w-2xl mx-auto text-lg">
130
+ Ihr erstklassiges Ziel für professionelle Hautpflegebehandlungen in Frankfurt am Main.
131
+ </p>
132
+ </div>
133
+
134
+ <div class="flex flex-col lg:flex-row items-center gap-12">
135
+ <div class="lg:w-1/2 fade-in">
136
+ <div class="relative overflow-hidden rounded-xl shadow-xl">
137
+ <img src="https://images.unsplash.com/photo-1570172619644-dfd03ed5d881" alt="Hafida's Beauty Room Interior" class="w-full h-auto rounded-xl transform hover:scale-105 transition duration-500">
138
+ <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-50 rounded-xl"></div>
139
+ <div class="absolute bottom-0 left-0 p-6 text-white">
140
+ <h3 class="title-font text-2xl font-bold">Hafida - Skincare Specialist</h3>
141
+ <p>Certified Aquafacial Expert</p>
142
+ </div>
143
+ </div>
144
+ </div>
145
+ <div class="lg:w-1/2 fade-in" style="transition-delay: 0.2s;">
146
+ <h3 class="title-font text-2xl font-bold mb-4">Professionelle Hautpflege seit 2024</h3>
147
+ <p class="mb-6 text-gray-600 leading-relaxed">
148
+ Bei Hafida's Beauty Room verbinden wir Fachwissen mit persönlicher Betreuung, um außergewöhnliche Ergebnisse zu erzielen.
149
+ Unsere moderne Einrichtung in Frankfurt am Main bietet eine ruhige Oase, in der Sie entspannen und sich verjüngen können.
150
+ </p>
151
+ <ul class="space-y-4 mb-8">
152
+ <li class="flex items-start">
153
+ <div class="text-pink-500 mr-3 mt-1"><i class="fas fa-check-circle"></i></div>
154
+ <span class="text-gray-700">Specialists in Aquafacial treatments with advanced technology</span>
155
+ </li>
156
+ <li class="flex items-start">
157
+ <div class="text-pink-500 mr-3 mt-1"><i class="fas fa-check-circle"></i></div>
158
+ <span class="text-gray-700">Personalized skincare solutions for all skin types</span>
159
+ </li>
160
+ <li class="flex items-start">
161
+ <div class="text-pink-500 mr-3 mt-1"><i class="fas fa-check-circle"></i></div>
162
+ <span class="text-gray-700">Comprehensive facial and body treatments with visible results</span>
163
+ </li>
164
+ <li class="flex items-start">
165
+ <div class="text-pink-500 mr-3 mt-1"><i class="fas fa-check-circle"></i></div>
166
+ <span class="text-gray-700">Professional care in a relaxing, luxurious atmosphere</span>
167
+ </li>
168
+ </ul>
169
+ <div class="flex flex-wrap gap-4">
170
+ <a href="#treatments" class="bg-pink-600 hover:bg-pink-700 text-white font-bold py-3 px-8 rounded-full transition duration-300 transform hover:scale-105 shadow-lg">
171
+ Our Services
172
+ </a>
173
+ <a href="#contact" class="bg-white hover:bg-gray-100 text-pink-600 font-bold py-3 px-8 border border-pink-600 rounded-full transition duration-300 transform hover:scale-105">
174
+ <i class="fas fa-phone-alt mr-2"></i> Call Us
175
+ </a>
176
+ </div>
177
+ </div>
178
+ </div>
179
+ </div>
180
+ </section>
181
+
182
+ <!-- Treatments Section -->
183
+ <section id="treatments" class="py-20 bg-gray-50">
184
+ <div class="container mx-auto px-4">
185
+ <div class="text-center mb-16 fade-in">
186
+ <h2 class="title-font text-3xl md:text-4xl font-bold mb-4">Unsere Spezialbehandlungen</h2>
187
+ <div class="w-24 h-1 bg-pink-500 mx-auto mb-6"></div>
188
+ <p class="max-w-2xl mx-auto text-lg">
189
+ Entdecken Sie unsere spezialisierten Behandlungen, die Ihre natürliche Schönheit unterstreichen.
190
+ </p>
191
+ </div>
192
+
193
+ <!-- Aquafacial Card -->
194
+ <div class="grid md:grid-cols-2 gap-8 mb-16">
195
+ <div class="bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300 treatment-card fade-in">
196
+ <div class="relative overflow-hidden h-64">
197
+ <img src="https://images.unsplash.com/photo-1533044309903-9f6aff2a0c44" alt="Aquafacial Treatment" class="w-full h-full object-cover transform hover:scale-110 transition duration-500">
198
+ <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-50"></div>
199
+ <div class="absolute bottom-0 left-0 p-6 text-white">
200
+ <span class="bg-pink-600 text-xs font-bold px-3 py-1 rounded-full">MOST POPULAR</span>
201
+ </div>
202
+ </div>
203
+ <div class="p-8">
204
+ <h3 class="title-font text-2xl font-bold mb-4">Aquafacial Treatment</h3>
205
+ <p class="mb-6 text-gray-600">
206
+ Our advanced 4-step Aquafacial process delivers immediate, visible results with no downtime.
207
+ </p>
208
+ <div class="mb-6">
209
+ <h4 class="font-bold mb-2">The Process:</h4>
210
+ <ol class="list-decimal pl-5 space-y-2">
211
+ <li><span class="font-medium">Analysis:</span> Personalized skin assessment</li>
212
+ <li><span class="font-medium">Cleansing & Peeling:</span> Gentle exfoliation</li>
213
+ <li><span class="font-medium">Deep Pore Cleaning:</span> Water-suction technique</li>
214
+ <li><span class="font-medium">Hydration:</span> Customized serum application</li>
215
+ </ol>
216
+ </div>
217
+ <div class="flex justify-between items-center">
218
+ <span class="text-xl font-bold text-pink-600">From €119</span>
219
+ <a href="#contact" class="text-pink-600 hover:text-pink-700 font-bold flex items-center">
220
+ Book Now <i class="fas fa-arrow-right ml-2"></i>
221
+ </a>
222
+ </div>
223
+ </div>
224
+ </div>
225
+ <div class="bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300 treatment-card fade-in" style="transition-delay: 0.2s;">
226
+ <div class="relative overflow-hidden h-64">
227
+ <img src="https://images.unsplash.com/photo-1526758097130-bab247274f58" alt="Aquafacial Benefits" class="w-full h-full object-cover transform hover:scale-110 transition duration-500">
228
+ <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-50"></div>
229
+ </div>
230
+ <div class="p-8">
231
+ <h3 class="title-font text-2xl font-bold mb-4">Benefits of Aquafacial</h3>
232
+ <div class="mb-6">
233
+ <h4 class="font-bold mb-2">Treats:</h4>
234
+ <ul class="grid grid-cols-2 gap-2">
235
+ <li class="flex items-start">
236
+ <div class="text-pink-500 mr-2 mt-1"><i class="fas fa-check"></i></div>
237
+ <span>Acne & breakouts</span>
238
+ </li>
239
+ <li class="flex items-start">
240
+ <div class="text-pink-500 mr-2 mt-1"><i class="fas fa-check"></i></div>
241
+ <span>Enlarged pores</span>
242
+ </li>
243
+ <li class="flex items-start">
244
+ <div class="text-pink-500 mr-2 mt-1"><i class="fas fa-check"></i></div>
245
+ <span>Blackheads</span>
246
+ </li>
247
+ <li class="flex items-start">
248
+ <div class="text-pink-500 mr-2 mt-1"><i class="fas fa-check"></i></div>
249
+ <span>Hyperpigmentation</span>
250
+ </li>
251
+ <li class="flex items-start">
252
+ <div class="text-pink-500 mr-2 mt-1"><i class="fas fa-check"></i></div>
253
+ <span>Skin impurities</span>
254
+ </li>
255
+ <li class="flex items-start">
256
+ <div class="text-pink-500 mr-2 mt-1"><i class="fas fa-check"></i></div>
257
+ <span>Dull complexion</span>
258
+ </li>
259
+ <li class="flex items-start">
260
+ <div class="text-pink-500 mr-2 mt-1"><i class="fas fa-check"></i></div>
261
+ <span>Fine lines</span>
262
+ </li>
263
+ <li class="flex items-start">
264
+ <div class="text-pink-500 mr-2 mt-1"><i class="fas fa-check"></i></div>
265
+ <span>Dehydration</span>
266
+ </li>
267
+ </ul>
268
+ </div>
269
+ <h4 class="font-bold mb-2">Results You'll Love:</h4>
270
+ <ul class="space-y-2 mb-6">
271
+ <li class="flex items-start">
272
+ <div class="text-pink-500 mr-2 mt-1"><i class="fas fa-star"></i></div>
273
+ <span>Fresh, clean skin with radiant glow</span>
274
+ </li>
275
+ <li class="flex items-start">
276
+ <div class="text-pink-500 mr-2 mt-1"><i class="fas fa-star"></i></div>
277
+ <span>Improved skin texture and tone</span>
278
+ </li>
279
+ <li class="flex items-start">
280
+ <div class="text-pink-500 mr-2 mt-1"><i class="fas fa-star"></i></div>
281
+ <span>Enhanced product absorption</span>
282
+ </li>
283
+ <li class="flex items-start">
284
+ <div class="text-pink-500 mr-2 mt-1"><i class="fas fa-star"></i></div>
285
+ <span>Immediate visible improvements</span>
286
+ </li>
287
+ </ul>
288
+ </div>
289
+ </div>
290
+ </div>
291
+
292
+ <!-- Other Treatments -->
293
+ <div class="text-center mb-12 fade-in" style="transition-delay: 0.2s;">
294
+ <h3 class="title-font text-2xl md:text-3xl font-bold mb-6">Additional Services</h3>
295
+ <p class="max-w-2xl mx-auto mb-8">
296
+ Complete your beauty journey with our comprehensive range of treatments.
297
+ </p>
298
+ </div>
299
+
300
+ <div class="grid md:grid-cols-3 gap-8">
301
+ <!-- Facial Treatment -->
302
+ <div class="bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300 treatment-card fade-in" style="transition-delay: 0.3s;">
303
+ <div class="p-8 h-full flex flex-col">
304
+ <div class="text-pink-500 text-4xl mb-6">
305
+ <i class="fas fa-spa"></i>
306
+ </div>
307
+ <h3 class="title-font text-xl font-bold mb-4">Signature Facial</h3>
308
+ <p class="mb-6 text-gray-600 flex-grow">
309
+ Customized facial treatment targeting your specific skin concerns with premium products.
310
+ </p>
311
+ <div class="mt-auto">
312
+ <div class="flex justify-between items-center">
313
+ <span class="text-lg font-bold text-pink-600">From €65</span>
314
+ <a href="#contact" class="text-sm text-pink-600 hover:text-pink-700 font-bold flex items-center">
315
+ Book <i class="fas fa-arrow-right ml-1"></i>
316
+ </a>
317
+ </div>
318
+ </div>
319
+ </div>
320
+ </div>
321
+
322
+ <!-- Advanced Treatment -->
323
+ <div class="bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300 treatment-card fade-in" style="transition-delay: 0.4s;">
324
+ <div class="p-8 h-full flex flex-col">
325
+ <div class="text-pink-500 text-4xl mb-6">
326
+ <i class="fas fa-gem"></i>
327
+ </div>
328
+ <h3 class="title-font text-xl font-bold mb-4">Premium Hydration Facial</h3>
329
+ <p class="mb-6 text-gray-600 flex-grow">
330
+ Intensive hydration treatment with advanced serums for maximum moisture retention.
331
+ </p>
332
+ <div class="mt-auto">
333
+ <div class="flex justify-between items-center">
334
+ <span class="text-lg font-bold text-pink-600">From €149</span>
335
+ <a href="#contact" class="text-sm text-pink-600 hover:text-pink-700 font-bold flex items-center">
336
+ Book <i class="fas fa-arrow-right ml-1"></i>
337
+ </a>
338
+ </div>
339
+ </div>
340
+ </div>
341
+ </div>
342
+
343
+ <!-- Body Treatment -->
344
+ <div class="bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300 treatment-card fade-in" style="transition-delay: 0.5s;">
345
+ <div class="p-8 h-full flex flex-col">
346
+ <div class="text-pink-500 text-4xl mb-6">
347
+ <i class="fas fa-leaf"></i>
348
+ </div>
349
+ <h3 class="title-font text-xl font-bold mb-4">Detox Body Treatment</h3>
350
+ <p class="mb-6 text-gray-600 flex-grow">
351
+ Full-body exfoliation and hydration for soft, supple skin with long-lasting results.
352
+ </p>
353
+ <div class="mt-auto">
354
+ <div class="flex justify-between items-center">
355
+ <span class="text-lg font-bold text-pink-600">From €99</span>
356
+ <a href="#contact" class="text-sm text-pink-600 hover:text-pink-700 font-bold flex items-center">
357
+ Book <i class="fas fa-arrow-right ml-1"></i>
358
+ </a>
359
+ </div>
360
+ </div>
361
+ </div>
362
+ </div>
363
+ </div>
364
+ </div>
365
+ </section>
366
+
367
+ <!-- Results Section -->
368
+ <section id="results" class="py-20 bg-white">
369
+ <div class="container mx-auto px-4">
370
+ <div class="text-center mb-16 fade-in">
371
+ <h2 class="title-font text-3xl md:text-4xl font-bold mb-4">Visible Results</h2>
372
+ <div class="w-24 h-1 bg-pink-500 mx-auto mb-6"></div>
373
+ <p class="max-w-2xl mx-auto text-lg">
374
+ Our clients experience dramatic improvements in their skin's health and appearance.
375
+ </p>
376
+ </div>
377
+
378
+ <div class="grid md:grid-cols-2 gap-12 items-center mb-12">
379
+ <div class="fade-in">
380
+ <h3 class="title-font text-2xl font-bold mb-4">Before & After</h3>
381
+ <p class="mb-6 text-gray-600 leading-relaxed">
382
+ These real client results showcase the transformative power of our Aquafacial treatments.
383
+ Each treatment is customized to address individual skin concerns.
384
+ </p>
385
+ <div class="mb-8">
386
+ <div class="flex items-center mb-4">
387
+ <div class="w-12 h-12 rounded-full bg-pink-100 flex items-center justify-center text-pink-600 mr-4">
388
+ <i class="fas fa-check text-xl"></i>
389
+ </div>
390
+ <p class="font-medium">94% of clients see immediate results after first treatment</p>
391
+ </div>
392
+ <div class="flex items-center mb-4">
393
+ <div class="w-12 h-12 rounded-full bg-pink-100 flex items-center justify-center text-pink-600 mr-4">
394
+ <i class="fas fa-check text-xl"></i>
395
+ </div>
396
+ <p class="font-medium">100% satisfaction rate for hydration improvement</p>
397
+ </div>
398
+ <div class="flex items-center">
399
+ <div class="w-12 h-12 rounded-full bg-pink-100 flex items-center justify-center text-pink-600 mr-4">
400
+ <i class="fas fa-check text-xl"></i>
401
+ </div>
402
+ <p class="font-medium">87% reduction in visible pores after 3 treatments</p>
403
+ </div>
404
+ </div>
405
+ <a href="#contact" class="inline-block bg-pink-600 hover:bg-pink-700 text-white font-bold py-3 px-8 rounded-full transition duration-300 transform hover:scale-105 shadow-lg">
406
+ Get Your Transformation
407
+ </a>
408
+ </div>
409
+ <div class="grid grid-cols-2 gap-4 fade-in" style="transition-delay: 0.2s;">
410
+ <div class="relative group overflow-hidden rounded-xl shadow-xl">
411
+ <img src="https://images.unsplash.com/photo-1565299624946-b28f40a0ae38" alt="Before treatment" class="w-full h-64 object-cover before-after-img">
412
+ <div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-300">
413
+ <span class="text-white font-bold text-xl bg-black bg-opacity-70 px-4 py-2 rounded-full">Before</span>
414
+ </div>
415
+ </div>
416
+ <div class="relative group overflow-hidden rounded-xl shadow-xl">
417
+ <img src="https://images.unsplash.com/photo-1515886657613-9f3515b0c78f" alt="After treatment" class="w-full h-64 object-cover before-after-img">
418
+ <div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-300">
419
+ <span class="text-white font-bold text-xl bg-black bg-opacity-70 px-4 py-2 rounded-full">After</span>
420
+ </div>
421
+ </div>
422
+ <div class="relative group overflow-hidden rounded-xl shadow-xl">
423
+ <img src="https://images.unsplash.com/photo-1524504388940-b1c1722653e1" alt="Before treatment" class="w-full h-64 object-cover before-after-img">
424
+ <div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-300">
425
+ <span class="text-white font-bold text-xl bg-black bg-opacity-70 px-4 py-2 rounded-full">Before</span>
426
+ </div>
427
+ </div>
428
+ <div class="relative group overflow-hidden rounded-xl shadow-xl">
429
+ <img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb" alt="After treatment" class="w-full h-64 object-cover before-after-img">
430
+ <div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-300">
431
+ <span class="text-white font-bold text-xl bg-black bg-opacity-70 px-4 py-2 rounded-full">After</span>
432
+ </div>
433
+ </div>
434
+ </div>
435
+ </div>
436
+
437
+ <!-- Testimonials -->
438
+ <div class="text-center mb-8 fade-in" style="transition-delay: 0.2s;">
439
+ <h3 class="title-font text-2xl md:text-3xl font-bold mb-4">What Our Clients Say</h3>
440
+ <div class="w-24 h-1 bg-pink-500 mx-auto mb-6"></div>
441
+ </div>
442
+
443
+ <div class="grid md:grid-cols-3 gap-8">
444
+ <!-- Testimonial 1 -->
445
+ <div class="bg-gray-50 rounded-xl p-8 shadow-sm testimonial-card fade-in" style="transition-delay: 0.3s;">
446
+ <div class="text-yellow-400 mb-4">
447
+ <i class="fas fa-star"></i>
448
+ <i class="fas fa-star"></i>
449
+ <i class="fas fa-star"></i>
450
+ <i class="fas fa-star"></i>
451
+ <i class="fas fa-star"></i>
452
+ </div>
453
+ <p class="mb-6 italic text-gray-600">
454
+ "The Aquafacial transformed my skin completely! Hafida is a true professional who knows exactly what my skin needed. My complexion has never looked better!"
455
+ </p>
456
+ <div class="flex items-center">
457
+ <div class="w-12 h-12 rounded-full bg-gray-300 mr-4 overflow-hidden">
458
+ <img src="https://randomuser.me/api/portraits/women/45.jpg" alt="Sarah M." class="w-full h-full object-cover">
459
+ </div>
460
+ <div>
461
+ <h4 class="font-bold">Sarah M.</h4>
462
+ <p class="text-sm text-gray-500">Frankfurt</p>
463
+ </div>
464
+ </div>
465
+ </div>
466
+
467
+ <!-- Testimonial 2 -->
468
+ <div class="bg-gray-50 rounded-xl p-8 shadow-sm testimonial-card fade-in" style="transition-delay: 0.4s;">
469
+ <div class="text-yellow-400 mb-4">
470
+ <i class="fas fa-star"></i>
471
+ <i class="fas fa-star"></i>
472
+ <i class="fas fa-star"></i>
473
+ <i class="fas fa-star"></i>
474
+ <i class="fas fa-star"></i>
475
+ </div>
476
+ <p class="mb-6 italic text-gray-600">
477
+ "I've struggled with acne for years. After just two sessions at Hafida's Beauty Room, my skin has never looked better! The results are incredible."
478
+ </p>
479
+ <div class="flex items-center">
480
+ <div class="w-12 h-12 rounded-full bg-gray-300 mr-4 overflow-hidden">
481
+ <img src="https://randomuser.me/api/portraits/women/33.jpg" alt="Anna K." class="w-full h-full object-cover">
482
+ </div>
483
+ <div>
484
+ <h4 class="font-bold">Anna K.</h4>
485
+ <p class="text-sm text-gray-500">Frankfurt</p>
486
+ </div>
487
+ </div>
488
+ </div>
489
+
490
+ <!-- Testimonial 3 -->
491
+ <div class="bg-gray-50 rounded-xl p-8 shadow-sm testimonial-card fade-in" style="transition-delay: 0.5s;">
492
+ <div class="text-yellow-400 mb-4">
493
+ <i class="fas fa-star"></i>
494
+ <i class="fas fa-star"></i>
495
+ <i class="fas fa-star"></i>
496
+ <i class="fas fa-star"></i>
497
+ <i class="fas fa-star-half-alt"></i>
498
+ </div>
499
+ <p class="mb-6 italic text-gray-600">
500
+ "The best facial experience I've ever had. The salon is beautiful and Hafida makes you feel completely at ease. My skin is glowing and I can't wait to come back!"
501
+ </p>
502
+ <div class="flex items-center">
503
+ <div class="w-12 h-12 rounded-full bg-gray-300 mr-4 overflow-hidden">
504
+ <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Maria S." class="w-full h-full object-cover">
505
+ </div>
506
+ <div>
507
+ <h4 class="font-bold">Maria S.</h4>
508
+ <p class="text-sm text-gray-500">Frankfurt</p>
509
+ </div>
510
+ </div>
511
+ </div>
512
+ </div>
513
+ </div>
514
+ </section>
515
+
516
+ <!-- Contact Section -->
517
+ <section id="contact" class="py-20 bg-pink-50">
518
+ <div class="container mx-auto px-4">
519
+ <div class="text-center mb-16 fade-in">
520
+ <h2 class="title-font text-3xl md:text-4xl font-bold mb-4">Termin buchen</h2>
521
+ <div class="w-24 h-1 bg-pink-500 mx-auto mb-6"></div>
522
+ <p class="max-w-2xl mx-auto text-lg">
523
+ Kontaktieren Sie uns für eine persönliche Hautberatung.
524
+ </p>
525
+ </div>
526
+
527
+ <div class="flex flex-col lg:flex-row gap-12">
528
+ <div class="lg:w-1/2 fade-in">
529
+ <div class="bg-white rounded-xl shadow-lg p-8">
530
+ <h3 class="title-font text-2xl font-bold mb-6">Send Us a Message</h3>
531
+ <form id="contact-form">
532
+ <div class="mb-6">
533
+ <label for="name" class="block text-gray-700 font-medium mb-2">Full Name *</label>
534
+ <input type="text" id="name" class="w-full px-4 py-3 border rounded-lg form-input focus:border-pink-300" required>
535
+ </div>
536
+ <div class="mb-6">
537
+ <label for="email" class="block text-gray-700 font-medium mb-2">Email Address *</label>
538
+ <input type="email" id="email" class="w-full px-4 py-3 border rounded-lg form-input focus:border-pink-300" required>
539
+ </div>
540
+ <div class="mb-6">
541
+ <label for="phone" class="block text-gray-700 font-medium mb-2">Phone Number</label>
542
+ <input type="tel" id="phone" class="w-full px-4 py-3 border rounded-lg form-input focus:border-pink-300">
543
+ </div>
544
+ <div class="mb-6">
545
+ <label for="treatment" class="block text-gray-700 font-medium mb-2">Treatment Interest *</label>
546
+ <select id="treatment" class="w-full px-4 py-3 border rounded-lg form-input focus:border-pink-300" required>
547
+ <option value="">Select a treatment</option>
548
+ <option value="aquafacial">Aquafacial</option>
549
+ <option value="signature-facial">Signature Facial</option>
550
+ <option value="premium-hydration">Premium Hydration Facial</option>
551
+ <option value="body-treatment">Detox Body Treatment</option>
552
+ <option value="consultation">Skin Consultation</option>
553
+ </select>
554
+ </div>
555
+ <div class="mb-6">
556
+ <label for="message" class="block text-gray-700 font-medium mb-2">Your Message</label>
557
+ <textarea id="message" rows="4" class="w-full px-4 py-3 border rounded-lg form-input focus:border-pink-300"></textarea>
558
+ </div>
559
+ <button type="submit" class="w-full bg-pink-600 hover:bg-pink-700 text-white font-bold py-4 px-6 rounded-full transition duration-300 transform hover:scale-105 shadow-lg">
560
+ Send Message
561
+ </button>
562
+ </form>
563
+ </div>
564
+ </div>
565
+
566
+ <div class="lg:w-1/2">
567
+ <div class="bg-white rounded-xl shadow-lg p-8 mb-8 fade-in" style="transition-delay: 0.2s;">
568
+ <h3 class="title-font text-2xl font-bold mb-6">Contact Information</h3>
569
+ <div class="space-y-6">
570
+ <div class="flex items-start">
571
+ <div class="text-pink-500 text-xl mr-4 mt-1">
572
+ <i class="fas fa-map-marker-alt"></i>
573
+ </div>
574
+ <div>
575
+ <h4 class="font-bold mb-1">Location</h4>
576
+ <p class="text-gray-600">Frankfurt am Main, Germany</p>
577
+ </div>
578
+ </div>
579
+ <div class="flex items-start">
580
+ <div class="text-pink-500 text-xl mr-4 mt-1">
581
+ <i class="fas fa-envelope"></i>
582
+ </div>
583
+ <div>
584
+ <h4 class="font-bold mb-1">Email</h4>
585
+ <p class="text-gray-600">info@hafidasbeautyroom.com</p>
586
+ </div>
587
+ </div>
588
+ <div class="flex items-start">
589
+ <div class="text-pink-500 text-xl mr-4 mt-1">
590
+ <i class="fas fa-phone"></i>
591
+ </div>
592
+ <div>
593
+ <h4 class="font-bold mb-1">Phone</h4>
594
+ <p class="text-gray-600">+49 69 12345678</p>
595
+ </div>
596
+ </div>
597
+ <div class="flex items-start">
598
+ <div class="text-pink-500 text-xl mr-4 mt-1">
599
+ <i class="fas fa-clock"></i>
600
+ </div>
601
+ <div>
602
+ <h4 class="font-bold mb-1">Working Hours</h4>
603
+ <p class="text-gray-600">Monday - Friday: 10:00 - 19:00</p>
604
+ <p class="text-gray-600">Saturday: 10:00 - 16:00</p>
605
+ <p class="text-gray-600">Sunday: Closed</p>
606
+ </div>
607
+ </div>
608
+ </div>
609
+ </div>
610
+
611
+ <div class="bg-white rounded-xl shadow-lg p-8 fade-in" style="transition-delay: 0.3s;">
612
+ <h3 class="title-font text-2xl font-bold mb-6">Find Us</h3>
613
+ <div class="aspect-w-16 aspect-h-9 rounded-lg overflow-hidden">
614
+ <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d4368.767997479067!2d8.682500476722533!3d50.10865307170289!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47bd09503d4a38e9%3A0x422ac5a76e7a40!2sFrankfurt%20am%20Main%2C%20Germany!5e0!3m2!1sen!2sus!4v1623750000000!5m2!1sen!2sus" width="100%" height="300" style="border:0;" allowfullscreen="" loading="lazy" class="rounded-lg"></iframe>
615
+ </div>
616
+ </div>
617
+ </div>
618
+ </div>
619
+ </div>
620
+ </section>
621
+
622
+ <!-- Newsletter Section -->
623
+ <section class="py-16 bg-pink-600 text-white">
624
+ <div class="container mx-auto px-4 text-center fade-in">
625
+ <h2 class="title-font text-3xl font-bold mb-4">Join Our Beauty Community</h2>
626
+ <p class="max-w-2xl mx-auto mb-8">
627
+ Subscribe to receive exclusive offers, skincare tips, and updates on new treatments.
628
+ </p>
629
+ <form class="max-w-md mx-auto flex flex-col sm:flex-row gap-4">
630
+ <input type="email" placeholder="Your email address" class="flex-grow px-4 py-3 rounded-lg focus:outline-none text-gray-800">
631
+ <button type="submit" class="bg-white hover:bg-gray-100 text-pink-600 font-bold py-3 px-6 rounded-lg transition duration-300 transform hover:scale-105 shadow-lg">
632
+ Subscribe
633
+ </button>
634
+ </form>
635
+ </div>
636
+ </section>
637
+
638
+ <!-- Footer -->
639
+ <footer class="bg-gray-900 text-white py-12">
640
+ <div class="container mx-auto px-4">
641
+ <div class="flex flex-col md:flex-row justify-between items-start">
642
+ <div class="mb-8 md:mb-0 fade-in">
643
+ <a href="#home" class="title-font text-2xl font-bold text-white mb-4 inline-block flex items-center">
644
+ <i class="fas fa-spa mr-2"></i> Hafida's Beauty Room
645
+ </a>
646
+ <p class="text-gray-400 max-w-md">
647
+ Professional skincare treatments in Frankfurt am Main. Specializing in Aquafacial technology for radiant, healthy skin.
648
+ </p>
649
+ </div>
650
+
651
+ <div class="mb-8 md:mb-0 fade-in" style="transition-delay: 0.2s;">
652
+ <h4 class="title-font text-lg font-bold mb-4">Quick Links</h4>
653
+ <ul class="space-y-2">
654
+ <li><a href="#home" class="text-gray-400 hover:text-white transition duration-300">Home</a></li>
655
+ <li><a href="#about" class="text-gray-400 hover:text-white transition duration-300">About</a></li>
656
+ <li><a href="#treatments" class="text-gray-400 hover:text-white transition duration-300">Treatments</a></li>
657
+ <li><a href="#results" class="text-gray-400 hover:text-white transition duration-300">Results</a></li>
658
+ <li><a href="#contact" class="text-gray-400 hover:text-white transition duration-300">Contact</a></li>
659
+ </ul>
660
+ </div>
661
+
662
+ <div class="mb-8 md:mb-0 fade-in" style="transition-delay: 0.3s;">
663
+ <h4 class="title-font text-lg font-bold mb-4">Treatments</h4>
664
+ <ul class="space-y-2">
665
+ <li><a href="#treatments" class="text-gray-400 hover:text-white transition duration-300">Aquafacial</a></li>
666
+ <li><a href="#treatments" class="text-gray-400 hover:text-white transition duration-300">Signature Facial</a></li>
667
+ <li><a href="#treatments" class="text-gray-400 hover:text-white transition duration-300">Hydration Facial</a></li>
668
+ <li><a href="#treatments" class="text-gray-400 hover:text-white transition duration-300">Detox Body Treatment</a></li>
669
+ </ul>
670
+ </div>
671
+
672
+ <div class="fade-in" style="transition-delay: 0.4s;">
673
+ <h4 class="title-font text-lg font-bold mb-4">Connect With Us</h4>
674
+ <div class="flex space-x-4 mb-4">
675
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center text-white hover:bg-pink-600 transition duration-300 social-icon">
676
+ <i class="fab fa-facebook-f"></i>
677
+ </a>
678
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center text-white hover:bg-pink-600 transition duration-300 social-icon">
679
+ <i class="fab fa-instagram"></i>
680
+ </a>
681
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center text-white hover:bg-pink-600 transition duration-300 social-icon">
682
+ <i class="fab fa-tiktok"></i>
683
+ </a>
684
+ </div>
685
+ <p class="text-gray-400">Listed on Beautinda since 2024</p>
686
+ </div>
687
+ </div>
688
+
689
+ <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400 fade-in" style="transition-delay: 0.5s;">
690
+ <p>&copy; 2024 Hafida's Beauty Room. All rights reserved.</p>
691
+ <div class="flex justify-center space-x-4 mt-4">
692
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">Privacy Policy</a>
693
+ <span>•</span>
694
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">Terms of Service</a>
695
+ </div>
696
+ </div>
697
+ </div>
698
+ </footer>
699
+
700
+ <!-- Floating Social Media Buttons -->
701
+ <div class="fixed left-8 bottom-8 z-50 space-y-4 fade-in" style="transition-delay: 0.6s;">
702
+ <div class="flex flex-col items-center space-y-3">
703
+ <a href="https://www.instagram.com/yourusername" class="bg-gradient-to-br from-purple-500 to-pink-600 hover:from-purple-600 hover:to-pink-700 text-white w-12 h-12 rounded-full flex items-center justify-center shadow-xl transition duration-300 transform hover:scale-110">
704
+ <i class="fab fa-instagram text-xl"></i>
705
+ </a>
706
+ <a href="https://www.facebook.com/yourusername" class="bg-blue-600 hover:bg-blue-700 text-white w-12 h-12 rounded-full flex items-center justify-center shadow-xl transition duration-300 transform hover:scale-110">
707
+ <i class="fab fa-facebook-f text-xl"></i>
708
+ </a>
709
+ <a href="mailto:info@hafidasbeautyroom.com" class="bg-gray-700 hover:bg-gray-800 text-white w-12 h-12 rounded-full flex items-center justify-center shadow-xl transition duration-300 transform hover:scale-110">
710
+ <i class="fas fa-envelope text-xl"></i>
711
+ </a>
712
+ <a href="https://wa.me/496912345678" class="bg-green-500 hover:bg-green-600 text-white w-12 h-12 rounded-full flex items-center justify-center shadow-xl transition duration-300 transform hover:scale-110">
713
+ <i class="fab fa-whatsapp text-xl"></i>
714
+ </a>
715
+ </div>
716
+ </div>
717
+
718
+ <!-- Floating WhatsApp Button (right side) -->
719
+ <div class="fixed bottom-8 right-8 z-50 fade-in" style="transition-delay: 0.7s;">
720
+ <a href="https://wa.me/496912345678" class="bg-green-500 hover:bg-green-600 text-white w-16 h-16 rounded-full flex items-center justify-center shadow-xl transition duration-300 transform hover:scale-110">
721
+ <i class="fab fa-whatsapp text-2xl"></i>
722
+ </a>
723
+ </div>
724
+
725
+ <script>
726
+ // Mobile menu toggle
727
+ document.getElementById('menu-toggle').addEventListener('click', function() {
728
+ const menu = document.getElementById('mobile-menu');
729
+ menu.classList.toggle('hidden');
730
+ });
731
+
732
+ // Smooth scrolling for anchor links
733
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
734
+ anchor.addEventListener('click', function (e) {
735
+ e.preventDefault();
736
+
737
+ const targetId = this.getAttribute('href');
738
+ const targetElement = document.querySelector(targetId);
739
+
740
+ if (targetElement) {
741
+ window.scrollTo({
742
+ top: targetElement.offsetTop - 80,
743
+ behavior: 'smooth'
744
+ });
745
+
746
+ // Close mobile menu if open
747
+ const mobileMenu = document.getElementById('mobile-menu');
748
+ mobileMenu.classList.add('hidden');
749
+ }
750
+ });
751
+ });
752
+
753
+ // Scroll animation
754
+ function checkScroll() {
755
+ const elements = document.querySelectorAll('.fade-in');
756
+ const windowHeight = window.innerHeight;
757
+
758
+ elements.forEach(element => {
759
+ const elementPosition = element.getBoundingClientRect().top;
760
+
761
+ if (elementPosition < windowHeight - 100) {
762
+ element.classList.add('show');
763
+ }
764
+ });
765
+ }
766
+
767
+ // Run on initial load
768
+ window.addEventListener('load', checkScroll);
769
+ // Run on scroll
770
+ window.addEventListener('scroll', checkScroll);
771
+
772
+ // Form submission
773
+ document.getElementById('contact-form').addEventListener('submit', function(e) {
774
+ e.preventDefault();
775
+
776
+ // Here you would normally send the form data to your server
777
+ // For this example, we'll just show an alert
778
+ alert('Thank you for your message! We will contact you shortly.');
779
+
780
+ // Reset the form
781
+ this.reset();
782
+ });
783
+ </script>
784
+ <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=mobenta/bvcxvcxvcx" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
785
+ </html>