Página de Parceiros do Site Público ABRACAF

A página de Parceiros apresenta os parceiros comerciais da Abracaf organizados em segmentos temáticos, com filtros interativos por categoria e um drawer lateral de detalhe por parceiro (TEC-185, fiel ao protótipo final do redesign). Os dados são estáticos por enquanto e serão substituídos por uma query à intranet ABRACAF quando essa integração estiver disponível.

Estrutura de arquivos

apps/web/app/[locale]/(extranet_public)/abracaf/parceiros/
├── page.tsx                                # Server Component + metadata
├── _components/
│   ├── parceiros-hero.tsx                  # Hero section (Server Component)
│   ├── parceiros-list-section.tsx          # Filtros + segmentos + estado do drawer (Client)
│   ├── parceiros-program-card.tsx          # Card uniforme do parceiro
│   ├── parceiros-partner-drawer.tsx        # Drawer lateral de detalhe (Sheet do kit)
│   └── parceiros-category-pill.tsx         # Pill de categoria compartilhada (card + drawer)
└── _lib/
    ├── parceiros.data.ts                   # Mock data estático (SEGMENTS + CATEGORIES)
    └── parceiros.types.ts                  # Interfaces Partner e PartnerSegment

ParceirosHero é importado diretamente em page.tsx (acima do fold). ParceirosListSection é carregado via next/dynamic, e o PartnerDrawer é carregado sob demanda dentro da seção — o chunk do Sheet só baixa no primeiro clique em "Ver parceria".

Dados dos parceiros

Os parceiros são definidos em _lib/parceiros.data.ts no array SEGMENTS — três segmentos temáticos, cada um com título, subtítulo e seus parceiros:

Segmento	Parceiros atuais
Finanças & Previdência	Itaú, Itaú Previdência
Sistemas de Gestão · DMS	Dealernet, Linx, NBS
Infraestrutura & Sustentabilidade	CCM, MDS Cloud, Ouro Verde

Não há mais tiers visuais (destaque principal / restantes): todos os parceiros usam o mesmo ProgramCard. Os níveis de destaque virão do cadastro na intranet quando a integração existir.

Interfaces

export interface Partner {
  id: string;            // slug único, kebab-case
  name: string;
  category: string;      // grupo do filtro (Financiamentos, Previdência, DMS, ...)
  categoryLabel?: string; // texto da pill quando difere do filtro (ex: "Previdência Privada")
  description: string;   // descrição curta do card
  longDescription: string; // texto completo do drawer
  highlights?: string[]; // bullets "DESTAQUES" do drawer
  logoUrl?: string;      // opcional — renderizado só se presente, sem placeholder
  siteUrl?: string;      // opcional — habilita o CTA "Saiba mais" no drawer
}

export interface PartnerSegment {
  title: string;
  subtitle: string;
  partners: Partner[];
}

Categorias dos filtros

CATEGORIES é derivado automaticamente de SEGMENTS ('Todos' + categorias únicas dos parceiros, na ordem em que aparecem). Não existe lista paralela para manter em sincronia: cadastrar um parceiro com categoria nova cria o filtro correspondente.

Componentes principais

ParceirosHero

Server Component sem props. Renderiza o hero com fundo --abc-navy-900, eyebrow PROGRAMA DE PARCEIROS, H1 e subtítulo com a copy final do protótipo.

ParceirosListSection

Client Component ('use client'). Gerencia o filtro ativo e o estado do drawer (parceiro selecionado + aberto/fechado — o parceiro persiste após fechar para o conteúdo não sumir durante a animação de saída).

• Filtros: Badge do shadcn com variant="default" (ativo, fundo navy) ou variant="secondary" (inativo)
• Segmentos: título + linha divisória + subtítulo, grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3; segmentos sem resultados para o filtro ativo são ocultados

ProgramCard

Card uniforme: faixa cyan de 4px na lateral esquerda, nome, ParceiroCategoryPill, logo via next/image apenas se logoUrl presente, descrição curta e rodapé com botão Ver parceria que abre o drawer.

PartnerDrawer

Painel lateral direito de 560px construído sobre o Sheet de @kit/ui/sheet (Esc, clique fora e scroll lock inclusos). Header navy com glow, pill de categoria, nome; corpo com longDescription e lista de highlights; rodapé com CTAs Saiba mais (só quando siteUrl existe) e Fale com a Abracaf (→ /contato).

Como adicionar um parceiro

Edite _lib/parceiros.data.ts e adicione o objeto ao segmento adequado em SEGMENTS:

{
  title: 'Sistemas de Gestão · DMS',
  subtitle: '...',
  partners: [
    // ...existentes
    {
      id: 'novo-parceiro',          // kebab-case, único
      name: 'Novo Parceiro',
      category: 'DMS',              // vira filtro automaticamente
      description: 'Descrição curta sem ponto final',
      longDescription: 'Texto completo exibido no drawer.',
      highlights: ['Destaque 1', 'Destaque 2'],
      logoUrl: '/images/abracaf/parceiros/novo-parceiro.webp', // opcional
      siteUrl: 'https://www.novoparceiro.com.br',              // opcional
    },
  ],
}

Imagens de logo

Salve o arquivo em apps/web/public/images/abracaf/parceiros/ no formato .webp. O logo aparece no card (52px) e no header do drawer (88px); sem logoUrl, nenhum placeholder é exibido.

Categorias

Não é preciso registrar a categoria em lugar nenhum: CATEGORIES é derivado dos dados. Use categoryLabel apenas quando o texto da pill precisar diferir do grupo do filtro (ex: filtro "Previdência", pill "Previdência Privada").

Para criar um novo segmento, adicione um objeto { title, subtitle, partners } a SEGMENTS na posição desejada — a ordem do array é a ordem de exibição na página.