# FeaturesGrid

> Componentes / Campanha (marketing) · Estado: **Em andamento** — Implementado e utilizável, mas ainda sem a validação completa de acessibilidade.

Seção de benefícios de página de campanha: título "Por que escolher a Phorte?", descrição e quatro cartões com ícone, título e frase. Os benefícios vêm por `itens` (o formato do WhyChoose), e o título e a descrição por `titulo` e `descricao` (E78).

- Função: Campanha (marketing)
- Também chamado de: benefícios, diferenciais de campanha, grade de recursos, features
- Mora em: `app/components/organisms/marketing/FeaturesGrid.tsx`
- Página: [https://phorte-design-system.vercel.app/styleguide/peca/FeaturesGrid](https://phorte-design-system.vercel.app/styleguide/peca/FeaturesGrid)
- Ficha no Storybook: [marketing-featuresgrid](https://main--69b4847d498a9bd8659db9ba.chromatic.com/?path=/docs/marketing-featuresgrid--docs)
- Prévia ao vivo, sozinha: [https://phorte-design-system.vercel.app/previa/FeaturesGrid/0](https://phorte-design-system.vercel.app/previa/FeaturesGrid/0)
- Todas as peças: [https://phorte-design-system.vercel.app/llms.txt](https://phorte-design-system.vercel.app/llms.txt)

## Como usar no código

```tsx
import { FeaturesGrid } from '@/app/components/organisms/marketing/FeaturesGrid';

<FeaturesGrid />
```

## Uso

### Variantes na ficha

1. [Padrão](https://phorte-design-system.vercel.app/previa/FeaturesGrid/0)
2. [Outros benefícios](https://phorte-design-system.vercel.app/previa/FeaturesGrid/1)

Em página de campanha, logo depois do topo, para os argumentos do curso ou da oferta.

### Quando não usar

Na página inicial, para os diferenciais institucionais, use o WhyChoose — as duas peças continuam separadas (decisão de 2026-09-28), com os mesmos dados e as mesmas primitivas: o WhyChoose centra e arredonda o ícone; esta alinha à esquerda, sem borda no celular. Para números, o MetricsBanner.

### Faça

- Passe `itens` e o `titulo` da campanha — o padrão repete o título do WhyChoose.
- Confira as promessas antes de publicar ("Mentoria 24/7", "validade imediata").

### Evite

- Usar junto com o WhyChoose na mesma página: os dois se chamam "Por que escolher a Phorte?".

### Anatomia

1. **Título** — Typography `h2` grande e a descrição.
2. **Benefício** — Um Card com o ícone num IconBox `primary` (E78; era o ícone solto), título (`CardTitle`, `h3`) e a frase.

### Estados

| Estado | O que muda |
| --- | --- |
| Celular | Cartões sem borda nem fundo, uma coluna. |
| A partir de 768px | Cartões com borda e sombra; duas colunas, quatro a partir de 1024px. |

### Comportamento

| Situação | O que acontece |
| --- | --- |
| Entrada na tela | Abaixo da dobra, sobe 20px e aparece ao entrar na tela, uma vez. O HTML do servidor já sai visível, e o que está à vista ao abrir não é escondido — sem JavaScript, nada some (E138, testado). Com movimento reduzido, não anima. |

### Relacionados

- [WhyChoose](https://phorte-design-system.vercel.app/styleguide/md/WhyChoose.md) — Os diferenciais institucionais, na página inicial.
- [MetricsBanner](https://phorte-design-system.vercel.app/styleguide/md/MetricsBanner.md) — Números da instituição.
- [Card](https://phorte-design-system.vercel.app/styleguide/md/Card.md) — A superfície de cada benefício.

## Especificação

### Propriedades

| Prop | Tipo | Padrão | Obrigatória | Descrição |
| --- | --- | --- | --- | --- |
| `itens` | `Diferencial[]` | `BENEFICIOS_PADRAO` | não | Os benefícios por prop (E78), no formato do WhyChoose. |
| `titulo` | `string` | `'Por que escolher a Phorte?'` | não |  |
| `descricao` | `string` | `'Desenvolvemos uma metodologia focada no que o mercado exige: velocidade, prática e resultados comprovados.'` | não |  |

### Tokens de cor

| Token | Valor | Usado como |
| --- | --- | --- |
| `--background` | #FAFAFA | `bg-background` |
| `--border` | #E5E5E5 | `border-border` |
| `--card` | #FFFFFF | `bg-card` |

## Acessibilidade

### Leitor de tela

- Os ícones não têm texto; o sentido está no título de cada benefício.

### O que sustenta o estado

Usa os padrões: estatico. Falta ouvir com leitor de tela: estatico.

## Status e recursos

| Tipo | Recurso | Status |
| --- | --- | --- |
| Código | `app/components/organisms/marketing/FeaturesGrid.tsx` | Disponível |
| Ficha | https://main--69b4847d498a9bd8659db9ba.chromatic.com/?path=/docs/marketing-featuresgrid--docs | Disponível |
| Teste de acessibilidade | axe em `npm run test` | No gate de todo commit |
| Leitor de tela | Passada da E33 | Falta ouvir |
| Design | Figma | Desativado até a Fase 2 |

### Histórico

- `0298af8` 2026-09-30 — E147: fechamento da Entrega 11 — REPORT.md, verificação cross-agent e o gate estático estrito
- Histórico completo no GitHub: https://github.com/srbunnie/Pos-Phorte-Design-System/commits/main/app/components/organisms/marketing/FeaturesGrid.tsx