# HeroCarousel

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

Carrossel de topo da página de eventos: cada slide é uma foto escurecida com o tipo, o título do evento, a descrição, a data e a chamada ("Saiba Mais" ou "Inscreva-se Agora"); setas e pontos trocam o slide. Não avança sozinho.

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

<HeroCarousel events={…} />
```

O `…` marca as props obrigatórias — ver *Propriedades*.

## Uso

### Variantes na ficha

1. [Padrão](https://phorte-design-system.vercel.app/previa/HeroCarousel/0)
2. [Slide único](https://phorte-design-system.vercel.app/previa/HeroCarousel/1)
3. [Sem link](https://phorte-design-system.vercel.app/previa/HeroCarousel/2)

No topo da página de eventos, para dois a quatro eventos em destaque.

### Quando não usar

No topo da página inicial, com a busca de cursos, use o Hero. Para uma grade de eventos, o EventCard.

### Faça

- Passe poucos eventos — cada slide é uma parada a mais no Tab.
- Use `external` no evento com inscrição fora do site: a chamada vira "Inscreva-se Agora", abre em outra aba e diz isso ("abre em nova aba") — E74.
- Deixe o `link` de fora quando o evento não tiver página: o slide fica sem chamada (E74) — era `href="#"`.

### Evite

- Contar com o título do slide como `h1` da página: desde a E75 ele é `h2` — a página tem o `h1` dela.
- Lista vazia: o componente não renderiza nada.

### Anatomia

1. **Slide** — Foto com véu escuro, sobrepostos; só o atual está visível.
2. **Conteúdo** — Tipo (pílula vermelha), título (`h2`, E75), descrição, data e a chamada (Button `lg`).
3. **Setas** — "Slide anterior" e "Próximo slide": o CarouselNavButton `dark` (E65) — 44px, 48px a partir de 768px, translúcidas; no hover, claras com a seta vermelha.
4. **Pontos** — Um por slide; o atual é uma barra vermelha. Área de toque de 44px por pseudo-elemento.

### Estados

| Estado | O que muda |
| --- | --- |
| Slide atual | Opacidade 100%, e o conteúdo sobe e aparece em sequência. |
| Outros slides | Opacidade 0 e `inert`: fora do Tab e da árvore de acessibilidade. |
| Um evento só | Sem setas nem pontos. |
| Evento sem `link` | Sem chamada: só o tipo, o título, a descrição e a data. |
| Ponto atual | Barra vermelha de 32px e `aria-current="true"`. |

### Comportamento

| Situação | O que acontece |
| --- | --- |
| Setas | Trocam o slide, dando a volta nas pontas. |
| Ponto | Vai ao slide dele. |
| Tempo | Não troca sozinho — não há temporizador. |
| Troca de slide | Anunciada numa região `aria-live="polite"`: "Slide 2 de 3: <título>" (E75) — testado na ficha. |

### Relacionados

- [Hero](https://phorte-design-system.vercel.app/styleguide/md/Hero.md) — O topo da página inicial, com a busca.
- [EventCard](https://phorte-design-system.vercel.app/styleguide/md/EventCard.md) — Os eventos em grade.
- [CarouselNavButton](https://phorte-design-system.vercel.app/styleguide/md/CarouselNavButton.md) — As setas, na variante `dark` (E65).

## Especificação

### Propriedades

| Prop | Tipo | Padrão | Obrigatória | Descrição |
| --- | --- | --- | --- | --- |
| `events` | `HeroEvent[]` | — | sim |  |
| `rotulo` | `string` | `'Eventos em destaque'` | não | Nome do carrossel para o leitor de tela (E75). |
| `className` | `string` | — | não |  |

### Tokens de cor

| Token | Valor | Usado como |
| --- | --- | --- |
| `--card` | #FFFFFF | `bg-card` |
| `--foreground` | #1A1A1A | `bg-ink` |
| `--ink-inverse` | #FAFAFA | `text-ink-inverse` |
| `--primary` | #D42B2B | `bg-primary` |
| `--primary-foreground` | #FFFFFF | `text-primary-foreground` |
| `--ring-inverse` | #FAFAFA | `ring-ring-inverse` |

## Acessibilidade

### Teclado

| Tecla | Faz |
| --- | --- |
| Tab | Passa pela chamada do slide à mostra, pelas setas e pelos pontos — medido com dois eventos: "Saiba Mais", "Slide anterior", "Próximo slide" e os dois pontos. |
| Enter / Espaço | Nas setas e nos pontos, trocam o slide; na chamada, só Enter segue o link. |

### Leitor de tela

- Os pontos se chamam "Ir para o slide N de T" e o atual tem `aria-current`.
- Os slides escondidos ficam `inert`, como no Hero: só o título do slide à mostra é exposto — medido (1 de 2).
- O carrossel se chama "Eventos em destaque" (`rotulo`) com `aria-roledescription="carrossel"`; cada slide é um grupo "N de T" (E75).

### O que sustenta o estado

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

## Status e recursos

| Tipo | Recurso | Status |
| --- | --- | --- |
| Código | `app/components/organisms/HeroCarousel.tsx` | Disponível |
| Ficha | https://main--69b4847d498a9bd8659db9ba.chromatic.com/?path=/docs/components-complex-herocarousel--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/HeroCarousel.tsx