Marketing

HeroBanner

Full-width marketing hero section with title, subtitle, CTAs, and optional background.

HeroBanner

A responsive hero section with title, subtitle, dual CTAs, optional background image, and built-in reveal animations.

Preview

Welcome to Our Store

Discover premium products at unbeatable prices

Learn More

Usage

<CHeroBanner
  title="Welcome to Our Store"
  subtitle="Discover the latest collections"
  primary-cta-label="Shop Now"
  primary-cta-to="/products"
  secondary-cta-label="Learn More"
  secondary-cta-to="/about"
/>

With Background Image

<CHeroBanner
  title="Summer Collection"
  subtitle="Up to 50% off"
  :background-image="'/images/hero.jpg'"
  overlay
  primary-cta-label="Shop Now"
  primary-cta-to="/summer"
/>

Centered Alignment

<CHeroBanner
  title="Your Marketplace"
  subtitle="Everything you need"
  align="center"
/>

Props

Prop	Type	Default	Description
`title`	`string`	required	Main heading
`subtitle`	`string`	—	Subtitle text
`backgroundImage`	`string`	—	Background image URL
`overlay`	`boolean`	`false`	Dark overlay on background
`primaryCtaLabel`	`string`	—	Primary button label
`primaryCtaTo`	`string`	—	Primary button route
`secondaryCtaLabel`	`string`	—	Secondary button label
`secondaryCtaTo`	`string`	—	Secondary button route
`align`	`'start' \| 'center'`	`'start'`	Content alignment
`height`	`'sm' \| 'md' \| 'lg' \| 'full'`	`'lg'`	Banner height
`ui`	`Partial<{...}>`	—	Per-instance theme overrides

Slots

Slot	Scoped Props	Description
`title`	—	Custom title content
`subtitle`	—	Custom subtitle
`actions`	—	Custom CTA buttons
`media`	—	Side media (image/video)

ProductTypeBadge

Badge indicating the product type (physical, digital, subscription, auction, rental, event).

CategoryFilter

Sidebar filter panel with category tree, price range, brand selection, and sorting.