Hugging Face's logo

Spaces:
xlorfx
/
teste-app
Running

App Files Community
xlorfx commited on
Commit
242229c
·
verified ·
1 Parent(s): 3a39481

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +725 -19
  3. prompts.txt +3 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Teste App
3
- emoji: 🏃
4
- colorFrom: blue
5
- colorTo: yellow
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: teste-app
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,725 @@
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>NeonVision - Revolução em Marketing Digital</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=Montserrat:wght@800;900&family=Poppins:wght@400;600;700&display=swap');
11
+
12
+ :root {
13
+ --neon-green: #0ff0b3;
14
+ --neon-green-light: #4df8d6;
15
+ --neon-green-dark: #00c58e;
16
+ --neon-purple: #8a2be2;
17
+ --neon-blue: #00b4d8;
18
+ }
19
+
20
+ body {
21
+ font-family: 'Poppins', sans-serif;
22
+ background-color: #0a0a0a;
23
+ color: white;
24
+ overflow-x: hidden;
25
+ }
26
+
27
+ .neon-text {
28
+ background: linear-gradient(90deg, var(--neon-green), var(--neon-green-light), var(--neon-blue));
29
+ -webkit-background-clip: text;
30
+ background-clip: text;
31
+ color: transparent;
32
+ text-shadow: 0 0 5px rgba(79, 255, 210, 0.3);
33
+ }
34
+
35
+ .neon-border {
36
+ border: 2px solid transparent;
37
+ border-image: linear-gradient(90deg, var(--neon-green), var(--neon-blue)) 1;
38
+ box-shadow: 0 0 15px rgba(79, 255, 210, 0.5);
39
+ }
40
+
41
+ .neon-glow {
42
+ box-shadow: 0 0 15px rgba(79, 255, 210, 0.7);
43
+ }
44
+
45
+ .neon-button {
46
+ background: linear-gradient(90deg, var(--neon-green), var(--neon-blue));
47
+ color: black;
48
+ font-weight: bold;
49
+ border: none;
50
+ transition: all 0.3s ease;
51
+ position: relative;
52
+ overflow: hidden;
53
+ }
54
+
55
+ .neon-button:hover {
56
+ transform: translateY(-3px);
57
+ box-shadow: 0 0 25px rgba(79, 255, 210, 0.8);
58
+ }
59
+
60
+ .neon-button::before {
61
+ content: '';
62
+ position: absolute;
63
+ top: 0;
64
+ left: -100%;
65
+ width: 100%;
66
+ height: 100%;
67
+ background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
68
+ transition: all 0.5s ease;
69
+ }
70
+
71
+ .neon-button:hover::before {
72
+ left: 100%;
73
+ }
74
+
75
+ .secondary-button {
76
+ background: transparent;
77
+ color: var(--neon-green);
78
+ border: 2px solid var(--neon-green);
79
+ font-weight: bold;
80
+ transition: all 0.3s ease;
81
+ }
82
+
83
+ .secondary-button:hover {
84
+ background: rgba(15, 240, 179, 0.1);
85
+ box-shadow: 0 0 15px rgba(79, 255, 210, 0.3);
86
+ }
87
+
88
+ .feature-card {
89
+ background: rgba(10, 20, 30, 0.7);
90
+ backdrop-filter: blur(10px);
91
+ border: 1px solid rgba(79, 255, 210, 0.2);
92
+ transition: all 0.3s ease;
93
+ }
94
+
95
+ .feature-card:hover {
96
+ transform: translateY(-10px);
97
+ box-shadow: 0 10px 25px rgba(79, 255, 210, 0.3);
98
+ border-color: var(--neon-green);
99
+ }
100
+
101
+ .pricing-card {
102
+ background: rgba(10, 20, 30, 0.7);
103
+ backdrop-filter: blur(10px);
104
+ border: 1px solid rgba(79, 255, 210, 0.2);
105
+ transition: all 0.3s ease;
106
+ }
107
+
108
+ .pricing-card:hover {
109
+ transform: translateY(-10px);
110
+ border-color: var(--neon-green);
111
+ }
112
+
113
+ .popular-plan {
114
+ border: 2px solid var(--neon-green);
115
+ box-shadow: 0 0 30px rgba(79, 255, 210, 0.4);
116
+ }
117
+
118
+ .pulse {
119
+ animation: pulse 2s infinite;
120
+ }
121
+
122
+ @keyframes pulse {
123
+ 0% { opacity: 0.8; }
124
+ 50% { opacity: 1; }
125
+ 100% { opacity: 0.8; }
126
+ }
127
+
128
+ .floating {
129
+ animation: floating 6s ease-in-out infinite;
130
+ }
131
+
132
+ @keyframes floating {
133
+ 0% { transform: translateY(0px); }
134
+ 50% { transform: translateY(-20px); }
135
+ 100% { transform: translateY(0px); }
136
+ }
137
+
138
+ .bg-grid {
139
+ background-image:
140
+ linear-gradient(rgba(79, 255, 210, 0.1) 1px, transparent 1px),
141
+ linear-gradient(90deg, rgba(79, 255, 210, 0.1) 1px, transparent 1px);
142
+ background-size: 40px 40px;
143
+ }
144
+
145
+ .gradient-overlay {
146
+ background: linear-gradient(180deg, rgba(10, 10, 10, 0) 0%, #0a0a0a 100%);
147
+ }
148
+ </style>
149
+ </head>
150
+ <body class="bg-grid">
151
+ <!-- Navigation -->
152
+ <nav class="container mx-auto px-6 py-4">
153
+ <div class="flex justify-between items-center">
154
+ <div class="flex items-center space-x-2">
155
+ <i class="fas fa-bolt text-2xl neon-text"></i>
156
+ <span class="text-2xl font-extrabold neon-text">NEONVISION</span>
157
+ </div>
158
+ <div class="hidden md:flex space-x-8 items-center">
159
+ <a href="#features" class="text-white hover:text-neon-green transition">Recursos</a>
160
+ <a href="#pricing" class="text-white hover:text-neon-green transition">Planos</a>
161
+ <a href="#testimonials" class="text-white hover:text-neon-green transition">Depoimentos</a>
162
+ <a href="#" class="text-white hover:text-neon-green transition">FAQ</a>
163
+ </div>
164
+ <div class="hidden md:flex space-x-4">
165
+ <a href="#login" class="secondary-button px-6 py-2 rounded-full">Login</a>
166
+ <a href="#test" class="neon-button px-6 py-2 rounded-full">Teste Grátis</a>
167
+ </div>
168
+ <button class="md:hidden text-white focus:outline-none">
169
+ <i class="fas fa-bars text-2xl"></i>
170
+ </button>
171
+ </div>
172
+ </nav>
173
+
174
+ <!-- Hero Section -->
175
+ <section class="container mx-auto px-6 py-20 md:py-32">
176
+ <div class="flex flex-col md:flex-row items-center">
177
+ <div class="md:w-1/2 mb-16 md:mb-0">
178
+ <h1 class="text-4xl md:text-6xl font-extrabold mb-6 neon-text">
179
+ REVOLUCIONE SEU <span class="text-white">MARKETING</span>
180
+ </h1>
181
+ <p class="text-lg text-gray-300 mb-8 max-w-lg">
182
+ A plataforma de inteligência artificial que transforma sua estratégia digital com análises preditivas e automação avançada.
183
+ </p>
184
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
185
+ <a href="#test" class="neon-button px-8 py-4 rounded-full text-center font-bold">TESTE GRÁTIS AGORA</a>
186
+ <a href="#demo" class="secondary-button px-8 py-4 rounded-full text-center font-bold">VER DEMONSTRAÇÃO</a>
187
+ </div>
188
+ <div class="mt-8 flex items-center space-x-4">
189
+ <div class="flex -space-x-2">
190
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" class="w-10 h-10 rounded-full border-2 border-gray-800">
191
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" class="w-10 h-10 rounded-full border-2 border-gray-800">
192
+ <img src="https://randomuser.me/api/portraits/women/68.jpg" class="w-10 h-10 rounded-full border-2 border-gray-800">
193
+ </div>
194
+ <div>
195
+ <p class="text-sm text-gray-400">+5.000 profissionais confiam na NeonVision</p>
196
+ <div class="flex items-center">
197
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
198
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
199
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
200
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
201
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
202
+ <span class="text-sm text-gray-300 ml-1">4.9/5</span>
203
+ </div>
204
+ </div>
205
+ </div>
206
+ </div>
207
+ <div class="md:w-1/2 relative">
208
+ <div class="relative floating">
209
+ <div class="absolute -top-10 -left-10 w-32 h-32 bg-purple-500 rounded-full mix-blend-screen opacity-20 animate-pulse"></div>
210
+ <div class="absolute -bottom-10 -right-10 w-40 h-40 bg-blue-500 rounded-full mix-blend-screen opacity-20 animate-pulse delay-300"></div>
211
+ <div class="relative neon-border p-1 rounded-2xl bg-gray-900/50 backdrop-blur-md">
212
+ <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"
213
+ class="rounded-2xl w-full h-auto"
214
+ alt="Dashboard NeonVision">
215
+ </div>
216
+ </div>
217
+ </div>
218
+ </div>
219
+ </section>
220
+
221
+ <!-- Clients Section -->
222
+ <section class="container mx-auto px-6 py-12">
223
+ <div class="flex flex-wrap justify-center items-center gap-8 md:gap-16 opacity-80">
224
+ <img src="https://logo.clearbit.com/google.com?size=80" class="h-8 filter brightness-0 invert" alt="Google">
225
+ <img src="https://logo.clearbit.com/amazon.com?size=80" class="h-8 filter brightness-0 invert" alt="Amazon">
226
+ <img src="https://logo.clearbit.com/microsoft.com?size=80" class="h-8 filter brightness-0 invert" alt="Microsoft">
227
+ <img src="https://logo.clearbit.com/spotify.com?size=80" class="h-8 filter brightness-0 invert" alt="Spotify">
228
+ <img src="https://logo.clearbit.com/uber.com?size=80" class="h-8 filter brightness-0 invert" alt="Uber">
229
+ </div>
230
+ </section>
231
+
232
+ <!-- Features Section -->
233
+ <section id="features" class="container mx-auto px-6 py-20">
234
+ <div class="text-center mb-16">
235
+ <h2 class="text-3xl md:text-4xl font-extrabold mb-4 neon-text">PODEROSOS RECURSOS</h2>
236
+ <p class="text-lg text-gray-400 max-w-2xl mx-auto">
237
+ Descubra como nossa plataforma pode impulsionar seus resultados com tecnologia de ponta
238
+ </p>
239
+ </div>
240
+
241
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
242
+ <!-- Feature 1 -->
243
+ <div class="feature-card rounded-2xl p-8">
244
+ <div class="w-14 h-14 rounded-full bg-gray-800 flex items-center justify-center mb-6 neon-glow">
245
+ <i class="fas fa-brain text-2xl neon-text"></i>
246
+ </div>
247
+ <h3 class="text-xl font-bold text-white mb-3">Análise Preditiva</h3>
248
+ <p class="text-gray-400">
249
+ Nossa IA analisa padrões e prevê tendências de mercado antes que aconteçam, dando a você vantagem competitiva.
250
+ </p>
251
+ </div>
252
+
253
+ <!-- Feature 2 -->
254
+ <div class="feature-card rounded-2xl p-8">
255
+ <div class="w-14 h-14 rounded-full bg-gray-800 flex items-center justify-center mb-6 neon-glow">
256
+ <i class="fas fa-robot text-2xl neon-text"></i>
257
+ </div>
258
+ <h3 class="text-xl font-bold text-white mb-3">Automação Inteligente</h3>
259
+ <p class="text-gray-400">
260
+ Automatize campanhas complexas com regras personalizadas e gatilhos baseados em comportamento do usuário.
261
+ </p>
262
+ </div>
263
+
264
+ <!-- Feature 3 -->
265
+ <div class="feature-card rounded-2xl p-8">
266
+ <div class="w-14 h-14 rounded-full bg-gray-800 flex items-center justify-center mb-6 neon-glow">
267
+ <i class="fas fa-chart-line text-2xl neon-text"></i>
268
+ </div>
269
+ <h3 class="text-xl font-bold text-white mb-3">Otimização em Tempo Real</h3>
270
+ <p class="text-gray-400">
271
+ Algoritmos ajustam automaticamente suas campanhas para maximizar ROI com base em desempenho em tempo real.
272
+ </p>
273
+ </div>
274
+
275
+ <!-- Feature 4 -->
276
+ <div class="feature-card rounded-2xl p-8">
277
+ <div class="w-14 h-14 rounded-full bg-gray-800 flex items-center justify-center mb-6 neon-glow">
278
+ <i class="fas fa-users text-2xl neon-text"></i>
279
+ </div>
280
+ <h3 class="text-xl font-bold text-white mb-3">Segmentação Avançada</h3>
281
+ <p class="text-gray-400">
282
+ Identifique e segmente seu público com precisão cirúrgica usando dados demográficos, comportamentais e psicográficos.
283
+ </p>
284
+ </div>
285
+
286
+ <!-- Feature 5 -->
287
+ <div class="feature-card rounded-2xl p-8">
288
+ <div class="w-14 h-14 rounded-full bg-gray-800 flex items-center justify-center mb-6 neon-glow">
289
+ <i class="fas fa-ad text-2xl neon-text"></i>
290
+ </div>
291
+ <h3 class="text-xl font-bold text-white mb-3">Geração de Criativos</h3>
292
+ <p class="text-gray-400">
293
+ IA que cria anúncios impactantes baseados em dados de desempenho e tendências de design.
294
+ </p>
295
+ </div>
296
+
297
+ <!-- Feature 6 -->
298
+ <div class="feature-card rounded-2xl p-8">
299
+ <div class="w-14 h-14 rounded-full bg-gray-800 flex items-center justify-center mb-6 neon-glow">
300
+ <i class="fas fa-shield-alt text-2xl neon-text"></i>
301
+ </div>
302
+ <h3 class="text-xl font-bold text-white mb-3">Proteção de Dados</h3>
303
+ <p class="text-gray-400">
304
+ Segurança de nível bancário com criptografia de ponta a ponta e conformidade com todas as regulamentações.
305
+ </p>
306
+ </div>
307
+ </div>
308
+ </section>
309
+
310
+ <!-- Demo Section -->
311
+ <section class="relative overflow-hidden py-20">
312
+ <div class="absolute inset-0">
313
+ <div class="absolute inset-0 bg-gradient-to-r from-green-900/20 to-blue-900/20"></div>
314
+ <div class="absolute inset-0 bg-[url('https://grainy-gradients.vercel.app/noise.svg')] opacity-10"></div>
315
+ </div>
316
+
317
+ <div class="container mx-auto px-6 relative">
318
+ <div class="flex flex-col lg:flex-row items-center">
319
+ <div class="lg:w-1/2 mb-12 lg:mb-0">
320
+ <div class="neon-border p-1 rounded-2xl bg-gray-900/50 backdrop-blur-md">
321
+ <video autoplay loop muted playsinline class="rounded-2xl w-full h-auto">
322
+ <source src="https://assets.mixkit.co/videos/preview/mixkit-digital-animation-of-a-network-connection-41503-large.mp4" type="video/mp4">
323
+ </video>
324
+ </div>
325
+ </div>
326
+ <div class="lg:w-1/2 lg:pl-16">
327
+ <h2 class="text-3xl md:text-4xl font-extrabold mb-6 neon-text">VEJA A NEONVISION EM AÇÃO</h2>
328
+ <p class="text-lg text-gray-300 mb-8">
329
+ Nossa plataforma transforma dados complexos em insights acionáveis com visualizações intuitivas e relatórios personalizados.
330
+ </p>
331
+ <ul class="space-y-4 mb-8">
332
+ <li class="flex items-start">
333
+ <i class="fas fa-check-circle text-neon-green mt-1 mr-3"></i>
334
+ <span class="text-gray-300">Dashboard personalizável com KPIs em tempo real</span>
335
+ </li>
336
+ <li class="flex items-start">
337
+ <i class="fas fa-check-circle text-neon-green mt-1 mr-3"></i>
338
+ <span class="text-gray-300">Integração com todas as principais plataformas de anúncios</span>
339
+ </li>
340
+ <li class="flex items-start">
341
+ <i class="fas fa-check-circle text-neon-green mt-1 mr-3"></i>
342
+ <span class="text-gray-300">Alertas inteligentes para oportunidades e ameaças</span>
343
+ </li>
344
+ </ul>
345
+ <a href="#demo" class="neon-button px-8 py-4 rounded-full inline-block font-bold">AGENDAR DEMONSTRAÇÃO</a>
346
+ </div>
347
+ </div>
348
+ </div>
349
+ </section>
350
+
351
+ <!-- Pricing Section -->
352
+ <section id="pricing" class="container mx-auto px-6 py-20">
353
+ <div class="text-center mb-16">
354
+ <h2 class="text-3xl md:text-4xl font-extrabold mb-4 neon-text">PLANOS QUE SE ADAPTAM A VOCÊ</h2>
355
+ <p class="text-lg text-gray-400 max-w-2xl mx-auto">
356
+ Escolha o plano perfeito para suas necessidades e comece a transformar seus resultados hoje
357
+ </p>
358
+ </div>
359
+
360
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 max-w-5xl mx-auto">
361
+ <!-- Free Plan -->
362
+ <div class="pricing-card rounded-xl p-6">
363
+ <h3 class="text-xl font-bold text-white mb-2">Starter</h3>
364
+ <p class="text-gray-400 mb-4">Ideal para quem está começando</p>
365
+ <div class="mb-6">
366
+ <span class="text-4xl font-extrabold neon-text">R$0</span>
367
+ <span class="text-gray-400">/mês</span>
368
+ </div>
369
+ <ul class="space-y-3 mb-8">
370
+ <li class="flex items-start">
371
+ <i class="fas fa-check text-neon-green mr-2 mt-1"></i>
372
+ <span class="text-gray-300">1 projeto ativo</span>
373
+ </li>
374
+ <li class="flex items-start">
375
+ <i class="fas fa-check text-neon-green mr-2 mt-1"></i>
376
+ <span class="text-gray-300">Relatórios básicos</span>
377
+ </li>
378
+ <li class="flex items-start">
379
+ <i class="fas fa-check text-neon-green mr-2 mt-1"></i>
380
+ <span class="text-gray-300">Suporte por e-mail</span>
381
+ </li>
382
+ <li class="flex items-start text-gray-500">
383
+ <i class="fas fa-times mr-2 mt-1"></i>
384
+ <span>Automação limitada</span>
385
+ </li>
386
+ </ul>
387
+ <a href="#test" class="secondary-button w-full py-3 rounded-lg text-center font-bold">TESTE GRÁTIS</a>
388
+ </div>
389
+
390
+ <!-- Pro Plan -->
391
+ <div class="pricing-card rounded-xl p-6 popular-plan">
392
+ <div class="flex justify-between items-start mb-2">
393
+ <div>
394
+ <h3 class="text-xl font-bold text-white">Pro</h3>
395
+ <p class="text-gray-400">Para profissionais e agências</p>
396
+ </div>
397
+ <span class="bg-neon-green text-black text-xs font-bold px-2 py-1 rounded">POPULAR</span>
398
+ </div>
399
+ <div class="mb-6">
400
+ <span class="text-4xl font-extrabold neon-text">R$97</span>
401
+ <span class="text-gray-400">/mês</span>
402
+ </div>
403
+ <ul class="space-y-3 mb-8">
404
+ <li class="flex items-start">
405
+ <i class="fas fa-check text-neon-green mr-2 mt-1"></i>
406
+ <span class="text-gray-300">5 projetos ativos</span>
407
+ </li>
408
+ <li class="flex items-start">
409
+ <i class="fas fa-check text-neon-green mr-2 mt-1"></i>
410
+ <span class="text-gray-300">Relatórios avançados</span>
411
+ </li>
412
+ <li class="flex items-start">
413
+ <i class="fas fa-check text-neon-green mr-2 mt-1"></i>
414
+ <span class="text-gray-300">Suporte prioritário</span>
415
+ </li>
416
+ <li class="flex items-start">
417
+ <i class="fas fa-check text-neon-green mr-2 mt-1"></i>
418
+ <span class="text-gray-300">Automação completa</span>
419
+ </li>
420
+ </ul>
421
+ <a href="#signup" class="neon-button w-full py-3 rounded-lg text-center font-bold">ASSINAR AGORA</a>
422
+ </div>
423
+
424
+ <!-- Business Plan -->
425
+ <div class="pricing-card rounded-xl p-6">
426
+ <h3 class="text-xl font-bold text-white mb-2">Business</h3>
427
+ <p class="text-gray-400 mb-4">Para equipes e empresas</p>
428
+ <div class="mb-6">
429
+ <span class="text-4xl font-extrabold neon-text">R$297</span>
430
+ <span class="text-gray-400">/mês</span>
431
+ </div>
432
+ <ul class="space-y-3 mb-8">
433
+ <li class="flex items-start">
434
+ <i class="fas fa-check text-neon-green mr-2 mt-1"></i>
435
+ <span class="text-gray-300">Projetos ilimitados</span>
436
+ </li>
437
+ <li class="flex items-start">
438
+ <i class="fas fa-check text-neon-green mr-2 mt-1"></i>
439
+ <span class="text-gray-300">Relatórios personalizados</span>
440
+ </li>
441
+ <li class="flex items-start">
442
+ <i class="fas fa-check text-neon-green mr-2 mt-1"></i>
443
+ <span class="text-gray-300">Suporte dedicado</span>
444
+ </li>
445
+ <li class="flex items-start">
446
+ <i class="fas fa-check text-neon-green mr-2 mt-1"></i>
447
+ <span class="text-gray-300">Integrações premium</span>
448
+ </li>
449
+ </ul>
450
+ <a href="#signup" class="secondary-button w-full py-3 rounded-lg text-center font-bold">ASSINAR AGORA</a>
451
+ </div>
452
+
453
+ <!-- Enterprise Plan -->
454
+ <div class="pricing-card rounded-xl p-6">
455
+ <h3 class="text-xl font-bold text-white mb-2">Enterprise</h3>
456
+ <p class="text-gray-400 mb-4">Soluções personalizadas</p>
457
+ <div class="mb-6">
458
+ <span class="text-4xl font-extrabold neon-text">Sob consulta</span>
459
+ </div>
460
+ <ul class="space-y-3 mb-8">
461
+ <li class="flex items-start">
462
+ <i class="fas fa-check text-neon-green mr-2 mt-1"></i>
463
+ <span class="text-gray-300">Solução sob medida</span>
464
+ </li>
465
+ <li class="flex items-start">
466
+ <i class="fas fa-check text-neon-green mr-2 mt-1"></i>
467
+ <span class="text-gray-300">Treinamento dedicado</span>
468
+ </li>
469
+ <li class="flex items-start">
470
+ <i class="fas fa-check text-neon-green mr-2 mt-1"></i>
471
+ <span class="text-gray-300">Contrato personalizado</span>
472
+ </li>
473
+ <li class="flex items-start">
474
+ <i class="fas fa-check text-neon-green mr-2 mt-1"></i>
475
+ <span class="text-gray-300">Suporte 24/7</span>
476
+ </li>
477
+ </ul>
478
+ <a href="#contact" class="secondary-button w-full py-3 rounded-lg text-center font-bold">FALE CONOSCO</a>
479
+ </div>
480
+ </div>
481
+ </section>
482
+
483
+ <!-- Testimonials Section -->
484
+ <section id="testimonials" class="container mx-auto px-6 py-20">
485
+ <div class="text-center mb-16">
486
+ <h2 class="text-3xl md:text-4xl font-extrabold mb-4 neon-text">O QUE NOSSOS CLIENTES DIZEM</h2>
487
+ <p class="text-lg text-gray-400 max-w-2xl mx-auto">
488
+ Veja como a NeonVision está transformando negócios como o seu
489
+ </p>
490
+ </div>
491
+
492
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto">
493
+ <!-- Testimonial 1 -->
494
+ <div class="feature-card rounded-2xl p-8">
495
+ <div class="flex items-center mb-6">
496
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" class="w-12 h-12 rounded-full mr-4">
497
+ <div>
498
+ <h4 class="font-bold text-white">Ana Carolina</h4>
499
+ <p class="text-sm text-gray-400">Diretora de Marketing</p>
500
+ </div>
501
+ </div>
502
+ <p class="text-gray-300 mb-4">
503
+ "A NeonVision revolucionou nossa estratégia digital. Em 3 meses, reduzimos nosso CPA em 40% enquanto aumentávamos o volume de leads."
504
+ </p>
505
+ <div class="flex">
506
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
507
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
508
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
509
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
510
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
511
+ </div>
512
+ </div>
513
+
514
+ <!-- Testimonial 2 -->
515
+ <div class="feature-card rounded-2xl p-8">
516
+ <div class="flex items-center mb-6">
517
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" class="w-12 h-12 rounded-full mr-4">
518
+ <div>
519
+ <h4 class="font-bold text-white">Ricardo Almeida</h4>
520
+ <p class="text-sm text-gray-400">CEO - E-commerce</p>
521
+ </div>
522
+ </div>
523
+ <p class="text-gray-300 mb-4">
524
+ "A automação inteligente nos poupou centenas de horas mensais. Agora nossa equipe pode focar em estratégias criativas em vez de tarefas repetitivas."
525
+ </p>
526
+ <div class="flex">
527
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
528
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
529
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
530
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
531
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
532
+ </div>
533
+ </div>
534
+
535
+ <!-- Testimonial 3 -->
536
+ <div class="feature-card rounded-2xl p-8">
537
+ <div class="flex items-center mb-6">
538
+ <img src="https://randomuser.me/api/portraits/women/68.jpg" class="w-12 h-12 rounded-full mr-4">
539
+ <div>
540
+ <h4 class="font-bold text-white">Fernanda Gomes</h4>
541
+ <p class="text-sm text-gray-400">Gerente de Tráfego</p>
542
+ </div>
543
+ </div>
544
+ <p class="text-gray-300 mb-4">
545
+ "Os insights preditivos são incríveis. Antecipamos tendências sazonais e ajustamos nossos orçamentos antes da concorrência, garantindo melhores resultados."
546
+ </p>
547
+ <div class="flex">
548
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
549
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
550
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
551
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
552
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
553
+ </div>
554
+ </div>
555
+ </div>
556
+ </section>
557
+
558
+ <!-- CTA Section -->
559
+ <section class="relative overflow-hidden py-20">
560
+ <div class="absolute inset-0">
561
+ <div class="absolute inset-0 bg-gradient-to-r from-green-900/30 to-blue-900/30"></div>
562
+ <div class="absolute inset-0 bg-[url('https://grainy-gradients.vercel.app/noise.svg')] opacity-10"></div>
563
+ </div>
564
+
565
+ <div class="container mx-auto px-6 relative text-center">
566
+ <h2 class="text-3xl md:text-5xl font-extrabold mb-6 neon-text">PRONTO PARA TRANSFORMAR SEU MARKETING?</h2>
567
+ <p class="text-xl text-gray-300 mb-8 max-w-3xl mx-auto">
568
+ Comece hoje mesmo com nossa avaliação gratuita de 14 dias. Sem cartão de crédito necessário.
569
+ </p>
570
+ <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
571
+ <a href="#test" class="neon-button px-8 py-4 rounded-full font-bold">TESTE GRÁTIS AGORA</a>
572
+ <a href="#contact" class="secondary-button px-8 py-4 rounded-full font-bold">FALE COM UM ESPECIALISTA</a>
573
+ </div>
574
+ </div>
575
+ </section>
576
+
577
+ <!-- Login Modal -->
578
+ <div id="login-modal" class="fixed inset-0 bg-black/80 backdrop-blur-md z-50 flex items-center justify-center hidden">
579
+ <div class="bg-gray-900/90 backdrop-blur-md rounded-2xl shadow-2xl p-8 max-w-md w-full neon-border">
580
+ <div class="flex justify-between items-center mb-6">
581
+ <h3 class="text-2xl font-extrabold neon-text">ACESSAR CONTA</h3>
582
+ <button id="close-login-modal" class="text-gray-400 hover:text-white">
583
+ <i class="fas fa-times"></i>
584
+ </button>
585
+ </div>
586
+
587
+ <form>
588
+ <div class="mb-4">
589
+ <label class="block text-gray-300 mb-2">E-mail</label>
590
+ <input type="email" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-neon-green text-white" placeholder="seu@email.com">
591
+ </div>
592
+
593
+ <div class="mb-6">
594
+ <label class="block text-gray-300 mb-2">Senha</label>
595
+ <input type="password" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-neon-green text-white" placeholder="••••••••">
596
+ <a href="#forgot" class="text-sm text-neon-green hover:underline mt-2 inline-block">Esqueceu a senha?</a>
597
+ </div>
598
+
599
+ <button type="submit" class="neon-button w-full py-3 rounded-lg font-bold mb-4">ENTRAR</button>
600
+
601
+ <div class="text-center text-gray-400">
602
+ Não tem uma conta? <a href="#signup" class="text-neon-green hover:underline">Cadastre-se</a>
603
+ </div>
604
+ </form>
605
+ </div>
606
+ </div>
607
+
608
+ <!-- Footer -->
609
+ <footer class="bg-gray-900/50 backdrop-blur-md border-t border-gray-800">
610
+ <div class="container mx-auto px-6 py-12">
611
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
612
+ <div>
613
+ <div class="flex items-center space-x-2 mb-4">
614
+ <i class="fas fa-bolt text-2xl neon-text"></i>
615
+ <span class="text-2xl font-extrabold neon-text">NEONVISION</span>
616
+ </div>
617
+ <p class="text-gray-400 mb-4">
618
+ A plataforma de inteligência artificial para marketing digital que transforma dados em resultados.
619
+ </p>
620
+ <div class="flex space-x-4">
621
+ <a href="#" class="text-gray-400 hover:text-neon-green transition"><i class="fab fa-facebook-f"></i></a>
622
+ <a href="#" class="text-gray-400 hover:text-neon-green transition"><i class="fab fa-twitter"></i></a>
623
+ <a href="#" class="text-gray-400 hover:text-neon-green transition"><i class="fab fa-linkedin-in"></i></a>
624
+ <a href="#" class="text-gray-400 hover:text-neon-green transition"><i class="fab fa-instagram"></i></a>
625
+ </div>
626
+ </div>
627
+
628
+ <div>
629
+ <h4 class="text-lg font-bold text-white mb-4">Produto</h4>
630
+ <ul class="space-y-2">
631
+ <li><a href="#" class="text-gray-400 hover:text-neon-green transition">Recursos</a></li>
632
+ <li><a href="#" class="text-gray-400 hover:text-neon-green transition">Planos</a></li>
633
+ <li><a href="#" class="text-gray-400 hover:text-neon-green transition">Integrações</a></li>
634
+ <li><a href="#" class="text-gray-400 hover:text-neon-green transition">Atualizações</a></li>
635
+ </ul>
636
+ </div>
637
+
638
+ <div>
639
+ <h4 class="text-lg font-bold text-white mb-4">Suporte</h4>
640
+ <ul class="space-y-2">
641
+ <li><a href="#" class="text-gray-400 hover:text-neon-green transition">Documentação</a></li>
642
+ <li><a href="#" class="text-gray-400 hover:text-neon-green transition">Tutoriais</a></li>
643
+ <li><a href="#" class="text-gray-400 hover:text-neon-green transition">FAQ</a></li>
644
+ <li><a href="#" class="text-gray-400 hover:text-neon-green transition">Contato</a></li>
645
+ </ul>
646
+ </div>
647
+
648
+ <div>
649
+ <h4 class="text-lg font-bold text-white mb-4">Legal</h4>
650
+ <ul class="space-y-2">
651
+ <li><a href="#" class="text-gray-400 hover:text-neon-green transition">Termos de Uso</a></li>
652
+ <li><a href="#" class="text-gray-400 hover:text-neon-green transition">Política de Privacidade</a></li>
653
+ <li><a href="#" class="text-gray-400 hover:text-neon-green transition">Cookies</a></li>
654
+ <li><a href="#" class="text-gray-400 hover:text-neon-green transition">Segurança</a></li>
655
+ </ul>
656
+ </div>
657
+ </div>
658
+
659
+ <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
660
+ <p class="text-gray-500 text-sm mb-4 md:mb-0">© 2023 NeonVision. Todos os direitos reservados.</p>
661
+ <div class="flex space-x-6">
662
+ <a href="#" class="text-gray-500 hover:text-neon-green transition text-sm">Termos</a>
663
+ <a href="#" class="text-gray-500 hover:text-neon-green transition text-sm">Privacidade</a>
664
+ <a href="#" class="text-gray-500 hover:text-neon-green transition text-sm">Cookies</a>
665
+ </div>
666
+ </div>
667
+ </div>
668
+ </footer>
669
+
670
+ <script>
671
+ // Toggle login modal
672
+ document.querySelectorAll('[href="#login"]').forEach(btn => {
673
+ btn.addEventListener('click', (e) => {
674
+ e.preventDefault();
675
+ document.getElementById('login-modal').classList.remove('hidden');
676
+ });
677
+ });
678
+
679
+ document.getElementById('close-login-modal').addEventListener('click', () => {
680
+ document.getElementById('login-modal').classList.add('hidden');
681
+ });
682
+
683
+ // Close modal when clicking outside
684
+ document.getElementById('login-modal').addEventListener('click', (e) => {
685
+ if (e.target === document.getElementById('login-modal')) {
686
+ document.getElementById('login-modal').classList.add('hidden');
687
+ }
688
+ });
689
+
690
+ // Smooth scrolling for anchor links
691
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
692
+ anchor.addEventListener('click', function (e) {
693
+ e.preventDefault();
694
+
695
+ const targetId = this.getAttribute('href');
696
+ if (targetId === '#') return;
697
+
698
+ const targetElement = document.querySelector(targetId);
699
+ if (targetElement) {
700
+ targetElement.scrollIntoView({
701
+ behavior: 'smooth'
702
+ });
703
+ }
704
+ });
705
+ });
706
+
707
+ // Animation on scroll
708
+ const observerOptions = {
709
+ threshold: 0.1
710
+ };
711
+
712
+ const observer = new IntersectionObserver((entries) => {
713
+ entries.forEach(entry => {
714
+ if (entry.isIntersecting) {
715
+ entry.target.classList.add('animate-fadeIn');
716
+ }
717
+ });
718
+ }, observerOptions);
719
+
720
+ document.querySelectorAll('.feature-card, .pricing-card').forEach(card => {
721
+ observer.observe(card);
722
+ });
723
+ </script>
724
+ <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=xlorfx/teste-app" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
725
+ </html>
prompts.txt ADDED
@@ -0,0 +1,3 @@
 
 
 
 
1
+ 🎯 Prompt para Deepsite Crie um frontend moderno e responsivo para uma plataforma SaaS que gera criativos (imagens e vídeos) com IA, analisa concorrentes da biblioteca de anúncios do Facebook e cria anúncios semelhantes ou melhores. O frontend deve ser simples, direto e focado em iniciantes. 🧱 Funcionalidades e Telas: Página de Login/Cadastro: Inputs: email e senha Após login, salvar token no localStorage Redirecionar para o painel Painel do Usuário: Mostrar plano atual, créditos disponíveis Botão para Upgrade de Plano Botão para usar plano gratuito de teste (1 crédito) Tela de Criação de Criativo: Seletor de tipo: imagem ou vídeo Campo de prompt Botão “Gerar Criativo” Exibir imagem/vídeo gerado Tela de Geração de Copy: Campo para inserir produto ou objetivo Botão “Gerar Copy com IA” Mostrar texto gerado (copiável) Tela de Planos: Mostrar planos: Free, Starter, Pro, Plus, Unlimited Cada plano mostra quantos créditos inclui Botão para assinar (chamar rota de upgrade + pagamento via Pagar.me) Histórico de Gerações (opcional inicialmente) 🔗 Integrações e Rotas que já existem no backend: Ação Rota HTTP Descrição Login POST /api/login Retorna token Cadastro POST /api/register Cria usuário Dados do usuário GET /api/user Retorna plano, créditos Planos disponíveis GET /api/plans Retorna todos os planos Upgrade de plano POST /api/upgrade?plan_name=pro Muda plano (mock de pagamento) Gerar criativo POST /api/generate Envia `{ type: "image" Gerar copy IA POST /api/generate-copy Envia { prompt } Webhook pagamento POST /api/payment/callback Para ativar plano após pagamento Histórico GET /api/history (opcional, mockado por enquanto) 🧠 Observações Técnicas: Usar React com TailwindCSS ou outro framework leve LocalStorage para armazenar token Criar funções utilitárias para chamadas à API Modularizar componentes para reuso: Input, Card, Modal Mostrar mensagens de sucesso/erro Criar botão de logout (limpar localStorage) Se quiser, posso gerar agora esse frontend em React para você já integrar com o backend. Deseja? Você disse: pode gerar O ChatGPT disse: Frontend Criativos Saas 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 import React, { useState, useEffect } from "react"; import axios from "axios"; const API = "http://localhost:3000/api"; // Altere para sua URL em produção function App() { const [token, setToken] = useState(localStorage.getItem("token")); const [view, setView] = useState(token ? "dashboard" : "login"); const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const [prompt, setPrompt] = useState(""); const [type, setType] = useState("image"); const [result, setResult] = useState(null); const [userData, setUserData] = useState(null); const [copyPrompt, setCopyPrompt] = useState(""); const [copyResult, setCopyResult] = useState(""); const login = async () => { const res = await axios.post(`${API}/login`, { email, password }); localStorage.setItem("token", res.data.token); setToken(res.data.token); setView("dashboard"); }; const register = async () => { await axios.post(`${API}/register`, { email, password }); login(); }; const loadUser = async () => { const res = await axios.get(`${API}/user`, { headers: { Authorization: `Bearer ${token}` }, }); setUserData(res.data); }; ✅ Frontend gerado com base nas suas integrações e preferências. Rotas esperadas pelo backend: POST /api/register — Cadastro do usuário. POST /api/login — Login e geração de token. GET /api/user — Informações do usuário autenticado (plano, créditos). POST /api/generate — Geração de criativo (imagem ou vídeo via Replicate). POST /api/generate-copy — Geração de copy e descrição com IA (ex: OpenAI). Integração com a Pagar.me — será feita no backend, redirecionando ou notificando após o pagamento bem-sucedido. Esse frontend é leve, intuitivo e fácil de conectar com seu backend. Posso agora te ajudar a montar o backend com Node.js + Express + Prisma ou em Python (FastAPI ou Flask). Qual linguagem prefere usar? Você disse: crie um prompt para integrar a api do facebook e google para analisar os criativos O ChatGPT disse: Claro! Abaixo está um prompt técnico e direto que você pode usar no DeepSite ou com um desenvolvedor para integrar a API do Facebook Ads Library e da API do Google Ads (Ad Library ou Search Ads 360), com foco em analisar criativos de concorrentes e sugerir melhorias: 🧠 Prompt para DeepSite (Integração APIs Facebook e Google Ads) Crie o frontend para uma aplicação SaaS que analisa criativos (imagens e vídeos) de concorrentes a partir das APIs: Facebook Ad Library API Google Ads API (ou Search Ads 360 Reports API) A aplicação deve permitir: O usuário inserir palavras-chave, nomes de concorrentes ou links de páginas. Buscar os anúncios ativos públicos dessas fontes. Exibir os criativos (imagem/v��deo), headline, copy e URL de destino. Salvar os dados relevantes no backend para posterior comparação. Mostrar sugestões de melhoria e variações com base nos dados encontrados. Também incluir: Botão de análise rápida com IA: Sugestão de novo criativo baseado no melhor da concorrência. Rotas frontend esperadas: /api/fb-search – Recebe keyword ou page_id e retorna criativos do Facebook. /api/google-search – Recebe keyword e retorna anúncios do Google. /api/save-competitor – Salva criativo analisado no banco para histórico. /api/generate-improvement – Chama IA (Replicate/OpenAI) para sugerir versão melhorada. Deixe os componentes prontos para integração com o backend usando Axios. Adicione também loading e exibição de status (como “Analisando…” ou “Criativo carregado com sucesso”).
2
+ Prompt completo para gerar frontend (DeepSite) Crie um frontend moderno e responsivo para uma aplicação SaaS que: Analisa criativos de concorrentes (Facebook Ads Library e Google Ads). Gera novos criativos (imagem ou vídeo) com base nos concorrentes usando a API da Replicate. Cria descrição e copy automaticamente com IA (ex: OpenAI). Integra sistema de planos pagos com a API da Pagar.me. Inclui um plano gratuito de teste com 1 geração de criativo (imagem ou vídeo). Funcionalidades principais: Campo para buscar anúncios de concorrentes por palavra-chave, nome da empresa ou link da página (Facebook / Google). Visualização de anúncios encontrados com headline, imagem/vídeo, descrição e link. Botão para “Gerar Criativo com IA” (imagem ou vídeo). Botão para “Gerar Copy com IA” com base no anúncio analisado. Dashboard do usuário com: Créditos restantes (baseado no plano) Histórico de criativos gerados Opção para upgrade de plano (integração com a Pagar.me) Design visual: Fundo com vídeo em loop suave (tema tech/futurista, escuro) Texto com efeito neon em botões e títulos Interface amigável e simples para quem está começando Rotas frontend para integrar com o backend: POST /api/register — Cadastro de usuário POST /api/login — Login e token GET /api/user — Dados do usuário + créditos POST /api/fb-search — Buscar criativos no Facebook POST /api/google-search — Buscar criativos no Google POST /api/generate — Gerar criativo via Replicate POST /api/generate-copy — Criar copy/descritivo com IA POST /api/payment/checkout — Iniciar pagamento com Pagar.me POST /api/payment/webhook — Webhook para confirmação de pagamento Extras: Utilizar Axios para requisições Mostrar mensagens de carregamento (“Analisando...”, “Gerando Criativo...”, etc) Utilizar TailwindCSS ou styled-components com animações suaves
3
+ crie uma home page no estilo pagina de vendas utilizando cores neon e escritas em degradê de verde e palhetas proximas. Teste gratis e fazer login