amare/docs/superpowers/plans/2026-08-11-full-bleed-home-hero.md

Hero full-bleed da home Implementation Plan

For agentic workers: REQUIRED: Use superpowers:subagent-driven-development (if subagents available) or superpowers:executing-plans to implement this plan. Steps use checkbox (- [ ]) syntax for tracking.

Goal: Fazer a fotografia configurada do hero da home preencher toda a coluna direita abaixo do header, preservando a leitura editorial e o fallback sem foto.

Architecture: x-home.hero continuará a renderizar as duas variantes. A variante com imagem usará uma grade full-width com a coluna textual ancorada à régua global e a mídia como segundo trilho sem container; a variante tonal permanece contida. Os testes de feature e browser documentam os contratos de markup, tamanho e responsividade.

Tech Stack: Laravel Blade, Tailwind CSS 4 utilities, Pest feature/browser tests, Vite.

---

Chunk 1: Layout e contratos do hero

Task 1: Cobrir o spread full-bleed

Files:

• Modify: tests/Feature/PublicSite/ImmersivePhotoHeroTest.php

• Modify: tests/Browser/HomeEditorialCadenceTest.php

• Step 1: Escrever as expectativas de feature para a variante com foto

Exigir data-split-hero, data-hero-content, data-motion="page-open", data-reveal-group, aria-labelledby="hero-heading", loading="eager", fetchpriority="high" e sizes="(max-width: 767px) 100vw, 55vw". Com hero_image_path nulo, exigir data-tonal-hero, os mesmos atributos de motion/semântica, ausência de data-split-hero e ausência de <img dentro de [data-tonal-hero].

• Step 2: Estender a verificação browser de geometria

No viewport 1440×1000, obter os retângulos de .site-header, [data-chapter="hero"], [data-hero-content] e [data-split-hero]; esperar, com tolerância de 1px, que hero.top === header.bottom, media.top === hero.top, media.bottom === hero.bottom, media.right === innerWidth e hero.height === innerHeight - header.height. No viewport 390×844, comparar data-split-hero com [data-hero-content]; esperar que a mídia inicie depois do conteúdo, que width / height fique entre 0,79 e 0,81, e que não exista overflow horizontal. Antes das duas visitas de fallback, zerar hero_image_path; numa visita com reduced motion, esperar conteúdo visível. Em outra com reducedMotion: no-preference e IntersectionObserver desabilitado antes da navegação, esperar ausência de data-motion em document.documentElement, cada [data-motion="page-open"] com .is-active, cada [data-reveal] com .is-revealed e aria-labelledby="hero-heading".

• Step 3: Executar os testes focados e confirmar a falha inicial

Run: php artisan test tests/Feature/PublicSite/ImmersivePhotoHeroTest.php && php artisan test tests/Browser/HomeEditorialCadenceTest.php

Expected: falha nas novas expectativas de geometria/markup até a alteração do componente.

Task 2: Implementar a grade full-bleed

Files:

• Modify: resources/views/components/home/hero.blade.php

• Step 1: Separar a variante com imagem do container compartilhado

Substituir min-h-[100dvh] do <section> por md:h-[calc(100dvh-5rem)] quando hero_image_path estiver preenchido e renderizar um wrapper grid min-h-[calc(100dvh-5rem)] md:h-full md:grid-cols-[minmax(0,0.9fr)_minmax(0,1.1fr)]. A coluna de texto deve manter data-reveal-group, receber data-hero-content, ter padding-left: max(var(--amare-container-padding), calc((100vw - var(--amare-container-max)) / 2 + var(--amare-container-padding))), padding direito fluido e centralização vertical.

• Step 2: Tornar a mídia contínua

Aplicar ao bloco data-split-hero overflow-hidden, bg-amare-bg-deep, md:min-h-full; abaixo de md, aplicar aspect-[4/5]. Manter data-motion-beat="media", data-reveal-media, object-cover, path/alt CMS e mudar sizes para (max-width: 767px) 100vw, 55vw.

• Step 3: Preservar o fallback

Manter o wrapper tonal existente para hero sem imagem, com data-tonal-hero, data-motion="page-open" e data-reveal-group; não renderizar o bloco de mídia nessa variante.

• Step 4: Executar os testes focados e confirmar a passagem

Run: php artisan test tests/Feature/PublicSite/ImmersivePhotoHeroTest.php && php artisan test tests/Browser/HomeEditorialCadenceTest.php

Expected: PASS.

Task 3: Verificar e registrar

Files:

• Modify: resources/views/components/home/hero.blade.php

• Modify: tests/Feature/PublicSite/ImmersivePhotoHeroTest.php

• Modify: tests/Browser/HomeEditorialCadenceTest.php

• Step 1: Formatar e executar as verificações proporcionais

Run: composer pint && composer phpstan && composer test:feature && composer test:browser && npm run build

Expected: todos os comandos passam.

• Step 2: Inspecionar o diff e registrar

Run: git diff --check && git status --short

Expected: apenas os três arquivos de implementação/testes e a documentação deste plano/especificação aparecem como escopo.

• Step 3: Commit

Run: git add resources/views/components/home/hero.blade.php tests/Feature/PublicSite/ImmersivePhotoHeroTest.php tests/Browser/HomeEditorialCadenceTest.php docs/superpowers && git commit -m "feat(home): tornar hero fotográfico full-bleed"

Expected: commit focado, sem artefatos de build ou screenshots.