49 lines
3.2 KiB
Markdown
49 lines
3.2 KiB
Markdown
## Context
|
|
|
|
As imagens de abertura por rota, `ResponsiveImage`, texto alternativo obrigatório e fallback tonal já existem. O componente público atual, porém, põe o texto sobre a fotografia e a home mantém duas colunas iguais. A referência aprovada pede uma abertura editorial legível, reutilizável e linear sem JavaScript.
|
|
|
|
## Goals / Non-Goals
|
|
|
|
**Goals:**
|
|
|
|
- Reunir as cinco aberturas narrativas em um único componente Blade de spread 5/7.
|
|
- Limitar a coluna de leitura a 470 px e manter títulos com quebra normal, sem clipping ou overflow.
|
|
- Preservar a ordem DOM texto → mídia em mobile, mídia responsiva, foco, motion progressivo e fallback tonal.
|
|
|
|
**Non-Goals:**
|
|
|
|
- Alterar campos CMS, uploads, dados, rotas, cópia, SEO/Open Graph, contato, privacidade, erros ou dependências.
|
|
- Criar ou atualizar snapshots, introduzir imagens externas ou transformar a rota de protótipo em funcionalidade de produção.
|
|
|
|
## Decisions
|
|
|
|
### Um componente compartilhado recebe todo o conteúdo de abertura
|
|
|
|
`x-public.photo-hero` passa a renderizar texto, slot opcional e mídia tanto para as páginas institucionais quanto para a home. A home delega o seu conteúdo ao componente para impedir que os contratos de proporção, fallback e carregamento se separem. Duplicar uma segunda implementação da home foi descartado por já ter produzido divergência 50/50.
|
|
|
|
### Grade CSS 5/7 acima de `lg`; fluxo normal abaixo dela
|
|
|
|
No desktop, uma grade de doze colunas entrega 5/12 ao campo de texto e 7/12 à mídia. No mobile e tablet, a ordem do DOM produz texto seguido pela imagem de proporção 4/5. Posicionamento absoluto e painel sobre a foto foram descartados porque reduzem a largura de leitura previsível e dificultam a contenção do texto.
|
|
|
|
### Mídia de hero continua prioritária e dimensionada pela área real
|
|
|
|
A única imagem de abertura mantém `loading=eager`, `fetchpriority=high`, `object-cover` e o componente responsivo existente. Seu `sizes` informa `100vw` abaixo de `lg` e aproximadamente `58vw` acima dele, em vez dos antigos `50vw`/`100vw` indiscriminados. O fallback não emite imagem quando o campo está vazio.
|
|
|
|
### Motion preserva o conteúdo legível desde o HTML
|
|
|
|
Os atributos existentes de `page-open` e beats de mídia/título/CTA permanecem. Nenhum texto fica escondido por opacidade; movimento reduzido e ausência de JavaScript exibem o estado final.
|
|
|
|
## Risks / Trade-offs
|
|
|
|
- [Uma imagem de origem estreita pode recortar conteúdo importante em 7/12] → `object-cover` preserva o contrato atual; curadoria/crop da mídia continua sendo responsabilidade editorial.
|
|
- [Conteúdo de título excepcionalmente longo pode pressionar a coluna] → limite de leitura, quebra normal e testes de ausência de overflow evitam palavras cortadas.
|
|
- [Breakpoint pode atualizar depois de resize em browser test] → os testes aguardam dois frames de animação antes de medir a mídia.
|
|
|
|
## Migration Plan
|
|
|
|
Não há migração de dados. O deploy troca apenas markup e classes; o rollback do commit restaura a abertura anterior. Rotas sem imagem continuam no fallback tonal já previsto.
|
|
|
|
## Open Questions
|
|
|
|
Nenhuma. Fotografias autorizadas de produção continuam uma dependência de conteúdo, não desta mudança.
|