Files

Manoel Freitas 168a21e459 feat(home): preencher hero fotográfico (#48 )

* docs: especificar hero full-bleed da home

* docs: planejar hero full-bleed da home

* feat(home): preencher hero fotográfico

2026-08-11 10:35:17 -03:00

2.7 KiB

Raw Permalink Blame History

Hero da home com fotografia full-bleed

Objetivo

Dar à fotografia do hero da home a mesma presença contínua da referência aprovada: no desktop, ela preenche integralmente a coluna direita abaixo do header; o conteúdo editorial permanece concentrado na coluna esquerda.

Escopo

Alterar somente o componente resources/views/components/home/hero.blade.php e seus testes diretos.
Quando hero_image_path existir, usar uma grade externa 0.9fr / 1.1fr a partir de md (768px), com altura exata calc(100dvh - 5rem): o espaço restante depois do header desktop. A mídia deve chegar ao topo e à base da seção, sem padding vertical ou lateral de container.
Manter o texto, CTAs, imagem CMS, alt, carregamento eager, fetchpriority, responsividade de imagem e atributos de motion existentes.
Abaixo de md, manter a ordem texto seguido de imagem, sem overflow horizontal, e fixar a mídia em aspect-ratio: 4 / 5 com object-cover.
Quando não houver imagem configurada, manter a abertura tonal, tipográfica e contida já existente, sem área vazia para mídia.

Fora de escopo

Não alterar conteúdo do CMS, imagens, Open Graph, outras rotas públicas, header, animações, tokens globais ou dependências.
Não criar ou publicar mídia nova.

Estrutura

O componente continuará sendo a única unidade de layout do hero. A variante com foto terá um wrapper full-width em desktop. A coluna textual terá data-hero-content, margem esquerda max(var(--amare-container-padding), calc((100vw - var(--amare-container-max)) / 2 + var(--amare-container-padding))), a mesma régua esquerda de container-amare, e padding direito fluido para não comprimir a leitura. O bloco de mídia ocupará os 55% da grade, receberá data-split-hero e data-reveal-media, e deixará de ficar limitado pelo container. O atributo sizes será (max-width: 767px) 100vw, 55vw. A variante sem foto permanece no wrapper atual.

Critérios de aceitação

Em desktop, data-split-hero inicia sob o header e mede calc(100dvh - 5rem), sem margens externas de container.
A foto usa object-cover, loading="eager", fetchpriority="high", path/alt próprios do hero e sizes="(max-width: 767px) 100vw, 55vw".
Em mobile, o conteúdo essencial continua acessível antes da foto, sem overflow nem texto recortado.
O fallback sem foto continua com data-tonal-hero, sem data-split-hero e sem mídia renderizada.
data-motion="page-open", data-reveal-group, beats existentes, motion reduzido, CTAs e semântica atual continuam funcionais.
Testes verificam os contratos full-bleed da variante com foto, a ausência de mídia no fallback, e a continuidade de motion/semântica.

2.7 KiB Raw Permalink Blame History