Pular para o conteúdo
Faculdade PhorteDesign System

MarketingHero

Em andamento

Topo de página de campanha, sobre foto escurecida: chapéu, título (h1), subtítulo, as chamadas e os sinais de confiança. Na variante default, tudo centrado num eixo; na conversion, o texto à esquerda e o cartão de preço à direita. Estrutura refeita na revisão 3 (E130).

Função
Campanha (marketing)
Também chamado de
topo de campanha, hero de campanha, landing, banner
Mora em
app/components/organisms/marketing/MarketingHero.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
  2. Sem destino
  3. Conversão
  4. Com destaques

Quando usar

No topo de uma página de campanha ou de captação; `conversion` quando a oferta tem preço.

Faça

  • Passe title, subtitle e backgroundImage da campanha; um chapeu curto ("Matrículas abertas") situa a oferta.
  • Passe ctaHref e ctaSecundarioHref: cada chamada só aparece com o destino dela (E74); troque os textos com rotuloDoCta e rotuloDoCtaSecundario.
  • Passe de dois a quatro destaques curtos e verdadeiros ("Credenciada pelo MEC", "+250 mil alunos").
  • Na variante conversion, passe o cartão em pricingCard (o FloatingPricingCard).

Evite

  • Dois na mesma página: o título é h1.
  • Foto clara sem conferir: o degradê cobre a maioria, mas o título precisa de 4,5:1 sobre o que ficar atrás.
  • Destaque que não se prova: número de alunos, nota e credenciamento precisam ser reais.

Quando não usar. No topo da página inicial, use o Hero. No topo da página de eventos, o HeroCarousel.

Anatomia

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

  1. Fundo — A foto como imagem decorativa (`alt=""`), de ponta a ponta, com um degradê de `--ink` por cima que garante o contraste — de cima para baixo no `default`, da esquerda para a direita no `conversion`.
  2. Chapéu — Opcional: pílula em `--sobre-escuro-medio`, 12px, caixa alta.
  3. Título — `h1` em `--ink-inverse`, 36/48/60px (celular, tablet, computador), linhas equilibradas; aceita um trecho destacado em `--primary`.
  4. Subtítulo — 18/20px, `--ink-inverse-muted`.
  5. Chamadas — Buttons `lg` com `href`: a primária e, no `default`, a secundária contornada clara.
  6. Destaques — Lista com o visto em `--secondary` e o texto em `--ink-inverse-muted`.
  7. Cartão de preço — `conversion`: o `pricingCard`, à direita a partir de 1024px; embaixo do texto antes disso.

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
Padrãovariant="default": tudo centrado no mesmo eixo, até 768px de largura — testado na ficha.
Conversãovariant="conversion": duas colunas a partir de 1024px; a chamada do texto some aí, onde o cartão de preço assume.
Sem destinoSem ctaHref nem ctaSecundarioHref: sem chamadas.

Comportamento

Como a peça reage em cada situação
SituaçãoO que acontece
AlturaSai do conteúdo, com 80px de respiro (96px a partir de 1024px) — não mais 90% da tela com um vazio em volta (E130), testado na ficha.
ChamadasLevam ao destino da prop; sem ela, não aparecem (E74, decisão de 2026-09-28) — testado na ficha.
EntradaSem animação: o HTML do servidor já sai com o título e as chamadas no lugar (E36).

Relacionados