Docs
Native Modules
HeroSection

HeroSection Module

Overview

The HeroSection module creates a modern, split-layout hero area perfect for landing pages. It features a content section with heading, description, and CTA button on one side, and a prominent image on the other, along with integrated customer ratings.

Key Features

  • Split layout design (text/CTA + image)
  • Built-in customer ratings display
  • Responsive design that adapts to all screen sizes
  • Support for custom call-to-action buttons
  • Flexible content customization
  • Dark mode support
  • Optional image priority loading

Quick Start

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

This will render a hero section with default settings. Customize it by passing props (see below).

Customization Options

Text Content Customization

Customize the text content by passing a text prop:

const MyPage = () => {
  const textContent = {
    heading: "Transform Your Business Today",
    description: "Get started with our powerful platform in minutes",
    ctaText: "Start Free Trial",
    ctaUrl: "/trial",
    newTab: true  // Opens link in new tab
  };
 
  return (
    <HeroSection text={textContent} />
  );
};

Text Properties

PropertyTypeDefaultDescription
headingstring"Launch your Startup today..."Main heading text
descriptionstring"StartupBolt is a NextJS..."Supporting description text
ctaTextstring"Get StartupBolt"Call-to-action button text
ctaUrlstring"#"Call-to-action button link
newTabbooleanfalseWhether to open link in new tab

Image Customization

Customize the image by passing an image prop:

const MyPage = () => {
  const imageContent = {
    name: "Product Demo",
    imageSrc: "/images/product-demo.jpg",
    priority: true  // Prioritize image loading
  };
 
  return (
    <HeroSection image={imageContent} />
  );
};

Image Properties

PropertyTypeDefaultDescription
namestring"Nutshell"Alt text for the image
imageSrcstring"/images/demo/nutshell.jpg"Path to the image
prioritybooleanfalseWhether to prioritize image loading

Color Customization

Customize colors using the sectionColors prop:

const MyPage = () => {
  const colorSettings = {
    background: "bg-slate-100",
    foreground: "text-slate-900"
  };
 
  return (
    <HeroSection sectionColors={colorSettings} />
  );
};

Color Properties

PropertyTypeDefaultDescription
backgroundstring"bg-background"Background color of the section
foregroundstring"text-foreground"Text color of the section

Custom Button Integration

You can provide your own custom button component:

const MyPage = () => {
  const CustomButton = (
    <button className="custom-button-class">
      Custom CTA Button
    </button>
  );
 
  return (
    <HeroSection CustomButton={CustomButton} />
  );
};

Best Practices

  1. Content Strategy

    • Use clear, action-oriented headings
    • Keep descriptions concise and benefit-focused
    • Make CTA text specific and compelling

  2. Images

    • Use high-quality images
    • Compress images to maintain fast loading times
    • Consider using priority loading for above-the-fold images

  3. Layout

    • Maintain good spacing between elements
    • Ensure text is readable against the background
    • Test responsive layout on different devices

Common Usage Examples

Product Launch Hero

<HeroSection
  text={{
    heading: "Introducing Our New Platform",
    description: "Experience the future of digital productivity",
    ctaText: "Get Early Access",
    ctaUrl: "/signup"
  }}
  image={{
    name: "Platform Preview",
    imageSrc: "/images/platform-preview.jpg",
    priority: true
  }}
/>

Service Showcase

<HeroSection
  text={{
    heading: "Professional Services for Growing Businesses",
    description: "Expert consulting tailored to your needs",
    ctaText: "Book Consultation",
    ctaUrl: "/contact"
  }}
  sectionColors={{
    background: "bg-blue-50",
    foreground: "text-blue-900"
  }}
/>

Course Landing Page

<HeroSection
  text={{
    heading: "Master Digital Marketing in 8 Weeks",
    description: "Learn from industry experts and get certified",
    ctaText: "Enroll Now",
    ctaUrl: "/courses/digital-marketing",
    newTab: true
  }}
  image={{
    name: "Digital Marketing Course",
    imageSrc: "/images/course-preview.jpg"
  }}
/>

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).

HeroConcertLoginButton