Hero

Variantes de seção hero para landing pages.

---

Dark — centralizado com gradiente

Estilo padrão HalfByte: fundo escuro, headline com gradiente, stats e dois CTAs.

<template>
  <section class="hero-dark">
    <!-- badge / eyebrow -->
    <div class="eyebrow">
      <span class="dot" />
      Novo · v2.0 disponível
    </div>

    <h1>
      Construa interfaces
      <span class="gradient">incríveis</span> mais rápido
    </h1>

    <p class="sub">
      Componentes de alta qualidade para Vue 3, construídos com
      acessibilidade e performance em mente.
    </p>

    <div class="actions">
      <Button variant="primary" size="lg">Começar agora →</Button>
      <Button variant="inverse" size="lg">Ver componentes</Button>
    </div>

    <div class="stats">
      <div><strong>50+</strong><span>Componentes</span></div>
      <div><strong>100%</strong><span>TypeScript</span></div>
      <div><strong>a11y</strong><span>Acessível</span></div>
    </div>
  </section>
</template>

---

Split — texto + card lateral

Fundo claro, layout de duas colunas: copy à esquerda, card de captura à direita.

<template>
  <section class="hero-split">
    <div class="copy">
      <Badge variant="blue">Acesso antecipado</Badge>
      <h1>O jeito certo de<br>gerenciar projetos</h1>
      <p>Planos, tarefas e entregas em um só lugar.</p>
      <div class="actions">
        <Button variant="primary">Criar conta grátis</Button>
        <Button variant="ghost">Assistir demo →</Button>
      </div>
    </div>

    <Card class="form-card">
      <h2>Comece agora</h2>
      <Input label="Nome" placeholder="Seu nome completo" />
      <Input label="E-mail" placeholder="seu@email.com" />
      <Input label="Empresa" placeholder="Nome da empresa" />
      <Button variant="primary">Criar conta grátis →</Button>
    </Card>
  </section>
</template>