Hugging Face's logo

Spaces:
mateusbmo
/
nutrivida
Running

App Files Community
mateusbmo commited on
Commit
33b9d3f
·
verified ·
1 Parent(s): ea6ae06

crie um site para consultas de nutricionsita - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +575 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Nutrivida
3
- emoji: 📉
4
- colorFrom: blue
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: nutrivida
3
+ emoji: 🐳
4
+ colorFrom: gray
5
+ colorTo: blue
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,575 @@
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>NutriVida - Consultas com Nutricionistas</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-gradient {
11
+ background: linear-gradient(135deg, #3a7bd5 0%, #00d2ff 100%);
12
+ }
13
+ .card-hover:hover {
14
+ transform: translateY(-5px);
15
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
16
+ }
17
+ .nutrition-fact {
18
+ transition: all 0.3s ease;
19
+ }
20
+ .nutrition-fact:hover {
21
+ transform: scale(1.05);
22
+ }
23
+ .appointment-form {
24
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
25
+ }
26
+ .testimonial-card {
27
+ transition: all 0.3s ease;
28
+ }
29
+ .testimonial-card:hover {
30
+ transform: translateY(-3px);
31
+ }
32
+ .floating-button {
33
+ position: fixed;
34
+ bottom: 2rem;
35
+ right: 2rem;
36
+ z-index: 50;
37
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
38
+ }
39
+ </style>
40
+ </head>
41
+ <body class="font-sans bg-gray-50">
42
+ <!-- Floating WhatsApp Button -->
43
+ <a href="https://wa.me/5511999999999" class="floating-button bg-green-500 text-white p-4 rounded-full hover:bg-green-600 transition duration-300">
44
+ <i class="fab fa-whatsapp text-2xl"></i>
45
+ </a>
46
+
47
+ <!-- Navigation -->
48
+ <nav class="bg-white shadow-md sticky top-0 z-40">
49
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
50
+ <div class="flex items-center space-x-2">
51
+ <i class="fas fa-utensils text-blue-500 text-2xl"></i>
52
+ <span class="text-xl font-bold text-blue-600">NutriVida</span>
53
+ </div>
54
+ <div class="hidden md:flex space-x-8">
55
+ <a href="#home" class="text-blue-600 font-medium hover:text-blue-800">Início</a>
56
+ <a href="#services" class="text-gray-600 hover:text-blue-600">Serviços</a>
57
+ <a href="#nutritionists" class="text-gray-600 hover:text-blue-600">Nutricionistas</a>
58
+ <a href="#testimonials" class="text-gray-600 hover:text-blue-600">Depoimentos</a>
59
+ <a href="#contact" class="text-gray-600 hover:text-blue-600">Contato</a>
60
+ </div>
61
+ <button class="md:hidden text-gray-600 focus:outline-none">
62
+ <i class="fas fa-bars text-2xl"></i>
63
+ </button>
64
+ </div>
65
+ </nav>
66
+
67
+ <!-- Hero Section -->
68
+ <section id="home" class="hero-gradient text-white py-20">
69
+ <div class="container mx-auto px-4 flex flex-col md:flex-row items-center">
70
+ <div class="md:w-1/2 mb-10 md:mb-0">
71
+ <h1 class="text-4xl md:text-5xl font-bold mb-4">Sua jornada para uma vida mais saudável começa aqui</h1>
72
+ <p class="text-xl mb-8">Agende sua consulta com nossos nutricionistas especializados e alcance seus objetivos de saúde e bem-estar.</p>
73
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
74
+ <a href="#appointment" class="bg-white text-blue-600 font-bold py-3 px-6 rounded-lg hover:bg-gray-100 transition duration-300 text-center">Agendar Consulta</a>
75
+ <a href="#services" class="border-2 border-white text-white font-bold py-3 px-6 rounded-lg hover:bg-white hover:text-blue-600 transition duration-300 text-center">Nossos Serviços</a>
76
+ </div>
77
+ </div>
78
+ <div class="md:w-1/2 flex justify-center">
79
+ <img src="https://images.unsplash.com/photo-1498837167922-d004355eea88?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Healthy food" class="rounded-lg shadow-xl w-full max-w-md">
80
+ </div>
81
+ </div>
82
+ </section>
83
+
84
+ <!-- Services Section -->
85
+ <section id="services" class="py-16 bg-white">
86
+ <div class="container mx-auto px-4">
87
+ <h2 class="text-3xl font-bold text-center mb-4 text-gray-800">Nossos Serviços</h2>
88
+ <p class="text-xl text-center text-gray-600 mb-12 max-w-3xl mx-auto">Oferecemos atendimento personalizado para atender todas as suas necessidades nutricionais.</p>
89
+
90
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
91
+ <!-- Service Card 1 -->
92
+ <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover transition duration-300">
93
+ <div class="h-48 bg-blue-100 flex items-center justify-center">
94
+ <i class="fas fa-user-md text-blue-500 text-6xl"></i>
95
+ </div>
96
+ <div class="p-6">
97
+ <h3 class="text-xl font-bold mb-2 text-gray-800">Consulta Presencial</h3>
98
+ <p class="text-gray-600 mb-4">Atendimento personalizado em nosso consultório, com avaliação completa e plano alimentar individualizado.</p>
99
+ <a href="#appointment" class="text-blue-500 font-medium hover:text-blue-700">Saiba mais →</a>
100
+ </div>
101
+ </div>
102
+
103
+ <!-- Service Card 2 -->
104
+ <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover transition duration-300">
105
+ <div class="h-48 bg-green-100 flex items-center justify-center">
106
+ <i class="fas fa-laptop-medical text-green-500 text-6xl"></i>
107
+ </div>
108
+ <div class="p-6">
109
+ <h3 class="text-xl font-bold mb-2 text-gray-800">Consulta Online</h3>
110
+ <p class="text-gray-600 mb-4">Atendimento por videochamada com a mesma qualidade da consulta presencial, no conforto da sua casa.</p>
111
+ <a href="#appointment" class="text-blue-500 font-medium hover:text-blue-700">Saiba mais →</a>
112
+ </div>
113
+ </div>
114
+
115
+ <!-- Service Card 3 -->
116
+ <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover transition duration-300">
117
+ <div class="h-48 bg-purple-100 flex items-center justify-center">
118
+ <i class="fas fa-utensils text-purple-500 text-6xl"></i>
119
+ </div>
120
+ <div class="p-6">
121
+ <h3 class="text-xl font-bold mb-2 text-gray-800">Plano Alimentar</h3>
122
+ <p class="text-gray-600 mb-4">Elaboração de cardápios personalizados de acordo com suas necessidades, preferências e objetivos.</p>
123
+ <a href="#appointment" class="text-blue-500 font-medium hover:text-blue-700">Saiba mais →</a>
124
+ </div>
125
+ </div>
126
+ </div>
127
+ </div>
128
+ </section>
129
+
130
+ <!-- Nutrition Facts Section -->
131
+ <section class="py-16 bg-gray-100">
132
+ <div class="container mx-auto px-4">
133
+ <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Benefícios da Nutrição Adequada</h2>
134
+
135
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
136
+ <div class="nutrition-fact bg-white p-6 rounded-lg shadow-sm text-center">
137
+ <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
138
+ <i class="fas fa-heartbeat text-blue-500 text-2xl"></i>
139
+ </div>
140
+ <h3 class="font-bold mb-2">Saúde Cardiovascular</h3>
141
+ <p class="text-sm text-gray-600">Redução do risco de doenças cardíacas</p>
142
+ </div>
143
+
144
+ <div class="nutrition-fact bg-white p-6 rounded-lg shadow-sm text-center">
145
+ <div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
146
+ <i class="fas fa-brain text-green-500 text-2xl"></i>
147
+ </div>
148
+ <h3 class="font-bold mb-2">Melhor Cognição</h3>
149
+ <p class="text-sm text-gray-600">Aumento da concentração e memória</p>
150
+ </div>
151
+
152
+ <div class="nutrition-fact bg-white p-6 rounded-lg shadow-sm text-center">
153
+ <div class="bg-yellow-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
154
+ <i class="fas fa-battery-full text-yellow-500 text-2xl"></i>
155
+ </div>
156
+ <h3 class="font-bold mb-2">Mais Energia</h3>
157
+ <p class="text-sm text-gray-600">Disposição para atividades diárias</p>
158
+ </div>
159
+
160
+ <div class="nutrition-fact bg-white p-6 rounded-lg shadow-sm text-center">
161
+ <div class="bg-red-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
162
+ <i class="fas fa-weight text-red-500 text-2xl"></i>
163
+ </div>
164
+ <h3 class="font-bold mb-2">Controle de Peso</h3>
165
+ <p class="text-sm text-gray-600">Alcançar e manter o peso ideal</p>
166
+ </div>
167
+ </div>
168
+ </div>
169
+ </section>
170
+
171
+ <!-- Nutritionists Section -->
172
+ <section id="nutritionists" class="py-16 bg-white">
173
+ <div class="container mx-auto px-4">
174
+ <h2 class="text-3xl font-bold text-center mb-4 text-gray-800">Nossos Nutricionistas</h2>
175
+ <p class="text-xl text-center text-gray-600 mb-12 max-w-3xl mx-auto">Profissionais qualificados e experientes para te ajudar a alcançar seus objetivos.</p>
176
+
177
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
178
+ <!-- Nutritionist 1 -->
179
+ <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover transition duration-300">
180
+ <div class="h-64 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1559839734-2b71ea197ec2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80');"></div>
181
+ <div class="p-6">
182
+ <h3 class="text-xl font-bold mb-1 text-gray-800">Dra. Ana Silva</h3>
183
+ <p class="text-blue-600 mb-3">Nutricionista Clínica - CRN 12345</p>
184
+ <p class="text-gray-600 mb-4">Especialista em emagrecimento saudável e nutrição esportiva. Mestre em Ciências da Nutrição.</p>
185
+ <div class="flex space-x-2">
186
+ <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Emagrecimento</span>
187
+ <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">Esportiva</span>
188
+ </div>
189
+ </div>
190
+ </div>
191
+
192
+ <!-- Nutritionist 2 -->
193
+ <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover transition duration-300">
194
+ <div class="h-64 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1594824476967-48c8b964273f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80');"></div>
195
+ <div class="p-6">
196
+ <h3 class="text-xl font-bold mb-1 text-gray-800">Dr. Carlos Mendes</h3>
197
+ <p class="text-blue-600 mb-3">Nutricionista Funcional - CRN 54321</p>
198
+ <p class="text-gray-600 mb-4">Especialista em nutrição funcional e doenças crônicas. Doutor em Ciências da Saúde.</p>
199
+ <div class="flex space-x-2">
200
+ <span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded">Funcional</span>
201
+ <span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded">Saúde Intestinal</span>
202
+ </div>
203
+ </div>
204
+ </div>
205
+
206
+ <!-- Nutritionist 3 -->
207
+ <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover transition duration-300">
208
+ <div class="h-64 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1622253692010-333f2da6031d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80');"></div>
209
+ <div class="p-6">
210
+ <h3 class="text-xl font-bold mb-1 text-gray-800">Dra. Juliana Oliveira</h3>
211
+ <p class="text-blue-600 mb-3">Nutricionista Materno-Infantil - CRN 67890</p>
212
+ <p class="text-gray-600 mb-4">Especialista em nutrição para gestantes, crianças e adolescentes. Pós-graduada em Pediatria.</p>
213
+ <div class="flex space-x-2">
214
+ <span class="bg-pink-100 text-pink-800 text-xs px-2 py-1 rounded">Gestantes</span>
215
+ <span class="bg-indigo-100 text-indigo-800 text-xs px-2 py-1 rounded">Infantil</span>
216
+ </div>
217
+ </div>
218
+ </div>
219
+ </div>
220
+ </div>
221
+ </section>
222
+
223
+ <!-- Appointment Section -->
224
+ <section id="appointment" class="py-16 bg-gray-100">
225
+ <div class="container mx-auto px-4">
226
+ <div class="max-w-4xl mx-auto bg-white rounded-xl overflow-hidden shadow-lg appointment-form">
227
+ <div class="md:flex">
228
+ <div class="md:w-1/2 bg-blue-600 text-white p-8 flex flex-col justify-center">
229
+ <h2 class="text-3xl font-bold mb-4">Agende sua consulta</h2>
230
+ <p class="mb-6">Preencha o formulário ao lado e nossa equipe entrará em contato para confirmar seu agendamento.</p>
231
+ <div class="space-y-4">
232
+ <div class="flex items-center">
233
+ <i class="fas fa-phone-alt mr-3"></i>
234
+ <span>(11) 9999-9999</span>
235
+ </div>
236
+ <div class="flex items-center">
237
+ <i class="fas fa-envelope mr-3"></i>
238
+ <span>[email protected]</span>
239
+ </div>
240
+ <div class="flex items-center">
241
+ <i class="fas fa-map-marker-alt mr-3"></i>
242
+ <span>Av. Paulista, 1000 - São Paulo/SP</span>
243
+ </div>
244
+ </div>
245
+ </div>
246
+ <div class="md:w-1/2 p-8">
247
+ <form id="appointmentForm" class="space-y-4">
248
+ <div>
249
+ <label for="name" class="block text-gray-700 mb-1">Nome Completo</label>
250
+ <input type="text" id="name" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
251
+ </div>
252
+ <div>
253
+ <label for="email" class="block text-gray-700 mb-1">E-mail</label>
254
+ <input type="email" id="email" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
255
+ </div>
256
+ <div>
257
+ <label for="phone" class="block text-gray-700 mb-1">Telefone</label>
258
+ <input type="tel" id="phone" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
259
+ </div>
260
+ <div>
261
+ <label for="service" class="block text-gray-700 mb-1">Tipo de Consulta</label>
262
+ <select id="service" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
263
+ <option value="">Selecione...</option>
264
+ <option value="presencial">Consulta Presencial</option>
265
+ <option value="online">Consulta Online</option>
266
+ <option value="plano">Plano Alimentar</option>
267
+ </select>
268
+ </div>
269
+ <div>
270
+ <label for="date" class="block text-gray-700 mb-1">Data Preferencial</label>
271
+ <input type="date" id="date" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
272
+ </div>
273
+ <button type="submit" class="w-full bg-blue-600 text-white py-3 px-4 rounded-lg hover:bg-blue-700 transition duration-300 font-medium">Agendar Consulta</button>
274
+ </form>
275
+ </div>
276
+ </div>
277
+ </div>
278
+ </div>
279
+ </section>
280
+
281
+ <!-- Testimonials Section -->
282
+ <section id="testimonials" class="py-16 bg-white">
283
+ <div class="container mx-auto px-4">
284
+ <h2 class="text-3xl font-bold text-center mb-4 text-gray-800">O que nossos pacientes dizem</h2>
285
+ <p class="text-xl text-center text-gray-600 mb-12 max-w-3xl mx-auto">Depoimentos de quem já transformou sua vida com nossa ajuda.</p>
286
+
287
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
288
+ <!-- Testimonial 1 -->
289
+ <div class="testimonial-card bg-gray-50 p-6 rounded-lg shadow-sm">
290
+ <div class="flex items-center mb-4">
291
+ <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mr-4">
292
+ <i class="fas fa-user text-blue-500"></i>
293
+ </div>
294
+ <div>
295
+ <h4 class="font-bold">Mariana R.</h4>
296
+ <div class="flex text-yellow-400">
297
+ <i class="fas fa-star"></i>
298
+ <i class="fas fa-star"></i>
299
+ <i class="fas fa-star"></i>
300
+ <i class="fas fa-star"></i>
301
+ <i class="fas fa-star"></i>
302
+ </div>
303
+ </div>
304
+ </div>
305
+ <p class="text-gray-600 italic">"Perdi 15kg em 6 meses com a ajuda da Dra. Ana. O plano alimentar foi fácil de seguir e me senti acompanhada em todo o processo. Recomendo muito!"</p>
306
+ </div>
307
+
308
+ <!-- Testimonial 2 -->
309
+ <div class="testimonial-card bg-gray-50 p-6 rounded-lg shadow-sm">
310
+ <div class="flex items-center mb-4">
311
+ <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center mr-4">
312
+ <i class="fas fa-user text-green-500"></i>
313
+ </div>
314
+ <div>
315
+ <h4 class="font-bold">Roberto S.</h4>
316
+ <div class="flex text-yellow-400">
317
+ <i class="fas fa-star"></i>
318
+ <i class="fas fa-star"></i>
319
+ <i class="fas fa-star"></i>
320
+ <i class="fas fa-star"></i>
321
+ <i class="fas fa-star"></i>
322
+ </div>
323
+ </div>
324
+ </div>
325
+ <p class="text-gray-600 italic">"Como atleta, o Dr. Carlos me ajudou a melhorar meu desempenho com uma nutrição adequada. Minha recuperação pós-treino melhorou significativamente."</p>
326
+ </div>
327
+
328
+ <!-- Testimonial 3 -->
329
+ <div class="testimonial-card bg-gray-50 p-6 rounded-lg shadow-sm">
330
+ <div class="flex items-center mb-4">
331
+ <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center mr-4">
332
+ <i class="fas fa-user text-purple-500"></i>
333
+ </div>
334
+ <div>
335
+ <h4 class="font-bold">Patrícia L.</h4>
336
+ <div class="flex text-yellow-400">
337
+ <i class="fas fa-star"></i>
338
+ <i class="fas fa-star"></i>
339
+ <i class="fas fa-star"></i>
340
+ <i class="fas fa-star"></i>
341
+ <i class="fas fa-star-half-alt"></i>
342
+ </div>
343
+ </div>
344
+ </div>
345
+ <p class="text-gray-600 italic">"A Dra. Juliana foi essencial na minha gravidez, me orientando sobre a alimentação ideal para mim e para o bebê. Meu filho nasceu saudável e eu me senti ótima!"</p>
346
+ </div>
347
+ </div>
348
+ </div>
349
+ </section>
350
+
351
+ <!-- FAQ Section -->
352
+ <section class="py-16 bg-gray-100">
353
+ <div class="container mx-auto px-4 max-w-3xl">
354
+ <h2 class="text-3xl font-bold text-center mb-4 text-gray-800">Perguntas Frequentes</h2>
355
+ <p class="text-xl text-center text-gray-600 mb-12">Tire suas dúvidas sobre nossos serviços e atendimento.</p>
356
+
357
+ <div class="space-y-4">
358
+ <!-- FAQ Item 1 -->
359
+ <div class="bg-white rounded-lg shadow-sm overflow-hidden">
360
+ <button class="faq-question w-full text-left p-4 font-medium flex justify-between items-center focus:outline-none">
361
+ <span>Como funciona a primeira consulta?</span>
362
+ <i class="fas fa-chevron-down transition-transform duration-300"></i>
363
+ </button>
364
+ <div class="faq-answer px-4 pb-4 hidden">
365
+ <p class="text-gray-600">Na primeira consulta realizamos uma avaliação completa, incluindo histórico de saúde, hábitos alimentares, exames bioquímicos (se disponíveis), avaliação antropométrica e definição de objetivos. Com base nesses dados, elaboramos um plano alimentar personalizado.</p>
366
+ </div>
367
+ </div>
368
+
369
+ <!-- FAQ Item 2 -->
370
+ <div class="bg-white rounded-lg shadow-sm overflow-hidden">
371
+ <button class="faq-question w-full text-left p-4 font-medium flex justify-between items-center focus:outline-none">
372
+ <span>Qual a diferença entre consulta presencial e online?</span>
373
+ <i class="fas fa-chevron-down transition-transform duration-300"></i>
374
+ </button>
375
+ <div class="faq-answer px-4 pb-4 hidden">
376
+ <p class="text-gray-600">A consulta presencial permite avaliações físicas mais detalhadas, como medidas de dobras cutâneas. Já a consulta online oferece toda a comodidade de ser atendido em casa, com a mesma qualidade. Para a online, você precisará ter uma balança e fita métrica em casa para algumas medidas básicas.</p>
377
+ </div>
378
+ </div>
379
+
380
+ <!-- FAQ Item 3 -->
381
+ <div class="bg-white rounded-lg shadow-sm overflow-hidden">
382
+ <button class="faq-question w-full text-left p-4 font-medium flex justify-between items-center focus:outline-none">
383
+ <span>Quanto tempo dura o tratamento nutricional?</span>
384
+ <i class="fas fa-chevron-down transition-transform duration-300"></i>
385
+ </button>
386
+ <div class="faq-answer px-4 pb-4 hidden">
387
+ <p class="text-gray-600">O tempo varia conforme o objetivo e a resposta individual. Em média, recomendamos consultas mensais nos primeiros 3-6 meses, depois espaçamos para cada 2-3 meses conforme a evolução. Nosso objetivo é que você adquira autonomia na sua alimentação.</p>
388
+ </div>
389
+ </div>
390
+
391
+ <!-- FAQ Item 4 -->
392
+ <div class="bg-white rounded-lg shadow-sm overflow-hidden">
393
+ <button class="faq-question w-full text-left p-4 font-medium flex justify-between items-center focus:outline-none">
394
+ <span>Vocês atendem por convênio médico?</span>
395
+ <i class="fas fa-chevron-down transition-transform duration-300"></i>
396
+ </button>
397
+ <div class="faq-answer px-4 pb-4 hidden">
398
+ <p class="text-gray-600">Atualmente não trabalhamos diretamente com convênios, mas emitimos recibos que podem ser utilizados para solicitar reembolso junto ao seu plano de saúde, conforme a política de cada operadora.</p>
399
+ </div>
400
+ </div>
401
+ </div>
402
+ </div>
403
+ </section>
404
+
405
+ <!-- Contact Section -->
406
+ <section id="contact" class="py-16 bg-white">
407
+ <div class="container mx-auto px-4">
408
+ <div class="max-w-6xl mx-auto">
409
+ <h2 class="text-3xl font-bold text-center mb-4 text-gray-800">Entre em Contato</h2>
410
+ <p class="text-xl text-center text-gray-600 mb-12 max-w-3xl mx-auto">Estamos à disposição para tirar suas dúvidas e agendar seu atendimento.</p>
411
+
412
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
413
+ <!-- Contact Info 1 -->
414
+ <div class="bg-blue-50 p-6 rounded-lg text-center">
415
+ <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
416
+ <i class="fas fa-phone-alt text-blue-600 text-2xl"></i>
417
+ </div>
418
+ <h3 class="font-bold mb-2 text-gray-800">Telefone</h3>
419
+ <p class="text-gray-600 mb-2">(11) 9999-9999</p>
420
+ <p class="text-sm text-gray-500">Segunda a Sexta, das 8h às 18h</p>
421
+ </div>
422
+
423
+ <!-- Contact Info 2 -->
424
+ <div class="bg-green-50 p-6 rounded-lg text-center">
425
+ <div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
426
+ <i class="fas fa-envelope text-green-600 text-2xl"></i>
427
+ </div>
428
+ <h3 class="font-bold mb-2 text-gray-800">E-mail</h3>
429
+ <p class="text-gray-600 mb-2">[email protected]</p>
430
+ <p class="text-sm text-gray-500">Respondemos em até 24h</p>
431
+ </div>
432
+
433
+ <!-- Contact Info 3 -->
434
+ <div class="bg-purple-50 p-6 rounded-lg text-center">
435
+ <div class="bg-purple-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
436
+ <i class="fas fa-map-marker-alt text-purple-600 text-2xl"></i>
437
+ </div>
438
+ <h3 class="font-bold mb-2 text-gray-800">Endereço</h3>
439
+ <p class="text-gray-600 mb-2">Av. Paulista, 1000</p>
440
+ <p class="text-sm text-gray-500">São Paulo - SP, 01310-100</p>
441
+ </div>
442
+ </div>
443
+ </div>
444
+ </div>
445
+ </section>
446
+
447
+ <!-- Footer -->
448
+ <footer class="bg-gray-800 text-white py-12">
449
+ <div class="container mx-auto px-4">
450
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
451
+ <div>
452
+ <div class="flex items-center space-x-2 mb-4">
453
+ <i class="fas fa-utensils text-blue-400 text-2xl"></i>
454
+ <span class="text-xl font-bold">NutriVida</span>
455
+ </div>
456
+ <p class="text-gray-400">Sua saúde em primeiro lugar. Consultas nutricionais personalizadas para uma vida mais saudável.</p>
457
+ </div>
458
+
459
+ <div>
460
+ <h3 class="font-bold text-lg mb-4">Links Rápidos</h3>
461
+ <ul class="space-y-2">
462
+ <li><a href="#home" class="text-gray-400 hover:text-white">Início</a></li>
463
+ <li><a href="#services" class="text-gray-400 hover:text-white">Serviços</a></li>
464
+ <li><a href="#nutritionists" class="text-gray-400 hover:text-white">Nutricionistas</a></li>
465
+ <li><a href="#testimonials" class="text-gray-400 hover:text-white">Depoimentos</a></li>
466
+ <li><a href="#contact" class="text-gray-400 hover:text-white">Contato</a></li>
467
+ </ul>
468
+ </div>
469
+
470
+ <div>
471
+ <h3 class="font-bold text-lg mb-4">Serviços</h3>
472
+ <ul class="space-y-2">
473
+ <li><a href="#" class="text-gray-400 hover:text-white">Consulta Presencial</a></li>
474
+ <li><a href="#" class="text-gray-400 hover:text-white">Consulta Online</a></li>
475
+ <li><a href="#" class="text-gray-400 hover:text-white">Plano Alimentar</a></li>
476
+ <li><a href="#" class="text-gray-400 hover:text-white">Nutrição Esportiva</a></li>
477
+ <li><a href="#" class="text-gray-400 hover:text-white">Nutrição Materno-Infantil</a></li>
478
+ </ul>
479
+ </div>
480
+
481
+ <div>
482
+ <h3 class="font-bold text-lg mb-4">Redes Sociais</h3>
483
+ <div class="flex space-x-4 mb-4">
484
+ <a href="#" class="bg-blue-600 w-10 h-10 rounded-full flex items-center justify-center hover:bg-blue-700">
485
+ <i class="fab fa-facebook-f"></i>
486
+ </a>
487
+ <a href="#" class="bg-pink-600 w-10 h-10 rounded-full flex items-center justify-center hover:bg-pink-700">
488
+ <i class="fab fa-instagram"></i>
489
+ </a>
490
+ <a href="#" class="bg-blue-400 w-10 h-10 rounded-full flex items-center justify-center hover:bg-blue-500">
491
+ <i class="fab fa-twitter"></i>
492
+ </a>
493
+ <a href="#" class="bg-green-500 w-10 h-10 rounded-full flex items-center justify-center hover:bg-green-600">
494
+ <i class="fab fa-whatsapp"></i>
495
+ </a>
496
+ </div>
497
+ <p class="text-gray-400">Assine nossa newsletter:</p>
498
+ <div class="flex mt-2">
499
+ <input type="email" placeholder="Seu e-mail" class="px-3 py-2 bg-gray-700 text-white rounded-l focus:outline-none w-full">
500
+ <button class="bg-blue-600 text-white px-4 rounded-r hover:bg-blue-700">
501
+ <i class="fas fa-paper-plane"></i>
502
+ </button>
503
+ </div>
504
+ </div>
505
+ </div>
506
+
507
+ <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
508
+ <p>&copy; 2023 NutriVida - Todos os direitos reservados</p>
509
+ </div>
510
+ </div>
511
+ </footer>
512
+
513
+ <script>
514
+ // FAQ Accordion
515
+ document.querySelectorAll('.faq-question').forEach(button => {
516
+ button.addEventListener('click', () => {
517
+ const answer = button.nextElementSibling;
518
+ const icon = button.querySelector('i');
519
+
520
+ // Toggle answer visibility
521
+ answer.classList.toggle('hidden');
522
+
523
+ // Rotate icon
524
+ icon.classList.toggle('rotate-180');
525
+ });
526
+ });
527
+
528
+ // Form submission
529
+ document.getElementById('appointmentForm').addEventListener('submit', function(e) {
530
+ e.preventDefault();
531
+
532
+ // Get form values
533
+ const name = document.getElementById('name').value;
534
+ const email = document.getElementById('email').value;
535
+ const phone = document.getElementById('phone').value;
536
+ const service = document.getElementById('service').value;
537
+ const date = document.getElementById('date').value;
538
+
539
+ // Simple validation
540
+ if (!name || !email || !phone || !service || !date) {
541
+ alert('Por favor, preencha todos os campos do formulário.');
542
+ return;
543
+ }
544
+
545
+ // In a real application, you would send this data to your server
546
+ alert(`Obrigado, ${name}! Sua solicitação de consulta foi enviada. Entraremos em contato em breve para confirmar.`);
547
+
548
+ // Reset form
549
+ this.reset();
550
+ });
551
+
552
+ // Smooth scrolling for anchor links
553
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
554
+ anchor.addEventListener('click', function (e) {
555
+ e.preventDefault();
556
+
557
+ const targetId = this.getAttribute('href');
558
+ const targetElement = document.querySelector(targetId);
559
+
560
+ if (targetElement) {
561
+ window.scrollTo({
562
+ top: targetElement.offsetTop - 80,
563
+ behavior: 'smooth'
564
+ });
565
+ }
566
+ });
567
+ });
568
+
569
+ // Mobile menu toggle (would need more implementation for a real mobile menu)
570
+ document.querySelector('.md\\:hidden').addEventListener('click', function() {
571
+ alert('Menu mobile seria implementado aqui em uma versão completa.');
572
+ });
573
+ </script>
574
+ <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=mateusbmo/nutrivida" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
575
+ </html>