Features

Seções de funcionalidades para apresentar produtos e serviços.

---

Grid de cards — dark

Seis funcionalidades em grade 3×2 com ícone, título e descrição.

<template>
  <section class="features-dark">
    <header>
      <Badge variant="lime">Funcionalidades</Badge>
      <h2>Tudo que você precisa,<br>sem o que você não precisa</h2>
      <p>Cada componente foi pensado para ser simples de usar.</p>
    </header>

    <div class="grid">
      <div v-for="f in features" :key="f.title" class="card">
        <span class="icon">{{ f.icon }}</span>
        <strong>{{ f.title }}</strong>
        <p>{{ f.desc }}</p>
      </div>
    </div>
  </section>
</template>

---

Feature em destaque — light

Uma funcionalidade principal em evidência, com lista de pontos ao lado.

<template>
  <section class="feature-highlight">
    <div class="visual">
      <!-- screenshot ou demo interativo -->
    </div>

    <div class="copy">
      <Badge variant="blue">Novo</Badge>
      <h2>Acompanhe o progresso em tempo real</h2>
      <p>Dashboards dinâmicos que atualizam conforme seu time avança.</p>

      <ul>
        <li v-for="item in points" :key="item">
          <CheckIcon /> {{ item }}
        </li>
      </ul>

      <Button variant="primary">Explorar dashboard →</Button>
    </div>
  </section>
</template>