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 via the img / video prop objects, 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 }`. Plays muted, autoplays, loops.
`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.

Edit this pageorReport an issue

nuxt-x-marketing

Nuxt layer with 68 marketing components (57 active + 11 archived) — hero, features, pricing, testimonials, blog, directory, affiliate, cookie/GDPR, app shell, and a full CSS design system. Zero required props on most components.

FAQ

Frequently asked questions component with animated accordion and two-column layout modes.