Spaces:
Running
Running
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
0572b0f
verified
| <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Consultoria em Marketing Digital - Transforme Seu Negócio</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#000000', | |
| secondary: '#FFD700', | |
| accent: '#2563EB', | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .hero-gradient { | |
| background: linear-gradient(135deg, rgba(0,0,0,0.9) 0%, rgba(37,99,235,0.8) 100%); | |
| } | |
| .feature-icon { | |
| width: 60px; | |
| height: 60px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: 12px; | |
| margin-bottom: 1rem; | |
| } | |
| .testimonial-card { | |
| transition: all 0.3s ease; | |
| } | |
| .testimonial-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(0,0,0,0.1); | |
| } | |
| .form-popup { | |
| display: none; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-color: rgba(0,0,0,0.8); | |
| z-index: 1000; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .form-container { | |
| animation: fadeIn 0.3s ease-out; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(-20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans antialiased text-gray-800"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-md sticky top-0 z-50"> | |
| <div class="container mx-auto px-6 py-3 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <span class="text-primary font-bold text-2xl">MARKETING<span class="text-accent">PRO</span></span> | |
| </div> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="#services" class="text-gray-700 hover:text-accent font-medium">Serviços</a> | |
| <a href="#results" class="text-gray-700 hover:text-accent font-medium">Resultados</a> | |
| <a href="#about" class="text-gray-700 hover:text-accent font-medium">Sobre</a> | |
| <a href="#contact" class="text-gray-700 hover:text-accent font-medium">Contato</a> | |
| </div> | |
| <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"> | |
| Agende uma Reunião | |
| </button> | |
| <button class="md:hidden text-gray-700"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="hero-gradient text-white py-20 md:py-32"> | |
| <div class="container mx-auto px-6 flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-12 md:mb-0"> | |
| <h1 class="text-4xl md:text-5xl font-bold leading-tight mb-6"> | |
| Transforme Seu Marketing em uma Máquina de Vendas Previsível | |
| </h1> | |
| <p class="text-xl md:text-2xl mb-8 leading-relaxed"> | |
| Consultoria estratégica em Google Ads, SEO, CRM e Automações de Marketing. Resultados reais, com inteligência e performance. | |
| </p> | |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <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"> | |
| Agende uma Reunião Gratuita | |
| </button> | |
| <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"> | |
| Conheça Nossos Serviços | |
| </a> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <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"> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Trust Badges --> | |
| <section class="bg-gray-50 py-8"> | |
| <div class="container mx-auto px-6"> | |
| <div class="flex flex-wrap justify-center items-center gap-8 md:gap-16"> | |
| <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"> | |
| <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"> | |
| <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"> | |
| <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"> | |
| <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"> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-20 bg-white"> | |
| <div class="container mx-auto px-6"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/3 mb-12 md:mb-0 flex justify-center"> | |
| <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"> | |
| </div> | |
| <div class="md:w-2/3 md:pl-16"> | |
| <h2 class="text-3xl font-bold text-primary mb-6">Quem Sou Eu</h2> | |
| <p class="text-lg mb-8 leading-relaxed"> | |
| 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. | |
| </p> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8"> | |
| <div class="bg-gray-50 p-6 rounded-xl"> | |
| <div class="text-accent text-3xl font-bold mb-2">250+</div> | |
| <div class="text-gray-600">Campanhas gerenciadas com ROI positivo</div> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-xl"> | |
| <div class="text-accent text-3xl font-bold mb-2">50K+</div> | |
| <div class="text-gray-600">Leads capturados com automações</div> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-xl"> | |
| <div class="text-accent text-3xl font-bold mb-2">120+</div> | |
| <div class="text-gray-600">Empresas com funis otimizados</div> | |
| </div> | |
| </div> | |
| <button onclick="openForm()" class="bg-accent hover:bg-blue-700 text-white font-bold px-8 py-3 rounded-full transition duration-300"> | |
| Agendar Consultoria | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Services Section --> | |
| <section id="services" class="py-20 bg-gray-50"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold text-primary mb-4">Serviços Oferecidos</h2> | |
| <p class="text-xl text-gray-600 max-w-2xl mx-auto"> | |
| Soluções completas para transformar seu marketing digital e impulsionar seus resultados | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> | |
| <div class="bg-white p-8 rounded-xl shadow-md hover:shadow-xl transition duration-300"> | |
| <div class="feature-icon bg-blue-100 text-accent"> | |
| <i class="fas fa-ad text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Google Ads Inteligente</h3> | |
| <p class="text-gray-600 mb-4"> | |
| Campanhas otimizadas para venda e escala com segmentação precisa e acompanhamento de ROI. | |
| </p> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> | |
| <span>Gestão de campanhas Search, Display e YouTube</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> | |
| <span>Otimização contínua para melhor CPA</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> | |
| <span>Remarketing estratégico</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="bg-white p-8 rounded-xl shadow-md hover:shadow-xl transition duration-300"> | |
| <div class="feature-icon bg-green-100 text-green-600"> | |
| <i class="fas fa-search text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">SEO Estratégico</h3> | |
| <p class="text-gray-600 mb-4"> | |
| Posicionamento orgânico com foco em resultado através de técnicas comprovadas. | |
| </p> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> | |
| <span>Pesquisa de palavras-chave estratégicas</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> | |
| <span>Otimização técnica e de conteúdo</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> | |
| <span>Link building de qualidade</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="bg-white p-8 rounded-xl shadow-md hover:shadow-xl transition duration-300"> | |
| <div class="feature-icon bg-purple-100 text-purple-600"> | |
| <i class="fas fa-users text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">CRM e Funis de Vendas</h3> | |
| <p class="text-gray-600 mb-4"> | |
| Integração com RD Station, HubSpot e outras plataformas para gestão eficiente de leads. | |
| </p> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> | |
| <span>Implementação e configuração de CRM</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> | |
| <span>Automação de processos comerciais</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> | |
| <span>Segmentação e nutrição de leads</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="bg-white p-8 rounded-xl shadow-md hover:shadow-xl transition duration-300"> | |
| <div class="feature-icon bg-yellow-100 text-yellow-600"> | |
| <i class="fas fa-robot text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Automações de Marketing</h3> | |
| <p class="text-gray-600 mb-4"> | |
| Fluxos inteligentes de nutrição e recuperação de leads para maximizar conversões. | |
| </p> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> | |
| <span>E-mail marketing automatizado</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> | |
| <span>Sequências de vendas personalizadas</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> | |
| <span>Integração entre canais</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Results Section --> | |
| <section id="results" class="py-20 bg-white"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold text-primary mb-4">O Que Você Vai Ganhar</h2> | |
| <p class="text-xl text-gray-600 max-w-2xl mx-auto"> | |
| Benefícios tangíveis que impactam diretamente seu faturamento | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-8"> | |
| <div class="bg-gray-50 p-6 rounded-xl text-center"> | |
| <div class="text-accent text-4xl mb-4"> | |
| <i class="fas fa-chart-line"></i> | |
| </div> | |
| <h3 class="font-bold mb-2">Mais Vendas</h3> | |
| <p class="text-gray-600">Aumento de conversões com menos esforço</p> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-xl text-center"> | |
| <div class="text-accent text-4xl mb-4"> | |
| <i class="fas fa-money-bill-wave"></i> | |
| </div> | |
| <h3 class="font-bold mb-2">Redução de CAC</h3> | |
| <p class="text-gray-600">Custo de aquisição otimizado</p> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-xl text-center"> | |
| <div class="text-accent text-4xl mb-4"> | |
| <i class="fas fa-hand-holding-usd"></i> | |
| </div> | |
| <h3 class="font-bold mb-2">Aumento do LTV</h3> | |
| <p class="text-gray-600">Valor vitalício do cliente maximizado</p> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-xl text-center"> | |
| <div class="text-accent text-4xl mb-4"> | |
| <i class="fas fa-calendar-check"></i> | |
| </div> | |
| <h3 class="font-bold mb-2">Previsibilidade</h3> | |
| <p class="text-gray-600">Faturamento consistente e escalável</p> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-xl text-center"> | |
| <div class="text-accent text-4xl mb-4"> | |
| <i class="fas fa-database"></i> | |
| </div> | |
| <h3 class="font-bold mb-2">Dados Claros</h3> | |
| <p class="text-gray-600">Relatórios que orientam decisões</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials --> | |
| <section class="py-20 bg-gray-50"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold text-primary mb-4">O Que Nossos Clientes Dizem</h2> | |
| <p class="text-xl text-gray-600 max-w-2xl mx-auto"> | |
| Resultados reais de empresas que confiaram em nossa consultoria | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="testimonial-card bg-white p-8 rounded-xl shadow-md"> | |
| <div class="flex items-center mb-4"> | |
| <img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Cliente" class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-bold">Ana Carolina</h4> | |
| <p class="text-gray-600 text-sm">CEO - Moda Elegante</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-700 mb-4"> | |
| "Depois da consultoria, nossas campanhas no Google Ads reduziram o CPA em 60% enquanto aumentávamos o volume de vendas. Simplesmente transformador!" | |
| </p> | |
| <div class="flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| <div class="testimonial-card bg-white p-8 rounded-xl shadow-md"> | |
| <div class="flex items-center mb-4"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Cliente" class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-bold">Ricardo Almeida</h4> | |
| <p class="text-gray-600 text-sm">Diretor - TechSolutions</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-700 mb-4"> | |
| "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%." | |
| </p> | |
| <div class="flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| <div class="testimonial-card bg-white p-8 rounded-xl shadow-md"> | |
| <div class="flex items-center mb-4"> | |
| <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Cliente" class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-bold">Fernanda Gomes</h4> | |
| <p class="text-gray-600 text-sm">CMO - Saúde Natural</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-700 mb-4"> | |
| "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." | |
| </p> | |
| <div class="flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-20 bg-accent text-white"> | |
| <div class="container mx-auto px-6 text-center"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">Pronto para Transformar Seu Marketing?</h2> | |
| <p class="text-xl mb-8 max-w-2xl mx-auto"> | |
| 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. | |
| </p> | |
| <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"> | |
| Quero Falar com o Especialista | |
| </button> | |
| </div> | |
| </section> | |
| <!-- Contact Form --> | |
| <section id="contact" class="py-20 bg-white"> | |
| <div class="container mx-auto px-6 max-w-4xl"> | |
| <div class="bg-gray-50 rounded-xl shadow-lg overflow-hidden"> | |
| <div class="md:flex"> | |
| <div class="md:w-1/2 bg-primary text-white p-12"> | |
| <h3 class="text-2xl font-bold mb-4">Vamos Conversar</h3> | |
| <p class="mb-6"> | |
| Preencha o formulário ao lado para receber um plano de ação exclusivo para o seu negócio. | |
| </p> | |
| <div class="space-y-4"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-phone-alt mr-4 text-secondary"></i> | |
| <span>(11) 98765-4321</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-envelope mr-4 text-secondary"></i> | |
| <span>[email protected]</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-map-marker-alt mr-4 text-secondary"></i> | |
| <span>São Paulo - SP</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 p-12"> | |
| <form id="contactForm" class="space-y-6"> | |
| <div> | |
| <label for="name" class="block text-gray-700 font-medium mb-2">Nome Completo</label> | |
| <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> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-gray-700 font-medium mb-2">E-mail</label> | |
| <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> | |
| </div> | |
| <div> | |
| <label for="phone" class="block text-gray-700 font-medium mb-2">WhatsApp</label> | |
| <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> | |
| </div> | |
| <div> | |
| <label for="business" class="block text-gray-700 font-medium mb-2">Seu Negócio</label> | |
| <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> | |
| </div> | |
| <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"> | |
| Quero receber um plano de ação exclusivo | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Popup Form --> | |
| <div id="formPopup" class="form-popup"> | |
| <div class="form-container bg-white rounded-xl p-8 max-w-md w-full mx-4"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h3 class="text-2xl font-bold text-primary">Agende Sua Consultoria Gratuita</h3> | |
| <button onclick="closeForm()" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times text-xl"></i> | |
| </button> | |
| </div> | |
| <form class="space-y-4"> | |
| <div> | |
| <label for="popupName" class="block text-gray-700 mb-2">Nome Completo</label> | |
| <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"> | |
| </div> | |
| <div> | |
| <label for="popupEmail" class="block text-gray-700 mb-2">E-mail</label> | |
| <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"> | |
| </div> | |
| <div> | |
| <label for="popupPhone" class="block text-gray-700 mb-2">WhatsApp</label> | |
| <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"> | |
| </div> | |
| <div> | |
| <label for="popupDate" class="block text-gray-700 mb-2">Melhor Data</label> | |
| <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"> | |
| </div> | |
| <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"> | |
| Agendar Agora | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-primary text-white py-12"> | |
| <div class="container mx-auto px-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h4 class="text-xl font-bold mb-4">MARKETING<span class="text-secondary">PRO</span></h4> | |
| <p class="mb-4"> | |
| Consultoria estratégica em marketing digital para negócios que querem escalar com inteligência. | |
| </p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-white hover:text-secondary"><i class="fab fa-linkedin-in text-xl"></i></a> | |
| <a href="#" class="text-white hover:text-secondary"><i class="fab fa-instagram text-xl"></i></a> | |
| <a href="#" class="text-white hover:text-secondary"><i class="fab fa-facebook-f text-xl"></i></a> | |
| </div> | |
| </div> | |
| <div> | |
| <h5 class="font-bold mb-4 text-secondary">Serviços</h5> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="hover:text-secondary">Google Ads</a></li> | |
| <li><a href="#" class="hover:text-secondary">SEO Estratégico</a></li> | |
| <li><a href="#" class="hover:text-secondary">CRM e Funis</a></li> | |
| <li><a href="#" class="hover:text-secondary">Automações</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h5 class="font-bold mb-4 text-secondary">Links Úteis</h5> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="hover:text-secondary">Blog</a></li> | |
| <li><a href="#" class="hover:text-secondary">Cases</a></li> | |
| <li><a href="#" class="hover:text-secondary">Depoimentos</a></li> | |
| <li><a href="#" class="hover:text-secondary">Contato</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h5 class="font-bold mb-4 text-secondary">Contato</h5> | |
| <ul class="space-y-2"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-map-marker-alt mr-2 mt-1 text-secondary"></i> | |
| <span>Av. Paulista, 1000 - São Paulo/SP</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-phone-alt mr-2 mt-1 text-secondary"></i> | |
| <span>(11) 98765-4321</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-envelope mr-2 mt-1 text-secondary"></i> | |
| <span>[email protected]</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 mt-12 pt-8 text-center text-gray-400"> | |
| <p>© 2023 MARKETINGPRO. Todos os direitos reservados.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Form Popup Functionality | |
| function openForm() { | |
| document.getElementById('formPopup').style.display = 'flex'; | |
| document.body.style.overflow = 'hidden'; | |
| } | |
| function closeForm() { | |
| document.getElementById('formPopup').style.display = 'none'; | |
| document.body.style.overflow = 'auto'; | |
| } | |
| // Close when clicking outside form | |
| window.onclick = function(event) { | |
| const popup = document.getElementById('formPopup'); | |
| if (event.target == popup) { | |
| closeForm(); | |
| } | |
| } | |
| // Form Submission | |
| document.getElementById('contactForm').addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| alert('Obrigado pelo seu interesse! Entraremos em contato em breve com seu plano de ação exclusivo.'); | |
| this.reset(); | |
| }); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| }); | |
| </script> | |
| <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> | |
| </html> |