# MetricsBanner

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

Faixa vermelha escura com quatro números da instituição — "+500K Alunos Impactados", "99% Satisfação Garantida"… —, com divisórias entre eles. Os números vêm por `metricas` (E76), e a faixa é uma região com título só para o leitor (`titulo`, padrão "A Phorte em números").

- Função: Campanha (marketing)
- Também chamado de: números, métricas, faixa de números, estatísticas
- Mora em: `app/components/organisms/marketing/MetricsBanner.tsx`
- Página: [https://phorte-design-system.vercel.app/styleguide/peca/MetricsBanner](https://phorte-design-system.vercel.app/styleguide/peca/MetricsBanner)
- Ficha no Storybook: [marketing-metricsbanner](https://main--69b4847d498a9bd8659db9ba.chromatic.com/?path=/docs/marketing-metricsbanner--docs)
- Prévia ao vivo, sozinha: [https://phorte-design-system.vercel.app/previa/MetricsBanner/0](https://phorte-design-system.vercel.app/previa/MetricsBanner/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 { MetricsBanner } from '@/app/components/organisms/marketing/MetricsBanner';

<MetricsBanner />
```

## Uso

### Variantes na ficha

1. [Padrão](https://phorte-design-system.vercel.app/previa/MetricsBanner/0)
2. [Outros números](https://phorte-design-system.vercel.app/previa/MetricsBanner/1)

Em página de campanha, entre seções, como prova de escala.

### Quando não usar

Para números em cartões, use o StatCard. Para diferenciais com texto, o WhyChoose ou o FeaturesGrid.

### Faça

- Passe `metricas` com números que a instituição sustenta.

### Evite

- Publicar os números de exemplo: "99% Satisfação Garantida" é uma promessa.

### Anatomia

1. **Faixa** — Região com título `sr-only` (`h2`), fundo `--primary-dark`, texto branco.
2. **Métrica** — Um par da lista de definição (E76): o rótulo (`dt`, `tiny`) e o valor (`dd`, com a cara do `h2`), o valor em cima na tela; divisória à esquerda.

### Estados

| Estado | O que muda |
| --- | --- |
| Padrão | Duas colunas no celular, 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

- [StatCard](https://phorte-design-system.vercel.app/styleguide/md/StatCard.md) — Número em cartão.
- [FeaturesGrid](https://phorte-design-system.vercel.app/styleguide/md/FeaturesGrid.md) — Benefícios com texto.

## Especificação

### Propriedades

| Prop | Tipo | Padrão | Obrigatória | Descrição |
| --- | --- | --- | --- | --- |
| `metricas` | `Metrica[]` | `METRICAS_PADRAO` | não | Os números por prop (E76): eram fixos no arquivo. |
| `titulo` | `string` | `'A Phorte em números'` | não | Título da faixa, só para o leitor de tela: sem ele, a região não diz do que são os números. |

### Tokens de cor

| Token | Valor | Usado como |
| --- | --- | --- |
| `--ink-inverse` | #FAFAFA | `text-ink-inverse` |
| `--primary-dark` | #A81E1E | `bg-primary-dark` |
| `--primary-foreground` | #FFFFFF | `text-primary-foreground` |

## Acessibilidade

### Leitor de tela

- Os números estão numa `dl`, cada um com o seu rótulo: o leitor diz "Alunos Impactados, +500K". Até a E76 eram `h2`, e a lista de títulos ganhava "+500K", "99%"… sem dizer de quê.

### 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/MetricsBanner.tsx` | Disponível |
| Ficha | https://main--69b4847d498a9bd8659db9ba.chromatic.com/?path=/docs/marketing-metricsbanner--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/MetricsBanner.tsx