English 中文 العربية 日本語 Português

Tailwind CSS: Projeto

1. 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.

2. Requisitos Técnicos

3. 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 📖 Somente leitura 
<!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>
67 linhas de lógica (limite de 40, somente leitura)

▶ Exemplo: Passo 2 - Seção Hero

Um título grande com subtítulo, botões CTA duplos e lista de ícones de recursos.

HTML 📖 Somente leitura 
<!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>
75 linhas de lógica (limite de 40, somente leitura)

▶ Exemplo: Passo 3 - Cards de Recursos

Use um layout Grid para exibir 4 cards de recursos com ícones e descrições.

HTML 📖 Somente leitura 
<!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>
60 linhas de lógica (limite de 40, somente leitura)

▶ Exemplo: Passo 4 - Tabela de Preços

3 cards de planos de preços com o plano do meio destacado como recomendado.

HTML 📖 Somente leitura 
<!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>
132 linhas de lógica (limite de 40, somente leitura)

▶ Exemplo: Passo 5 - Depoimentos e Rodapé

Mostre prova social (depoimentos de usuários) e um rodapé completo com links.

HTML 📖 Somente leitura 
<!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">&copy; 2025 CloudFlow. Todos os direitos reservados.</p>
      </div>
    </div>
  </footer>

</body>
</html>
121 linhas de lógica (limite de 40, somente leitura)

▶ Exemplo: Landing Page Completa

Combine todas as seções acima em um único arquivo de landing page:

HTML 📖 Somente leitura 
<!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">&copy; 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>
259 linhas de lógica (limite de 40, somente leitura)

4. Critérios de Aceitação

5. Extensões

❓ Perguntas Frequentes

P: Quando devo usar @apply no Tailwind? R: Use @apply quando precisar reutilizar a mesma combinação de utilitários em múltiplos elementos. Mas evite uso excessivo - a força do Tailwind são os utilitários inline.

P: Como personalizo o tema padrão do Tailwind? R: Edite ailwind.config.js e estenda o objeto heme. Você pode adicionar cores, fontes, espaçamentos e breakpoints personalizados.

P: O Tailwind CSS é bom para projetos grandes? R: Sim! A abordagem utility-first do Tailwind escala bem. Use extração de componentes, @apply para padrões repetidos e organização adequada de arquivos.

📖 Resumo

📝 Exercícios

  1. Básico (Dificuldade: ⭐): Crie um componente de cartão responsivo usando utilitários flex e gap do Tailwind.
  2. Intermediário (Dificuldade: ⭐⭐): Construa uma barra de navegação com menu hambúrguer mobile usando Alpine.js e Tailwind.
  3. Avançado (Dificuldade: ⭐⭐⭐): Crie uma landing page completa com hero, recursos, preços e rodapé.
Web-Tutorial.com

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

100%