Projeto: Construa uma Landing Page SaaS com Tailwind CSS
Requisitos do Projeto
Construa uma landing page completa de produto SaaS que inclua navbar, seção hero, showcase de recursos, planos de preços, depoimentos e rodapé, com suporte a modo escuro e responsividade mobile para desktop.
Requisitos Técnicos
- Tailwind CSS v4 CDN
- Design responsivo (mobile-first)
- Modo escuro (prefixo
dark:) - Layout híbrido Flexbox + Grid
- Estados interativos e transições
Implementação Passo a Passo
Exemplo: Passo 1 - Navbar Responsiva
A navbar inclui um Logo, links do menu e um botão CTA. No mobile, ela colapsa em um menu hambúrguer.
HTML
<!DOCTYPE html>
<html lang="pt-br" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CloudFlow - Plataforma de Workflows Inteligente</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
darkMode: 'class'
}
</script>
</head>
<body class="bg-white dark:bg-gray-950 text-gray-900 dark:text-gray-100 transition-colors">
<!-- Navbar -->
<nav class="fixed top-0 w-full bg-white/80 dark:bg-gray-950/80 backdrop-blur-md border-b border-gray-200 dark:border-gray-800 z-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<!-- Logo -->
<div class="flex items-center gap-2">
<div class="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
<span class="text-white font-bold text-sm">CF</span>
</div>
<span class="text-xl font-bold">CloudFlow</span>
</div>
<!-- Menu desktop -->
<div class="hidden md:flex items-center gap-8">
<a href="#features" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">Recursos</a>
<a href="#pricing" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">Preços</a>
<a href="#testimonials" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">Depoimentos</a>
</div>
<!-- Botões CTA -->
<div class="hidden md:flex items-center gap-4">
<button id="themeToggle" class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
<span class="dark:hidden">🌙</span>
<span class="hidden dark:inline">☀️</span>
</button>
<a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">Entrar</a>
<a href="#" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">Teste Grátis</a>
</div>
<!-- Botão menu mobile -->
<button id="menuToggle" class="md:hidden p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
</svg>
</button>
</div>
</div>
<!-- Menu mobile -->
<div id="mobileMenu" class="hidden md:hidden border-t border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950">
<div class="px-4 py-4 space-y-3">
<a href="#features" class="block py-2 text-gray-600 dark:text-gray-400 hover:text-blue-600">Recursos</a>
<a href="#pricing" class="block py-2 text-gray-600 dark:text-gray-400 hover:text-blue-600">Preços</a>
<a href="#testimonials" class="block py-2 text-gray-600 dark:text-gray-400 hover:text-blue-600">Depoimentos</a>
<div class="pt-3 border-t border-gray-200 dark:border-gray-800">
<a href="#" class="block w-full text-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">Teste Grátis</a>
</div>
</div>
</div>
</nav>
<script>
const themeToggle = document.getElementById('themeToggle');
themeToggle?.addEventListener('click', () => {
document.documentElement.classList.toggle('dark');
});
const menuToggle = document.getElementById('menuToggle');
const mobileMenu = document.getElementById('mobileMenu');
menuToggle?.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
});
</script>
</body>
</html>
Exemplo: Passo 2 - Seção Hero
Um título grande com subtítulo, botões CTA duplos e lista de ícones de recursos.
HTML
<!DOCTYPE html>
<html lang="pt-br" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CloudFlow - Plataforma de Workflows Inteligente</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = { darkMode: 'class' }
</script>
</head>
<body class="bg-white dark:bg-gray-950 text-gray-900 dark:text-gray-100 transition-colors">
<!-- Seção Hero -->
<section class="pt-32 pb-20 px-4">
<div class="max-w-7xl mx-auto text-center">
<!-- Badge -->
<div class="inline-flex items-center gap-2 px-4 py-1.5 bg-blue-50 dark:bg-blue-950 text-blue-600 dark:text-blue-400 rounded-full text-sm mb-8">
<span class="w-2 h-2 bg-blue-500 rounded-full animate-pulse"></span>
Nova versão v3.0 está no ar
</div>
<!-- Título -->
<h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold leading-tight mb-6">
<span class="text-blue-600 dark:text-blue-400">Automatize</span> seus workflows
<br class="hidden sm:block">
Libere a produtividade da equipe
</h1>
<!-- Subtítulo -->
<p class="text-lg sm:text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto mb-10">
O CloudFlow ajuda você a conectar mais de 200 apps, orquestrar workflows visualmente e automatizar processos de negócio sem escrever uma única linha de código.
</p>
<!-- Botões CTA -->
<div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-16">
<a href="#" class="w-full sm:w-auto px-8 py-3.5 bg-blue-600 text-white text-lg rounded-xl hover:bg-blue-700 hover:shadow-lg hover:shadow-blue-500/25 transition-all">
Comece Grátis
</a>
<a href="#" class="w-full sm:w-auto px-8 py-3.5 border border-gray-300 dark:border-gray-700 text-lg rounded-xl hover:bg-gray-50 dark:hover:bg-gray-800 transition-all flex items-center justify-center gap-2">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"/>
</svg>
Assistir Demo
</a>
</div>
<!-- Ícones de recursos -->
<div class="grid grid-cols-2 md:grid-cols-4 gap-6 max-w-3xl mx-auto">
<div class="flex flex-col items-center gap-2">
<div class="w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-xl flex items-center justify-center">
<svg class="w-6 h-6 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
</svg>
</div>
<span class="text-sm text-gray-600 dark:text-gray-400">Ultra Rápido</span>
</div>
<div class="flex flex-col items-center gap-2">
<div class="w-12 h-12 bg-green-100 dark:bg-green-900 rounded-xl flex items-center justify-center">
<svg class="w-6 h-6 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
</svg>
</div>
<span class="text-sm text-gray-600 dark:text-gray-400">Seguro e Confiável</span>
</div>
<div class="flex flex-col items-center gap-2">
<div class="w-12 h-12 bg-purple-100 dark:bg-purple-900 rounded-xl flex items-center justify-center">
<svg class="w-6 h-6 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
</svg>
</div>
<span class="text-sm text-gray-600 dark:text-gray-400">200+ Integrações</span>
</div>
<div class="flex flex-col items-center gap-2">
<div class="w-12 h-12 bg-orange-100 dark:bg-orange-900 rounded-xl flex items-center justify-center">
<svg class="w-6 h-6 text-orange-600 dark:text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
</svg>
</div>
<span class="text-sm text-gray-600 dark:text-gray-400">Insights de Dados</span>
</div>
</div>
</div>
</section>
</body>
</html>
Exemplo: Passo 3 - Cards de Recursos
Use um layout Grid para exibir 4 cards de recursos com ícones e descrições.
HTML
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cards de Recursos</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = { darkMode: 'class' }
</script>
</head>
<body class="bg-white dark:bg-gray-950 text-gray-900 dark:text-gray-100">
<section id="features" class="py-20 px-4">
<div class="max-w-7xl mx-auto">
<!-- Cabeçalho da seção -->
<div class="text-center mb-16">
<h2 class="text-3xl sm:text-4xl font-bold mb-4">Por que escolher o CloudFlow</h2>
<p class="text-gray-600 dark:text-gray-400 max-w-xl mx-auto">Recursos poderosos para tornar seus workflows mais eficientes</p>
</div>
<!-- Grid de cards de recursos -->
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<!-- Card 1 -->
<div class="group p-6 bg-gray-50 dark:bg-gray-900 rounded-2xl hover:bg-white dark:hover:bg-gray-800 hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
<div class="w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-xl flex items-center justify-center mb-4 group-hover:bg-blue-600 transition-colors">
<svg class="w-6 h-6 text-blue-600 dark:text-blue-400 group-hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"/>
</svg>
</div>
<h3 class="text-lg font-semibold mb-2">Construtor Visual</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm">Interface arrastar e soltar para construir workflows complexos sem escrever código</p>
</div>
<!-- Card 2 -->
<div class="group p-6 bg-gray-50 dark:bg-gray-900 rounded-2xl hover:bg-white dark:hover:bg-gray-800 hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
<div class="w-12 h-12 bg-green-100 dark:bg-green-900 rounded-xl flex items-center justify-center mb-4 group-hover:bg-green-600 transition-colors">
<svg class="w-6 h-6 text-green-600 dark:text-green-400 group-hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
</svg>
</div>
<h3 class="text-lg font-semibold mb-2">Colaboração em Equipe</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm">Edição simultânea em tempo real, gerenciamento de permissões e propriedade compartilhada de workflows</p>
</div>
<!-- Card 3 -->
<div class="group p-6 bg-gray-50 dark:bg-gray-900 rounded-2xl hover:bg-white dark:hover:bg-gray-800 hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
<div class="w-12 h-12 bg-purple-100 dark:bg-purple-900 rounded-xl flex items-center justify-center mb-4 group-hover:bg-purple-600 transition-colors">
<svg class="w-6 h-6 text-purple-600 dark:text-purple-400 group-hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
</svg>
</div>
<h3 class="text-lg font-semibold mb-2">Análises Inteligentes</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm">Painel de análises integrado para monitorar o desempenho dos workflows em tempo real</p>
</div>
<!-- Card 4 -->
<div class="group p-6 bg-gray-50 dark:bg-gray-900 rounded-2xl hover:bg-white dark:hover:bg-gray-800 hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
<div class="w-12 h-12 bg-orange-100 dark:bg-orange-900 rounded-xl flex items-center justify-center mb-4 group-hover:bg-orange-600 transition-colors">
<svg class="w-6 h-6 text-orange-600 dark:text-orange-400 group-hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
</svg>
</div>
<h3 class="text-lg font-semibold mb-2">Segurança Empresarial</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm">Certificação SOC 2, criptografia ponta a ponta, atendendo requisitos de compliance de nível empresarial</p>
</div>
</div>
</div>
</section>
</body>
</html>
Exemplo: Passo 4 - Tabela de Preços
3 cards de planos de preços com o plano do meio destacado como recomendado.
HTML
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tabela de Preços</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = { darkMode: 'class' }
</script>
</head>
<body class="bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100">
<section id="pricing" class="py-20 px-4">
<div class="max-w-7xl mx-auto">
<!-- Cabeçalho da seção -->
<div class="text-center mb-16">
<h2 class="text-3xl sm:text-4xl font-bold mb-4">Preços Simples e Transparentes</h2>
<p class="text-gray-600 dark:text-gray-400 max-w-xl mx-auto">Escolha o plano que se encaixa na sua equipe. Faça upgrade ou downgrade a qualquer momento.</p>
</div>
<!-- Cards de preços -->
<div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
<!-- Plano Free -->
<div class="bg-white dark:bg-gray-800 rounded-2xl p-8 border border-gray-200 dark:border-gray-700">
<h3 class="text-lg font-semibold mb-2">Free</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-6">Para indivíduos começando</p>
<div class="mb-6">
<span class="text-4xl font-bold">$0</span>
<span class="text-gray-500">/mês</span>
</div>
<ul class="space-y-3 mb-8">
<li class="flex items-center gap-3 text-sm">
<svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
</svg>
5 workflows
</li>
<li class="flex items-center gap-3 text-sm">
<svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
</svg>
1.000 execuções/mês
</li>
<li class="flex items-center gap-3 text-sm">
<svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
</svg>
Suporte da comunidade
</li>
</ul>
<a href="#" class="block w-full py-3 text-center border border-gray-300 dark:border-gray-600 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
Começar
</a>
</div>
<!-- Plano Pro (recomendado) -->
<div class="relative bg-white dark:bg-gray-800 rounded-2xl p-8 border-2 border-blue-600 shadow-xl shadow-blue-600/10 scale-105">
<div class="absolute -top-4 left-1/2 -translate-x-1/2 px-4 py-1 bg-blue-600 text-white text-sm rounded-full">
Mais Popular
</div>
<h3 class="text-lg font-semibold mb-2">Pro</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-6">Para equipes em crescimento</p>
<div class="mb-6">
<span class="text-4xl font-bold">$19</span>
<span class="text-gray-500">/mês</span>
</div>
<ul class="space-y-3 mb-8">
<li class="flex items-center gap-3 text-sm">
<svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
</svg>
Workflows ilimitados
</li>
<li class="flex items-center gap-3 text-sm">
<svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
</svg>
50.000 execuções/mês
</li>
<li class="flex items-center gap-3 text-sm">
<svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
</svg>
Suporte prioritário por e-mail
</li>
<li class="flex items-center gap-3 text-sm">
<svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
</svg>
Análises avançadas
</li>
</ul>
<a href="#" class="block w-full py-3 text-center bg-blue-600 text-white rounded-xl hover:bg-blue-700 transition-colors">
Fazer Upgrade
</a>
</div>
<!-- Plano Enterprise -->
<div class="bg-white dark:bg-gray-800 rounded-2xl p-8 border border-gray-200 dark:border-gray-700">
<h3 class="text-lg font-semibold mb-2">Enterprise</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-6">Para grandes organizações</p>
<div class="mb-6">
<span class="text-4xl font-bold">$49</span>
<span class="text-gray-500">/mês</span>
</div>
<ul class="space-y-3 mb-8">
<li class="flex items-center gap-3 text-sm">
<svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
</svg>
Tudo do plano Pro
</li>
<li class="flex items-center gap-3 text-sm">
<svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
</svg>
Execuções ilimitadas
</li>
<li class="flex items-center gap-3 text-sm">
<svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
</svg>
Gerente de conta dedicado
</li>
<li class="flex items-center gap-3 text-sm">
<svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
</svg>
Garantia de SLA
</li>
</ul>
<a href="#" class="block w-full py-3 text-center border border-gray-300 dark:border-gray-600 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
Falar com Vendas
</a>
</div>
</div>
</div>
</section>
</body>
</html>
Exemplo: Passo 5 - Depoimentos e Rodapé
Mostre prova social (depoimentos de usuários) e um rodapé completo com links.
HTML
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Depoimentos e Rodapé</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = { darkMode: 'class' }
</script>
</head>
<body class="bg-white dark:bg-gray-950 text-gray-900 dark:text-gray-100">
<!-- Depoimentos -->
<section id="testimonials" class="py-20 px-4 bg-gray-50 dark:bg-gray-900">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-16">
<h2 class="text-3xl sm:text-4xl font-bold mb-4">Confiança de Equipes no Mundo Todo</h2>
<p class="text-gray-600 dark:text-gray-400">Mais de 10.000 empresas escolhem o CloudFlow</p>
</div>
<div class="grid md:grid-cols-3 gap-8">
<!-- Depoimento 1 -->
<div class="bg-white dark:bg-gray-800 p-6 rounded-2xl">
<div class="flex items-center gap-1 mb-4">
<span class="text-yellow-400">★★★★★</span>
</div>
<p class="text-gray-600 dark:text-gray-400 mb-6">"O CloudFlow nos economizou 20 horas de trabalho repetitivo toda semana. A equipe finalmente pode focar no que realmente importa."</p>
<div class="flex items-center gap-3">
<div class="w-10 h-10 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center font-semibold text-blue-600">S</div>
<div>
<p class="font-medium text-sm">Sarah Chen</p>
<p class="text-gray-500 text-xs">CTO, TechCorp</p>
</div>
</div>
</div>
<!-- Depoimento 2 -->
<div class="bg-white dark:bg-gray-800 p-6 rounded-2xl">
<div class="flex items-center gap-1 mb-4">
<span class="text-yellow-400">★★★★★</span>
</div>
<p class="text-gray-600 dark:text-gray-400 mb-6">"O construtor visual é tão intuitivo que até membros não técnicos da equipe podem começar a usar imediatamente. É um divisor de águas."</p>
<div class="flex items-center gap-3">
<div class="w-10 h-10 bg-green-100 dark:bg-green-900 rounded-full flex items-center justify-center font-semibold text-green-600">M</div>
<div>
<p class="font-medium text-sm">Michael Rivera</p>
<p class="text-gray-500 text-xs">VP de Operações, ShopDirect</p>
</div>
</div>
</div>
<!-- Depoimento 3 -->
<div class="bg-white dark:bg-gray-800 p-6 rounded-2xl">
<div class="flex items-center gap-1 mb-4">
<span class="text-yellow-400">★★★★★</span>
</div>
<p class="text-gray-600 dark:text-gray-400 mb-6">"Os recursos de compliance de nível empresarial nos deram a confiança para migrar nossos processos principais para a nuvem. Altamente recomendado."</p>
<div class="flex items-center gap-3">
<div class="w-10 h-10 bg-purple-100 dark:bg-purple-900 rounded-full flex items-center justify-center font-semibold text-purple-600">J</div>
<div>
<p class="font-medium text-sm">James Walker</p>
<p class="text-gray-500 text-xs">Diretor de TI, FinEdge Capital</p>
</div>
</div>
</div>
</div>
<!-- Logos de marcas -->
<div class="mt-16 text-center">
<p class="text-gray-500 text-sm mb-6">Confiado por líderes do setor</p>
<div class="flex flex-wrap items-center justify-center gap-8 opacity-50">
<span class="text-2xl font-bold text-gray-400">TechCorp</span>
<span class="text-2xl font-bold text-gray-400">DataFlow</span>
<span class="text-2xl font-bold text-gray-400">CloudBase</span>
<span class="text-2xl font-bold text-gray-400">NetPro</span>
</div>
</div>
</div>
</section>
<!-- Rodapé -->
<footer class="bg-gray-900 dark:bg-gray-950 text-gray-400 py-16 px-4">
<div class="max-w-7xl mx-auto">
<div class="grid grid-cols-2 md:grid-cols-4 gap-8 mb-12">
<!-- Produto -->
<div>
<h4 class="text-white font-semibold mb-4">Produto</h4>
<ul class="space-y-2 text-sm">
<li><a href="#" class="hover:text-white transition-colors">Recursos</a></li>
<li><a href="#" class="hover:text-white transition-colors">Preços</a></li>
<li><a href="#" class="hover:text-white transition-colors">Integrações</a></li>
<li><a href="#" class="hover:text-white transition-colors">Changelog</a></li>
</ul>
</div>
<!-- Recursos -->
<div>
<h4 class="text-white font-semibold mb-4">Recursos</h4>
<ul class="space-y-2 text-sm">
<li><a href="#" class="hover:text-white transition-colors">Documentação</a></li>
<li><a href="#" class="hover:text-white transition-colors">API</a></li>
<li><a href="#" class="hover:text-white transition-colors">Tutoriais</a></li>
<li><a href="#" class="hover:text-white transition-colors">Blog</a></li>
</ul>
</div>
<!-- Empresa -->
<div>
<h4 class="text-white font-semibold mb-4">Empresa</h4>
<ul class="space-y-2 text-sm">
<li><a href="#" class="hover:text-white transition-colors">Sobre Nós</a></li>
<li><a href="#" class="hover:text-white transition-colors">Carreiras</a></li>
<li><a href="#" class="hover:text-white transition-colors">Contato</a></li>
</ul>
</div>
<!-- Legal -->
<div>
<h4 class="text-white font-semibold mb-4">Legal</h4>
<ul class="space-y-2 text-sm">
<li><a href="#" class="hover:text-white transition-colors">Política de Privacidade</a></li>
<li><a href="#" class="hover:text-white transition-colors">Termos de Serviço</a></li>
<li><a href="#" class="hover:text-white transition-colors">Segurança e Compliance</a></li>
</ul>
</div>
</div>
<div class="border-t border-gray-800 pt-8 flex flex-col md:flex-row items-center justify-between gap-4">
<div class="flex items-center gap-2">
<div class="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
<span class="text-white font-bold text-sm">CF</span>
</div>
<span class="text-white font-bold">CloudFlow</span>
</div>
<p class="text-sm">© 2025 CloudFlow. Todos os direitos reservados.</p>
</div>
</div>
</footer>
</body>
</html>
Exemplo: Landing Page Completa
Combine todas as seções acima em um único arquivo de landing page:
HTML
<!DOCTYPE html>
<html lang="pt-br" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CloudFlow - Plataforma de Automação de Workflows Inteligente</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = { darkMode: 'class' }
</script>
</head>
<body class="bg-white dark:bg-gray-950 text-gray-900 dark:text-gray-100 transition-colors">
<!-- Navbar -->
<nav class="fixed top-0 w-full bg-white/80 dark:bg-gray-950/80 backdrop-blur-md border-b border-gray-200 dark:border-gray-800 z-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<div class="flex items-center gap-2">
<div class="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
<span class="text-white font-bold text-sm">CF</span>
</div>
<span class="text-xl font-bold">CloudFlow</span>
</div>
<div class="hidden md:flex items-center gap-8">
<a href="#features" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">Recursos</a>
<a href="#pricing" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">Preços</a>
<a href="#testimonials" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">Depoimentos</a>
</div>
<div class="hidden md:flex items-center gap-4">
<button id="themeToggle" class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
<span class="dark:hidden">🌙</span>
<span class="hidden dark:inline">☀️</span>
</button>
<a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 transition-colors">Entrar</a>
<a href="#" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">Teste Grátis</a>
</div>
<button id="menuToggle" class="md:hidden p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
</svg>
</button>
</div>
</div>
<div id="mobileMenu" class="hidden md:hidden border-t border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950">
<div class="px-4 py-4 space-y-3">
<a href="#features" class="block py-2 text-gray-600 dark:text-gray-400">Recursos</a>
<a href="#pricing" class="block py-2 text-gray-600 dark:text-gray-400">Preços</a>
<a href="#testimonials" class="block py-2 text-gray-600 dark:text-gray-400">Depoimentos</a>
<div class="pt-3 border-t border-gray-200 dark:border-gray-800">
<a href="#" class="block w-full text-center px-4 py-2 bg-blue-600 text-white rounded-lg">Teste Grátis</a>
</div>
</div>
</div>
</nav>
<!-- Hero -->
<section class="pt-32 pb-20 px-4">
<div class="max-w-7xl mx-auto text-center">
<div class="inline-flex items-center gap-2 px-4 py-1.5 bg-blue-50 dark:bg-blue-950 text-blue-600 dark:text-blue-400 rounded-full text-sm mb-8">
<span class="w-2 h-2 bg-blue-500 rounded-full animate-pulse"></span>
Nova versão v3.0 está no ar
</div>
<h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold leading-tight mb-6">
<span class="text-blue-600 dark:text-blue-400">Automatize</span> seus workflows
<br class="hidden sm:block">Libere a produtividade da equipe
</h1>
<p class="text-lg sm:text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto mb-10">
O CloudFlow ajuda você a conectar mais de 200 apps, orquestrar workflows visualmente e automatizar processos de negócio sem escrever uma única linha de código.
</p>
<div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-16">
<a href="#" class="w-full sm:w-auto px-8 py-3.5 bg-blue-600 text-white text-lg rounded-xl hover:bg-blue-700 hover:shadow-lg hover:shadow-blue-500/25 transition-all">Comece Grátis</a>
<a href="#" class="w-full sm:w-auto px-8 py-3.5 border border-gray-300 dark:border-gray-700 text-lg rounded-xl hover:bg-gray-50 dark:hover:bg-gray-800 transition-all flex items-center justify-center gap-2">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"/></svg>
Assistir Demo
</a>
</div>
<div class="grid grid-cols-2 md:grid-cols-4 gap-6 max-w-3xl mx-auto">
<div class="flex flex-col items-center gap-2">
<div class="w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-xl flex items-center justify-center"><svg class="w-6 h-6 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg></div>
<span class="text-sm text-gray-600 dark:text-gray-400">Ultra Rápido</span>
</div>
<div class="flex flex-col items-center gap-2">
<div class="w-12 h-12 bg-green-100 dark:bg-green-900 rounded-xl flex items-center justify-center"><svg class="w-6 h-6 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
<span class="text-sm text-gray-600 dark:text-gray-400">Seguro e Confiável</span>
</div>
<div class="flex flex-col items-center gap-2">
<div class="w-12 h-12 bg-purple-100 dark:bg-purple-900 rounded-xl flex items-center justify-center"><svg class="w-6 h-6 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg></div>
<span class="text-sm text-gray-600 dark:text-gray-400">200+ Integrações</span>
</div>
<div class="flex flex-col items-center gap-2">
<div class="w-12 h-12 bg-orange-100 dark:bg-orange-900 rounded-xl flex items-center justify-center"><svg class="w-6 h-6 text-orange-600 dark:text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
<span class="text-sm text-gray-600 dark:text-gray-400">Insights de Dados</span>
</div>
</div>
</div>
</section>
<!-- Recursos -->
<section id="features" class="py-20 px-4">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-16">
<h2 class="text-3xl sm:text-4xl font-bold mb-4">Por que escolher o CloudFlow</h2>
<p class="text-gray-600 dark:text-gray-400 max-w-xl mx-auto">Recursos poderosos para tornar seus workflows mais eficientes</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="group p-6 bg-gray-50 dark:bg-gray-900 rounded-2xl hover:bg-white dark:hover:bg-gray-800 hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
<div class="w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-xl flex items-center justify-center mb-4 group-hover:bg-blue-600 transition-colors"><svg class="w-6 h-6 text-blue-600 dark:text-blue-400 group-hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"/></svg></div>
<h3 class="text-lg font-semibold mb-2">Construtor Visual</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm">Interface arrastar e soltar para construir workflows complexos sem escrever código</p>
</div>
<div class="group p-6 bg-gray-50 dark:bg-gray-900 rounded-2xl hover:bg-white dark:hover:bg-gray-800 hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
<div class="w-12 h-12 bg-green-100 dark:bg-green-900 rounded-xl flex items-center justify-center mb-4 group-hover:bg-green-600 transition-colors"><svg class="w-6 h-6 text-green-600 dark:text-green-400 group-hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
<h3 class="text-lg font-semibold mb-2">Colaboração em Equipe</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm">Edição simultânea em tempo real, gerenciamento de permissões e propriedade compartilhada de workflows</p>
</div>
<div class="group p-6 bg-gray-50 dark:bg-gray-900 rounded-2xl hover:bg-white dark:hover:bg-gray-800 hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
<div class="w-12 h-12 bg-purple-100 dark:bg-purple-900 rounded-xl flex items-center justify-center mb-4 group-hover:bg-purple-600 transition-colors"><svg class="w-6 h-6 text-purple-600 dark:text-purple-400 group-hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
<h3 class="text-lg font-semibold mb-2">Análises Inteligentes</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm">Painel de análises integrado para monitorar o desempenho dos workflows em tempo real</p>
</div>
<div class="group p-6 bg-gray-50 dark:bg-gray-900 rounded-2xl hover:bg-white dark:hover:bg-gray-800 hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
<div class="w-12 h-12 bg-orange-100 dark:bg-orange-900 rounded-xl flex items-center justify-center mb-4 group-hover:bg-orange-600 transition-colors"><svg class="w-6 h-6 text-orange-600 dark:text-orange-400 group-hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg></div>
<h3 class="text-lg font-semibold mb-2">Segurança Empresarial</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm">Certificação SOC 2, criptografia ponta a ponta, atendendo requisitos de compliance de nível empresarial</p>
</div>
</div>
</div>
</section>
<!-- Preços -->
<section id="pricing" class="py-20 px-4 bg-gray-50 dark:bg-gray-900">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-16">
<h2 class="text-3xl sm:text-4xl font-bold mb-4">Preços Simples e Transparentes</h2>
<p class="text-gray-600 dark:text-gray-400 max-w-xl mx-auto">Escolha o plano que se encaixa na sua equipe. Faça upgrade ou downgrade a qualquer momento.</p>
</div>
<div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
<div class="bg-white dark:bg-gray-800 rounded-2xl p-8 border border-gray-200 dark:border-gray-700">
<h3 class="text-lg font-semibold mb-2">Free</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-6">Para indivíduos começando</p>
<div class="mb-6"><span class="text-4xl font-bold">$0</span><span class="text-gray-500">/mês</span></div>
<ul class="space-y-3 mb-8">
<li class="flex items-center gap-3 text-sm"><svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>5 workflows</li>
<li class="flex items-center gap-3 text-sm"><svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>1.000 execuções/mês</li>
<li class="flex items-center gap-3 text-sm"><svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>Suporte da comunidade</li>
</ul>
<a href="#" class="block w-full py-3 text-center border border-gray-300 dark:border-gray-600 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">Começar</a>
</div>
<div class="relative bg-white dark:bg-gray-800 rounded-2xl p-8 border-2 border-blue-600 shadow-xl shadow-blue-600/10 md:scale-105">
<div class="absolute -top-4 left-1/2 -translate-x-1/2 px-4 py-1 bg-blue-600 text-white text-sm rounded-full">Mais Popular</div>
<h3 class="text-lg font-semibold mb-2">Pro</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-6">Para equipes em crescimento</p>
<div class="mb-6"><span class="text-4xl font-bold">$19</span><span class="text-gray-500">/mês</span></div>
<ul class="space-y-3 mb-8">
<li class="flex items-center gap-3 text-sm"><svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>Workflows ilimitados</li>
<li class="flex items-center gap-3 text-sm"><svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>50.000 execuções/mês</li>
<li class="flex items-center gap-3 text-sm"><svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>Suporte prioritário por e-mail</li>
<li class="flex items-center gap-3 text-sm"><svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>Análises avançadas</li>
</ul>
<a href="#" class="block w-full py-3 text-center bg-blue-600 text-white rounded-xl hover:bg-blue-700 transition-colors">Fazer Upgrade</a>
</div>
<div class="bg-white dark:bg-gray-800 rounded-2xl p-8 border border-gray-200 dark:border-gray-700">
<h3 class="text-lg font-semibold mb-2">Enterprise</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-6">Para grandes organizações</p>
<div class="mb-6"><span class="text-4xl font-bold">$49</span><span class="text-gray-500">/mês</span></div>
<ul class="space-y-3 mb-8">
<li class="flex items-center gap-3 text-sm"><svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>Tudo do plano Pro</li>
<li class="flex items-center gap-3 text-sm"><svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>Execuções ilimitadas</li>
<li class="flex items-center gap-3 text-sm"><svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>Gerente de conta dedicado</li>
<li class="flex items-center gap-3 text-sm"><svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>Garantia de SLA</li>
</ul>
<a href="#" class="block w-full py-3 text-center border border-gray-300 dark:border-gray-600 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">Falar com Vendas</a>
</div>
</div>
</div>
</section>
<!-- Depoimentos -->
<section id="testimonials" class="py-20 px-4">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-16">
<h2 class="text-3xl sm:text-4xl font-bold mb-4">Confiança de Equipes no Mundo Todo</h2>
<p class="text-gray-600 dark:text-gray-400">Mais de 10.000 empresas escolhem o CloudFlow</p>
</div>
<div class="grid md:grid-cols-3 gap-8">
<div class="bg-gray-50 dark:bg-gray-900 p-6 rounded-2xl">
<div class="flex items-center gap-1 mb-4"><span class="text-yellow-400">★★★★★</span></div>
<p class="text-gray-600 dark:text-gray-400 mb-6">"O CloudFlow nos economizou 20 horas de trabalho repetitivo toda semana. A equipe finalmente pode focar no que realmente importa."</p>
<div class="flex items-center gap-3">
<div class="w-10 h-10 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center font-semibold text-blue-600">S</div>
<div><p class="font-medium text-sm">Sarah Chen</p><p class="text-gray-500 text-xs">CTO, TechCorp</p></div>
</div>
</div>
<div class="bg-gray-50 dark:bg-gray-900 p-6 rounded-2xl">
<div class="flex items-center gap-1 mb-4"><span class="text-yellow-400">★★★★★</span></div>
<p class="text-gray-600 dark:text-gray-400 mb-6">"O construtor visual é tão intuitivo que até membros não técnicos da equipe podem começar a usar imediatamente. É um divisor de águas."</p>
<div class="flex items-center gap-3">
<div class="w-10 h-10 bg-green-100 dark:bg-green-900 rounded-full flex items-center justify-center font-semibold text-green-600">M</div>
<div><p class="font-medium text-sm">Michael Rivera</p><p class="text-gray-500 text-xs">VP de Operações, ShopDirect</p></div>
</div>
</div>
<div class="bg-gray-50 dark:bg-gray-900 p-6 rounded-2xl">
<div class="flex items-center gap-1 mb-4"><span class="text-yellow-400">★★★★★</span></div>
<p class="text-gray-600 dark:text-gray-400 mb-6">"Os recursos de compliance de nível empresarial nos deram a confiança para migrar nossos processos principais para a nuvem. Altamente recomendado."</p>
<div class="flex items-center gap-3">
<div class="w-10 h-10 bg-purple-100 dark:bg-purple-900 rounded-full flex items-center justify-center font-semibold text-purple-600">J</div>
<div><p class="font-medium text-sm">James Walker</p><p class="text-gray-500 text-xs">Diretor de TI, FinEdge Capital</p></div>
</div>
</div>
</div>
</div>
</section>
<!-- Rodapé -->
<footer class="bg-gray-900 dark:bg-gray-950 text-gray-400 py-16 px-4">
<div class="max-w-7xl mx-auto">
<div class="grid grid-cols-2 md:grid-cols-4 gap-8 mb-12">
<div>
<h4 class="text-white font-semibold mb-4">Produto</h4>
<ul class="space-y-2 text-sm">
<li><a href="#" class="hover:text-white transition-colors">Recursos</a></li>
<li><a href="#" class="hover:text-white transition-colors">Preços</a></li>
<li><a href="#" class="hover:text-white transition-colors">Integrações</a></li>
<li><a href="#" class="hover:text-white transition-colors">Changelog</a></li>
</ul>
</div>
<div>
<h4 class="text-white font-semibold mb-4">Recursos</h4>
<ul class="space-y-2 text-sm">
<li><a href="#" class="hover:text-white transition-colors">Documentação</a></li>
<li><a href="#" class="hover:text-white transition-colors">API</a></li>
<li><a href="#" class="hover:text-white transition-colors">Tutoriais</a></li>
<li><a href="#" class="hover:text-white transition-colors">Blog</a></li>
</ul>
</div>
<div>
<h4 class="text-white font-semibold mb-4">Empresa</h4>
<ul class="space-y-2 text-sm">
<li><a href="#" class="hover:text-white transition-colors">Sobre Nós</a></li>
<li><a href="#" class="hover:text-white transition-colors">Carreiras</a></li>
<li><a href="#" class="hover:text-white transition-colors">Contato</a></li>
</ul>
</div>
<div>
<h4 class="text-white font-semibold mb-4">Legal</h4>
<ul class="space-y-2 text-sm">
<li><a href="#" class="hover:text-white transition-colors">Política de Privacidade</a></li>
<li><a href="#" class="hover:text-white transition-colors">Termos de Serviço</a></li>
<li><a href="#" class="hover:text-white transition-colors">Segurança e Compliance</a></li>
</ul>
</div>
</div>
<div class="border-t border-gray-800 pt-8 flex flex-col md:flex-row items-center justify-between gap-4">
<div class="flex items-center gap-2">
<div class="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center"><span class="text-white font-bold text-sm">CF</span></div>
<span class="text-white font-bold">CloudFlow</span>
</div>
<p class="text-sm">© 2025 CloudFlow. Todos os direitos reservados.</p>
</div>
</div>
</footer>
<script>
document.getElementById('themeToggle')?.addEventListener('click', () => {
document.documentElement.classList.toggle('dark');
});
document.getElementById('menuToggle')?.addEventListener('click', () => {
document.getElementById('mobileMenu').classList.toggle('hidden');
});
</script>
</body>
</html>
Critérios de Aceitação
- [ ] A navbar exibe menu hambúrguer no mobile e links completos no desktop
- [ ] O título da seção hero está centralizado e os botões CTA são exibidos em largura total em telas pequenas
- [ ] Os cards de recursos são exibidos em 1 coluna no mobile, 2 no tablet e 4 no desktop
- [ ] O card de preço do meio está destacado com efeito de sombra
- [ ] Os cards de depoimentos empilham verticalmente no mobile e ficam em 3 colunas no desktop
- [ ] Todas as seções exibem as mudanças de cor corretas ao alternar o modo escuro
- [ ] Todos os elementos interativos possuem feedback de estado hover/ativo
Extensões
- Adicionar navegação com scroll suave e destaque da seção ativa
- Integrar Alpine.js para transições animadas do menu mobile
- Adicionar animações de entrada na viewport (biblioteca AOS ou
animate.css) - Implementar alternância de preços mensal/anual
- Adicionar mais prova social (logos de clientes em scroll, contadores de estatísticas)