3.2 KiB
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-coverpreserva 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.