Header e Footer — Site Público Abracaf

Header e Footer são montados automaticamente em abracaf/layout.tsx e aplicados a todas as páginas do site público. O Header é 'use client' por implementar comportamento de scroll; o Footer é RSC puro.

Header

Arquivo: _components/abracaf-header.tsx

Props

Header({
  transparent?: boolean,  // remove background — útil em heroes com fundo próprio (padrão: false)
  navLinks?: NavLink[],   // substitui os links padrão definidos em _lib/abracaf-nav.config.ts
})

Scroll collapse

Ao rolar para baixo (diferença > 8px após 50px de scroll), o header entra em modo collapsed:

Estado	O que está visível
Normal	Logo à esquerda + nav links + botões CTA
Collapsed	Logo centralizada + nav e CTAs somem

O colapso é feito com transições CSS em max-width, opacity e gap — nunca display: none — para garantir animação suave ao reexpandir.

<nav className={cn(
  'hidden items-center xl:flex overflow-hidden transition-all duration-300 ease-in-out',
  collapsed ? 'max-w-0 gap-0 opacity-0' : 'max-w-150 gap-6 opacity-100',
)}>

A logo centralizada e a logo à esquerda coexistem no DOM, cada uma com opacity e pointer-events controlados pelo estado collapsed.

Menu mobile (Sheet)

Abaixo de xl (1280px), nav e botões são substituídos por um hamburger que abre um drawer lateral via @kit/ui/sheet. O drawer tem largura w-extranet-drawer (288px) e exibe todos os links + CTAs em coluna vertical.

Os links de navegação padrão ficam em _lib/abracaf-nav.config.ts como DEFAULT_NAV_LINKS. Para customizar os links em uma página específica, passe navLinks como prop:

<Header navLinks={[{ href: '#intro', label: 'Intro' }, { href: '#sobre', label: 'Sobre' }]} />

Botões CTA do header

Botão	Destino	Comportamento
Emplacamento	https://emplacamento.abracaf.com.br	target="_blank"
Acessar extranet	/home	Link interno

Footer

Arquivo: _components/abracaf-footer.tsx

Estrutura

<footer bg-abc-navy-900>
  ├── newsletter strip     ← faixa com input de e-mail + botão Inscrever-se
  ├── main columns
  │   ├── coluna de marca  ← logo + descrição + ícones sociais (col-span-2 em mobile)
  │   ├── Institucional    ← hidden md:block
  │   ├── Rede & Conteúdo  ← hidden md:block
  │   └── Sistemas         ← hidden md:block
  └── copyright bar        ← CNPJ, LGPD/SSL, links legais

Newsletter strip

O formulário de newsletter é atualmente decorativo — <form> sem action implementada. Quando o backend for integrado, adicionar a server action ao onSubmit.

Colunas de links no mobile

As 3 colunas de links ficam ocultas em mobile (hidden md:block). Apenas a coluna de marca é exibida em telas pequenas, centralizada com items-center md:items-start.

Decoração SVG

O footer tem um path ondulado posicionado com absolute inset-0 opacity-50 em text-abc-cyan-400 com fillOpacity: 0.07. É puramente decorativo (aria-hidden).