Hugging Face's logo

Spaces:
thiago12345678
/
site
Running

App Files Community
thiago12345678 commited on
Commit
e55ee12
·
verified ·
1 Parent(s): 061c54f

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +648 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Site
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: site
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: red
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,648 @@
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>R.a Superclean - Produtos de Limpeza Profissional</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
+ @keyframes fadeIn {
11
+ from { opacity: 0; transform: translateY(20px); }
12
+ to { opacity: 1; transform: translateY(0); }
13
+ }
14
+
15
+ @keyframes pulse {
16
+ 0% { transform: scale(1); }
17
+ 50% { transform: scale(1.05); }
18
+ 100% { transform: scale(1); }
19
+ }
20
+
21
+ .fade-in {
22
+ animation: fadeIn 0.8s ease-out forwards;
23
+ }
24
+
25
+ .pulse-animation {
26
+ animation: pulse 2s infinite;
27
+ }
28
+
29
+ .product-hover:hover {
30
+ transform: translateY(-5px);
31
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
32
+ }
33
+
34
+ .discount-badge {
35
+ position: absolute;
36
+ top: 10px;
37
+ right: 10px;
38
+ background-color: #ef4444;
39
+ color: white;
40
+ padding: 2px 8px;
41
+ border-radius: 9999px;
42
+ font-size: 0.75rem;
43
+ font-weight: bold;
44
+ }
45
+
46
+ .header-gradient {
47
+ background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
48
+ }
49
+
50
+ .button-hover:hover {
51
+ transform: translateY(-2px);
52
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
53
+ }
54
+
55
+ .button-active:active {
56
+ transform: scale(0.95);
57
+ }
58
+ </style>
59
+ </head>
60
+ <body class="bg-gray-50 font-sans">
61
+ <!-- Top Bar -->
62
+ <div class="bg-blue-800 text-white text-sm py-2 px-4">
63
+ <div class="container mx-auto flex justify-between items-center">
64
+ <div class="flex space-x-4">
65
+ <span><i class="fas fa-phone-alt mr-1"></i> (18) 99774-4757</span>
66
+ <span><i class="fas fa-envelope mr-1"></i> contato@rasuperclean.com.br</span>
67
+ </div>
68
+ <div class="flex space-x-4">
69
+ <a href="#" class="hover:text-blue-200"><i class="fab fa-facebook-f"></i></a>
70
+ <a href="#" class="hover:text-blue-200"><i class="fab fa-instagram"></i></a>
71
+ <a href="https://wa.me/5518997744757" class="hover:text-blue-200"><i class="fab fa-whatsapp"></i></a>
72
+ </div>
73
+ </div>
74
+ </div>
75
+
76
+ <!-- Header -->
77
+ <header class="header-gradient text-white sticky top-0 z-50 shadow-lg">
78
+ <div class="container mx-auto px-4 py-4 flex flex-col md:flex-row justify-between items-center">
79
+ <div class="flex items-center mb-4 md:mb-0">
80
+ <div class="bg-white rounded-full p-2 mr-3">
81
+ <i class="fas fa-spray-can text-blue-600 text-2xl"></i>
82
+ </div>
83
+ <h1 class="text-2xl font-bold">
84
+ <span class="text-white">R.a</span>
85
+ <span class="text-yellow-300">Superclean</span>
86
+ </h1>
87
+ </div>
88
+
89
+ <div class="relative w-full md:w-1/3">
90
+ <input type="text" placeholder="Buscar produtos..."
91
+ class="w-full py-2 px-4 rounded-full text-gray-800 focus:outline-none focus:ring-2 focus:ring-yellow-400">
92
+ <button class="absolute right-0 top-0 h-full px-4 text-blue-800 rounded-r-full bg-yellow-400 hover:bg-yellow-300">
93
+ <i class="fas fa-search"></i>
94
+ </button>
95
+ </div>
96
+
97
+ <div class="flex items-center space-x-6 mt-4 md:mt-0">
98
+ <a href="#" class="flex flex-col items-center hover:text-yellow-300">
99
+ <i class="fas fa-user text-xl"></i>
100
+ <span class="text-xs mt-1">Minha Conta</span>
101
+ </a>
102
+ <a href="#" class="flex flex-col items-center hover:text-yellow-300">
103
+ <i class="fas fa-heart text-xl"></i>
104
+ <span class="text-xs mt-1">Favoritos</span>
105
+ </a>
106
+ <a href="#" class="flex flex-col items-center hover:text-yellow-300 relative">
107
+ <i class="fas fa-shopping-cart text-xl"></i>
108
+ <span class="text-xs mt-1">Carrinho</span>
109
+ <span class="absolute -top-2 -right-2 bg-yellow-400 text-blue-800 rounded-full w-5 h-5 flex items-center justify-center text-xs font-bold">3</span>
110
+ </a>
111
+ </div>
112
+ </div>
113
+ </header>
114
+
115
+ <!-- Navigation -->
116
+ <nav class="bg-white shadow-md">
117
+ <div class="container mx-auto px-4">
118
+ <ul class="flex flex-wrap justify-center md:justify-start space-x-1 md:space-x-6 py-3">
119
+ <li><a href="#" class="px-3 py-2 text-blue-800 font-medium hover:bg-blue-50 rounded-md">Home</a></li>
120
+ <li><a href="#" class="px-3 py-2 text-gray-600 hover:text-blue-800 hover:bg-blue-50 rounded-md">Produtos</a></li>
121
+ <li><a href="#" class="px-3 py-2 text-gray-600 hover:text-blue-800 hover:bg-blue-50 rounded-md">Ofertas</a></li>
122
+ <li><a href="#" class="px-3 py-2 text-gray-600 hover:text-blue-800 hover:bg-blue-50 rounded-md">Limpeza Profissional</a></li>
123
+ <li><a href="#" class="px-3 py-2 text-gray-600 hover:text-blue-800 hover:bg-blue-50 rounded-md">Indústria</a></li>
124
+ <li><a href="#" class="px-3 py-2 text-gray-600 hover:text-blue-800 hover:bg-blue-50 rounded-md">Hospitalar</a></li>
125
+ <li><a href="#" class="px-3 py-2 text-gray-600 hover:text-blue-800 hover:bg-blue-50 rounded-md">Contato</a></li>
126
+ </ul>
127
+ </div>
128
+ </nav>
129
+
130
+ <!-- Hero Banner -->
131
+ <section class="relative bg-gradient-to-r from-blue-600 to-blue-800 text-white py-16">
132
+ <div class="container mx-auto px-4 flex flex-col md:flex-row items-center">
133
+ <div class="md:w-1/2 mb-8 md:mb-0 fade-in">
134
+ <h2 class="text-4xl md:text-5xl font-bold mb-4">Produtos de Limpeza Profissional</h2>
135
+ <p class="text-xl mb-6">Soluções completas para limpeza residencial, comercial e industrial com a melhor qualidade do mercado.</p>
136
+ <div class="flex space-x-4">
137
+ <a href="#" class="bg-yellow-400 hover:bg-yellow-300 text-blue-800 font-bold py-3 px-6 rounded-full button-hover button-active transition-all">
138
+ Compre Agora <i class="fas fa-arrow-right ml-2"></i>
139
+ </a>
140
+ <a href="#" class="border-2 border-white hover:bg-white hover:text-blue-800 font-bold py-3 px-6 rounded-full button-hover button-active transition-all">
141
+ Saiba Mais
142
+ </a>
143
+ </div>
144
+ </div>
145
+ <div class="md:w-1/2 flex justify-center fade-in" style="animation-delay: 0.3s;">
146
+ <img src="https://images.unsplash.com/photo-1600880292203-757bb62b4baf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80"
147
+ alt="Produtos de limpeza" class="rounded-xl shadow-2xl max-w-full h-auto md:max-w-md">
148
+ </div>
149
+ </div>
150
+ </section>
151
+
152
+ <!-- Features -->
153
+ <section class="py-12 bg-white">
154
+ <div class="container mx-auto px-4">
155
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
156
+ <div class="bg-blue-50 p-6 rounded-xl flex items-center fade-in">
157
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
158
+ <i class="fas fa-truck text-blue-600 text-xl"></i>
159
+ </div>
160
+ <div>
161
+ <h3 class="font-bold text-lg">Entrega Rápida</h3>
162
+ <p class="text-gray-600 text-sm">Entregamos em todo Brasil</p>
163
+ </div>
164
+ </div>
165
+
166
+ <div class="bg-blue-50 p-6 rounded-xl flex items-center fade-in" style="animation-delay: 0.2s;">
167
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
168
+ <i class="fas fa-shield-alt text-blue-600 text-xl"></i>
169
+ </div>
170
+ <div>
171
+ <h3 class="font-bold text-lg">Qualidade Garantida</h3>
172
+ <p class="text-gray-600 text-sm">Produtos testados e aprovados</p>
173
+ </div>
174
+ </div>
175
+
176
+ <div class="bg-blue-50 p-6 rounded-xl flex items-center fade-in" style="animation-delay: 0.4s;">
177
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
178
+ <i class="fas fa-credit-card text-blue-600 text-xl"></i>
179
+ </div>
180
+ <div>
181
+ <h3 class="font-bold text-lg">Pagamento Seguro</h3>
182
+ <p class="text-gray-600 text-sm">Diversas formas de pagamento</p>
183
+ </div>
184
+ </div>
185
+
186
+ <div class="bg-blue-50 p-6 rounded-xl flex items-center fade-in" style="animation-delay: 0.6s;">
187
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
188
+ <i class="fas fa-headset text-blue-600 text-xl"></i>
189
+ </div>
190
+ <div>
191
+ <h3 class="font-bold text-lg">Suporte 24/7</h3>
192
+ <p class="text-gray-600 text-sm">Atendimento especializado</p>
193
+ </div>
194
+ </div>
195
+ </div>
196
+ </div>
197
+ </section>
198
+
199
+ <!-- Categories -->
200
+ <section class="py-12 bg-gray-50">
201
+ <div class="container mx-auto px-4">
202
+ <div class="text-center mb-12">
203
+ <h2 class="text-3xl font-bold text-blue-800 mb-2">Nossas Categorias</h2>
204
+ <p class="text-gray-600 max-w-2xl mx-auto">Descubra nossa variedade de produtos para todas as necessidades de limpeza</p>
205
+ </div>
206
+
207
+ <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
208
+ <a href="#" class="bg-white p-6 rounded-xl shadow-sm flex flex-col items-center hover:shadow-md transition-all product-hover">
209
+ <div class="bg-blue-100 p-4 rounded-full mb-3">
210
+ <i class="fas fa-broom text-blue-600 text-2xl"></i>
211
+ </div>
212
+ <h3 class="font-medium text-center">Limpeza Geral</h3>
213
+ </a>
214
+
215
+ <a href="#" class="bg-white p-6 rounded-xl shadow-sm flex flex-col items-center hover:shadow-md transition-all product-hover">
216
+ <div class="bg-blue-100 p-4 rounded-full mb-3">
217
+ <i class="fas fa-tshirt text-blue-600 text-2xl"></i>
218
+ </div>
219
+ <h3 class="font-medium text-center">Lavanderia</h3>
220
+ </a>
221
+
222
+ <a href="#" class="bg-white p-6 rounded-xl shadow-sm flex flex-col items-center hover:shadow-md transition-all product-hover">
223
+ <div class="bg-blue-100 p-4 rounded-full mb-3">
224
+ <i class="fas fa-utensils text-blue-600 text-2xl"></i>
225
+ </div>
226
+ <h3 class="font-medium text-center">Cozinha</h3>
227
+ </a>
228
+
229
+ <a href="#" class="bg-white p-6 rounded-xl shadow-sm flex flex-col items-center hover:shadow-md transition-all product-hover">
230
+ <div class="bg-blue-100 p-4 rounded-full mb-3">
231
+ <i class="fas fa-bath text-blue-600 text-2xl"></i>
232
+ </div>
233
+ <h3 class="font-medium text-center">Banheiro</h3>
234
+ </a>
235
+
236
+ <a href="#" class="bg-white p-6 rounded-xl shadow-sm flex flex-col items-center hover:shadow-md transition-all product-hover">
237
+ <div class="bg-blue-100 p-4 rounded-full mb-3">
238
+ <i class="fas fa-industry text-blue-600 text-2xl"></i>
239
+ </div>
240
+ <h3 class="font-medium text-center">Industrial</h3>
241
+ </a>
242
+
243
+ <a href="#" class="bg-white p-6 rounded-xl shadow-sm flex flex-col items-center hover:shadow-md transition-all product-hover">
244
+ <div class="bg-blue-100 p-4 rounded-full mb-3">
245
+ <i class="fas fa-procedures text-blue-600 text-2xl"></i>
246
+ </div>
247
+ <h3 class="font-medium text-center">Hospitalar</h3>
248
+ </a>
249
+ </div>
250
+ </div>
251
+ </section>
252
+
253
+ <!-- Featured Products -->
254
+ <section class="py-12 bg-white">
255
+ <div class="container mx-auto px-4">
256
+ <div class="flex justify-between items-center mb-8">
257
+ <h2 class="text-3xl font-bold text-blue-800">Produtos em Destaque</h2>
258
+ <a href="#" class="text-blue-600 font-medium hover:text-blue-800 flex items-center">
259
+ Ver todos <i class="fas fa-chevron-right ml-1"></i>
260
+ </a>
261
+ </div>
262
+
263
+ <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
264
+ <!-- Product 1 -->
265
+ <div class="bg-white rounded-xl shadow-md overflow-hidden border border-gray-100 hover:shadow-lg transition-all product-hover relative">
266
+ <div class="discount-badge">-20%</div>
267
+ <div class="p-4">
268
+ <img src="https://images.unsplash.com/photo-1612108418909-1b553c0a0e8e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80"
269
+ alt="Desinfetante" class="w-full h-48 object-contain">
270
+ </div>
271
+ <div class="px-4 pb-4">
272
+ <div class="text-xs text-gray-500 mb-1">Desinfetantes</div>
273
+ <h3 class="font-bold text-lg mb-2">Desinfetante Concentrado 5L</h3>
274
+ <div class="flex items-center mb-3">
275
+ <div class="flex text-yellow-400 mr-2">
276
+ <i class="fas fa-star"></i>
277
+ <i class="fas fa-star"></i>
278
+ <i class="fas fa-star"></i>
279
+ <i class="fas fa-star"></i>
280
+ <i class="fas fa-star-half-alt"></i>
281
+ </div>
282
+ <span class="text-xs text-gray-500">(48)</span>
283
+ </div>
284
+ <div class="flex items-end justify-between">
285
+ <div>
286
+ <span class="text-gray-400 line-through text-sm">R$ 89,90</span>
287
+ <div class="text-blue-800 font-bold text-xl">R$ 71,92</div>
288
+ </div>
289
+ <button class="bg-blue-600 hover:bg-blue-700 text-white p-2 rounded-full button-hover button-active">
290
+ <i class="fas fa-shopping-cart"></i>
291
+ </button>
292
+ </div>
293
+ </div>
294
+ </div>
295
+
296
+ <!-- Product 2 -->
297
+ <div class="bg-white rounded-xl shadow-md overflow-hidden border border-gray-100 hover:shadow-lg transition-all product-hover">
298
+ <div class="p-4">
299
+ <img src="https://images.unsplash.com/photo-1607619056574-7b8d3ee536b2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=640&q=80"
300
+ alt="Detergente" class="w-full h-48 object-contain">
301
+ </div>
302
+ <div class="px-4 pb-4">
303
+ <div class="text-xs text-gray-500 mb-1">Detergentes</div>
304
+ <h3 class="font-bold text-lg mb-2">Detergente Neutro 5L</h3>
305
+ <div class="flex items-center mb-3">
306
+ <div class="flex text-yellow-400 mr-2">
307
+ <i class="fas fa-star"></i>
308
+ <i class="fas fa-star"></i>
309
+ <i class="fas fa-star"></i>
310
+ <i class="fas fa-star"></i>
311
+ <i class="fas fa-star"></i>
312
+ </div>
313
+ <span class="text-xs text-gray-500">(124)</span>
314
+ </div>
315
+ <div class="flex items-end justify-between">
316
+ <div>
317
+ <div class="text-blue-800 font-bold text-xl">R$ 42,90</div>
318
+ </div>
319
+ <button class="bg-blue-600 hover:bg-blue-700 text-white p-2 rounded-full button-hover button-active">
320
+ <i class="fas fa-shopping-cart"></i>
321
+ </button>
322
+ </div>
323
+ </div>
324
+ </div>
325
+
326
+ <!-- Product 3 -->
327
+ <div class="bg-white rounded-xl shadow-md overflow-hidden border border-gray-100 hover:shadow-lg transition-all product-hover relative">
328
+ <div class="discount-badge">-15%</div>
329
+ <div class="p-4">
330
+ <img src="https://images.unsplash.com/photo-1584308666744-5d72a60a52a3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80"
331
+ alt="Álcool em gel" class="w-full h-48 object-contain">
332
+ </div>
333
+ <div class="px-4 pb-4">
334
+ <div class="text-xs text-gray-500 mb-1">Antissépticos</div>
335
+ <h3 class="font-bold text-lg mb-2">Álcool em Gel 70% 1L</h3>
336
+ <div class="flex items-center mb-3">
337
+ <div class="flex text-yellow-400 mr-2">
338
+ <i class="fas fa-star"></i>
339
+ <i class="fas fa-star"></i>
340
+ <i class="fas fa-star"></i>
341
+ <i class="fas fa-star"></i>
342
+ <i class="far fa-star"></i>
343
+ </div>
344
+ <span class="text-xs text-gray-500">(76)</span>
345
+ </div>
346
+ <div class="flex items-end justify-between">
347
+ <div>
348
+ <span class="text-gray-400 line-through text-sm">R$ 28,90</span>
349
+ <div class="text-blue-800 font-bold text-xl">R$ 24,56</div>
350
+ </div>
351
+ <button class="bg-blue-600 hover:bg-blue-700 text-white p-2 rounded-full button-hover button-active">
352
+ <i class="fas fa-shopping-cart"></i>
353
+ </button>
354
+ </div>
355
+ </div>
356
+ </div>
357
+
358
+ <!-- Product 4 -->
359
+ <div class="bg-white rounded-xl shadow-md overflow-hidden border border-gray-100 hover:shadow-lg transition-all product-hover">
360
+ <div class="p-4">
361
+ <img src="https://images.unsplash.com/photo-1607619056574-7b8d3ee536b2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=640&q=80"
362
+ alt="Sabão líquido" class="w-full h-48 object-contain">
363
+ </div>
364
+ <div class="px-4 pb-4">
365
+ <div class="text-xs text-gray-500 mb-1">Lavanderia</div>
366
+ <h3 class="font-bold text-lg mb-2">Sabão Líquido 5L</h3>
367
+ <div class="flex items-center mb-3">
368
+ <div class="flex text-yellow-400 mr-2">
369
+ <i class="fas fa-star"></i>
370
+ <i class="fas fa-star"></i>
371
+ <i class="fas fa-star"></i>
372
+ <i class="fas fa-star"></i>
373
+ <i class="fas fa-star-half-alt"></i>
374
+ </div>
375
+ <span class="text-xs text-gray-500">(92)</span>
376
+ </div>
377
+ <div class="flex items-end justify-between">
378
+ <div>
379
+ <div class="text-blue-800 font-bold text-xl">R$ 59,90</div>
380
+ </div>
381
+ <button class="bg-blue-600 hover:bg-blue-700 text-white p-2 rounded-full button-hover button-active">
382
+ <i class="fas fa-shopping-cart"></i>
383
+ </button>
384
+ </div>
385
+ </div>
386
+ </div>
387
+ </div>
388
+ </div>
389
+ </section>
390
+
391
+ <!-- Special Offer -->
392
+ <section class="py-12 bg-blue-50">
393
+ <div class="container mx-auto px-4">
394
+ <div class="bg-gradient-to-r from-blue-600 to-blue-800 rounded-2xl overflow-hidden">
395
+ <div class="flex flex-col md:flex-row">
396
+ <div class="md:w-1/2 p-8 md:p-12 text-white">
397
+ <span class="bg-yellow-400 text-blue-800 px-3 py-1 rounded-full text-xs font-bold mb-4 inline-block">OFERTA ESPECIAL</span>
398
+ <h2 class="text-3xl font-bold mb-4">Kit Limpeza Completa</h2>
399
+ <p class="text-blue-100 mb-6">Leve 5 produtos essenciais para limpeza profissional com 30% de desconto</p>
400
+ <div class="flex items-center mb-6">
401
+ <span class="text-4xl font-bold">R$ 199,90</span>
402
+ <span class="ml-3 text-xl line-through text-blue-200">R$ 285,50</span>
403
+ </div>
404
+ <div class="flex space-x-3">
405
+ <button class="bg-yellow-400 hover:bg-yellow-300 text-blue-800 font-bold py-3 px-6 rounded-full button-hover button-active">
406
+ Comprar Agora <i class="fas fa-arrow-right ml-2"></i>
407
+ </button>
408
+ <button class="border-2 border-white hover:bg-white hover:text-blue-800 font-bold py-3 px-6 rounded-full button-hover button-active">
409
+ Detalhes
410
+ </button>
411
+ </div>
412
+ </div>
413
+ <div class="md:w-1/2 flex justify-center items-center p-4">
414
+ <img src="https://images.unsplash.com/photo-1600585152220-90363fe7e115?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80"
415
+ alt="Kit de limpeza" class="rounded-xl max-w-full h-auto md:max-w-md shadow-lg">
416
+ </div>
417
+ </div>
418
+ </div>
419
+ </div>
420
+ </section>
421
+
422
+ <!-- Testimonials -->
423
+ <section class="py-12 bg-white">
424
+ <div class="container mx-auto px-4">
425
+ <div class="text-center mb-12">
426
+ <h2 class="text-3xl font-bold text-blue-800 mb-2">O Que Nossos Clientes Dizem</h2>
427
+ <p class="text-gray-600 max-w-2xl mx-auto">Avaliações reais de quem já comprou nossos produtos</p>
428
+ </div>
429
+
430
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
431
+ <div class="bg-gray-50 p-6 rounded-xl fade-in">
432
+ <div class="flex text-yellow-400 mb-4">
433
+ <i class="fas fa-star"></i>
434
+ <i class="fas fa-star"></i>
435
+ <i class="fas fa-star"></i>
436
+ <i class="fas fa-star"></i>
437
+ <i class="fas fa-star"></i>
438
+ </div>
439
+ <p class="text-gray-700 mb-4">"Produtos de excelente qualidade e atendimento impecável. Compro há anos e nunca tive problemas."</p>
440
+ <div class="flex items-center">
441
+ <div class="bg-blue-100 text-blue-800 w-10 h-10 rounded-full flex items-center justify-center font-bold mr-3">AM</div>
442
+ <div>
443
+ <h4 class="font-bold">Ana Maria</h4>
444
+ <p class="text-sm text-gray-500">Hotelaria</p>
445
+ </div>
446
+ </div>
447
+ </div>
448
+
449
+ <div class="bg-gray-50 p-6 rounded-xl fade-in" style="animation-delay: 0.3s;">
450
+ <div class="flex text-yellow-400 mb-4">
451
+ <i class="fas fa-star"></i>
452
+ <i class="fas fa-star"></i>
453
+ <i class="fas fa-star"></i>
454
+ <i class="fas fa-star"></i>
455
+ <i class="fas fa-star-half-alt"></i>
456
+ </div>
457
+ <p class="text-gray-700 mb-4">"Entrega rápida e produtos que realmente funcionam. O desinfetante concentrado é o melhor que já usei."</p>
458
+ <div class="flex items-center">
459
+ <div class="bg-blue-100 text-blue-800 w-10 h-10 rounded-full flex items-center justify-center font-bold mr-3">CS</div>
460
+ <div>
461
+ <h4 class="font-bold">Carlos Silva</h4>
462
+ <p class="text-sm text-gray-500">Limpeza Profissional</p>
463
+ </div>
464
+ </div>
465
+ </div>
466
+
467
+ <div class="bg-gray-50 p-6 rounded-xl fade-in" style="animation-delay: 0.6s;">
468
+ <div class="flex text-yellow-400 mb-4">
469
+ <i class="fas fa-star"></i>
470
+ <i class="fas fa-star"></i>
471
+ <i class="fas fa-star"></i>
472
+ <i class="fas fa-star"></i>
473
+ <i class="fas fa-star"></i>
474
+ </div>
475
+ <p class="text-gray-700 mb-4">"Atendimento excelente e preços competitivos. Já indiquei para vários colegas do ramo hospitalar."</p>
476
+ <div class="flex items-center">
477
+ <div class="bg-blue-100 text-blue-800 w-10 h-10 rounded-full flex items-center justify-center font-bold mr-3">PF</div>
478
+ <div>
479
+ <h4 class="font-bold">Patrícia Fernandes</h4>
480
+ <p class="text-sm text-gray-500">Setor Hospitalar</p>
481
+ </div>
482
+ </div>
483
+ </div>
484
+ </div>
485
+ </div>
486
+ </section>
487
+
488
+ <!-- Newsletter -->
489
+ <section class="py-12 bg-blue-800 text-white">
490
+ <div class="container mx-auto px-4 text-center">
491
+ <h2 class="text-3xl font-bold mb-4">Receba Nossas Ofertas</h2>
492
+ <p class="text-blue-200 max-w-2xl mx-auto mb-8">Cadastre-se e receba promoções exclusivas diretamente no seu e-mail</p>
493
+
494
+ <div class="max-w-md mx-auto flex">
495
+ <input type="email" placeholder="Seu melhor e-mail"
496
+ class="flex-grow py-3 px-4 rounded-l-lg text-gray-800 focus:outline-none focus:ring-2 focus:ring-yellow-400">
497
+ <button class="bg-yellow-400 hover:bg-yellow-300 text-blue-800 font-bold py-3 px-6 rounded-r-lg button-hover button-active">
498
+ Cadastrar <i class="fas fa-paper-plane ml-2"></i>
499
+ </button>
500
+ </div>
501
+
502
+ <div class="flex justify-center space-x-4 mt-6">
503
+ <div class="flex items-center">
504
+ <i class="fas fa-check-circle text-yellow-400 mr-2"></i>
505
+ <span class="text-sm">Sem spam</span>
506
+ </div>
507
+ <div class="flex items-center">
508
+ <i class="fas fa-check-circle text-yellow-400 mr-2"></i>
509
+ <span class="text-sm">Promoções semanais</span>
510
+ </div>
511
+ <div class="flex items-center">
512
+ <i class="fas fa-check-circle text-yellow-400 mr-2"></i>
513
+ <span class="text-sm">Pode cancelar quando quiser</span>
514
+ </div>
515
+ </div>
516
+ </div>
517
+ </section>
518
+
519
+ <!-- Footer -->
520
+ <footer class="bg-gray-900 text-white pt-12 pb-6">
521
+ <div class="container mx-auto px-4">
522
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
523
+ <div>
524
+ <h3 class="text-xl font-bold mb-4 flex items-center">
525
+ <span class="text-white">R.a</span>
526
+ <span class="text-yellow-300">Superclean</span>
527
+ </h3>
528
+ <p class="text-gray-400 mb-4">Especialistas em produtos de limpeza profissional desde 2010.</p>
529
+ <div class="flex space-x-4">
530
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a>
531
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a>
532
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-linkedin-in"></i></a>
533
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-youtube"></i></a>
534
+ </div>
535
+ </div>
536
+
537
+ <div>
538
+ <h3 class="font-bold text-lg mb-4">Institucional</h3>
539
+ <ul class="space-y-2">
540
+ <li><a href="#" class="text-gray-400 hover:text-white">Quem Somos</a></li>
541
+ <li><a href="#" class="text-gray-400 hover:text-white">Nossa História</a></li>
542
+ <li><a href="#" class="text-gray-400 hover:text-white">Trabalhe Conosco</a></li>
543
+ <li><a href="#" class="text-gray-400 hover:text-white">Política de Privacidade</a></li>
544
+ <li><a href="#" class="text-gray-400 hover:text-white">Termos de Uso</a></li>
545
+ </ul>
546
+ </div>
547
+
548
+ <div>
549
+ <h3 class="font-bold text-lg mb-4">Atendimento</h3>
550
+ <ul class="space-y-2">
551
+ <li class="flex items-start">
552
+ <i class="fas fa-map-marker-alt text-yellow-300 mt-1 mr-2"></i>
553
+ <span class="text-gray-400">Rua Dolores Paraná de Alvarenga, 400 - Jardim Sumaré</span>
554
+ </li>
555
+ <li class="flex items-center">
556
+ <i class="fas fa-phone-alt text-yellow-300 mr-2"></i>
557
+ <span class="text-gray-400">(18) 99774-4757</span>
558
+ </li>
559
+ <li class="flex items-center">
560
+ <i class="fas fa-envelope text-yellow-300 mr-2"></i>
561
+ <span class="text-gray-400">contato@rasuperclean.com.br</span>
562
+ </li>
563
+ <li class="flex items-center">
564
+ <i class="fas fa-clock text-yellow-300 mr-2"></i>
565
+ <span class="text-gray-400">Seg-Sex: 8h às 18h</span>
566
+ </li>
567
+ </ul>
568
+ </div>
569
+
570
+ <div>
571
+ <h3 class="font-bold text-lg mb-4">Formas de Pagamento</h3>
572
+ <div class="grid grid-cols-3 gap-2 mb-4">
573
+ <div class="bg-gray-800 p-2 rounded flex items-center justify-center">
574
+ <i class="fab fa-cc-visa text-2xl"></i>
575
+ </div>
576
+ <div class="bg-gray-800 p-2 rounded flex items-center justify-center">
577
+ <i class="fab fa-cc-mastercard text-2xl"></i>
578
+ </div>
579
+ <div class="bg-gray-800 p-2 rounded flex items-center justify-center">
580
+ <i class="fab fa-cc-amex text-2xl"></i>
581
+ </div>
582
+ <div class="bg-gray-800 p-2 rounded flex items-center justify-center">
583
+ <i class="fab fa-cc-paypal text-2xl"></i>
584
+ </div>
585
+ <div class="bg-gray-800 p-2 rounded flex items-center justify-center">
586
+ <i class="fas fa-barcode text-xl"></i>
587
+ </div>
588
+ <div class="bg-gray-800 p-2 rounded flex items-center justify-center">
589
+ <i class="fas fa-money-bill-wave text-xl"></i>
590
+ </div>
591
+ </div>
592
+ <h3 class="font-bold text-lg mb-2">Segurança</h3>
593
+ <div class="flex space-x-2">
594
+ <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google Safe" class="h-8">
595
+ <img src="https://ssl.comodo.com/images/comodo_secure_seal_76x26_transp.png" alt="SSL" class="h-8">
596
+ </div>
597
+ </div>
598
+ </div>
599
+
600
+ <div class="border-t border-gray-800 pt-6 flex flex-col md:flex-row justify-between items-center">
601
+ <p class="text-gray-500 text-sm mb-4 md:mb-0">© 2023 R.a Superclean. Todos os direitos reservados.</p>
602
+ <div class="flex space-x-4">
603
+ <a href="#" class="text-gray-500 hover:text-white text-sm">Termos de Serviço</a>
604
+ <a href="#" class="text-gray-500 hover:text-white text-sm">Política de Privacidade</a>
605
+ <a href="#" class="text-gray-500 hover:text-white text-sm">Mapa do Site</a>
606
+ </div>
607
+ </div>
608
+ </div>
609
+ </footer>
610
+
611
+ <!-- Floating WhatsApp -->
612
+ <a href="https://wa.me/5518997744757" class="fixed bottom-6 right-6 bg-green-500 hover:bg-green-600 text-white w-14 h-14 rounded-full flex items-center justify-center text-2xl shadow-lg button-hover button-active pulse-animation">
613
+ <i class="fab fa-whatsapp"></i>
614
+ </a>
615
+
616
+ <script>
617
+ // Simple animation on scroll
618
+ document.addEventListener('DOMContentLoaded', function() {
619
+ const fadeElements = document.querySelectorAll('.fade-in');
620
+
621
+ const fadeInOnScroll = function() {
622
+ fadeElements.forEach(element => {
623
+ const elementTop = element.getBoundingClientRect().top;
624
+ const windowHeight = window.innerHeight;
625
+
626
+ if (elementTop < windowHeight - 100) {
627
+ element.style.opacity = '1';
628
+ element.style.transform = 'translateY(0)';
629
+ }
630
+ });
631
+ };
632
+
633
+ // Set initial state
634
+ fadeElements.forEach(element => {
635
+ element.style.opacity = '0';
636
+ element.style.transform = 'translateY(20px)';
637
+ element.style.transition = 'opacity 0.6s ease-out, transform 0.6s ease-out';
638
+ });
639
+
640
+ // Check on load
641
+ fadeInOnScroll();
642
+
643
+ // Check on scroll
644
+ window.addEventListener('scroll', fadeInOnScroll);
645
+ });
646
+ </script>
647
+ <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=thiago12345678/site" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
648
+ </html>
prompts.txt ADDED
File without changes