Why
Em andamentoSeção "Por que escolher a Phorte?": chapéu "Diferenciais", título e descrição centrados e quatro diferenciais em grade — Card com o ícone num IconBox, título e frase. Os diferenciais vêm por itens (E78), no mesmo formato do FeaturesGrid.
- Função
- Institucional
- Também chamado de
- diferenciais, por que a Phorte, benefícios, vantagens
- Mora em
- app/components/organisms/WhyChoose.tsx
- Última mudança
- 2026-09-29
Prévia
A peça ao vivo, vinda da ficha, na largura escolhida. Em larguras fixas, ela roda num quadro do tamanho de uma tela de verdade.
1280px, em tamanho real
Variantes na ficha
Lidas da ficha no build, na ordem do palco. Cada uma abre sozinha, sem o styleguide em volta — é o endereço que o palco carrega.
Quando usar
Na página inicial, depois da vitrine de cursos, para os argumentos institucionais.
Faça
- Passe
itens(icone,titulo,descricao) — o mesmo formato do FeaturesGrid, para trocar uma peça pela outra sem reescrever os dados. - Mantenha títulos curtos e frases de uma linha.
Evite
- Mais de quatro diferenciais: a grade é de quatro colunas no computador.
Quando não usar. Para benefícios de um curso numa página de campanha, use o FeaturesGrid. Para números, o StatCard ou o MetricsBanner.
Anatomia
As partes, na ordem em que o olho — e o teclado — passam.
- Título — Um SectionTitle centrado, com o chapéu "Diferenciais".
- Diferencial — Um Card (E78): o ícone num IconBox `primary` redondo de 64px (E77; o círculo usava o fundo de erro, `--destructive-subtle`), título (`h3`) e frase.
Estados
Os estados que a peça tem no código, e o que muda em cada um.
| Estado | O que muda |
|---|---|
| Padrão | Uma coluna no celular, duas a partir de 768px, quatro a partir de 1024px. |
| Hover | Sombra, e o círculo fica vermelho cheio com ícone branco. |
Comportamento
| Situação | O que acontece |
|---|---|
| Qualquer interação | Estática: sem links nem foco. |
Relacionados
Como usar no código
A importação e o menor uso, lidos do arquivo. O … marca as props obrigatórias.
import WhyChoose from '@/app/components/organisms/WhyChoose';
<WhyChoose />Propriedades
Lidas do código da peça no build — não escritas à mão.
| Prop | Tipo | Padrão | Obrigatória | Descrição |
|---|---|---|---|---|
itens | Diferencial[] | DIFERENCIAIS_PADRAO | não | Os diferenciais por prop (E78): eram fixos no arquivo. |
Tokens de cor
Os tokens semânticos que o código da peça usa, com o valor de hoje em app/globals.css.
| Token | Valor | Usado como |
|---|---|---|
--background | #FAFAFA | bg-background |
--foreground | #1A1A1A | text-ink |
--muted-foreground | #595959 | text-muted-foreground |
Leitor de tela
O que é anunciado, e por quê.
- Os ícones não têm texto; o sentido está no título de cada diferencial.
O que sustenta o estado
Esta peça usa estatico. O estado dela é o de quem já foi ouvido com leitor de tela nesses padrões — e não uma passada sobre esta peça em específico.
Falta ouvir: estatico — ver docs/a11y-screen-reader-checklist.md.
Achados abertos
Defeitos conhecidos, com o que falta fazer.
- Hover sem clique. O círculo muda de cor e a caixa ganha sombra no hover, mas nada é clicável — como no StatCard.
Status e recursos
| Tipo | Recurso | Status |
|---|---|---|
| Código | app/components/organisms/WhyChoose.tsx | Disponível |
| Ficha | Storybook (abre em outra aba) | 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
Os últimos commits que tocaram o arquivo, lidos do git no build.
fdd10ff2026-09-29ESTADO: E109 concluida, roteiro final fechado; proximo o merge na main
O histórico completo está no GitHub (abre em outra aba).