HeroSection
The HeroSection component creates large, visually rich sections — ideal for landing pages or marketing headers. Includes optional background gradients, plus a new “split” variant with image and text side-by-side.
Basic Example
Centered hero section with gradient background.
Welcome to Gatzi
Manage your events, bookings, and streaming all in one platform.
Split Variant
Hero section with image and text side-by-side.
Power Your Next Experience
Gatzi helps creators, venues and businesses manage their audiences with next-generation tools.
No Background
Use the showBackground prop to disable the gradient.
Simple Hero Section
Ideal for minimalist internal layouts.
Customization
Customize via className and style overrides.
Everything You Need to Grow
From concerts to spa bookings — Gatzi handles payments, events and reservations in one place.
Props
Options for HeroSection and its sub-components.
className?: string— Additional classes for the main container.children?: ReactNode— Content inside the section.showBackground?: boolean— Show or hide the gradient background (defaulttrue).HeroSection.Title— Renders heading with typography and spacing.HeroSection.Description— Paragraph component for lead text.HeroSection.Actions— Wrapper for buttons or calls-to-action.HeroSection.Split— Variant with image. Props:imageSrc: string,imageAlt?: string,imageOnLeft?: boolean.
Integration Example
Using HeroSection on a landing page.
Host, Stream & Monetize Events
From ticketing to live chat, Gatzi gives you all the tools to engage your audience and scale your business.
