Hero Block

Large banner with title, subtitle, and optional background image. Perfect for page headers and landing sections.

Content Block

Preview

Default Hero

Centered alignment without background

Welcome to Our Space

Experience world-class training in a supportive community environment.

Get Started

Hero with Background

With background image and overlay

Train Like a Champion

Join our community and unlock your potential with expert guidance.

Book a Class

Left-Aligned Hero

Text aligned to the left

Start Your Journey

No experience necessary. Our instructors will guide you every step of the way.

Learn More

Properties

Property	Type	Default	Description
`title`	string	-	Main heading text
`subtitle`	string	-	Secondary text below the title
`backgroundImageUrl`	string	-	URL for background image
`backgroundOverlay`	boolean	`true`	Dark overlay on background image
`ctaText`	string	-	Call-to-action button text
`ctaLink`	string	-	URL for the CTA button
`alignment`	`'left'` \| `'center'` \| `'right'`	`'center'`	Text alignment

Usage

<HeroBlock
  content={{
    title: 'Welcome',
    subtitle: 'Your journey starts here',
    backgroundImageUrl: '/images/hero.jpg',
    backgroundOverlay: true,
    ctaText: 'Get Started',
    ctaLink: '/book',
    alignment: 'center',
  }}
/>

Best Practices

Keep titles concise - 3-6 words work best for impact
Use high-quality images - Minimum 1200px wide for backgrounds
Include a CTA - Guide visitors to take action
Ensure contrast - Enable overlay for dark text on busy images

Preview​