# Hero

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

O topo da página inicial: três slides que se revezam, com a busca de cursos logo abaixo. É a primeira coisa que o candidato vê, e o caminho mais curto até um curso.

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

<Hero />
```

## Uso

### Variantes na ficha

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

Um por página, no topo, e só na página inicial ou em páginas de entrada de uma área.

### Quando não usar

Em página de campanha, que precisa de preço e chamada de matrícula: use o MarketingHero. Para um carrossel de destaques sem a busca, o HeroCarousel. Para a busca sozinha, no meio de uma página, o SearchBar.

### Faça

- Use no topo da página inicial, onde a busca de cursos precisa estar à mão.
- Deixe o botão de pausa: o slide troca a cada 8 segundos, e a WCAG 2.2.2 exige um jeito de parar.
- Mantenha a busca exigindo o tipo de curso — é o que monta o endereço de resultados.

### Evite

- Dois na mesma página: o slide à mostra traz o título de primeiro nível.
- Esconder os controles: no celular eles ficam sempre à mostra, e no computador aparecem no hover e no foco, de propósito.
- Usar como vitrine de campanha: para isso existe o MarketingHero.

### Anatomia

1. **Título do slide** — Texto branco sobre o vermelho de interface ou sobre foto escurecida.
2. **Descrição e modalidades** — As quatro modalidades em negrito.
3. **Prova social** — Avatares e o número de formados.
4. **Imagem** — Só a partir de 1024px; abaixo disso some.
5. **Controles do carrossel** — Pausa (a primeira no DOM, E75), anterior e próximo — 48px; sempre visíveis abaixo de 768px, e acima no hover e com o foco no carrossel.
6. **Cartão de busca** — Sobe 64px sobre o carrossel: FormField com o Input (busca) e com o Select (tipo de curso), e o Button verde "Pesquisar" (E73).

### Estados

| Estado | O que muda |
| --- | --- |
| Avançando | O padrão: o slide troca sozinho a cada 8 segundos, e o botão mostra o ícone de pausa. |
| Pausado | Depois do botão de pausa: o avanço para, o ícone vira o de retomar e o botão anuncia `aria-pressed="true"`. |
| Parado pelo foco | Com o foco em qualquer ponto do carrossel, o avanço para até o foco sair — o botão de pausa não muda. |
| Movimento reduzido | Com `prefers-reduced-motion`, o avanço nasce parado e o botão de pausa some (`motion-reduce:hidden`). |
| Controles escondidos | Só a partir de 768px: setas e pausa ficam transparentes até o mouse passar ou o foco entrar no carrossel (E75 — no celular, sem hover, a pausa nunca aparecia). |
| Campo em foco | Nos dois campos da busca: o contrato de campo — borda de 2px `--border-focus` (E73; era a borda vermelha com anel). |
| Busca incompleta | Sem o tipo de curso, o navegador não envia — o campo é `required` (o asterisco está no rótulo) e mostra o aviso dele. |

### Comportamento

| Situação | O que acontece |
| --- | --- |
| Ponteiro sobre o carrossel | Suspende a troca automática, como o foco dentro dele; ao sair, ela volta (E143, Magoo e APG) — testado na ficha. |
| Página aberta | O slide avança sozinho a cada 8 segundos, com esmaecimento de 0,8s. |
| Foco dentro do carrossel | A troca automática para enquanto o foco estiver ali — e volta quando ele sai. |
| Pausa acionada | O avanço para e o botão vira "retomar". O rótulo vem de `usePausaDeMovimento`. |
| Movimento reduzido no sistema | O avanço já nasce parado, e o botão de pausa some — não há o que pausar. |
| Busca sem tipo de curso | Não envia: o campo é obrigatório. |
| Busca completa | Leva a `/cursos?q=…&categoria=…`. |

### Relacionados

- [HeroCarousel](https://phorte-design-system.vercel.app/styleguide/md/HeroCarousel.md) — Carrossel de topo, sem a busca.
- [MarketingHero](https://phorte-design-system.vercel.app/styleguide/md/MarketingHero.md) — Topo de campanha, com preço.
- [SearchBar](https://phorte-design-system.vercel.app/styleguide/md/SearchBar.md) — A busca, sozinha.

## Especificação

**Não recebe nenhuma propriedade.**

### Medidas

| Parte | Valor | Classe |
| --- | --- | --- |
| Altura do carrossel | 600px; 70% da janela a partir de 768px, mínimo 550px | `h-[600px] md:h-[70vh] min-h-[550px]` |
| Largura do conteúdo | 1200px no máximo | `max-w-[1200px]` |
| Setas e pausa | 48 × 48px | `h-12 w-12` |
| Campos e botão da busca | 48px de altura | `classNameDoCampo="h-12" · Button size="lg"` |
| Cartão de busca | sobe 64px sobre o carrossel | `-mt-16` |

### Tokens de cor

| Token | Valor | Usado como |
| --- | --- | --- |
| `--primary` | #D42B2B | `bg-primary`, `bg-primary/90`, `border-primary`, `border-primary/30`, `text-primary` |
| `--foreground` | #1A1A1A | `bg-ink`, `from-ink/95`, `text-ink`, `via-ink/40` |
| `--card` | #FFFFFF | `bg-card`, `border-card` |
| `--border` | #E5E5E5 | `border-border` |
| `--ink-inverse` | #FAFAFA | `text-ink-inverse` |
| `--muted` | #F4F6F9 | `bg-muted` |
| `--muted-foreground` | #595959 | `text-muted-foreground` |
| `--ring-inverse` | #FAFAFA | `ring-ring-inverse` |
| `--secondary` | #0B8434 | `bg-secondary` |
| `--secondary-dark` | #0D6B2E | `bg-secondary-dark` |

## Acessibilidade

### Teclado

| Tecla | Faz |
| --- | --- |
| Tab | Passa pela pausa (primeira, E75), pelos links do slide à mostra, por slide anterior e próximo slide, pelos dois campos e por Pesquisar. Os slides escondidos ficam fora; os controles aparecem com o foco no carrossel. |
| Enter / Espaço | Aciona a seta ou a pausa em foco. |
| Enter | Num campo da busca, envia — se o tipo de curso estiver escolhido. |

### Leitor de tela

- O carrossel é uma região "Destaques" com `aria-roledescription="carrossel"`, e cada slide um grupo "N de 3" (E75, APG Carousel).
- Só o slide à mostra tem `h1`; os outros títulos são parágrafo e ficam `inert` — um `h1` por página também no HTML do servidor (E75).
- Os slides ficam em `aria-live="off"` enquanto trocam sozinhos, e `polite` quando param (pausa ou foco): a troca feita pela pessoa é anunciada, a automática não fala por cima da página.
- As setas se chamam "Slide anterior" e "Próximo slide"; o botão de pausa tem o rótulo de `usePausaDeMovimento` e anuncia se está pressionado.
- Os dois campos da busca têm rótulo visível, ligado pelo FormField — "O que você busca?" e "Tipo de curso" (obrigatório).

### O que sustenta o estado

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

### Achados abertos

- **Os slides estão escritos dentro do componente.** O Hero não recebe nenhuma propriedade: trocar um slide é editar o arquivo. Aceitar os slides por prop é o que o tornaria reutilizável.

## Status e recursos

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

- `251416b` 2026-10-01 — E159: Testimonials — o vídeo toca dentro do cartão, YouTube e Vimeo
- Histórico completo no GitHub: https://github.com/srbunnie/Pos-Phorte-Design-System/commits/main/app/components/organisms/Hero.tsx