Página Quem Somos — Site Público Abracaf
Página institucional da Abracaf em /abracaf/quem-somos. Apresenta a história, missão, valores, indicadores e estrutura organizacional da associação por meio de 7 seções e um organograma interativo com modal.
O redesign segue o protótipo do Figma e o padrão de código do módulo: classes Tailwind + tokens abc-* + componentes @kit/ui (sem estilos inline, exceto gradientes pontuais). O fundo das seções de conteúdo é bg-abc-slate-50, igual ao layout e às demais páginas do site.
Estrutura de arquivos
apps/web/app/[locale]/(extranet_public)/abracaf/quem-somos/
├── page.tsx # RSC — metadata + composição das 7 seções
└── _components/
│ ├── qs-eyebrow.tsx # Rótulo "eyebrow" reutilizável (tone light/dark)
│ ├── qs-hero.tsx # Hero interno navy + ScrollDownButton (#quem-somos-historia)
│ ├── qs-about.tsx # Seção 2 colunas: texto + card de fundação "1977"
│ ├── qs-missao.tsx # Missão institucional (separada por border-y)
│ ├── qs-values.tsx # Grid de 5 valores (cabeçalho responsivo)
│ ├── qs-stats.tsx # Seção "Números que falam por nós"
│ ├── qs-organograma.tsx # 'use client' — organograma interativo
│ └── qs-sede.tsx # Foto da fachada, endereço, contatos e Google Maps
└── _lib/
│ ├── quem-somos.data.ts # QS_VALUES + QS_STAT_PILLS
│ ├── organograma.types.ts # Interfaces TypeScript
│ ├── organograma.data.ts # Camada de dados (mock → API)
│ └── organograma.utils.ts # getInitials()
└── _hooks/
└── use-organograma-data.ts # Hook de fetch com loading/error/data
Seções da página
| Ordem | Componente | Descrição |
|---|---|---|
| 1 | QsHero | Hero interno navy com headline institucional e ScrollDownButton |
| 2 | QsAbout | 2 colunas: texto institucional + card de fundação "1977" em painel navy |
| 3 | QsMissao | Missão institucional centralizada, com border-y separando das vizinhas |
| 4 | QsValues | Grid de 5 cards de valores |
| 5 | QsStats | "Números que falam por nós" — indicadores institucionais |
| 6 | QsOrganograma | Organograma interativo com dois modais |
| 7 | QsSede | Foto da fachada, endereço, contatos e link Google Maps |
QsAbout — card de fundação
A coluna direita é um card de gradiente navy destacando o ano de fundação ("1977 / Ano de fundação") com uma legenda curta. A copy da esquerda cobre a origem e a trajetória da associação. (A linha do tempo do design anterior foi removida.)
QsMissao
Bloco centralizado com a missão da associação, com "Fiat" e "Stellantis" em ciano (text-abc-cyan-600) e um subtítulo de apoio. É separado das seções vizinhas por linhas finas (border-y border-abc-slate-200).
QsValues — grid de 5 valores
Grid de 5 cards (grid-cols-1 sm:grid-cols-2 lg:grid-cols-5), cada um com barra superior ciano, borda, sombra leve, ícone, título, subtítulo e descrição. Dados em _lib/quem-somos.data.ts (QS_VALUES). Não há mais o CTA "Ver liderança".
Cabeçalho responsivo: no mobile/tablet o ícone fica à esquerda, na mesma linha do título (flex items-center); no desktop (lg:) o ícone vai para cima do título (lg:block).
| # | Valor | Subtítulo |
|---|---|---|
| 01 | Representatividade | A força da rede unida |
| 02 | Transparência | Clareza em cada decisão |
| 03 | Excelência | Padrão que a rede merece |
| 04 | Integração | Juntos somos maiores |
| 05 | Compromisso | Tradição e responsabilidade |
QsStats — Números que falam por nós
Seção de indicadores institucionais. Grid de 2 colunas: card navy de presença nacional à esquerda e, à direita, o card ciano de crescimento (com watermark "4x") sobre os cards de satisfação (NPS com anel/donut) e governança. Abaixo, uma linha de pills (QS_STAT_PILLS).
| Indicador | Valor | Origem |
|---|---|---|
| Presença nacional | 500+ concessionárias, 27 estados | Real |
| Crescimento | 4x | Fictício |
| Satisfação | NPS 9.4 · 94% satisfeitos | Fictício |
| Governança | 0 decisões sem ata | Fictício |
Apenas presença nacional (500+ / 27 estados) é real. Os demais números são fictícios até existir fonte de dados; o _lib/quem-somos.data.ts registra isso com um TODO.
Organograma interativo
A seção exibe dois cards-teaser. Ao clicar em qualquer um, abre um Dialog fullscreen com o organograma completo.
Diretoria Estatutária — modal com fundo bg-abc-navy-900:
- Presidência → Vice-Presidências (A/B + regionais) → Diretoria (16 membros)
- Mandato 2024–2027, eleita em assembleia geral
Estrutura Interna — modal com fundo branco:
- Direção Executiva → Gerências → Coordenações
- 10 profissionais, sede em São Paulo
Comportamento do modal
- Fundo embaçado:
DialogPortal+DialogOverlaycomz-[99998] bg-black/65 backdrop-blur-md - Header sticky com título e botão fechar
- Fechamento: botão X ou clique no overlay
- Largura máxima:
1280px(desktop),calc(100% - 2rem)(mobile)
Estados
| Estado | Componente | Trigger |
|---|---|---|
| Loading | LoadingSkeleton — grid de <Skeleton> | loading === true |
| Erro | ErrorState — <Alert variant="destructive"> + retry | error === true |
| Dados | Seção completa com teasers e modais | data !== null |
Camada de dados
O arquivo _lib/organograma.data.ts é o único ponto de troca entre mock e API real.
// Estado atual — mock local
export async function getOrganogramaData(): Promise<OrganogramaData> {
return Promise.resolve(mockData);
}
// Quando a API estiver pronta — substituir por:
export async function getOrganogramaData(): Promise<OrganogramaData> {
const res = await fetch('/api/organograma');
if (!res.ok) throw new Error('organograma fetch failed');
return res.json();
}
Nenhum outro arquivo precisa ser alterado na troca.
Tipos
// _lib/organograma.types.ts
interface OrgPerson {
nome: string;
cargo: string;
empresa: string;
loc?: string;
}
interface DiretoriaData {
presidente: OrgPerson;
vpsAB: OrgPerson[];
vps: OrgPerson[];
diretores: OrgPerson[];
}
interface InternaData {
diretorExecutivo: OrgPerson;
gerentes: OrgPerson[];
coordenadores: OrgPerson[];
}
interface OrganogramaData {
diretoria: DiretoriaData;
interna: InternaData;
}
Metadata
export const generateMetadata = async () => ({
title: 'Quem Somos | Abracaf',
description: 'Conheça a história, missão, valores e estrutura da Associação Brasileira dos Concessionários de Automóveis Fiat.',
});