Files

Manoel Freitas 484ac77ce7 feat: Home editorial conforme preview (header, footer, 8 seções) (#53 )

* feat: modalidades de casamento e etapas corporativas

* feat: home editorial e header/footer conforme preview

* docs: proposta openspec home editorial

* test: CTA hero agora ancora #sobre conforme preview

* test: speed browser suite via visit reuse

Collapse route×viewport cartesian products, merge home motion
asserts, skip existing VisualContentSeeder JPEGs, ignore Screenshots.

2026-08-11 18:14:24 -03:00

3.3 KiB

Raw Blame History

Design — Home editorial conforme preview

Fonte de verdade visual: modelo estrutural validado (preview(1).html) + tokens resources/css/tokens.css (inalterados; assertados por HeritageEditorialTokensTest). Paleta do preview já mapeada para os utilitários amare-*.

Estrutura da home (8 capítulos)

Capítulo	Id/âncora	Componente	Conteúdo
Hero	—	`x-home.hero`	Eyebrow fixo, h1 fixo, lede fixo, CTAs "Conhecer a Amare" (`#sobre`) + "Enviar briefing" (`#contato`), arte `hero_image_path` ou placeholder rotulado "Fotografia hero"
01 — A Amare	`#sobre`	`x-home.manifesto`	Editorial-split 0.8fr/1.2fr; statement fixo + placeholder institucional
02 — Duas vertentes	`#vertentes`	`x-home.vertentes`	2 cards (Casamentos/Corporate) com overlay gradiente 43%, CTAs para âncoras
03 — Amare Casamentos	`#casamentos`	`x-home.packages`	Grid 3 colunas com bordas (Eyebrow/título/descrição/items/CTA primário → `contact`), bloco de orientação accent-deep + nota de nomenclatura
04 — Amare Corporate	`#corporate`	`x-home.corporate`	Etapas `corporate_steps` (número 44px, bordas) + placeholder "Portfólio Corporate / Conteúdo em construção"
05 — Portfólio	`#portfolio`	`x-home.portfolio`	Grid 1.2fr/0.8fr/0.8fr, 1 foto alta (row-span-2, 634px) + 4; cases reais ou labels "FOTO 0X"
06 — Depoimentos	`#depoimentos`	`x-home.testimonials`	3 cards brancos com borda; sem carrossel; placeholders até completar 3
07 — Briefing	`#contato`	`x-home.briefing`	Formulário completo reusando `contact.store` (underline inputs, labels uppercase 12px, honeypot `#empresa`, checkbox LGPD)

Padrões visuais

Seções: home-chapter border-b border-amare-border bg-amare-bg, padding py-16 md:py-24, container-amare, data-reveal-group + blocos data-reveal data-reveal-from="up".
Eyebrow: text-xs font-bold uppercase tracking-[0.16em] text-amare-accent-deep.
h2 clamp(2.375rem,5vw,4rem), h3 clamp(1.5625rem,2.7vw,2.125rem), lede clamp(1.1875rem,2vw,1.5rem) max-w 760px, leading-[1.55].
Botão primário: min-h-[48px] bg-amare-accent text-amare-accent-text uppercase text-xs font-bold tracking-[0.09em], hover accent-deep; contorno: border-amare-accent text-amare-accent-deep; em bloco escuro: border-amare-accent-text text-amare-accent-text.
Header: sticky 74px, bg-amare-bg/95 backdrop-blur-sm, nav 13px uppercase tracking-[0.08em], botão "Conte seu evento" → contact.
Footer: py-14 md:py-[58px], marca + "Assessoria & produção de eventos • São Paulo", social links do settings ou placeholder "Instagram · WhatsApp · E-mail · LinkedIn (quando confirmado)".

Acessibilidade

Âncoras aria-labelledby por seção; foco/ordem tab preservados; skip-link intacto.
prefers-reduced-motion: blocos globais em tokens.css (0.01ms) — nenhum motion extra adicionado.
Erros de validação do briefing com role="alert" e aria-describedby; honeypot oculto.
Contrastes: accent #556B2F sobre bg #FBF9F4 ≈ 4.6:1; accent-text branco sobre accent ≈ 6.9:1; muted #5D6155 sobre bg ≈ 5.4:1 (dentro do AA).

Fora de escopo visual

Copy final institucional (placeholders), acervo fotográfico autorizado, canal de fornecedores (pós-MVP), folios ornamentais, carrossel, parallax.

3.3 KiB Raw Blame History