Landing Page

Projeto: Landing Page 🚀

Uma landing page é uma página única que convence o visitante a fazer algo (comprar, se cadastrar, etc.)

📐 Estrutura de uma Landing Page

┌──────────────────────────┐
│  HEADER (logo + menu)    │
├──────────────────────────┤
│  HERO (título + CTA)     │
│  "Transforme sua carreira"│
│  [Começar Grátis]        │
├──────────────────────────┤
│  FEATURES (recursos)     │
│  ⚡ Rápido  🎯 Fácil     │
├──────────────────────────┤
│  TESTIMONIALS             │
│  "Adorei!" - Maria       │
├──────────────────────────┤
│  PRICING (planos)        │
│  Free | Pro | Premium    │
├──────────────────────────┤
│  FOOTER (links + contato)│
└──────────────────────────┘

💻 Código HTML Base

<header>
  <nav>
    <img src="logo.png" alt="Logo">
    <a href="#features">Recursos</a>
    <a href="#pricing">Preços</a>
  </nav>
</header>

<section id="hero">
  <h1>Aprenda a programar</h1>
  <p>De zero a profissional em 6 meses</p>
  <button>Começar Grátis</button>
</section>

<section id="features">
  <h2>Por que nos escolher?</h2>
  <div class="grid">
    <div>⚡ Aulas práticas</div>
    <div>🎯 Projetos reais</div>
    <div>🤖 IA como tutor</div>
  </div>
</section>

🎨 CSS para o Hero

#hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 80vh;
  text-align: center;
  background: linear-gradient(135deg, #1a1a2e, #16213e);
}