Hugging Face's logo

Spaces:
antocarloss
/
lp-antonio
Running

App Files Community
antocarloss commited on
Commit
0572b0f
·
verified ·
1 Parent(s): ba24f53

Crie uma landing page profissional, persuasiva e com foco em conversão. Ela deve posicionar um especialista de alto nível em Google Ads, SEO, CRM e automações de marketing como autoridade no assunto, oferecendo serviços de consultoria estratégica personalizada. A página deve guiar o visitante a agendar uma reunião gratuita para diagnóstico. O design deve ser limpo, moderno, com CTAs evidentes e uma linguagem clara, estratégica e orientada a resultados. ✨ Estrutura sugerida da página: 🔥 Seção Hero (primeira dobra) Headline poderosa: “Transforme Seu Marketing em uma Máquina de Vendas Previsível” Subtítulo de valor: "Consultoria estratégica em Google Ads, SEO, CRM e Automações de Marketing. Resultados reais, com inteligência e performance." CTA visível e direto: “Agende uma Reunião Gratuita” (com botão chamativo e formulário popup) 🧠 Quem Sou Eu (Autoridade e Confiança) Breve bio do especialista: “Com anos de experiência em campanhas de alta performance, funis automatizados e SEO técnico, ajudo negócios a escalarem seu faturamento com estratégias personalizadas e inteligentes.” Bullet points de destaque: +X campanhas gerenciadas com ROI positivo +X mil leads capturados com automações +X empresas com funis otimizados Parceiros de ferramentas como Google, Meta, RD Station, etc. 🚀 Serviços Oferecidos Com ícones ilustrativos: Google Ads Inteligente: Campanhas otimizadas para venda e escala SEO Estratégico: Posicionamento orgânico com foco em resultado CRM e Funis de Vendas: Integração com RD Station, HubSpot, etc. Automações de Marketing: Fluxos inteligentes de nutrição e recuperação de leads 📈 O Que Você Vai Ganhar Mais vendas com menos esforço Redução de CAC e aumento do LTV Previsibilidade no faturamento Escalabilidade com inteligência Relatórios claros e dados que orientam decisões 🗓️ Chamada para Ação Bloco destacado: “Agende agora uma reunião estratégica gratuita. Vamos analisar o seu negócio e mostrar o que precisa ser ajustado para você vender mais com menos esforço.” 📅 Botão: “Quero Falar com o Especialista” 📣 Prova Social (opcional) Espaço para depoimentos de clientes, print de resultados, logos de empresas atendidas, selos ou badges de plataformas parceiras 📬 Formulário Final de Conversão Nome, e-mail, WhatsApp e botão: “Quero receber um plano de ação exclusivo para o meu negócio.” 🎨 Estilo Visual Cores: Preto + Amarelo (ou Azul Royal para autoridade) Tipografia moderna e sóbria Layout em seções bem definidas, com CTAs repetidos ao longo da página Ícones vetoriais e gráficos de performance/marketing Design limpo e mobile-first - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +577 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Lp Antonio
3
- emoji: 🐢
4
- colorFrom: gray
5
- colorTo: purple
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: lp-antonio
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: gray
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,577 @@
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>Consultoria em Marketing Digital - Transforme Seu Negócio</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
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ primary: '#000000',
15
+ secondary: '#FFD700',
16
+ accent: '#2563EB',
17
+ }
18
+ }
19
+ }
20
+ }
21
+ </script>
22
+ <style>
23
+ .hero-gradient {
24
+ background: linear-gradient(135deg, rgba(0,0,0,0.9) 0%, rgba(37,99,235,0.8) 100%);
25
+ }
26
+ .feature-icon {
27
+ width: 60px;
28
+ height: 60px;
29
+ display: flex;
30
+ align-items: center;
31
+ justify-content: center;
32
+ border-radius: 12px;
33
+ margin-bottom: 1rem;
34
+ }
35
+ .testimonial-card {
36
+ transition: all 0.3s ease;
37
+ }
38
+ .testimonial-card:hover {
39
+ transform: translateY(-5px);
40
+ box-shadow: 0 10px 25px rgba(0,0,0,0.1);
41
+ }
42
+ .form-popup {
43
+ display: none;
44
+ position: fixed;
45
+ top: 0;
46
+ left: 0;
47
+ width: 100%;
48
+ height: 100%;
49
+ background-color: rgba(0,0,0,0.8);
50
+ z-index: 1000;
51
+ align-items: center;
52
+ justify-content: center;
53
+ }
54
+ .form-container {
55
+ animation: fadeIn 0.3s ease-out;
56
+ }
57
+ @keyframes fadeIn {
58
+ from { opacity: 0; transform: translateY(-20px); }
59
+ to { opacity: 1; transform: translateY(0); }
60
+ }
61
+ </style>
62
+ </head>
63
+ <body class="font-sans antialiased text-gray-800">
64
+ <!-- Navigation -->
65
+ <nav class="bg-white shadow-md sticky top-0 z-50">
66
+ <div class="container mx-auto px-6 py-3 flex justify-between items-center">
67
+ <div class="flex items-center">
68
+ <span class="text-primary font-bold text-2xl">MARKETING<span class="text-accent">PRO</span></span>
69
+ </div>
70
+ <div class="hidden md:flex space-x-8">
71
+ <a href="#services" class="text-gray-700 hover:text-accent font-medium">Serviços</a>
72
+ <a href="#results" class="text-gray-700 hover:text-accent font-medium">Resultados</a>
73
+ <a href="#about" class="text-gray-700 hover:text-accent font-medium">Sobre</a>
74
+ <a href="#contact" class="text-gray-700 hover:text-accent font-medium">Contato</a>
75
+ </div>
76
+ <button onclick="openForm()" class="bg-accent hover:bg-blue-700 text-white font-bold px-6 py-2 rounded-full transition duration-300 transform hover:scale-105">
77
+ Agende uma Reunião
78
+ </button>
79
+ <button class="md:hidden text-gray-700">
80
+ <i class="fas fa-bars text-2xl"></i>
81
+ </button>
82
+ </div>
83
+ </nav>
84
+
85
+ <!-- Hero Section -->
86
+ <section class="hero-gradient text-white py-20 md:py-32">
87
+ <div class="container mx-auto px-6 flex flex-col md:flex-row items-center">
88
+ <div class="md:w-1/2 mb-12 md:mb-0">
89
+ <h1 class="text-4xl md:text-5xl font-bold leading-tight mb-6">
90
+ Transforme Seu Marketing em uma Máquina de Vendas Previsível
91
+ </h1>
92
+ <p class="text-xl md:text-2xl mb-8 leading-relaxed">
93
+ Consultoria estratégica em Google Ads, SEO, CRM e Automações de Marketing. Resultados reais, com inteligência e performance.
94
+ </p>
95
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
96
+ <button onclick="openForm()" class="bg-secondary hover:bg-yellow-500 text-primary font-bold px-8 py-4 rounded-full text-lg transition duration-300 transform hover:scale-105">
97
+ Agende uma Reunião Gratuita
98
+ </button>
99
+ <a href="#services" class="border-2 border-white text-white hover:bg-white hover:text-primary font-bold px-8 py-4 rounded-full text-lg text-center transition duration-300">
100
+ Conheça Nossos Serviços
101
+ </a>
102
+ </div>
103
+ </div>
104
+ <div class="md:w-1/2 flex justify-center">
105
+ <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="Marketing Digital" class="rounded-xl shadow-2xl max-w-md w-full">
106
+ </div>
107
+ </div>
108
+ </section>
109
+
110
+ <!-- Trust Badges -->
111
+ <section class="bg-gray-50 py-8">
112
+ <div class="container mx-auto px-6">
113
+ <div class="flex flex-wrap justify-center items-center gap-8 md:gap-16">
114
+ <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/1200px-Google_2015_logo.svg.png" alt="Google" class="h-8 opacity-70">
115
+ <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7b/Meta_Platforms_Inc._logo.svg/1200px-Meta_Platforms_Inc._logo.svg.png" alt="Meta" class="h-8 opacity-70">
116
+ <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b5/RD_Station_logo.svg/1200px-RD_Station_logo.svg.png" alt="RD Station" class="h-8 opacity-70">
117
+ <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/01/HubSpot_Logo.png/1200px-HubSpot_Logo.png" alt="HubSpot" class="h-8 opacity-70">
118
+ <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8f/Salesforce_logo.svg/1200px-Salesforce_logo.svg.png" alt="Salesforce" class="h-8 opacity-70">
119
+ </div>
120
+ </div>
121
+ </section>
122
+
123
+ <!-- About Section -->
124
+ <section id="about" class="py-20 bg-white">
125
+ <div class="container mx-auto px-6">
126
+ <div class="flex flex-col md:flex-row items-center">
127
+ <div class="md:w-1/3 mb-12 md:mb-0 flex justify-center">
128
+ <img src="https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Especialista em Marketing" class="rounded-full w-64 h-64 object-cover shadow-xl border-4 border-accent">
129
+ </div>
130
+ <div class="md:w-2/3 md:pl-16">
131
+ <h2 class="text-3xl font-bold text-primary mb-6">Quem Sou Eu</h2>
132
+ <p class="text-lg mb-8 leading-relaxed">
133
+ Com anos de experiência em campanhas de alta performance, funis automatizados e SEO técnico, ajudo negócios a escalarem seu faturamento com estratégias personalizadas e inteligentes. Minha abordagem combina análise de dados, criatividade e tecnologia para entregar resultados mensuráveis.
134
+ </p>
135
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
136
+ <div class="bg-gray-50 p-6 rounded-xl">
137
+ <div class="text-accent text-3xl font-bold mb-2">250+</div>
138
+ <div class="text-gray-600">Campanhas gerenciadas com ROI positivo</div>
139
+ </div>
140
+ <div class="bg-gray-50 p-6 rounded-xl">
141
+ <div class="text-accent text-3xl font-bold mb-2">50K+</div>
142
+ <div class="text-gray-600">Leads capturados com automações</div>
143
+ </div>
144
+ <div class="bg-gray-50 p-6 rounded-xl">
145
+ <div class="text-accent text-3xl font-bold mb-2">120+</div>
146
+ <div class="text-gray-600">Empresas com funis otimizados</div>
147
+ </div>
148
+ </div>
149
+ <button onclick="openForm()" class="bg-accent hover:bg-blue-700 text-white font-bold px-8 py-3 rounded-full transition duration-300">
150
+ Agendar Consultoria
151
+ </button>
152
+ </div>
153
+ </div>
154
+ </div>
155
+ </section>
156
+
157
+ <!-- Services Section -->
158
+ <section id="services" class="py-20 bg-gray-50">
159
+ <div class="container mx-auto px-6">
160
+ <div class="text-center mb-16">
161
+ <h2 class="text-3xl font-bold text-primary mb-4">Serviços Oferecidos</h2>
162
+ <p class="text-xl text-gray-600 max-w-2xl mx-auto">
163
+ Soluções completas para transformar seu marketing digital e impulsionar seus resultados
164
+ </p>
165
+ </div>
166
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
167
+ <div class="bg-white p-8 rounded-xl shadow-md hover:shadow-xl transition duration-300">
168
+ <div class="feature-icon bg-blue-100 text-accent">
169
+ <i class="fas fa-ad text-2xl"></i>
170
+ </div>
171
+ <h3 class="text-xl font-bold mb-3">Google Ads Inteligente</h3>
172
+ <p class="text-gray-600 mb-4">
173
+ Campanhas otimizadas para venda e escala com segmentação precisa e acompanhamento de ROI.
174
+ </p>
175
+ <ul class="space-y-2 text-gray-600">
176
+ <li class="flex items-start">
177
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
178
+ <span>Gestão de campanhas Search, Display e YouTube</span>
179
+ </li>
180
+ <li class="flex items-start">
181
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
182
+ <span>Otimização contínua para melhor CPA</span>
183
+ </li>
184
+ <li class="flex items-start">
185
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
186
+ <span>Remarketing estratégico</span>
187
+ </li>
188
+ </ul>
189
+ </div>
190
+ <div class="bg-white p-8 rounded-xl shadow-md hover:shadow-xl transition duration-300">
191
+ <div class="feature-icon bg-green-100 text-green-600">
192
+ <i class="fas fa-search text-2xl"></i>
193
+ </div>
194
+ <h3 class="text-xl font-bold mb-3">SEO Estratégico</h3>
195
+ <p class="text-gray-600 mb-4">
196
+ Posicionamento orgânico com foco em resultado através de técnicas comprovadas.
197
+ </p>
198
+ <ul class="space-y-2 text-gray-600">
199
+ <li class="flex items-start">
200
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
201
+ <span>Pesquisa de palavras-chave estratégicas</span>
202
+ </li>
203
+ <li class="flex items-start">
204
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
205
+ <span>Otimização técnica e de conteúdo</span>
206
+ </li>
207
+ <li class="flex items-start">
208
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
209
+ <span>Link building de qualidade</span>
210
+ </li>
211
+ </ul>
212
+ </div>
213
+ <div class="bg-white p-8 rounded-xl shadow-md hover:shadow-xl transition duration-300">
214
+ <div class="feature-icon bg-purple-100 text-purple-600">
215
+ <i class="fas fa-users text-2xl"></i>
216
+ </div>
217
+ <h3 class="text-xl font-bold mb-3">CRM e Funis de Vendas</h3>
218
+ <p class="text-gray-600 mb-4">
219
+ Integração com RD Station, HubSpot e outras plataformas para gestão eficiente de leads.
220
+ </p>
221
+ <ul class="space-y-2 text-gray-600">
222
+ <li class="flex items-start">
223
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
224
+ <span>Implementação e configuração de CRM</span>
225
+ </li>
226
+ <li class="flex items-start">
227
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
228
+ <span>Automação de processos comerciais</span>
229
+ </li>
230
+ <li class="flex items-start">
231
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
232
+ <span>Segmentação e nutrição de leads</span>
233
+ </li>
234
+ </ul>
235
+ </div>
236
+ <div class="bg-white p-8 rounded-xl shadow-md hover:shadow-xl transition duration-300">
237
+ <div class="feature-icon bg-yellow-100 text-yellow-600">
238
+ <i class="fas fa-robot text-2xl"></i>
239
+ </div>
240
+ <h3 class="text-xl font-bold mb-3">Automações de Marketing</h3>
241
+ <p class="text-gray-600 mb-4">
242
+ Fluxos inteligentes de nutrição e recuperação de leads para maximizar conversões.
243
+ </p>
244
+ <ul class="space-y-2 text-gray-600">
245
+ <li class="flex items-start">
246
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
247
+ <span>E-mail marketing automatizado</span>
248
+ </li>
249
+ <li class="flex items-start">
250
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
251
+ <span>Sequências de vendas personalizadas</span>
252
+ </li>
253
+ <li class="flex items-start">
254
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
255
+ <span>Integração entre canais</span>
256
+ </li>
257
+ </ul>
258
+ </div>
259
+ </div>
260
+ </div>
261
+ </section>
262
+
263
+ <!-- Results Section -->
264
+ <section id="results" class="py-20 bg-white">
265
+ <div class="container mx-auto px-6">
266
+ <div class="text-center mb-16">
267
+ <h2 class="text-3xl font-bold text-primary mb-4">O Que Você Vai Ganhar</h2>
268
+ <p class="text-xl text-gray-600 max-w-2xl mx-auto">
269
+ Benefícios tangíveis que impactam diretamente seu faturamento
270
+ </p>
271
+ </div>
272
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-8">
273
+ <div class="bg-gray-50 p-6 rounded-xl text-center">
274
+ <div class="text-accent text-4xl mb-4">
275
+ <i class="fas fa-chart-line"></i>
276
+ </div>
277
+ <h3 class="font-bold mb-2">Mais Vendas</h3>
278
+ <p class="text-gray-600">Aumento de conversões com menos esforço</p>
279
+ </div>
280
+ <div class="bg-gray-50 p-6 rounded-xl text-center">
281
+ <div class="text-accent text-4xl mb-4">
282
+ <i class="fas fa-money-bill-wave"></i>
283
+ </div>
284
+ <h3 class="font-bold mb-2">Redução de CAC</h3>
285
+ <p class="text-gray-600">Custo de aquisição otimizado</p>
286
+ </div>
287
+ <div class="bg-gray-50 p-6 rounded-xl text-center">
288
+ <div class="text-accent text-4xl mb-4">
289
+ <i class="fas fa-hand-holding-usd"></i>
290
+ </div>
291
+ <h3 class="font-bold mb-2">Aumento do LTV</h3>
292
+ <p class="text-gray-600">Valor vitalício do cliente maximizado</p>
293
+ </div>
294
+ <div class="bg-gray-50 p-6 rounded-xl text-center">
295
+ <div class="text-accent text-4xl mb-4">
296
+ <i class="fas fa-calendar-check"></i>
297
+ </div>
298
+ <h3 class="font-bold mb-2">Previsibilidade</h3>
299
+ <p class="text-gray-600">Faturamento consistente e escalável</p>
300
+ </div>
301
+ <div class="bg-gray-50 p-6 rounded-xl text-center">
302
+ <div class="text-accent text-4xl mb-4">
303
+ <i class="fas fa-database"></i>
304
+ </div>
305
+ <h3 class="font-bold mb-2">Dados Claros</h3>
306
+ <p class="text-gray-600">Relatórios que orientam decisões</p>
307
+ </div>
308
+ </div>
309
+ </div>
310
+ </section>
311
+
312
+ <!-- Testimonials -->
313
+ <section class="py-20 bg-gray-50">
314
+ <div class="container mx-auto px-6">
315
+ <div class="text-center mb-16">
316
+ <h2 class="text-3xl font-bold text-primary mb-4">O Que Nossos Clientes Dizem</h2>
317
+ <p class="text-xl text-gray-600 max-w-2xl mx-auto">
318
+ Resultados reais de empresas que confiaram em nossa consultoria
319
+ </p>
320
+ </div>
321
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
322
+ <div class="testimonial-card bg-white p-8 rounded-xl shadow-md">
323
+ <div class="flex items-center mb-4">
324
+ <img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Cliente" class="w-12 h-12 rounded-full mr-4">
325
+ <div>
326
+ <h4 class="font-bold">Ana Carolina</h4>
327
+ <p class="text-gray-600 text-sm">CEO - Moda Elegante</p>
328
+ </div>
329
+ </div>
330
+ <p class="text-gray-700 mb-4">
331
+ "Depois da consultoria, nossas campanhas no Google Ads reduziram o CPA em 60% enquanto aumentávamos o volume de vendas. Simplesmente transformador!"
332
+ </p>
333
+ <div class="flex text-yellow-400">
334
+ <i class="fas fa-star"></i>
335
+ <i class="fas fa-star"></i>
336
+ <i class="fas fa-star"></i>
337
+ <i class="fas fa-star"></i>
338
+ <i class="fas fa-star"></i>
339
+ </div>
340
+ </div>
341
+ <div class="testimonial-card bg-white p-8 rounded-xl shadow-md">
342
+ <div class="flex items-center mb-4">
343
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Cliente" class="w-12 h-12 rounded-full mr-4">
344
+ <div>
345
+ <h4 class="font-bold">Ricardo Almeida</h4>
346
+ <p class="text-gray-600 text-sm">Diretor - TechSolutions</p>
347
+ </div>
348
+ </div>
349
+ <p class="text-gray-700 mb-4">
350
+ "O trabalho de SEO estratégico nos colocou na primeira página para termos altamente competitivos em apenas 4 meses. Tráfego orgânico aumentou 300%."
351
+ </p>
352
+ <div class="flex text-yellow-400">
353
+ <i class="fas fa-star"></i>
354
+ <i class="fas fa-star"></i>
355
+ <i class="fas fa-star"></i>
356
+ <i class="fas fa-star"></i>
357
+ <i class="fas fa-star"></i>
358
+ </div>
359
+ </div>
360
+ <div class="testimonial-card bg-white p-8 rounded-xl shadow-md">
361
+ <div class="flex items-center mb-4">
362
+ <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Cliente" class="w-12 h-12 rounded-full mr-4">
363
+ <div>
364
+ <h4 class="font-bold">Fernanda Gomes</h4>
365
+ <p class="text-gray-600 text-sm">CMO - Saúde Natural</p>
366
+ </div>
367
+ </div>
368
+ <p class="text-gray-700 mb-4">
369
+ "As automações de marketing implementadas aumentaram nossa taxa de conversão de leads em 45%. Agora temos um funil de vendas que funciona 24/7."
370
+ </p>
371
+ <div class="flex text-yellow-400">
372
+ <i class="fas fa-star"></i>
373
+ <i class="fas fa-star"></i>
374
+ <i class="fas fa-star"></i>
375
+ <i class="fas fa-star"></i>
376
+ <i class="fas fa-star"></i>
377
+ </div>
378
+ </div>
379
+ </div>
380
+ </div>
381
+ </section>
382
+
383
+ <!-- CTA Section -->
384
+ <section class="py-20 bg-accent text-white">
385
+ <div class="container mx-auto px-6 text-center">
386
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">Pronto para Transformar Seu Marketing?</h2>
387
+ <p class="text-xl mb-8 max-w-2xl mx-auto">
388
+ Agende agora uma reunião estratégica gratuita. Vamos analisar o seu negócio e mostrar o que precisa ser ajustado para você vender mais com menos esforço.
389
+ </p>
390
+ <button onclick="openForm()" class="bg-secondary hover:bg-yellow-500 text-primary font-bold px-8 py-4 rounded-full text-lg transition duration-300 transform hover:scale-105">
391
+ Quero Falar com o Especialista
392
+ </button>
393
+ </div>
394
+ </section>
395
+
396
+ <!-- Contact Form -->
397
+ <section id="contact" class="py-20 bg-white">
398
+ <div class="container mx-auto px-6 max-w-4xl">
399
+ <div class="bg-gray-50 rounded-xl shadow-lg overflow-hidden">
400
+ <div class="md:flex">
401
+ <div class="md:w-1/2 bg-primary text-white p-12">
402
+ <h3 class="text-2xl font-bold mb-4">Vamos Conversar</h3>
403
+ <p class="mb-6">
404
+ Preencha o formulário ao lado para receber um plano de ação exclusivo para o seu negócio.
405
+ </p>
406
+ <div class="space-y-4">
407
+ <div class="flex items-center">
408
+ <i class="fas fa-phone-alt mr-4 text-secondary"></i>
409
+ <span>(11) 98765-4321</span>
410
+ </div>
411
+ <div class="flex items-center">
412
+ <i class="fas fa-envelope mr-4 text-secondary"></i>
413
+ <span>[email protected]</span>
414
+ </div>
415
+ <div class="flex items-center">
416
+ <i class="fas fa-map-marker-alt mr-4 text-secondary"></i>
417
+ <span>São Paulo - SP</span>
418
+ </div>
419
+ </div>
420
+ </div>
421
+ <div class="md:w-1/2 p-12">
422
+ <form id="contactForm" class="space-y-6">
423
+ <div>
424
+ <label for="name" class="block text-gray-700 font-medium mb-2">Nome Completo</label>
425
+ <input type="text" id="name" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent" required>
426
+ </div>
427
+ <div>
428
+ <label for="email" class="block text-gray-700 font-medium mb-2">E-mail</label>
429
+ <input type="email" id="email" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent" required>
430
+ </div>
431
+ <div>
432
+ <label for="phone" class="block text-gray-700 font-medium mb-2">WhatsApp</label>
433
+ <input type="tel" id="phone" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent" required>
434
+ </div>
435
+ <div>
436
+ <label for="business" class="block text-gray-700 font-medium mb-2">Seu Negócio</label>
437
+ <input type="text" id="business" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent" required>
438
+ </div>
439
+ <button type="submit" class="w-full bg-accent hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg transition duration-300">
440
+ Quero receber um plano de ação exclusivo
441
+ </button>
442
+ </form>
443
+ </div>
444
+ </div>
445
+ </div>
446
+ </div>
447
+ </section>
448
+
449
+ <!-- Popup Form -->
450
+ <div id="formPopup" class="form-popup">
451
+ <div class="form-container bg-white rounded-xl p-8 max-w-md w-full mx-4">
452
+ <div class="flex justify-between items-center mb-6">
453
+ <h3 class="text-2xl font-bold text-primary">Agende Sua Consultoria Gratuita</h3>
454
+ <button onclick="closeForm()" class="text-gray-500 hover:text-gray-700">
455
+ <i class="fas fa-times text-xl"></i>
456
+ </button>
457
+ </div>
458
+ <form class="space-y-4">
459
+ <div>
460
+ <label for="popupName" class="block text-gray-700 mb-2">Nome Completo</label>
461
+ <input type="text" id="popupName" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-accent">
462
+ </div>
463
+ <div>
464
+ <label for="popupEmail" class="block text-gray-700 mb-2">E-mail</label>
465
+ <input type="email" id="popupEmail" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-accent">
466
+ </div>
467
+ <div>
468
+ <label for="popupPhone" class="block text-gray-700 mb-2">WhatsApp</label>
469
+ <input type="tel" id="popupPhone" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-accent">
470
+ </div>
471
+ <div>
472
+ <label for="popupDate" class="block text-gray-700 mb-2">Melhor Data</label>
473
+ <input type="date" id="popupDate" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-accent">
474
+ </div>
475
+ <button type="submit" class="w-full bg-accent hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg transition duration-300 mt-4">
476
+ Agendar Agora
477
+ </button>
478
+ </form>
479
+ </div>
480
+ </div>
481
+
482
+ <!-- Footer -->
483
+ <footer class="bg-primary text-white py-12">
484
+ <div class="container mx-auto px-6">
485
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
486
+ <div>
487
+ <h4 class="text-xl font-bold mb-4">MARKETING<span class="text-secondary">PRO</span></h4>
488
+ <p class="mb-4">
489
+ Consultoria estratégica em marketing digital para negócios que querem escalar com inteligência.
490
+ </p>
491
+ <div class="flex space-x-4">
492
+ <a href="#" class="text-white hover:text-secondary"><i class="fab fa-linkedin-in text-xl"></i></a>
493
+ <a href="#" class="text-white hover:text-secondary"><i class="fab fa-instagram text-xl"></i></a>
494
+ <a href="#" class="text-white hover:text-secondary"><i class="fab fa-facebook-f text-xl"></i></a>
495
+ </div>
496
+ </div>
497
+ <div>
498
+ <h5 class="font-bold mb-4 text-secondary">Serviços</h5>
499
+ <ul class="space-y-2">
500
+ <li><a href="#" class="hover:text-secondary">Google Ads</a></li>
501
+ <li><a href="#" class="hover:text-secondary">SEO Estratégico</a></li>
502
+ <li><a href="#" class="hover:text-secondary">CRM e Funis</a></li>
503
+ <li><a href="#" class="hover:text-secondary">Automações</a></li>
504
+ </ul>
505
+ </div>
506
+ <div>
507
+ <h5 class="font-bold mb-4 text-secondary">Links Úteis</h5>
508
+ <ul class="space-y-2">
509
+ <li><a href="#" class="hover:text-secondary">Blog</a></li>
510
+ <li><a href="#" class="hover:text-secondary">Cases</a></li>
511
+ <li><a href="#" class="hover:text-secondary">Depoimentos</a></li>
512
+ <li><a href="#" class="hover:text-secondary">Contato</a></li>
513
+ </ul>
514
+ </div>
515
+ <div>
516
+ <h5 class="font-bold mb-4 text-secondary">Contato</h5>
517
+ <ul class="space-y-2">
518
+ <li class="flex items-start">
519
+ <i class="fas fa-map-marker-alt mr-2 mt-1 text-secondary"></i>
520
+ <span>Av. Paulista, 1000 - São Paulo/SP</span>
521
+ </li>
522
+ <li class="flex items-start">
523
+ <i class="fas fa-phone-alt mr-2 mt-1 text-secondary"></i>
524
+ <span>(11) 98765-4321</span>
525
+ </li>
526
+ <li class="flex items-start">
527
+ <i class="fas fa-envelope mr-2 mt-1 text-secondary"></i>
528
+ <span>[email protected]</span>
529
+ </li>
530
+ </ul>
531
+ </div>
532
+ </div>
533
+ <div class="border-t border-gray-700 mt-12 pt-8 text-center text-gray-400">
534
+ <p>&copy; 2023 MARKETINGPRO. Todos os direitos reservados.</p>
535
+ </div>
536
+ </div>
537
+ </footer>
538
+
539
+ <script>
540
+ // Form Popup Functionality
541
+ function openForm() {
542
+ document.getElementById('formPopup').style.display = 'flex';
543
+ document.body.style.overflow = 'hidden';
544
+ }
545
+
546
+ function closeForm() {
547
+ document.getElementById('formPopup').style.display = 'none';
548
+ document.body.style.overflow = 'auto';
549
+ }
550
+
551
+ // Close when clicking outside form
552
+ window.onclick = function(event) {
553
+ const popup = document.getElementById('formPopup');
554
+ if (event.target == popup) {
555
+ closeForm();
556
+ }
557
+ }
558
+
559
+ // Form Submission
560
+ document.getElementById('contactForm').addEventListener('submit', function(e) {
561
+ e.preventDefault();
562
+ alert('Obrigado pelo seu interesse! Entraremos em contato em breve com seu plano de ação exclusivo.');
563
+ this.reset();
564
+ });
565
+
566
+ // Smooth scrolling for anchor links
567
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
568
+ anchor.addEventListener('click', function (e) {
569
+ e.preventDefault();
570
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
571
+ behavior: 'smooth'
572
+ });
573
+ });
574
+ });
575
+ </script>
576
+ <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=antocarloss/lp-antonio" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
577
+ </html>