Five Variants
Service-first, image-right, centered, form, and form-minimal layouts.
Choose Your Hero
Five powerful layouts for every business goal. Pick the one that fits your page, customize it, and ship.
Why Five Hero Variants?
Not all pages are created equal. A consultant's homepage needs different emphasis than an e-commerce product page. A newsletter signup needs less friction than a demo request form. That's why we built five distinct hero variants, each optimized for specific business goals.
Let's see each one in action.
1. Service-First Hero
Best for: Consultants, B2B, professional services
Text-focused layout that lets your value proposition shine. No distracting imagery—just clear, compelling copy and a strong call to action.
Trusted by 500+ Companies
Transform Your Business with Expert Consulting
We help companies scale with data-driven strategies and proven methodologies that deliver results.
Show Code Example
<Hero
variant="service-first"
subheading="Trusted by 500+ Companies"
heading="Transform Your Business with Expert Consulting"
description="We help companies scale with data-driven strategies..."
buttonText="Schedule Consultation"
buttonHref="/contact"
buttonText2="View Case Studies"
buttonHref2="/about"
/>2. Image-Right Hero
Best for: General businesses, agencies, portfolios
Classic split layout with content on the left and an image on the right. Balanced approach that works for most business types.
Award-Winning Service
Beautiful Websites That Convert
We design and build websites that help your business grow. Modern, fast, and optimized for search engines.
Hero Image
Show Code Example
<Hero
variant="image-right"
subheading="Award-Winning Service"
heading="Beautiful Websites That Convert"
description="We design and build websites that help your business grow."
buttonText="Get Started"
buttonHref="/contact"
buttonText2="View Portfolio"
buttonHref2="/about"
image="/images/hero.jpg"
imageAlt="Our design team"
/>3. Centered Hero
Best for: Landing pages, product launches, events
Dramatic full-width hero with centered content. Perfect for high-impact pages that need to grab attention immediately.
Start Your Journey Today
Join thousands of successful businesses using our platform to grow faster and smarter.
Show Code Example
<Hero
variant="centered"
heading="Start Your Journey Today"
description="Join thousands of successful businesses..."
buttonText="Sign Up Free"
buttonHref="/contact"
buttonText2="Watch Demo"
buttonHref2="/about"
backgroundImage="/images/hero-bg.jpg"
backgroundGradient=true
/>4. Form Hero (Lead Generation)
Best for: Trials, downloads, webinars, lead capture
Split layout with an inline form. Higher conversion than button-to-form-page flows because there's less friction.
Limited Time Offer
Start Your Free 14-Day Trial
No credit card required. Cancel anytime. Full access to all features from day one.
Show Code Example
<Hero
variant="form"
heading="Start Your Free 14-Day Trial"
description="No credit card required. Cancel anytime."
formHeading="Get Started Free"
formDescription="Join 10,000+ happy customers"
formFields="name-email"
formName="hero-trial"
formAction="/success?source=hero"
formButtonText="Start Free Trial"
/>5. Form-Minimal Variant
Ultra-minimal newsletter signup with no hero image. Centered heading, description, and form only—perfect for newsletter pages and simple lead capture.
Get Weekly Marketing Tips
Join 10,000+ business owners who receive practical strategies, industry insights, and proven tactics delivered to their inbox every week.
Show Code Example
<Hero
variant="form-minimal"
heading="Get Weekly Marketing Tips"
description="Join 10,000+ business owners who receive practical strategies..."
formName="hero-newsletter"
formAction="/success?source=newsletter"
formButtonText="Subscribe Now"
/>Which Hero Should You Use?
Service-First
✅ B2B services
✅ Consultants
✅ Text-heavy pages
❌ E-commerce
Image-Right
✅ Most businesses
✅ Balanced content
✅ Portfolios
❌ High-friction pages
Centered
✅ Landing pages
✅ Product launches
✅ Events
❌ Complex products
Form Variant
✅ Lead generation
✅ Free trials
✅ Downloads
❌ Exploratory pages
Hero Component Features
Background Images
Optional background images with gradient overlays for readability.
Lead Capture
Built-in forms for newsletters, trials, and downloads.
Dark Mode
Full dark mode support with automatic theme adaptation.
Responsive
All variants stack beautifully on mobile devices.
Fast & Static
Static site generation for instant page loads.
Ready to Add a Hero?
Choose your variant, customize the props, and add it to any page. It's that simple!