Crie uma landing page profissional, responsiva e altamente persuasiva para a agência criativa PluginCo. A página deve ser focada em conversão, com linguagem simples (sem jargões técnicos), apelo emocional e comercial. O site deve destacar a capacidade da agência de ajudar negócios a atrair mais clientes, aumentar suas vendas e reduzir custos por meio de soluções criativas, tecnológicas e personalizadas. 🎯 Objetivo da página: Apresentar a PluginCo como uma agência de alto impacto que entrega resultados reais. Explicar como ela ajuda empresas a vender mais e se posicionar melhor. Destacar diferenciais tecnológicos (sem mencionar “inteligência artificial” diretamente). Guiar o visitante até uma ação clara: solicitar uma proposta personalizada. ✍️ Tom de voz: Claro, direto, persuasivo e acessível. Evitar termos técnicos; explicar conceitos de forma simples. Transmitir segurança, inovação, eficiência e sofisticação. Sutilmente futurista: destaque que o cliente estará “à frente do tempo”. 🧱 Estrutura da landing page: 1. Seção Hero com headline forte "Você não precisa de um site bonito. Você precisa de um site que vende." Subheadline: "A PluginCo cria experiências digitais que atraem clientes, aumentam resultados e colocam o seu negócio na frente." Botão CTA: Solicite sua proposta 2. O que fazemos por você Texto simples e direto: "Enquanto você foca no seu trabalho, o seu site trabalha por você — 24 horas por dia, atraindo e convertendo novos clientes." Benefícios listados: Textos que despertam interesse Visual que impressiona de primeira Site leve, rápido e adaptado a todos os dispositivos Estrutura organizada que guia o cliente até a ação 3. Como levamos clientes até você "Mais que um site. Uma estratégia completa para atrair e converter." Caminho do cliente explicado (funil de vendas simplificado): Ele encontra você Se interessa pelo que você oferece Entra em contato e compra Tomada de decisão baseada em dados (sem mencionar IA diretamente): Sabemos o que funciona, o que atrai, o que converte Otimizamos constantemente para resultados reais 4. Eficiência e economia "Você gasta menos com marketing mal feito — e fatura mais com ações certeiras." Otimização de tempo e investimento Clareza nos dados e decisões baseadas em resultado Menos tentativa e erro, mais crescimento sustentável 5. Como funciona (onboarding simplificado) Conversamos sobre o seu negócio Criamos um plano sob medida Desenvolvemos e lançamos o seu novo site Analisamos o desempenho Você acompanha tudo com clareza 6. Depoimentos e prova social “A PluginCo transformou meu site em uma ferramenta real de vendas. Nunca mais fiquei no escuro sobre o que funciona.” — Cliente satisfeito 7. Chamada final para ação “Seu site atual está ajudando você a crescer ou só está ocupando espaço na internet?” Botão CTA: Solicite agora sua proposta personalizada 🎨 Paleta de cores (inspirada no site da Apple): Branco Puro – #FFFFFF (fundo principal) Cinza Neutro Claro – #F5F5F7 (seções secundárias) Preto Suave / Grafite – #1D1D1F (títulos) Cinza Médio – #6E6E73 (texto secundário) Cinza Azulado Profundo – #2C2C2E (rodapé ou fundo escuro) Acento Vibrante Amarelo Elegante – #FFD60A (botões e elementos de destaque) - Initial Deployment
8af25e6 verified | <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>PluginCo - Soluções Digitais que Vendem</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"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| scroll-behavior: smooth; | |
| } | |
| .hero-gradient { | |
| background: linear-gradient(135deg, rgba(255,214,10,0.1) 0%, rgba(255,255,255,1) 100%); | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(0,0,0,0.1); | |
| } | |
| .testimonial-card { | |
| box-shadow: 0 4px 6px rgba(0,0,0,0.05); | |
| } | |
| .btn-primary { | |
| transition: all 0.3s ease; | |
| } | |
| .btn-primary:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 5px 15px rgba(255,214,10,0.3); | |
| } | |
| .funnel-step::after { | |
| content: ''; | |
| position: absolute; | |
| top: 50%; | |
| right: -30px; | |
| transform: translateY(-50%); | |
| width: 20px; | |
| height: 20px; | |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23FFD60A'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M13 5l7 7-7 7M5 5l7 7-7 7' /%3E%3C/svg%3E"); | |
| background-repeat: no-repeat; | |
| background-position: center; | |
| } | |
| .funnel-step:last-child::after { | |
| display: none; | |
| } | |
| @media (max-width: 768px) { | |
| .funnel-step::after { | |
| display: none; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-white text-gray-800"> | |
| <!-- Header/Navigation --> | |
| <header class="sticky top-0 z-50 bg-white shadow-sm"> | |
| <div class="container mx-auto px-4 py-4 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <span class="text-2xl font-bold text-[#1D1D1F]">Plugin<span class="text-[#FFD60A]">Co</span></span> | |
| </div> | |
| <nav class="hidden md:flex space-x-8"> | |
| <a href="#services" class="text-[#6E6E73] hover:text-[#1D1D1F] transition">O que fazemos</a> | |
| <a href="#process" class="text-[#6E6E73] hover:text-[#1D1D1F] transition">Como funciona</a> | |
| <a href="#results" class="text-[#6E6E73] hover:text-[#1D1D1F] transition">Resultados</a> | |
| <a href="#contact" class="text-[#6E6E73] hover:text-[#1D1D1F] transition">Contato</a> | |
| </nav> | |
| <button class="md:hidden text-[#1D1D1F]"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="hero-gradient py-20 md:py-32 px-4"> | |
| <div class="container mx-auto 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 text-[#1D1D1F] mb-6 leading-tight"> | |
| Você não precisa de um site bonito.<br> | |
| <span class="text-[#FFD60A]">Você precisa de um site que vende.</span> | |
| </h1> | |
| <p class="text-xl text-[#6E6E73] mb-8"> | |
| A PluginCo cria experiências digitais que atraem clientes, aumentam resultados e colocam o seu negócio na frente. | |
| </p> | |
| <a href="#contact" class="btn-primary inline-block bg-[#FFD60A] text-[#1D1D1F] font-semibold px-8 py-4 rounded-lg text-lg"> | |
| Solicite sua proposta <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| <div class="md:w-1/2 md:pl-12"> | |
| <img src="https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Equipe criativa trabalhando" class="rounded-xl shadow-xl w-full"> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Services Section --> | |
| <section id="services" class="py-20 bg-[#F5F5F7]"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-[#1D1D1F] mb-4"> | |
| Enquanto você foca no seu trabalho,<br> | |
| <span class="text-[#FFD60A]">o seu site trabalha por você</span> | |
| </h2> | |
| <p class="text-xl text-[#6E6E73] max-w-3xl mx-auto"> | |
| 24 horas por dia, atraindo e convertendo novos clientes. | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8"> | |
| <div class="feature-card bg-white p-8 rounded-xl transition duration-300"> | |
| <div class="w-14 h-14 bg-[#FFD60A]/10 rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-magic text-[#FFD60A] text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-[#1D1D1F] mb-3">Textos que despertam interesse</h3> | |
| <p class="text-[#6E6E73]">Conteúdo estratégico que fala diretamente com seu cliente ideal e o convida a agir.</p> | |
| </div> | |
| <div class="feature-card bg-white p-8 rounded-xl transition duration-300"> | |
| <div class="w-14 h-14 bg-[#FFD60A]/10 rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-eye text-[#FFD60A] text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-[#1D1D1F] mb-3">Visual que impressiona de primeira</h3> | |
| <p class="text-[#6E6E73]">Design moderno e profissional que cria uma ótima primeira impressão.</p> | |
| </div> | |
| <div class="feature-card bg-white p-8 rounded-xl transition duration-300"> | |
| <div class="w-14 h-14 bg-[#FFD60A]/10 rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-bolt text-[#FFD60A] text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-[#1D1D1F] mb-3">Site leve, rápido e adaptado</h3> | |
| <p class="text-[#6E6E73]">Otimizado para todos os dispositivos e carregamento ultrarrápido.</p> | |
| </div> | |
| <div class="feature-card bg-white p-8 rounded-xl transition duration-300"> | |
| <div class="w-14 h-14 bg-[#FFD60A]/10 rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-project-diagram text-[#FFD60A] text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-[#1D1D1F] mb-3">Estrutura que guia o cliente</h3> | |
| <p class="text-[#6E6E73]">Caminho claro até a ação que você deseja, seja comprar ou entrar em contato.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Process Section --> | |
| <section id="process" class="py-20 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-[#1D1D1F] mb-4"> | |
| Mais que um site.<br> | |
| <span class="text-[#FFD60A]">Uma estratégia completa</span> para atrair e converter. | |
| </h2> | |
| </div> | |
| <div class="flex flex-col md:flex-row justify-center items-center md:items-start mb-16"> | |
| <div class="funnel-step relative md:w-1/3 px-4 py-6 text-center"> | |
| <div class="w-20 h-20 bg-[#FFD60A] rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-search text-white text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-[#1D1D1F] mb-2">Ele encontra você</h3> | |
| <p class="text-[#6E6E73]">Atraímos as pessoas certas com estratégias precisas.</p> | |
| </div> | |
| <div class="funnel-step relative md:w-1/3 px-4 py-6 text-center"> | |
| <div class="w-20 h-20 bg-[#FFD60A] rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-heart text-white text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-[#1D1D1F] mb-2">Se interessa pelo que você oferece</h3> | |
| <p class="text-[#6E6E73]">Apresentamos sua solução de forma irresistível.</p> | |
| </div> | |
| <div class="funnel-step relative md:w-1/3 px-4 py-6 text-center"> | |
| <div class="w-20 h-20 bg-[#FFD60A] rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-shopping-cart text-white text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-[#1D1D1F] mb-2">Entra em contato e compra</h3> | |
| <p class="text-[#6E6E73]">Facilitamos a decisão com chamadas claras para ação.</p> | |
| </div> | |
| </div> | |
| <div class="bg-[#F5F5F7] rounded-xl p-8 md:p-12 max-w-4xl mx-auto"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-6 md:mb-0 md:pr-8"> | |
| <h3 class="text-2xl font-bold text-[#1D1D1F] mb-4">Tomada de decisão baseada em dados</h3> | |
| <p class="text-[#6E6E73] mb-4"> | |
| Sabemos o que funciona, o que atrai, o que converte. Nossas soluções são constantemente otimizadas para entregar resultados reais. | |
| </p> | |
| <ul class="space-y-3"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-[#FFD60A] mt-1 mr-2"></i> | |
| <span class="text-[#6E6E73]">Análise contínua de desempenho</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-[#FFD60A] mt-1 mr-2"></i> | |
| <span class="text-[#6E6E73]">Ajustes inteligentes para melhorar resultados</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-[#FFD60A] mt-1 mr-2"></i> | |
| <span class="text-[#6E6E73]">Relatórios claros e acionáveis</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <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="Dashboard analítico" class="rounded-lg shadow-md w-full"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Efficiency Section --> | |
| <section class="py-20 bg-[#F5F5F7]"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-12 md:mb-0 md:pr-12"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-[#1D1D1F] mb-6"> | |
| Você gasta menos com marketing mal feito —<br> | |
| <span class="text-[#FFD60A]">e fatura mais com ações certeiras.</span> | |
| </h2> | |
| <p class="text-xl text-[#6E6E73] mb-8"> | |
| Otimizamos seu tempo e investimento com decisões baseadas em resultados reais, não em palpites. | |
| </p> | |
| <div class="space-y-6"> | |
| <div class="flex items-start"> | |
| <div class="bg-[#FFD60A]/10 p-3 rounded-lg mr-4"> | |
| <i class="fas fa-chart-line text-[#FFD60A] text-xl"></i> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold text-[#1D1D1F] mb-1">Clareza nos dados</h4> | |
| <p class="text-[#6E6E73]">Saiba exatamente o que está funcionando e onde melhorar.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-[#FFD60A]/10 p-3 rounded-lg mr-4"> | |
| <i class="fas fa-stopwatch text-[#FFD60A] text-xl"></i> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold text-[#1D1D1F] mb-1">Otimização de tempo</h4> | |
| <p class="text-[#6E6E73]">Foque no que realmente importa enquanto cuidamos do seu digital.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-[#FFD60A]/10 p-3 rounded-lg mr-4"> | |
| <i class="fas fa-seedling text-[#FFD60A] text-xl"></i> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold text-[#1D1D1F] mb-1">Crescimento sustentável</h4> | |
| <p class="text-[#6E6E73]">Menos tentativa e erro, mais estratégias comprovadas.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <img src="https://images.unsplash.com/photo-1521791136064-7986c2920216?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1469&q=80" alt="Pessoas analisando gráficos" class="rounded-xl shadow-lg w-full"> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- How It Works Section --> | |
| <section id="results" class="py-20 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-[#1D1D1F] mb-4"> | |
| Simples, transparente e <span class="text-[#FFD60A]">focado em resultados</span> | |
| </h2> | |
| <p class="text-xl text-[#6E6E73] max-w-3xl mx-auto"> | |
| Nosso processo foi criado para garantir que seu novo site comece a trabalhar para você o mais rápido possível. | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-5 gap-8 max-w-5xl mx-auto"> | |
| <div class="md:col-span-1 flex flex-col items-center text-center"> | |
| <div class="w-16 h-16 bg-[#FFD60A] rounded-full flex items-center justify-center mb-4 text-white font-bold text-xl">1</div> | |
| <h3 class="font-semibold text-[#1D1D1F]">Conversamos</h3> | |
| <p class="text-sm text-[#6E6E73] mt-1">Sobre seu negócio e objetivos</p> | |
| </div> | |
| <div class="md:col-span-1 flex flex-col items-center text-center"> | |
| <div class="w-16 h-16 bg-[#FFD60A] rounded-full flex items-center justify-center mb-4 text-white font-bold text-xl">2</div> | |
| <h3 class="font-semibold text-[#1D1D1F]">Criamos</h3> | |
| <p class="text-sm text-[#6E6E73] mt-1">Um plano sob medida</p> | |
| </div> | |
| <div class="md:col-span-1 flex flex-col items-center text-center"> | |
| <div class="w-16 h-16 bg-[#FFD60A] rounded-full flex items-center justify-center mb-4 text-white font-bold text-xl">3</div> | |
| <h3 class="font-semibold text-[#1D1D1F]">Desenvolvemos</h3> | |
| <p class="text-sm text-[#6E6E73] mt-1">E lançamos seu novo site</p> | |
| </div> | |
| <div class="md:col-span-1 flex flex-col items-center text-center"> | |
| <div class="w-16 h-16 bg-[#FFD60A] rounded-full flex items-center justify-center mb-4 text-white font-bold text-xl">4</div> | |
| <h3 class="font-semibold text-[#1D1D1F]">Analisamos</h3> | |
| <p class="text-sm text-[#6E6E73] mt-1">O desempenho continuamente</p> | |
| </div> | |
| <div class="md:col-span-1 flex flex-col items-center text-center"> | |
| <div class="w-16 h-16 bg-[#FFD60A] rounded-full flex items-center justify-center mb-4 text-white font-bold text-xl">5</div> | |
| <h3 class="font-semibold text-[#1D1D1F]">Você acompanha</h3> | |
| <p class="text-sm text-[#6E6E73] mt-1">Tudo com clareza</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials Section --> | |
| <section class="py-20 bg-[#F5F5F7]"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-[#1D1D1F] mb-4"> | |
| O que nossos clientes <span class="text-[#FFD60A]">estão dizendo</span> | |
| </h2> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8 max-w-6xl mx-auto"> | |
| <div class="testimonial-card bg-white p-8 rounded-xl"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 bg-[#FFD60A]/10 rounded-full flex items-center justify-center mr-4"> | |
| <i class="fas fa-user text-[#FFD60A]"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold text-[#1D1D1F]">Carlos Mendes</h4> | |
| <p class="text-sm text-[#6E6E73]">Loja de Suplementos</p> | |
| </div> | |
| </div> | |
| <p class="text-[#6E6E73] italic"> | |
| "A PluginCo transformou meu site em uma ferramenta real de vendas. Em 3 meses, nossas vendas online aumentaram 180%. Nunca mais fiquei no escuro sobre o que funciona." | |
| </p> | |
| <div class="mt-4 text-[#FFD60A]"> | |
| <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"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 bg-[#FFD60A]/10 rounded-full flex items-center justify-center mr-4"> | |
| <i class="fas fa-user text-[#FFD60A]"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold text-[#1D1D1F]">Ana Beatriz</h4> | |
| <p class="text-sm text-[#6E6E73]">Clínica Odontológica</p> | |
| </div> | |
| </div> | |
| <p class="text-[#6E6E73] italic"> | |
| "Finalmente encontrei uma agência que entrega o que promete. Nosso site agora atrai pacientes qualificados todos os dias. O retorno foi tão bom que já contratamos outros serviços." | |
| </p> | |
| <div class="mt-4 text-[#FFD60A]"> | |
| <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"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 bg-[#FFD60A]/10 rounded-full flex items-center justify-center mr-4"> | |
| <i class="fas fa-user text-[#FFD60A]"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold text-[#1D1D1F]">Ricardo Almeida</h4> | |
| <p class="text-sm text-[#6E6E73]">Consultoria Financeira</p> | |
| </div> | |
| </div> | |
| <p class="text-[#6E6E73] italic"> | |
| "Depois de anos jogando dinheiro fora com sites que não vendiam, a PluginCo mostrou como um site estratégico pode ser. Em 6 meses, triplicamos nossa taxa de conversão." | |
| </p> | |
| <div class="mt-4 text-[#FFD60A]"> | |
| <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-half-alt"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Final CTA Section --> | |
| <section id="contact" class="py-20 bg-[#2C2C2E] text-white"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6"> | |
| Seu site atual está ajudando você a crescer<br> | |
| <span class="text-[#FFD60A]">ou só está ocupando espaço na internet?</span> | |
| </h2> | |
| <p class="text-xl text-gray-300 mb-8 max-w-3xl mx-auto"> | |
| Não perca mais tempo e dinheiro com um site que não entrega resultados. Vamos conversar sobre como podemos transformar sua presença digital em uma máquina de vendas. | |
| </p> | |
| <a href="#contact-form" class="btn-primary inline-block bg-[#FFD60A] text-[#1D1D1F] font-semibold px-8 py-4 rounded-lg text-lg mb-12"> | |
| Solicite agora sua proposta personalizada <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| <div id="contact-form" class="bg-white rounded-xl shadow-xl p-8 max-w-2xl mx-auto text-left"> | |
| <h3 class="text-2xl font-bold text-[#1D1D1F] mb-6">Vamos começar</h3> | |
| <form class="space-y-6"> | |
| <div class="grid md:grid-cols-2 gap-6"> | |
| <div> | |
| <label for="name" class="block text-[#6E6E73] mb-2">Seu nome</label> | |
| <input type="text" id="name" class="w-full px-4 py-3 border border-[#F5F5F7] rounded-lg focus:outline-none focus:ring-2 focus:ring-[#FFD60A] focus:border-transparent" placeholder="Como prefere ser chamado"> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-[#6E6E73] mb-2">Seu e-mail</label> | |
| <input type="email" id="email" class="w-full px-4 py-3 border border-[#F5F5F7] rounded-lg focus:outline-none focus:ring-2 focus:ring-[#FFD60A] focus:border-transparent" placeholder="Seu melhor e-mail"> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="business" class="block text-[#6E6E73] mb-2">Seu negócio</label> | |
| <input type="text" id="business" class="w-full px-4 py-3 border border-[#F5F5F7] rounded-lg focus:outline-none focus:ring-2 focus:ring-[#FFD60A] focus:border-transparent" placeholder="O que você faz?"> | |
| </div> | |
| <div> | |
| <label for="message" class="block text-[#6E6E73] mb-2">Como podemos ajudar?</label> | |
| <textarea id="message" rows="4" class="w-full px-4 py-3 border border-[#F5F5F7] rounded-lg focus:outline-none focus:ring-2 focus:ring-[#FFD60A] focus:border-transparent" placeholder="Fale um pouco sobre seus objetivos"></textarea> | |
| </div> | |
| <button type="submit" class="w-full bg-[#FFD60A] text-[#1D1D1F] font-semibold px-6 py-4 rounded-lg hover:bg-[#FFD60A]/90 transition"> | |
| Enviar solicitação <i class="fas fa-paper-plane ml-2"></i> | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-[#1D1D1F] text-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-6 md:mb-0"> | |
| <span class="text-2xl font-bold">Plugin<span class="text-[#FFD60A]">Co</span></span> | |
| <p class="text-[#6E6E73] mt-2">Soluções digitais que vendem.</p> | |
| </div> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-[#6E6E73] hover:text-white transition"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="text-[#6E6E73] hover:text-white transition"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="text-[#6E6E73] hover:text-white transition"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| <a href="#" class="text-[#6E6E73] hover:text-white transition"> | |
| <i class="fab fa-whatsapp"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="border-t border-[#2C2C2E] mt-8 pt-8 flex flex-col md:flex-row justify-between"> | |
| <div class="text-[#6E6E73] text-sm mb-4 md:mb-0"> | |
| © 2023 PluginCo. Todos os direitos reservados. | |
| </div> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-[#6E6E73] hover:text-white transition text-sm">Termos de uso</a> | |
| <a href="#" class="text-[#6E6E73] hover:text-white transition text-sm">Política de privacidade</a> | |
| <a href="#" class="text-[#6E6E73] hover:text-white transition text-sm">FAQ</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // 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' | |
| }); | |
| }); | |
| }); | |
| // Form submission | |
| const form = document.querySelector('form'); | |
| if(form) { | |
| form.addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| // Get form values | |
| const name = document.getElementById('name').value; | |
| const email = document.getElementById('email').value; | |
| // Simple validation | |
| if(name && email) { | |
| // Here you would typically send the data to your server | |
| alert(`Obrigado, ${name}! Sua solicitação foi enviada. Entraremos em contato em breve pelo e-mail ${email}.`); | |
| form.reset(); | |
| } else { | |
| alert('Por favor, preencha pelo menos seu nome e e-mail.'); | |
| } | |
| }); | |
| } | |
| // Mobile menu toggle (would need more implementation) | |
| const mobileMenuButton = document.querySelector('.md\\:hidden'); | |
| if(mobileMenuButton) { | |
| mobileMenuButton.addEventListener('click', function() { | |
| alert('Menu mobile seria aberto aqui em uma implementação completa.'); | |
| }); | |
| } | |
| </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=bamburra/pluginco1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |