Header

Cabeçalho com logo da campanha, navegação e chamada para cadastro. Na área autenticada, a saudação ao participante substitui a chamada.

Exemplo: Header, Default

const Default = () => <Header
    logo={(<span style={{ font: '700 1.25rem/1 var(--font-brand-heading)', color: 'inherit' }}>Campanha</span>)}
    items={[
      { label: 'Como participar', href: '#como-participar' },
      { label: 'Produtos', href: '#produtos' },
      { label: 'Prêmios', href: '#premios' },
      { label: 'Dúvidas', href: '#faq' },
    ]}
    cta={{ label: 'Cadastre-se', href: '#cadastro' }} />;

O que adaptar

Configure logo, items e cta com a identidade, os links e a ação do hotsite. user mostra o participante; currentHref identifica a página atual. tone escolhe superfície ou navy; sticky controla a fixação no topo.

O link de salto aponta para #conteudo por padrão: use esse identificador no conteúdo principal ou ajuste skipToHref.

No celular

O menu abre pelo botão identificado como “Abrir menu”. Escape fecha e devolve o foco; escolher um link também fecha o painel.