Page heroes

Openers of internal pages (theme.json pageHero), shown on a product page with a spec table and a 4-page group. 7 variants, 7 rendered live.

banner

page-herounusedOpen live

desktop preview

desktop 1280px

mobile preview

mobile 390px

Files: src/components/page/PageHero.astro
src/components/page/PageHeroCopy.astro
src/lib/page-hero.ts
src/lib/page-hero-variant.ts
How to pin: { "pageHero": "banner" }
yes: theme.json pageHero="banner" (enum PAGE_HERO_LAYOUTS)
Reads: content.pages[] (internal routes) | page.title,intro,image,sections,navGroup,slug,role,merged; spec: first list section .table; catalog: groupSiblings(page,pages)>=4
Used by: unused
Quality gates: 4 codes
page-hero: mixed-page-hero repeated-page-hero same-adjacent-background missing-separator
Selected by: theme.json pageHero; else siteHeroVariant(content.pages) votes spec|catalog; else seeded hashSeed(seed#page-hero)%[split,stacked,inset]; no photo => typographic. One layout per project
Notes: page photo full-bleed under dark scrim; opt-in only (needs sections below on every page); turns the overlay nav light (pageHeroIsDark)

split

page-heroin useOpen live

desktop preview

desktop 1280px

mobile preview

mobile 390px

Files: src/components/page/PageHero.astro
src/components/page/PageHeroCopy.astro
src/lib/page-hero.ts
src/lib/page-hero-variant.ts
How to pin: { "pageHero": "split" }
yes: theme.json pageHero="split" (enum PAGE_HERO_LAYOUTS)
Reads: content.pages[] (internal routes) | page.title,intro,image,sections,navGroup,slug,role,merged; spec: first list section .table; catalog: groupSiblings(page,pages)>=4
Used by: rosarioagroindustrial
Quality gates: 4 codes
page-hero: mixed-page-hero repeated-page-hero same-adjacent-background missing-separator
Selected by: theme.json pageHero; else siteHeroVariant(content.pages) votes spec|catalog; else seeded hashSeed(seed#page-hero)%[split,stacked,inset]; no photo => typographic. One layout per project
Notes: copy beside framed photo on a page tone (seeded pool)

stacked

page-heroin useOpen live

desktop preview

desktop 1280px

mobile preview

mobile 390px

Files: src/components/page/PageHero.astro
src/components/page/PageHeroCopy.astro
src/lib/page-hero.ts
src/lib/page-hero-variant.ts
How to pin: { "pageHero": "stacked" }
yes: theme.json pageHero="stacked" (enum PAGE_HERO_LAYOUTS)
Reads: content.pages[] (internal routes) | page.title,intro,image,sections,navGroup,slug,role,merged; spec: first list section .table; catalog: groupSiblings(page,pages)>=4
Used by: gonzalezorfebre
Quality gates: 4 codes
page-hero: mixed-page-hero repeated-page-hero same-adjacent-background missing-separator
Selected by: theme.json pageHero; else siteHeroVariant(content.pages) votes spec|catalog; else seeded hashSeed(seed#page-hero)%[split,stacked,inset]; no photo => typographic. One layout per project
Notes: title row over wide rounded photo band (seeded pool)

inset

page-heroin useOpen live

desktop preview

desktop 1280px

mobile preview

mobile 390px

Files: src/components/page/PageHero.astro
src/components/page/PageHeroCopy.astro
src/lib/page-hero.ts
src/lib/page-hero-variant.ts
How to pin: { "pageHero": "inset" }
yes: theme.json pageHero="inset" (enum PAGE_HERO_LAYOUTS)
Reads: content.pages[] (internal routes) | page.title,intro,image,sections,navGroup,slug,role,merged; spec: first list section .table; catalog: groupSiblings(page,pages)>=4
Used by: cucchiettiboats, francescoristorante, losvallessalud
Quality gates: 4 codes
page-hero: mixed-page-hero repeated-page-hero same-adjacent-background missing-separator
Selected by: theme.json pageHero; else siteHeroVariant(content.pages) votes spec|catalog; else seeded hashSeed(seed#page-hero)%[split,stacked,inset]; no photo => typographic. One layout per project
Notes: wide photo card, copy on glass panel at foot; only layout that can host clinic-scan via pageEffects

typographic

page-heroin useOpen live

desktop preview

desktop 1280px

mobile preview

mobile 390px

Files: src/components/page/PageHero.astro
src/components/page/PageHeroCopy.astro
src/lib/page-hero.ts
src/lib/page-hero-variant.ts
How to pin: { "pageHero": "typographic" }
yes: theme.json pageHero="typographic" (enum PAGE_HERO_LAYOUTS)
Reads: content.pages[] (internal routes) | page.title,intro,image,sections,navGroup,slug,role,merged; spec: first list section .table; catalog: groupSiblings(page,pages)>=4
Used by: artesanias-delta, bellevue, cucchiettiboats, cuchilloselchaja, dolium, dolzhnos, donmario, emag, francescoristorante, gonzalezorfebre, jlopezluthier, juguetesrasti, muebleriaheredia, parrisur, sialle
Quality gates: 4 codes
page-hero: mixed-page-hero repeated-page-hero same-adjacent-background missing-separator
Selected by: theme.json pageHero; else siteHeroVariant(content.pages) votes spec|catalog; else seeded hashSeed(seed#page-hero)%[split,stacked,inset]; no photo => typographic. One layout per project
Notes: no photo, oversized title; automatic fallback when no free photo or a content variant cannot be filled

spec

page-heroin useOpen live

desktop preview

desktop 1280px

mobile preview

mobile 390px

Files: src/components/page/PageHero.astro
src/components/page/PageHeroCopy.astro
src/components/page/SpecPanel.astro
src/lib/page-hero.ts
src/lib/page-hero-variant.ts
How to pin: { "pageHero": "spec" }
yes: theme.json pageHero="spec" (enum PAGE_HERO_LAYOUTS)
Reads: content.pages[] (internal routes) | page.title,intro,image,sections,navGroup,slug,role,merged; spec: first list section .table; catalog: groupSiblings(page,pages)>=4
Used by: dolzhnos
Quality gates: 4 codes
page-hero: mixed-page-hero repeated-page-hero same-adjacent-background missing-separator
Selected by: theme.json pageHero; else siteHeroVariant(content.pages) votes spec|catalog; else seeded hashSeed(seed#page-hero)%[split,stacked,inset]; no photo => typographic. One layout per project
Notes: title beside key-facts panel (SpecPanel) from first list.table / services items; chosen by content vote: >=50% of grouped item pages have >=2 facts

catalog

page-heroin useOpen live

desktop preview

desktop 1280px

mobile preview

mobile 390px

Files: src/components/page/PageHero.astro
src/components/page/PageHeroCopy.astro
src/components/page/PageRail.astro
src/lib/page-hero.ts
src/lib/page-hero-variant.ts
How to pin: { "pageHero": "catalog" }
yes: theme.json pageHero="catalog" (enum PAGE_HERO_LAYOUTS)
Reads: content.pages[] (internal routes) | page.title,intro,image,sections,navGroup,slug,role,merged; spec: first list section .table; catalog: groupSiblings(page,pages)>=4
Used by: artesanias-delta, dolium, parrisur
Quality gates: 4 codes
page-hero: mixed-page-hero repeated-page-hero same-adjacent-background missing-separator
Selected by: theme.json pageHero; else siteHeroVariant(content.pages) votes spec|catalog; else seeded hashSeed(seed#page-hero)%[split,stacked,inset]; no photo => typographic. One layout per project
Notes: compact title band over rail of the group sibling pages (PageRail); chosen when majority of grouped pages sit in a group >=4 (CATALOG_MIN_GROUP)