Hugging Face's logo

Spaces:
JEFFERSON1995
/
suplementos
Running

App Files Community
JEFFERSON1995 commited on
Commit
08bba2c
·
verified ·
1 Parent(s): 1ed58d1

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +994 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Suplementos
3
- emoji: 🏆
4
  colorFrom: red
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: suplementos
3
+ emoji: 🐳
4
  colorFrom: red
5
+ colorTo: green
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,994 @@
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>VitaPlus - Suplementos para Saúde e Energia</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-section {
11
+ background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.8)),
12
+ url('https://images.unsplash.com/photo-1587854692152-cbe660dbde88?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2069&q=80');
13
+ background-size: cover;
14
+ background-position: center;
15
+ }
16
+
17
+ .product-card:hover {
18
+ transform: translateY(-5px);
19
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
20
+ }
21
+
22
+ .testimonial-card {
23
+ background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
24
+ }
25
+
26
+ .nav-link {
27
+ position: relative;
28
+ }
29
+
30
+ .nav-link:after {
31
+ content: '';
32
+ position: absolute;
33
+ width: 0;
34
+ height: 2px;
35
+ bottom: 0;
36
+ left: 0;
37
+ background-color: #3b82f6;
38
+ transition: width 0.3s ease;
39
+ }
40
+
41
+ .nav-link:hover:after {
42
+ width: 100%;
43
+ }
44
+
45
+ .active-nav:after {
46
+ width: 100%;
47
+ }
48
+
49
+ .section {
50
+ scroll-margin-top: 100px;
51
+ }
52
+
53
+ @media (max-width: 768px) {
54
+ .hero-content {
55
+ text-align: center;
56
+ }
57
+ }
58
+ </style>
59
+ </head>
60
+ <body class="font-sans bg-white">
61
+ <!-- Header/Navigation -->
62
+ <header class="sticky top-0 z-50 bg-white shadow-md">
63
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
64
+ <div class="flex items-center">
65
+ <div class="w-12 h-12 bg-blue-500 rounded-full flex items-center justify-center mr-3">
66
+ <i class="fas fa-pills text-white text-xl"></i>
67
+ </div>
68
+ <h1 class="text-2xl font-bold text-blue-600">Vita<span class="text-green-500">Plus</span></h1>
69
+ </div>
70
+
71
+ <nav class="hidden md:flex space-x-8">
72
+ <a href="#home" class="nav-link active-nav text-gray-800 font-medium">Home</a>
73
+ <a href="#products" class="nav-link text-gray-600 hover:text-gray-800 font-medium">Produtos</a>
74
+ <a href="#about" class="nav-link text-gray-600 hover:text-gray-800 font-medium">Diferenciais</a>
75
+ <a href="#testimonials" class="nav-link text-gray-600 hover:text-gray-800 font-medium">Depoimentos</a>
76
+ <a href="#contact" class="nav-link text-gray-600 hover:text-gray-800 font-medium">Contato</a>
77
+ </nav>
78
+
79
+ <div class="flex items-center space-x-4">
80
+ <button class="md:hidden text-gray-600" id="mobile-menu-button">
81
+ <i class="fas fa-bars text-2xl"></i>
82
+ </button>
83
+ <div class="relative">
84
+ <i class="fas fa-shopping-cart text-gray-700 text-xl"></i>
85
+ <span class="absolute -top-2 -right-2 bg-red-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">0</span>
86
+ </div>
87
+ </div>
88
+ </div>
89
+
90
+ <!-- Mobile Menu -->
91
+ <div class="md:hidden hidden bg-white w-full py-4 px-4 shadow-lg" id="mobile-menu">
92
+ <div class="flex flex-col space-y-3">
93
+ <a href="#home" class="text-blue-600 font-medium py-2 border-b border-gray-100">Home</a>
94
+ <a href="#products" class="text-gray-600 font-medium py-2 border-b border-gray-100">Produtos</a>
95
+ <a href="#about" class="text-gray-600 font-medium py-2 border-b border-gray-100">Diferenciais</a>
96
+ <a href="#testimonials" class="text-gray-600 font-medium py-2 border-b border-gray-100">Depoimentos</a>
97
+ <a href="#contact" class="text-gray-600 font-medium py-2 border-b border-gray-100">Contato</a>
98
+ </div>
99
+ </div>
100
+ </header>
101
+
102
+ <!-- Hero Section -->
103
+ <section id="home" class="hero-section section py-20 md:py-32">
104
+ <div class="container mx-auto px-4">
105
+ <div class="max-w-2xl hero-content">
106
+ <h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-4 leading-tight">
107
+ 💊 Suplementos para sua <span class="text-blue-600">saúde</span>, <span class="text-green-500">energia</span> e <span class="text-yellow-500">imunidade</span> em dia.
108
+ </h1>
109
+ <p class="text-xl text-gray-600 mb-8">
110
+ Descubra o poder da Vitamina B12, D, Ômega 3 e mais. Produtos de qualidade, com envio rápido e atendimento especializado.
111
+ </p>
112
+ <div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4">
113
+ <a href="#products" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-lg text-center transition duration-300">
114
+ Conheça os suplementos
115
+ </a>
116
+ <a href="#products" class="bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-6 rounded-lg text-center transition duration-300 shadow-lg">
117
+ Comprar agora com desconto <i class="fas fa-bolt ml-2"></i>
118
+ </a>
119
+ </div>
120
+ </div>
121
+ </div>
122
+ </section>
123
+
124
+ <!-- Featured Products -->
125
+ <section class="bg-gray-50 py-16">
126
+ <div class="container mx-auto px-4">
127
+ <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Mais Vendidos</h2>
128
+
129
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
130
+ <!-- Product 1 -->
131
+ <div class="product-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300">
132
+ <div class="relative">
133
+ <img src="https://images.unsplash.com/photo-1584308666744-24d5c474f2ae?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1013&q=80"
134
+ alt="Vitamina B12" class="w-full h-48 object-cover">
135
+ <span class="absolute top-2 right-2 bg-red-500 text-white text-xs font-bold px-2 py-1 rounded-full">-15%</span>
136
+ </div>
137
+ <div class="p-4">
138
+ <h3 class="font-bold text-lg text-gray-800 mb-1">Vitamina B12 Sublingual</h3>
139
+ <p class="text-gray-600 text-sm mb-3">Aumente sua energia e foco mental</p>
140
+ <div class="flex items-center mb-2">
141
+ <div class="flex text-yellow-400">
142
+ <i class="fas fa-star"></i>
143
+ <i class="fas fa-star"></i>
144
+ <i class="fas fa-star"></i>
145
+ <i class="fas fa-star"></i>
146
+ <i class="fas fa-star-half-alt"></i>
147
+ </div>
148
+ <span class="text-gray-500 text-xs ml-1">(128)</span>
149
+ </div>
150
+ <div class="flex justify-between items-center">
151
+ <span class="text-blue-600 font-bold text-lg">R$ 69,90</span>
152
+ <span class="text-gray-400 text-sm line-through">R$ 82,90</span>
153
+ </div>
154
+ <button class="mt-3 w-full bg-blue-100 hover:bg-blue-200 text-blue-600 font-medium py-2 px-4 rounded-lg transition duration-300">
155
+ Adicionar ao carrinho
156
+ </button>
157
+ </div>
158
+ </div>
159
+
160
+ <!-- Product 2 -->
161
+ <div class="product-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300">
162
+ <div class="relative">
163
+ <img src="https://images.unsplash.com/photo-1587854692152-cbe660dbde88?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1013&q=80"
164
+ alt="Vitamina D3 + K2" class="w-full h-48 object-cover">
165
+ </div>
166
+ <div class="p-4">
167
+ <h3 class="font-bold text-lg text-gray-800 mb-1">Vitamina D3 + K2</h3>
168
+ <p class="text-gray-600 text-sm mb-3">Imunidade fortalecida e saúde óssea</p>
169
+ <div class="flex items-center mb-2">
170
+ <div class="flex text-yellow-400">
171
+ <i class="fas fa-star"></i>
172
+ <i class="fas fa-star"></i>
173
+ <i class="fas fa-star"></i>
174
+ <i class="fas fa-star"></i>
175
+ <i class="far fa-star"></i>
176
+ </div>
177
+ <span class="text-gray-500 text-xs ml-1">(94)</span>
178
+ </div>
179
+ <div class="flex justify-between items-center">
180
+ <span class="text-blue-600 font-bold text-lg">R$ 79,90</span>
181
+ </div>
182
+ <button class="mt-3 w-full bg-blue-100 hover:bg-blue-200 text-blue-600 font-medium py-2 px-4 rounded-lg transition duration-300">
183
+ Adicionar ao carrinho
184
+ </button>
185
+ </div>
186
+ </div>
187
+
188
+ <!-- Product 3 -->
189
+ <div class="product-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300">
190
+ <div class="relative">
191
+ <img src="https://images.unsplash.com/photo-1607619056574-7b8d3ee536b2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1013&q=80"
192
+ alt="Ômega 3 Ultra Puro" class="w-full h-48 object-cover">
193
+ <span class="absolute top-2 right-2 bg-green-500 text-white text-xs font-bold px-2 py-1 rounded-full">NOVO</span>
194
+ </div>
195
+ <div class="p-4">
196
+ <h3 class="font-bold text-lg text-gray-800 mb-1">Ômega 3 Ultra Puro</h3>
197
+ <p class="text-gray-600 text-sm mb-3">Coração, cérebro e articulações</p>
198
+ <div class="flex items-center mb-2">
199
+ <div class="flex text-yellow-400">
200
+ <i class="fas fa-star"></i>
201
+ <i class="fas fa-star"></i>
202
+ <i class="fas fa-star"></i>
203
+ <i class="fas fa-star"></i>
204
+ <i class="fas fa-star"></i>
205
+ </div>
206
+ <span class="text-gray-500 text-xs ml-1">(217)</span>
207
+ </div>
208
+ <div class="flex justify-between items-center">
209
+ <span class="text-blue-600 font-bold text-lg">R$ 89,90</span>
210
+ </div>
211
+ <button class="mt-3 w-full bg-blue-100 hover:bg-blue-200 text-blue-600 font-medium py-2 px-4 rounded-lg transition duration-300">
212
+ Adicionar ao carrinho
213
+ </button>
214
+ </div>
215
+ </div>
216
+
217
+ <!-- Product 4 -->
218
+ <div class="product-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300">
219
+ <div class="relative">
220
+ <img src="https://images.unsplash.com/photo-1596755094514-f87e34085b2c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1013&q=80"
221
+ alt="Colágeno Tipo 2" class="w-full h-48 object-cover">
222
+ </div>
223
+ <div class="p-4">
224
+ <h3 class="font-bold text-lg text-gray-800 mb-1">Colágeno Tipo 2</h3>
225
+ <p class="text-gray-600 text-sm mb-3">Pele firme e articulações saudáveis</p>
226
+ <div class="flex items-center mb-2">
227
+ <div class="flex text-yellow-400">
228
+ <i class="fas fa-star"></i>
229
+ <i class="fas fa-star"></i>
230
+ <i class="fas fa-star"></i>
231
+ <i class="fas fa-star"></i>
232
+ <i class="far fa-star"></i>
233
+ </div>
234
+ <span class="text-gray-500 text-xs ml-1">(76)</span>
235
+ </div>
236
+ <div class="flex justify-between items-center">
237
+ <span class="text-blue-600 font-bold text-lg">R$ 59,90</span>
238
+ </div>
239
+ <button class="mt-3 w-full bg-blue-100 hover:bg-blue-200 text-blue-600 font-medium py-2 px-4 rounded-lg transition duration-300">
240
+ Adicionar ao carrinho
241
+ </button>
242
+ </div>
243
+ </div>
244
+ </div>
245
+ </div>
246
+ </section>
247
+
248
+ <!-- All Products Section -->
249
+ <section id="products" class="section py-16 bg-white">
250
+ <div class="container mx-auto px-4">
251
+ <h2 class="text-3xl font-bold text-center text-gray-800 mb-4">Nossos Produtos</h2>
252
+ <p class="text-center text-gray-600 max-w-2xl mx-auto mb-8">
253
+ Suplementos de alta qualidade para todas as suas necessidades de saúde e bem-estar
254
+ </p>
255
+
256
+ <!-- Filter Buttons -->
257
+ <div class="flex flex-wrap justify-center gap-3 mb-8">
258
+ <button class="filter-btn bg-blue-600 text-white px-4 py-2 rounded-full text-sm font-medium" data-filter="all">
259
+ Todos
260
+ </button>
261
+ <button class="filter-btn bg-gray-100 hover:bg-gray-200 text-gray-800 px-4 py-2 rounded-full text-sm font-medium transition" data-filter="energy">
262
+ Energia
263
+ </button>
264
+ <button class="filter-btn bg-gray-100 hover:bg-gray-200 text-gray-800 px-4 py-2 rounded-full text-sm font-medium transition" data-filter="immunity">
265
+ Imunidade
266
+ </button>
267
+ <button class="filter-btn bg-gray-100 hover:bg-gray-200 text-gray-800 px-4 py-2 rounded-full text-sm font-medium transition" data-filter="brain">
268
+ Cérebro
269
+ </button>
270
+ <button class="filter-btn bg-gray-100 hover:bg-gray-200 text-gray-800 px-4 py-2 rounded-full text-sm font-medium transition" data-filter="aging">
271
+ Envelhecimento
272
+ </button>
273
+ <button class="filter-btn bg-gray-100 hover:bg-gray-200 text-gray-800 px-4 py-2 rounded-full text-sm font-medium transition" data-filter="muscle">
274
+ Músculos
275
+ </button>
276
+ </div>
277
+
278
+ <!-- Products Grid -->
279
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8" id="products-grid">
280
+ <!-- Product items will be loaded here by JavaScript -->
281
+ </div>
282
+ </div>
283
+ </section>
284
+
285
+ <!-- Why Choose Us Section -->
286
+ <section id="about" class="section py-16 bg-blue-50">
287
+ <div class="container mx-auto px-4">
288
+ <h2 class="text-3xl font-bold text-center text-gray-800 mb-4">🌱 Qualidade, ciência e cuidado com sua saúde</h2>
289
+ <p class="text-center text-gray-600 max-w-2xl mx-auto mb-12">
290
+ Na VitaPlus, nossa missão é fornecer os melhores suplementos para sua saúde e bem-estar
291
+ </p>
292
+
293
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
294
+ <!-- Feature 1 -->
295
+ <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition duration-300">
296
+ <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mb-4">
297
+ <i class="fas fa-flask text-blue-600 text-xl"></i>
298
+ </div>
299
+ <h3 class="font-bold text-lg text-gray-800 mb-2">Fórmulas com alta absorção</h3>
300
+ <p class="text-gray-600">
301
+ Desenvolvemos nossas fórmulas com os melhores ingredientes para máxima biodisponibilidade e eficácia.
302
+ </p>
303
+ </div>
304
+
305
+ <!-- Feature 2 -->
306
+ <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition duration-300">
307
+ <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mb-4">
308
+ <i class="fas fa-certificate text-green-600 text-xl"></i>
309
+ </div>
310
+ <h3 class="font-bold text-lg text-gray-800 mb-2">Produção certificada por Anvisa</h3>
311
+ <p class="text-gray-600">
312
+ Todos os nossos produtos são registrados e fabricados em instalações certificadas pela Anvisa.
313
+ </p>
314
+ </div>
315
+
316
+ <!-- Feature 3 -->
317
+ <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition duration-300">
318
+ <div class="w-12 h-12 bg-yellow-100 rounded-full flex items-center justify-center mb-4">
319
+ <i class="fas fa-truck text-yellow-600 text-xl"></i>
320
+ </div>
321
+ <h3 class="font-bold text-lg text-gray-800 mb-2">Frete rápido e atendimento</h3>
322
+ <p class="text-gray-600">
323
+ Entregamos em todo o Brasil com rapidez e nosso atendimento está sempre pronto para ajudar.
324
+ </p>
325
+ </div>
326
+
327
+ <!-- Feature 4 -->
328
+ <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition duration-300">
329
+ <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mb-4">
330
+ <i class="fas fa-leaf text-purple-600 text-xl"></i>
331
+ </div>
332
+ <h3 class="font-bold text-lg text-gray-800 mb-2">Suplementos veganos</h3>
333
+ <p class="text-gray-600">
334
+ Oferecemos opções veganas e sem glúten para atender a diferentes necessidades e preferências.
335
+ </p>
336
+ </div>
337
+
338
+ <!-- Feature 5 -->
339
+ <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition duration-300">
340
+ <div class="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center mb-4">
341
+ <i class="fas fa-lock text-red-600 text-xl"></i>
342
+ </div>
343
+ <h3 class="font-bold text-lg text-gray-800 mb-2">Pagamento seguro</h3>
344
+ <p class="text-gray-600">
345
+ Ambiente 100% seguro com diversas opções de pagamento e parcelamento em até 12x.
346
+ </p>
347
+ </div>
348
+
349
+ <!-- Feature 6 -->
350
+ <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition duration-300">
351
+ <div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center mb-4">
352
+ <i class="fas fa-book text-indigo-600 text-xl"></i>
353
+ </div>
354
+ <h3 class="font-bold text-lg text-gray-800 mb-2">Educação nutricional</h3>
355
+ <p class="text-gray-600">
356
+ Fornecemos informações baseadas em evidências científicas para ajudar você a tomar decisões informadas.
357
+ </p>
358
+ </div>
359
+ </div>
360
+ </div>
361
+ </section>
362
+
363
+ <!-- Testimonials Section -->
364
+ <section id="testimonials" class="section py-16 bg-white">
365
+ <div class="container mx-auto px-4">
366
+ <h2 class="text-3xl font-bold text-center text-gray-800 mb-4">O que nossos clientes dizem</h2>
367
+ <p class="text-center text-gray-600 max-w-2xl mx-auto mb-12">
368
+ Mais de 5.000 clientes satisfeitos em todo o Brasil
369
+ </p>
370
+
371
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
372
+ <!-- Testimonial 1 -->
373
+ <div class="testimonial-card p-6 rounded-xl">
374
+ <div class="flex items-center mb-4">
375
+ <div class="flex text-yellow-400 mr-2">
376
+ <i class="fas fa-star"></i>
377
+ <i class="fas fa-star"></i>
378
+ <i class="fas fa-star"></i>
379
+ <i class="fas fa-star"></i>
380
+ <i class="fas fa-star"></i>
381
+ </div>
382
+ <span class="text-gray-500 text-sm">2 semanas atrás</span>
383
+ </div>
384
+ <p class="text-gray-700 italic mb-4">
385
+ "Comecei a usar a B12 dessa loja e nunca me senti tão bem. Energia pura durante todo o dia. O atendimento foi excelente e a entrega super rápida!"
386
+ </p>
387
+ <div class="flex items-center">
388
+ <div class="w-10 h-10 rounded-full bg-gray-300 mr-3 overflow-hidden">
389
+ <img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Ana Silva" class="w-full h-full object-cover">
390
+ </div>
391
+ <div>
392
+ <h4 class="font-medium text-gray-800">Ana Silva</h4>
393
+ <p class="text-gray-500 text-sm">São Paulo, SP</p>
394
+ </div>
395
+ </div>
396
+ </div>
397
+
398
+ <!-- Testimonial 2 -->
399
+ <div class="testimonial-card p-6 rounded-xl">
400
+ <div class="flex items-center mb-4">
401
+ <div class="flex text-yellow-400 mr-2">
402
+ <i class="fas fa-star"></i>
403
+ <i class="fas fa-star"></i>
404
+ <i class="fas fa-star"></i>
405
+ <i class="fas fa-star"></i>
406
+ <i class="fas fa-star"></i>
407
+ </div>
408
+ <span class="text-gray-500 text-sm">1 mês atrás</span>
409
+ </div>
410
+ <p class="text-gray-700 italic mb-4">
411
+ "Excelente atendimento e entrega rápida. Comprei o ômega 3 e já notei diferença na minha concentração. Já sou cliente fiel e recomendo para todos!"
412
+ </p>
413
+ <div class="flex items-center">
414
+ <div class="w-10 h-10 rounded-full bg-gray-300 mr-3 overflow-hidden">
415
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Carlos Oliveira" class="w-full h-full object-cover">
416
+ </div>
417
+ <div>
418
+ <h4 class="font-medium text-gray-800">Carlos Oliveira</h4>
419
+ <p class="text-gray-500 text-sm">Belo Horizonte, MG</p>
420
+ </div>
421
+ </div>
422
+ </div>
423
+
424
+ <!-- Testimonial 3 -->
425
+ <div class="testimonial-card p-6 rounded-xl">
426
+ <div class="flex items-center mb-4">
427
+ <div class="flex text-yellow-400 mr-2">
428
+ <i class="fas fa-star"></i>
429
+ <i class="fas fa-star"></i>
430
+ <i class="fas fa-star"></i>
431
+ <i class="fas fa-star"></i>
432
+ <i class="fas fa-star-half-alt"></i>
433
+ </div>
434
+ <span class="text-gray-500 text-sm">3 semanas atrás</span>
435
+ </div>
436
+ <p class="text-gray-700 italic mb-4">
437
+ "Minha médica recomendou vitamina D e encontrei aqui. Ótimo preço e qualidade. Em 2 meses meu nível de vitamina D normalizou. Super recomendo!"
438
+ </p>
439
+ <div class="flex items-center">
440
+ <div class="w-10 h-10 rounded-full bg-gray-300 mr-3 overflow-hidden">
441
+ <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Márcia Santos" class="w-full h-full object-cover">
442
+ </div>
443
+ <div>
444
+ <h4 class="font-medium text-gray-800">Márcia Santos</h4>
445
+ <p class="text-gray-500 text-sm">Porto Alegre, RS</p>
446
+ </div>
447
+ </div>
448
+ </div>
449
+ </div>
450
+ </div>
451
+ </section>
452
+
453
+ <!-- CTA Section -->
454
+ <section class="py-16 bg-gradient-to-r from-blue-500 to-blue-600">
455
+ <div class="container mx-auto px-4 text-center">
456
+ <h2 class="text-3xl font-bold text-white mb-4">Pronto para transformar sua saúde?</h2>
457
+ <p class="text-xl text-blue-100 mb-8 max-w-2xl mx-auto">
458
+ Comece hoje mesmo sua jornada para mais energia, imunidade e bem-estar
459
+ </p>
460
+ <div class="flex flex-col sm:flex-row justify-center space-y-3 sm:space-y-0 sm:space-x-4">
461
+ <a href="#products" class="bg-white hover:bg-gray-100 text-blue-600 font-bold py-3 px-8 rounded-lg transition duration-300">
462
+ Ver todos os produtos
463
+ </a>
464
+ <a href="#contact" class="bg-transparent border-2 border-white hover:bg-white hover:bg-opacity-10 text-white font-bold py-3 px-8 rounded-lg transition duration-300">
465
+ Falar com especialista
466
+ </a>
467
+ </div>
468
+ </div>
469
+ </section>
470
+
471
+ <!-- Blog Section -->
472
+ <section class="section py-16 bg-gray-50">
473
+ <div class="container mx-auto px-4">
474
+ <h2 class="text-3xl font-bold text-center text-gray-800 mb-4">Blog Educativo</h2>
475
+ <p class="text-center text-gray-600 max-w-2xl mx-auto mb-12">
476
+ Aprenda mais sobre saúde, nutrição e suplementação com nossos artigos
477
+ </p>
478
+
479
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
480
+ <!-- Article 1 -->
481
+ <div class="bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition duration-300">
482
+ <img src="https://images.unsplash.com/photo-1579684385127-1ef15d508118?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80"
483
+ alt="Benefícios da B12" class="w-full h-48 object-cover">
484
+ <div class="p-5">
485
+ <span class="text-blue-600 text-sm font-medium">Vitaminas</span>
486
+ <h3 class="font-bold text-lg text-gray-800 my-2">Benefícios da B12 para o cérebro</h3>
487
+ <p class="text-gray-600 text-sm mb-4">
488
+ Descubra como a vitamina B12 pode melhorar sua função cognitiva e prevenir problemas neurológicos.
489
+ </p>
490
+ <a href="#" class="text-blue-600 font-medium text-sm hover:text-blue-800 transition duration-300">
491
+ Ler mais <i class="fas fa-arrow-right ml-1"></i>
492
+ </a>
493
+ </div>
494
+ </div>
495
+
496
+ <!-- Article 2 -->
497
+ <div class="bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition duration-300">
498
+ <img src="https://images.unsplash.com/photo-1530026186672-2cd00ffc50fe?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80"
499
+ alt="Suplementação em idosos" class="w-full h-48 object-cover">
500
+ <div class="p-5">
501
+ <span class="text-green-600 text-sm font-medium">Saúde</span>
502
+ <h3 class="font-bold text-lg text-gray-800 my-2">Suplementação em idosos</h3>
503
+ <p class="text-gray-600 text-sm mb-4">
504
+ Quais suplementos são essenciais para a saúde na terceira idade e como eles podem melhorar a qualidade de vida.
505
+ </p>
506
+ <a href="#" class="text-blue-600 font-medium text-sm hover:text-blue-800 transition duration-300">
507
+ Ler mais <i class="fas fa-arrow-right ml-1"></i>
508
+ </a>
509
+ </div>
510
+ </div>
511
+
512
+ <!-- Article 3 -->
513
+ <div class="bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition duration-300">
514
+ <img src="https://images.unsplash.com/photo-1506126613408-eca07ce68773?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1199&q=80"
515
+ alt="Deficiência de vitamina D" class="w-full h-48 object-cover">
516
+ <div class="p-5">
517
+ <span class="text-yellow-600 text-sm font-medium">Vitaminas</span>
518
+ <h3 class="font-bold text-lg text-gray-800 my-2">O que causa deficiência de vitamina D</h3>
519
+ <p class="text-gray-600 text-sm mb-4">
520
+ Entenda os principais fatores que levam à deficiência de vitamina D e como prevenir esse problema comum.
521
+ </p>
522
+ <a href="#" class="text-blue-600 font-medium text-sm hover:text-blue-800 transition duration-300">
523
+ Ler mais <i class="fas fa-arrow-right ml-1"></i>
524
+ </a>
525
+ </div>
526
+ </div>
527
+
528
+ <!-- Article 4 -->
529
+ <div class="bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition duration-300">
530
+ <img src="https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80"
531
+ alt="Quando tomar colágeno" class="w-full h-48 object-cover">
532
+ <div class="p-5">
533
+ <span class="text-purple-600 text-sm font-medium">Beleza</span>
534
+ <h3 class="font-bold text-lg text-gray-800 my-2">Quando tomar colágeno</h3>
535
+ <p class="text-gray-600 text-sm mb-4">
536
+ Saiba a melhor forma e momento para suplementar com colágeno para obter os melhores resultados.
537
+ </p>
538
+ <a href="#" class="text-blue-600 font-medium text-sm hover:text-blue-800 transition duration-300">
539
+ Ler mais <i class="fas fa-arrow-right ml-1"></i>
540
+ </a>
541
+ </div>
542
+ </div>
543
+ </div>
544
+
545
+ <div class="text-center mt-10">
546
+ <a href="#" class="inline-block bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-lg transition duration-300">
547
+ Ver todos os artigos
548
+ </a>
549
+ </div>
550
+ </div>
551
+ </section>
552
+
553
+ <!-- Contact Section -->
554
+ <section id="contact" class="section py-16 bg-white">
555
+ <div class="container mx-auto px-4">
556
+ <div class="max-w-4xl mx-auto">
557
+ <h2 class="text-3xl font-bold text-center text-gray-800 mb-4">Fale conosco</h2>
558
+ <p class="text-center text-gray-600 mb-12">
559
+ Tem dúvidas sobre qual suplemento é ideal para você? Nosso time de especialistas está pronto para ajudar.
560
+ </p>
561
+
562
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
563
+ <div>
564
+ <h3 class="text-xl font-bold text-gray-800 mb-4">Informações de contato</h3>
565
+
566
+ <div class="space-y-4">
567
+ <div class="flex items-start">
568
+ <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-4">
569
+ <i class="fas fa-phone text-blue-600"></i>
570
+ </div>
571
+ <div>
572
+ <h4 class="font-medium text-gray-800">Telefone / WhatsApp</h4>
573
+ <p class="text-gray-600">(11) 98765-4321</p>
574
+ </div>
575
+ </div>
576
+
577
+ <div class="flex items-start">
578
+ <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center mr-4">
579
+ <i class="fas fa-envelope text-green-600"></i>
580
+ </div>
581
+ <div>
582
+ <h4 class="font-medium text-gray-800">E-mail</h4>
583
+ <p class="text-gray-600">contato@vitaplus.com.br</p>
584
+ </div>
585
+ </div>
586
+
587
+ <div class="flex items-start">
588
+ <div class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center mr-4">
589
+ <i class="fas fa-clock text-purple-600"></i>
590
+ </div>
591
+ <div>
592
+ <h4 class="font-medium text-gray-800">Horário de atendimento</h4>
593
+ <p class="text-gray-600">Segunda a Sábado | 9h às 18h</p>
594
+ </div>
595
+ </div>
596
+
597
+ <div class="flex items-start">
598
+ <div class="w-10 h-10 bg-yellow-100 rounded-full flex items-center justify-center mr-4">
599
+ <i class="fas fa-share-alt text-yellow-600"></i>
600
+ </div>
601
+ <div>
602
+ <h4 class="font-medium text-gray-800">Redes sociais</h4>
603
+ <div class="flex space-x-3 mt-1">
604
+ <a href="#" class="w-8 h-8 bg-blue-500 text-white rounded-full flex items-center justify-center">
605
+ <i class="fab fa-facebook-f"></i>
606
+ </a>
607
+ <a href="#" class="w-8 h-8 bg-pink-500 text-white rounded-full flex items-center justify-center">
608
+ <i class="fab fa-instagram"></i>
609
+ </a>
610
+ <a href="#" class="w-8 h-8 bg-blue-400 text-white rounded-full flex items-center justify-center">
611
+ <i class="fab fa-twitter"></i>
612
+ </a>
613
+ <a href="#" class="w-8 h-8 bg-red-500 text-white rounded-full flex items-center justify-center">
614
+ <i class="fab fa-youtube"></i>
615
+ </a>
616
+ </div>
617
+ </div>
618
+ </div>
619
+ </div>
620
+ </div>
621
+
622
+ <div>
623
+ <h3 class="text-xl font-bold text-gray-800 mb-4">Envie sua mensagem</h3>
624
+
625
+ <form class="space-y-4">
626
+ <div>
627
+ <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Nome completo</label>
628
+ <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
629
+ </div>
630
+
631
+ <div>
632
+ <label for="email" class="block text-sm font-medium text-gray-700 mb-1">E-mail</label>
633
+ <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
634
+ </div>
635
+
636
+ <div>
637
+ <label for="phone" class="block text-sm font-medium text-gray-700 mb-1">Telefone (opcional)</label>
638
+ <input type="tel" id="phone" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
639
+ </div>
640
+
641
+ <div>
642
+ <label for="message" class="block text-sm font-medium text-gray-700 mb-1">Mensagem</label>
643
+ <textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"></textarea>
644
+ </div>
645
+
646
+ <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg transition duration-300">
647
+ Enviar mensagem
648
+ </button>
649
+ </form>
650
+ </div>
651
+ </div>
652
+ </div>
653
+ </div>
654
+ </section>
655
+
656
+ <!-- Footer -->
657
+ <footer class="bg-gray-900 text-white pt-12 pb-6">
658
+ <div class="container mx-auto px-4">
659
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-8">
660
+ <!-- Column 1 -->
661
+ <div>
662
+ <div class="flex items-center mb-4">
663
+ <div class="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center mr-3">
664
+ <i class="fas fa-pills text-white"></i>
665
+ </div>
666
+ <h3 class="text-xl font-bold">Vita<span class="text-green-400">Plus</span></h3>
667
+ </div>
668
+ <p class="text-gray-400 mb-4">
669
+ Suplementos de alta qualidade para sua saúde, energia e bem-estar.
670
+ </p>
671
+ <div class="flex space-x-4">
672
+ <a href="#" class="w-8 h-8 bg-gray-700 hover:bg-blue-600 rounded-full flex items-center justify-center transition duration-300">
673
+ <i class="fab fa-facebook-f"></i>
674
+ </a>
675
+ <a href="#" class="w-8 h-8 bg-gray-700 hover:bg-pink-600 rounded-full flex items-center justify-center transition duration-300">
676
+ <i class="fab fa-instagram"></i>
677
+ </a>
678
+ <a href="#" class="w-8 h-8 bg-gray-700 hover:bg-blue-400 rounded-full flex items-center justify-center transition duration-300">
679
+ <i class="fab fa-twitter"></i>
680
+ </a>
681
+ <a href="#" class="w-8 h-8 bg-gray-700 hover:bg-red-600 rounded-full flex items-center justify-center transition duration-300">
682
+ <i class="fab fa-youtube"></i>
683
+ </a>
684
+ </div>
685
+ </div>
686
+
687
+ <!-- Column 2 -->
688
+ <div>
689
+ <h4 class="text-lg font-bold mb-4">Links úteis</h4>
690
+ <ul class="space-y-2">
691
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Sobre a empresa</a></li>
692
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Nossos produtos</a></li>
693
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Blog educativo</a></li>
694
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Depoimentos</a></li>
695
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Contato</a></li>
696
+ </ul>
697
+ </div>
698
+
699
+ <!-- Column 3 -->
700
+ <div>
701
+ <h4 class="text-lg font-bold mb-4">Informações</h4>
702
+ <ul class="space-y-2">
703
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Política de privacidade</a></li>
704
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Termos de uso</a></li>
705
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Política de devolução</a></li>
706
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Perguntas frequentes</a></li>
707
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Rastrear pedido</a></li>
708
+ </ul>
709
+ </div>
710
+
711
+ <!-- Column 4 -->
712
+ <div>
713
+ <h4 class="text-lg font-bold mb-4">Atendimento</h4>
714
+ <p class="text-gray-400 mb-2">
715
+ <i class="fas fa-phone-alt mr-2 text-blue-400"></i> (11) 98765-4321
716
+ </p>
717
+ <p class="text-gray-400 mb-2">
718
+ <i class="fas fa-envelope mr-2 text-green-400"></i> contato@vitaplus.com.br
719
+ </p>
720
+ <p class="text-gray-400 mb-4">
721
+ <i class="fas fa-map-marker-alt mr-2 text-red-400"></i> São Paulo, SP
722
+ </p>
723
+ <a href="#" class="inline-flex items-center bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-lg transition duration-300">
724
+ <i class="fab fa-whatsapp mr-2"></i> Fale pelo WhatsApp
725
+ </a>
726
+ </div>
727
+ </div>
728
+
729
+ <div class="border-t border-gray-800 pt-6">
730
+ <div class="flex flex-col md:flex-row justify-between items-center">
731
+ <p class="text-gray-400 text-sm mb-4 md:mb-0">
732
+ &copy; 2023 VitaPlus. Todos os direitos reservados.
733
+ </p>
734
+ <div class="flex space-x-6">
735
+ <img src="https://via.placeholder.com/40x25" alt="Visa" class="h-6">
736
+ <img src="https://via.placeholder.com/40x25" alt="Mastercard" class="h-6">
737
+ <img src="https://via.placeholder.com/40x25" alt="Boleto" class="h-6">
738
+ <img src="https://via.placeholder.com/40x25" alt="Pix" class="h-6">
739
+ </div>
740
+ </div>
741
+ </div>
742
+ </div>
743
+ </footer>
744
+
745
+ <!-- Floating WhatsApp Button -->
746
+ <div class="fixed bottom-6 right-6 z-50">
747
+ <a href="#" class="w-14 h-14 bg-green-500 hover:bg-green-600 rounded-full flex items-center justify-center shadow-lg transition duration-300">
748
+ <i class="fab fa-whatsapp text-white text-2xl"></i>
749
+ </a>
750
+ </div>
751
+
752
+ <script>
753
+ // Mobile menu toggle
754
+ document.getElementById('mobile-menu-button').addEventListener('click', function() {
755
+ const menu = document.getElementById('mobile-menu');
756
+ menu.classList.toggle('hidden');
757
+ });
758
+
759
+ // Smooth scrolling for navigation links
760
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
761
+ anchor.addEventListener('click', function (e) {
762
+ e.preventDefault();
763
+
764
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
765
+ behavior: 'smooth'
766
+ });
767
+
768
+ // Close mobile menu if open
769
+ const mobileMenu = document.getElementById('mobile-menu');
770
+ if (!mobileMenu.classList.contains('hidden')) {
771
+ mobileMenu.classList.add('hidden');
772
+ }
773
+ });
774
+ });
775
+
776
+ // Highlight active nav link on scroll
777
+ const sections = document.querySelectorAll('.section');
778
+ const navLinks = document.querySelectorAll('.nav-link');
779
+
780
+ window.addEventListener('scroll', function() {
781
+ let current = '';
782
+
783
+ sections.forEach(section => {
784
+ const sectionTop = section.offsetTop;
785
+ const sectionHeight = section.clientHeight;
786
+
787
+ if (pageYOffset >= (sectionTop - 100)) {
788
+ current = section.getAttribute('id');
789
+ }
790
+ });
791
+
792
+ navLinks.forEach(link => {
793
+ link.classList.remove('active-nav', 'text-gray-800');
794
+ link.classList.add('text-gray-600');
795
+
796
+ if (link.getAttribute('href') === `#${current}`) {
797
+ link.classList.add('active-nav', 'text-gray-800');
798
+ link.classList.remove('text-gray-600');
799
+ }
800
+ });
801
+ });
802
+
803
+ // Product filter functionality
804
+ const filterButtons = document.querySelectorAll('.filter-btn');
805
+ const productsGrid = document.getElementById('products-grid');
806
+
807
+ // Sample product data
808
+ const products = [
809
+ {
810
+ id: 1,
811
+ name: "Vitamina B12 Sublingual",
812
+ description: "Aumente sua energia e foco mental com nossa fórmula de alta absorção.",
813
+ price: "69,90",
814
+ oldPrice: "82,90",
815
+ image: "https://images.unsplash.com/photo-1584308666744-24d5c474f2ae?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1013&q=80",
816
+ rating: 4.5,
817
+ reviews: 128,
818
+ tags: ["energy", "brain"]
819
+ },
820
+ {
821
+ id: 2,
822
+ name: "Vitamina D3 + K2",
823
+ description: "Imunidade fortalecida e saúde óssea com a combinação perfeita.",
824
+ price: "79,90",
825
+ image: "https://images.unsplash.com/photo-1587854692152-cbe660dbde88?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1013&q=80",
826
+ rating: 4,
827
+ reviews: 94,
828
+ tags: ["immunity", "aging"]
829
+ },
830
+ {
831
+ id: 3,
832
+ name: "Ômega 3 Ultra Puro",
833
+ description: "Coração, cérebro e articulações saudáveis com ômega 3 de alta pureza.",
834
+ price: "89,90",
835
+ image: "https://images.unsplash.com/photo-1607619056574-7b8d3ee536b2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1013&q=80",
836
+ rating: 5,
837
+ reviews: 217,
838
+ tags: ["brain", "immunity"]
839
+ },
840
+ {
841
+ id: 4,
842
+ name: "Colágeno Tipo 2",
843
+ description: "Pele firme e articulações saudáveis com colágeno hidrolisado.",
844
+ price: "59,90",
845
+ image: "https://images.unsplash.com/photo-1596755094514-f87e34085b2c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1013&q=80",
846
+ rating: 4,
847
+ reviews: 76,
848
+ tags: ["aging", "muscle"]
849
+ },
850
+ {
851
+ id: 5,
852
+ name: "Magnésio Dimalato",
853
+ description: "Redução do estresse, cãibras e melhora na qualidade do sono.",
854
+ price: "49,90",
855
+ oldPrice: "59,90",
856
+ image: "https://images.unsplash.com/photo-1584308666744-24d5c474f2ae?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1013&q=80",
857
+ rating: 4.5,
858
+ reviews: 142,
859
+ tags: ["energy", "muscle"]
860
+ },
861
+ {
862
+ id: 6,
863
+ name: "Zinco Quelado",
864
+ description: "Fortaleça seu sistema imunológico e acelere a recuperação.",
865
+ price: "39,90",
866
+ image: "https://images.unsplash.com/photo-1587854692152-cbe660dbde88?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1013&q=80",
867
+ rating: 4,
868
+ reviews: 87,
869
+ tags: ["immunity"]
870
+ },
871
+ {
872
+ id: 7,
873
+ name: "Multivitamínico Completo",
874
+ description: "Todos os nutrientes essenciais em uma única cápsula.",
875
+ price: "99,90",
876
+ oldPrice: "119,90",
877
+ image: "https://images.unsplash.com/photo-1607619056574-7b8d3ee536b2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1013&q=80",
878
+ rating: 4.5,
879
+ reviews: 203,
880
+ tags: ["energy", "immunity", "aging", "brain", "muscle"]
881
+ },
882
+ {
883
+ id: 8,
884
+ name: "Probiótico 50 Bilhões",
885
+ description: "Saúde intestinal e imunidade com 12 cepas probióticas.",
886
+ price: "79,90",
887
+ image: "https://images.unsplash.com/photo-1596755094514-f87e34085b2c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1013&q=80",
888
+ rating: 4,
889
+ reviews: 115,
890
+ tags: ["immunity"]
891
+ }
892
+ ];
893
+
894
+ // Function to render products
895
+ function renderProducts(filter = 'all') {
896
+ productsGrid.innerHTML = '';
897
+
898
+ const filteredProducts = filter === 'all'
899
+ ? products
900
+ : products.filter(product => product.tags.includes(filter));
901
+
902
+ filteredProducts.forEach(product => {
903
+ const stars = [];
904
+ const fullStars = Math.floor(product.rating);
905
+ const hasHalfStar = product.rating % 1 !== 0;
906
+
907
+ for (let i = 0; i < fullStars; i++) {
908
+ stars.push('<i class="fas fa-star"></i>');
909
+ }
910
+
911
+ if (hasHalfStar) {
912
+ stars.push('<i class="fas fa-star-half-alt"></i>');
913
+ }
914
+
915
+ const emptyStars = 5 - stars.length;
916
+ for (let i = 0; i < emptyStars; i++) {
917
+ stars.push('<i class="far fa-star"></i>');
918
+ }
919
+
920
+ const oldPrice = product.oldPrice
921
+ ? `<span class="text-gray-400 text-sm line-through">R$ ${product.oldPrice}</span>`
922
+ : '';
923
+
924
+ const discountBadge = product.oldPrice
925
+ ? `<span class="absolute top-2 right-2 bg-red-500 text-white text-xs font-bold px-2 py-1 rounded-full">-${Math.round((1 - parseFloat(product.price.replace(',', '.')) / parseFloat(product.oldPrice.replace(',', '.'))) * 100)}%</span>`
926
+ : '';
927
+
928
+ const productCard = document.createElement('div');
929
+ productCard.className = 'product-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300';
930
+ productCard.innerHTML = `
931
+ <div class="relative">
932
+ <img src="${product.image}" alt="${product.name}" class="w-full h-48 object-cover">
933
+ ${discountBadge}
934
+ </div>
935
+ <div class="p-4">
936
+ <h3 class="font-bold text-lg text-gray-800 mb-1">${product.name}</h3>
937
+ <p class="text-gray-600 text-sm mb-3">${product.description}</p>
938
+ <div class="flex items-center mb-2">
939
+ <div class="flex text-yellow-400">
940
+ ${stars.join('')}
941
+ </div>
942
+ <span class="text-gray-500 text-xs ml-1">(${product.reviews})</span>
943
+ </div>
944
+ <div class="flex justify-between items-center">
945
+ <span class="text-blue-600 font-bold text-lg">R$ ${product.price}</span>
946
+ ${oldPrice}
947
+ </div>
948
+ <button class="mt-3 w-full bg-blue-100 hover:bg-blue-200 text-blue-600 font-medium py-2 px-4 rounded-lg transition duration-300">
949
+ Adicionar ao carrinho
950
+ </button>
951
+ </div>
952
+ `;
953
+
954
+ productsGrid.appendChild(productCard);
955
+ });
956
+ }
957
+
958
+ // Initial render
959
+ renderProducts();
960
+
961
+ // Add filter button event listeners
962
+ filterButtons.forEach(button => {
963
+ button.addEventListener('click', function() {
964
+ // Update active button
965
+ filterButtons.forEach(btn => {
966
+ btn.classList.remove('bg-blue-600', 'text-white');
967
+ btn.classList.add('bg-gray-100', 'text-gray-800');
968
+ });
969
+
970
+ this.classList.remove('bg-gray-100', 'text-gray-800');
971
+ this.classList.add('bg-blue-600', 'text-white');
972
+
973
+ // Filter products
974
+ const filter = this.getAttribute('data-filter');
975
+ renderProducts(filter);
976
+ });
977
+ });
978
+
979
+ // Add to cart functionality (simplified)
980
+ document.addEventListener('click', function(e) {
981
+ if (e.target && e.target.textContent === 'Adicionar ao carrinho') {
982
+ const productCard = e.target.closest('.product-card');
983
+ const productName = productCard.querySelector('h3').textContent;
984
+ const productPrice = productCard.querySelector('.text-blue-600').textContent;
985
+
986
+ alert(`Adicionado ao carrinho: ${productName} - ${productPrice}`);
987
+
988
+ // In a real implementation, you would add the product to a cart array/object
989
+ // and update the cart counter in the header
990
+ }
991
+ });
992
+ </script>
993
+ <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=JEFFERSON1995/suplementos" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
994
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ Crie um site moderno, responsivo e altamente conversivo para uma empresa de venda de suplementos nutricionais e vitamínicos, com destaque para vitamina B12, vitamina D, ômega 3, magnésio, colágeno, e outros focados na saúde, imunidade e energia. O design deve ser limpo, com cores que remetam à saúde e vitalidade (branco, verde, azul claro), imagens profissionais, e layout otimizado para mobile e e-commerce. Use seções bem divididas, com foco em autoridade científica, benefícios, depoimentos e chamada para compra imediata. 🟩 PÁGINA 1 – HOME (CAPA) Título principal: 💊 Suplementos para sua saúde, energia e imunidade em dia. Subtítulo: Descubra o poder da Vitamina B12, D, Ômega 3 e mais. Produtos de qualidade, com envio rápido e atendimento especializado. Botões de ação: ➡️ Conheça os suplementos ➡️ Comprar agora com desconto Imagem de fundo: Frascos de suplementos + pessoas saudáveis (jovens e idosos) 🟩 PÁGINA 2 – NOSSOS PRODUTOS Cards com imagens e descrições breves: Vitamina B12 Sublingual – Aumente sua energia e foco mental Vitamina D3 + K2 – Imunidade fortalecida e saúde óssea Ômega 3 Ultra Puro – Coração, cérebro e articulações Colágeno Tipo 2 – Pele firme e articulações saudáveis Magnésio Dimalato – Redução do estresse e cãibras Filtro por objetivo: Energia / Imunidade / Envelhecimento saudável / Cérebro / Músculos 🟩 PÁGINA 3 – POR QUE ESCOLHER NOSSA LOJA? Título: 🌱 Qualidade, ciência e cuidado com sua saúde Diferenciais com ícones: ✔ Fórmulas com alta absorção ✔ Produção certificada por Anvisa ✔ Frete rápido e atendimento humanizado ✔ Suplementos veganos e sem glúten ✔ Pagamento seguro e parcelado 🟩 PÁGINA 4 – DEPOIMENTOS DE CLIENTES Exemplos reais ou simulados (com estrelas de avaliação): "Comecei a usar a B12 dessa loja e nunca me senti tão bem. Energia pura." "Excelente atendimento e entrega rápida. Já sou cliente fiel." 🟩 PÁGINA 5 – BLOG EDUCATIVO (OPCIONAL) Artigos sobre: Benefícios da B12 para o cérebro Suplementação em idosos O que causa deficiência de vitamina D Quando tomar colágeno 🟩 PÁGINA 6 – CONTATO E SUPORTE Formulário: Nome / E-mail / Mensagem Links para WhatsApp e Instagram Atendimento: Segunda a Sábado | 9h às 18h 🟩 RODAPÉ FIXO: Sobre a empresa Política de privacidade e devolução Termos de uso Link para loja (WhatsApp ou checkout externo) Redes sociais (Instagram, YouTube)