Hugging Face's logo

Spaces:
robertosousa
/
lp-teste-teste
Running

App Files Community
robertosousa commited on
Commit
01b0aad
·
verified ·
1 Parent(s): 0979457

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +525 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Lp Teste Teste
3
- emoji: 🔥
4
- colorFrom: gray
5
- colorTo: pink
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: lp-teste-teste
3
+ emoji: 🐳
4
+ colorFrom: red
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,525 @@
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>Chronos Luxe | Timeless Elegance Redefined</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=Montserrat:wght@300;400;500;600&display=swap');
11
+
12
+ body {
13
+ font-family: 'Montserrat', sans-serif;
14
+ background-color: #f9f7f4;
15
+ color: #333;
16
+ }
17
+
18
+ .hero {
19
+ background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://images.unsplash.com/photo-1523170335258-f5ed118494a8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1480&q=80');
20
+ background-size: cover;
21
+ background-position: center;
22
+ min-height: 90vh;
23
+ }
24
+
25
+ .h-font {
26
+ font-family: 'Playfair Display', serif;
27
+ }
28
+
29
+ .watch-card:hover {
30
+ transform: translateY(-10px);
31
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
32
+ }
33
+
34
+ .watch-card {
35
+ transition: all 0.3s ease;
36
+ }
37
+
38
+ .countdown-item {
39
+ background: rgba(255, 255, 255, 0.1);
40
+ backdrop-filter: blur(10px);
41
+ }
42
+
43
+ .testimonial-card {
44
+ background: rgba(255, 255, 255, 0.8);
45
+ backdrop-filter: blur(5px);
46
+ }
47
+
48
+ .cta-section {
49
+ background: linear-gradient(135deg, #1a1a1a 0%, #3a3a3a 100%);
50
+ }
51
+
52
+ .floating-label {
53
+ transform: translateY(-50%);
54
+ left: 15px;
55
+ transition: all 0.3s ease;
56
+ pointer-events: none;
57
+ }
58
+
59
+ input:focus + .floating-label,
60
+ input:not(:placeholder-shown) + .floating-label {
61
+ transform: translateY(-120%) scale(0.9);
62
+ background: white;
63
+ padding: 0 5px;
64
+ color: #555;
65
+ }
66
+ </style>
67
+ </head>
68
+ <body>
69
+ <!-- Navigation -->
70
+ <nav class="bg-white shadow-md fixed w-full z-50">
71
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
72
+ <div class="flex justify-between h-20 items-center">
73
+ <div class="flex-shrink-0 flex items-center">
74
+ <span class="h-font text-2xl font-bold text-gray-900">CHRONOS LUXE</span>
75
+ </div>
76
+ <div class="hidden md:block">
77
+ <div class="ml-10 flex items-center space-x-8">
78
+ <a href="#collections" class="text-gray-700 hover:text-gray-900 px-3 py-2 text-sm font-medium">Collections</a>
79
+ <a href="#craftsmanship" class="text-gray-700 hover:text-gray-900 px-3 py-2 text-sm font-medium">Craftsmanship</a>
80
+ <a href="#testimonials" class="text-gray-700 hover:text-gray-900 px-3 py-2 text-sm font-medium">Testimonials</a>
81
+ <a href="#contact" class="text-gray-700 hover:text-gray-900 px-3 py-2 text-sm font-medium">Contact</a>
82
+ </div>
83
+ </div>
84
+ <div class="hidden md:block">
85
+ <button class="bg-black text-white px-6 py-2 rounded-full text-sm font-medium hover:bg-gray-800 transition duration-300">
86
+ Book Appointment
87
+ </button>
88
+ </div>
89
+ <div class="md:hidden">
90
+ <button id="menu-toggle" class="text-gray-700">
91
+ <i class="fas fa-bars text-2xl"></i>
92
+ </button>
93
+ </div>
94
+ </div>
95
+ </div>
96
+
97
+ <!-- Mobile menu -->
98
+ <div id="mobile-menu" class="md:hidden hidden bg-white shadow-lg">
99
+ <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
100
+ <a href="#collections" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-gray-900">Collections</a>
101
+ <a href="#craftsmanship" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-gray-900">Craftsmanship</a>
102
+ <a href="#testimonials" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-gray-900">Testimonials</a>
103
+ <a href="#contact" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-gray-900">Contact</a>
104
+ <button class="w-full bg-black text-white px-6 py-2 rounded-full text-sm font-medium hover:bg-gray-800 transition duration-300 mt-2">
105
+ Book Appointment
106
+ </button>
107
+ </div>
108
+ </div>
109
+ </nav>
110
+
111
+ <!-- Hero Section -->
112
+ <section class="hero flex items-center justify-center text-center text-white pt-20">
113
+ <div class="max-w-4xl px-6 py-16 sm:py-24 lg:py-32">
114
+ <h1 class="h-font text-4xl md:text-6xl font-bold mb-6">Timeless Elegance Redefined</h1>
115
+ <p class="text-lg md:text-xl mb-10">Experience the pinnacle of Swiss watchmaking with our exclusive collection of handcrafted luxury timepieces.</p>
116
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
117
+ <button class="bg-white text-black px-8 py-3 rounded-full font-medium hover:bg-gray-100 transition duration-300">
118
+ Explore Collections
119
+ </button>
120
+ <button class="border-2 border-white text-white px-8 py-3 rounded-full font-medium hover:bg-white hover:text-black transition duration-300">
121
+ Book Private Viewing
122
+ </button>
123
+ </div>
124
+
125
+ <div class="mt-16 bg-black bg-opacity-40 p-6 rounded-lg inline-block">
126
+ <p class="text-sm uppercase tracking-wider mb-2">Limited Time Offer</p>
127
+ <div class="flex justify-center gap-4">
128
+ <div class="countdown-item rounded-full w-16 h-16 flex flex-col items-center justify-center">
129
+ <span id="days" class="text-2xl font-bold">00</span>
130
+ <span class="text-xs">Days</span>
131
+ </div>
132
+ <div class="countdown-item rounded-full w-16 h-16 flex flex-col items-center justify-center">
133
+ <span id="hours" class="text-2xl font-bold">00</span>
134
+ <span class="text-xs">Hours</span>
135
+ </div>
136
+ <div class="countdown-item rounded-full w-16 h-16 flex flex-col items-center justify-center">
137
+ <span id="minutes" class="text-2xl font-bold">00</span>
138
+ <span class="text-xs">Minutes</span>
139
+ </div>
140
+ <div class="countdown-item rounded-full w-16 h-16 flex flex-col items-center justify-center">
141
+ <span id="seconds" class="text-2xl font-bold">00</span>
142
+ <span class="text-xs">Seconds</span>
143
+ </div>
144
+ </div>
145
+ <p class="mt-4 text-sm">Complimentary engraving on all purchases</p>
146
+ </div>
147
+ </div>
148
+ </section>
149
+
150
+ <!-- Featured Collections -->
151
+ <section id="collections" class="py-20 bg-white">
152
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
153
+ <div class="text-center mb-16">
154
+ <h2 class="h-font text-3xl md:text-4xl font-bold mb-4">Our Signature Collections</h2>
155
+ <p class="max-w-2xl mx-auto text-gray-600">Each timepiece is a masterpiece of precision engineering and artistic design</p>
156
+ </div>
157
+
158
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
159
+ <!-- Collection 1 -->
160
+ <div class="watch-card bg-gray-50 rounded-lg overflow-hidden shadow-lg">
161
+ <div class="relative overflow-hidden h-80">
162
+ <img src="https://images.unsplash.com/photo-1524592094714-0f0654e20314?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80"
163
+ alt="Heritage Collection" class="w-full h-full object-cover transition duration-500 hover:scale-105">
164
+ <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div>
165
+ <div class="absolute bottom-0 left-0 p-6 text-white">
166
+ <h3 class="h-font text-2xl font-bold mb-2">Heritage Collection</h3>
167
+ <p class="text-sm opacity-90">Starting from $8,500</p>
168
+ </div>
169
+ </div>
170
+ <div class="p-6">
171
+ <p class="text-gray-600 mb-4">Classic designs with modern precision, paying homage to traditional watchmaking.</p>
172
+ <button class="w-full border border-black text-black py-2 rounded-full hover:bg-black hover:text-white transition duration-300">
173
+ View Collection
174
+ </button>
175
+ </div>
176
+ </div>
177
+
178
+ <!-- Collection 2 -->
179
+ <div class="watch-card bg-gray-50 rounded-lg overflow-hidden shadow-lg">
180
+ <div class="relative overflow-hidden h-80">
181
+ <img src="https://images.unsplash.com/photo-1542496658-e33a6d0d50b6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
182
+ alt="Modernist Collection" class="w-full h-full object-cover transition duration-500 hover:scale-105">
183
+ <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div>
184
+ <div class="absolute bottom-0 left-0 p-6 text-white">
185
+ <h3 class="h-font text-2xl font-bold mb-2">Modernist Collection</h3>
186
+ <p class="text-sm opacity-90">Starting from $12,000</p>
187
+ </div>
188
+ </div>
189
+ <div class="p-6">
190
+ <p class="text-gray-600 mb-4">Avant-garde designs with innovative materials and cutting-edge technology.</p>
191
+ <button class="w-full border border-black text-black py-2 rounded-full hover:bg-black hover:text-white transition duration-300">
192
+ View Collection
193
+ </button>
194
+ </div>
195
+ </div>
196
+
197
+ <!-- Collection 3 -->
198
+ <div class="watch-card bg-gray-50 rounded-lg overflow-hidden shadow-lg">
199
+ <div class="relative overflow-hidden h-80">
200
+ <img src="https://images.unsplash.com/photo-1611591437281-460914d8b624?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
201
+ alt="Limited Editions" class="w-full h-full object-cover transition duration-500 hover:scale-105">
202
+ <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div>
203
+ <div class="absolute bottom-0 left-0 p-6 text-white">
204
+ <h3 class="h-font text-2xl font-bold mb-2">Limited Editions</h3>
205
+ <p class="text-sm opacity-90">Starting from $25,000</p>
206
+ </div>
207
+ </div>
208
+ <div class="p-6">
209
+ <p class="text-gray-600 mb-4">Exclusive numbered pieces with rare materials and exceptional complications.</p>
210
+ <button class="w-full border border-black text-black py-2 rounded-full hover:bg-black hover:text-white transition duration-300">
211
+ View Collection
212
+ </button>
213
+ </div>
214
+ </div>
215
+ </div>
216
+ </div>
217
+ </section>
218
+
219
+ <!-- Craftsmanship Section -->
220
+ <section id="craftsmanship" class="py-20 bg-gray-50">
221
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
222
+ <div class="flex flex-col lg:flex-row items-center gap-12">
223
+ <div class="lg:w-1/2">
224
+ <img src="https://images.unsplash.com/photo-1524805444758-089113d48a6d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1376&q=80"
225
+ alt="Watch Craftsmanship" class="rounded-lg shadow-xl w-full">
226
+ </div>
227
+ <div class="lg:w-1/2">
228
+ <h2 class="h-font text-3xl md:text-4xl font-bold mb-6">Uncompromising Craftsmanship</h2>
229
+ <p class="text-gray-600 mb-8">Each Chronos Luxe timepiece is the result of hundreds of hours of meticulous handcrafting by our master watchmakers in Switzerland.</p>
230
+
231
+ <div class="space-y-6">
232
+ <div class="flex items-start">
233
+ <div class="flex-shrink-0 bg-black rounded-full p-3 text-white mr-4">
234
+ <i class="fas fa-gem"></i>
235
+ </div>
236
+ <div>
237
+ <h3 class="h-font text-xl font-semibold mb-2">Premium Materials</h3>
238
+ <p class="text-gray-600">We use only the finest 18k gold, platinum, and ethically sourced diamonds in our creations.</p>
239
+ </div>
240
+ </div>
241
+
242
+ <div class="flex items-start">
243
+ <div class="flex-shrink-0 bg-black rounded-full p-3 text-white mr-4">
244
+ <i class="fas fa-cogs"></i>
245
+ </div>
246
+ <div>
247
+ <h3 class="h-font text-xl font-semibold mb-2">Swiss Movement</h3>
248
+ <p class="text-gray-600">Precision-engineered mechanical movements with up to 5 days power reserve.</p>
249
+ </div>
250
+ </div>
251
+
252
+ <div class="flex items-start">
253
+ <div class="flex-shrink-0 bg-black rounded-full p-3 text-white mr-4">
254
+ <i class="fas fa-certificate"></i>
255
+ </div>
256
+ <div>
257
+ <h3 class="h-font text-xl font-semibold mb-2">5-Year Warranty</h3>
258
+ <p class="text-gray-600">Every watch comes with our comprehensive warranty and lifetime servicing.</p>
259
+ </div>
260
+ </div>
261
+ </div>
262
+
263
+ <button class="mt-8 bg-black text-white px-8 py-3 rounded-full font-medium hover:bg-gray-800 transition duration-300">
264
+ Discover Our Process
265
+ </button>
266
+ </div>
267
+ </div>
268
+ </div>
269
+ </section>
270
+
271
+ <!-- Testimonials -->
272
+ <section id="testimonials" class="py-20 bg-white">
273
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
274
+ <div class="text-center mb-16">
275
+ <h2 class="h-font text-3xl md:text-4xl font-bold mb-4">Client Testimonials</h2>
276
+ <p class="max-w-2xl mx-auto text-gray-600">Hear from our distinguished clients about their Chronos Luxe experience</p>
277
+ </div>
278
+
279
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
280
+ <!-- Testimonial 1 -->
281
+ <div class="testimonial-card p-8 rounded-lg shadow-lg">
282
+ <div class="flex items-center mb-4">
283
+ <div class="w-12 h-12 rounded-full overflow-hidden mr-4">
284
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="James Wilson" class="w-full h-full object-cover">
285
+ </div>
286
+ <div>
287
+ <h4 class="h-font font-semibold">James Wilson</h4>
288
+ <p class="text-gray-500 text-sm">CEO, Wilson Holdings</p>
289
+ </div>
290
+ </div>
291
+ <p class="text-gray-600 mb-4">"The attention to detail in my Chronos Luxe timepiece is unparalleled. It's not just a watch, it's a legacy piece I'll pass down to my son."</p>
292
+ <div class="flex text-yellow-400">
293
+ <i class="fas fa-star"></i>
294
+ <i class="fas fa-star"></i>
295
+ <i class="fas fa-star"></i>
296
+ <i class="fas fa-star"></i>
297
+ <i class="fas fa-star"></i>
298
+ </div>
299
+ </div>
300
+
301
+ <!-- Testimonial 2 -->
302
+ <div class="testimonial-card p-8 rounded-lg shadow-lg">
303
+ <div class="flex items-center mb-4">
304
+ <div class="w-12 h-12 rounded-full overflow-hidden mr-4">
305
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Sarah Chen" class="w-full h-full object-cover">
306
+ </div>
307
+ <div>
308
+ <h4 class="h-font font-semibold">Sarah Chen</h4>
309
+ <p class="text-gray-500 text-sm">Fashion Designer</p>
310
+ </div>
311
+ </div>
312
+ <p class="text-gray-600 mb-4">"I own watches from all the major brands, but my Chronos Luxe gets the most compliments. The craftsmanship is simply breathtaking."</p>
313
+ <div class="flex text-yellow-400">
314
+ <i class="fas fa-star"></i>
315
+ <i class="fas fa-star"></i>
316
+ <i class="fas fa-star"></i>
317
+ <i class="fas fa-star"></i>
318
+ <i class="fas fa-star"></i>
319
+ </div>
320
+ </div>
321
+
322
+ <!-- Testimonial 3 -->
323
+ <div class="testimonial-card p-8 rounded-lg shadow-lg">
324
+ <div class="flex items-center mb-4">
325
+ <div class="w-12 h-12 rounded-full overflow-hidden mr-4">
326
+ <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Michael Rodriguez" class="w-full h-full object-cover">
327
+ </div>
328
+ <div>
329
+ <h4 class="h-font font-semibold">Michael Rodriguez</h4>
330
+ <p class="text-gray-500 text-sm">Professional Athlete</p>
331
+ </div>
332
+ </div>
333
+ <p class="text-gray-600 mb-4">"The personalized service I received when selecting my watch was exceptional. They took the time to understand exactly what I wanted."</p>
334
+ <div class="flex text-yellow-400">
335
+ <i class="fas fa-star"></i>
336
+ <i class="fas fa-star"></i>
337
+ <i class="fas fa-star"></i>
338
+ <i class="fas fa-star"></i>
339
+ <i class="fas fa-star-half-alt"></i>
340
+ </div>
341
+ </div>
342
+ </div>
343
+ </div>
344
+ </section>
345
+
346
+ <!-- CTA Section -->
347
+ <section class="cta-section py-20 text-white">
348
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
349
+ <div class="text-center mb-12">
350
+ <h2 class="h-font text-3xl md:text-4xl font-bold mb-4">Experience Chronos Luxe</h2>
351
+ <p class="max-w-2xl mx-auto opacity-80">Schedule a private viewing at our boutique or with one of our personal advisors</p>
352
+ </div>
353
+
354
+ <div class="max-w-3xl mx-auto bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-xl p-8 shadow-2xl">
355
+ <form id="contact-form" class="grid grid-cols-1 md:grid-cols-2 gap-6">
356
+ <div class="relative">
357
+ <input type="text" id="name" placeholder=" " class="w-full bg-white bg-opacity-20 border-b border-white border-opacity-50 py-2 px-4 text-white focus:outline-none focus:border-opacity-100">
358
+ <label for="name" class="floating-label text-white text-opacity-80">Full Name</label>
359
+ </div>
360
+ <div class="relative">
361
+ <input type="email" id="email" placeholder=" " class="w-full bg-white bg-opacity-20 border-b border-white border-opacity-50 py-2 px-4 text-white focus:outline-none focus:border-opacity-100">
362
+ <label for="email" class="floating-label text-white text-opacity-80">Email Address</label>
363
+ </div>
364
+ <div class="relative">
365
+ <input type="tel" id="phone" placeholder=" " class="w-full bg-white bg-opacity-20 border-b border-white border-opacity-50 py-2 px-4 text-white focus:outline-none focus:border-opacity-100">
366
+ <label for="phone" class="floating-label text-white text-opacity-80">Phone Number</label>
367
+ </div>
368
+ <div class="relative">
369
+ <select id="interest" class="w-full bg-white bg-opacity-20 border-b border-white border-opacity-50 py-2 px-4 text-white focus:outline-none focus:border-opacity-100 appearance-none">
370
+ <option value="" selected disabled> </option>
371
+ <option value="heritage">Heritage Collection</option>
372
+ <option value="modernist">Modernist Collection</option>
373
+ <option value="limited">Limited Editions</option>
374
+ <option value="custom">Custom Commission</option>
375
+ </select>
376
+ <label for="interest" class="floating-label text-white text-opacity-80">Collection Interest</label>
377
+ <div class="absolute right-0 bottom-2 pointer-events-none">
378
+ <i class="fas fa-chevron-down text-white"></i>
379
+ </div>
380
+ </div>
381
+ <div class="md:col-span-2 relative">
382
+ <textarea id="message" placeholder=" " rows="3" class="w-full bg-white bg-opacity-20 border-b border-white border-opacity-50 py-2 px-4 text-white focus:outline-none focus:border-opacity-100"></textarea>
383
+ <label for="message" class="floating-label text-white text-opacity-80">Additional Notes</label>
384
+ </div>
385
+ <div class="md:col-span-2 flex items-center">
386
+ <input type="checkbox" id="consent" class="mr-2">
387
+ <label for="consent" class="text-sm opacity-80">I agree to receive communications from Chronos Luxe</label>
388
+ </div>
389
+ <div class="md:col-span-2 text-center">
390
+ <button type="submit" class="bg-white text-black px-10 py-3 rounded-full font-medium hover:bg-opacity-90 transition duration-300">
391
+ Request Appointment
392
+ </button>
393
+ </div>
394
+ </form>
395
+ </div>
396
+ </div>
397
+ </section>
398
+
399
+ <!-- Footer -->
400
+ <footer id="contact" class="bg-black text-white py-16">
401
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
402
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-12">
403
+ <div>
404
+ <h3 class="h-font text-xl font-bold mb-6">CHRONOS LUXE</h3>
405
+ <p class="text-gray-400 mb-4">Swiss precision meets timeless elegance in every Chronos Luxe timepiece.</p>
406
+ <div class="flex space-x-4">
407
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a>
408
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a>
409
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a>
410
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-pinterest"></i></a>
411
+ </div>
412
+ </div>
413
+ <div>
414
+ <h4 class="h-font font-semibold mb-6">Collections</h4>
415
+ <ul class="space-y-3">
416
+ <li><a href="#" class="text-gray-400 hover:text-white">Heritage</a></li>
417
+ <li><a href="#" class="text-gray-400 hover:text-white">Modernist</a></li>
418
+ <li><a href="#" class="text-gray-400 hover:text-white">Limited Editions</a></li>
419
+ <li><a href="#" class="text-gray-400 hover:text-white">Custom Commissions</a></li>
420
+ </ul>
421
+ </div>
422
+ <div>
423
+ <h4 class="h-font font-semibold mb-6">Company</h4>
424
+ <ul class="space-y-3">
425
+ <li><a href="#" class="text-gray-400 hover:text-white">Our Story</a></li>
426
+ <li><a href="#" class="text-gray-400 hover:text-white">Craftsmanship</a></li>
427
+ <li><a href="#" class="text-gray-400 hover:text-white">Boutiques</a></li>
428
+ <li><a href="#" class="text-gray-400 hover:text-white">Careers</a></li>
429
+ </ul>
430
+ </div>
431
+ <div>
432
+ <h4 class="h-font font-semibold mb-6">Contact</h4>
433
+ <address class="not-italic text-gray-400">
434
+ <p class="mb-2">Chronos Luxe Boutique</p>
435
+ <p class="mb-2">750 Madison Avenue</p>
436
+ <p class="mb-2">New York, NY 10065</p>
437
+ <p class="mb-4">+1 212-555-0192</p>
438
+ <a href="mailto:info@chronosluxe.com" class="text-gray-400 hover:text-white">info@chronosluxe.com</a>
439
+ </address>
440
+ </div>
441
+ </div>
442
+ <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
443
+ <p class="text-gray-500 text-sm mb-4 md:mb-0">© 2023 Chronos Luxe. All rights reserved.</p>
444
+ <div class="flex space-x-6">
445
+ <a href="#" class="text-gray-500 hover:text-white text-sm">Privacy Policy</a>
446
+ <a href="#" class="text-gray-500 hover:text-white text-sm">Terms of Service</a>
447
+ <a href="#" class="text-gray-500 hover:text-white text-sm">Cookie Policy</a>
448
+ </div>
449
+ </div>
450
+ </div>
451
+ </footer>
452
+
453
+ <!-- Success Modal -->
454
+ <div id="success-modal" class="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50 hidden">
455
+ <div class="bg-white rounded-lg p-8 max-w-md w-full mx-4 text-center">
456
+ <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-6">
457
+ <i class="fas fa-check text-green-600 text-2xl"></i>
458
+ </div>
459
+ <h3 class="h-font text-2xl font-bold mb-4">Thank You!</h3>
460
+ <p class="text-gray-600 mb-6">Your appointment request has been received. One of our personal advisors will contact you within 24 hours.</p>
461
+ <button id="close-modal" class="bg-black text-white px-6 py-2 rounded-full text-sm font-medium hover:bg-gray-800 transition duration-300">
462
+ Close
463
+ </button>
464
+ </div>
465
+ </div>
466
+
467
+ <script>
468
+ // Mobile menu toggle
469
+ document.getElementById('menu-toggle').addEventListener('click', function() {
470
+ document.getElementById('mobile-menu').classList.toggle('hidden');
471
+ });
472
+
473
+ // Countdown timer
474
+ function updateCountdown() {
475
+ const now = new Date();
476
+ const endDate = new Date();
477
+ endDate.setDate(now.getDate() + 7); // 7 days from now
478
+
479
+ const diff = endDate - now;
480
+
481
+ const days = Math.floor(diff / (1000 * 60 * 60 * 24));
482
+ const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
483
+ const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
484
+ const seconds = Math.floor((diff % (1000 * 60)) / 1000);
485
+
486
+ document.getElementById('days').textContent = days.toString().padStart(2, '0');
487
+ document.getElementById('hours').textContent = hours.toString().padStart(2, '0');
488
+ document.getElementById('minutes').textContent = minutes.toString().padStart(2, '0');
489
+ document.getElementById('seconds').textContent = seconds.toString().padStart(2, '0');
490
+ }
491
+
492
+ setInterval(updateCountdown, 1000);
493
+ updateCountdown();
494
+
495
+ // Form submission
496
+ document.getElementById('contact-form').addEventListener('submit', function(e) {
497
+ e.preventDefault();
498
+ // Here you would normally send the form data to your server
499
+ // For this demo, we'll just show the success modal
500
+ document.getElementById('success-modal').classList.remove('hidden');
501
+ });
502
+
503
+ // Close modal
504
+ document.getElementById('close-modal').addEventListener('click', function() {
505
+ document.getElementById('success-modal').classList.add('hidden');
506
+ });
507
+
508
+ // Smooth scrolling for anchor links
509
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
510
+ anchor.addEventListener('click', function (e) {
511
+ e.preventDefault();
512
+
513
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
514
+ behavior: 'smooth'
515
+ });
516
+
517
+ // Close mobile menu if open
518
+ if (!document.getElementById('mobile-menu').classList.contains('hidden')) {
519
+ document.getElementById('mobile-menu').classList.add('hidden');
520
+ }
521
+ });
522
+ });
523
+ </script>
524
+ <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=robertosousa/lp-teste-teste" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
525
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ Generate a conversion landing page for a luxury watches store