nuxt-x-affiliate
Hero Landing
Full-viewport landing hero with an image or video background, overlay presets, a button row, and a scroll indicator.
Hero Landing
The full-bleed hero for home and category landing pages. Ported from
nuxt-x-marketing so an affiliate site no longer needs both layers.
Three heroes, three jobs — pick by page type:
| Component | Height | Use on |
|---|---|---|
<XAFHeroLanding> | full viewport | Home and category landing pages. Photo or video background. |
<XAFPageHero> | ~60vh | Interior pages. Coloured band, optional photo. |
<XAFHero> | content-sized | A single review page. Product image, rating, price, buy button. |
Components
<XAFHeroLanding />
<XAFHeroLanding
eyebrow="Reviews"
title="Gear we actually tested"
subtitle="Independent, hands-on reviews with no sponsored placements."
:img="{ src: '/hero.jpg', alt: 'Workbench with tools' }"
overlay="gradient"
:buttons="[
{ label: 'Browse reviews', to: '/reviews' },
{ label: 'Our method', to: '/about/editorial' },
]"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | '' | Headline, rendered as the page <h1> |
subtitle | string | '' | Supporting paragraph |
eyebrow | string | '' | Small uppercase label above the headline |
img | { src, alt? } | — | Background image. Ignored when video is set |
video | { src, poster? } | — | Background video. Takes precedence over img |
overlay | 'light' | 'heavy' | 'gradient' | 'none' | 'gradient' | Darkening layer for legible white text |
buttons | XafButton[] | [] | Button row. First is solid/primary |
align | 'left' | 'center' | 'right' | 'left' | Content column alignment |
verticalAlign | 'center' | 'bottom' | 'center' | Vertical position |
hasScrollIndicator | boolean | true | Animated "Scroll" hint |
includeNavPadding | boolean | false | Pad the top to clear a solid header |
Slots
| Slot | Description |
|---|---|
background | Replace the image/video layer entirely |
title | Rich headline markup |
subtitle | Rich subhead markup |
actions | Replace the button row |
Tips
- Pair with
<XAFSiteHeader transparent />so the header floats over the hero. LeaveincludeNavPaddingoff in that case — turn it on only when the header is solid. - The background carries
xParallax, driven by the layer's animation plugin. Both the parallax and the text fade-in respectprefers-reduced-motion. - The background image is
loading="eager"because it is the LCP element on any page using it.
AI Context
component: XAFHeroLanding
package: "@xenterprises/nuxt-x-affiliate"
use-when: Full-viewport landing hero with photo or video background