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-organograma-lazy.tsx     # Carrega o organograma sob demanda (lazy)
│   └── qs-sede.tsx                 # Foto da fachada, endereço, contatos e Google Maps
└── _lib/
    ├── quem-somos.data.ts          # QS_VALUES + QS_STAT_PILLS
    └── organograma.queries.ts      # Organograma do banco (server-only, cacheado)

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

Indicadores institucionais

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:

Seções Presidência → Vice-Presidência → Diretoria

Estrutura Interna — modal com fundo branco:

Seções Diretor Executivo → Colaboradores

Quem aparece, em que seção e em que ordem vem do cadastro da gestão da Diretoria (ver Camada de dados).

Fundo embaçado: DialogPortal + DialogOverlay com z-[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)

Camada de dados

Desde a TEC-1611 o organograma vem do banco (org_chart_members), cadastrado pela gestão da Diretoria na Intranet (conta abracaf-intranet). Não há mais dados estáticos.

page.tsx (Server Component) chama getPublicOrgChartTabs() de _lib/organograma.queries.ts e passa as abas para QsOrganogramaLazy. Sem ninguém ativo, o bloco não aparece.
A query usa um client anônimo e a RPC get_public_org_chart, que devolve só o recorte público: pessoas ativas, sem telefone e e-mail.
Resultado em cacheService (TTL REFERENCIA, tag getOrgChartPublicTag). Toda escrita da gestão (cadastro, edição, ativar/desativar, reordenar) limpa a tag, então o site atualiza sem esperar o TTL.
Card e agrupamento são compartilhados com a Intranet: app/[locale]/_shared/org-chart/ (OrgChartPersonCard, groupOrgChart, tipos OrgChartPerson/OrgChartTab).
Fotos no bucket público org-chart-photos, pasta da conta.

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.',
});

Estrutura de arquivos​

Seções da página​

QsAbout — card de fundação​

QsMissao​

QsValues — grid de 5 valores​

QsStats — Números que falam por nós​

Organograma interativo​

Comportamento do modal​

Camada de dados​

Metadata​