Hugging Face's logo

Spaces:
Pummel3889
/
ddepsite-vd
Running

App Files Community
Pummel3889 commited on
Commit
e04a232
·
verified ·
1 Parent(s): 19ac1dd

# 🤖 Landing Page - Agência de IA e Automação ## **BLOCO 1: CONEXÃO E PROMESSA PRINCIPAL** ### **PROMESSA PRINCIPAL:** **"Reduza 80% do Tempo em Tarefas Repetitivas com IA em 30 Dias (Ou Seu Dinheiro de Volta)"** ### **SUB-PROMESSA:** *Transformamos seu negócio com automações inteligentes que trabalham 24/7 - enquanto você foca no que realmente importa: crescer sua empresa* ### **BULLETS DE BENEFÍCIOS:** • ⚡ **Automação de vendas** que converte leads em clientes no piloto automático • 📊 **Relatórios inteligentes** gerados automaticamente toda segunda-feira às 9h • 🎯 **Atendimento via IA** que resolve 90% das dúvidas dos clientes instantaneamente ### **BOTÃO:** **[QUERO AUTOMATIZAR MEU NEGÓCIO AGORA]** ### **SUB-TEXTO DO BOTÃO:** *✅ Mais de 200 empresas já economizam 40h/semana com nossas soluções* ### **ELEMENTO DE URGÊNCIA:** 🔥 **OFERTA LIMITADA:** Apenas 15 vagas para implementação em Agosto - 7 já preenchidas ### **DESCRIÇÃO DA IMAGEM:** Dashboard moderno com gráficos ascendentes, ícones de automação (engrenagens, robôs, setas de fluxo) e uma interface limpa mostrando processos sendo executados automaticamente. Cores predominantes: azul tecnológico e verde (sucesso). --- ## **BLOCO 2: REFORÇO DO DESEJO - "COMO FUNCIONA"** ### **TÍTULO:** **Como Transformamos Seu Negócio em Uma Máquina Automatizada** ### **BULLETS OBJETIVOS:** • **DIAGNÓSTICO** → Mapeamos seus processos em 48h e identificamos onde a IA pode atuar • **IMPLEMENTAÇÃO** → Criamos e testamos as automações personalizadas para seu negócio • **RESULTADOS** → Você economiza tempo e aumenta lucros desde a primeira semana ### **CTA + BOTÃO:** *Quer ver como funcionaria no seu negócio?* **[SOLICITAR DIAGNÓSTICO GRATUITO]** ### **DESCRIÇÃO DA IMAGEM:** Infográfico em 3 etapas visuais: 1) Lupa analisando processos, 2) Engrenagens e códigos sendo montados, 3) Gráfico de crescimento com símbolos de dinheiro e tempo. Estilo clean e tecnológico. --- ## **BLOCO 3: AUTORIDADE E PROVA SOCIAL** ### **BIO/AUTORIDADE:** **"Somos especialistas certificados em IA com mais de 50 projetos entregues"** *Nossa equipe combina 15 anos de experiência em tecnologia com as mais avançadas ferramentas de IA do mercado. Já ajudamos desde startups até empresas de 500+ funcionários a automatizar operações e multiplicar resultados.* ### **ELEMENTOS DE PROVA SOCIAL:** • 📈 **R$ 2.3 milhões** economizados pelos nossos clientes em 2024 • ⭐ **4.9/5 estrelas** de satisfação (127 avaliações no Google) • 🏆 **Certificações oficiais:** OpenAI, Microsoft AI, Google Cloud AI ### **DEPOIMENTO DESTACADO:** *"Em 3 meses automatizamos 70% do atendimento e aumentamos vendas em 45%. O ROI foi de 380%"* **- Carlos Mendes, CEO da TechSolutions** ### **CTA + BOTÃO:** *Pronto para ter resultados como esses?* **[COMEÇAR MINHA AUTOMAÇÃO]** --- ## **BLOCO 4: CONTATO E LOCALIZAÇÃO** ### **INFORMAÇÕES DE CONTATO:** **📞 WhatsApp:** (11) 99999-8888 **📧 Email:** [email protected] **📍 Endereço:** Av. Paulista, 1000 - São Paulo/SP **🕒 Horário:** Segunda a Sexta, 9h às 18h ### **FORMULÁRIO SIMPLIFICADO:** ``` [ Nome Completo ] [ Email ] [ WhatsApp ] [ Empresa ] [ Maior desafio atual ] [ENVIAR MENSAGEM] ``` ### **GARANTIAS FINAIS:** 🔒 **Seus dados estão seguros** - Política de privacidade LGPD 💼 **Consultoria sem compromisso** - Primeira análise gratuita ⚡ **Resposta em até 2 horas** - Mesmo em finais de semana --- **Essa estrutura segue exatamente o padrão solicitado, com foco em resultados mensuráveis, urgência e prova social consistente. Cada bloco tem um objetivo claro e elementos visuais descritos para manter coerência visual.** - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +453 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Ddepsite Vd
3
- emoji: 🏆
4
- colorFrom: yellow
5
- colorTo: red
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: ddepsite-vd
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: purple
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,453 @@
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>Bolt.new | Especialistas em Desenvolvimento Ágil</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
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
10
+ <script>
11
+ tailwind.config = {
12
+ theme: {
13
+ extend: {
14
+ colors: {
15
+ primary: '#2563eb',
16
+ secondary: '#0ea5e9',
17
+ dark: '#0f172a',
18
+ accent: '#8b5cf6',
19
+ },
20
+ fontFamily: {
21
+ inter: ['Inter', 'sans-serif'],
22
+ space: ['Space Grotesk', 'sans-serif'],
23
+ },
24
+ animation: {
25
+ 'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
26
+ }
27
+ }
28
+ }
29
+ }
30
+ </script>
31
+ <style>
32
+ .hero-gradient {
33
+ background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
34
+ }
35
+ .feature-card:hover {
36
+ transform: translateY(-5px);
37
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
38
+ }
39
+ .testimonial-card {
40
+ transition: all 0.3s ease;
41
+ }
42
+ .testimonial-card:hover {
43
+ transform: scale(1.02);
44
+ }
45
+ .cta-gradient {
46
+ background: linear-gradient(90deg, #2563eb 0%, #0ea5e9 100%);
47
+ }
48
+ .animate-float {
49
+ animation: float 6s ease-in-out infinite;
50
+ }
51
+ @keyframes float {
52
+ 0% { transform: translateY(0px); }
53
+ 50% { transform: translateY(-20px); }
54
+ 100% { transform: translateY(0px); }
55
+ }
56
+ </style>
57
+ </head>
58
+ <body class="font-inter bg-gray-50 text-gray-800">
59
+ <!-- Header -->
60
+ <header class="sticky top-0 z-50 bg-white shadow-sm">
61
+ <div class="container mx-auto px-4 py-4 flex justify-between items-center">
62
+ <div class="flex items-center">
63
+ <div class="bg-primary w-10 h-10 rounded-lg flex items-center justify-center">
64
+ <i class="fas fa-bolt text-white text-xl"></i>
65
+ </div>
66
+ <span class="ml-3 font-space font-bold text-xl text-dark">Bolt<span class="text-primary">.new</span></span>
67
+ </div>
68
+
69
+ <nav class="hidden md:flex space-x-8">
70
+ <a href="#features" class="font-medium hover:text-primary transition">Funcionalidades</a>
71
+ <a href="#methodology" class="font-medium hover:text-primary transition">Metodologia</a>
72
+ <a href="#testimonials" class="font-medium hover:text-primary transition">Depoimentos</a>
73
+ <a href="#pricing" class="font-medium hover:text-primary transition">Planos</a>
74
+ </nav>
75
+
76
+ <div class="flex items-center">
77
+ <button class="px-4 py-2 rounded-lg font-medium hover:text-primary transition">Entrar</button>
78
+ <button class="bg-primary text-white px-5 py-2 rounded-lg font-medium hover:bg-secondary transition">Começar</button>
79
+ </div>
80
+
81
+ <button class="md:hidden text-gray-600">
82
+ <i class="fas fa-bars text-xl"></i>
83
+ </button>
84
+ </div>
85
+ </header>
86
+
87
+ <!-- Hero Section -->
88
+ <section class="hero-gradient text-white">
89
+ <div class="container mx-auto px-4 py-20 md:py-28 flex flex-col md:flex-row items-center">
90
+ <div class="md:w-1/2 mb-12 md:mb-0">
91
+ <h1 class="font-space font-bold text-4xl md:text-5xl lg:text-6xl mb-6">
92
+ Transforme suas ideias em <span class="text-secondary">código</span> em minutos
93
+ </h1>
94
+ <p class="text-lg md:text-xl mb-8 text-gray-200 max-w-2xl">
95
+ Bolt.new é a plataforma revolucionária que acelera seu desenvolvimento web com metodologias avançadas de 2025.
96
+ </p>
97
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
98
+ <button class="bg-secondary hover:bg-primary text-white font-semibold py-3 px-8 rounded-lg transition duration-300 transform hover:scale-105">
99
+ Comece agora
100
+ </button>
101
+ <button class="bg-white hover:bg-gray-100 text-dark font-semibold py-3 px-8 rounded-lg transition duration-300">
102
+ <i class="fas fa-play-circle mr-2"></i> Ver demonstração
103
+ </button>
104
+ </div>
105
+ </div>
106
+ <div class="md:w-1/2 flex justify-center">
107
+ <div class="relative">
108
+ <div class="bg-white rounded-2xl shadow-xl p-6 w-80 h-80 relative z-10">
109
+ <div class="flex justify-between items-center mb-4">
110
+ <div class="flex items-center">
111
+ <div class="bg-primary w-8 h-8 rounded-lg flex items-center justify-center">
112
+ <i class="fas fa-bolt text-white"></i>
113
+ </div>
114
+ <span class="ml-2 font-bold text-dark">Bolt.new</span>
115
+ </div>
116
+ <div class="text-xs bg-gray-100 px-2 py-1 rounded">Discussion Mode</div>
117
+ </div>
118
+ <div class="space-y-4">
119
+ <div class="bg-blue-50 p-3 rounded-lg">
120
+ <p class="text-sm">✅ Meta Prompt ativado! Estou configurado para usar as melhores práticas de Bolt.new 2025.</p>
121
+ </div>
122
+ <div class="bg-gray-50 p-3 rounded-lg">
123
+ <p class="text-sm">🎯 Qual projeto vamos criar hoje?</p>
124
+ </div>
125
+ </div>
126
+ <div class="absolute bottom-4 left-0 right-0 px-6">
127
+ <div class="flex bg-gray-100 rounded-lg p-2">
128
+ <input type="text" placeholder="Digite sua resposta..." class="bg-transparent w-full px-2 focus:outline-none text-sm">
129
+ <button class="bg-primary text-white px-3 py-1 rounded text-sm">Enviar</button>
130
+ </div>
131
+ </div>
132
+ </div>
133
+ <div class="absolute -top-6 -right-6 w-64 h-64 bg-secondary rounded-2xl opacity-30 animate-float"></div>
134
+ <div class="absolute -bottom-6 -left-6 w-56 h-56 bg-accent rounded-2xl opacity-30 animate-float animation-delay-2000"></div>
135
+ </div>
136
+ </div>
137
+ </div>
138
+ </section>
139
+
140
+ <!-- Features Section -->
141
+ <section id="features" class="py-20 bg-white">
142
+ <div class="container mx-auto px-4">
143
+ <div class="text-center max-w-2xl mx-auto mb-16">
144
+ <h2 class="font-space font-bold text-3xl md:text-4xl mb-4 text-dark">Metodologia Bolt.new</h2>
145
+ <p class="text-gray-600">Seguimos o protocolo obrigatório para garantir resultados excepcionais em cada projeto</p>
146
+ </div>
147
+
148
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
149
+ <!-- Feature 1 -->
150
+ <div class="feature-card bg-gray-50 rounded-2xl p-8 transition-all duration-300 border border-gray-100">
151
+ <div class="w-14 h-14 bg-blue-100 rounded-xl flex items-center justify-center mb-6">
152
+ <i class="fas fa-search text-primary text-2xl"></i>
153
+ </div>
154
+ <h3 class="font-space font-bold text-xl mb-3">Discussion Mode</h3>
155
+ <p class="text-gray-600 mb-4">Antes de qualquer código, entramos em modo de discussão para entender profundamente suas necessidades.</p>
156
+ <ul class="space-y-2">
157
+ <li class="flex items-start">
158
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
159
+ <span>Análise completa do projeto</span>
160
+ </li>
161
+ <li class="flex items-start">
162
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
163
+ <span>Perguntas estratégicas</span>
164
+ </li>
165
+ <li class="flex items-start">
166
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
167
+ <span>Otimização de prompt</span>
168
+ </li>
169
+ </ul>
170
+ </div>
171
+
172
+ <!-- Feature 2 -->
173
+ <div class="feature-card bg-gray-50 rounded-2xl p-8 transition-all duration-300 border border-gray-100">
174
+ <div class="w-14 h-14 bg-purple-100 rounded-xl flex items-center justify-center mb-6">
175
+ <i class="fas fa-walking text-accent text-2xl"></i>
176
+ </div>
177
+ <h3 class="font-space font-bold text-xl mb-3">Crawl → Walk → Run</h3>
178
+ <p class="text-gray-600 mb-4">Desenvolvimento em fases iterativas para garantir qualidade e economia de recursos.</p>
179
+ <ul class="space-y-2">
180
+ <li class="flex items-start">
181
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
182
+ <span>Estrutura básica (Crawl)</span>
183
+ </li>
184
+ <li class="flex items-start">
185
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
186
+ <span>Componentes principais (Walk)</span>
187
+ </li>
188
+ <li class="flex items-start">
189
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
190
+ <span>Funcionalidades avançadas (Run)</span>
191
+ </li>
192
+ </ul>
193
+ </div>
194
+
195
+ <!-- Feature 3 -->
196
+ <div class="feature-card bg-gray-50 rounded-2xl p-8 transition-all duration-300 border border-gray-100">
197
+ <div class="w-14 h-14 bg-cyan-100 rounded-xl flex items-center justify-center mb-6">
198
+ <i class="fas fa-chart-line text-secondary text-2xl"></i>
199
+ </div>
200
+ <h3 class="font-space font-bold text-xl mb-3">Economia de Tokens</h3>
201
+ <p class="text-gray-600 mb-4">Técnicas avançadas para maximizar eficiência e minimizar custos de desenvolvimento.</p>
202
+ <ul class="space-y-2">
203
+ <li class="flex items-start">
204
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
205
+ <span>Planejamento estratégico</span>
206
+ </li>
207
+ <li class="flex items-start">
208
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
209
+ <span>Agrupamento de mudanças</span>
210
+ </li>
211
+ <li class="flex items-start">
212
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
213
+ <span>Especificação precisa</span>
214
+ </li>
215
+ </ul>
216
+ </div>
217
+ </div>
218
+ </div>
219
+ </section>
220
+
221
+ <!-- Methodology Section -->
222
+ <section id="methodology" class="py-20 bg-gray-50">
223
+ <div class="container mx-auto px-4">
224
+ <div class="text-center max-w-2xl mx-auto mb-16">
225
+ <h2 class="font-space font-bold text-3xl md:text-4xl mb-4 text-dark">Protocolo Obrigatório</h2>
226
+ <p class="text-gray-600">Nosso processo garantido para resultados superiores</p>
227
+ </div>
228
+
229
+ <div class="max-w-4xl mx-auto">
230
+ <div class="flex flex-col md:flex-row mb-12">
231
+ <div class="md:w-1/3 mb-6 md:mb-0">
232
+ <div class="bg-primary text-white w-12 h-12 rounded-lg flex items-center justify-center text-xl font-bold">1</div>
233
+ <h3 class="font-bold text-xl mt-4 mb-2">Pause & Analyze</h3>
234
+ <p class="text-gray-600">Entramos automaticamente em Discussion Mode para análise completa</p>
235
+ </div>
236
+ <div class="md:w-1/3 mb-6 md:mb-0">
237
+ <div class="bg-primary text-white w-12 h-12 rounded-lg flex items-center justify-center text-xl font-bold">2</div>
238
+ <h3 class="font-bold text-xl mt-4 mb-2">Framework CWR</h3>
239
+ <p class="text-gray-600">Aplicamos o método Crawl, Walk, Run para desenvolvimento progressivo</p>
240
+ </div>
241
+ <div class="md:w-1/3">
242
+ <div class="bg-primary text-white w-12 h-12 rounded-lg flex items-center justify-center text-xl font-bold">3</div>
243
+ <h3 class="font-bold text-xl mt-4 mb-2">Prompt Enhancement</h3>
244
+ <p class="text-gray-600">Otimizamos seu prompt antes da execução para melhores resultados</p>
245
+ </div>
246
+ </div>
247
+
248
+ <div class="bg-white rounded-2xl shadow-lg p-6 border border-gray-200">
249
+ <div class="flex items-start">
250
+ <div class="bg-yellow-50 p-3 rounded-lg mr-4">
251
+ <i class="fas fa-lightbulb text-yellow-500 text-2xl"></i>
252
+ </div>
253
+ <div>
254
+ <h3 class="font-bold text-lg mb-2">Economia de Tokens</h3>
255
+ <p class="text-gray-600 mb-4">Usando o Discussion Mode para planejamento, economizamos até 90% dos tokens em projetos complexos.</p>
256
+ <div class="flex">
257
+ <div class="w-3/4 bg-gray-200 rounded-full h-2.5">
258
+ <div class="bg-green-500 h-2.5 rounded-full" style="width: 90%"></div>
259
+ </div>
260
+ <span class="ml-2 text-sm font-medium">90% economia</span>
261
+ </div>
262
+ </div>
263
+ </div>
264
+ </div>
265
+ </div>
266
+ </div>
267
+ </section>
268
+
269
+ <!-- Testimonials -->
270
+ <section id="testimonials" class="py-20 bg-white">
271
+ <div class="container mx-auto px-4">
272
+ <div class="text-center max-w-2xl mx-auto mb-16">
273
+ <h2 class="font-space font-bold text-3xl md:text-4xl mb-4 text-dark">O que dizem nossos clientes</h2>
274
+ <p class="text-gray-600">Depoimentos de quem já experimentou a metodologia Bolt.new</p>
275
+ </div>
276
+
277
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
278
+ <!-- Testimonial 1 -->
279
+ <div class="testimonial-card bg-gray-50 rounded-2xl p-8 border border-gray-100">
280
+ <div class="flex items-center mb-4">
281
+ <div class="w-12 h-12 bg-primary rounded-full flex items-center justify-center text-white font-bold">A</div>
282
+ <div class="ml-4">
283
+ <h4 class="font-bold">Ana Silva</h4>
284
+ <p class="text-gray-600 text-sm">CTO @TechInova</p>
285
+ </div>
286
+ </div>
287
+ <p class="text-gray-700 mb-4">"A metodologia Bolt.new revolucionou nosso fluxo de desenvolvimento. Economizamos 40% de tempo em projetos complexos!"</p>
288
+ <div class="flex text-yellow-400">
289
+ <i class="fas fa-star"></i>
290
+ <i class="fas fa-star"></i>
291
+ <i class="fas fa-star"></i>
292
+ <i class="fas fa-star"></i>
293
+ <i class="fas fa-star"></i>
294
+ </div>
295
+ </div>
296
+
297
+ <!-- Testimonial 2 -->
298
+ <div class="testimonial-card bg-gray-50 rounded-2xl p-8 border border-gray-100">
299
+ <div class="flex items-center mb-4">
300
+ <div class="w-12 h-12 bg-secondary rounded-full flex items-center justify-center text-white font-bold">R</div>
301
+ <div class="ml-4">
302
+ <h4 class="font-bold">Ricardo Mendes</h4>
303
+ <p class="text-gray-600 text-sm">Dev Lead @StartUpFast</p>
304
+ </div>
305
+ </div>
306
+ <p class="text-gray-700 mb-4">"O Discussion Mode nos fez pensar em aspectos que nunca consideraríamos. Agora nossos prompts são muito mais eficientes."</p>
307
+ <div class="flex text-yellow-400">
308
+ <i class="fas fa-star"></i>
309
+ <i class="fas fa-star"></i>
310
+ <i class="fas fa-star"></i>
311
+ <i class="fas fa-star"></i>
312
+ <i class="fas fa-star"></i>
313
+ </div>
314
+ </div>
315
+
316
+ <!-- Testimonial 3 -->
317
+ <div class="testimonial-card bg-gray-50 rounded-2xl p-8 border border-gray-100">
318
+ <div class="flex items-center mb-4">
319
+ <div class="w-12 h-12 bg-accent rounded-full flex items-center justify-center text-white font-bold">C</div>
320
+ <div class="ml-4">
321
+ <h4 class="font-bold">Carlos Oliveira</h4>
322
+ <p class="text-gray-600 text-sm">Product Manager @DigitalX</p>
323
+ </div>
324
+ </div>
325
+ <p class="text-gray-700 mb-4">"A abordagem em fases nos permitiu validar ideias rapidamente e escalar progressivamente. Economia de tokens impressionante!"</p>
326
+ <div class="flex text-yellow-400">
327
+ <i class="fas fa-star"></i>
328
+ <i class="fas fa-star"></i>
329
+ <i class="fas fa-star"></i>
330
+ <i class="fas fa-star"></i>
331
+ <i class="fas fa-star"></i>
332
+ </div>
333
+ </div>
334
+ </div>
335
+ </div>
336
+ </section>
337
+
338
+ <!-- CTA Section -->
339
+ <section class="py-20 cta-gradient text-white">
340
+ <div class="container mx-auto px-4 text-center">
341
+ <h2 class="font-space font-bold text-3xl md:text-4xl mb-6">Pronto para transformar seu desenvolvimento?</h2>
342
+ <p class="text-xl max-w-2xl mx-auto mb-10">Junte-se a milhares de desenvolvedores que já usam Bolt.new para criar projetos incríveis com eficiência máxima.</p>
343
+
344
+ <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
345
+ <button class="bg-white text-dark font-bold py-4 px-8 rounded-lg hover:bg-gray-100 transition transform hover:scale-105">
346
+ Comece agora - 7 dias grátis
347
+ </button>
348
+ <button class="bg-transparent border-2 border-white text-white font-bold py-4 px-8 rounded-lg hover:bg-white hover:text-dark transition">
349
+ <i class="fas fa-play-circle mr-2"></i> Ver demonstração
350
+ </button>
351
+ </div>
352
+
353
+ <div class="mt-10 flex flex-wrap justify-center gap-4">
354
+ <div class="flex items-center">
355
+ <i class="fas fa-check-circle text-green-300 mr-2"></i>
356
+ <span>Sem cartão de crédito necessário</span>
357
+ </div>
358
+ <div class="flex items-center">
359
+ <i class="fas fa-check-circle text-green-300 mr-2"></i>
360
+ <span>Cancelamento a qualquer momento</span>
361
+ </div>
362
+ <div class="flex items-center">
363
+ <i class="fas fa-check-circle text-green-300 mr-2"></i>
364
+ <span>Economia garantida de tokens</span>
365
+ </div>
366
+ </div>
367
+ </div>
368
+ </section>
369
+
370
+ <!-- Footer -->
371
+ <footer class="bg-dark text-gray-300 py-16">
372
+ <div class="container mx-auto px-4">
373
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
374
+ <div>
375
+ <div class="flex items-center mb-6">
376
+ <div class="bg-primary w-10 h-10 rounded-lg flex items-center justify-center">
377
+ <i class="fas fa-bolt text-white text-xl"></i>
378
+ </div>
379
+ <span class="ml-3 font-space font-bold text-xl text-white">Bolt<span class="text-primary">.new</span></span>
380
+ </div>
381
+ <p class="mb-6">A plataforma de desenvolvimento ágil líder em 2025, transformando ideias em código com eficiência máxima.</p>
382
+ <div class="flex space-x-4">
383
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a>
384
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-linkedin"></i></a>
385
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-github"></i></a>
386
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-discord"></i></a>
387
+ </div>
388
+ </div>
389
+
390
+ <div>
391
+ <h4 class="text-white font-bold text-lg mb-6">Produto</h4>
392
+ <ul class="space-y-3">
393
+ <li><a href="#" class="hover:text-white transition">Funcionalidades</a></li>
394
+ <li><a href="#" class="hover:text-white transition">Planos</a></li>
395
+ <li><a href="#" class="hover:text-white transition">Documentação</a></li>
396
+ <li><a href="#" class="hover:text-white transition">API</a></li>
397
+ <li><a href="#" class="hover:text-white transition">Status</a></li>
398
+ </ul>
399
+ </div>
400
+
401
+ <div>
402
+ <h4 class="text-white font-bold text-lg mb-6">Recursos</h4>
403
+ <ul class="space-y-3">
404
+ <li><a href="#" class="hover:text-white transition">Blog</a></li>
405
+ <li><a href="#" class="hover:text-white transition">Tutoriais</a></li>
406
+ <li><a href="#" class="hover:text-white transition">Webinários</a></li>
407
+ <li><a href="#" class="hover:text-white transition">Comunidade</a></li>
408
+ <li><a href="#" class="hover:text-white transition">Suporte</a></li>
409
+ </ul>
410
+ </div>
411
+
412
+ <div>
413
+ <h4 class="text-white font-bold text-lg mb-6">Inscreva-se</h4>
414
+ <p class="mb-4">Receba as últimas atualizações e dicas de desenvolvimento.</p>
415
+ <div class="flex">
416
+ <input type="email" placeholder="Seu e-mail" class="bg-gray-800 px-4 py-2 rounded-l-lg w-full focus:outline-none">
417
+ <button class="bg-primary text-white px-4 py-2 rounded-r-lg hover:bg-secondary transition">
418
+ <i class="fas fa-paper-plane"></i>
419
+ </button>
420
+ </div>
421
+ </div>
422
+ </div>
423
+
424
+ <div class="border-t border-gray-800 mt-12 pt-8 text-center">
425
+ <p>&copy; 2025 Bolt.new. Todos os direitos reservados.</p>
426
+ </div>
427
+ </div>
428
+ </footer>
429
+
430
+ <script>
431
+ // Simple animation for testimonial cards
432
+ document.addEventListener('DOMContentLoaded', function() {
433
+ const testimonials = document.querySelectorAll('.testimonial-card');
434
+
435
+ testimonials.forEach(card => {
436
+ card.addEventListener('mouseenter', () => {
437
+ card.classList.add('shadow-lg');
438
+ });
439
+
440
+ card.addEventListener('mouseleave', () => {
441
+ card.classList.remove('shadow-lg');
442
+ });
443
+ });
444
+
445
+ // Floating animation for hero elements
446
+ const floatingElements = document.querySelectorAll('.animate-float');
447
+ floatingElements.forEach((el, index) => {
448
+ el.style.animationDelay = `${index * 1000}ms`;
449
+ });
450
+ });
451
+ </script>
452
+ <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=Pummel3889/ddepsite-vd" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
453
+ </html>