Hugging Face's logo

Spaces:
osuissa
/
suisssebinha
Running

App Files Community
osuissa commited on
Commit
d03764e
·
verified ·
1 Parent(s): 35b2341

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +784 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Suisssebinha
3
- emoji: 🦀
4
  colorFrom: gray
5
- colorTo: blue
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: suisssebinha
3
+ emoji: 🐳
4
  colorFrom: gray
5
+ colorTo: gray
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,784 @@
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>Farmácia Santana - Tradição desde 1935</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(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://rebranding.farmacias.help/pb3.png');
12
+ background-size: cover;
13
+ background-position: center;
14
+ background-repeat: no-repeat;
15
+ min-height: 60vh;
16
+ }
17
+
18
+ .discount-badge {
19
+ position: absolute;
20
+ top: 10px;
21
+ right: 10px;
22
+ background-color: #ef4444;
23
+ color: white;
24
+ padding: 0.25rem 0.5rem;
25
+ border-radius: 0.25rem;
26
+ font-weight: bold;
27
+ font-size: 0.875rem;
28
+ }
29
+
30
+ .product-card:hover {
31
+ transform: translateY(-5px);
32
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
33
+ }
34
+
35
+ .timeline-item:not(:last-child)::after {
36
+ content: '';
37
+ position: absolute;
38
+ left: 50%;
39
+ bottom: -20px;
40
+ width: 2px;
41
+ height: 20px;
42
+ background-color: #3b82f6;
43
+ }
44
+ </style>
45
+ </head>
46
+ <body class="font-sans bg-gray-50">
47
+ <!-- Header/Navigation -->
48
+ <header class="bg-white shadow-md sticky top-0 z-50">
49
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
50
+ <div class="flex items-center space-x-4">
51
+ <a href="#inicio" class="text-blue-600 font-bold text-xl md:text-2xl flex items-center">
52
+ <i class="fas fa-prescription-bottle-alt mr-2"></i>
53
+ Farmácia Santana
54
+ </a>
55
+ </div>
56
+
57
+ <nav class="hidden md:flex space-x-6">
58
+ <a href="#inicio" class="text-gray-700 hover:text-blue-600 transition">Início</a>
59
+ <a href="#promocoes" class="text-gray-700 hover:text-blue-600 transition">Promoções</a>
60
+ <a href="#sobre" class="text-gray-700 hover:text-blue-600 transition">Sobre Nós</a>
61
+ <a href="#contato" class="text-gray-700 hover:text-blue-600 transition">Contato</a>
62
+ </nav>
63
+
64
+ <div class="hidden md:flex items-center space-x-4">
65
+ <div class="text-sm text-gray-600">
66
+ <i class="fas fa-clock mr-1"></i>
67
+ Seg-Sex: 7h-21h
68
+ </div>
69
+ <a href="tel:15988027182" class="bg-blue-600 text-white px-4 py-2 rounded-full hover:bg-blue-700 transition flex items-center">
70
+ <i class="fas fa-phone mr-2"></i>
71
+ (15) 98802-7182
72
+ </a>
73
+ </div>
74
+
75
+ <button class="md:hidden text-gray-700" id="mobile-menu-button">
76
+ <i class="fas fa-bars text-2xl"></i>
77
+ </button>
78
+ </div>
79
+
80
+ <!-- Mobile menu -->
81
+ <div class="md:hidden hidden bg-white w-full py-4 px-4 shadow-md" id="mobile-menu">
82
+ <div class="flex flex-col space-y-4">
83
+ <a href="#inicio" class="text-gray-700 hover:text-blue-600 transition">Início</a>
84
+ <a href="#promocoes" class="text-gray-700 hover:text-blue-600 transition">Promoções</a>
85
+ <a href="#sobre" class="text-gray-700 hover:text-blue-600 transition">Sobre Nós</a>
86
+ <a href="#contato" class="text-gray-700 hover:text-blue-600 transition">Contato</a>
87
+ <div class="pt-4 border-t">
88
+ <div class="text-sm text-gray-600 mb-2">
89
+ <i class="fas fa-clock mr-1"></i>
90
+ Seg-Sex: 7h-21h
91
+ </div>
92
+ <a href="tel:15988027182" class="bg-blue-600 text-white px-4 py-2 rounded-full hover:bg-blue-700 transition inline-flex items-center">
93
+ <i class="fas fa-phone mr-2"></i>
94
+ (15) 98802-7182
95
+ </a>
96
+ </div>
97
+ </div>
98
+ </div>
99
+ </header>
100
+
101
+ <!-- Hero Section -->
102
+ <section id="inicio" class="hero-section flex items-center justify-center text-white">
103
+ <div class="container mx-auto px-4 text-center">
104
+ <img src="https://rebranding.farmacias.help/pb3.png" alt="Farmácia Santana Logo" class="mx-auto w-48 md:w-64 mb-8">
105
+ <h1 class="text-3xl md:text-5xl font-bold mb-4">Tradição, qualidade e confiança</h1>
106
+ <p class="text-xl md:text-2xl mb-8">Desde 1935 cuidando da sua saúde</p>
107
+ <div class="flex flex-col md:flex-row justify-center gap-4">
108
+ <a href="#promocoes" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-full transition font-medium">
109
+ Ver Promoções
110
+ </a>
111
+ <a href="https://wa.me/5515988027182" class="bg-green-600 hover:bg-green-700 text-white px-6 py-3 rounded-full transition font-medium">
112
+ <i class="fab fa-whatsapp mr-2"></i> Fale no WhatsApp
113
+ </a>
114
+ </div>
115
+ </div>
116
+ </section>
117
+
118
+ <!-- Features Section -->
119
+ <section class="bg-white py-12">
120
+ <div class="container mx-auto px-4">
121
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
122
+ <!-- Feature 1 -->
123
+ <div class="bg-gray-50 p-6 rounded-lg shadow-sm text-center">
124
+ <div class="text-blue-600 text-4xl mb-4">
125
+ <i class="fas fa-clock"></i>
126
+ </div>
127
+ <h3 class="text-xl font-semibold mb-2">Horário de Funcionamento</h3>
128
+ <p class="text-gray-600 mb-2">
129
+ <strong>Segunda a Sexta:</strong> 7h às 21h<br>
130
+ <strong>Sábado:</strong> 8h às 18h<br>
131
+ <strong>Domingo:</strong> 8h às 12h
132
+ </p>
133
+ </div>
134
+
135
+ <!-- Feature 2 -->
136
+ <div class="bg-gray-50 p-6 rounded-lg shadow-sm text-center">
137
+ <div class="text-blue-600 text-4xl mb-4">
138
+ <i class="fas fa-map-marker-alt"></i>
139
+ </div>
140
+ <h3 class="text-xl font-semibold mb-2">Localização</h3>
141
+ <p class="text-gray-600">
142
+ Centro de Itararé<br>
143
+ Fácil acesso e estacionamento<br>
144
+ Próximo ao centro da cidade
145
+ </p>
146
+ </div>
147
+
148
+ <!-- Feature 3 -->
149
+ <div class="bg-gray-50 p-6 rounded-lg shadow-sm text-center">
150
+ <div class="text-blue-600 text-4xl mb-4">
151
+ <i class="fas fa-award"></i>
152
+ </div>
153
+ <h3 class="text-xl font-semibold mb-2">Qualidade Garantida</h3>
154
+ <p class="text-gray-600">
155
+ Medicamentos com procedência<br>
156
+ Farmacêuticos qualificados<br>
157
+ Atendimento especializado
158
+ </p>
159
+ </div>
160
+ </div>
161
+ </div>
162
+ </section>
163
+
164
+ <!-- Promotions Section -->
165
+ <section id="promocoes" class="py-12 bg-blue-50">
166
+ <div class="container mx-auto px-4">
167
+ <div class="text-center mb-12">
168
+ <h2 class="text-3xl font-bold text-gray-800 mb-2">Promoções Ativas</h2>
169
+ <p class="text-lg text-gray-600 max-w-2xl mx-auto">
170
+ Aproveite os melhores preços em medicamentos e produtos de saúde
171
+ </p>
172
+ <div class="mt-4">
173
+ <span class="inline-block bg-red-500 text-white px-3 py-1 rounded-full text-sm font-semibold">
174
+ Até 40% OFF
175
+ </span>
176
+ <span class="inline-block ml-2 bg-yellow-500 text-white px-3 py-1 rounded-full text-sm font-semibold">
177
+ Preços Imperdíveis
178
+ </span>
179
+ </div>
180
+ </div>
181
+
182
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
183
+ <!-- Product 1 -->
184
+ <div class="bg-white rounded-lg overflow-hidden shadow-md product-card transition duration-300 relative">
185
+ <div class="discount-badge">-38%</div>
186
+ <img src="https://rebranding.farmacias.help/assets/dipirona-op64v-D6.jpg" alt="Dipirona 500mg" class="w-full h-48 object-cover">
187
+ <div class="p-4">
188
+ <span class="text-sm text-blue-600 font-semibold">Medicamentos</span>
189
+ <h3 class="text-lg font-bold mt-1 mb-2">Dipirona 500mg - 20 comprimidos</h3>
190
+ <p class="text-gray-600 text-sm mb-3">Analgésico e antitérmico para dores e febres</p>
191
+ <div class="flex justify-between items-center">
192
+ <div>
193
+ <span class="text-gray-400 line-through text-sm">R$ 15.90</span>
194
+ <span class="block text-xl font-bold text-blue-600">R$ 9.90</span>
195
+ </div>
196
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded-full text-sm transition">
197
+ <i class="fas fa-cart-plus mr-1"></i> Comprar
198
+ </button>
199
+ </div>
200
+ </div>
201
+ </div>
202
+
203
+ <!-- Product 2 -->
204
+ <div class="bg-white rounded-lg overflow-hidden shadow-md product-card transition duration-300 relative">
205
+ <div class="discount-badge">-27%</div>
206
+ <img src="https://rebranding.farmacias.help/assets/vitamina-c-DmosKeEN.jpg" alt="Vitamina C 1g" class="w-full h-48 object-cover">
207
+ <div class="p-4">
208
+ <span class="text-sm text-blue-600 font-semibold">Vitaminas</span>
209
+ <h3 class="text-lg font-bold mt-1 mb-2">Vitamina C 1g - 30 comprimidos</h3>
210
+ <p class="text-gray-600 text-sm mb-3">Suplemento vitamínico para fortalecer a imunidade</p>
211
+ <div class="flex justify-between items-center">
212
+ <div>
213
+ <span class="text-gray-400 line-through text-sm">R$ 25.90</span>
214
+ <span class="block text-xl font-bold text-blue-600">R$ 18.90</span>
215
+ </div>
216
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded-full text-sm transition">
217
+ <i class="fas fa-cart-plus mr-1"></i> Comprar
218
+ </button>
219
+ </div>
220
+ </div>
221
+ </div>
222
+
223
+ <!-- Product 3 -->
224
+ <div class="bg-white rounded-lg overflow-hidden shadow-md product-card transition duration-300 relative">
225
+ <div class="discount-badge">-28%</div>
226
+ <img src="https://rebranding.farmacias.help/assets/protetor-solar-n0r7m6Xf.jpg" alt="Protetor Solar FPS 60" class="w-full h-48 object-cover">
227
+ <div class="p-4">
228
+ <span class="text-sm text-blue-600 font-semibold">Dermocosméticos</span>
229
+ <h3 class="text-lg font-bold mt-1 mb-2">Protetor Solar FPS 60 - 120ml</h3>
230
+ <p class="text-gray-600 text-sm mb-3">Proteção solar avançada para toda família</p>
231
+ <div class="flex justify-between items-center">
232
+ <div>
233
+ <span class="text-gray-400 line-through text-sm">R$ 45.90</span>
234
+ <span class="block text-xl font-bold text-blue-600">R$ 32.90</span>
235
+ </div>
236
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded-full text-sm transition">
237
+ <i class="fas fa-cart-plus mr-1"></i> Comprar
238
+ </button>
239
+ </div>
240
+ </div>
241
+ </div>
242
+
243
+ <!-- Product 4 -->
244
+ <div class="bg-white rounded-lg overflow-hidden shadow-md product-card transition duration-300 relative">
245
+ <div class="discount-badge">-25%</div>
246
+ <img src="https://rebranding.farmacias.help/assets/omeprazol-I8N5AXGi.jpg" alt="Omeprazol 20mg" class="w-full h-48 object-cover">
247
+ <div class="p-4">
248
+ <span class="text-sm text-blue-600 font-semibold">Medicamentos</span>
249
+ <h3 class="text-lg font-bold mt-1 mb-2">Omeprazol 20mg - 28 cápsulas</h3>
250
+ <p class="text-gray-600 text-sm mb-3">Medicamento para problemas de acidez estomacal</p>
251
+ <div class="flex justify-between items-center">
252
+ <div>
253
+ <span class="text-gray-400 line-through text-sm">R$ 22.50</span>
254
+ <span class="block text-xl font-bold text-blue-600">R$ 16.90</span>
255
+ </div>
256
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded-full text-sm transition">
257
+ <i class="fas fa-cart-plus mr-1"></i> Comprar
258
+ </button>
259
+ </div>
260
+ </div>
261
+ </div>
262
+
263
+ <!-- Product 5 -->
264
+ <div class="bg-white rounded-lg overflow-hidden shadow-md product-card transition duration-300 relative">
265
+ <div class="discount-badge">-28%</div>
266
+ <img src="https://rebranding.farmacias.help/assets/colageno-F7ozjP5N.jpg" alt="Colágeno Hidrolisado" class="w-full h-48 object-cover">
267
+ <div class="p-4">
268
+ <span class="text-sm text-blue-600 font-semibold">Suplementos</span>
269
+ <h3 class="text-lg font-bold mt-1 mb-2">Colágeno Hidrolisado - 300g</h3>
270
+ <p class="text-gray-600 text-sm mb-3">Suplemento para saúde da pele e articulações</p>
271
+ <div class="flex justify-between items-center">
272
+ <div>
273
+ <span class="text-gray-400 line-through text-sm">R$ 89.90</span>
274
+ <span class="block text-xl font-bold text-blue-600">R$ 64.90</span>
275
+ </div>
276
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded-full text-sm transition">
277
+ <i class="fas fa-cart-plus mr-1"></i> Comprar
278
+ </button>
279
+ </div>
280
+ </div>
281
+ </div>
282
+
283
+ <!-- Product 6 -->
284
+ <div class="bg-white rounded-lg overflow-hidden shadow-md product-card transition duration-300 relative">
285
+ <div class="discount-badge">-31%</div>
286
+ <img src="https://rebranding.farmacias.help/assets/shampoo-D6HoSP1l.jpg" alt="Shampoo Antiqueda" class="w-full h-48 object-cover">
287
+ <div class="p-4">
288
+ <span class="text-sm text-blue-600 font-semibold">Higiene</span>
289
+ <h3 class="text-lg font-bold mt-1 mb-2">Shampoo Antiqueda - 400ml</h3>
290
+ <p class="text-gray-600 text-sm mb-3">Tratamento capilar para fortalecimento dos fios</p>
291
+ <div class="flex justify-between items-center">
292
+ <div>
293
+ <span class="text-gray-400 line-through text-sm">R$ 35.90</span>
294
+ <span class="block text-xl font-bold text-blue-600">R$ 24.90</span>
295
+ </div>
296
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded-full text-sm transition">
297
+ <i class="fas fa-cart-plus mr-1"></i> Comprar
298
+ </button>
299
+ </div>
300
+ </div>
301
+ </div>
302
+
303
+ <!-- Product 7 -->
304
+ <div class="bg-white rounded-lg overflow-hidden shadow-md product-card transition duration-300 relative">
305
+ <div class="discount-badge">-29%</div>
306
+ <img src="https://rebranding.farmacias.help/assets/omega3-BbQQ5Sth.jpg" alt="Ômega 3" class="w-full h-48 object-cover">
307
+ <div class="p-4">
308
+ <span class="text-sm text-blue-600 font-semibold">Suplementos</span>
309
+ <h3 class="text-lg font-bold mt-1 mb-2">Ômega 3 - 60 cápsulas</h3>
310
+ <p class="text-gray-600 text-sm mb-3">Suplemento para saúde cardiovascular e cerebral</p>
311
+ <div class="flex justify-between items-center">
312
+ <div>
313
+ <span class="text-gray-400 line-through text-sm">R$ 55.90</span>
314
+ <span class="block text-xl font-bold text-blue-600">R$ 39.90</span>
315
+ </div>
316
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded-full text-sm transition">
317
+ <i class="fas fa-cart-plus mr-1"></i> Comprar
318
+ </button>
319
+ </div>
320
+ </div>
321
+ </div>
322
+
323
+ <!-- Product 8 -->
324
+ <div class="bg-white rounded-lg overflow-hidden shadow-md product-card transition duration-300 relative">
325
+ <div class="discount-badge">-31%</div>
326
+ <img src="https://rebranding.farmacias.help/assets/hidratante-BEX5GMtn.jpg" alt="Creme Hidratante Corporal" class="w-full h-48 object-cover">
327
+ <div class="p-4">
328
+ <span class="text-sm text-blue-600 font-semibold">Dermocosméticos</span>
329
+ <h3 class="text-lg font-bold mt-1 mb-2">Creme Hidratante Corporal - 250ml</h3>
330
+ <p class="text-gray-600 text-sm mb-3">Hidratação intensa para pele seca</p>
331
+ <div class="flex justify-between items-center">
332
+ <div>
333
+ <span class="text-gray-400 line-through text-sm">R$ 28.90</span>
334
+ <span class="block text-xl font-bold text-blue-600">R$ 19.90</span>
335
+ </div>
336
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded-full text-sm transition">
337
+ <i class="fas fa-cart-plus mr-1"></i> Comprar
338
+ </button>
339
+ </div>
340
+ </div>
341
+ </div>
342
+ </div>
343
+
344
+ <div class="mt-12 text-center">
345
+ <div class="bg-white p-6 rounded-lg shadow-sm inline-block max-w-2xl">
346
+ <h3 class="text-xl font-bold mb-3">Não encontrou o que procura?</h3>
347
+ <p class="text-gray-600 mb-4">Entre em contato conosco pelo WhatsApp e encontre o produto ideal!</p>
348
+ <a href="https://wa.me/5515988027182" class="bg-green-600 hover:bg-green-700 text-white px-6 py-3 rounded-full transition font-medium inline-flex items-center">
349
+ <i class="fab fa-whatsapp mr-2 text-xl"></i> Fale conosco no WhatsApp
350
+ </a>
351
+ </div>
352
+ </div>
353
+ </div>
354
+ </section>
355
+
356
+ <!-- About Section -->
357
+ <section id="sobre" class="py-16 bg-white">
358
+ <div class="container mx-auto px-4">
359
+ <div class="text-center mb-12">
360
+ <h2 class="text-3xl font-bold text-gray-800 mb-2">Sobre a Farmácia Santana</h2>
361
+ <p class="text-lg text-gray-600 max-w-3xl mx-auto">
362
+ Desde 1935, a Farmácia Santana tem sido sinônimo de confiança, qualidade e cuidado com a saúde da comunidade de Itararé.
363
+ </p>
364
+ </div>
365
+
366
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center mb-16">
367
+ <div>
368
+ <h3 class="text-2xl font-bold mb-4">Nossa História</h3>
369
+ <p class="text-gray-600 mb-4">
370
+ Fundada em 1935, a Farmácia Santana nasceu do sonho de oferecer medicamentos de qualidade e atendimento humanizado à população de Itararé.
371
+ </p>
372
+ <p class="text-gray-600 mb-4">
373
+ Ao longo de mais de 8 décadas, crescemos junto com nossa comunidade, sempre mantendo os valores de ética, responsabilidade e compromisso com a saúde e bem-estar de nossos clientes.
374
+ </p>
375
+ <p class="text-gray-600">
376
+ Hoje, somos uma das farmácias mais respeitadas da região, reconhecida pela qualidade dos produtos, expertise dos profissionais e pela confiança construída geração após geração.
377
+ </p>
378
+ </div>
379
+ <div class="bg-gray-100 p-6 rounded-lg">
380
+ <img src="https://rebranding.farmacias.help/pb3.png" alt="Farmácia Santana" class="w-full rounded-lg shadow-md">
381
+ </div>
382
+ </div>
383
+
384
+ <!-- Timeline -->
385
+ <div class="mb-16">
386
+ <h3 class="text-2xl font-bold mb-8 text-center">Nossa Trajetória</h3>
387
+ <div class="relative">
388
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
389
+ <!-- Timeline Item 1 -->
390
+ <div class="text-center timeline-item relative">
391
+ <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
392
+ <span class="text-blue-600 font-bold text-xl">1935</span>
393
+ </div>
394
+ <h4 class="font-bold mb-2">Fundação da Farmácia Santana</h4>
395
+ <p class="text-gray-600 text-sm">Início das atividades no centro de Itararé</p>
396
+ </div>
397
+
398
+ <!-- Timeline Item 2 -->
399
+ <div class="text-center timeline-item relative">
400
+ <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
401
+ <span class="text-blue-600 font-bold text-xl">1970</span>
402
+ </div>
403
+ <h4 class="font-bold mb-2">Expansão dos serviços farmacêuticos</h4>
404
+ <p class="text-gray-600 text-sm">Ampliação do catálogo de produtos</p>
405
+ </div>
406
+
407
+ <!-- Timeline Item 3 -->
408
+ <div class="text-center timeline-item relative">
409
+ <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
410
+ <span class="text-blue-600 font-bold text-xl">2000</span>
411
+ </div>
412
+ <h4 class="font-bold mb-2">Modernização e tecnologia</h4>
413
+ <p class="text-gray-600 text-sm">Adoção de sistemas informatizados</p>
414
+ </div>
415
+
416
+ <!-- Timeline Item 4 -->
417
+ <div class="text-center">
418
+ <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
419
+ <span class="text-blue-600 font-bold text-xl">2023</span>
420
+ </div>
421
+ <h4 class="font-bold mb-2">Atendimento digital via WhatsApp</h4>
422
+ <p class="text-gray-600 text-sm">Novos canais de comunicação</p>
423
+ </div>
424
+ </div>
425
+ </div>
426
+ </div>
427
+
428
+ <!-- Values -->
429
+ <div class="mb-12">
430
+ <h3 class="text-2xl font-bold mb-8 text-center">Nossos Valores</h3>
431
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
432
+ <!-- Value 1 -->
433
+ <div class="bg-gray-50 p-6 rounded-lg shadow-sm">
434
+ <div class="text-blue-600 text-3xl mb-4">
435
+ <i class="fas fa-heart"></i>
436
+ </div>
437
+ <h4 class="font-bold mb-2">Cuidado Humano</h4>
438
+ <p class="text-gray-600">
439
+ Tratamos cada cliente como parte da nossa família, oferecendo atenção personalizada e cuidado genuíno.
440
+ </p>
441
+ </div>
442
+
443
+ <!-- Value 2 -->
444
+ <div class="bg-gray-50 p-6 rounded-lg shadow-sm">
445
+ <div class="text-blue-600 text-3xl mb-4">
446
+ <i class="fas fa-shield-alt"></i>
447
+ </div>
448
+ <h4 class="font-bold mb-2">Qualidade e Segurança</h4>
449
+ <p class="text-gray-600">
450
+ Comprometidos com a excelência, garantimos produtos originais e serviços de alta qualidade.
451
+ </p>
452
+ </div>
453
+
454
+ <!-- Value 3 -->
455
+ <div class="bg-gray-50 p-6 rounded-lg shadow-sm">
456
+ <div class="text-blue-600 text-3xl mb-4">
457
+ <i class="fas fa-hands-helping"></i>
458
+ </div>
459
+ <h4 class="font-bold mb-2">Compromisso Social</h4>
460
+ <p class="text-gray-600">
461
+ Participamos ativamente da comunidade, apoiando iniciativas de saúde e bem-estar social.
462
+ </p>
463
+ </div>
464
+ </div>
465
+ </div>
466
+
467
+ <!-- Features -->
468
+ <div>
469
+ <h3 class="text-2xl font-bold mb-8 text-center">Diferenciais</h3>
470
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
471
+ <!-- Feature 1 -->
472
+ <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100 flex items-start">
473
+ <div class="text-blue-600 text-2xl mr-4">
474
+ <i class="fas fa-user-md"></i>
475
+ </div>
476
+ <div>
477
+ <h4 class="font-bold mb-2">Cuidado Especializado</h4>
478
+ <p class="text-gray-600 text-sm">
479
+ Atendimento personalizado com farmacêuticos qualificados para orientar sobre medicamentos e saúde.
480
+ </p>
481
+ </div>
482
+ </div>
483
+
484
+ <!-- Feature 2 -->
485
+ <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100 flex items-start">
486
+ <div class="text-blue-600 text-2xl mr-4">
487
+ <i class="fas fa-check-circle"></i>
488
+ </div>
489
+ <div>
490
+ <h4 class="font-bold mb-2">Qualidade Garantida</h4>
491
+ <p class="text-gray-600 text-sm">
492
+ Todos os medicamentos são originais e armazenados com total segurança seguindo rigorosos padrões.
493
+ </p>
494
+ </div>
495
+ </div>
496
+
497
+ <!-- Feature 3 -->
498
+ <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100 flex items-start">
499
+ <div class="text-blue-600 text-2xl mr-4">
500
+ <i class="fas fa-clock"></i>
501
+ </div>
502
+ <div>
503
+ <h4 class="font-bold mb-2">Horário Estendido</h4>
504
+ <p class="text-gray-600 text-sm">
505
+ Funcionamento em horário estendido e plantão 24h para emergências na região.
506
+ </p>
507
+ </div>
508
+ </div>
509
+
510
+ <!-- Feature 4 -->
511
+ <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100 flex items-start">
512
+ <div class="text-blue-600 text-2xl mr-4">
513
+ <i class="fas fa-home"></i>
514
+ </div>
515
+ <div>
516
+ <h4 class="font-bold mb-2">Tradição Familiar</h4>
517
+ <p class="text-gray-600 text-sm">
518
+ Empresa familiar com mais de 85 anos servindo a comunidade de Itararé com dedicação.
519
+ </p>
520
+ </div>
521
+ </div>
522
+
523
+ <!-- Feature 5 -->
524
+ <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100 flex items-start">
525
+ <div class="text-blue-600 text-2xl mr-4">
526
+ <i class="fas fa-star"></i>
527
+ </div>
528
+ <div>
529
+ <h4 class="font-bold mb-2">Excelência Reconhecida</h4>
530
+ <p class="text-gray-600 text-sm">
531
+ Reconhecida pela qualidade do atendimento e confiança conquistada ao longo das décadas.
532
+ </p>
533
+ </div>
534
+ </div>
535
+
536
+ <!-- Feature 6 -->
537
+ <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100 flex items-start">
538
+ <div class="text-blue-600 text-2xl mr-4">
539
+ <i class="fas fa-map-marked-alt"></i>
540
+ </div>
541
+ <div>
542
+ <h4 class="font-bold mb-2">Localização Central</h4>
543
+ <p class="text-gray-600 text-sm">
544
+ Estrategicamente localizada no centro de Itararé, facilitando o acesso de toda a região.
545
+ </p>
546
+ </div>
547
+ </div>
548
+ </div>
549
+ </div>
550
+ </div>
551
+ </section>
552
+
553
+ <!-- Contact Section -->
554
+ <section id="contato" class="py-16 bg-gray-50">
555
+ <div class="container mx-auto px-4">
556
+ <div class="text-center mb-12">
557
+ <h2 class="text-3xl font-bold text-gray-800 mb-2">Entre em Contato</h2>
558
+ <p class="text-lg text-gray-600 max-w-2xl mx-auto">
559
+ Estamos sempre prontos para atender você. Entre em contato através dos nossos canais de comunicação.
560
+ </p>
561
+ </div>
562
+
563
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
564
+ <!-- Contact Method 1 -->
565
+ <div class="bg-white p-6 rounded-lg shadow-sm text-center">
566
+ <div class="text-green-600 text-4xl mb-4">
567
+ <i class="fab fa-whatsapp"></i>
568
+ </div>
569
+ <h3 class="text-xl font-semibold mb-2">WhatsApp</h3>
570
+ <p class="text-gray-600 mb-4">
571
+ Atendimento rápido e personalizado via WhatsApp. Tire suas dúvidas e faça seus pedidos diretamente conosco.
572
+ </p>
573
+ <a href="https://wa.me/5515988027182" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-full transition inline-flex items-center">
574
+ <i class="fab fa-whatsapp mr-2"></i> Enviar Mensagem
575
+ </a>
576
+ </div>
577
+
578
+ <!-- Contact Method 2 -->
579
+ <div class="bg-white p-6 rounded-lg shadow-sm text-center">
580
+ <div class="text-blue-600 text-4xl mb-4">
581
+ <i class="fas fa-phone"></i>
582
+ </div>
583
+ <h3 class="text-xl font-semibold mb-2">Telefone</h3>
584
+ <p class="text-gray-600 mb-2">
585
+ Ligue para nossa farmácia e fale diretamente com nossos farmacêuticos especializados.
586
+ </p>
587
+ <div class="mt-4">
588
+ <a href="tel:15988027182" class="text-blue-600 font-bold text-xl hover:text-blue-700 transition">
589
+ (15) 98802-7182
590
+ </a>
591
+ <p class="text-gray-500 text-sm mt-1">
592
+ Disponível no horário de funcionamento
593
+ </p>
594
+ </div>
595
+ </div>
596
+
597
+ <!-- Contact Method 3 -->
598
+ <div class="bg-white p-6 rounded-lg shadow-sm text-center">
599
+ <div class="text-blue-600 text-4xl mb-4">
600
+ <i class="fas fa-map-marker-alt"></i>
601
+ </div>
602
+ <h3 class="text-xl font-semibold mb-2">Localização</h3>
603
+ <p class="text-gray-600 mb-4">
604
+ Visite nossa farmácia no centro de Itararé. Estacionamento fácil e localização privilegiada.
605
+ </p>
606
+ <div class="bg-gray-100 p-3 rounded">
607
+ <p class="text-gray-800 font-medium">
608
+ Centro de Itararé - SP<br>
609
+ Próximo aos principais pontos comerciais
610
+ </p>
611
+ </div>
612
+ </div>
613
+
614
+ <!-- Contact Method 4 -->
615
+ <div class="bg-white p-6 rounded-lg shadow-sm text-center">
616
+ <div class="text-blue-600 text-4xl mb-4">
617
+ <i class="fas fa-clock"></i>
618
+ </div>
619
+ <h3 class="text-xl font-semibold mb-2">Horário de Funcionamento</h3>
620
+ <div class="space-y-3">
621
+ <div>
622
+ <h4 class="font-bold">Segunda a Sexta</h4>
623
+ <p class="text-gray-600">7:00 - 21:00</p>
624
+ <p class="text-gray-500 text-sm">Atendimento completo</p>
625
+ </div>
626
+ <div>
627
+ <h4 class="font-bold">Sábado</h4>
628
+ <p class="text-gray-600">8:00 - 18:00</p>
629
+ <p class="text-gray-500 text-sm">Atendimento normal</p>
630
+ </div>
631
+ <div>
632
+ <h4 class="font-bold">Domingo</h4>
633
+ <p class="text-gray-600">8:00 - 12:00</p>
634
+ <p class="text-gray-500 text-sm">Atendimento emergencial</p>
635
+ </div>
636
+ </div>
637
+ <p class="text-blue-600 font-semibold mt-4 text-sm">
638
+ <i class="fas fa-exclamation-circle mr-1"></i> Plantão 24h para emergências
639
+ </p>
640
+ </div>
641
+ </div>
642
+
643
+ <!-- CTA -->
644
+ <div class="mt-16 text-center">
645
+ <div class="bg-blue-600 text-white p-8 rounded-lg shadow-md inline-block max-w-3xl">
646
+ <h3 class="text-2xl font-bold mb-4">Pronto para cuidar da sua saúde?</h3>
647
+ <p class="text-lg mb-6">
648
+ Nossa equipe está preparada para oferecer o melhor atendimento e orientação sobre medicamentos e saúde.
649
+ </p>
650
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
651
+ <a href="https://wa.me/5515988027182" class="bg-white hover:bg-gray-100 text-blue-600 px-6 py-3 rounded-full transition font-medium flex items-center justify-center">
652
+ <i class="fab fa-whatsapp mr-2 text-xl"></i> Fale no WhatsApp
653
+ </a>
654
+ <a href="tel:15988027182" class="bg-blue-800 hover:bg-blue-900 text-white px-6 py-3 rounded-full transition font-medium flex items-center justify-center">
655
+ <i class="fas fa-phone mr-2"></i> Ligar Agora
656
+ </a>
657
+ </div>
658
+ </div>
659
+ </div>
660
+ </div>
661
+ </section>
662
+
663
+ <!-- Footer -->
664
+ <footer class="bg-gray-800 text-white py-8">
665
+ <div class="container mx-auto px-4">
666
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
667
+ <!-- Column 1 -->
668
+ <div>
669
+ <h3 class="text-xl font-bold mb-4 flex items-center">
670
+ <i class="fas fa-prescription-bottle-alt mr-2"></i>
671
+ Farmácia Santana
672
+ </h3>
673
+ <p class="text-gray-300 mb-4">
674
+ Tradição, qualidade e confiança em medicamentos e produtos para sua família.
675
+ </p>
676
+ <p class="text-gray-400 text-sm">
677
+ Desde 1935 cuidando da sua saúde
678
+ </p>
679
+ </div>
680
+
681
+ <!-- Column 2 -->
682
+ <div>
683
+ <h3 class="text-lg font-semibold mb-4">Links Rápidos</h3>
684
+ <ul class="space-y-2">
685
+ <li><a href="#inicio" class="text-gray-300 hover:text-white transition">Início</a></li>
686
+ <li><a href="#promocoes" class="text-gray-300 hover:text-white transition">Promoções</a></li>
687
+ <li><a href="#sobre" class="text-gray-300 hover:text-white transition">Sobre Nós</a></li>
688
+ <li><a href="#contato" class="text-gray-300 hover:text-white transition">Contato</a></li>
689
+ </ul>
690
+ </div>
691
+
692
+ <!-- Column 3 -->
693
+ <div>
694
+ <h3 class="text-lg font-semibold mb-4">Horário</h3>
695
+ <ul class="space-y-2 text-gray-300">
696
+ <li class="flex justify-between">
697
+ <span>Seg-Sex:</span>
698
+ <span>7h-21h</span>
699
+ </li>
700
+ <li class="flex justify-between">
701
+ <span>Sábado:</span>
702
+ <span>8h-18h</span>
703
+ </li>
704
+ <li class="flex justify-between">
705
+ <span>Domingo:</span>
706
+ <span>8h-12h</span>
707
+ </li>
708
+ </ul>
709
+ <p class="text-blue-400 mt-4 text-sm">
710
+ <i class="fas fa-exclamation-circle mr-1"></i> Plantão 24h para emergências
711
+ </p>
712
+ </div>
713
+
714
+ <!-- Column 4 -->
715
+ <div>
716
+ <h3 class="text-lg font-semibold mb-4">Contato</h3>
717
+ <div class="space-y-3">
718
+ <div class="flex items-start">
719
+ <i class="fas fa-map-marker-alt mt-1 mr-3 text-blue-400"></i>
720
+ <span class="text-gray-300">Centro de Itararé - SP</span>
721
+ </div>
722
+ <div class="flex items-center">
723
+ <i class="fas fa-phone mr-3 text-blue-400"></i>
724
+ <a href="tel:15988027182" class="text-gray-300 hover:text-white transition">(15) 98802-7182</a>
725
+ </div>
726
+ <div class="flex items-center">
727
+ <i class="fab fa-whatsapp mr-3 text-blue-400"></i>
728
+ <a href="https://wa.me/5515988027182" class="text-gray-300 hover:text-white transition">WhatsApp</a>
729
+ </div>
730
+ </div>
731
+ <div class="mt-4 flex space-x-4">
732
+ <a href="#" class="text-gray-300 hover:text-white transition text-xl">
733
+ <i class="fab fa-facebook"></i>
734
+ </a>
735
+ <a href="#" class="text-gray-300 hover:text-white transition text-xl">
736
+ <i class="fab fa-instagram"></i>
737
+ </a>
738
+ </div>
739
+ </div>
740
+ </div>
741
+
742
+ <div class="border-t border-gray-700 mt-8 pt-6 text-center text-gray-400 text-sm">
743
+ <p>&copy; 2023 Farmácia Santana. Todos os direitos reservados.</p>
744
+ </div>
745
+ </div>
746
+ </footer>
747
+
748
+ <!-- WhatsApp Float Button -->
749
+ <a href="https://wa.me/5515988027182" class="fixed bottom-6 right-6 bg-green-600 text-white w-14 h-14 rounded-full flex items-center justify-center text-2xl shadow-lg hover:bg-green-700 transition z-50">
750
+ <i class="fab fa-whatsapp"></i>
751
+ </a>
752
+
753
+ <script>
754
+ // Mobile menu toggle
755
+ document.getElementById('mobile-menu-button').addEventListener('click', function() {
756
+ const menu = document.getElementById('mobile-menu');
757
+ menu.classList.toggle('hidden');
758
+ });
759
+
760
+ // Smooth scrolling for anchor links
761
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
762
+ anchor.addEventListener('click', function (e) {
763
+ e.preventDefault();
764
+
765
+ const targetId = this.getAttribute('href');
766
+ const targetElement = document.querySelector(targetId);
767
+
768
+ if (targetElement) {
769
+ window.scrollTo({
770
+ top: targetElement.offsetTop - 80,
771
+ behavior: 'smooth'
772
+ });
773
+
774
+ // Close mobile menu if open
775
+ const mobileMenu = document.getElementById('mobile-menu');
776
+ if (!mobileMenu.classList.contains('hidden')) {
777
+ mobileMenu.classList.add('hidden');
778
+ }
779
+ }
780
+ });
781
+ });
782
+ </script>
783
+ <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=osuissa/suisssebinha" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
784
+ </html>