Hugging Face's logo

Spaces:
R87
/
pecas
Running

App Files Community
R87 commited on
Commit
7465e86
·
verified ·
1 Parent(s): 50cf8ef

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +493 -19
  3. prompts.txt +2 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Pecas
3
- emoji: 🌍
4
- colorFrom: indigo
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: pecas
3
+ emoji: 🐳
4
+ colorFrom: gray
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,493 @@
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>AutoPeças - O maior mercado de peças automotivas</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
+ .search-bar {
11
+ background-color: #fff159;
12
+ }
13
+ .ml-blue {
14
+ background-color: #2968c8;
15
+ }
16
+ .ml-yellow {
17
+ background-color: #fff159;
18
+ }
19
+ .category-card:hover {
20
+ box-shadow: 0 4px 8px rgba(0,0,0,0.1);
21
+ transform: translateY(-2px);
22
+ }
23
+ .product-card:hover {
24
+ box-shadow: 0 4px 12px rgba(0,0,0,0.15);
25
+ transform: translateY(-5px);
26
+ }
27
+ .product-image {
28
+ transition: all 0.3s ease;
29
+ transform-origin: center center;
30
+ }
31
+ .product-card:hover .product-image {
32
+ transform: scale(1.05);
33
+ }
34
+ .deal-badge {
35
+ position: absolute;
36
+ top: 10px;
37
+ left: 10px;
38
+ background-color: #00a650;
39
+ color: white;
40
+ padding: 2px 8px;
41
+ border-radius: 4px;
42
+ font-size: 12px;
43
+ font-weight: bold;
44
+ z-index: 2;
45
+ }
46
+ .free-shipping {
47
+ color: #00a650;
48
+ font-weight: bold;
49
+ }
50
+ .dropdown:hover .dropdown-menu {
51
+ display: block;
52
+ }
53
+ .banner-fx {
54
+ position: relative;
55
+ overflow: hidden;
56
+ border-radius: 8px;
57
+ }
58
+ .banner-fx::before {
59
+ content: '';
60
+ position: absolute;
61
+ top: 0;
62
+ left: 0;
63
+ right: 0;
64
+ bottom: 0;
65
+ background: linear-gradient(45deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 50%);
66
+ z-index: 1;
67
+ }
68
+ .banner-fx:hover::before {
69
+ background: linear-gradient(45deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 50%);
70
+ }
71
+ .pulse {
72
+ animation: pulse 2s infinite;
73
+ }
74
+ @keyframes pulse {
75
+ 0% {
76
+ transform: scale(1);
77
+ }
78
+ 50% {
79
+ transform: scale(1.05);
80
+ }
81
+ 100% {
82
+ transform: scale(1);
83
+ }
84
+ }
85
+ .shine {
86
+ position: relative;
87
+ overflow: hidden;
88
+ }
89
+ .shine::after {
90
+ content: '';
91
+ position: absolute;
92
+ top: -50%;
93
+ left: -60%;
94
+ width: 20%;
95
+ height: 200%;
96
+ background: rgba(255,255,255,0.2);
97
+ transform: rotate(30deg);
98
+ transition: all 0.3s ease;
99
+ }
100
+ .shine:hover::after {
101
+ left: 120%;
102
+ }
103
+ </style>
104
+ </head>
105
+ <body class="bg-gray-100">
106
+ <!-- Header -->
107
+ <header class="search-bar py-2">
108
+ <div class="container mx-auto px-4">
109
+ <div class="flex items-center justify-between">
110
+ <!-- Logo -->
111
+ <div class="flex items-center">
112
+ <a href="#" class="flex items-center shine">
113
+ <img src="https://via.placeholder.com/134x34?text=AutoPeças" alt="AutoPeças" class="h-10">
114
+ </a>
115
+ </div>
116
+
117
+ <!-- Search Bar -->
118
+ <div class="flex-1 mx-4">
119
+ <div class="relative">
120
+ <input type="text" placeholder="Buscar peças, marcas e muito mais..."
121
+ class="w-full py-2 px-4 rounded shadow-sm focus:outline-none">
122
+ <button class="absolute right-0 top-0 h-full px-4 bg-gray-200 rounded-r hover:bg-gray-300 transition">
123
+ <i class="fas fa-search"></i>
124
+ </button>
125
+ </div>
126
+ </div>
127
+
128
+ <!-- User Menu -->
129
+ <div class="flex items-center space-x-4">
130
+ <a href="#" class="text-sm hidden md:block hover:text-blue-600 transition">
131
+ <i class="fas fa-map-marker-alt mr-1"></i>
132
+ <span>Enviar para São Paulo</span>
133
+ </a>
134
+ <div class="dropdown relative">
135
+ <button class="flex items-center text-sm hover:text-blue-600 transition">
136
+ <i class="fas fa-user-circle mr-1 text-xl"></i>
137
+ <span class="hidden md:inline">Minha conta</span>
138
+ <i class="fas fa-chevron-down ml-1 text-xs"></i>
139
+ </button>
140
+ <div class="dropdown-menu absolute hidden right-0 mt-2 w-48 bg-white rounded shadow-lg py-2 z-10">
141
+ <a href="#" class="block px-4 py-2 hover:bg-gray-100 transition">Minhas compras</a>
142
+ <a href="#" class="block px-4 py-2 hover:bg-gray-100 transition">Favoritos</a>
143
+ <a href="#" class="block px-4 py-2 hover:bg-gray-100 transition">Meus anúncios</a>
144
+ <div class="border-t my-1"></div>
145
+ <a href="#" class="block px-4 py-2 hover:bg-gray-100 transition">Entrar</a>
146
+ <a href="#" class="block px-4 py-2 hover:bg-gray-100 transition">Criar conta</a>
147
+ </div>
148
+ </div>
149
+ <a href="#" class="text-sm hover:text-blue-600 transition relative">
150
+ <i class="fas fa-shopping-cart mr-1 text-xl"></i>
151
+ <span class="hidden md:inline">Carrinho</span>
152
+ <span class="absolute -top-2 -right-2 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">3</span>
153
+ </a>
154
+ </div>
155
+ </div>
156
+ </div>
157
+ </header>
158
+
159
+ <!-- Categories Nav -->
160
+ <nav class="bg-white shadow-sm">
161
+ <div class="container mx-auto px-4">
162
+ <div class="flex overflow-x-auto py-2 space-x-6 text-sm">
163
+ <a href="#" class="whitespace-nowrap hover:text-blue-500 transition">Motor</a>
164
+ <a href="#" class="whitespace-nowrap hover:text-blue-500 transition">Freios</a>
165
+ <a href="#" class="whitespace-nowrap hover:text-blue-500 transition">Suspensão</a>
166
+ <a href="#" class="whitespace-nowrap hover:text-blue-500 transition">Transmissão</a>
167
+ <a href="#" class="whitespace-nowrap hover:text-blue-500 transition">Elétrica</a>
168
+ <a href="#" class="whitespace-nowrap hover:text-blue-500 transition">Arrefecimento</a>
169
+ <a href="#" class="whitespace-nowrap hover:text-blue-500 transition">Escapamento</a>
170
+ <a href="#" class="whitespace-nowrap hover:text-blue-500 transition">Interior</a>
171
+ <a href="#" class="whitespace-nowrap hover:text-blue-500 transition">Exterior</a>
172
+ <a href="#" class="whitespace-nowrap hover:text-blue-500 transition">Acessórios</a>
173
+ <a href="#" class="whitespace-nowrap hover:text-blue-500 transition">Pneus e Rodas</a>
174
+ <a href="#" class="whitespace-nowrap hover:text-blue-500 transition">Óleos e Fluidos</a>
175
+ </div>
176
+ </div>
177
+ </nav>
178
+
179
+ <!-- Main Content -->
180
+ <main class="container mx-auto px-4 py-6">
181
+ <!-- Banner -->
182
+ <div class="mb-6 banner-fx">
183
+ <img src="https://via.placeholder.com/1200x300?text=Promoções+de+Peças+Automotivas"
184
+ alt="Promoções" class="w-full rounded pulse">
185
+ </div>
186
+
187
+ <!-- Categories Grid -->
188
+ <div class="mb-8">
189
+ <h2 class="text-xl font-bold mb-4">Categorias</h2>
190
+ <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
191
+ <a href="#" class="category-card bg-white rounded p-4 text-center transition duration-200 shine">
192
+ <div class="h-16 mx-auto mb-2">
193
+ <i class="fas fa-car-battery text-4xl text-gray-600"></i>
194
+ </div>
195
+ <span class="text-sm font-medium">Baterias</span>
196
+ </a>
197
+ <a href="#" class="category-card bg-white rounded p-4 text-center transition duration-200 shine">
198
+ <div class="h-16 mx-auto mb-2">
199
+ <i class="fas fa-oil-can text-4xl text-gray-600"></i>
200
+ </div>
201
+ <span class="text-sm font-medium">Óleos</span>
202
+ </a>
203
+ <a href="#" class="category-card bg-white rounded p-4 text-center transition duration-200 shine">
204
+ <div class="h-16 mx-auto mb-2">
205
+ <i class="fas fa-tire text-4xl text-gray-600"></i>
206
+ </div>
207
+ <span class="text-sm font-medium">Pneus</span>
208
+ </a>
209
+ <a href="#" class="category-card bg-white rounded p-4 text-center transition duration-200 shine">
210
+ <div class="h-16 mx-auto mb-2">
211
+ <i class="fas fa-tools text-4xl text-gray-600"></i>
212
+ </div>
213
+ <span class="text-sm font-medium">Ferramentas</span>
214
+ </a>
215
+ <a href="#" class="category-card bg-white rounded p-4 text-center transition duration-200 shine">
216
+ <div class="h-16 mx-auto mb-2">
217
+ <i class="fas fa-lightbulb text-4xl text-gray-600"></i>
218
+ </div>
219
+ <span class="text-sm font-medium">Lâmpadas</span>
220
+ </a>
221
+ <a href="#" class="category-card bg-white rounded p-4 text-center transition duration-200 shine">
222
+ <div class="h-16 mx-auto mb-2">
223
+ <i class="fas fa-fan text-4xl text-gray-600"></i>
224
+ </div>
225
+ <span class="text-sm font-medium">Radiador</span>
226
+ </a>
227
+ </div>
228
+ </div>
229
+
230
+ <!-- Featured Products -->
231
+ <div class="mb-8">
232
+ <div class="flex justify-between items-center mb-4">
233
+ <h2 class="text-xl font-bold">Ofertas especiais</h2>
234
+ <a href="#" class="text-blue-500 text-sm font-medium hover:text-blue-700 transition">Ver todas</a>
235
+ </div>
236
+ <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4">
237
+ <!-- Product 1 -->
238
+ <div class="product-card bg-white rounded p-4 relative transition duration-200">
239
+ <span class="deal-badge">OFERTA</span>
240
+ <div class="overflow-hidden">
241
+ <img src="https://via.placeholder.com/200x200?text=Kit+Amortecedor"
242
+ alt="Kit Amortecedor" class="w-full h-40 object-contain mb-3 product-image">
243
+ </div>
244
+ <div class="text-sm text-gray-500 mb-1">Suspensão</div>
245
+ <h3 class="font-medium mb-2">Kit Amortecedor Dianteiro Gol 1.0 2015 a 2020</h3>
246
+ <div class="text-xl font-bold mb-1">R$ 289,90</div>
247
+ <div class="text-green-500 text-sm mb-2">12x R$ 24,16 sem juros</div>
248
+ <div class="free-shipping text-sm mb-2">
249
+ <i class="fas fa-truck"></i> Frete grátis
250
+ </div>
251
+ <button class="w-full bg-blue-500 hover:bg-blue-600 text-white py-2 rounded text-sm transition">
252
+ Comprar agora
253
+ </button>
254
+ </div>
255
+
256
+ <!-- Product 2 -->
257
+ <div class="product-card bg-white rounded p-4 relative transition duration-200">
258
+ <div class="overflow-hidden">
259
+ <img src="https://via.placeholder.com/200x200?text=Bateria+Moura"
260
+ alt="Bateria Moura" class="w-full h-40 object-contain mb-3 product-image">
261
+ </div>
262
+ <div class="text-sm text-gray-500 mb-1">Baterias</div>
263
+ <h3 class="font-medium mb-2">Bateria Moura 60Ah M60L - Original</h3>
264
+ <div class="text-xl font-bold mb-1">R$ 429,90</div>
265
+ <div class="text-green-500 text-sm mb-2">12x R$ 35,83 sem juros</div>
266
+ <div class="free-shipping text-sm mb-2">
267
+ <i class="fas fa-truck"></i> Frete grátis
268
+ </div>
269
+ <button class="w-full bg-blue-500 hover:bg-blue-600 text-white py-2 rounded text-sm transition">
270
+ Comprar agora
271
+ </button>
272
+ </div>
273
+
274
+ <!-- Product 3 -->
275
+ <div class="product-card bg-white rounded p-4 relative transition duration-200">
276
+ <span class="deal-badge">10% OFF</span>
277
+ <div class="overflow-hidden">
278
+ <img src="https://via.placeholder.com/200x200?text=Pastilha+Freio"
279
+ alt="Pastilha de Freio" class="w-full h-40 object-contain mb-3 product-image">
280
+ </div>
281
+ <div class="text-sm text-gray-500 mb-1">Freios</div>
282
+ <h3 class="font-medium mb-2">Pastilha de Freio Dianteira Bosch HB193B</h3>
283
+ <div class="flex items-center">
284
+ <div class="text-xl font-bold mr-2">R$ 89,90</div>
285
+ <div class="text-sm text-gray-500 line-through">R$ 99,90</div>
286
+ </div>
287
+ <div class="text-green-500 text-sm mb-2">3x R$ 29,97 sem juros</div>
288
+ <button class="w-full bg-blue-500 hover:bg-blue-600 text-white py-2 rounded text-sm transition">
289
+ Comprar agora
290
+ </button>
291
+ </div>
292
+
293
+ <!-- Product 4 -->
294
+ <div class="product-card bg-white rounded p-4 relative transition duration-200">
295
+ <div class="overflow-hidden">
296
+ <img src="https://via.placeholder.com/200x200?text=Filtro+Ar"
297
+ alt="Filtro de Ar" class="w-full h-40 object-contain mb-3 product-image">
298
+ </div>
299
+ <div class="text-sm text-gray-500 mb-1">Filtros</div>
300
+ <h3 class="font-medium mb-2">Filtro de Ar Original Toyota Corolla 2.0</h3>
301
+ <div class="text-xl font-bold mb-1">R$ 49,90</div>
302
+ <div class="text-green-500 text-sm mb-2">Em até 2x sem juros</div>
303
+ <div class="text-sm text-gray-500 mb-2">Frete: R$ 12,90</div>
304
+ <button class="w-full bg-blue-500 hover:bg-blue-600 text-white py-2 rounded text-sm transition">
305
+ Comprar agora
306
+ </button>
307
+ </div>
308
+
309
+ <!-- Product 5 -->
310
+ <div class="product-card bg-white rounded p-4 relative transition duration-200">
311
+ <span class="deal-badge">LANÇAMENTO</span>
312
+ <div class="overflow-hidden">
313
+ <img src="https://via.placeholder.com/200x200?text=Óleo+Motor"
314
+ alt="Óleo de Motor" class="w-full h-40 object-contain mb-3 product-image">
315
+ </div>
316
+ <div class="text-sm text-gray-500 mb-1">Óleos</div>
317
+ <h3 class="font-medium mb-2">Óleo Mobil Super 3000 5W30 1L - Sintético</h3>
318
+ <div class="text-xl font-bold mb-1">R$ 39,90</div>
319
+ <div class="text-green-500 text-sm mb-2">Em até 2x sem juros</div>
320
+ <div class="free-shipping text-sm mb-2">
321
+ <i class="fas fa-truck"></i> Frete grátis
322
+ </div>
323
+ <button class="w-full bg-blue-500 hover:bg-blue-600 text-white py-2 rounded text-sm transition">
324
+ Comprar agora
325
+ </button>
326
+ </div>
327
+ </div>
328
+ </div>
329
+
330
+ <!-- Brands Section -->
331
+ <div class="mb-8">
332
+ <h2 class="text-xl font-bold mb-4">Marcas populares</h2>
333
+ <div class="grid grid-cols-3 md:grid-cols-6 gap-4">
334
+ <a href="#" class="bg-white p-4 rounded flex items-center justify-center hover:shadow-md transition">
335
+ <img src="https://via.placeholder.com/100x50?text=Bosch" alt="Bosch" class="h-10 object-contain hover:scale-105 transition">
336
+ </a>
337
+ <a href="#" class="bg-white p-4 rounded flex items-center justify-center hover:shadow-md transition">
338
+ <img src="https://via.placeholder.com/100x50?text=Moura" alt="Moura" class="h-10 object-contain hover:scale-105 transition">
339
+ </a>
340
+ <a href="#" class="bg-white p-4 rounded flex items-center justify-center hover:shadow-md transition">
341
+ <img src="https://via.placeholder.com/100x50?text=VW" alt="Volkswagen" class="h-10 object-contain hover:scale-105 transition">
342
+ </a>
343
+ <a href="#" class="bg-white p-4 rounded flex items-center justify-center hover:shadow-md transition">
344
+ <img src="https://via.placeholder.com/100x50?text=GM" alt="GM" class="h-10 object-contain hover:scale-105 transition">
345
+ </a>
346
+ <a href="#" class="bg-white p-4 rounded flex items-center justify-center hover:shadow-md transition">
347
+ <img src="https://via.placeholder.com/100x50?text=Shell" alt="Shell" class="h-10 object-contain hover:scale-105 transition">
348
+ </a>
349
+ <a href="#" class="bg-white p-4 rounded flex items-center justify-center hover:shadow-md transition">
350
+ <img src="https://via.placeholder.com/100x50?text=Goodyear" alt="Goodyear" class="h-10 object-contain hover:scale-105 transition">
351
+ </a>
352
+ </div>
353
+ </div>
354
+
355
+ <!-- More Products -->
356
+ <div class="mb-8">
357
+ <div class="flex justify-between items-center mb-4">
358
+ <h2 class="text-xl font-bold">Peças em destaque</h2>
359
+ <a href="#" class="text-blue-500 text-sm font-medium hover:text-blue-700 transition">Ver todas</a>
360
+ </div>
361
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
362
+ <!-- Product 6 -->
363
+ <div class="product-card bg-white rounded p-4 relative transition duration-200">
364
+ <div class="overflow-hidden">
365
+ <img src="https://via.placeholder.com/200x200?text=Correia+Dentada"
366
+ alt="Correia Dentada" class="w-full h-40 object-contain mb-3 product-image">
367
+ </div>
368
+ <div class="text-sm text-gray-500 mb-1">Motor</div>
369
+ <h3 class="font-medium mb-2">Kit Correia Dentada HB20 1.0 2012-2017</h3>
370
+ <div class="text-xl font-bold mb-1">R$ 189,90</div>
371
+ <div class="text-green-500 text-sm mb-2">6x R$ 31,65 sem juros</div>
372
+ <button class="w-full bg-blue-500 hover:bg-blue-600 text-white py-2 rounded text-sm transition">
373
+ Comprar agora
374
+ </button>
375
+ </div>
376
+
377
+ <!-- Product 7 -->
378
+ <div class="product-card bg-white rounded p-4 relative transition duration-200">
379
+ <div class="overflow-hidden">
380
+ <img src="https://via.placeholder.com/200x200?text=Velas+Ignição"
381
+ alt="Velas de Ignição" class="w-full h-40 object-contain mb-3 product-image">
382
+ </div>
383
+ <div class="text-sm text-gray-500 mb-1">Motor</div>
384
+ <h3 class="font-medium mb-2">Vela de Ignição NGK Laser Iridium LFR5AIX-11</h3>
385
+ <div class="text-xl font-bold mb-1">R$ 59,90</div>
386
+ <div class="text-green-500 text-sm mb-2">2x R$ 29,95 sem juros</div>
387
+ <button class="w-full bg-blue-500 hover:bg-blue-600 text-white py-2 rounded text-sm transition">
388
+ Comprar agora
389
+ </button>
390
+ </div>
391
+
392
+ <!-- Product 8 -->
393
+ <div class="product-card bg-white rounded p-4 relative transition duration-200">
394
+ <div class="overflow-hidden">
395
+ <img src="https://via.placeholder.com/200x200?text=Disco+Freio"
396
+ alt="Disco de Freio" class="w-full h-40 object-contain mb-3 product-image">
397
+ </div>
398
+ <div class="text-sm text-gray-500 mb-1">Freios</div>
399
+ <h3 class="font-medium mb-2">Disco de Freio Traseiro Onix 1.4 2012-2019</h3>
400
+ <div class="text-xl font-bold mb-1">R$ 129,90</div>
401
+ <div class="text-green-500 text-sm mb-2">4x R$ 32,48 sem juros</div>
402
+ <button class="w-full bg-blue-500 hover:bg-blue-600 text-white py-2 rounded text-sm transition">
403
+ Comprar agora
404
+ </button>
405
+ </div>
406
+
407
+ <!-- Product 9 -->
408
+ <div class="product-card bg-white rounded p-4 relative transition duration-200">
409
+ <div class="overflow-hidden">
410
+ <img src="https://via.placeholder.com/200x200?text=Farol+Dianteiro"
411
+ alt="Farol Dianteiro" class="w-full h-40 object-contain mb-3 product-image">
412
+ </div>
413
+ <div class="text-sm text-gray-500 mb-1">Elétrica</div>
414
+ <h3 class="font-medium mb-2">Farol Dianteiro Esquerdo Civic 2015-2020</h3>
415
+ <div class="text-xl font-bold mb-1">R$ 459,90</div>
416
+ <div class="text-green-500 text-sm mb-2">12x R$ 38,33 sem juros</div>
417
+ <button class="w-full bg-blue-500 hover:bg-blue-600 text-white py-2 rounded text-sm transition">
418
+ Comprar agora
419
+ </button>
420
+ </div>
421
+ </div>
422
+ </div>
423
+ </main>
424
+
425
+ <!-- Footer -->
426
+ <footer class="bg-gray-800 text-white py-8">
427
+ <div class="container mx-auto px-4">
428
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
429
+ <div>
430
+ <h3 class="font-bold mb-4">Informações</h3>
431
+ <ul class="space-y-2 text-sm">
432
+ <li><a href="#" class="hover:underline transition">Sobre nós</a></li>
433
+ <li><a href="#" class="hover:underline transition">Política de privacidade</a></li>
434
+ <li><a href="#" class="hover:underline transition">Termos e condições</a></li>
435
+ <li><a href="#" class="hover:underline transition">Trocas e devoluções</a></li>
436
+ </ul>
437
+ </div>
438
+ <div>
439
+ <h3 class="font-bold mb-4">Atendimento</h3>
440
+ <ul class="space-y-2 text-sm">
441
+ <li><a href="#" class="hover:underline transition">Central de ajuda</a></li>
442
+ <li><a href="#" class="hover:underline transition">Perguntas frequentes</a></li>
443
+ <li><a href="#" class="hover:underline transition">Fale conosco</a></li>
444
+ <li><a href="#" class="hover:underline transition">Nossas lojas</a></li>
445
+ </ul>
446
+ </div>
447
+ <div>
448
+ <h3 class="font-bold mb-4">Formas de pagamento</h3>
449
+ <div class="grid grid-cols-3 gap-2">
450
+ <img src="https://via.placeholder.com/50x30?text=Visa" alt="Visa" class="h-8 hover:scale-110 transition">
451
+ <img src="https://via.placeholder.com/50x30?text=Master" alt="Mastercard" class="h-8 hover:scale-110 transition">
452
+ <img src="https://via.placeholder.com/50x30?text=Elo" alt="Elo" class="h-8 hover:scale-110 transition">
453
+ <img src="https://via.placeholder.com/50x30?text=Boleto" alt="Boleto" class="h-8 hover:scale-110 transition">
454
+ <img src="https://via.placeholder.com/50x30?text=Pix" alt="Pix" class="h-8 hover:scale-110 transition">
455
+ <img src="https://via.placeholder.com/50x30?text=Hiper" alt="Hipercard" class="h-8 hover:scale-110 transition">
456
+ </div>
457
+ </div>
458
+ <div>
459
+ <h3 class="font-bold mb-4">Redes sociais</h3>
460
+ <div class="flex space-x-4">
461
+ <a href="#" class="text-2xl hover:text-blue-400 transition"><i class="fab fa-facebook"></i></a>
462
+ <a href="#" class="text-2xl hover:text-pink-600 transition"><i class="fab fa-instagram"></i></a>
463
+ <a href="#" class="text-2xl hover:text-red-600 transition"><i class="fab fa-youtube"></i></a>
464
+ <a href="#" class="text-2xl hover:text-blue-400 transition"><i class="fab fa-twitter"></i></a>
465
+ </div>
466
+ <div class="mt-4">
467
+ <h4 class="font-bold mb-2">Baixe nosso app</h4>
468
+ <div class="flex space-x-2">
469
+ <a href="#" class="hover:scale-105 transition">
470
+ <img src="https://via.placeholder.com/120x40?text=App+Store" alt="App Store" class="h-10">
471
+ </a>
472
+ <a href="#" class="hover:scale-105 transition">
473
+ <img src="https://via.placeholder.com/120x40?text=Play+Store" alt="Play Store" class="h-10">
474
+ </a>
475
+ </div>
476
+ </div>
477
+ </div>
478
+ </div>
479
+ <div class="border-t border-gray-700 mt-8 pt-6 text-sm text-center">
480
+ <p>© 2023 AutoPeças - CNPJ 00.000.000/0000-00 - Todos os direitos reservados</p>
481
+ <p class="mt-2">Preços e condições de pagamento exclusivos para compras via internet. Ofertas válidas até o término de nossos estoques.</p>
482
+ </div>
483
+ </div>
484
+ </footer>
485
+
486
+ <!-- Floating WhatsApp Button -->
487
+ <div class="fixed bottom-6 right-6 animate-bounce">
488
+ <a href="#" class="bg-green-500 hover:bg-green-600 text-white rounded-full p-4 shadow-lg flex items-center justify-center transition transform hover:scale-110">
489
+ <i class="fab fa-whatsapp text-2xl"></i>
490
+ </a>
491
+ </div>
492
+ <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=R87/pecas" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
493
+ </html>
prompts.txt ADDED
@@ -0,0 +1,2 @@
 
 
 
1
+ CRIA UM SITE DE PEÇAS DE CARRO ESTILO O MERCADOLIVRE
2
+ ADD IMAGEM EFEITO FX E ZOOM DE VIDA AO SITE