## 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 `
` 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 `` 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).