HeroBanner Module

Overview

The HeroBanner module creates an eye-catching, full-width banner section. It's perfect for creating impactful first impressions and highlighting your main message or call-to-action.

Key Features

Full-width design that adapts to different screen sizes
Support for background images or solid colors
Customizable text overlay with title and description
Optional call-to-action button
Dark mode support
Mobile-responsive design

Quick Start

import HeroBanner from '@/modules/native/HeroBanner';
 
// Basic usage
const MyPage = () => {
  return (
    <HeroBanner />
  );
};

This will render a banner with default settings. To customize it, you can pass in your own settings (see below).

Customization Options

Basic Customization

You can customize the hero banner by passing a hero prop:

const MyPage = () => {
  const heroData = {
    title: "Welcome to Our Store",
    description: "Find the best deals on premium products",
    imageUrl: "/images/my-banner.jpg",
    ctaText: "Shop Now",
    ctaUrl: "/shop"
  };
 
  return (
    <HeroBanner hero={heroData} />
  );
};

Hero Properties

Property	Type	Default	Description
title	string	"Welcome to Our Website."	The main heading text
description	string	"Discover amazing products and services."	Supporting text below the title
imageUrl	string	"/images/demo/herobanner.jpg"	URL path to the background image
backgroundColor	string	"#34970b"	Background color (used when no image is provided)
ctaText	string	"Learn More"	Text for the call-to-action button
ctaUrl	string	"#"	Link URL for the call-to-action button

Color Customization

You can customize the colors using the sectionColors prop:

const MyPage = () => {
  const colorSettings = {
    background: "bg-blue-100",
    foreground: "text-gray-800",
    slideBackgroundTint: "bg-black bg-opacity-40",
    slideTextForeground: "text-white",
    buttonBackground: "bg-blue-500",
    buttonForeground: "text-white"
  };
 
  return (
    <HeroBanner sectionColors={colorSettings} />
  );
};

Color Properties

Property	Type	Default	Description
background	string	"bg-background"	Background color of the section
foreground	string	"text-foreground"	Text color of the section
slideBackgroundTint	string	"bg-black bg-opacity-50"	Overlay tint on the background image
slideTextForeground	string	"text-white dark:text-gray-300"	Text color for the overlay content
buttonBackground	string	"bg-white dark:bg-gray-800"	Background color of the CTA button
buttonForeground	string	"text-black dark:text-gray-300"	Text color of the CTA button

Best Practices

Images
- Use high-quality images
- Compress images to maintain fast loading times
- Choose images that work well with text overlay
Content
- Keep titles short and impactful (3-8 words recommended)
- Use clear, action-oriented descriptions
- Ensure CTA text is compelling and specific
Colors
- Maintain sufficient contrast between text and background
- Test color schemes in both light and dark modes
- Use color overlays to improve text readability over images

Common Usage Examples

Simple Image Banner

<HeroBanner
  hero={{
    title: "Summer Collection 2024",
    description: "Explore our latest fashion trends",
    imageUrl: "/images/summer-collection.jpg"
  }}
/>

Solid Color Banner

<HeroBanner
  hero={{
    title: "Special Offer",
    description: "Get 20% off on all products",
    backgroundColor: "#ff6b6b",
    ctaText: "Shop Now",
    ctaUrl: "/sale"
  }}
/>

Custom-Styled Banner

<HeroBanner
  hero={{
    title: "Premium Membership",
    description: "Join our exclusive club",
    imageUrl: "/images/membership.jpg"
  }}
  sectionColors={{
    slideBackgroundTint: "bg-blue-900 bg-opacity-60",
    buttonBackground: "bg-yellow-400",
    buttonForeground: "text-blue-900"
  }}
/>

Need Help?

If you have questions or need support, please contact us by email at startupbolt@gmail.com or on Twitter at https://x.com/nifal_adam (opens in a new tab).

FeatureTabs HeroConcert