Footer

Rodapé com logo, redes sociais, texto legal e links. Em telas largas, organiza o conteúdo em colunas; no celular, centraliza e empilha as áreas.

const Default = () => <Footer
    logo={<span style={{ font: '700 1.25rem/1 var(--font-brand-heading)', color: 'inherit' }}>Campanha</span>}
    social={[
      { network: 'facebook', href: 'https://facebook.com' },
      { network: 'instagram', href: 'https://instagram.com' },
      { network: 'youtube', href: 'https://youtube.com' },
      { network: 'whatsapp', href: 'https://wa.me/550000000000' },
    ]}
    legalText={(<p style={{ margin: 0 }}>Promoção válida de 01/01/2026 a 31/03/2026, mediante cadastro no site. Certificado de autorização SPA/MF
              00.000000/0000.
            </p>)}
    links={[
      { label: 'Regulamento', href: '#regulamento' },
      { label: 'Política de privacidade', href: '#privacidade' },
      { label: 'Termos de uso', href: '#termos' },
    ]} />;

O que adaptar

Configure logo, social, legalText e links para a campanha. Informe em legalText o período e o certificado de autorização, quando aplicável. credit personaliza o crédito final e tone escolhe navy ou superfície.

Os links de redes têm nomes acessíveis e abrem em outra aba. Os textos legais e as URLs devem ser fornecidos pelo hotsite; o bloco não gera documentos nem valida autorizações.

A faixa de crédito usa a primária e o texto sobre a primária da marca. Esse par é medido como relatório na página Contraste, assim como o botão primário.