Hugging Face's logo

Spaces:
cleison3508
/
ar4atual
Running

App Files Community
cleison3508 commited on
Commit
c2c1e88
·
verified ·
1 Parent(s): ff045f6

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +568 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Ar4atual
3
- emoji: 🏃
4
- colorFrom: purple
5
- colorTo: indigo
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: ar4atual
3
+ emoji: 🐳
4
+ colorFrom: yellow
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,568 @@
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>AR-4 Proteção Veicular - Proteção Completa para Seu Veículo e Moto</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
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Poppins', sans-serif;
14
+ background-color: #f8f8f8;
15
+ }
16
+
17
+ .gold-bg {
18
+ background-color: #D4AF37;
19
+ }
20
+
21
+ .gold-border {
22
+ border: 3px solid #D4AF37;
23
+ }
24
+
25
+ .gold-text {
26
+ color: #D4AF37;
27
+ }
28
+
29
+ .black-bg {
30
+ background-color: #000;
31
+ }
32
+
33
+ .white-text {
34
+ color: #fff;
35
+ }
36
+
37
+ .benefit-card {
38
+ transition: all 0.3s ease;
39
+ }
40
+
41
+ .benefit-card:hover {
42
+ transform: translateY(-5px);
43
+ box-shadow: 0 10px 20px rgba(212, 175, 55, 0.2);
44
+ }
45
+
46
+ .hero-section {
47
+ 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');
48
+ background-size: cover;
49
+ background-position: center;
50
+ }
51
+
52
+ .moto-hero {
53
+ 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');
54
+ background-size: cover;
55
+ background-position: center;
56
+ }
57
+
58
+ .pulse {
59
+ animation: pulse 2s infinite;
60
+ }
61
+
62
+ @keyframes pulse {
63
+ 0% {
64
+ transform: scale(0.95);
65
+ box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
66
+ }
67
+
68
+ 70% {
69
+ transform: scale(1);
70
+ box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
71
+ }
72
+
73
+ 100% {
74
+ transform: scale(0.95);
75
+ box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
76
+ }
77
+ }
78
+
79
+ .car-feature {
80
+ 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');
81
+ background-size: cover;
82
+ background-position: center;
83
+ }
84
+
85
+ .moto-feature {
86
+ 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');
87
+ background-size: cover;
88
+ background-position: center;
89
+ }
90
+
91
+ .tab-button {
92
+ transition: all 0.3s ease;
93
+ }
94
+
95
+ .tab-button.active {
96
+ background-color: #D4AF37;
97
+ color: #000;
98
+ font-weight: 600;
99
+ }
100
+
101
+ .tab-content {
102
+ display: none;
103
+ }
104
+
105
+ .tab-content.active {
106
+ display: block;
107
+ animation: fadeIn 0.5s ease;
108
+ }
109
+
110
+ @keyframes fadeIn {
111
+ from { opacity: 0; }
112
+ to { opacity: 1; }
113
+ }
114
+ </style>
115
+ </head>
116
+ <body>
117
+ <!-- Header with Logo -->
118
+ <header class="gold-bg shadow-md">
119
+ <div class="container mx-auto px-4 py-4 flex justify-between items-center">
120
+ <div class="flex items-center">
121
+ <div class="gold-border rounded-full p-2 black-bg flex items-center justify-center mr-3">
122
+ <div class="text-2xl font-bold white-text">AR</div>
123
+ <div class="text-2xl font-bold gold-text">-4</div>
124
+ </div>
125
+ <h1 class="text-2xl font-bold">
126
+ <span class="black-bg white-text px-2">AR</span>
127
+ <span class="gold-text">-4</span>
128
+ <span class="text-black"> Proteção Veicular</span>
129
+ </h1>
130
+ </div>
131
+ <div>
132
+ <a href="#contact" class="bg-black text-white px-6 py-2 rounded-full font-medium hover:bg-gray-800 transition duration-300 flex items-center">
133
+ <i class="fab fa-whatsapp mr-2"></i> Fale Conosco
134
+ </a>
135
+ </div>
136
+ </div>
137
+ </header>
138
+
139
+ <!-- Hero Section -->
140
+ <section class="hero-section text-black py-20">
141
+ <div class="container mx-auto px-4 text-center">
142
+ <h1 class="text-4xl md:text-5xl font-bold mb-6">Proteção Completa para Seu Veículo e Moto</h1>
143
+ <p class="text-xl mb-8 max-w-2xl mx-auto">Garanta tranquilidade e segurança para seu carro ou moto com a AR-4, a melhor proteção veicular do mercado.</p>
144
+ <div class="flex justify-center space-x-4 mb-8">
145
+ <a href="#car-protection" class="bg-black text-white px-6 py-3 rounded-full font-medium hover:bg-gray-800 transition duration-300">
146
+ <i class="fas fa-car mr-2"></i> Proteção para Carros
147
+ </a>
148
+ <a href="#moto-protection" class="bg-black text-white px-6 py-3 rounded-full font-medium hover:bg-gray-800 transition duration-300">
149
+ <i class="fas fa-motorcycle mr-2"></i> Proteção para Motos
150
+ </a>
151
+ </div>
152
+ <a href="https://wa.me/558591886821" class="bg-black text-white px-8 py-4 rounded-full font-bold text-lg hover:bg-gray-800 transition duration-300 pulse inline-block">
153
+ FAZER COTAÇÃO AGORA <i class="fas fa-arrow-right ml-2"></i>
154
+ </a>
155
+ </div>
156
+ </section>
157
+
158
+ <!-- Protection Tabs -->
159
+ <section class="py-16 bg-white">
160
+ <div class="container mx-auto px-4">
161
+ <div class="max-w-4xl mx-auto">
162
+ <div class="flex flex-wrap border-b border-gray-200 mb-8">
163
+ <button class="tab-button active px-6 py-3 text-lg font-medium" data-tab="car-tab">
164
+ <i class="fas fa-car mr-2"></i> Proteção para Carros
165
+ </button>
166
+ <button class="tab-button px-6 py-3 text-lg font-medium" data-tab="moto-tab">
167
+ <i class="fas fa-motorcycle mr-2"></i> Proteção para Motos
168
+ </button>
169
+ </div>
170
+
171
+ <!-- Car Protection Content -->
172
+ <div id="car-tab" class="tab-content active">
173
+ <div class="car-feature py-12 text-white rounded-lg mb-8">
174
+ <div class="container mx-auto px-4">
175
+ <div class="max-w-3xl mx-auto text-center bg-black bg-opacity-70 p-8 rounded-lg">
176
+ <h2 class="text-3xl font-bold mb-6 gold-text">Seu Carro Protegido com Excelência</h2>
177
+ <p class="text-lg mb-8">Na AR-4, entendemos que seu carro é mais do que um veículo - é um investimento valioso. Nossa proteção veicular oferece a segurança que você e seu carro merecem.</p>
178
+ <a href="https://wa.me/558591886821" class="gold-bg text-black px-6 py-3 rounded-full font-medium hover:bg-[#c9a42f] transition duration-300 inline-flex items-center">
179
+ <i class="fab fa-whatsapp mr-2"></i> Solicitar Cotação
180
+ </a>
181
+ </div>
182
+ </div>
183
+ </div>
184
+
185
+ <div class="mb-16">
186
+ <h3 class="text-2xl font-bold mb-6 text-center gold-text">Benefícios Exclusivos para Carros</h3>
187
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
188
+ <div class="flex items-start bg-gray-100 p-4 rounded-lg">
189
+ <div class="gold-text text-xl mr-4 mt-1">
190
+ <i class="fas fa-check-circle"></i>
191
+ </div>
192
+ <div>
193
+ <h3 class="font-bold mb-2">Proteção contra furtos e roubos</h3>
194
+ <p class="text-gray-700">Seu veículo protegido em qualquer situação de furto ou roubo.</p>
195
+ </div>
196
+ </div>
197
+
198
+ <div class="flex items-start bg-gray-100 p-4 rounded-lg">
199
+ <div class="gold-text text-xl mr-4 mt-1">
200
+ <i class="fas fa-check-circle"></i>
201
+ </div>
202
+ <div>
203
+ <h3 class="font-bold mb-2">Fenômenos da natureza</h3>
204
+ <p class="text-gray-700">Cobertura para danos causados por chuvas, granizo, ventos fortes.</p>
205
+ </div>
206
+ </div>
207
+
208
+ <div class="flex items-start bg-gray-100 p-4 rounded-lg">
209
+ <div class="gold-text text-xl mr-4 mt-1">
210
+ <i class="fas fa-check-circle"></i>
211
+ </div>
212
+ <div>
213
+ <h3 class="font-bold mb-2">Cobertura a terceiros</h3>
214
+ <p class="text-gray-700">Proteção financeira em caso de danos a terceiros.</p>
215
+ </div>
216
+ </div>
217
+
218
+ <div class="flex items-start bg-gray-100 p-4 rounded-lg">
219
+ <div class="gold-text text-xl mr-4 mt-1">
220
+ <i class="fas fa-check-circle"></i>
221
+ </div>
222
+ <div>
223
+ <h3 class="font-bold mb-2">Cobertura 100% da tabela FIPE</h3>
224
+ <p class="text-gray-700">Valor de mercado garantido para seu veículo.</p>
225
+ </div>
226
+ </div>
227
+
228
+ <div class="flex items-start bg-gray-100 p-4 rounded-lg">
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">Carro reserva</h3>
234
+ <p class="text-gray-700">Em caso de sinistro, você não fica sem veículo.</p>
235
+ </div>
236
+ </div>
237
+
238
+ <div class="flex items-start bg-gray-100 p-4 rounded-lg">
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">Guincho 24h</h3>
244
+ <p class="text-gray-700">Assistência mecânica e guincho disponível a qualquer hora.</p>
245
+ </div>
246
+ </div>
247
+ </div>
248
+ </div>
249
+ </div>
250
+
251
+ <!-- Moto Protection Content -->
252
+ <div id="moto-tab" class="tab-content">
253
+ <div class="moto-feature py-12 text-white rounded-lg mb-8">
254
+ <div class="container mx-auto px-4">
255
+ <div class="max-w-3xl mx-auto text-center bg-black bg-opacity-70 p-8 rounded-lg">
256
+ <h2 class="text-3xl font-bold mb-6 gold-text">Sua Moto Protegida com Excelência</h2>
257
+ <p class="text-lg mb-8">Proteção especializada para motocicletas, com coberturas adaptadas às necessidades dos motociclistas. Garanta a segurança da sua moto em qualquer situação.</p>
258
+ <a href="https://wa.me/558591886821" class="gold-bg text-black px-6 py-3 rounded-full font-medium hover:bg-[#c9a42f] transition duration-300 inline-flex items-center">
259
+ <i class="fab fa-whatsapp mr-2"></i> Solicitar Cotação
260
+ </a>
261
+ </div>
262
+ </div>
263
+ </div>
264
+
265
+ <div class="mb-16">
266
+ <h3 class="text-2xl font-bold mb-6 text-center gold-text">Benefícios Exclusivos para Motos</h3>
267
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
268
+ <div class="flex items-start bg-gray-100 p-4 rounded-lg">
269
+ <div class="gold-text text-xl mr-4 mt-1">
270
+ <i class="fas fa-check-circle"></i>
271
+ </div>
272
+ <div>
273
+ <h3 class="font-bold mb-2">Proteção contra roubos</h3>
274
+ <p class="text-gray-700">Cobertura especial para furtos e roubos de motocicletas.</p>
275
+ </div>
276
+ </div>
277
+
278
+ <div class="flex items-start bg-gray-100 p-4 rounded-lg">
279
+ <div class="gold-text text-xl mr-4 mt-1">
280
+ <i class="fas fa-check-circle"></i>
281
+ </div>
282
+ <div>
283
+ <h3 class="font-bold mb-2">Danos parciais e totais</h3>
284
+ <p class="text-gray-700">Proteção para colisões, quedas e outros acidentes.</p>
285
+ </div>
286
+ </div>
287
+
288
+ <div class="flex items-start bg-gray-100 p-4 rounded-lg">
289
+ <div class="gold-text text-xl mr-4 mt-1">
290
+ <i class="fas fa-check-circle"></i>
291
+ </div>
292
+ <div>
293
+ <h3 class="font-bold mb-2">Assistência 24h para motos</h3>
294
+ <p class="text-gray-700">Guincho especializado e assistência em todo o Brasil.</p>
295
+ </div>
296
+ </div>
297
+
298
+ <div class="flex items-start bg-gray-100 p-4 rounded-lg">
299
+ <div class="gold-text text-xl mr-4 mt-1">
300
+ <i class="fas fa-check-circle"></i>
301
+ </div>
302
+ <div>
303
+ <h3 class="font-bold mb-2">Proteção para acessórios</h3>
304
+ <p class="text-gray-700">Cobertura para capacetes, alarmes e outros acessórios.</p>
305
+ </div>
306
+ </div>
307
+
308
+ <div class="flex items-start bg-gray-100 p-4 rounded-lg">
309
+ <div class="gold-text text-xl mr-4 mt-1">
310
+ <i class="fas fa-check-circle"></i>
311
+ </div>
312
+ <div>
313
+ <h3 class="font-bold mb-2">Indenização integral</h3>
314
+ <p class="text-gray-700">Valor de mercado garantido para sua motocicleta.</p>
315
+ </div>
316
+ </div>
317
+
318
+ <div class="flex items-start bg-gray-100 p-4 rounded-lg">
319
+ <div class="gold-text text-xl mr-4 mt-1">
320
+ <i class="fas fa-check-circle"></i>
321
+ </div>
322
+ <div>
323
+ <h3 class="font-bold mb-2">Assistência para o motociclista</h3>
324
+ <p class="text-gray-700">Auxílio em caso de acidente pessoal.</p>
325
+ </div>
326
+ </div>
327
+ </div>
328
+ </div>
329
+ </div>
330
+ </div>
331
+ </div>
332
+ </section>
333
+
334
+ <!-- Why Choose AR-4 -->
335
+ <section class="py-16 gold-bg">
336
+ <div class="container mx-auto px-4">
337
+ <div class="text-center mb-12">
338
+ <h2 class="text-3xl font-bold mb-4">Por que escolher a AR-4 Proteção Veicular?</h2>
339
+ <p class="text-lg text-black max-w-3xl mx-auto">Com a AR-4, você garante uma proteção completa para seu carro ou moto, com benefícios exclusivos e atendimento personalizado, tudo com a qualidade e confiança que só a AR-4 oferece.</p>
340
+ </div>
341
+
342
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
343
+ <div class="bg-white bg-opacity-90 p-8 rounded-lg benefit-card">
344
+ <div class="text-4xl gold-text mb-4">
345
+ <i class="fas fa-shield-alt"></i>
346
+ </div>
347
+ <h3 class="text-xl font-bold mb-3">Proteção Total</h3>
348
+ <p class="text-gray-700">Cobertura completa contra roubos, furtos, danos e fenômenos naturais, garantindo que você esteja protegido em qualquer situação.</p>
349
+ </div>
350
+
351
+ <div class="bg-white bg-opacity-90 p-8 rounded-lg benefit-card">
352
+ <div class="text-4xl gold-text mb-4">
353
+ <i class="fas fa-headset"></i>
354
+ </div>
355
+ <h3 class="text-xl font-bold mb-3">Atendimento 24h</h3>
356
+ <p class="text-gray-700">Assistência disponível 24 horas por dia, 7 dias por semana, em todo o território nacional, para quando você mais precisar.</p>
357
+ </div>
358
+
359
+ <div class="bg-white bg-opacity-90 p-8 rounded-lg benefit-card">
360
+ <div class="text-4xl gold-text mb-4">
361
+ <i class="fas fa-car"></i>
362
+ </div>
363
+ <h3 class="text-xl font-bold mb-3">Sem Burocracia</h3>
364
+ <p class="text-gray-700">Processo simples e rápido, sem consulta ao SPC/Serasa, para que você possa garantir sua proteção sem complicações.</p>
365
+ </div>
366
+ </div>
367
+ </div>
368
+ </section>
369
+
370
+ <!-- Testimonials -->
371
+ <section class="py-16 gold-bg">
372
+ <div class="container mx-auto px-4">
373
+ <h2 class="text-3xl font-bold text-center mb-12">O Que Nossos Clientes Dizem</h2>
374
+
375
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
376
+ <div class="bg-white p-6 rounded-lg shadow-md">
377
+ <div class="flex items-center mb-4">
378
+ <div class="text-2xl gold-text mr-3">
379
+ <i class="fas fa-quote-left"></i>
380
+ </div>
381
+ <div>
382
+ <h4 class="font-bold">Carlos Silva</h4>
383
+ <div class="flex gold-text">
384
+ <i class="fas fa-star"></i>
385
+ <i class="fas fa-star"></i>
386
+ <i class="fas fa-star"></i>
387
+ <i class="fas fa-star"></i>
388
+ <i class="fas fa-star"></i>
389
+ </div>
390
+ </div>
391
+ </div>
392
+ <p class="text-gray-700">"Quando precisei da AR-4 após um acidente, o atendimento foi rápido e eficiente. Recomendo a todos!"</p>
393
+ </div>
394
+
395
+ <div class="bg-white p-6 rounded-lg shadow-md">
396
+ <div class="flex items-center mb-4">
397
+ <div class="text-2xl gold-text mr-3">
398
+ <i class="fas fa-quote-left"></i>
399
+ </div>
400
+ <div>
401
+ <h4 class="font-bold">Ana Paula</h4>
402
+ <div class="flex gold-text">
403
+ <i class="fas fa-star"></i>
404
+ <i class="fas fa-star"></i>
405
+ <i class="fas fa-star"></i>
406
+ <i class="fas fa-star"></i>
407
+ <i class="fas fa-star"></i>
408
+ </div>
409
+ </div>
410
+ </div>
411
+ <p class="text-gray-700">"A cobertura da AR-4 é completa e o preço justo. Melhor proteção veicular que já contratei."</p>
412
+ </div>
413
+
414
+ <div class="bg-white p-6 rounded-lg shadow-md">
415
+ <div class="flex items-center mb-4">
416
+ <div class="text-2xl gold-text mr-3">
417
+ <i class="fas fa-quote-left"></i>
418
+ </div>
419
+ <div>
420
+ <h4 class="font-bold">Roberto Almeida</h4>
421
+ <div class="flex gold-text">
422
+ <i class="fas fa-star"></i>
423
+ <i class="fas fa-star"></i>
424
+ <i class="fas fa-star"></i>
425
+ <i class="fas fa-star"></i>
426
+ <i class="fas fa-star"></i>
427
+ </div>
428
+ </div>
429
+ </div>
430
+ <p class="text-gray-700">"O guincho 24h já me salvou duas vezes. Serviço de qualidade que vale cada centavo."</p>
431
+ </div>
432
+ </div>
433
+ </div>
434
+ </section>
435
+
436
+ <!-- Moto Hero Section -->
437
+ <section class="moto-hero text-black py-20">
438
+ <div class="container mx-auto px-4 text-center">
439
+ <h1 class="text-4xl md:text-5xl font-bold mb-6">Proteção Especializada para Sua Moto</h1>
440
+ <p class="text-xl mb-8 max-w-2xl mx-auto">Coberturas adaptadas para motociclistas, com benefícios exclusivos e assistência especializada.</p>
441
+ <a href="https://wa.me/558591886821" class="bg-black text-white px-8 py-4 rounded-full font-bold text-lg hover:bg-gray-800 transition duration-300 pulse inline-block">
442
+ COTAÇÃO PARA MOTO <i class="fas fa-arrow-right ml-2"></i>
443
+ </a>
444
+ </div>
445
+ </section>
446
+
447
+ <!-- CTA Section -->
448
+ <section class="py-16 bg-black text-white">
449
+ <div class="container mx-auto px-4 text-center">
450
+ <h2 class="text-3xl font-bold mb-6 gold-text">Não deixe seu veículo desprotegido!</h2>
451
+ <p class="text-xl mb-8 max-w-2xl mx-auto">Proteja seu carro ou moto com a AR-4 e tenha tranquilidade no seu dia a dia.</p>
452
+ <div class="flex flex-wrap justify-center gap-4 mb-8">
453
+ <a href="https://wa.me/558591886821?text=Gostaria%20de%20uma%20cotação%20para%20proteção%20veicular%20de%20carro" class="gold-bg text-black px-6 py-3 rounded-full font-medium hover:bg-[#c9a42f] transition duration-300">
454
+ <i class="fas fa-car mr-2"></i> Cotação para Carro
455
+ </a>
456
+ <a href="https://wa.me/558591886821?text=Gostaria%20de%20uma%20cotação%20para%20proteção%20veicular%20de%20moto" class="gold-bg text-black px-6 py-3 rounded-full font-medium hover:bg-[#c9a42f] transition duration-300">
457
+ <i class="fas fa-motorcycle mr-2"></i> Cotação para Moto
458
+ </a>
459
+ </div>
460
+ <a href="https://wa.me/558591886821" class="gold-bg text-black px-8 py-4 rounded-full font-bold text-lg hover:bg-[#c9a42f] transition duration-300 inline-block">
461
+ <i class="fab fa-whatsapp mr-2"></i> FALE COM NOSSO TIME
462
+ </a>
463
+ </div>
464
+ </section>
465
+
466
+ <!-- Contact -->
467
+ <section id="contact" class="py-16 gold-bg">
468
+ <div class="container mx-auto px-4">
469
+ <div class="max-w-4xl mx-auto bg-black bg-opacity-80 rounded-lg p-8 shadow-md text-white">
470
+ <h2 class="text-3xl font-bold text-center mb-8 gold-text">Entre em Contato</h2>
471
+
472
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
473
+ <div>
474
+ <h3 class="text-xl font-bold mb-4">Informações de Contato</h3>
475
+ <div class="mb-4">
476
+ <div class="flex items-start mb-3">
477
+ <div class="gold-text text-xl mr-3">
478
+ <i class="fas fa-map-marker-alt"></i>
479
+ </div>
480
+ <div>
481
+ <p class="font-medium">Endereço</p>
482
+ <p class="text-gray-300">Rua Barbosa de Freitas, 951 - Aldeota, Fortaleza-CE</p>
483
+ </div>
484
+ </div>
485
+
486
+ <div class="flex items-start mb-3">
487
+ <div class="gold-text text-xl mr-3">
488
+ <i class="fab fa-whatsapp"></i>
489
+ </div>
490
+ <div>
491
+ <p class="font-medium">WhatsApp</p>
492
+ <a href="https://wa.me/558591886821" class="text-gray-300 hover:underline">(85) 91886-821</a>
493
+ </div>
494
+ </div>
495
+ </div>
496
+ </div>
497
+
498
+ <div>
499
+ <h3 class="text-xl font-bold mb-4">Mande uma mensagem</h3>
500
+ <p class="text-gray-300 mb-4">Tire suas dúvidas ou solicite uma cotação personalizada para seu carro ou moto.</p>
501
+ <div class="flex flex-wrap gap-3">
502
+ <a href="https://wa.me/558591886821?text=Gostaria%20de%20uma%20cotação%20para%20proteção%20veicular%20de%20carro" class="gold-bg text-black px-4 py-2 rounded-full font-medium hover:bg-[#c9a42f] transition duration-300 inline-flex items-center text-sm">
503
+ <i class="fas fa-car mr-2"></i> Carro
504
+ </a>
505
+ <a href="https://wa.me/558591886821?text=Gostaria%20de%20uma%20cotação%20para%20proteção%20veicular%20de%20moto" class="gold-bg text-black px-4 py-2 rounded-full font-medium hover:bg-[#c9a42f] transition duration-300 inline-flex items-center text-sm">
506
+ <i class="fas fa-motorcycle mr-2"></i> Moto
507
+ </a>
508
+ <a href="https://wa.me/558591886821" class="gold-bg text-black px-4 py-2 rounded-full font-medium hover:bg-[#c9a42f] transition duration-300 inline-flex items-center text-sm">
509
+ <i class="fas fa-question mr-2"></i> Dúvidas
510
+ </a>
511
+ </div>
512
+ </div>
513
+ </div>
514
+ </div>
515
+ </div>
516
+ </section>
517
+
518
+ <!-- Footer -->
519
+ <footer class="bg-black text-white py-8">
520
+ <div class="container mx-auto px-4">
521
+ <div class="flex flex-col md:flex-row justify-between items-center">
522
+ <div class="flex items-center mb-4 md:mb-0">
523
+ <div class="gold-border rounded-full p-2 black-bg flex items-center justify-center mr-3">
524
+ <div class="text-xl font-bold white-text">AR</div>
525
+ <div class="text-xl font-bold gold-text">-4</div>
526
+ </div>
527
+ <div>
528
+ <h3 class="text-xl font-bold gold-text">AR-4 Proteção Veicular</h3>
529
+ <p class="text-gray-400 text-sm">Proteção para carros e motos</p>
530
+ </div>
531
+ </div>
532
+
533
+ <div class="text-gray-400 text-sm text-center md:text-right">
534
+ <p>© 2023 AR-4 Proteção Veicular. Todos os direitos reservados.</p>
535
+ <p>Rua Barbosa de Freitas, 951 - Aldeota, Fortaleza-CE</p>
536
+ </div>
537
+ </div>
538
+ </div>
539
+ </footer>
540
+
541
+ <!-- Floating WhatsApp Button -->
542
+ <a href="https://wa.me/558591886821" 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">
543
+ <i class="fab fa-whatsapp"></i>
544
+ </a>
545
+
546
+ <script>
547
+ // Tab functionality
548
+ document.addEventListener('DOMContentLoaded', function() {
549
+ const tabButtons = document.querySelectorAll('.tab-button');
550
+
551
+ tabButtons.forEach(button => {
552
+ button.addEventListener('click', function() {
553
+ // Remove active class from all buttons and tabs
554
+ document.querySelectorAll('.tab-button').forEach(btn => btn.classList.remove('active'));
555
+ document.querySelectorAll('.tab-content').forEach(tab => tab.classList.remove('active'));
556
+
557
+ // Add active class to clicked button
558
+ this.classList.add('active');
559
+
560
+ // Show corresponding tab
561
+ const tabId = this.getAttribute('data-tab');
562
+ document.getElementById(tabId).classList.add('active');
563
+ });
564
+ });
565
+ });
566
+ </script>
567
+ <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/ar4atual" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
568
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ acrescente uma moto ao site