Hugging Face's logo

Spaces:
MateusBonacina
/
calafat
Running

App Files Community
MateusBonacina commited on
Commit
07ef87f
·
verified ·
1 Parent(s): 61ba429

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +658 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Calafat
3
- emoji: 🐨
4
  colorFrom: purple
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: calafat
3
+ emoji: 🐳
4
  colorFrom: purple
5
+ colorTo: red
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,658 @@
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="pt-BR">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Espaço Calafat - Eventos Especiais</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
+ .hero {
11
+ background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1519671482749-fd09be7ccebf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');
12
+ background-size: cover;
13
+ background-position: center;
14
+ }
15
+
16
+ .event-card {
17
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
18
+ }
19
+
20
+ .event-card:hover {
21
+ transform: translateY(-10px);
22
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
23
+ }
24
+
25
+ .testimonial-card {
26
+ background: rgba(255, 255, 255, 0.1);
27
+ backdrop-filter: blur(10px);
28
+ }
29
+
30
+ .gallery-item {
31
+ transition: all 0.3s ease;
32
+ }
33
+
34
+ .gallery-item:hover {
35
+ transform: scale(1.05);
36
+ z-index: 10;
37
+ }
38
+
39
+ .nav-link {
40
+ position: relative;
41
+ }
42
+
43
+ .nav-link::after {
44
+ content: '';
45
+ position: absolute;
46
+ width: 0;
47
+ height: 2px;
48
+ bottom: -2px;
49
+ left: 0;
50
+ background-color: #f3f4f6;
51
+ transition: width 0.3s ease;
52
+ }
53
+
54
+ .nav-link:hover::after {
55
+ width: 100%;
56
+ }
57
+ </style>
58
+ </head>
59
+ <body class="bg-gray-50 font-sans">
60
+ <!-- Header/Navbar -->
61
+ <header class="fixed w-full z-50 bg-white shadow-md">
62
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
63
+ <div class="flex items-center">
64
+ <div class="w-12 h-12 bg-amber-500 rounded-full flex items-center justify-center mr-3">
65
+ <i class="fas fa-glass-cheers text-white text-xl"></i>
66
+ </div>
67
+ <h1 class="text-2xl font-bold text-gray-800">Espaço <span class="text-amber-500">Calafat</span></h1>
68
+ </div>
69
+
70
+ <nav class="hidden md:flex space-x-8">
71
+ <a href="#home" class="nav-link text-gray-700 hover:text-amber-500 font-medium">Home</a>
72
+ <a href="#about" class="nav-link text-gray-700 hover:text-amber-500 font-medium">Sobre</a>
73
+ <a href="#services" class="nav-link text-gray-700 hover:text-amber-500 font-medium">Serviços</a>
74
+ <a href="#gallery" class="nav-link text-gray-700 hover:text-amber-500 font-medium">Galeria</a>
75
+ <a href="#contact" class="nav-link text-gray-700 hover:text-amber-500 font-medium">Contato</a>
76
+ </nav>
77
+
78
+ <button class="md:hidden text-gray-700" id="menu-toggle">
79
+ <i class="fas fa-bars text-2xl"></i>
80
+ </button>
81
+ </div>
82
+
83
+ <!-- Mobile Menu -->
84
+ <div class="md:hidden hidden bg-white w-full py-4 px-4 shadow-lg" id="mobile-menu">
85
+ <div class="flex flex-col space-y-4">
86
+ <a href="#home" class="text-gray-700 hover:text-amber-500 font-medium">Home</a>
87
+ <a href="#about" class="text-gray-700 hover:text-amber-500 font-medium">Sobre</a>
88
+ <a href="#services" class="text-gray-700 hover:text-amber-500 font-medium">Serviços</a>
89
+ <a href="#gallery" class="text-gray-700 hover:text-amber-500 font-medium">Galeria</a>
90
+ <a href="#contact" class="text-gray-700 hover:text-amber-500 font-medium">Contato</a>
91
+ </div>
92
+ </div>
93
+ </header>
94
+
95
+ <!-- Hero Section -->
96
+ <section id="home" class="hero min-h-screen flex items-center justify-center text-white pt-20">
97
+ <div class="container mx-auto px-4 text-center">
98
+ <h1 class="text-4xl md:text-6xl font-bold mb-6 animate-fade-in">Eventos Inesquecíveis</h1>
99
+ <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto animate-fade-in">Transformamos seus momentos especiais em memórias eternas com excelência e sofisticação.</p>
100
+ <div class="flex flex-col sm:flex-row justify-center gap-4 animate-fade-in">
101
+ <a href="#contact" class="bg-amber-500 hover:bg-amber-600 text-white font-bold py-3 px-8 rounded-full transition duration-300 transform hover:scale-105">Reserve Agora</a>
102
+ <a href="#gallery" class="bg-transparent border-2 border-white hover:bg-white hover:text-gray-800 text-white font-bold py-3 px-8 rounded-full transition duration-300 transform hover:scale-105">Ver Galeria</a>
103
+ </div>
104
+ </div>
105
+
106
+ <div class="absolute bottom-10 left-0 right-0 flex justify-center animate-bounce">
107
+ <a href="#about" class="text-white text-2xl">
108
+ <i class="fas fa-chevron-down"></i>
109
+ </a>
110
+ </div>
111
+ </section>
112
+
113
+ <!-- About Section -->
114
+ <section id="about" class="py-20 bg-white">
115
+ <div class="container mx-auto px-4">
116
+ <div class="flex flex-col lg:flex-row items-center">
117
+ <div class="lg:w-1/2 mb-10 lg:mb-0 lg:pr-10">
118
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-6">Sobre o <span class="text-amber-500">Espaço Calafat</span></h2>
119
+ <p class="text-gray-600 mb-6">Fundado em 2010, o Espaço Calafat se tornou referência em organização de eventos especiais, combinando tradição e inovação para criar experiências únicas.</p>
120
+ <p class="text-gray-600 mb-6">Nossa equipe de especialistas está comprometida em transformar sua visão em realidade, cuidando de cada detalhe para que você possa simplesmente aproveitar seu momento especial.</p>
121
+ <div class="flex flex-wrap gap-4 mb-6">
122
+ <div class="flex items-center">
123
+ <div class="w-10 h-10 bg-amber-100 rounded-full flex items-center justify-center mr-3">
124
+ <i class="fas fa-check text-amber-500"></i>
125
+ </div>
126
+ <span class="text-gray-700">Mais de 500 eventos realizados</span>
127
+ </div>
128
+ <div class="flex items-center">
129
+ <div class="w-10 h-10 bg-amber-100 rounded-full flex items-center justify-center mr-3">
130
+ <i class="fas fa-check text-amber-500"></i>
131
+ </div>
132
+ <span class="text-gray-700">Equipe especializada</span>
133
+ </div>
134
+ </div>
135
+ <a href="#contact" class="inline-block bg-amber-500 hover:bg-amber-600 text-white font-bold py-3 px-6 rounded-full transition duration-300">Saiba Mais</a>
136
+ </div>
137
+ <div class="lg:w-1/2 relative">
138
+ <div class="relative">
139
+ <img src="https://images.unsplash.com/photo-1555244162-803834f70033?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Espaço Calafat" class="rounded-lg shadow-xl w-full">
140
+ <div class="absolute -bottom-6 -right-6 bg-white p-4 rounded-lg shadow-lg hidden md:block">
141
+ <div class="flex items-center">
142
+ <div class="w-12 h-12 bg-amber-500 rounded-full flex items-center justify-center mr-3">
143
+ <i class="fas fa-award text-white text-xl"></i>
144
+ </div>
145
+ <div>
146
+ <h4 class="font-bold text-gray-800">Prêmio Excelência</h4>
147
+ <p class="text-gray-600 text-sm">Melhor Espaço para Eventos 2022</p>
148
+ </div>
149
+ </div>
150
+ </div>
151
+ </div>
152
+ </div>
153
+ </div>
154
+ </div>
155
+ </section>
156
+
157
+ <!-- Services Section -->
158
+ <section id="services" class="py-20 bg-gray-100">
159
+ <div class="container mx-auto px-4">
160
+ <div class="text-center mb-16">
161
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Nossos <span class="text-amber-500">Serviços</span></h2>
162
+ <p class="text-gray-600 max-w-2xl mx-auto">Oferecemos soluções completas para todos os tipos de eventos, desde o planejamento até a execução perfeita.</p>
163
+ </div>
164
+
165
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
166
+ <!-- Wedding Card -->
167
+ <div class="event-card bg-white rounded-xl overflow-hidden shadow-md">
168
+ <div class="h-48 bg-amber-100 flex items-center justify-center">
169
+ <i class="fas fa-ring text-amber-500 text-6xl"></i>
170
+ </div>
171
+ <div class="p-6">
172
+ <h3 class="text-xl font-bold text-gray-800 mb-3">Casamentos</h3>
173
+ <p class="text-gray-600 mb-4">Crie o casamento dos seus sonhos com nossa equipe especializada em cerimônias memoráveis.</p>
174
+ <ul class="space-y-2 mb-4">
175
+ <li class="flex items-center">
176
+ <i class="fas fa-check text-amber-500 mr-2"></i>
177
+ <span class="text-gray-700">Decoração personalizada</span>
178
+ </li>
179
+ <li class="flex items-center">
180
+ <i class="fas fa-check text-amber-500 mr-2"></i>
181
+ <span class="text-gray-700">Buffet completo</span>
182
+ </li>
183
+ <li class="flex items-center">
184
+ <i class="fas fa-check text-amber-500 mr-2"></i>
185
+ <span class="text-gray-700">Coordenação do evento</span>
186
+ </li>
187
+ </ul>
188
+ </div>
189
+ </div>
190
+
191
+ <!-- Corporate Events Card -->
192
+ <div class="event-card bg-white rounded-xl overflow-hidden shadow-md">
193
+ <div class="h-48 bg-blue-100 flex items-center justify-center">
194
+ <i class="fas fa-briefcase text-blue-500 text-6xl"></i>
195
+ </div>
196
+ <div class="p-6">
197
+ <h3 class="text-xl font-bold text-gray-800 mb-3">Eventos Corporativos</h3>
198
+ <p class="text-gray-600 mb-4">Profissionalismo e sofisticação para seus eventos de negócios e confraternizações.</p>
199
+ <ul class="space-y-2 mb-4">
200
+ <li class="flex items-center">
201
+ <i class="fas fa-check text-blue-500 mr-2"></i>
202
+ <span class="text-gray-700">Estrutura completa</span>
203
+ </li>
204
+ <li class="flex items-center">
205
+ <i class="fas fa-check text-blue-500 mr-2"></i>
206
+ <span class="text-gray-700">Tecnologia de ponta</span>
207
+ </li>
208
+ <li class="flex items-center">
209
+ <i class="fas fa-check text-blue-500 mr-2"></i>
210
+ <span class="text-gray-700">Coffee breaks premium</span>
211
+ </li>
212
+ </ul>
213
+ </div>
214
+ </div>
215
+
216
+ <!-- Graduation Card -->
217
+ <div class="event-card bg-white rounded-xl overflow-hidden shadow-md">
218
+ <div class="h-48 bg-purple-100 flex items-center justify-center">
219
+ <i class="fas fa-graduation-cap text-purple-500 text-6xl"></i>
220
+ </div>
221
+ <div class="p-6">
222
+ <h3 class="text-xl font-bold text-gray-800 mb-3">Formaturas</h3>
223
+ <p class="text-gray-600 mb-4">Celebre essa conquista importante com uma festa inesquecível.</p>
224
+ <ul class="space-y-2 mb-4">
225
+ <li class="flex items-center">
226
+ <i class="fas fa-check text-purple-500 mr-2"></i>
227
+ <span class="text-gray-700">Temas personalizados</span>
228
+ </li>
229
+ <li class="flex items-center">
230
+ <i class="fas fa-check text-purple-500 mr-2"></i>
231
+ <span class="text-gray-700">Fotografia profissional</span>
232
+ </li>
233
+ <li class="flex items-center">
234
+ <i class="fas fa-check text-purple-500 mr-2"></i>
235
+ <span class="text-gray-700">DJ e iluminação</span>
236
+ </li>
237
+ </ul>
238
+ </div>
239
+ </div>
240
+
241
+ <!-- Birthday Card -->
242
+ <div class="event-card bg-white rounded-xl overflow-hidden shadow-md">
243
+ <div class="h-48 bg-pink-100 flex items-center justify-center">
244
+ <i class="fas fa-birthday-cake text-pink-500 text-6xl"></i>
245
+ </div>
246
+ <div class="p-6">
247
+ <h3 class="text-xl font-bold text-gray-800 mb-3">Aniversários</h3>
248
+ <p class="text-gray-600 mb-4">Celebre a vida com festas temáticas e decorações encantadoras.</p>
249
+ <ul class="space-y-2 mb-4">
250
+ <li class="flex items-center">
251
+ <i class="fas fa-check text-pink-500 mr-2"></i>
252
+ <span class="text-gray-700">Temas exclusivos</span>
253
+ </li>
254
+ <li class="flex items-center">
255
+ <i class="fas fa-check text-pink-500 mr-2"></i>
256
+ <span class="text-gray-700">Doces e lembrancinhas</span>
257
+ </li>
258
+ <li class="flex items-center">
259
+ <i class="fas fa-check text-pink-500 mr-2"></i>
260
+ <span class="text-gray-700">Animação infantil</span>
261
+ </li>
262
+ </ul>
263
+ </div>
264
+ </div>
265
+ </div>
266
+ </div>
267
+ </section>
268
+
269
+ <!-- Testimonials Section -->
270
+ <section class="py-20 bg-gray-800 text-white">
271
+ <div class="container mx-auto px-4">
272
+ <div class="text-center mb-16">
273
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Depoimentos</h2>
274
+ <p class="text-gray-300 max-w-2xl mx-auto">O que nossos clientes dizem sobre nós</p>
275
+ </div>
276
+
277
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
278
+ <!-- Testimonial 1 -->
279
+ <div class="testimonial-card p-8 rounded-lg">
280
+ <div class="flex items-center mb-4">
281
+ <div class="w-12 h-12 rounded-full overflow-hidden mr-4">
282
+ <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Cliente" class="w-full h-full object-cover">
283
+ </div>
284
+ <div>
285
+ <h4 class="font-bold">Ana Carolina</h4>
286
+ <p class="text-amber-400 text-sm">Casamento</p>
287
+ </div>
288
+ </div>
289
+ <p class="text-gray-300 mb-4">"O Espaço Calafat transformou nosso casamento em um conto de fadas. Cada detalhe foi perfeito e superou todas nossas expectativas!"</p>
290
+ <div class="flex text-amber-400">
291
+ <i class="fas fa-star"></i>
292
+ <i class="fas fa-star"></i>
293
+ <i class="fas fa-star"></i>
294
+ <i class="fas fa-star"></i>
295
+ <i class="fas fa-star"></i>
296
+ </div>
297
+ </div>
298
+
299
+ <!-- Testimonial 2 -->
300
+ <div class="testimonial-card p-8 rounded-lg">
301
+ <div class="flex items-center mb-4">
302
+ <div class="w-12 h-12 rounded-full overflow-hidden mr-4">
303
+ <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Cliente" class="w-full h-full object-cover">
304
+ </div>
305
+ <div>
306
+ <h4 class="font-bold">Ricardo Almeida</h4>
307
+ <p class="text-blue-400 text-sm">Evento Corporativo</p>
308
+ </div>
309
+ </div>
310
+ <p class="text-gray-300 mb-4">"Nosso evento anual de premiação foi um sucesso graças à equipe do Espaço Calafat. Profissionalismo e atenção aos detalhes impressionantes."</p>
311
+ <div class="flex text-amber-400">
312
+ <i class="fas fa-star"></i>
313
+ <i class="fas fa-star"></i>
314
+ <i class="fas fa-star"></i>
315
+ <i class="fas fa-star"></i>
316
+ <i class="fas fa-star"></i>
317
+ </div>
318
+ </div>
319
+
320
+ <!-- Testimonial 3 -->
321
+ <div class="testimonial-card p-8 rounded-lg">
322
+ <div class="flex items-center mb-4">
323
+ <div class="w-12 h-12 rounded-full overflow-hidden mr-4">
324
+ <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Cliente" class="w-full h-full object-cover">
325
+ </div>
326
+ <div>
327
+ <h4 class="font-bold">Patrícia Mendes</h4>
328
+ <p class="text-purple-400 text-sm">Formatura</p>
329
+ </div>
330
+ </div>
331
+ <p class="text-gray-300 mb-4">"A festa de formatura da minha filha foi mágica! O Espaço Calafat cuidou de tudo e pudemos apenas aproveitar esse momento especial."</p>
332
+ <div class="flex text-amber-400">
333
+ <i class="fas fa-star"></i>
334
+ <i class="fas fa-star"></i>
335
+ <i class="fas fa-star"></i>
336
+ <i class="fas fa-star"></i>
337
+ <i class="fas fa-star"></i>
338
+ </div>
339
+ </div>
340
+ </div>
341
+ </div>
342
+ </section>
343
+
344
+ <!-- Gallery Section -->
345
+ <section id="gallery" class="py-20 bg-white">
346
+ <div class="container mx-auto px-4">
347
+ <div class="text-center mb-16">
348
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Nossa <span class="text-amber-500">Galeria</span></h2>
349
+ <p class="text-gray-600 max-w-2xl mx-auto">Explore momentos especiais que criamos para nossos clientes</p>
350
+ </div>
351
+
352
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
353
+ <!-- Gallery Item 1 -->
354
+ <div class="gallery-item relative group rounded-xl overflow-hidden">
355
+ <img src="https://images.unsplash.com/photo-1519225421980-715cb0215aed?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Casamento" class="w-full h-64 object-cover transition duration-300">
356
+ <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-300">
357
+ <div class="text-center text-white p-4">
358
+ <h3 class="text-xl font-bold mb-2">Casamento Clássico</h3>
359
+ <p class="text-sm">Decoração em tons de marfim e dourado</p>
360
+ </div>
361
+ </div>
362
+ </div>
363
+
364
+ <!-- Gallery Item 2 -->
365
+ <div class="gallery-item relative group rounded-xl overflow-hidden">
366
+ <img src="https://images.unsplash.com/photo-1492684223066-81342ee5ff30?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Evento Corporativo" class="w-full h-64 object-cover transition duration-300">
367
+ <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-300">
368
+ <div class="text-center text-white p-4">
369
+ <h3 class="text-xl font-bold mb-2">Conferência Anual</h3>
370
+ <p class="text-sm">Evento corporativo com 200 participantes</p>
371
+ </div>
372
+ </div>
373
+ </div>
374
+
375
+ <!-- Gallery Item 3 -->
376
+ <div class="gallery-item relative group rounded-xl overflow-hidden">
377
+ <img src="https://images.unsplash.com/photo-1530103862676-de8c9debad1d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Formatura" class="w-full h-64 object-cover transition duration-300">
378
+ <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-300">
379
+ <div class="text-center text-white p-4">
380
+ <h3 class="text-xl font-bold mb-2">Festa de Formatura</h3>
381
+ <p class="text-sm">Tema "Noite das Estrelas"</p>
382
+ </div>
383
+ </div>
384
+ </div>
385
+
386
+ <!-- Gallery Item 4 -->
387
+ <div class="gallery-item relative group rounded-xl overflow-hidden">
388
+ <img src="https://images.unsplash.com/photo-1513151233558-d860c5398176?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Aniversário" class="w-full h-64 object-cover transition duration-300">
389
+ <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-300">
390
+ <div class="text-center text-white p-4">
391
+ <h3 class="text-xl font-bold mb-2">Aniversário Infantil</h3>
392
+ <p class="text-sm">Tema "Fazendinha" para 50 crianças</p>
393
+ </div>
394
+ </div>
395
+ </div>
396
+
397
+ <!-- Gallery Item 5 -->
398
+ <div class="gallery-item relative group rounded-xl overflow-hidden">
399
+ <img src="https://images.unsplash.com/photo-1494972308805-463bc619d34e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2073&q=80" alt="Casamento" class="w-full h-64 object-cover transition duration-300">
400
+ <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-300">
401
+ <div class="text-center text-white p-4">
402
+ <h3 class="text-xl font-bold mb-2">Jantar de Gala</h3>
403
+ <p class="text-sm">Evento beneficente com 150 convidados</p>
404
+ </div>
405
+ </div>
406
+ </div>
407
+
408
+ <!-- Gallery Item 6 -->
409
+ <div class="gallery-item relative group rounded-xl overflow-hidden">
410
+ <img src="https://images.unsplash.com/photo-1519671482749-fd09be7ccebf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Coquetel" class="w-full h-64 object-cover transition duration-300">
411
+ <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-300">
412
+ <div class="text-center text-white p-4">
413
+ <h3 class="text-xl font-bold mb-2">Coquetel de Lançamento</h3>
414
+ <p class="text-sm">Evento empresarial com serviço de hors d'oeuvres</p>
415
+ </div>
416
+ </div>
417
+ </div>
418
+ </div>
419
+
420
+ <div class="text-center mt-12">
421
+ <a href="#contact" class="inline-block bg-amber-500 hover:bg-amber-600 text-white font-bold py-3 px-8 rounded-full transition duration-300 transform hover:scale-105">Agende uma Visita</a>
422
+ </div>
423
+ </div>
424
+ </section>
425
+
426
+ <!-- Contact Section -->
427
+ <section id="contact" class="py-20 bg-gray-100">
428
+ <div class="container mx-auto px-4">
429
+ <div class="flex flex-col lg:flex-row">
430
+ <div class="lg:w-1/2 mb-12 lg:mb-0 lg:pr-12">
431
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-6">Entre em <span class="text-amber-500">Contato</span></h2>
432
+ <p class="text-gray-600 mb-8">Estamos ansiosos para ajudar a planejar seu evento especial. Preencha o formulário ou entre em contato diretamente pelos nossos canais.</p>
433
+
434
+ <div class="space-y-6">
435
+ <div class="flex items-start">
436
+ <div class="w-12 h-12 bg-amber-100 rounded-full flex items-center justify-center mr-4">
437
+ <i class="fas fa-map-marker-alt text-amber-500 text-xl"></i>
438
+ </div>
439
+ <div>
440
+ <h4 class="font-bold text-gray-800 mb-1">Endereço</h4>
441
+ <p class="text-gray-600">Av. das Flores, 1234 - Jardim Primavera<br>São Paulo - SP</p>
442
+ </div>
443
+ </div>
444
+
445
+ <div class="flex items-start">
446
+ <div class="w-12 h-12 bg-amber-100 rounded-full flex items-center justify-center mr-4">
447
+ <i class="fas fa-phone-alt text-amber-500 text-xl"></i>
448
+ </div>
449
+ <div>
450
+ <h4 class="font-bold text-gray-800 mb-1">Telefone</h4>
451
+ <p class="text-gray-600">(11) 1234-5678<br>(11) 98765-4321 (WhatsApp)</p>
452
+ </div>
453
+ </div>
454
+
455
+ <div class="flex items-start">
456
+ <div class="w-12 h-12 bg-amber-100 rounded-full flex items-center justify-center mr-4">
457
+ <i class="fas fa-envelope text-amber-500 text-xl"></i>
458
+ </div>
459
+ <div>
460
+ <h4 class="font-bold text-gray-800 mb-1">Email</h4>
461
+ <p class="text-gray-600">contato@espacocalafat.com.br<br>eventos@espacocalafat.com.br</p>
462
+ </div>
463
+ </div>
464
+ </div>
465
+
466
+ <div class="mt-8">
467
+ <h4 class="font-bold text-gray-800 mb-4">Siga-nos</h4>
468
+ <div class="flex space-x-4">
469
+ <a href="#" class="w-10 h-10 bg-amber-500 hover:bg-amber-600 rounded-full flex items-center justify-center text-white">
470
+ <i class="fab fa-facebook-f"></i>
471
+ </a>
472
+ <a href="#" class="w-10 h-10 bg-amber-500 hover:bg-amber-600 rounded-full flex items-center justify-center text-white">
473
+ <i class="fab fa-instagram"></i>
474
+ </a>
475
+ <a href="#" class="w-10 h-10 bg-amber-500 hover:bg-amber-600 rounded-full flex items-center justify-center text-white">
476
+ <i class="fab fa-linkedin-in"></i>
477
+ </a>
478
+ <a href="#" class="w-10 h-10 bg-amber-500 hover:bg-amber-600 rounded-full flex items-center justify-center text-white">
479
+ <i class="fab fa-pinterest-p"></i>
480
+ </a>
481
+ </div>
482
+ </div>
483
+ </div>
484
+
485
+ <div class="lg:w-1/2">
486
+ <form class="bg-white p-8 rounded-xl shadow-lg">
487
+ <div class="mb-6">
488
+ <label for="name" class="block text-gray-700 font-medium mb-2">Nome Completo</label>
489
+ <input type="text" id="name" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-amber-500 focus:border-amber-500 outline-none transition duration-300" placeholder="Seu nome">
490
+ </div>
491
+
492
+ <div class="mb-6">
493
+ <label for="email" class="block text-gray-700 font-medium mb-2">Email</label>
494
+ <input type="email" id="email" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-amber-500 focus:border-amber-500 outline-none transition duration-300" placeholder="seu@email.com">
495
+ </div>
496
+
497
+ <div class="mb-6">
498
+ <label for="phone" class="block text-gray-700 font-medium mb-2">Telefone</label>
499
+ <input type="tel" id="phone" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-amber-500 focus:border-amber-500 outline-none transition duration-300" placeholder="(00) 00000-0000">
500
+ </div>
501
+
502
+ <div class="mb-6">
503
+ <label for="event-type" class="block text-gray-700 font-medium mb-2">Tipo de Evento</label>
504
+ <select id="event-type" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-amber-500 focus:border-amber-500 outline-none transition duration-300">
505
+ <option value="">Selecione...</option>
506
+ <option value="wedding">Casamento</option>
507
+ <option value="corporate">Evento Corporativo</option>
508
+ <option value="graduation">Formatura</option>
509
+ <option value="birthday">Aniversário</option>
510
+ <option value="other">Outro</option>
511
+ </select>
512
+ </div>
513
+
514
+ <div class="mb-6">
515
+ <label for="date" class="block text-gray-700 font-medium mb-2">Data Prevista</label>
516
+ <input type="date" id="date" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-amber-500 focus:border-amber-500 outline-none transition duration-300">
517
+ </div>
518
+
519
+ <div class="mb-6">
520
+ <label for="message" class="block text-gray-700 font-medium mb-2">Mensagem</label>
521
+ <textarea id="message" rows="4" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-amber-500 focus:border-amber-500 outline-none transition duration-300" placeholder="Conte-nos sobre seu evento..."></textarea>
522
+ </div>
523
+
524
+ <button type="submit" class="w-full bg-amber-500 hover:bg-amber-600 text-white font-bold py-3 px-6 rounded-lg transition duration-300 transform hover:scale-105">Enviar Mensagem</button>
525
+ </form>
526
+ </div>
527
+ </div>
528
+ </div>
529
+ </section>
530
+
531
+ <!-- Footer -->
532
+ <footer class="bg-gray-900 text-white py-12">
533
+ <div class="container mx-auto px-4">
534
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
535
+ <div>
536
+ <div class="flex items-center mb-4">
537
+ <div class="w-10 h-10 bg-amber-500 rounded-full flex items-center justify-center mr-3">
538
+ <i class="fas fa-glass-cheers text-white"></i>
539
+ </div>
540
+ <h3 class="text-xl font-bold">Espaço <span class="text-amber-500">Calafat</span></h3>
541
+ </div>
542
+ <p class="text-gray-400">Transformando momentos comuns em memórias extraordinárias desde 2010.</p>
543
+ </div>
544
+
545
+ <div>
546
+ <h4 class="text-lg font-bold mb-4">Links Rápidos</h4>
547
+ <ul class="space-y-2">
548
+ <li><a href="#home" class="text-gray-400 hover:text-amber-500 transition duration-300">Home</a></li>
549
+ <li><a href="#about" class="text-gray-400 hover:text-amber-500 transition duration-300">Sobre Nós</a></li>
550
+ <li><a href="#services" class="text-gray-400 hover:text-amber-500 transition duration-300">Serviços</a></li>
551
+ <li><a href="#gallery" class="text-gray-400 hover:text-amber-500 transition duration-300">Galeria</a></li>
552
+ <li><a href="#contact" class="text-gray-400 hover:text-amber-500 transition duration-300">Contato</a></li>
553
+ </ul>
554
+ </div>
555
+
556
+ <div>
557
+ <h4 class="text-lg font-bold mb-4">Serviços</h4>
558
+ <ul class="space-y-2">
559
+ <li><a href="#" class="text-gray-400 hover:text-amber-500 transition duration-300">Casamentos</a></li>
560
+ <li><a href="#" class="text-gray-400 hover:text-amber-500 transition duration-300">Eventos Corporativos</a></li>
561
+ <li><a href="#" class="text-gray-400 hover:text-amber-500 transition duration-300">Formaturas</a></li>
562
+ <li><a href="#" class="text-gray-400 hover:text-amber-500 transition duration-300">Aniversários</a></li>
563
+ <li><a href="#" class="text-gray-400 hover:text-amber-500 transition duration-300">Eventos Personalizados</a></li>
564
+ </ul>
565
+ </div>
566
+
567
+ <div>
568
+ <h4 class="text-lg font-bold mb-4">Newsletter</h4>
569
+ <p class="text-gray-400 mb-4">Assine nossa newsletter para receber novidades e promoções.</p>
570
+ <form class="flex">
571
+ <input type="email" placeholder="Seu email" class="px-4 py-2 w-full rounded-l-lg focus:outline-none text-gray-800">
572
+ <button type="submit" class="bg-amber-500 hover:bg-amber-600 px-4 py-2 rounded-r-lg transition duration-300">
573
+ <i class="fas fa-paper-plane"></i>
574
+ </button>
575
+ </form>
576
+ </div>
577
+ </div>
578
+
579
+ <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
580
+ <p class="text-gray-400 mb-4 md:mb-0">© 2023 Espaço Calafat. Todos os direitos reservados.</p>
581
+ <div class="flex space-x-6">
582
+ <a href="#" class="text-gray-400 hover:text-amber-500 transition duration-300"><i class="fab fa-facebook-f"></i></a>
583
+ <a href="#" class="text-gray-400 hover:text-amber-500 transition duration-300"><i class="fab fa-twitter"></i></a>
584
+ <a href="#" class="text-gray-400 hover:text-amber-500 transition duration-300"><i class="fab fa-instagram"></i></a>
585
+ <a href="#" class="text-gray-400 hover:text-amber-500 transition duration-300"><i class="fab fa-linkedin-in"></i></a>
586
+ </div>
587
+ </div>
588
+ </div>
589
+ </footer>
590
+
591
+ <!-- Back to Top Button -->
592
+ <button id="back-to-top" class="fixed bottom-8 right-8 w-12 h-12 bg-amber-500 text-white rounded-full shadow-lg flex items-center justify-center opacity-0 invisible transition-all duration-300">
593
+ <i class="fas fa-arrow-up"></i>
594
+ </button>
595
+
596
+ <script>
597
+ // Mobile Menu Toggle
598
+ const menuToggle = document.getElementById('menu-toggle');
599
+ const mobileMenu = document.getElementById('mobile-menu');
600
+
601
+ menuToggle.addEventListener('click', () => {
602
+ mobileMenu.classList.toggle('hidden');
603
+ });
604
+
605
+ // Smooth Scrolling for Anchor Links
606
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
607
+ anchor.addEventListener('click', function (e) {
608
+ e.preventDefault();
609
+
610
+ const targetId = this.getAttribute('href');
611
+ const targetElement = document.querySelector(targetId);
612
+
613
+ if (targetElement) {
614
+ window.scrollTo({
615
+ top: targetElement.offsetTop - 80,
616
+ behavior: 'smooth'
617
+ });
618
+
619
+ // Close mobile menu if open
620
+ if (!mobileMenu.classList.contains('hidden')) {
621
+ mobileMenu.classList.add('hidden');
622
+ }
623
+ }
624
+ });
625
+ });
626
+
627
+ // Back to Top Button
628
+ const backToTopButton = document.getElementById('back-to-top');
629
+
630
+ window.addEventListener('scroll', () => {
631
+ if (window.pageYOffset > 300) {
632
+ backToTopButton.classList.remove('opacity-0', 'invisible');
633
+ backToTopButton.classList.add('opacity-100', 'visible');
634
+ } else {
635
+ backToTopButton.classList.remove('opacity-100', 'visible');
636
+ backToTopButton.classList.add('opacity-0', 'invisible');
637
+ }
638
+ });
639
+
640
+ backToTopButton.addEventListener('click', () => {
641
+ window.scrollTo({
642
+ top: 0,
643
+ behavior: 'smooth'
644
+ });
645
+ });
646
+
647
+ // Form Submission (example)
648
+ const contactForm = document.querySelector('form');
649
+ if (contactForm) {
650
+ contactForm.addEventListener('submit', (e) => {
651
+ e.preventDefault();
652
+ alert('Obrigado pelo seu contato! Entraremos em breve em contato.');
653
+ contactForm.reset();
654
+ });
655
+ }
656
+ </script>
657
+ <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=MateusBonacina/calafat" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
658
+ </html>
prompts.txt ADDED
File without changes