Pular para o conteúdo
Faculdade PhorteDesign System

Hero

Em andamento

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
Última mudança
2026-10-01
Ver como Markdown(abre em outra aba)Ficha no Storybook(abre em outra aba)

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

Pular a prévia
Variante Padrão, ao vivo — vem da ficha.Abrir sozinha(abre em outra aba)

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.

  1. Padrão

Quando usar

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

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.

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.

Anatomia

As partes, na ordem em que o olho — e o teclado — passam.

  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

Os estados que a peça tem no código, e o que muda em cada um.

Estados da peça e o que muda em cada um
EstadoO que muda
AvançandoO padrão: o slide troca sozinho a cada 8 segundos, e o botão mostra o ícone de pausa.
PausadoDepois 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 focoCom o foco em qualquer ponto do carrossel, o avanço para até o foco sair — o botão de pausa não muda.
Movimento reduzidoCom prefers-reduced-motion, o avanço nasce parado e o botão de pausa some (motion-reduce:hidden).
Controles escondidosSó 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 focoNos dois campos da busca: o contrato de campo — borda de 2px --border-focus (E73; era a borda vermelha com anel).
Busca incompletaSem o tipo de curso, o navegador não envia — o campo é required (o asterisco está no rótulo) e mostra o aviso dele.

Comportamento

Como a peça reage em cada situação
SituaçãoO que acontece
Ponteiro sobre o carrosselSuspende a troca automática, como o foco dentro dele; ao sair, ela volta (E143, Magoo e APG) — testado na ficha.
Página abertaO slide avança sozinho a cada 8 segundos, com esmaecimento de 0,8s.
Foco dentro do carrosselA troca automática para enquanto o foco estiver ali — e volta quando ele sai.
Pausa acionadaO avanço para e o botão vira "retomar". O rótulo vem de usePausaDeMovimento.
Movimento reduzido no sistemaO avanço já nasce parado, e o botão de pausa some — não há o que pausar.
Busca sem tipo de cursoNão envia: o campo é obrigatório.
Busca completaLeva a /cursos?q=…&categoria=….

Relacionados