nuxt-x-marketing
Hero
Full-viewport hero section with background image or video, overlay, animated content, and configurable action buttons.
Hero
The XMarkHero component renders a full-viewport (min-h-svh) hero section. It supports image or video backgrounds with a configurable overlay, animated entrance effects, and flexible content alignment. Action buttons, eyebrow text, title, and subtitle are all prop-driven, with slots available for custom content.
Components
<XMarkHero />
A cinematic hero section typically placed at the top of a landing page. Background media is handled automatically — supply either img or video; the component picks the right element. An optional parallax scroll effect is applied via the xParallax class. The scroll indicator animates continuously at the bottom of the section.
<XMarkHero
eyebrow="Now in beta"
title="Ship faster with confidence"
subtitle="The all-in-one platform for modern development teams."
:img="{ src: '/images/hero-bg.jpg', alt: 'Team working' }"
overlay="gradient"
align="center"
:buttons="[
{ label: 'Get Started', to: '/signup', color: 'primary' },
{ label: 'Watch Demo', to: '#demo', variant: 'outline' }
]"
:has-scroll-indicator="true"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
img | Object | null | Background image { src: string, alt?: string } |
video | Object | null | Background video { src: string, poster?: string } |
overlay | String | 'gradient' | Overlay style: 'light', 'heavy', 'gradient', 'none' |
eyebrow | String | '' | Small label above the headline |
title | String | 'Your Headline Here' | Main headline text |
subtitle | String | '' | Supporting paragraph below the headline |
buttons | Array | [] | Action buttons [{ label, to?, color?, variant?, icon? }] |
align | String | 'left' | Horizontal alignment: 'left', 'center', 'right' |
verticalAlign | String | 'center' | Vertical content position: 'center', 'bottom' |
hasScrollIndicator | Boolean | true | Show animated scroll indicator at bottom |
includeNavPadding | Boolean | false | Add top padding to account for a non-transparent navbar |
Slots
| Slot | Description |
|---|---|
background | Replace the entire background (image/video) with custom content |
title | Override the <h1> content |
subtitle | Override the subtitle paragraph |
actions | Override the buttons row |
AI Context
category: Hero
package: "@xenterprises/nuxt-x-marketing"
components:
- XMarkHero
use-when: >
Building a landing page that needs a full-viewport opening section with
background media, a headline, and call-to-action buttons.
typical-page-section: Top of page, above the fold, first visible element.