Hugging Face's logo

Spaces:
bllibl
/
zenflex-bliss-studio
Running

App Files Community
bllibl commited on
Commit
1b861e7
·
verified ·
1 Parent(s): 4bfa47f

https://suitable.com.br/

Browse files
Files changed (2) hide show
  1. README.md +8 -4
  2. index.html +419 -18
README.md CHANGED
@@ -1,10 +1,14 @@
1
  ---
2
- title: Zenflex Bliss Studio
3
- emoji: 🐠
4
- colorFrom: green
5
  colorTo: blue
 
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
 
1
  ---
2
+ title: ZenFlex Bliss Studio 🧘
3
+ colorFrom: red
 
4
  colorTo: blue
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
14
+
index.html CHANGED
@@ -1,19 +1,420 @@
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>Suitable - Treinamento Personalizado</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/feather-icons"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <style>
11
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
12
+ body {
13
+ font-family: 'Poppins', sans-serif;
14
+ }
15
+ .hero-gradient {
16
+ background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.7) 100%);
17
+ }
18
+ .nav-link:hover {
19
+ color: #4F46E5;
20
+ }
21
+ .btn-primary {
22
+ background-color: #4F46E5;
23
+ transition: all 0.3s ease;
24
+ }
25
+ .btn-primary:hover {
26
+ background-color: #4338CA;
27
+ transform: translateY(-2px);
28
+ }
29
+ .class-card:hover {
30
+ transform: translateY(-5px);
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
+ </style>
34
+ </head>
35
+ <body class="bg-gray-50">
36
+ <!-- Navigation -->
37
+ <nav class="bg-white shadow-md fixed w-full z-10">
38
+ <div class="container mx-auto px-6 py-3">
39
+ <div class="flex items-center justify-between">
40
+ <div class="flex items-center">
41
+ <a href="#" class="text-2xl font-bold text-gray-800">Suitable</a>
42
+ </div>
43
+ <div class="hidden md:flex items-center space-x-8">
44
+ <a href="#" class="nav-link text-gray-600 hover:text-indigo-600">Início</a>
45
+ <a href="#methodology" class="nav-link text-gray-600 hover:text-indigo-600">Metodologia</a>
46
+ <a href="#plans" class="nav-link text-gray-600 hover:text-indigo-600">Planos</a>
47
+ <a href="#results" class="nav-link text-gray-600 hover:text-indigo-600">Resultados</a>
48
+ <a href="#contact" class="nav-link text-gray-600 hover:text-indigo-600">Contato</a>
49
+ <a href="#" class="btn-primary text-white px-6 py-2 rounded-full font-medium">Agende agora</a>
50
+ </div>
51
+ <div class="md:hidden">
52
+ <button class="text-gray-600 focus:outline-none">
53
+ <i data-feather="menu"></i>
54
+ </button>
55
+ </div>
56
+ </div>
57
+ </div>
58
+ </nav>
59
+ <!-- Hero Section -->
60
+ <section class="pt-32 pb-20 px-6 bg-cover bg-center" style="background-image: url('http://static.photos/fitness/1200x630/42');">
61
+ <div class="container mx-auto">
62
+ <div class="hero-gradient max-w-2xl p-10 rounded-xl">
63
+ <h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-6">Treinamento personalizado para seus objetivos</h1>
64
+ <p class="text-gray-600 text-lg mb-8">Alcance melhores resultados com acompanhamento especializado e metodologia exclusiva.</p>
65
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
66
+ <a href="#" class="btn-primary text-white px-8 py-3 rounded-full font-medium text-center">Comece agora</a>
67
+ <a href="#methodology" class="border border-indigo-600 text-indigo-600 px-8 py-3 rounded-full font-medium hover:bg-indigo-50 transition duration-300 text-center">Conheça nosso método</a>
68
+ </div>
69
+ </div>
70
+ </div>
71
+ </section>
72
+
73
+ <!-- Features Section -->
74
+ <section class="py-16 bg-white">
75
+ <div class="container mx-auto px-6">
76
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
77
+ <div class="flex flex-col items-center text-center p-6 rounded-lg hover:bg-gray-50 transition duration-300">
78
+ <div class="bg-indigo-100 p-4 rounded-full mb-4">
79
+ <i data-feather="target" class="text-indigo-600 w-8 h-8"></i>
80
+ </div>
81
+ <h3 class="text-xl font-semibold mb-2">Objetivos Específicos</h3>
82
+ <p class="text-gray-600">Programas personalizados para cada necessidade e meta individual.</p>
83
+ </div>
84
+ <div class="flex flex-col items-center text-center p-6 rounded-lg hover:bg-gray-50 transition duration-300">
85
+ <div class="bg-indigo-100 p-4 rounded-full mb-4">
86
+ <i data-feather="activity" class="text-indigo-600 w-8 h-8"></i>
87
+ </div>
88
+ <h3 class="text-xl font-semibold mb-2">Performance</h3>
89
+ <p class="text-gray-600">Metodologia científica para maximizar seus resultados.</p>
90
+ </div>
91
+ <div class="flex flex-col items-center text-center p-6 rounded-lg hover:bg-gray-50 transition duration-300">
92
+ <div class="bg-indigo-100 p-4 rounded-full mb-4">
93
+ <i data-feather="user" class="text-indigo-600 w-8 h-8"></i>
94
+ </div>
95
+ <h3 class="text-xl font-semibold mb-2">Individual</h3>
96
+ <p class="text-gray-600">Acompanhamento personalizado para cada aluno.</p>
97
+ </div>
98
+ </div>
99
+ </div>
100
+ </section>
101
+ <!-- Methodology Section -->
102
+ <section id="methodology" class="py-16 bg-gray-50">
103
+ <div class="container mx-auto px-6">
104
+ <div class="text-center mb-12">
105
+ <h2 class="text-3xl font-bold text-gray-800 mb-4">Nossa Metodologia</h2>
106
+ <p class="text-gray-600 max-w-2xl mx-auto">Conheça o método que vai transformar seus resultados.</p>
107
+ </div>
108
+ <div class="flex flex-col lg:flex-row items-center">
109
+ <div class="lg:w-1/2 mb-10 lg:mb-0 lg:pr-12">
110
+ <img src="http://static.photos/fitness/640x360/1" alt="Metodologia Suitable" class="rounded-xl shadow-lg w-full">
111
+ </div>
112
+ <div class="lg:w-1/2">
113
+ <h2 class="text-3xl font-bold text-gray-800 mb-6">Método Científico</h2>
114
+ <p class="text-gray-600 mb-6">Nossa metodologia é baseada em evidências científicas para garantir os melhores resultados.</p>
115
+ <div class="grid grid-cols-2 gap-4">
116
+ <div class="flex items-center">
117
+ <div class="bg-indigo-100 p-2 rounded-full mr-3">
118
+ <i data-feather="check" class="text-indigo-600"></i>
119
+ </div>
120
+ <span class="text-gray-700">Avaliação física completa</span>
121
+ </div>
122
+ <div class="flex items-center">
123
+ <div class="bg-indigo-100 p-2 rounded-full mr-3">
124
+ <i data-feather="check" class="text-indigo-600"></i>
125
+ </div>
126
+ <span class="text-gray-700">Periodização individualizada</span>
127
+ </div>
128
+ <div class="flex items-center">
129
+ <div class="bg-indigo-100 p-2 rounded-full mr-3">
130
+ <i data-feather="check" class="text-indigo-600"></i>
131
+ </div>
132
+ <span class="text-gray-700">Monitoramento contínuo</span>
133
+ </div>
134
+ <div class="flex items-center">
135
+ <div class="bg-indigo-100 p-2 rounded-full mr-3">
136
+ <i data-feather="check" class="text-indigo-600"></i>
137
+ </div>
138
+ <span class="text-gray-700">Ajustes semanais</span>
139
+ </div>
140
+ </div>
141
+ </div>
142
+ </div>
143
+ </div>
144
+ </div>
145
+ </section>
146
+ <!-- Plans Section -->
147
+ <section id="plans" class="py-16 bg-white">
148
+ <div class="container mx-auto px-6">
149
+ <div class="text-center mb-12">
150
+ <h2 class="text-3xl font-bold text-gray-800 mb-4">Nossos Planos</h2>
151
+ <p class="text-gray-600 max-w-2xl mx-auto">Escolha o plano ideal para seus objetivos.</p>
152
+ </div>
153
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
154
+ <!-- Basic Plan -->
155
+ <div class="bg-white rounded-xl shadow-md overflow-hidden border border-gray-200 hover:border-indigo-500 transition duration-300">
156
+ <div class="bg-gray-100 px-6 py-4">
157
+ <h3 class="text-xl font-bold text-gray-800">Básico</h3>
158
+ <p class="text-gray-600">Para quem está começando</p>
159
+ </div>
160
+ <div class="p-6">
161
+ <div class="text-3xl font-bold mb-4">R$ 299<span class="text-base font-normal text-gray-600">/mês</span></div>
162
+ <ul class="space-y-3 mb-6">
163
+ <li class="flex items-center">
164
+ <i data-feather="check" class="text-green-500 mr-2"></i>
165
+ <span>2 treinos por semana</span>
166
+ </li>
167
+ <li class="flex items-center">
168
+ <i data-feather="check" class="text-green-500 mr-2"></i>
169
+ <span>Avaliação física</span>
170
+ </li>
171
+ <li class="flex items-center">
172
+ <i data-feather="check" class="text-green-500 mr-2"></i>
173
+ <span>Acompanhamento nutricional básico</span>
174
+ </li>
175
+ </ul>
176
+ <a href="#" class="btn-primary block text-center text-white px-4 py-3 rounded-lg font-medium">Assinar agora</a>
177
+ </div>
178
+ </div>
179
+
180
+ <!-- Premium Plan -->
181
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden border-2 border-indigo-500 transform hover:scale-105 transition duration-300">
182
+ <div class="bg-indigo-600 px-6 py-4 text-white">
183
+ <h3 class="text-xl font-bold">Premium</h3>
184
+ <p>O plano mais popular</p>
185
+ </div>
186
+ <div class="p-6">
187
+ <div class="text-3xl font-bold mb-4">R$ 499<span class="text-base font-normal text-gray-600">/mês</span></div>
188
+ <ul class="space-y-3 mb-6">
189
+ <li class="flex items-center">
190
+ <i data-feather="check" class="text-green-500 mr-2"></i>
191
+ <span>3 treinos por semana</span>
192
+ </li>
193
+ <li class="flex items-center">
194
+ <i data-feather="check" class="text-green-500 mr-2"></i>
195
+ <span>Avaliação física completa</span>
196
+ </li>
197
+ <li class="flex items-center">
198
+ <i data-feather="check" class="text-green-500 mr-2"></i>
199
+ <span>Plano nutricional personalizado</span>
200
+ </li>
201
+ <li class="flex items-center">
202
+ <i data-feather="check" class="text-green-500 mr-2"></i>
203
+ <span>Acesso a todos os horários</span>
204
+ </li>
205
+ </ul>
206
+ <a href="#" class="btn-primary block text-center text-white px-4 py-3 rounded-lg font-medium">Assinar agora</a>
207
+ </div>
208
+ </div>
209
+
210
+ <!-- VIP Plan -->
211
+ <div class="bg-white rounded-xl shadow-md overflow-hidden border border-gray-200 hover:border-indigo-500 transition duration-300">
212
+ <div class="bg-gray-100 px-6 py-4">
213
+ <h3 class="text-xl font-bold text-gray-800">VIP</h3>
214
+ <p class="text-gray-600">Resultados acelerados</p>
215
+ </div>
216
+ <div class="p-6">
217
+ <div class="text-3xl font-bold mb-4">R$ 899<span class="text-base font-normal text-gray-600">/mês</span></div>
218
+ <ul class="space-y-3 mb-6">
219
+ <li class="flex items-center">
220
+ <i data-feather="check" class="text-green-500 mr-2"></i>
221
+ <span>5 treinos por semana</span>
222
+ </li>
223
+ <li class="flex items-center">
224
+ <i data-feather="check" class="text-green-500 mr-2"></i>
225
+ <span>Avaliação física semanal</span>
226
+ </li>
227
+ <li class="flex items-center">
228
+ <i data-feather="check" class="text-green-500 mr-2"></i>
229
+ <span>Nutricionista exclusivo</span>
230
+ </li>
231
+ <li class="flex items-center">
232
+ <i data-feather="check" class="text-green-500 mr-2"></i>
233
+ <span>Treinos em casa/corporativo</span>
234
+ </li>
235
+ </ul>
236
+ <a href="#" class="btn-primary block text-center text-white px-4 py-3 rounded-lg font-medium">Assinar agora</a>
237
+ </div>
238
+ </div>
239
+ </div>
240
+ </div>
241
+ </section>
242
+ <!-- Results Section -->
243
+ <section id="results" class="py-16 bg-gray-50">
244
+ <div class="container mx-auto px-6">
245
+ <div class="text-center mb-12">
246
+ <h2 class="text-3xl font-bold text-gray-800 mb-4">Resultados Comprovados</h2>
247
+ <p class="text-gray-600 max-w-2xl mx-auto">Veja a transformação de nossos alunos.</p>
248
+ </div>
249
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
250
+ <div class="bg-white p-6 rounded-xl shadow-md text-center">
251
+ <div class="text-5xl font-bold text-indigo-600 mb-4">95%</div>
252
+ <h3 class="text-xl font-semibold mb-2">Satisfação</h3>
253
+ <p class="text-gray-600">Taxa de satisfação dos nossos alunos</p>
254
+ </div>
255
+ <div class="bg-white p-6 rounded-xl shadow-md text-center">
256
+ <div class="text-5xl font-bold text-indigo-600 mb-4">+500</div>
257
+ <h3 class="text-xl font-semibold mb-2">Alunos</h3>
258
+ <p class="text-gray-600">Transformamos mais de 500 vidas</p>
259
+ </div>
260
+ <div class="bg-white p-6 rounded-xl shadow-md text-center">
261
+ <div class="text-5xl font-bold text-indigo-600 mb-4">12kg</div>
262
+ <h3 class="text-xl font-semibold mb-2">Média de perda</h3>
263
+ <p class="text-gray-600">Média de perda de peso em 3 meses</p>
264
+ </div>
265
+ </div>
266
+ <div class="mt-12 grid grid-cols-1 md:grid-cols-2 gap-8">
267
+ <div class="bg-white rounded-xl shadow-md overflow-hidden">
268
+ <div class="flex">
269
+ <img src="http://static.photos/fitness/320x240/1" alt="Antes" class="w-1/2 h-64 object-cover">
270
+ <img src="http://static.photos/fitness/320x240/2" alt="Depois" class="w-1/2 h-64 object-cover">
271
+ </div>
272
+ <div class="p-6">
273
+ <h3 class="text-xl font-semibold mb-2">Carlos, 32 anos</h3>
274
+ <p class="text-gray-600">"Perdi 18kg em 4 meses com o acompanhamento da Suitable. Melhorou minha saúde e autoestima!"</p>
275
+ </div>
276
+ </div>
277
+ <div class="bg-white rounded-xl shadow-md overflow-hidden">
278
+ <div class="flex">
279
+ <img src="http://static.photos/fitness/320x240/3" alt="Antes" class="w-1/2 h-64 object-cover">
280
+ <img src="http://static.photos/fitness/320x240/4" alt="Depois" class="w-1/2 h-64 object-cover">
281
+ </div>
282
+ <div class="p-6">
283
+ <h3 class="text-xl font-semibold mb-2">Ana, 28 anos</h3>
284
+ <p class="text-gray-600">"Ganhei massa muscular e definição em 6 meses. Nunca me senti tão bem!"</p>
285
+ </div>
286
+ </div>
287
+ </div>
288
+ </div>
289
+ </section>
290
+
291
+ <!-- Contact Section -->
292
+ <section id="contact" class="py-16 bg-indigo-600 text-white">
293
+ <div class="container mx-auto px-6">
294
+ <div class="flex flex-col lg:flex-row">
295
+ <div class="lg:w-1/2 mb-10 lg:mb-0 lg:pr-12">
296
+ <h2 class="text-3xl font-bold mb-6">Entre em Contato</h2>
297
+ <p class="mb-6">Tem dúvidas ou quer agendar sua avaliação? Preencha o formulário ou nos contate diretamente.</p>
298
+ <div class="space-y-4">
299
+ <div class="flex items-center">
300
+ <i data-feather="map-pin" class="mr-4"></i>
301
+ <span>Av. Paulista, 1000 - Bela Vista, São Paulo/SP</span>
302
+ </div>
303
+ <div class="flex items-center">
304
+ <i data-feather="phone" class="mr-4"></i>
305
+ <span>(11) 8888-8888</span>
306
+ </div>
307
+ <div class="flex items-center">
308
+ <i data-feather="mail" class="mr-4"></i>
309
+ <span>contato@suitable.com.br</span>
310
+ </div>
311
+ <div class="flex items-center">
312
+ <i data-feather="clock" class="mr-4"></i>
313
+ <span>Seg-Sex: 6h-22h | Sáb: 8h-16h</span>
314
+ </div>
315
+ </div>
316
+ <div class="mt-8 flex space-x-4">
317
+ <a href="#" class="bg-white text-indigo-600 p-3 rounded-full"><i data-feather="facebook"></i></a>
318
+ <a href="#" class="bg-white text-indigo-600 p-3 rounded-full"><i data-feather="instagram"></i></a>
319
+ <a href="#" class="bg-white text-indigo-600 p-3 rounded-full"><i data-feather="youtube"></i></a>
320
+ </div>
321
+ </div>
322
+ <div class="lg:w-1/2">
323
+ <form class="bg-white rounded-xl p-8 shadow-lg">
324
+ <div class="mb-6">
325
+ <label for="name" class="block text-gray-700 font-medium mb-2">Nome</label>
326
+ <input type="text" id="name" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
327
+ </div>
328
+ <div class="mb-6">
329
+ <label for="email" class="block text-gray-700 font-medium mb-2">Email</label>
330
+ <input type="email" id="email" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
331
+ </div>
332
+ <div class="mb-6">
333
+ <label for="phone" class="block text-gray-700 font-medium mb-2">Telefone</label>
334
+ <input type="tel" id="phone" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
335
+ </div>
336
+ <div class="mb-6">
337
+ <label for="message" class="block text-gray-700 font-medium mb-2">Mensagem</label>
338
+ <textarea id="message" rows="4" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"></textarea>
339
+ </div>
340
+ <button type="submit" class="btn-primary w-full text-white px-6 py-3 rounded-lg font-medium">Enviar Mensagem</button>
341
+ </form>
342
+ </div>
343
+ </div>
344
+ </div>
345
+ </section>
346
+
347
+ <!-- Footer -->
348
+ <footer class="bg-gray-900 text-white py-12">
349
+ <div class="container mx-auto px-6">
350
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
351
+ <div>
352
+ <h3 class="text-xl font-bold mb-4">Suitable</h3>
353
+ <p class="text-gray-400">Treinamento personalizado para transformar seu corpo e saúde.</p>
354
+ </div>
355
+ <div>
356
+ <h4 class="font-semibold mb-4">Links Rápidos</h4>
357
+ <ul class="space-y-2">
358
+ <li><a href="#" class="text-gray-400 hover:text-white">Início</a></li>
359
+ <li><a href="#methodology" class="text-gray-400 hover:text-white">Metodologia</a></li>
360
+ <li><a href="#plans" class="text-gray-400 hover:text-white">Planos</a></li>
361
+ <li><a href="#results" class="text-gray-400 hover:text-white">Resultados</a></li>
362
+ <li><a href="#contact" class="text-gray-400 hover:text-white">Contato</a></li>
363
+ </ul>
364
+ </div>
365
+ <div>
366
+ <h4 class="font-semibold mb-4">Horário</h4>
367
+ <ul class="text-gray-400 space-y-2">
368
+ <li>Segunda-Sexta: 6h-22h</li>
369
+ <li>Sábado: 8h-16h</li>
370
+ <li>Domingo: 9h-13h</li>
371
+ </ul>
372
+ </div>
373
+ <div>
374
+ <h4 class="font-semibold mb-4">Newsletter</h4>
375
+ <p class="text-gray-400 mb-4">Assine para receber novidades e promoções.</p>
376
+ <div class="flex">
377
+ <input type="email" placeholder="Seu email" class="px-4 py-2 rounded-l-lg focus:outline-none text-gray-800 w-full">
378
+ <button class="bg-indigo-600 px-4 py-2 rounded-r-lg hover:bg-indigo-700 transition duration-300">
379
+ <i data-feather="send"></i>
380
+ </button>
381
+ </div>
382
+ </div>
383
+ </div>
384
+ <div class="border-t border-gray-800 mt-10 pt-6 text-center text-gray-400">
385
+ <p>&copy; 2023 Suitable. Todos os direitos reservados.</p>
386
+ </div>
387
+ </div>
388
+ </footer>
389
+
390
+ <script>
391
+ feather.replace();
392
+
393
+ // Mobile menu toggle
394
+ document.querySelector('nav button').addEventListener('click', function() {
395
+ const mobileMenu = document.querySelector('.md\\:flex');
396
+ mobileMenu.classList.toggle('hidden');
397
+ mobileMenu.classList.toggle('flex');
398
+ mobileMenu.classList.toggle('flex-col');
399
+ mobileMenu.classList.toggle('absolute');
400
+ mobileMenu.classList.toggle('top-16');
401
+ mobileMenu.classList.toggle('left-0');
402
+ mobileMenu.classList.toggle('right-0');
403
+ mobileMenu.classList.toggle('bg-white');
404
+ mobileMenu.classList.toggle('p-6');
405
+ mobileMenu.classList.toggle('shadow-md');
406
+ mobileMenu.classList.toggle('space-y-4');
407
+ });
408
+
409
+ // Smooth scrolling for anchor links
410
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
411
+ anchor.addEventListener('click', function (e) {
412
+ e.preventDefault();
413
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
414
+ behavior: 'smooth'
415
+ });
416
+ });
417
+ });
418
+ </script>
419
+ </body>
420
  </html>