# KnowledgeAreas

> Componentes / Cursos e matrícula · Estado: **Em andamento** — Implementado e utilizável, mas ainda sem a validação completa de acessibilidade.

Seção "Áreas de Conhecimento": seis áreas com ícone (Educação, Saúde, Direito, Gestão, Tecnologia da Informação, Psicologia), cada uma levando ao catálogo filtrado, e o link "Ver todas as Áreas". Não recebe propriedades.

- Função: Cursos e matrícula
- Também chamado de: áreas, categorias, áreas de conhecimento
- Mora em: `app/components/organisms/KnowledgeAreas.tsx`
- Página: [https://phorte-design-system.vercel.app/styleguide/peca/KnowledgeAreas](https://phorte-design-system.vercel.app/styleguide/peca/KnowledgeAreas)
- Ficha no Storybook: [components-complex-knowledgeareas](https://main--69b4847d498a9bd8659db9ba.chromatic.com/?path=/docs/components-complex-knowledgeareas--docs)
- Prévia ao vivo, sozinha: [https://phorte-design-system.vercel.app/previa/KnowledgeAreas/0](https://phorte-design-system.vercel.app/previa/KnowledgeAreas/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 KnowledgeAreas from '@/app/components/organisms/KnowledgeAreas';

<KnowledgeAreas />
```

## Uso

### Variantes na ficha

1. [Padrão](https://phorte-design-system.vercel.app/previa/KnowledgeAreas/0)

Na página inicial, como atalho para o catálogo filtrado por área.

### Quando não usar

Para filtrar a grade na própria página, use o FilterGroup ou o CourseFilterSidebar. Para destacar cursos, o TopCourses.

### Faça

- Edite as áreas no arquivo da peça: não há propriedade para elas.
- Mantenha os nomes iguais aos do filtro do catálogo, para o endereço filtrar certo.

### Evite

- Mais áreas que a grade comporta: são seis colunas no computador.

### Anatomia

1. **Título** — Um SectionTitle centrado.
2. **Área** — Item da lista (E77): link em cartão, com o ícone num IconBox `primary` `interativo` (fundo `--primary-subtle`, E64) e o nome.
3. **Ver todas** — O Button `outline` com `href`, redondo, para `/cursos` (E77).

### Estados

| Estado | O que muda |
| --- | --- |
| Nome em duas linhas | O cartão fica da altura dos vizinhos da mesma linha, com o nome centralizado (E121) — testado na ficha. |
| Padrão | Cartão com borda `--border`. |
| Hover | Borda vermelha, sombra, o círculo fica vermelho cheio com ícone branco e o nome vermelho. |
| Entrada | Ao entrar na tela, o título e os cartões sobem e aparecem em sequência (`motion`, uma vez). |

### Comportamento

| Situação | O que acontece |
| --- | --- |
| Clique numa área | Leva a `/cursos?area=<nome>`, com o nome codificado (E76; "Tecnologia da Informação" ia cru). |
| Largura | Duas colunas no celular, três a partir de 768px, seis a partir de 1024px. |

### Relacionados

- [CourseFilterSidebar](https://phorte-design-system.vercel.app/styleguide/md/CourseFilterSidebar.md) — O filtro de área, no catálogo.
- [TopCourses](https://phorte-design-system.vercel.app/styleguide/md/TopCourses.md) — Cursos em destaque.

## Especificação

**Não recebe nenhuma propriedade.**

### Tokens de cor

| Token | Valor | Usado como |
| --- | --- | --- |
| `--primary` | #D42B2B | `border-primary`, `text-primary` |
| `--background` | #FAFAFA | `bg-background` |
| `--border` | #E5E5E5 | `border-border` |
| `--card` | #FFFFFF | `bg-card` |
| `--foreground` | #1A1A1A | `text-ink` |

## Acessibilidade

### Teclado

| Tecla | Faz |
| --- | --- |
| Tab | Passa pelas seis áreas e por "Ver todas as Áreas" — medido. |
| Enter | Segue o link em foco. |

### Leitor de tela

- O nome de cada link é o nome da área; o ícone não tem texto.
- Os links têm o anel de foco do sistema (E76).

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