Hugging Face's logo

Spaces:
cleison3508
/
cleison3508ar4final
Running

App Files Community
1
cleison3508 commited on
Commit
617539a
·
verified ·
1 Parent(s): 5a3dba2

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +703 -19
  3. prompts.txt +7 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Cleison3508ar4final
3
- emoji: 📚
4
- colorFrom: blue
5
- colorTo: gray
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: cleison3508ar4final
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: blue
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,703 @@
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
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Proteção Veicular - Proteção Completa para Carro e Moto</title>
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10
+ <style>
11
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
12
+
13
+ body {
14
+ font-family: 'Poppins', sans-serif;
15
+ background-color: #f8f8f8;
16
+ }
17
+
18
+ .gold-bg {
19
+ background-color: #D4AF37;
20
+ }
21
+
22
+ .gold-border {
23
+ border: 3px solid #D4AF37;
24
+ }
25
+
26
+ .gold-text {
27
+ color: #D4AF37;
28
+ }
29
+
30
+ .black-bg {
31
+ background-color: #000;
32
+ }
33
+
34
+ .white-text {
35
+ color: #fff;
36
+ }
37
+
38
+ .benefit-card {
39
+ transition: all 0.3s ease;
40
+ }
41
+
42
+ .benefit-card:hover {
43
+ transform: translateY(-5px);
44
+ box-shadow: 0 10px 20px rgba(212, 175, 55, 0.2);
45
+ }
46
+
47
+ .hero-section {
48
+ background: linear-gradient(rgba(212, 175, 55, 0.8), rgba(212, 175, 55, 0.8)), url('https://images.unsplash.com/photo-1494972308805-463bc619d34e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1473&q=80');
49
+ background-size: cover;
50
+ background-position: center;
51
+ }
52
+
53
+ .moto-hero {
54
+ background: linear-gradient(rgba(212, 175, 55, 0.8), rgba(212, 175, 55, 0.8)), url('https://images.unsplash.com/photo-1558981806-ec527fa84c39?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');
55
+ background-size: cover;
56
+ background-position: center;
57
+ }
58
+
59
+ .pulse {
60
+ animation: pulse 2s infinite;
61
+ }
62
+
63
+ @keyframes pulse {
64
+ 0% {
65
+ transform: scale(0.95);
66
+ box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
67
+ }
68
+
69
+ 70% {
70
+ transform: scale(1);
71
+ box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
72
+ }
73
+
74
+ 100% {
75
+ transform: scale(0.95);
76
+ box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
77
+ }
78
+ }
79
+
80
+ .car-feature {
81
+ background: linear-gradient(rgba(212, 175, 55, 0.1), rgba(212, 175, 55, 0.1)), url('https://images.unsplash.com/photo-1503376780353-7e6692767b70?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');
82
+ background-size: cover;
83
+ background-position: center;
84
+ }
85
+
86
+ .moto-feature {
87
+ background: linear-gradient(rgba(212, 175, 55, 0.1), rgba(212, 175, 55, 0.1)), url('https://images.unsplash.com/photo-1580537659466-0a9bfa916a54?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80');
88
+ background-size: cover;
89
+ background-position: center;
90
+ }
91
+
92
+ .tab-button {
93
+ transition: all 0.3s ease;
94
+ }
95
+
96
+ .tab-button.active {
97
+ background-color: #D4AF37;
98
+ color: #000;
99
+ font-weight: 600;
100
+ }
101
+
102
+ .tab-content {
103
+ display: none;
104
+ }
105
+
106
+ .tab-content.active {
107
+ display: block;
108
+ animation: fadeIn 0.5s ease;
109
+ }
110
+
111
+ @keyframes fadeIn {
112
+ from {
113
+ opacity: 0;
114
+ }
115
+
116
+ to {
117
+ opacity: 1;
118
+ }
119
+ }
120
+
121
+ .whatsapp-btn {
122
+ background-color: #25D366;
123
+ color: white;
124
+ }
125
+
126
+ .whatsapp-btn:hover {
127
+ background-color: #128C7E;
128
+ }
129
+
130
+ .benefit-category {
131
+ border-left: 4px solid #D4AF37;
132
+ padding-left: 1rem;
133
+ margin-bottom: 1.5rem;
134
+ }
135
+
136
+ .benefit-category-title {
137
+ font-size: 1.25rem;
138
+ font-weight: 600;
139
+ color: #D4AF37;
140
+ margin-bottom: 0.5rem;
141
+ }
142
+ </style>
143
+ </head>
144
+
145
+ <body>
146
+ <!-- Header with Logo -->
147
+ <header class="gold-bg shadow-md">
148
+ <div class="container mx-auto px-4 py-4 flex justify-between items-center">
149
+ <div class="flex items-center">
150
+ <div class="gold-border rounded-full p-2 black-bg flex items-center justify-center mr-3">
151
+ <div class="text-2xl font-bold white-text">AR4</div>
152
+ </div>
153
+ <h1 class="text-2xl font-bold">
154
+ <span class="gold-text">AR4</span>
155
+ <span class="text-black"> Proteção Veicular</span>
156
+ </h1>
157
+ </div>
158
+ <div>
159
+ <a href="https://wa.me/558591886821"
160
+ class="whatsapp-btn px-6 py-2 rounded-full font-medium transition duration-300 flex items-center">
161
+ <i class="fab fa-whatsapp mr-2"></i> Fale Conosco
162
+ </a>
163
+ </div>
164
+ </div>
165
+ </header>
166
+
167
+ <!-- Hero Section -->
168
+ <section class="hero-section text-black py-20">
169
+ <div class="container mx-auto px-4 text-center">
170
+ <h1 class="text-4xl md:text-5xl font-bold mb-6">Proteção Completa para Carro e Moto</h1>
171
+ <p class="text-xl mb-8 max-w-2xl mx-auto">Garanta tranquilidade e segurança para seu carro ou moto com a AR4, a
172
+ melhor proteção veicular do mercado.</p>
173
+ <div class="flex justify-center space-x-4 mb-8">
174
+ <a href="#car-protection"
175
+ class="bg-black text-white px-6 py-3 rounded-full font-medium hover:bg-gray-800 transition duration-300">
176
+ <i class="fas fa-car mr-2"></i> Proteção para Carros
177
+ </a>
178
+ <a href="#moto-protection"
179
+ class="bg-black text-white px-6 py-3 rounded-full font-medium hover:bg-gray-800 transition duration-300">
180
+ <i class="fas fa-motorcycle mr-2"></i> Proteção para Motos
181
+ </a>
182
+ </div>
183
+ <a href="https://wa.me/558591886821"
184
+ class="whatsapp-btn px-8 py-4 rounded-full font-bold text-lg transition duration-300 pulse inline-block">
185
+ FAZER COTAÇÃO AGORA <i class="fas fa-arrow-right ml-2"></i>
186
+ </a>
187
+ </div>
188
+ </section>
189
+
190
+ <!-- Protection Tabs -->
191
+ <section class="py-16 bg-white">
192
+ <div class="container mx-auto px-4">
193
+ <div class="max-w-4xl mx-auto">
194
+ <div class="flex flex-wrap border-b border-gray-200 mb-8">
195
+ <button class="tab-button active px-6 py-3 text-lg font-medium" data-tab="car-tab">
196
+ <i class="fas fa-car mr-2"></i> Proteção para Carros
197
+ </button>
198
+ <button class="tab-button px-6 py-3 text-lg font-medium" data-tab="moto-tab">
199
+ <i class="fas fa-motorcycle mr-2"></i> Proteção para Motos
200
+ </button>
201
+ </div>
202
+
203
+ <!-- Car Protection Content -->
204
+ <div id="car-tab" class="tab-content active">
205
+ <div class="car-feature py-12 text-white rounded-lg mb-8">
206
+ <div class="container mx-auto px-4">
207
+ <div class="max-w-3xl mx-auto text-center bg-black bg-opacity-70 p-8 rounded-lg">
208
+ <h2 class="text-3xl font-bold mb-6 gold-text">Seu Carro Protegido com Excelência</h2>
209
+ <p class="text-lg mb-8">Na AR4, entendemos que seu carro é mais do que um veículo - é um investimento
210
+ valioso. Nossa proteção veicular oferece a segurança que você e seu carro merecem.</p>
211
+ <a href="https://wa.me/558591886821?text=Olá,%20gostaria%20de%20uma%20cotação%20para%20proteção%20veicular%20de%20carro"
212
+ class="whatsapp-btn px-6 py-3 rounded-full font-medium transition duration-300 inline-flex items-center">
213
+ <i class="fab fa-whatsapp mr-2"></i> Solicitar Cotação
214
+ </a>
215
+ </div>
216
+ </div>
217
+ </div>
218
+
219
+ <div class="mb-16">
220
+ <h3 class="text-2xl font-bold mb-6 text-center gold-text">Benefícios Exclusivos para Carros</h3>
221
+
222
+ <!-- Categoria: Proteção contra Roubos e Furtos -->
223
+ <div class="benefit-category">
224
+ <h4 class="benefit-category-title">
225
+ <i class="fas fa-shield-alt mr-2"></i> Proteção contra Roubos e Furtos
226
+ </h4>
227
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
228
+ <div class="flex items-start bg-gray-100 p-4 rounded-lg benefit-card">
229
+ <div class="gold-text text-xl mr-4 mt-1">
230
+ <i class="fas fa-check-circle"></i>
231
+ </div>
232
+ <div>
233
+ <h3 class="font-bold mb-2">Cobertura Total</h3>
234
+ <p class="text-gray-700">Proteção completa contra roubos e furtos em qualquer situação.</p>
235
+ </div>
236
+ </div>
237
+
238
+ <div class="flex items-start bg-gray-100 p-4 rounded-lg benefit-card">
239
+ <div class="gold-text text-xl mr-4 mt-1">
240
+ <i class="fas fa-check-circle"></i>
241
+ </div>
242
+ <div>
243
+ <h3 class="font-bold mb-2">Indenização Integral</h3>
244
+ <p class="text-gray-700">Valor de mercado garantido conforme tabela FIPE.</p>
245
+ </div>
246
+ </div>
247
+ </div>
248
+ </div>
249
+
250
+ <!-- Categoria: Danos e Acidentes -->
251
+ <div class="benefit-category">
252
+ <h4 class="benefit-category-title">
253
+ <i class="fas fa-car-crash mr-2"></i> Danos e Acidentes
254
+ </h4>
255
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
256
+ <div class="flex items-start bg-gray-100 p-4 rounded-lg benefit-card">
257
+ <div class="gold-text text-xl mr-4 mt-1">
258
+ <i class="fas fa-check-circle"></i>
259
+ </div>
260
+ <div>
261
+ <h3 class="font-bold mb-2">Colisões e Capotamentos</h3>
262
+ <p class="text-gray-700">Cobertura para danos causados por acidentes de trânsito.</p>
263
+ </div>
264
+ </div>
265
+
266
+ <div class="flex items-start bg-gray-100 p-4 rounded-lg benefit-card">
267
+ <div class="gold-text text-xl mr-4 mt-1">
268
+ <i class="fas fa-check-circle"></i>
269
+ </div>
270
+ <div>
271
+ <h3 class="font-bold mb-2">Fenômenos Naturais</h3>
272
+ <p class="text-gray-700">Proteção contra chuvas, granizo, ventos fortes e outros eventos climáticos.</p>
273
+ </div>
274
+ </div>
275
+ </div>
276
+ </div>
277
+
278
+ <!-- Categoria: Assistência 24 Horas -->
279
+ <div class="benefit-category">
280
+ <h4 class="benefit-category-title">
281
+ <i class="fas fa-clock mr-2"></i> Assistência 24 Horas
282
+ </h4>
283
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
284
+ <div class="flex items-start bg-gray-100 p-4 rounded-lg benefit-card">
285
+ <div class="gold-text text-xl mr-4 mt-1">
286
+ <i class="fas fa-check-circle"></i>
287
+ </div>
288
+ <div>
289
+ <h3 class="font-bold mb-2">Guincho Ilimitado</h3>
290
+ <p class="text-gray-700">Assistência mecânica e guincho disponível 24h em todo o Brasil.</p>
291
+ </div>
292
+ </div>
293
+
294
+ <div class="flex items-start bg-gray-100 p-4 rounded-lg benefit-card">
295
+ <div class="gold-text text-xl mr-4 mt-1">
296
+ <i class="fas fa-check-circle"></i>
297
+ </div>
298
+ <div>
299
+ <h3 class="font-bold mb-2">Carro Reserva</h3>
300
+ <p class="text-gray-700">Veículo reserva em caso de sinistro para você não ficar sem transporte.</p>
301
+ </div>
302
+ </div>
303
+ </div>
304
+ </div>
305
+
306
+ <!-- Categoria: Proteção Jurídica -->
307
+ <div class="benefit-category">
308
+ <h4 class="benefit-category-title">
309
+ <i class="fas fa-gavel mr-2"></i> Proteção Jurídica
310
+ </h4>
311
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
312
+ <div class="flex items-start bg-gray-100 p-4 rounded-lg benefit-card">
313
+ <div class="gold-text text-xl mr-4 mt-1">
314
+ <i class="fas fa-check-circle"></i>
315
+ </div>
316
+ <div>
317
+ <h3 class="font-bold mb-2">Defesa Jurídica</h3>
318
+ <p class="text-gray-700">Assistência jurídica em casos de acidentes com terceiros.</p>
319
+ </div>
320
+ </div>
321
+
322
+ <div class="flex items-start bg-gray-100 p-4 rounded-lg benefit-card">
323
+ <div class="gold-text text-xl mr-4 mt-1">
324
+ <i class="fas fa-check-circle"></i>
325
+ </div>
326
+ <div>
327
+ <h3 class="font-bold mb-2">Cobertura a Terceiros</h3>
328
+ <p class="text-gray-700">Proteção financeira em caso de danos causados a terceiros.</p>
329
+ </div>
330
+ </div>
331
+ </div>
332
+ </div>
333
+
334
+ <!-- Categoria: Benefícios Adicionais -->
335
+ <div class="benefit-category">
336
+ <h4 class="benefit-category-title">
337
+ <i class="fas fa-star mr-2"></i> Benefícios Adicionais
338
+ </h4>
339
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
340
+ <div class="flex items-start bg-gray-100 p-4 rounded-lg benefit-card">
341
+ <div class="gold-text text-xl mr-4 mt-1">
342
+ <i class="fas fa-check-circle"></i>
343
+ </div>
344
+ <div>
345
+ <h3 class="font-bold mb-2">Sem Franquia</h3>
346
+ <p class="text-gray-700">Nossos planos não possuem franquia para acionamento.</p>
347
+ </div>
348
+ </div>
349
+
350
+ <div class="flex items-start bg-gray-100 p-4 rounded-lg benefit-card">
351
+ <div class="gold-text text-xl mr-4 mt-1">
352
+ <i class="fas fa-check-circle"></i>
353
+ </div>
354
+ <div>
355
+ <h3 class="font-bold mb-2">Sem Limite de Idade</h3>
356
+ <p class="text-gray-700">Cobertura para veículos de qualquer ano de fabricação.</p>
357
+ </div>
358
+ </div>
359
+ </div>
360
+ </div>
361
+ </div>
362
+ </div>
363
+
364
+ <!-- Moto Protection Content -->
365
+ <div id="moto-tab" class="tab-content">
366
+ <div class="moto-feature py-12 text-white rounded-lg mb-8">
367
+ <div class="container mx-auto px-4">
368
+ <div class="max-w-3xl mx-auto text-center bg-black bg-opacity-70 p-8 rounded-lg">
369
+ <h2 class="text-3xl font-bold mb-6 gold-text">Sua Moto Protegida com Excelência</h2>
370
+ <p class="text-lg mb-8">Proteção especializada para motociclistas, coberturas adaptadas às
371
+ necessidades dos motociclistas. Garanta a segurança da sua moto em qualquer situação.</p>
372
+ <a href="https://wa.me/558591886821?text=Olá,%20gostaria%20de%20uma%20cotação%20para%20proteção%20veicular%20de%20moto"
373
+ class="whatsapp-btn px-6 py-3 rounded-full font-medium transition duration-300 inline-flex items-center">
374
+ <i class="fab fa-whatsapp mr-2"></i> Solicitar Cotação
375
+ </a>
376
+ </div>
377
+ </div>
378
+ </div>
379
+
380
+ <div class="mb-16">
381
+ <h3 class="text-2xl font-bold mb-6 text-center gold-text">Benefícios Exclusivos para Motos</h3>
382
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
383
+ <div class="flex items-start bg-gray-100 p-4 rounded-lg">
384
+ <div class="gold-text text-xl mr-4 mt-1">
385
+ <i class="fas fa-check-circle"></i>
386
+ </div>
387
+ <div>
388
+ <h3 class="font-bold mb-2">Proteção contra roubos</h3>
389
+ <p class="text-gray-700">Cobertura especial para furtos e roubos de motocicletas.</p>
390
+ </div>
391
+ </div>
392
+
393
+ <div class="flex items-start bg-gray-100 p-4 rounded-lg">
394
+ <div class="gold-text text-xl mr-4 mt-1">
395
+ <i class="fas fa-check-circle"></i>
396
+ </div>
397
+ <div>
398
+ <h3 class="font-bold mb-2">Danos parciais and totais</h3>
399
+ <p class="text-gray-700">Proteção para colisões, quedas e outros acidentes.</p>
400
+ </div>
401
+ </div>
402
+
403
+ <div class="flex items-start bg-gray-100 p-4 rounded-lg">
404
+ <div class="gold-text text-xl mr-4 mt-1">
405
+ <i class="fas fa-check-circle"></i>
406
+ </div>
407
+ <div>
408
+ <h3 class="font-bold mb-2">Assistência 24h para motos</h3>
409
+ <p class="text-gray-700">Guincho especializado e assistência em todo o Brasil.</p>
410
+ </div>
411
+ </div>
412
+
413
+ <div class="flex items-start bg-gray-100 p-4 rounded-lg">
414
+ <div class="gold-text text-xl mr-4 mt-1">
415
+ <i class="fas fa-check-circle"></i>
416
+ </div>
417
+ <div>
418
+ <h3 class="font-bold mb-2">Proteção para acessórios</h3>
419
+ <p class="text-gray-700">Cobertura para capacetes, alarmes e outros acessórios.</p>
420
+ </div>
421
+ </div>
422
+
423
+ <div class="flex items-start bg-gray-100 p-4 rounded-lg">
424
+ <div class="gold-text text-xl mr-4 mt-1">
425
+ <i class="fas fa-check-circle"></i>
426
+ </div>
427
+ <div>
428
+ <h3 class="font-bold mb-2">Indenização integral</h3>
429
+ <p class="text-gray-700">Valor de mercado garantido para sua motocicleta.</p>
430
+ </div>
431
+ </div>
432
+
433
+ <div class="flex items-start bg-gray-100 p-4 rounded-lg">
434
+ <div class="gold-text text-xl mr-4 mt-1">
435
+ <i class="fas fa-check-circle"></i>
436
+ </div>
437
+ <div>
438
+ <h3 class="font-bold mb-2">Assistência para o motociclista</h3>
439
+ <p class="text-gray-700">Auxílio em caso de acidente pessoal.</p>
440
+ </div>
441
+ </div>
442
+ </div>
443
+ </div>
444
+ </div>
445
+ </div>
446
+ </div>
447
+ </section>
448
+
449
+ <!-- Why Choose AR4 -->
450
+ <section class="py-16 gold-bg">
451
+ <div class="container mx-auto px-4">
452
+ <div class="text-center mb-12">
453
+ <h2 class="text-3xl font-bold mb-4">Por que escolher a AR4 Proteção Veicular?</h2>
454
+ <p class="text-lg text-black max-w-3xl mx-auto">Com a AR4, você garanta uma proteção completa para seu carro ou
455
+ moto, com benefícios exclusivos e atendimento personalizado, tudo com a qualidade e confiança que só a AR4
456
+ oferece.</p>
457
+ </div>
458
+
459
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
460
+ <div class="bg-white bg-opacity-90 p-8 rounded-lg benefit-card">
461
+ <div class="text-4xl gold-text mb-4">
462
+ <i class="fas fa-shield-alt"></i>
463
+ </div>
464
+ <h3 class="text-xl font-bold mb-3">Proteção Total</h3>
465
+ <p class="text-gray-700">Cobertura completa contra roubos, furtos, danos and fenômenos naturais, garantindo que
466
+ você esteja protegido em qualquer situação.</p>
467
+ </div>
468
+
469
+ <div class="bg-white bg-opacity-90 p-8 rounded-lg benefit-card">
470
+ <div class="text-4xl gold-text mb-4">
471
+ <i class="fas fa-headset"></i>
472
+ </div>
473
+ <h3 class="text-xl font-bold mb-3">Atendimento 24h</h3>
474
+ <p class="text-gray-700">Assistência disponível 24 horas por dia, 7 dias por semana, em todo o território
475
+ nacional, para quando você mais precisar.</p>
476
+ </div>
477
+
478
+ <div class="bg-white bg-opacity-90 p-8 rounded-lg benefit-card">
479
+ <div class="text-4xl gold-text mb-4">
480
+ <i class="fas fa-car"></i>
481
+ </div>
482
+ <h3 class="text-xl font-bold mb-3">Sem Burocracia</h3>
483
+ <p class="text-gray-700">Processo simples e rápido, sem consulta ao SPC/Serasa, para que você possa garantir
484
+ sua proteção sem complicações.</p>
485
+ </div>
486
+ </div>
487
+ </div>
488
+ </section>
489
+
490
+ <!-- Testimonials -->
491
+ <section class="py-16 gold-bg">
492
+ <div class="container mx-auto px-4">
493
+ <h2 class="text-3xl font-bold text-center mb-12">O Que Nossos Clientes Dizem</h2>
494
+
495
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
496
+ <div class="bg-white p-6 rounded-lg shadow-md">
497
+ <div class="flex items-center mb-4">
498
+ <div class="text-2xl gold-text mr-3">
499
+ <i class="fas fa-quote-left"></i>
500
+ </div>
501
+ <div>
502
+ <h4 class="font-bold">Carlos Silva</h4>
503
+ <div class="flex gold-text">
504
+ <i class="fas fa-star"></i>
505
+ <i class="fas fa-star"></i>
506
+ <i class="fas fa-star"></i>
507
+ <i class="fas fa-star"></i>
508
+ <i class="fas fa-star"></i>
509
+ </div>
510
+ </div>
511
+ </div>
512
+ <p class="text-gray-700">"Quando precisei da AR4 após um acidente, o atendimento foi rápido e eficiente.
513
+ Recomendo a todos!"</p>
514
+ </div>
515
+
516
+ <div class="bg-white p-6 rounded-lg shadow-md">
517
+ <div class="flex items-center mb-4">
518
+ <div class="text-2xl gold-text mr-3">
519
+ <i class="fas fa-quote-left"></i>
520
+ </div>
521
+ <div>
522
+ <h4 class="font-bold">Ana Paula</h4>
523
+ <div class="flex gold-text">
524
+ <i class="fas fa-star"></i>
525
+ <i class="fas fa-star"></i>
526
+ <i class="fas fa-star"></i>
527
+ <i class="fas fa-star"></i>
528
+ <i class="fas fa-star"></i>
529
+ </div>
530
+ </div>
531
+ </div>
532
+ <p class="text-gray-700">"A cobertura da AR4 é completa e o preço justo. Melhor proteção veicular que já
533
+ contratei."</p>
534
+ </div>
535
+
536
+ <div class="bg-white p-6 rounded-lg shadow-md">
537
+ <div class="flex items-center mb-4">
538
+ <div class="text-2xl gold-text mr-3">
539
+ <i class="fas fa-quote-left"></i>
540
+ </div>
541
+ <div>
542
+ <h4 class="font-bold">Roberto Almeida</h4>
543
+ <div class="flex gold-text">
544
+ <i class="fas fa-star"></i>
545
+ <i class="fas fa-star"></i>
546
+ <i class="fas fa-star"></i>
547
+ <i class="fas fa-star"></i>
548
+ <i class="fas fa-star"></i>
549
+ </div>
550
+ </div>
551
+ </div>
552
+ <p class="text-gray-700">"O guincho 24h já me salvou duas vezes. Serviço de qualidade que vale cada centavo."
553
+ </p>
554
+ </div>
555
+ </div>
556
+ </div>
557
+ </section>
558
+
559
+ <!-- Moto Hero Section -->
560
+ <section class="moto-hero text-black py-20">
561
+ <div class="container mx-auto px-4 text-center">
562
+ <h1 class="text-4xl md:text-5xl font-bold mb-6">Proteção Especializada para Sua Moto</h1>
563
+ <p class="text-xl mb-8 max-w-2xl mx-auto">Coberturas adaptadas para motociclistas, com benefícios exclusivos e
564
+ assistência especializada.</p>
565
+ <a href="https://wa.me/558591886821?text=Olá,%20gostaria%20de%20uma%20cotação%20para%20proteção%20veicular%20de%20moto"
566
+ class="whatsapp-btn px-8 py-4 rounded-full font-bold text-lg transition duration-300 pulse inline-block">
567
+ COTAÇÃO PARA MOTO <i class="fas fa-arrow-right ml-2"></i>
568
+ </a>
569
+ </div>
570
+ </section>
571
+
572
+ <!-- CTA Section -->
573
+ <section class="py-16 bg-black text-white">
574
+ <div class="container mx-auto px-4 text-center">
575
+ <h2 class="text-3xl font-bold mb-6 gold-text">Não deixe seu veículo desprotegido!</h2>
576
+ <p class="text-xl mb-8 max-w-2xl mx-auto">Proteja seu carro ou moto com a AR4 e tenha tranquilidade no seu dia a
577
+ dia.</p>
578
+ <div class="flex flex-wrap justify-center gap-4 mb-8">
579
+ <a href="https://wa.me/558591886821?text=Olá,%20gostaria%20de%20uma%20cotação%20para%20proteção%20veicular%20de%20carro"
580
+ class="whatsapp-btn px-6 py-3 rounded-full font-medium transition duration-300">
581
+ <i class="fas fa-car mr-2"></i> Cotação para Carro
582
+ </a>
583
+ <a href="https://wa.me/558591886821?text=Olá,%20gostaria%20de%20uma%20cotação%20para%20proteção%20veicular%20de%20moto"
584
+ class="whatsapp-btn px-6 py-3 rounded-full font-medium transition duration-300">
585
+ <i class="fas fa-motorcycle mr-2"></i> Cotação para Moto
586
+ </a>
587
+ </div>
588
+ <a href="https://wa.me/558591886821"
589
+ class="whatsapp-btn px-8 py-4 rounded-full font-bold text-lg transition duration-300 inline-block">
590
+ <i class="fab fa-whatsapp mr-2"></i> FALE COM NOSSO TIME
591
+ </a>
592
+ </div>
593
+ </section>
594
+
595
+ <!-- Contact -->
596
+ <section id="contact" class="py-16 gold-bg">
597
+ <div class="container mx-auto px-4">
598
+ <div class="max-w-4xl mx-auto bg-black bg-opacity-80 rounded-lg p-8 shadow-md text-white">
599
+ <h2 class="text-3xl font-bold text-center mb-8 gold-text">Entre em Contato</h2>
600
+
601
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
602
+ <div>
603
+ <h3 class="text-xl font-bold mb-4">Informações de Contato</h3>
604
+ <div class="mb-4">
605
+ <div class="flex items-start mb-3">
606
+ <div class="gold-text text-xl mr-3">
607
+ <i class="fas fa-map-marker-alt"></i>
608
+ </div>
609
+ <div>
610
+ <p class="font-medium">Endereço</p>
611
+ <p class="text-gray-300">Rua Barbosa de Freitas, 951 - Aldeota, Fortaleza-CE</p>
612
+ </div>
613
+ </div>
614
+
615
+ <div class="flex items-start mb-3">
616
+ <div class="gold-text text-xl mr-3">
617
+ <i class="fab fa-whatsapp"></i>
618
+ </div>
619
+ <div>
620
+ <p class="font-medium">WhatsApp</p>
621
+ <a href="https://wa.me/558591886821" class="text-gray-300 hover:underline">(85) 91886-821</a>
622
+ </div>
623
+ </div>
624
+ </div>
625
+ </div>
626
+
627
+ <div>
628
+ <h3 class="text-xl font-bold mb-4">Mande uma mensagem</h3>
629
+ <p class="text-gray-300 mb-4">Tire suas dúvidas ou solicite uma cotação personalizada para seu carro ou
630
+ moto.</p>
631
+ <div class="flex flex-wrap gap-3">
632
+ <a href="https://wa.me/558591886821?text=Olá,%20gostaria%20de%20uma%20cotação%20para%20proteção%20veicular%20de%20carro"
633
+ class="whatsapp-btn px-4 py-2 rounded-full font-medium transition duration-300 inline-flex items-center text-sm">
634
+ <i class="fas fa-car mr-2"></i> Carro
635
+ </a>
636
+ <a href="https://wa.me/558591886821?text=Olá,%20gostaria%20de%20uma%20cotação%20para%20proteção%20veicular%20de%20moto"
637
+ class="whatsapp-btn px-4 py-2 rounded-full font-medium transition duration-300 inline-flex items-center text-sm">
638
+ <i class="fas fa-motorcycle mr-2"></i> Moto
639
+ </a>
640
+ <a href="https://wa.me/558591886821"
641
+ class="whatsapp-btn px-4 py-2 rounded-full font-medium transition duration-300 inline-flex items-center text-sm">
642
+ <i class="fas fa-question mr-2"></i> Dúvidas
643
+ </a>
644
+ </div>
645
+ </div>
646
+ </div>
647
+ </div>
648
+ </div>
649
+ </section>
650
+
651
+ <!-- Footer -->
652
+ <footer class="bg-black text-white py-8">
653
+ <div class="container mx-auto px-4">
654
+ <div class="flex flex-col md:flex-row justify-between items-center">
655
+ <div class="flex items-center mb-4 md:mb-0">
656
+ <div class="gold-border rounded-full p-2 black-bg flex items-center justify-center mr-3">
657
+ <div class="text-xl font-bold white-text">AR4</div>
658
+ </div>
659
+ <div>
660
+ <h3 class="text-xl font-bold gold-text">Proteção Veicular</h3>
661
+ <p class="text-gray-400 text-sm">Proteção para carros e motos</p>
662
+ </div>
663
+ </div>
664
+
665
+ <div class="text-gray-400 text-sm text-center md:text-right">
666
+ <p>© 2023 Proteção Veicular. Todos os direitos reservados.</p>
667
+ <p>Rua Barbosa de Freitas, 951 - Aldeota, Fortaleza-CE</p>
668
+ <p>WhatsApp: (85) 91886-821</p>
669
+ </div>
670
+ </div>
671
+ </div>
672
+ </footer>
673
+
674
+ <!-- Floating WhatsApp Button -->
675
+ <a href="https://wa.me/558591886821"
676
+ class="fixed bottom-6 right-6 bg-[#25D366] text-white w-16 h-16 rounded-full flex items-center justify-center text-3xl shadow-lg hover:bg-[#128C7E] transition duration-300 z-50">
677
+ <i class="fab fa-whatsapp"></i>
678
+ </a>
679
+
680
+ <script>
681
+ // Tab functionality
682
+ document.addEventListener('DOMContentLoaded', function() {
683
+ const tabButtons = document.querySelectorAll('.tab-button');
684
+
685
+ tabButtons.forEach(button => {
686
+ button.addEventListener('click', function() {
687
+ // Remove active class from all buttons and tabs
688
+ document.querySelectorAll('.tab-button').forEach(btn => btn.classList.remove('active'));
689
+ document.querySelectorAll('.tab-content').forEach(tab => tab.classList.remove('active'));
690
+
691
+ // Add active class to clicked button
692
+ this.classList.add('active');
693
+
694
+ // Show corresponding tab
695
+ const tabId = this.getAttribute('data-tab');
696
+ document.getElementById(tabId).classList.add('active');
697
+ });
698
+ });
699
+ });
700
+ </script>
701
+ <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=cleison3508/cleison3508ar4final" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
702
+
703
+ </html>
prompts.txt ADDED
@@ -0,0 +1,7 @@
 
 
 
 
 
 
 
 
1
+ tire o ar do cabeçalho e o ra-4 do rodape
2
+ coloque em todos os botões clicáveis meu link valido e fucional http://wa.me/558591886821 com a cor de preenchimento verde
3
+ colocar AR EM TODO O ESPAÇO QUE TEM -4 JUNTOS
4
+ onde estiver ar substituir po ar4
5
+ o numero do telefone no final da pagina subistituir por 85991886821
6
+ organizar as categorias em beneficios exclusivos para carros
7
+ torne os botões de whatzap fucionais, quando alguem clicar ser direcionado direto para o meu zap https://wa.me/558591886821