Hugging Face's logo

Spaces:
wallysonweb
/
appfitt
Running

App Files Community
wallysonweb commited on
Commit
199a963
·
verified ·
1 Parent(s): 396dfc2

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +787 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Appfitt
3
- emoji: 🐨
4
- colorFrom: blue
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: appfitt
3
+ emoji: 🐳
4
+ colorFrom: yellow
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,787 @@
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>Aplicativo Fitness 2025 - Transforme Seu Corpo</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700;900&family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
10
+ <style>
11
+ body {
12
+ font-family: 'Open Sans', sans-serif;
13
+ scroll-behavior: smooth;
14
+ }
15
+ h1, h2, h3, h4 {
16
+ font-family: 'Montserrat', sans-serif;
17
+ }
18
+ .hero-gradient {
19
+ background: linear-gradient(135deg, #000000 0%, #0066FF 100%);
20
+ }
21
+ .neon-border {
22
+ position: relative;
23
+ border: 2px solid transparent;
24
+ border-radius: 12px;
25
+ }
26
+ .neon-border::before {
27
+ content: '';
28
+ position: absolute;
29
+ top: -2px;
30
+ left: -2px;
31
+ right: -2px;
32
+ bottom: -2px;
33
+ border-radius: 12px;
34
+ background: linear-gradient(45deg, #0066FF, #FFD700, #0066FF);
35
+ background-size: 200% 200%;
36
+ z-index: -1;
37
+ animation: gradient 3s ease infinite;
38
+ }
39
+ @keyframes gradient {
40
+ 0% { background-position: 0% 50%; }
41
+ 50% { background-position: 100% 50%; }
42
+ 100% { background-position: 0% 50%; }
43
+ }
44
+ .cta-pulse {
45
+ animation: pulse 2s infinite;
46
+ }
47
+ @keyframes pulse {
48
+ 0% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.7); }
49
+ 70% { box-shadow: 0 0 0 10px rgba(255, 215, 0, 0); }
50
+ 100% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0); }
51
+ }
52
+ .feature-card:hover {
53
+ transform: translateY(-5px);
54
+ box-shadow: 0 10px 25px rgba(0, 102, 255, 0.2);
55
+ }
56
+ .testimonial-card {
57
+ transition: all 0.3s ease;
58
+ }
59
+ .testimonial-card:hover {
60
+ transform: scale(1.03);
61
+ }
62
+ .tooltip {
63
+ position: relative;
64
+ display: inline-block;
65
+ cursor: pointer;
66
+ }
67
+ .tooltip .tooltip-text {
68
+ visibility: hidden;
69
+ width: 200px;
70
+ background-color: #0066FF;
71
+ color: #fff;
72
+ text-align: center;
73
+ border-radius: 6px;
74
+ padding: 8px;
75
+ position: absolute;
76
+ z-index: 1;
77
+ bottom: 125%;
78
+ left: 50%;
79
+ transform: translateX(-50%);
80
+ opacity: 0;
81
+ transition: opacity 0.3s;
82
+ font-size: 14px;
83
+ }
84
+ .tooltip:hover .tooltip-text {
85
+ visibility: visible;
86
+ opacity: 1;
87
+ }
88
+ .animate-fadeIn {
89
+ animation: fadeIn 1s ease-in-out;
90
+ }
91
+ @keyframes fadeIn {
92
+ from { opacity: 0; transform: translateY(20px); }
93
+ to { opacity: 1; transform: translateY(0); }
94
+ }
95
+ .mobile-menu {
96
+ max-height: 0;
97
+ overflow: hidden;
98
+ transition: max-height 0.3s ease-out;
99
+ }
100
+ .mobile-menu.open {
101
+ max-height: 500px;
102
+ }
103
+ .how-it-works-card {
104
+ background-color: #FEF9C3; /* Amarelo claro */
105
+ }
106
+ .feature-card {
107
+ background-color: #EFF6FF; /* Azul claro */
108
+ }
109
+ </style>
110
+ </head>
111
+ <body class="bg-gray-50">
112
+ <!-- Header/Navigation -->
113
+ <header class="bg-black text-white sticky top-0 z-50 shadow-lg">
114
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
115
+ <div class="flex items-center">
116
+ <i class="fas fa-dumbbell text-2xl text-yellow-500 mr-2"></i>
117
+ <span class="text-xl font-bold">Aplicativo <span class="text-blue-500">Fitness</span></span>
118
+ </div>
119
+ <nav class="hidden md:flex space-x-8">
120
+ <a href="#features" class="hover:text-yellow-400 transition">Recursos</a>
121
+ <a href="#how-it-works" class="hover:text-yellow-400 transition">Como Funciona</a>
122
+ <a href="#pricing" class="hover:text-yellow-400 transition">Planos</a>
123
+ <a href="#testimonials" class="hover:text-yellow-400 transition">Depoimentos</a>
124
+ </nav>
125
+ <div class="flex items-center space-x-4">
126
+ <button id="mobile-menu-button" class="md:hidden text-white">
127
+ <i class="fas fa-bars text-2xl"></i>
128
+ </button>
129
+ </div>
130
+ </div>
131
+ <!-- Mobile Menu -->
132
+ <div id="mobile-menu" class="mobile-menu bg-black md:hidden">
133
+ <div class="px-4 py-3 space-y-4">
134
+ <a href="#features" class="block hover:text-yellow-400 transition">Recursos</a>
135
+ <a href="#how-it-works" class="block hover:text-yellow-400 transition">Como Funciona</a>
136
+ <a href="#pricing" class="block hover:text-yellow-400 transition">Planos</a>
137
+ <a href="#testimonials" class="block hover:text-yellow-400 transition">Depoimentos</a>
138
+ </div>
139
+ </div>
140
+ </header>
141
+
142
+ <!-- Hero Section -->
143
+ <section class="hero-gradient text-white">
144
+ <div class="container mx-auto px-4 py-20 md:py-32 flex flex-col md:flex-row items-center">
145
+ <div class="md:w-1/2 mb-12 md:mb-0">
146
+ <div class="bg-blue-600 text-xs inline-block px-3 py-1 rounded-full mb-4">NOVO LANÇAMENTO</div>
147
+ <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight mb-6">Transforme Seu Corpo em Apenas 20 Minutos/Dia</h1>
148
+ <p class="text-lg md:text-xl text-gray-200 mb-8">Planos de treino 100% personalizados para seus objetivos e nível de condicionamento. A revolução fitness chegou!</p>
149
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
150
+ <a href="#pricing" class="cta-pulse bg-yellow-500 hover:bg-yellow-600 text-black font-bold py-4 px-8 rounded-lg text-lg flex items-center justify-center transition duration-300">
151
+ COMEÇAR AGORA <i class="fas fa-arrow-right ml-2"></i>
152
+ </a>
153
+ </div>
154
+ <div class="mt-8 flex items-center">
155
+ <div class="flex -space-x-2">
156
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" class="w-10 h-10 rounded-full border-2 border-white">
157
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" class="w-10 h-10 rounded-full border-2 border-white">
158
+ <img src="https://randomuser.me/api/portraits/women/68.jpg" class="w-10 h-10 rounded-full border-2 border-white">
159
+ </div>
160
+ <div class="ml-4">
161
+ <div class="flex items-center">
162
+ <i class="fas fa-star text-yellow-400"></i>
163
+ <i class="fas fa-star text-yellow-400"></i>
164
+ <i class="fas fa-star text-yellow-400"></i>
165
+ <i class="fas fa-star text-yellow-400"></i>
166
+ <i class="fas fa-star text-yellow-400"></i>
167
+ <span class="ml-2 font-bold">4.9/5</span>
168
+ </div>
169
+ <p class="text-sm">+10.000 usuários satisfeitos</p>
170
+ </div>
171
+ </div>
172
+ </div>
173
+ <div class="md:w-1/2 relative">
174
+ <img src="https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=880&q=80" alt="Pessoa treinando com celular" class="rounded-xl shadow-2xl w-full max-w-lg mx-auto">
175
+ <div class="absolute -bottom-6 -left-6 bg-white p-4 rounded-xl shadow-lg hidden md:block">
176
+ <div class="flex items-center">
177
+ <div class="bg-blue-100 p-3 rounded-full mr-3">
178
+ <i class="fas fa-fire text-blue-600 text-xl"></i>
179
+ </div>
180
+ <div>
181
+ <p class="font-bold">+500 exercícios</p>
182
+ <p class="text-sm text-gray-500">Em vídeo HD</p>
183
+ </div>
184
+ </div>
185
+ </div>
186
+ <div class="absolute -top-6 -right-6 bg-white p-4 rounded-xl shadow-lg hidden md:block">
187
+ <div class="flex items-center">
188
+ <div class="bg-yellow-100 p-3 rounded-full mr-3">
189
+ <i class="fas fa-bolt text-yellow-600 text-xl"></i>
190
+ </div>
191
+ <div>
192
+ <p class="font-bold">20 min/dia</p>
193
+ <p class="text-sm text-gray-500">Resultados garantidos</p>
194
+ </div>
195
+ </div>
196
+ </div>
197
+ </div>
198
+ </div>
199
+ </section>
200
+
201
+ <!-- Trust Badges -->
202
+ <div class="bg-gray-100 py-6">
203
+ <div class="container mx-auto px-4">
204
+ <div class="flex flex-wrap justify-center items-center gap-8 md:gap-16">
205
+ <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/1200px-Google_2015_logo.svg.png" class="h-8 opacity-70">
206
+ <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Apple_logo_black.svg/1200px-Apple_logo_black.svg.png" class="h-8 opacity-70">
207
+ <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Amazon_logo.svg/1200px-Amazon_logo.svg.png" class="h-8 opacity-70">
208
+ <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Android_logo_2019.svg/1200px-Android_logo_2019.svg.png" class="h-8 opacity-70">
209
+ <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9e/Forbes_logo.svg/1200px-Forbes_logo.svg.png" class="h-8 opacity-70">
210
+ </div>
211
+ </div>
212
+ </div>
213
+
214
+ <!-- How It Works -->
215
+ <section id="how-it-works" class="py-20 bg-white">
216
+ <div class="container mx-auto px-4">
217
+ <div class="text-center mb-16">
218
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Como Funciona</h2>
219
+ <p class="text-lg text-gray-600 max-w-2xl mx-auto">Nosso algoritmo de IA cria o plano perfeito para você em apenas 6 passos simples</p>
220
+ </div>
221
+
222
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-8">
223
+ <!-- Step 1 -->
224
+ <div class="how-it-works-card p-8 rounded-xl hover:shadow-lg transition">
225
+ <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-6">
226
+ <span class="text-blue-600 text-2xl font-bold">1</span>
227
+ </div>
228
+ <h3 class="text-xl font-bold mb-3">Cadastro Rápido</h3>
229
+ <p class="text-gray-600">Informe nome, idade, objetivos e nível de condicionamento atual.</p>
230
+ </div>
231
+
232
+ <!-- Step 2 -->
233
+ <div class="how-it-works-card p-8 rounded-xl hover:shadow-lg transition">
234
+ <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-6">
235
+ <span class="text-blue-600 text-2xl font-bold">2</span>
236
+ </div>
237
+ <h3 class="text-xl font-bold mb-3">Análise de Perfil</h3>
238
+ <p class="text-gray-600">Nossa IA avalia seu biotipo, limitações e potencial genético.</p>
239
+ </div>
240
+
241
+ <!-- Step 3 -->
242
+ <div class="how-it-works-card p-8 rounded-xl hover:shadow-lg transition">
243
+ <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-6">
244
+ <span class="text-blue-600 text-2xl font-bold">3</span>
245
+ </div>
246
+ <h3 class="text-xl font-bold mb-3">Plano Personalizado</h3>
247
+ <p class="text-gray-600">Receba treinos e nutrição sob medida para seu perfil.</p>
248
+ </div>
249
+ </div>
250
+
251
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
252
+ <!-- Step 4 -->
253
+ <div class="how-it-works-card p-8 rounded-xl hover:shadow-lg transition">
254
+ <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-6">
255
+ <span class="text-blue-600 text-2xl font-bold">4</span>
256
+ </div>
257
+ <h3 class="text-xl font-bold mb-3">Acompanhamento AI</h3>
258
+ <p class="text-gray-600">Ajustes automáticos de dificuldade conforme seu progresso.</p>
259
+ </div>
260
+
261
+ <!-- Step 5 -->
262
+ <div class="how-it-works-card p-8 rounded-xl hover:shadow-lg transition">
263
+ <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-6">
264
+ <span class="text-blue-600 text-2xl font-bold">5</span>
265
+ </div>
266
+ <h3 class="text-xl font-bold mb-3">Resultados Visíveis</h3>
267
+ <p class="text-gray-600">Comparativo antes/depois com métricas precisas.</p>
268
+ </div>
269
+
270
+ <!-- Step 6 -->
271
+ <div class="how-it-works-card p-8 rounded-xl hover:shadow-lg transition">
272
+ <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-6">
273
+ <span class="text-blue-600 text-2xl font-bold">6</span>
274
+ </div>
275
+ <h3 class="text-xl font-bold mb-3">Comunidade VIP</h3>
276
+ <p class="text-gray-600">Acesso a grupo exclusivo com especialistas e outros usuários.</p>
277
+ </div>
278
+ </div>
279
+ </div>
280
+ </section>
281
+
282
+ <!-- Features -->
283
+ <section id="features" class="py-20 bg-gray-50">
284
+ <div class="container mx-auto px-4">
285
+ <div class="text-center mb-16">
286
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Recursos Exclusivos</h2>
287
+ <p class="text-lg text-gray-600 max-w-2xl mx-auto">Tudo que você precisa para transformar seu corpo com eficiência máxima</p>
288
+ </div>
289
+
290
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
291
+ <!-- Feature 1 -->
292
+ <div class="feature-card p-8 rounded-xl hover:shadow-lg transition duration-300">
293
+ <div class="w-14 h-14 bg-blue-100 rounded-full flex items-center justify-center mb-6">
294
+ <i class="fas fa-video text-blue-600 text-xl"></i>
295
+ </div>
296
+ <h3 class="text-xl font-bold mb-3">500+ Exercícios em Vídeo HD</h3>
297
+ <p class="text-gray-600">Demonstrações profissionais em alta definição com ângulos múltiplos.</p>
298
+ </div>
299
+
300
+ <!-- Feature 2 -->
301
+ <div class="feature-card p-8 rounded-xl hover:shadow-lg transition duration-300">
302
+ <div class="w-14 h-14 bg-yellow-100 rounded-full flex items-center justify-center mb-6">
303
+ <i class="fas fa-chart-line text-yellow-600 text-xl"></i>
304
+ </div>
305
+ <h3 class="text-xl font-bold mb-3">Dashboard de Evolução</h3>
306
+ <p class="text-gray-600">Acompanhe todas suas métricas em gráficos interativos e relatórios semanais.</p>
307
+ </div>
308
+
309
+ <!-- Feature 3 -->
310
+ <div class="feature-card p-8 rounded-xl hover:shadow-lg transition duration-300">
311
+ <div class="w-14 h-14 bg-green-100 rounded-full flex items-center justify-center mb-6">
312
+ <i class="fas fa-utensils text-green-600 text-xl"></i>
313
+ </div>
314
+ <h3 class="text-xl font-bold mb-3">Planos Alimentares Inteligentes</h3>
315
+ <p class="text-gray-600">Receitas personalizadas baseadas em suas preferências e restrições.</p>
316
+ </div>
317
+
318
+ <!-- Feature 4 -->
319
+ <div class="feature-card p-8 rounded-xl hover:shadow-lg transition duration-300">
320
+ <div class="w-14 h-14 bg-purple-100 rounded-full flex items-center justify-center mb-6">
321
+ <i class="fas fa-stopwatch text-purple-600 text-xl"></i>
322
+ </div>
323
+ <h3 class="text-xl font-bold mb-3">Treinos Express (20 min)</h3>
324
+ <p class="text-gray-600">Sessões científicas de alta intensidade para resultados rápidos.</p>
325
+ </div>
326
+
327
+ <!-- Feature 5 -->
328
+ <div class="feature-card p-8 rounded-xl hover:shadow-lg transition duration-300">
329
+ <div class="w-14 h-14 bg-red-100 rounded-full flex items-center justify-center mb-6">
330
+ <i class="fas fa-brain text-red-600 text-xl"></i>
331
+ </div>
332
+ <h3 class="text-xl font-bold mb-3">Coach de IA 24/7</h3>
333
+ <p class="text-gray-600">Nosso assistente virtual responde dúvidas e ajusta seu plano em tempo real.</p>
334
+ </div>
335
+
336
+ <!-- Feature 6 -->
337
+ <div class="feature-card p-8 rounded-xl hover:shadow-lg transition duration-300">
338
+ <div class="w-14 h-14 bg-pink-100 rounded-full flex items-center justify-center mb-6">
339
+ <i class="fas fa-dumbbell text-pink-600 text-xl"></i>
340
+ </div>
341
+ <h3 class="text-xl font-bold mb-3">Adaptável a Qualquer Nível</h3>
342
+ <p class="text-gray-600">De iniciantes to atletas, todos encontram desafios ideais.</p>
343
+ </div>
344
+ </div>
345
+ </div>
346
+ </section>
347
+
348
+ <!-- Pricing -->
349
+ <section id="pricing" class="py-20 bg-white">
350
+ <div class="container mx-auto px-4">
351
+ <div class="text-center mb-16">
352
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Planos Acessíveis</h2>
353
+ <p class="text-lg text-gray-600 max-w-2xl mx-auto">Escolha o plano perfeito para sua jornada fitness</p>
354
+ </div>
355
+
356
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
357
+ <!-- Basic Plan -->
358
+ <div class="bg-gray-50 p-8 rounded-xl border border-gray-200 hover:shadow-lg transition duration-300">
359
+ <div class="flex justify-between items-start mb-6">
360
+ <div>
361
+ <h3 class="text-xl font-bold mb-1">BÁSICO</h3>
362
+ <p class="text-gray-500 text-sm">Ideal para quem quer começar</p>
363
+ </div>
364
+ <div class="bg-blue-100 text-blue-800 text-xs font-bold px-3 py-1 rounded-full">MAIS ECONÔMICO</div>
365
+ </div>
366
+ <div class="mb-6">
367
+ <span class="text-4xl font-bold">R$9,90</span>
368
+ <span class="text-gray-500">/semestre</span>
369
+ </div>
370
+ <ul class="space-y-3 mb-8">
371
+ <li class="flex items-center">
372
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
373
+ <span>Acesso a treinos básicos</span>
374
+ </li>
375
+ <li class="flex items-center">
376
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
377
+ <span>3 planos alimentares</span>
378
+ </li>
379
+ <li class="flex items-center text-gray-400">
380
+ <i class="fas fa-times-circle mr-2"></i>
381
+ <span>Acompanhamento de evolução</span>
382
+ </li>
383
+ <li class="flex items-center text-gray-400">
384
+ <i class="fas fa-times-circle mr-2"></i>
385
+ <span>Suporte prioritário</span>
386
+ </li>
387
+ </ul>
388
+ <a href="#" class="block w-full bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-3 px-4 rounded-lg text-center transition duration-300">
389
+ QUERO ESTE PLANO
390
+ </a>
391
+ </div>
392
+
393
+ <!-- Popular Plan -->
394
+ <div class="bg-blue-600 text-white p-8 rounded-xl border-2 border-yellow-400 transition duration-300">
395
+ <div class="flex justify-between items-start mb-6">
396
+ <div>
397
+ <h3 class="text-xl font-bold mb-1">POPULAR</h3>
398
+ <p class="text-blue-200 text-sm">O mais escolhido pelos usuários</p>
399
+ </div>
400
+ </div>
401
+ <div class="mb-6">
402
+ <span class="text-4xl font-bold">R$19,90</span>
403
+ <span class="text-blue-200">/ano</span>
404
+ </div>
405
+ <ul class="space-y-3 mb-8">
406
+ <li class="flex items-center">
407
+ <i class="fas fa-check-circle text-yellow-400 mr-2"></i>
408
+ <span>Todos os recursos premium</span>
409
+ </li>
410
+ <li class="flex items-center">
411
+ <i class="fas fa-check-circle text-yellow-400 mr-2"></i>
412
+ <span>9 planos alimentares</span>
413
+ </li>
414
+ <li class="flex items-center">
415
+ <i class="fas fa-check-circle text-yellow-400 mr-2"></i>
416
+ <span>Acompanhamento de evolução</span>
417
+ </li>
418
+ <li class="flex items-center">
419
+ <i class="fas fa-check-circle text-yellow-400 mr-2"></i>
420
+ <span>Suporte prioritário</span>
421
+ </li>
422
+ </ul>
423
+ <a href="#" class="block w-full bg-yellow-400 hover:bg-yellow-500 text-black font-bold py-3 px-4 rounded-lg text-center transition duration-300">
424
+ QUERO ESTE PLANO
425
+ </a>
426
+ </div>
427
+
428
+ <!-- Lifetime Plan -->
429
+ <div class="neon-border bg-gray-50 p-8 rounded-xl hover:shadow-lg transform scale-105 z-10 shadow-xl transition duration-300">
430
+ <div class="flex justify-between items-start mb-6">
431
+ <div>
432
+ <h3 class="text-xl font-bold mb-1">VITALÍCIO</h3>
433
+ <p class="text-gray-500 text-sm">Investimento único</p>
434
+ </div>
435
+ <div class="bg-purple-100 text-purple-800 text-xs font-bold px-3 py-1 rounded-full">OFERTA LIMITADA</div>
436
+ </div>
437
+ <div class="mb-6">
438
+ <span class="text-4xl font-bold">R$29,90</span>
439
+ <span class="text-gray-500">(única vez)</span>
440
+ </div>
441
+ <ul class="space-y-3 mb-8">
442
+ <li class="flex items-center">
443
+ <i class="fas fa-check-circle text-purple-500 mr-2"></i>
444
+ <span>Todos os benefícios</span>
445
+ </li>
446
+ <li class="flex items-center">
447
+ <i class="fas fa-check-circle text-purple-500 mr-2"></i>
448
+ <span>Atualizações gratuitas</span>
449
+ </li>
450
+ <li class="flex items-center">
451
+ <i class="fas fa-check-circle text-purple-500 mr-2"></i>
452
+ <span>Grupo VIP exclusivo</span>
453
+ </li>
454
+ <li class="flex items-center">
455
+ <i class="fas fa-check-circle text-purple-500 mr-2"></i>
456
+ <span>Consultoria mensal</span>
457
+ </li>
458
+ </ul>
459
+ <a href="#" class="block w-full bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-4 rounded-lg text-center transition duration-300">
460
+ QUERO ESTE PLANO
461
+ </a>
462
+ </div>
463
+ </div>
464
+
465
+ <div class="mt-12 text-center">
466
+ <a href="#" class="inline-block border-2 border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white font-bold py-3 px-6 rounded-lg transition duration-300">
467
+ TESTAR POR 7 DIAS GRÁTIS
468
+ </a>
469
+ </div>
470
+ </div>
471
+ </section>
472
+
473
+ <!-- Testimonials -->
474
+ <section id="testimonials" class="py-20 bg-gray-50">
475
+ <div class="container mx-auto px-4">
476
+ <div class="text-center mb-16">
477
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">O Que Nossos Usuários Dizem</h2>
478
+ <p class="text-lg text-gray-600 max-w-2xl mx-auto">Resultados reais de pessoas como você</p>
479
+ </div>
480
+
481
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
482
+ <!-- Testimonial 1 -->
483
+ <div class="testimonial-card bg-white p-8 rounded-xl shadow-md">
484
+ <div class="flex items-center mb-6">
485
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" class="w-12 h-12 rounded-full mr-4">
486
+ <div>
487
+ <h4 class="font-bold">Ana Carolina</h4>
488
+ <div class="flex text-yellow-400 text-sm">
489
+ <i class="fas fa-star"></i>
490
+ <i class="fas fa-star"></i>
491
+ <i class="fas fa-star"></i>
492
+ <i class="fas fa-star"></i>
493
+ <i class="fas fa-star"></i>
494
+ </div>
495
+ </div>
496
+ </div>
497
+ <p class="text-gray-600 mb-6">"Perdi 8kg em apenas 6 semanas seguindo os treinos de 20 minutos e a dieta sugerida pela IA. Nunca imaginei que seria tão fácil!"</p>
498
+ <div class="bg-blue-50 p-3 rounded-lg">
499
+ <div class="flex justify-between text-sm">
500
+ <span class="font-bold">Antes:</span>
501
+ <span>78kg</span>
502
+ </div>
503
+ <div class="flex justify-between text-sm">
504
+ <span class="font-bold">Depois:</span>
505
+ <span>70kg</span>
506
+ </div>
507
+ <div class="flex justify-between text-sm">
508
+ <span class="font-bold">Tempo:</span>
509
+ <span>6 semanas</span>
510
+ </div>
511
+ </div>
512
+ </div>
513
+
514
+ <!-- Testimonial 2 -->
515
+ <div class="testimonial-card bg-white p-8 rounded-xl shadow-md">
516
+ <div class="flex items-center mb-6">
517
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" class="w-12 h-12 rounded-full mr-4">
518
+ <div>
519
+ <h4 class="font-bold">Ricardo Almeida</h4>
520
+ <div class="flex text-yellow-400 text-sm">
521
+ <i class="fas fa-star"></i>
522
+ <i class="fas fa-star"></i>
523
+ <i class="fas fa-star"></i>
524
+ <i class="fas fa-star"></i>
525
+ <i class="fas fa-star"></i>
526
+ </div>
527
+ </div>
528
+ </div>
529
+ <p class="text-gray-600 mb-6">"Como atleta, precisei melhorar meu desempenho. A IA criou um plano específico para meu esporte e em 3 meses melhorei 22% meu tempo."</p>
530
+ <div class="bg-blue-50 p-3 rounded-lg">
531
+ <div class="flex justify-between text-sm">
532
+ <span class="font-bold">Antes:</span>
533
+ <span>10km em 48min</span>
534
+ </div>
535
+ <div class="flex justify-between text-sm">
536
+ <span class="font-bold">Depois:</span>
537
+ <span>10km em 37min</span>
538
+ </div>
539
+ <div class="flex justify-between text-sm">
540
+ <span class="font-bold">Tempo:</span>
541
+ <span>3 meses</span>
542
+ </div>
543
+ </div>
544
+ </div>
545
+
546
+ <!-- Testimonial 3 -->
547
+ <div class="testimonial-card bg-white p-8 rounded-xl shadow-md">
548
+ <div class="flex items-center mb-6">
549
+ <img src="https://randomuser.me/api/portraits/women/68.jpg" class="w-12 h-12 rounded-full mr-4">
550
+ <div>
551
+ <h4 class="font-bold">Fernanda Gomes</h4>
552
+ <div class="flex text-yellow-400 text-sm">
553
+ <i class="fas fa-star"></i>
554
+ <i class="fas fa-star"></i>
555
+ <i class="fas fa-star"></i>
556
+ <i class="fas fa-star"></i>
557
+ <i class="fas fa-star"></i>
558
+ </div>
559
+ </div>
560
+ </div>
561
+ <p class="text-gray-600 mb-6">"Depois do bebê, estava com dificuldades para voltar à forma. Em 8 semanas recuperei minha silhueta com treinos curtos durante as sonecas dele."</p>
562
+ <div class="bg-blue-50 p-3 rounded-lg">
563
+ <div class="flex justify-between text-sm">
564
+ <span class="font-bold">Antes:</span>
565
+ <span>28% gordura</span>
566
+ </div>
567
+ <div class="flex justify-between text-sm">
568
+ <span class="font-bold">Depois:</span>
569
+ <span>19% gordura</span>
570
+ </div>
571
+ <div class="flex justify-between text-sm">
572
+ <span class="font-bold">Tempo:</span>
573
+ <span>8 semanas</span>
574
+ </div>
575
+ </div>
576
+ </div>
577
+ </div>
578
+ </div>
579
+ </section>
580
+
581
+ <!-- FAQ -->
582
+ <section class="py-20 bg-white">
583
+ <div class="container mx-auto px-4 max-w-3xl">
584
+ <div class="text-center mb-16">
585
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Perguntas Frequentes</h2>
586
+ <p class="text-lg text-gray-600">Tire suas dúvidas sobre o Aplicativo Fitness</p>
587
+ </div>
588
+
589
+ <div class="space-y-4">
590
+ <!-- FAQ 1 -->
591
+ <div class="border border-gray-200 rounded-lg overflow-hidden">
592
+ <button class="faq-toggle w-full flex justify-between items-center p-6 bg-gray-50 hover:bg-gray-100 transition">
593
+ <span class="text-lg font-bold text-left">Como são criados os treinos personalizados?</span>
594
+ <i class="fas fa-chevron-down transition-transform duration-300"></i>
595
+ </button>
596
+ <div class="faq-content hidden p-6 border-t border-gray-200">
597
+ <p class="text-gray-600">Nosso algoritmo analisa mais de 50 parâmetros incluindo sua idade, peso, histórico médico, objetivos, equipamentos disponíveis, tempo livre e até mesmo seu <span class="tooltip">biotipo<span class="tooltip-text">Classificação corporal baseada em características genéticas</span></span> para criar um plano 100% adaptado às suas necessidades.</p>
598
+ </div>
599
+ </div>
600
+
601
+ <!-- FAQ 2 -->
602
+ <div class="border border-gray-200 rounded-lg overflow-hidden">
603
+ <button class="faq-toggle w-full flex justify-between items-center p-6 bg-gray-50 hover:bg-gray-100 transition">
604
+ <span class="text-lg font-bold text-left">Preciso de equipamentos caros?</span>
605
+ <i class="fas fa-chevron-down transition-transform duration-300"></i>
606
+ </button>
607
+ <div class="faq-content hidden p-6 border-t border-gray-200">
608
+ <p class="text-gray-600">Não! Nossos treinos são adaptáveis a qualquer ambiente. Você pode usar desde halteres profissionais até garrafas de água ou o próprio peso do corpo. A IA sempre sugere alternativas baseadas no que você tem disponível.</p>
609
+ </div>
610
+ </div>
611
+
612
+ <!-- FAQ 3 -->
613
+ <div class="border border-gray-200 rounded-lg overflow-hidden">
614
+ <button class="faq-toggle w-full flex justify-between items-center p-6 bg-gray-50 hover:bg-gray-100 transition">
615
+ <span class="text-lg font-bold text-left">E se eu não gostar do plano sugerido?</span>
616
+ <i class="fas fa-chevron-down transition-transform duration-300"></i>
617
+ </button>
618
+ <div class="faq-content hidden p-6 border-t border-gray-200">
619
+ <p class="text-gray-600">Você pode solicitar ajustes ilimitados até ficar 100% satisfeito. Além disso, conforme você usa o app, a IA aprende suas preferências e vai refinando cada vez mais as sugestões.</p>
620
+ </div>
621
+ </div>
622
+
623
+ <!-- FAQ 4 -->
624
+ <div class="border border-gray-200 rounded-lg overflow-hidden">
625
+ <button class="faq-toggle w-full flex justify-between items-center p-6 bg-gray-50 hover:bg-gray-100 transition">
626
+ <span class="text-lg font-bold text-left">Como funciona o teste grátis?</span>
627
+ <i class="fas fa-chevron-down transition-transform duration-300"></i>
628
+ </button>
629
+ <div class="faq-content hidden p-6 border-t border-gray-200">
630
+ <p class="text-gray-600">Você tem 7 dias completos para testar TODOS os recursos premium sem compromisso. Se não quiser continuar, basta cancelar antes do período acabar e não será cobrado nada.</p>
631
+ </div>
632
+ </div>
633
+ </div>
634
+ </div>
635
+ </section>
636
+
637
+ <!-- Final CTA -->
638
+ <section class="py-20 bg-gradient-to-r from-blue-900 to-blue-700 text-white">
639
+ <div class="container mx-auto px-4 text-center">
640
+ <h2 class="text-3xl md:text-5xl font-bold mb-6">Sua Melhor Versão Começa Aqui!</h2>
641
+ <p class="text-xl mb-10 max-w-2xl mx-auto">Junte-se a mais de 50.000 pessoas transformando seus corpos com inteligência artificial</p>
642
+
643
+ <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-6">
644
+ <a href="#" class="bg-yellow-500 hover:bg-yellow-600 text-black font-bold py-4 px-8 rounded-lg text-lg flex items-center justify-center transition duration-300">
645
+ <i class="fas fa-mobile-alt mr-3"></i> BAIXAR AGORA
646
+ </a>
647
+ <a href="#" class="bg-transparent hover:bg-white hover:text-black border-2 border-white text-white font-bold py-4 px-8 rounded-lg text-lg flex items-center justify-center transition duration-300">
648
+ <i class="fas fa-calendar-check mr-3"></i> TESTAR GRÁTIS POR 7 DIAS
649
+ </a>
650
+ </div>
651
+
652
+ <div class="mt-10 flex flex-wrap justify-center items-center gap-6">
653
+ <div class="flex items-center">
654
+ <i class="fas fa-lock text-gray-300 mr-2"></i>
655
+ <span class="text-sm">Pagamento seguro</span>
656
+ </div>
657
+ <div class="flex items-center">
658
+ <i class="fas fa-shield-alt text-gray-300 mr-2"></i>
659
+ <span class="text-sm">Dados protegidos</span>
660
+ </div>
661
+ <div class="flex items-center">
662
+ <i class="fas fa-headset text-gray-300 mr-2"></i>
663
+ <span class="text-sm">Suporte Online</span>
664
+ </div>
665
+ </div>
666
+ </div>
667
+ </section>
668
+
669
+ <!-- Footer -->
670
+ <footer class="bg-black text-white py-12">
671
+ <div class="container mx-auto px-4">
672
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
673
+ <div>
674
+ <h4 class="text-lg font-bold mb-4">Aplicativo Fitness</h4>
675
+ <p class="text-gray-400 mb-4">"O Seu maior patrimônio é a sua saúde!"</p>
676
+ <p class="text-gray-400">É um prazer recebe-lo em nosso site!</p>
677
+ </div>
678
+
679
+ <div>
680
+ <h4 class="text-lg font-bold mb-4">Links Úteis</h4>
681
+ <ul class="space-y-2">
682
+ <li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li>
683
+ <li><a href="#" class="text-gray-400 hover:text-white">Termos de Uso</a></li>
684
+ <li><a href="#" class="text-gray-400 hover:text-white">Política de Privacidade</a></li>
685
+ <li><a href="#" class="text-gray-400 hover:text-white">Trabalhe Conosco</a></li>
686
+ </ul>
687
+ </div>
688
+
689
+ <div>
690
+ <h4 class="text-lg font-bold mb-4">Suporte</h4>
691
+ <ul class="space-y-2">
692
+ <li><a href="#" class="text-gray-400 hover:text-white">Central de Ajuda</a></li>
693
+ <li><a href="#" class="text-gray-400 hover:text-white">FAQ</a></li>
694
+ <li><a href="#" class="text-gray-400 hover:text-white">Contato</a></li>
695
+ <li><a href="#" class="text-gray-400 hover:text-white">Status do Serviço</a></li>
696
+ </ul>
697
+ </div>
698
+
699
+ <div>
700
+ <h4 class="text-lg font-bold mb-4">Baixe o App</h4>
701
+ <div class="space-y-3">
702
+ <a href="#" class="block bg-gray-800 hover:bg-gray-700 text-white py-2 px-4 rounded-lg flex items-center">
703
+ <i class="fab fa-apple mr-2"></i>
704
+ <div>
705
+ <div class="text-xs">Disponível na</div>
706
+ <div class="font-bold">App Store</div>
707
+ </div>
708
+ </a>
709
+ <a href="#" class="block bg-gray-800 hover:bg-gray-700 text-white py-2 px-4 rounded-lg flex items-center">
710
+ <i class="fab fa-google-play mr-2"></i>
711
+ <div>
712
+ <div class="text-xs">Disponível no</div>
713
+ <div class="font-bold">Google Play</div>
714
+ </div>
715
+ </a>
716
+ </div>
717
+ </div>
718
+ </div>
719
+
720
+ <div class="border-t border-gray-800 pt-8 text-center text-gray-500">
721
+ <p>© 2023 FIT AI. Todos os direitos reservados.</p>
722
+ </div>
723
+ </div>
724
+ </footer>
725
+
726
+ <script>
727
+ // Mobile menu toggle
728
+ const mobileMenuButton = document.getElementById('mobile-menu-button');
729
+ const mobileMenu = document.getElementById('mobile-menu');
730
+
731
+ mobileMenuButton.addEventListener('click', () => {
732
+ mobileMenu.classList.toggle('open');
733
+ });
734
+
735
+ // FAQ toggle functionality
736
+ document.querySelectorAll('.faq-toggle').forEach(button => {
737
+ button.addEventListener('click', () => {
738
+ const content = button.nextElementSibling;
739
+ const icon = button.querySelector('i');
740
+
741
+ content.classList.toggle('hidden');
742
+ icon.classList.toggle('rotate-180');
743
+ });
744
+ });
745
+
746
+ // Smooth scrolling for anchor links
747
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
748
+ anchor.addEventListener('click', function (e) {
749
+ e.preventDefault();
750
+
751
+ const targetId = this.getAttribute('href');
752
+ if (targetId === '#') return;
753
+
754
+ const targetElement = document.querySelector(targetId);
755
+ if (targetElement) {
756
+ targetElement.scrollIntoView({
757
+ behavior: 'smooth'
758
+ });
759
+
760
+ // Close mobile menu if open
761
+ if (mobileMenu.classList.contains('open')) {
762
+ mobileMenu.classList.remove('open');
763
+ }
764
+ }
765
+ });
766
+ });
767
+
768
+ // Animation on scroll
769
+ const observerOptions = {
770
+ threshold: 0.1
771
+ };
772
+
773
+ const observer = new IntersectionObserver((entries) => {
774
+ entries.forEach(entry => {
775
+ if (entry.isIntersecting) {
776
+ entry.target.classList.add('animate-fadeIn');
777
+ observer.unobserve(entry.target);
778
+ }
779
+ });
780
+ }, observerOptions);
781
+
782
+ document.querySelectorAll('.feature-card, .testimonial-card, .neon-border').forEach(card => {
783
+ observer.observe(card);
784
+ });
785
+ </script>
786
+ <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=wallysonweb/appfitt" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
787
+ </html>
prompts.txt ADDED
File without changes