Hugging Face's logo

Spaces:
xlorfx
/
spysmartai
Running

App Files Community
xlorfx commited on
Commit
27ea911
·
verified ·
1 Parent(s): 0b57ecb

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +552 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Spysmartai
3
- emoji: 😻
4
- colorFrom: pink
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: spysmartai
3
+ emoji: 🐳
4
+ colorFrom: green
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,552 @@
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>SpySmartAI - Monitoramento de Concorrentes</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@600&family=Inter:wght@400;500&display=swap" rel="stylesheet">
9
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10
+ <style>
11
+ body {
12
+ font-family: 'Inter', sans-serif;
13
+ background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
14
+ background-attachment: fixed;
15
+ color: #ffffff;
16
+ }
17
+ .gradient-bg {
18
+ background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%);
19
+ }
20
+ .card-glass {
21
+ background: rgba(255, 255, 255, 0.08);
22
+ backdrop-filter: blur(10px);
23
+ border: 1px solid rgba(255, 255, 255, 0.1);
24
+ }
25
+ .card-shadow {
26
+ box-shadow: 0 10px 30px -15px rgba(0, 0, 0, 0.3);
27
+ }
28
+ #data-visualization {
29
+ position: fixed;
30
+ top: 0;
31
+ left: 0;
32
+ width: 100%;
33
+ height: 100%;
34
+ z-index: -1;
35
+ opacity: 0.7;
36
+ }
37
+ h1, h2, h3 {
38
+ font-family: 'Poppins', sans-serif;
39
+ }
40
+ .typing-cursor {
41
+ display: inline-block;
42
+ width: 10px;
43
+ height: 24px;
44
+ background: #a777e3;
45
+ margin-left: 4px;
46
+ animation: blink 1s infinite;
47
+ }
48
+ @keyframes blink {
49
+ 0%, 100% { opacity: 1; }
50
+ 50% { opacity: 0; }
51
+ }
52
+ .data-node {
53
+ position: absolute;
54
+ border-radius: 50%;
55
+ background: rgba(167, 119, 227, 0.6);
56
+ box-shadow: 0 0 20px rgba(167, 119, 227, 0.6);
57
+ }
58
+ .data-connection {
59
+ position: absolute;
60
+ height: 1px;
61
+ background: rgba(167, 119, 227, 0.4);
62
+ }
63
+ .social-icon {
64
+ transition: all 0.3s ease;
65
+ }
66
+ .social-icon:hover {
67
+ transform: translateY(-3px);
68
+ }
69
+ .plan-card {
70
+ transition: all 0.3s ease;
71
+ }
72
+ .plan-card:hover {
73
+ transform: translateY(-10px);
74
+ }
75
+ .feature-icon {
76
+ width: 50px;
77
+ height: 50px;
78
+ display: flex;
79
+ align-items: center;
80
+ justify-content: center;
81
+ border-radius: 12px;
82
+ margin-bottom: 1rem;
83
+ }
84
+ .add-competitor-btn {
85
+ transition: all 0.3s ease;
86
+ box-shadow: 0 0 20px rgba(167, 119, 227, 0.7);
87
+ }
88
+ .add-competitor-btn:hover {
89
+ transform: scale(1.05);
90
+ box-shadow: 0 0 30px rgba(167, 119, 227, 0.9);
91
+ }
92
+ .video-container {
93
+ position: relative;
94
+ border-radius: 16px;
95
+ overflow: hidden;
96
+ }
97
+ .video-overlay {
98
+ position: absolute;
99
+ top: 0;
100
+ left: 0;
101
+ width: 100%;
102
+ height: 100%;
103
+ display: flex;
104
+ align-items: center;
105
+ justify-content: center;
106
+ background: rgba(0, 0, 0, 0.3);
107
+ transition: all 0.3s ease;
108
+ }
109
+ .video-overlay:hover {
110
+ background: rgba(0, 0, 0, 0.1);
111
+ }
112
+ .play-button {
113
+ width: 80px;
114
+ height: 80px;
115
+ background: rgba(255, 255, 255, 0.2);
116
+ backdrop-filter: blur(5px);
117
+ border-radius: 50%;
118
+ display: flex;
119
+ align-items: center;
120
+ justify-content: center;
121
+ transition: all 0.3s ease;
122
+ }
123
+ .play-button:hover {
124
+ transform: scale(1.1);
125
+ background: rgba(255, 255, 255, 0.3);
126
+ }
127
+ .locked-feature {
128
+ position: relative;
129
+ filter: blur(2px);
130
+ pointer-events: none;
131
+ }
132
+ .locked-overlay {
133
+ position: absolute;
134
+ top: 0;
135
+ left: 0;
136
+ width: 100%;
137
+ height: 100%;
138
+ display: flex;
139
+ align-items: center;
140
+ justify-content: center;
141
+ background: rgba(0, 0, 0, 0.5);
142
+ border-radius: 12px;
143
+ z-index: 10;
144
+ }
145
+ .locked-icon {
146
+ background: rgba(255, 255, 255, 0.2);
147
+ width: 40px;
148
+ height: 40px;
149
+ border-radius: 50%;
150
+ display: flex;
151
+ align-items: center;
152
+ justify-content: center;
153
+ }
154
+ .login-container {
155
+ max-width: 400px;
156
+ margin: 0 auto;
157
+ padding: 2rem;
158
+ border-radius: 16px;
159
+ background: rgba(255, 255, 255, 0.05);
160
+ backdrop-filter: blur(10px);
161
+ border: 1px solid rgba(255, 255, 255, 0.1);
162
+ }
163
+ .payment-method {
164
+ display: flex;
165
+ align-items: center;
166
+ padding: 1rem;
167
+ border-radius: 8px;
168
+ background: rgba(255, 255, 255, 0.05);
169
+ margin-bottom: 1rem;
170
+ cursor: pointer;
171
+ transition: all 0.3s ease;
172
+ }
173
+ .payment-method:hover {
174
+ background: rgba(255, 255, 255, 0.1);
175
+ }
176
+ .payment-method.active {
177
+ background: rgba(167, 119, 227, 0.2);
178
+ border: 1px solid rgba(167, 119, 227, 0.5);
179
+ }
180
+ .payment-icon {
181
+ width: 40px;
182
+ height: 40px;
183
+ display: flex;
184
+ align-items: center;
185
+ justify-content: center;
186
+ margin-right: 1rem;
187
+ border-radius: 6px;
188
+ }
189
+ .credit-card-form {
190
+ display: none;
191
+ }
192
+ .credit-card-form.active {
193
+ display: block;
194
+ }
195
+ .pix-form {
196
+ display: none;
197
+ }
198
+ .pix-form.active {
199
+ display: block;
200
+ }
201
+ .card-element {
202
+ padding: 12px;
203
+ border: 1px solid rgba(255, 255, 255, 0.2);
204
+ border-radius: 8px;
205
+ background: rgba(255, 255, 255, 0.05);
206
+ margin-bottom: 1rem;
207
+ }
208
+ .gradient-text {
209
+ background: linear-gradient(135deg, #a777e3 0%, #6e8efb 100%);
210
+ -webkit-background-clip: text;
211
+ background-clip: text;
212
+ color: transparent;
213
+ }
214
+ .signup-container {
215
+ max-width: 600px;
216
+ margin: 0 auto;
217
+ padding: 2rem;
218
+ border-radius: 16px;
219
+ background: rgba(255, 255, 255, 0.05);
220
+ backdrop-filter: blur(10px);
221
+ border: 1px solid rgba(255, 255, 255, 0.1);
222
+ }
223
+ </style>
224
+ </head>
225
+ <body class="min-h-screen">
226
+ <!-- Visualização de dados animada -->
227
+ <div id="data-visualization"></div>
228
+
229
+ <!-- Página Inicial (Landing Page) -->
230
+ <div id="landingPage" class="container mx-auto px-4 py-8">
231
+ <!-- Header -->
232
+ <header class="flex justify-between items-center py-6">
233
+ <div class="flex items-center">
234
+ <div class="w-10 h-10 rounded-full gradient-bg flex items-center justify-center mr-3">
235
+ <i class="fas fa-robot text-white"></i>
236
+ </div>
237
+ <h1 class="text-2xl font-bold">SpySmartAI</h1>
238
+ </div>
239
+ <div class="flex space-x-4">
240
+ <a href="#features" class="text-gray-300 hover:text-white">Recursos</a>
241
+ <a href="#pricing" class="text-gray-300 hover:text-white">Planos</a>
242
+ <a href="#how-it-works" class="text-gray-300 hover:text-white">Como Funciona</a>
243
+ <button id="loginBtn" class="text-white px-4 py-2 rounded-lg hover:opacity-90 transition gradient-bg">
244
+ Entrar
245
+ </button>
246
+ </div>
247
+ </header>
248
+
249
+ <!-- Hero Section -->
250
+ <section class="py-20 text-center">
251
+ <h1 class="text-5xl font-bold mb-6 max-w-3xl mx-auto">
252
+ Monitore seus concorrentes com <span id="typing-text" class="gradient-text"></span><span class="typing-cursor"></span>
253
+ </h1>
254
+ <p class="text-xl text-gray-300 mb-10 max-w-2xl mx-auto">
255
+ Descubra estratégias, analise anúncios e acompanhe mudanças de preços automaticamente.
256
+ </p>
257
+ <div class="flex justify-center space-x-4">
258
+ <button id="startFreeTrial" class="gradient-bg text-white px-8 py-3 rounded-lg hover:opacity-90 transition font-medium">
259
+ Comece Grátis por 7 dias
260
+ </button>
261
+ <button id="watchDemo" class="bg-transparent border border-gray-600 text-white px-8 py-3 rounded-lg hover:bg-gray-800 transition font-medium flex items-center">
262
+ <i class="fas fa-play-circle mr-2"></i> Ver Demonstração
263
+ </button>
264
+ </div>
265
+ </section>
266
+
267
+ <!-- Video Demo -->
268
+ <section class="py-16">
269
+ <div class="video-container mx-auto max-w-4xl">
270
+ <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Demo Video" class="w-full h-auto">
271
+ <div class="video-overlay">
272
+ <div class="play-button">
273
+ <i class="fas fa-play text-white text-2xl"></i>
274
+ </div>
275
+ </div>
276
+ </div>
277
+ </section>
278
+
279
+ <!-- Features -->
280
+ <section id="features" class="py-20">
281
+ <div class="text-center mb-16">
282
+ <h2 class="text-3xl font-bold mb-4">Recursos Poderosos</h2>
283
+ <p class="text-gray-300 max-w-2xl mx-auto">
284
+ Tudo que você precisa para ficar à frente da concorrência
285
+ </p>
286
+ </div>
287
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
288
+ <div class="card-glass rounded-xl p-6 card-shadow">
289
+ <div class="feature-icon gradient-bg">
290
+ <i class="fas fa-chart-line text-white text-xl"></i>
291
+ </div>
292
+ <h3 class="text-xl font-bold mb-2">Monitoramento de Preços</h3>
293
+ <p class="text-gray-300">
294
+ Acompanhe automaticamente as mudanças de preços dos seus concorrentes e receba alertas em tempo real.
295
+ </p>
296
+ </div>
297
+ <div class="card-glass rounded-xl p-6 card-shadow">
298
+ <div class="feature-icon gradient-bg">
299
+ <i class="fas fa-ad text-white text-xl"></i>
300
+ </div>
301
+ <h3 class="text-xl font-bold mb-2">Análise de Anúncios</h3>
302
+ <p class="text-gray-300">
303
+ Descubra os anúncios que estão funcionando para seus concorrentes e identifique oportunidades.
304
+ </p>
305
+ </div>
306
+ <div class="card-glass rounded-xl p-6 card-shadow">
307
+ <div class="feature-icon gradient-bg">
308
+ <i class="fas fa-users text-white text-xl"></i>
309
+ </div>
310
+ <h3 class="text-xl font-bold mb-2">Público-Alvo</h3>
311
+ <p class="text-gray-300">
312
+ Entenda quem são os clientes dos seus concorrentes e como você pode alcançá-los melhor.
313
+ </p>
314
+ </div>
315
+ </div>
316
+ </section>
317
+
318
+ <!-- How It Works -->
319
+ <section id="how-it-works" class="py-20 bg-gray-900 bg-opacity-50 rounded-3xl">
320
+ <div class="text-center mb-16">
321
+ <h2 class="text-3xl font-bold mb-4">Como Funciona</h2>
322
+ <p class="text-gray-300 max-w-2xl mx-auto">
323
+ Em apenas 3 passos você começa a monitorar seus concorrentes
324
+ </p>
325
+ </div>
326
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
327
+ <div class="flex flex-col items-center text-center">
328
+ <div class="w-16 h-16 rounded-full gradient-bg flex items-center justify-center mb-4 text-white text-xl font-bold">1</div>
329
+ <h3 class="text-xl font-bold mb-2">Adicione Concorrentes</h3>
330
+ <p class="text-gray-300">
331
+ Insira os sites e redes sociais dos concorrentes que deseja monitorar.
332
+ </p>
333
+ </div>
334
+ <div class="flex flex-col items-center text-center">
335
+ <div class="w-16 h-16 rounded-full gradient-bg flex items-center justify-center mb-4 text-white text-xl font-bold">2</div>
336
+ <h3 class="text-xl font-bold mb-2">Configure Alertas</h3>
337
+ <p class="text-gray-300">
338
+ Defina quais tipos de mudanças você quer ser notificado.
339
+ </p>
340
+ </div>
341
+ <div class="flex flex-col items-center text-center">
342
+ <div class="w-16 h-16 rounded-full gradient-bg flex items-center justify-center mb-4 text-white text-xl font-bold">3</div>
343
+ <h3 class="text-xl font-bold mb-2">Receba Insights</h3>
344
+ <p class="text-gray-300">
345
+ Acesse relatórios completos e tome decisões baseadas em dados.
346
+ </p>
347
+ </div>
348
+ </div>
349
+ </section>
350
+
351
+ <!-- Pricing -->
352
+ <section id="pricing" class="py-20">
353
+ <div class="text-center mb-16">
354
+ <h2 class="text-3xl font-bold mb-4">Planos que se Adaptam a Você</h2>
355
+ <p class="text-gray-300 max-w-2xl mx-auto">
356
+ Comece grátis e atualize quando precisar de mais recursos
357
+ </p>
358
+ </div>
359
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
360
+ <div class="plan-card card-glass rounded-xl p-6 card-shadow">
361
+ <h3 class="text-xl font-bold mb-2">Free</h3>
362
+ <p class="text-4xl font-bold mb-4">R$ 0<span class="text-lg text-gray-400">/mês</span></p>
363
+ <ul class="space-y-3 mb-8">
364
+ <li class="flex items-center">
365
+ <i class="fas fa-check text-green-400 mr-2"></i>
366
+ 1 Concorrente
367
+ </li>
368
+ <li class="flex items-center">
369
+ <i class="fas fa-check text-green-400 mr-2"></i>
370
+ Monitoramento Básico
371
+ </li>
372
+ <li class="flex items-center text-gray-500">
373
+ <i class="fas fa-times text-red-400 mr-2"></i>
374
+ Análise de Anúncios
375
+ </li>
376
+ <li class="flex items-center text-gray-500">
377
+ <i class="fas fa-times text-red-400 mr-2"></i>
378
+ Alertas em Tempo Real
379
+ </li>
380
+ <li class="flex items-center text-gray-500">
381
+ <i class="fas fa-times text-red-400 mr-2"></i>
382
+ Exportação de Relatórios
383
+ </li>
384
+ </ul>
385
+ <button class="w-full bg-gray-700 text-white py-3 px-6 rounded-lg hover:bg-gray-600 transition">
386
+ Começar Grátis
387
+ </button>
388
+ </div>
389
+ <div class="plan-card card-glass rounded-xl p-6 card-shadow border-2 border-purple-500 relative">
390
+ <div class="absolute top-0 right-0 bg-purple-500 text-white px-3 py-1 text-xs font-bold rounded-bl-lg rounded-tr-lg">
391
+ POPULAR
392
+ </div>
393
+ <h3 class="text-xl font-bold mb-2">Starter</h3>
394
+ <p class="text-4xl font-bold mb-4">R$ 97<span class="text-lg text-gray-400">/mês</span></p>
395
+ <ul class="space-y-3 mb-8">
396
+ <li class="flex items-center">
397
+ <i class="fas fa-check text-green-400 mr-2"></i>
398
+ Até 5 Concorrentes
399
+ </li>
400
+ <li class="flex items-center">
401
+ <i class="fas fa-check text-green-400 mr-2"></i>
402
+ Monitoramento Completo
403
+ </li>
404
+ <li class="flex items-center">
405
+ <i class="fas fa-check text-green-400 mr-2"></i>
406
+ Análise Básica de Anúncios
407
+ </li>
408
+ <li class="flex items-center">
409
+ <i class="fas fa-check text-green-400 mr-2"></i>
410
+ Alertas Diários
411
+ </li>
412
+ <li class="flex items-center text-gray-500">
413
+ <i class="fas fa-times text-red-400 mr-2"></i>
414
+ Exportação de Relatórios
415
+ </li>
416
+ </ul>
417
+ <button class="w-full gradient-bg text-white py-3 px-6 rounded-lg hover:opacity-90 transition">
418
+ Assinar Agora
419
+ </button>
420
+ </div>
421
+ <div class="plan-card card-glass rounded-xl p-6 card-shadow">
422
+ <h3 class="text-xl font-bold mb-2">Pro</h3>
423
+ <p class="text-4xl font-bold mb-4">R$ 197<span class="text-lg text-gray-400">/mês</span></p>
424
+ <ul class="space-y-3 mb-8">
425
+ <li class="flex items-center">
426
+ <i class="fas fa-check text-green-400 mr-2"></i>
427
+ Concorrentes Ilimitados
428
+ </li>
429
+ <li class="flex items-center">
430
+ <i class="fas fa-check text-green-400 mr-2"></i>
431
+ Monitoramento Avançado
432
+ </li>
433
+ <li class="flex items-center">
434
+ <i class="fas fa-check text-green-400 mr-2"></i>
435
+ Análise Completa de Anúncios
436
+ </li>
437
+ <li class="flex items-center">
438
+ <i class="fas fa-check text-green-400 mr-2"></i>
439
+ Alertas em Tempo Real
440
+ </li>
441
+ <li class="flex items-center">
442
+ <i class="fas fa-check text-green-400 mr-2"></i>
443
+ Exportação de Relatórios
444
+ </li>
445
+ </ul>
446
+ <button class="w-full gradient-bg text-white py-3 px-6 rounded-lg hover:opacity-90 transition">
447
+ Assinar Agora
448
+ </button>
449
+ </div>
450
+ </div>
451
+ </section>
452
+
453
+ <!-- Testimonials -->
454
+ <section class="py-20">
455
+ <div class="text-center mb-16">
456
+ <h2 class="text-3xl font-bold mb-4">O que nossos clientes dizem</h2>
457
+ <p class="text-gray-300 max-w-2xl mx-auto">
458
+ Empresas que já estão usando o SpySmartAI para se destacar
459
+ </p>
460
+ </div>
461
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
462
+ <div class="card-glass rounded-xl p-6 card-shadow">
463
+ <div class="flex items-center mb-4">
464
+ <div class="w-12 h-12 rounded-full bg-purple-500 bg-opacity-30 flex items-center justify-center mr-3">
465
+ <i class="fas fa-user text-purple-300"></i>
466
+ </div>
467
+ <div>
468
+ <h4 class="font-bold">Carlos Silva</h4>
469
+ <p class="text-sm text-gray-400">CEO, EcommerceX</p>
470
+ </div>
471
+ </div>
472
+ <p class="text-gray-300">
473
+ "Com o SpySmartAI, reduzimos nosso tempo de análise de concorrentes em 80% e aumentamos nossas vendas em 40%."
474
+ </p>
475
+ </div>
476
+ <div class="card-glass rounded-xl p-6 card-shadow">
477
+ <div class="flex items-center mb-4">
478
+ <div class="w-12 h-12 rounded-full bg-purple-500 bg-opacity-30 flex items-center justify-center mr-3">
479
+ <i class="fas fa-user text-purple-300"></i>
480
+ </div>
481
+ <div>
482
+ <h4 class="font-bold">Ana Oliveira</h4>
483
+ <p class="text-sm text-gray-400">Marketing, TechSolutions</p>
484
+ </div>
485
+ </div>
486
+ <p class="text-gray-300">
487
+ "Os relatórios de anúncios nos ajudaram a otimizar nossas campanhas e reduzir o CPA em 35%."
488
+ </p>
489
+ </div>
490
+ <div class="card-glass rounded-xl p-6 card-shadow">
491
+ <div class="flex items-center mb-4">
492
+ <div class="w-12 h-12 rounded-full bg-purple-500 bg-opacity-30 flex items-center justify-center mr-3">
493
+ <i class="fas fa-user text-purple-300"></i>
494
+ </div>
495
+ <div>
496
+ <h4 class="font-bold">Roberto Santos</h4>
497
+ <p class="text-sm text-gray-400">Fundador, DigitalGrowth</p>
498
+ </div>
499
+ </div>
500
+ <p class="text-gray-300">
501
+ "Os alertas de mudança de preços nos permitem reagir imediatamente e manter nossa vantagem competitiva."
502
+ </p>
503
+ </div>
504
+ </div>
505
+ </section>
506
+
507
+ <!-- CTA -->
508
+ <section class="py-20 text-center">
509
+ <h2 class="text-3xl font-bold mb-6">Pronto para levar seu negócio ao próximo nível?</h2>
510
+ <p class="text-xl text-gray-300 mb-10 max-w-2xl mx-auto">
511
+ Comece seu teste gratuito de 7 dias hoje mesmo. Sem cartão de crédito necessário.
512
+ </p>
513
+ <button id="ctaStartFreeTrial" class="gradient-bg text-white px-8 py-3 rounded-lg hover:opacity-90 transition font-medium">
514
+ Comece Grátis por 7 dias
515
+ </button>
516
+ </section>
517
+
518
+ <!-- Footer -->
519
+ <footer class="py-12 border-t border-gray-800">
520
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8 max-w-6xl mx-auto">
521
+ <div>
522
+ <div class="flex items-center mb-4">
523
+ <div class="w-10 h-10 rounded-full gradient-bg flex items-center justify-center mr-3">
524
+ <i class="fas fa-robot text-white"></i>
525
+ </div>
526
+ <h3 class="text-xl font-bold">SpySmartAI</h3>
527
+ </div>
528
+ <p class="text-gray-400">
529
+ A solução completa para monitoramento de concorrentes com inteligência artificial.
530
+ </p>
531
+ </div>
532
+ <div>
533
+ <h4 class="font-bold mb-4">Produto</h4>
534
+ <ul class="space-y-2">
535
+ <li><a href="#features" class="text-gray-400 hover:text-white">Recursos</a></li>
536
+ <li><a href="#pricing" class="text-gray-400 hover:text-white">Planos</a></li>
537
+ <li><a href="#how-it-works" class="text-gray-400 hover:text-white">Demonstração</a></li>
538
+ <li><a href="#pricing" class="text-gray-400 hover:text-white">Teste Grátis</a></li>
539
+ </ul>
540
+ </div>
541
+ <div>
542
+ <h4 class="font-bold mb-4">Suporte</h4>
543
+ <ul class="space-y-2">
544
+ <li><a href="/support" class="text-gray-400 hover:text-white">Central de Ajuda</a></li>
545
+ <li><a href="/tutorials" class="text-gray-400 hover:text-white">Tutoriais</a></li>
546
+ <li><a href="/contact" class="text-gray-400 hover:text-white">Contato</a></li>
547
+ <li><a href="/status" class="text-gray-400 hover:text-white">Status</a></li>
548
+ </ul>
549
+ </div>
550
+ <div>
551
+ <h4 class="font-bold mb-
552
+ </html>