Manoel Freitas
168a21e459
* docs: especificar hero full-bleed da home * docs: planejar hero full-bleed da home * feat(home): preencher hero fotográfico
82 lines
5.2 KiB
Markdown
82 lines
5.2 KiB
Markdown
# 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.
|