amare/openspec/changes/archive/2026-08-01-recreate-public-frontend/design.md

Context

O site público da Fase 1 já entrega rotas, CMS, SEO, mídia responsiva, regressão visual e acessibilidade. A identidade visual, porém, ainda é o placeholder da fundação: Instrument Sans, acento ouro, raios arredondados e cartões com sombra. DESIGN.md (“Heritage Editorial”), o mockup amare-home-editorial.html, o logo fornecido (coração facetado) e depoimentos.md (cinco casais reais) definem a marca a materializar.

Restrições que condicionam o desenho:

• Arquitetura multipágina Laravel/Blade/CMS já aprovada; o mockup HTML é single-page com âncoras — adaptar, não portar literalmente.
• Contato permanece placeholder (WEB-05 fora de escopo); CTAs levam a /contato sem criar leads.
• Fontes self-hosted via Vite (determinismo visual); sem Google Fonts CDN.
• Imagens públicas via disco configurado + variantes; Unsplash do mockup não entra no app.
• PRODUCT.md: São Paulo capital; seeders atuais ainda usam Fortaleza e depoimentos fictícios.
• Change paralela complete-foundation-parity não bloqueia nem é bloqueada por esta.

Goals / Non-Goals

Goals:

• Materializar Heritage Editorial em todas as rotas públicas (home, serviços, portfólio, caso, sobre, contato, privacidade, 404, 500).
• Home como capa do “Dossiê Editorial do Evento”: hero, manifesto, serviços, portfólio, método (4 passos), depoimentos reais, perfil Amare, CTA final.
• Tokens centralizados alinhados a DESIGN.md; EB Garamond única família; radius 0; elevação por campos tonais.
• Logo oficial otimizado (selo + lockup) em fundos claros/escuros, geometria preservada.
• Cinco depoimentos de depoimentos.md no CMS/seed, multipárrafo, com nota de autorização.
• Manter publicação dinâmica, paginação, eager loading, SEO, axe, teclado, contraste AA e baselines determinísticas.

Non-Goals:

• Briefing funcional / lead (WEB-05), WhatsApp automatizado, inventar provas corporativas.
• Redesign do Filament, page builder, single-page navigation como modelo primário.
• Fotografia proprietária real (permanece ilustrativa e marcada até acervo autorizado).
• Staging/deploy/auth parity (complete-foundation-parity).

Decisions

D1 — Multipágina editorial, não single-page literal

Preservar rotas do SPEC §5.1. Home concentra a narrativa do mockup; páginas internas herdam a mesma gramática (eyebrow, títulos, linhas 1px, spreads assimétricos no desktop, sequência linear no mobile). Header usa links de rota (não #âncoras como navegação primária), com CTA “Solicitar proposta” → contact.

Alternativas: home quase idêntica com âncoras (rejeitada: conflita com SEO/CMS/rotas já testadas); portar HTML estático (rejeitada: perde CMS e determinismo).

D2 — Tokens Heritage Editorial como única fonte visual

Reescrever resources/css/tokens.css e o mapeamento @theme em app.css:

Papel	Token	Valor
Fundo	--amare-color-bg	#FBF9F4 (Papel Marfim)
Fundo profundo	--amare-color-bg-deep	#F0EEE9
Arquivo	--amare-color-bg-archive	#E4E2DD
Oliva	--amare-color-accent	#556B2F
Oliva profunda	--amare-color-accent-deep	#3E5219
Sálvia	--amare-color-sage	#8B9D77
Tinta	--amare-color-text	#1B1C19
Tinta suave	--amare-color-muted	#5D6155
Linha	--amare-color-border	#C5C8B8
Radius	--amare-radius-*	0
Container	--amare-container-max	1120px
Sombra	removida / não usada em conteúdo	—

Tipografia: EB Garamond (400/500/600) self-hosted via Vite; escala display/headline/title/body/label conforme DESIGN.md. Componentes públicos deixam de usar rounded-* e shadows de cartão.

Alternativa: CSS inline do mockup (rejeitada: foge de design-tokens e quebra Tailwind/@theme).

D3 — Composição da home e omissão de seções vazias

Ordem canônica:

1. Hero (settings + imagem OG/hero se houver)
2. Manifesto (copy de settings)
3. Serviços em destaque (lista editorial, não grid de cartões)
4. Portfólio em destaque (bloco escuro oliva; funde proof+cases atuais)
5. Método (4 passos: Escuta, Direção, Produção, Execução)
6. Depoimentos publicados
7. Perfil / posicionamento Amare (about + princípios)
8. CTA final → /contato

Seções alimentadas por collections (serviços, casos, depoimentos) omitidas quando vazias. Manifesto, método, perfil e CTA final permanecem (copy de settings / defaults editoriais). Um único h1 no hero; demais seções usam h2/h3.

D4 — Contato continua presentation-only

/contato e o CTA da home mostram canais de site_settings (e-mail, telefone, cidade, sociais). Nenhum <form> funcional, nenhum lead. O mockup de formulário serve só como referência visual futura para WEB-05; nesta change o bloco de contato da home é CTA editorial + link para a página de contato, não formulário embutido.

D5 — Extensão mínima tipada de site_settings

Novos campos tipados (não key/value genérico):

• logo_path / logo_alt (opcional; fallback para lockup estático em public/)
• hero_secondary_cta_label (opcional)
• hero_note (texto curto sob CTAs)
• manifesto_title, manifesto_lead, manifesto_body
• method_intro (opcional; passos estruturados em JSON tipado ou colunas method_step_{1..4}_{title,body} — preferir JSONB method_steps validado no Filament)
• principles (JSONB lista de até 4 strings) ou quatro colunas principle_1..4
• Manter about_summary, hero atual, contato, SEO, analytics

Filament ManageSiteSettings ganha seções editoriais em pt-BR. Defaults no seeder alinhados ao mockup + São Paulo.

Alternativa: hardcode de manifesto/método nas Blade (rejeitada parcialmente: método/princípios podem ter default no view, mas copy institucional deve ser editável como o hero).

D6 — Logo: ativo estático + campo CMS opcional

1. Converter/otimizar o PNG fornecido para WebP/SVG derivados em public/brand/ (selo coração + lockup completo), com versões para fundo claro (oliva) e fundo escuro (papel/branco).
2. Componente <x-brand.logo> escolhe variante por contexto (on-dark / on-light) e expõe alt acessível.
3. Se logo_path em settings estiver preenchido, usa o upload; senão, o estático versionado.

Não redesenhar o coração facetado; não inventar polígonos decorativos genéricos.

D7 — Depoimentos reais multipárrafo

• Seedar os 5 casais de depoimentos.md em quote (texto completo com quebras \n\n), author_name, context (ex.: Casamento · 06/12/2025), sort_order, is_featured, published_at conforme ambiente.
• Blade renderiza parágrafos a partir de quebras de linha; tipografia editorial (aspas, offset).
• Nota discreta no markup/admin: autorização final dos casais antes de publicação em produção.
• Remover depoimentos fictícios dos seeders de demo/visual ou substituí-los pelos reais (visual seeder usa subset determinístico, tipicamente 2 featured).

D8 — Navegação responsiva com JS mínimo

resources/js/app.js ganha toggle de menu mobile (aria-expanded, menu-open, fechar ao navegar), espelhando o mockup. Sem framework novo. prefers-reduced-motion continua a anular transições não essenciais. Hover de imagem (scale leve) só quando motion permitido.

D9 — Páginas internas como capítulos

Rota	Tratamento
/servicos	Lista editorial (número + nome + resumo), não cartões
/portfolio	Grade assimétrica / stack com captions; fundo pode usar papel profundo
/portfolio/{slug}	Caderno de caso: metadados, desafio/solução/resultado, galeria
/sobre	Perfil editorial + princípios
/contato	Canais + CTA textual (sem form)
/privacidade	Tipografia editorial sobre papel
404/500	Mesma linguagem; 500 sem internals

D10 — Testes e baselines

• Atualizar feature tests de home (ordem de seções, omissão, CTA → contact, data-testid="home-primary-cta").
• Browser: axe nas rotas cobertas; Tab até CTA; console limpo.
• composer visual:update após aprovação visual local; timezone permanece America/Fortaleza (SPEC); copy de cidade pública passa a São Paulo.
• Fotos fixture locais continuam; filtro CSS de saturação contida via classe utilitária, não via URL externa.

Risks / Trade-offs

• Regeneração de 8+ snapshots → risco de ruído no PR; mitigar com seeder visual estável e revisão humana do diff.
• EB Garamond em forms/UI → legibilidade de labels uppercase; mitigar com letter-spacing e peso 600 conforme DESIGN.md; validar contraste AA.
• Depoimentos longos → layout quebra em mobile; mitigar com tipografia responsiva e subset featured na home.
• Autorização de depoimentos → risco legal/reputacional; mitigar com nota explícita e published_at null até autorização.
• Campos novos em site_settings → migração + Filament; mitigar com defaults e nullable.
• Paridade com mockup single-page → expectativa visual vs rotas; documentar adaptação multipágina na proposta e no surface brief.

Migration Plan

1. Migrar tokens/fontes/logo estático (sem breaking de rotas).
2. Migrar site_settings (colunas novas nullable + backfill de defaults).
3. Atualizar seeders (SP + depoimentos reais).
4. Trocar layout e páginas; manter contratos de testes passando incrementalmente.
5. Regenerar baselines com composer visual:update.
6. Rollback: reverter deploy/commit; migração down remove colunas novas; assets estáticos são aditivos.

Open Questions

• Formato exato de method_steps / principles (JSONB vs colunas) — default recomendado: JSONB validado no Filament.
• WhatsApp/e-mail/Instagram oficiais ainda ausentes — settings continuam placeholder até o dono informar.
• Subconjunto de depoimentos na home (2 vs 5) — default: featured first, até 2 na home estilo mockup; listagem completa só se houver página dedicada (não há); home mostra todos published featured ou os N primeiros por sort_order (cap 2–3 para ritmo editorial).