nuxt-x-affiliate

Banner

Promotional hero banner with CTA and gradient, primary, or dark variant styling.

Banner

The XAFBanner component renders a full-width hero section for the affiliate landing page. Choose from gradient, primary, or dark variants and supply a CTA link to drive signups.

Components

`<XAFBanner />`

<XAFBanner
  title="Earn 30% recurring commission"
  description="Refer customers and earn every month they stay."
  cta-label="Join Now"
  cta-to="/affiliate#signup"
  highlight-text="New: Tiered Rewards"
  variant="gradient"
/>

Props

Prop	Type	Default	Description
`title`	`string`	required	Banner headline text
`description`	`string`	—	Subtitle or supporting copy
`ctaLabel`	`string`	`'Join Now'`	CTA button label
`ctaTo`	`string`	`'/affiliate'`	CTA link destination
`ctaColor`	`string`	`'white'`	CTA button color token
`highlightText`	`string`	—	Badge text shown above or beside the headline
`variant`	`'primary' \| 'gradient' \| 'dark'`	`'gradient'`	Visual style of the banner
`showDecoration`	`boolean`	`true`	Show decorative background element

AI Context

component: XAFBanner
package: "@xenterprises/nuxt-x-affiliate"
use-when: Affiliate landing page hero section with CTA and promotional messaging

Edit this pageorReport an issue

nuxt-x-affiliate

Nuxt 4 layer for affiliate/referral program pages, tracking, and dashboard components — signup forms, referral link tracking, commission tiers, and a full affiliate dashboard built on Nuxt UI v4.

StatsCards

Stats overview cards showing clicks, conversions, total earnings, and pending payouts.