# TopCourses

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

Seção escura de cursos em destaque: título com chapéu, setas de anterior e próximo, três cursos numa lista que rola na horizontal, cada um um CourseCard (E77), e o cartão final "Ver mais+". Os cursos vêm por `cursos`, no formato curto da vitrine.

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

<TopCourses />
```

## Uso

### Variantes na ficha

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

Na página inicial, para os cursos mais procurados.

### Quando não usar

Para a grade do catálogo, use o CourseCard. Para um carrossel de topo, o HeroCarousel.

### Faça

- Passe `cursos` (slug, categoria, título, descrição, carga, modalidade e imagem): a peça monta o CourseCard.
- Mantenha poucos cursos — a fileira rola, mas a barra de rolagem é escondida.

### Evite

- Contar com as setas como única forma de rolar: no celular, a fileira rola pelo toque.

### Anatomia

1. **Título** — Um SectionTitle sobre escuro, com o chapéu "Os Cursos".
2. **Setas** — Dois CarouselNavButton (escuro e claro), "Cursos anteriores" e "Próximos cursos", com `aria-controls` na lista; rolam 350px.
3. **Curso** — Um CourseCard do sistema (E77) num `<li>` da lista "Cursos em destaque": o link é o título. Era o terceiro desenho de cartão de curso do repositório.
4. **Ver mais** — Cartão-link translúcido para `/cursos`, com a seta num IconBox `primary` `interativo` (E64): fundo `--primary-subtle`, cheio no hover.

### Estados

| Estado | O que muda |
| --- | --- |
| Padrão | Fundo `--ink` com dois brilhos vermelhos desfocados. |
| Hover no cartão | Sombra maior, imagem aproxima e título vermelho. |

### Comportamento

| Situação | O que acontece |
| --- | --- |
| Setas | Rolam a fileira 350px para cada lado, suavemente, com encaixe por cartão. |

### Relacionados

- [CourseCard](https://phorte-design-system.vercel.app/styleguide/md/CourseCard.md) — O cartão de curso do catálogo.
- [CarouselNavButton](https://phorte-design-system.vercel.app/styleguide/md/CarouselNavButton.md) — As setas da fileira.
- [SectionTitle](https://phorte-design-system.vercel.app/styleguide/md/SectionTitle.md) — O título da seção.

## Especificação

### Propriedades

| Prop | Tipo | Padrão | Obrigatória | Descrição |
| --- | --- | --- | --- | --- |
| `cursos` | `CursoEmDestaque[]` | `CURSOS_PADRAO` | não | Os cursos por prop (E77): eram fixos no arquivo. |

### Tokens de cor

| Token | Valor | Usado como |
| --- | --- | --- |
| `--primary` | #D42B2B | `bg-primary/10`, `bg-primary/5`, `text-primary` |
| `--foreground` | #1A1A1A | `bg-ink` |
| `--ink-inverse` | #FAFAFA | `text-ink-inverse` |

## Acessibilidade

### Teclado

| Tecla | Faz |
| --- | --- |
| Tab | As duas setas, o título de cada curso e "Ver mais+". |
| Enter / Espaço | Nas setas, rolam a fileira; nos links, só Enter os segue. |

### Leitor de tela

- Os cursos são uma lista ("Cursos em destaque"): o leitor diz quantos são. Cada um é o CourseCard — título `h3` como link, imagem com `alt=""`.

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