|
|
<!DOCTYPE html> |
|
|
<html lang="pt-BR"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Marketing Digital Simples - 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"> |
|
|
<style> |
|
|
.hero-gradient { |
|
|
background: linear-gradient(135deg, #4f46e5 0%, #10b981 100%); |
|
|
} |
|
|
.feature-icon { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.feature-card:hover .feature-icon { |
|
|
transform: scale(1.1); |
|
|
color: #4f46e5; |
|
|
} |
|
|
.cta-pulse { |
|
|
animation: pulse 2s infinite; |
|
|
} |
|
|
@keyframes pulse { |
|
|
0% { |
|
|
box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.7); |
|
|
} |
|
|
70% { |
|
|
box-shadow: 0 0 0 10px rgba(79, 70, 229, 0); |
|
|
} |
|
|
100% { |
|
|
box-shadow: 0 0 0 0 rgba(79, 70, 229, 0); |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="font-sans bg-gray-50"> |
|
|
|
|
|
<header class="bg-white shadow-sm sticky top-0 z-50"> |
|
|
<div class="container mx-auto px-4 py-4 flex justify-between items-center"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-bullseye text-indigo-600 text-2xl mr-2"></i> |
|
|
<span class="text-xl font-bold text-gray-800">MarketingSimples</span> |
|
|
</div> |
|
|
<nav class="hidden md:flex space-x-8"> |
|
|
<a href="#servicos" class="text-gray-600 hover:text-indigo-600 font-medium">Serviços</a> |
|
|
<a href="#sobre" class="text-gray-600 hover:text-indigo-600 font-medium">Sobre Nós</a> |
|
|
<a href="#depoimentos" class="text-gray-600 hover:text-indigo-600 font-medium">Depoimentos</a> |
|
|
<a href="#contato" class="text-gray-600 hover:text-indigo-600 font-medium">Contato</a> |
|
|
</nav> |
|
|
<a href="#contato" class="md:hidden text-indigo-600"> |
|
|
<i class="fas fa-bars text-xl"></i> |
|
|
</a> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<section class="hero-gradient text-white py-20"> |
|
|
<div class="container mx-auto px-4 flex flex-col md:flex-row items-center"> |
|
|
<div class="md:w-1/2 mb-10 md:mb-0"> |
|
|
<h1 class="text-4xl md:text-5xl font-bold mb-6">Seu Negócio Online com Resultados Reais</h1> |
|
|
<p class="text-xl mb-8 opacity-90">Simplificamos o marketing digital para pequenos negócios com estratégias eficazes e acessíveis.</p> |
|
|
<div class="flex flex-col sm:flex-row gap-4"> |
|
|
<a href="#contato" class="bg-white text-indigo-600 font-bold py-3 px-8 rounded-lg hover:bg-gray-100 transition duration-300 text-center"> |
|
|
Comece Agora <i class="fas fa-arrow-right ml-2"></i> |
|
|
</a> |
|
|
<a href="#servicos" class="border-2 border-white text-white font-bold py-3 px-8 rounded-lg hover:bg-white hover:text-indigo-600 transition duration-300 text-center"> |
|
|
Saiba Mais |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/2 flex justify-center"> |
|
|
<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="Marketing Digital" |
|
|
class="rounded-lg shadow-2xl max-w-full h-auto"> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="servicos" class="py-16 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl font-bold text-gray-800 mb-4">Nossos Serviços Simples e Eficazes</h2> |
|
|
<p class="text-gray-600 max-w-2xl mx-auto">Oferecemos soluções práticas para alavancar sua presença digital sem complicações.</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="feature-card bg-gray-50 p-8 rounded-xl hover:shadow-lg transition duration-300"> |
|
|
<div class="feature-icon text-4xl text-indigo-600 mb-6"> |
|
|
<i class="fas fa-chart-line"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-gray-800 mb-3">Gestão de Redes Sociais</h3> |
|
|
<p class="text-gray-600">Criamos conteúdo relevante e gerenciamos suas redes sociais para engajar seu público-alvo.</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="feature-card bg-gray-50 p-8 rounded-xl hover:shadow-lg transition duration-300"> |
|
|
<div class="feature-icon text-4xl text-indigo-600 mb-6"> |
|
|
<i class="fas fa-search-dollar"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-gray-800 mb-3">Google Ads & Meta Ads</h3> |
|
|
<p class="text-gray-600">Anúncios direcionados que colocam seu negócio na frente dos clientes certos.</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="feature-card bg-gray-50 p-8 rounded-xl hover:shadow-lg transition duration-300"> |
|
|
<div class="feature-icon text-4xl text-indigo-600 mb-6"> |
|
|
<i class="fas fa-envelope-open-text"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-gray-800 mb-3">E-mail Marketing</h3> |
|
|
<p class="text-gray-600">Campanhas por e-mail que convertem e mantêm seus clientes engajados.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="sobre" class="py-16 bg-gray-50"> |
|
|
<div class="container mx-auto px-4 flex flex-col md:flex-row items-center"> |
|
|
<div class="md:w-1/2 mb-10 md:mb-0 md:pr-10"> |
|
|
<h2 class="text-3xl font-bold text-gray-800 mb-6">Quem Somos</h2> |
|
|
<p class="text-gray-600 mb-4">Somos uma equipe de especialistas em marketing digital focada em ajudar pequenos negócios a crescerem online de forma simples e acessível.</p> |
|
|
<p class="text-gray-600 mb-6">Acreditamos que todo negócio merece ter uma presença digital forte, independente do tamanho ou orçamento.</p> |
|
|
<div class="flex items-center"> |
|
|
<div class="bg-indigo-100 p-3 rounded-full mr-4"> |
|
|
<i class="fas fa-check text-indigo-600"></i> |
|
|
</div> |
|
|
<span class="text-gray-700 font-medium">+150 clientes satisfeitos</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/2"> |
|
|
<img src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" |
|
|
alt="Nossa Equipe" |
|
|
class="rounded-lg shadow-lg max-w-full h-auto"> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="depoimentos" class="py-16 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl font-bold text-gray-800 mb-4">O Que Nossos Clientes Dizem</h2> |
|
|
<p class="text-gray-600 max-w-2xl mx-auto">Resultados reais de negócios reais</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="bg-gray-50 p-8 rounded-xl"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="text-yellow-400 mr-2"> |
|
|
<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> |
|
|
<p class="text-gray-600 mb-6">"Minhas vendas online aumentaram 300% em apenas 3 meses com as estratégias simples que implementaram."</p> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-user text-indigo-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold text-gray-800">Ana Silva</h4> |
|
|
<p class="text-gray-500 text-sm">Loja de Cosméticos</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-50 p-8 rounded-xl"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="text-yellow-400 mr-2"> |
|
|
<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> |
|
|
<p class="text-gray-600 mb-6">"Finalmente encontrei uma agência que fala a minha língua e entrega resultados sem complicações desnecessárias."</p> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-user text-indigo-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold text-gray-800">Carlos Mendes</h4> |
|
|
<p class="text-gray-500 text-sm">Restaurante</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-50 p-8 rounded-xl"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="text-yellow-400 mr-2"> |
|
|
<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> |
|
|
<p class="text-gray-600 mb-6">"O atendimento personalizado fez toda diferença. Eles realmente entendem as necessidades de pequenos negócios."</p> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-user text-indigo-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold text-gray-800">Juliana Costa</h4> |
|
|
<p class="text-gray-500 text-sm">Consultoria</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-indigo-50"> |
|
|
<div class="container mx-auto px-4 text-center"> |
|
|
<h2 class="text-3xl font-bold text-gray-800 mb-6">Pronto para Transformar Seu Negócio?</h2> |
|
|
<p class="text-gray-600 max-w-2xl mx-auto mb-8">Agende uma consulta gratuita e descubra como podemos ajudar seu negócio a crescer online.</p> |
|
|
<a href="https://seusite.com/contato" id="contato" class="cta-pulse bg-indigo-600 text-white font-bold py-4 px-12 rounded-lg hover:bg-indigo-700 transition duration-300 inline-block"> |
|
|
Fale Conosco <i class="fas fa-arrow-right ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-800 text-white py-12"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
|
|
<div> |
|
|
<div class="flex items-center mb-4"> |
|
|
<i class="fas fa-bullseye text-indigo-400 text-2xl mr-2"></i> |
|
|
<span class="text-xl font-bold">MarketingSimples</span> |
|
|
</div> |
|
|
<p class="text-gray-400">Simplificando o marketing digital para pequenos negócios desde 2020.</p> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h4 class="text-lg font-bold mb-4">Serviços</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Redes Sociais</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Google Ads</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">E-mail Marketing</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">SEO Básico</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h4 class="text-lg font-bold mb-4">Links Úteis</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">FAQ</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Política de Privacidade</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Termos de Serviço</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h4 class="text-lg font-bold mb-4">Contato</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-envelope text-indigo-400 mr-2"></i> |
|
|
<a href="mailto:[email protected]" class="text-gray-400 hover:text-white">[email protected]</a> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-phone text-indigo-400 mr-2"></i> |
|
|
<span class="text-gray-400">(11) 98765-4321</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-map-marker-alt text-indigo-400 mr-2"></i> |
|
|
<span class="text-gray-400">São Paulo, Brasil</span> |
|
|
</li> |
|
|
</ul> |
|
|
<div class="mt-4 flex space-x-4"> |
|
|
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-linkedin-in"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-whatsapp"></i></a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="border-t border-gray-700 mt-12 pt-8 text-center text-gray-400"> |
|
|
<p>© 2023 MarketingSimples. Todos os direitos reservados.</p> |
|
|
<p class="mt-2">Desenvolvido com <i class="fas fa-heart text-red-400"></i> para pequenos negócios</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
|
|
|
<a href="https://wa.me/5511987654321" class="fixed bottom-8 right-8 bg-green-500 text-white p-4 rounded-full shadow-lg hover:bg-green-600 transition duration-300 z-50"> |
|
|
<i class="fab fa-whatsapp text-2xl"></i> |
|
|
</a> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
|
|
anchor.addEventListener('click', function (e) { |
|
|
e.preventDefault(); |
|
|
|
|
|
document.querySelector(this.getAttribute('href')).scrollIntoView({ |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('contactForm')?.addEventListener('submit', function(e) { |
|
|
e.preventDefault(); |
|
|
alert('Obrigado pelo seu interesse! Entraremos em contato em breve.'); |
|
|
this.reset(); |
|
|
}); |
|
|
</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=kellytonx/kksj" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
