Docs
Native Modules
HeroConcert

HeroConcert Module

Overview

The HeroConcert module creates an engaging hero section. It features a dynamic image carousel alongside compelling content and dual call-to-action buttons, plus social media icons.

Key Features

  • Auto-playing image carousel with manual controls
  • Dual call-to-action buttons (primary and secondary)
  • Mobile-responsive design
  • Client-side carousel (Component minimizes client-side rendering)
  • Customizable colors and content
  • Built-in navigation and indicator dots

Quick Start

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

Customization Options

Text Content Customization

Customize the text content by passing a text prop:

const MyPage = () => {
  const textContent = {
    title: "Summer Music Festival 2024",
    description: "Three days of non-stop music featuring top artists",
    ctaPrimaryText: "Get Tickets",
    ctaPrimaryUrl: "/tickets",
    ctaSecondaryText: "See Lineup",
    ctaSecondaryUrl: "/lineup",
    newTab: true
  };
 
  return (
    <HeroConcert text={textContent} />
  );
};

Text Properties

PropertyTypeDefaultDescription
titlestring"Experience Live Music..."Main heading text
descriptionstring"Join us for..."Supporting description
ctaPrimaryTextstring"Book Tickets"Primary button text
ctaPrimaryUrlstring"#"Primary button link
ctaSecondaryTextstring"View Schedule"Secondary button text
ctaSecondaryUrlstring"#"Secondary button link
newTabbooleanfalseOpen links in new tab

Carousel Customization

Customize the carousel by passing a carouselItems prop:

const MyPage = () => {
  const carouselImages = [
    {
      imageSrc: '/images/event-1.jpg',
      alt: 'Main stage performance'
    },
    {
      imageSrc: '/images/event-2.jpg',
      alt: 'Audience experience'
    },
    // Add up to 5 images
  ];
 
  return (
    <HeroConcert carouselItems={carouselImages} />
  );
};

Carousel Item Properties

PropertyTypeDescription
imageSrcstringPath to the image
altstringAlt text for accessibility

Color Customization

Customize colors using the sectionColors prop:

const MyPage = () => {
  const colorSettings = {
    background: "bg-black",
    foreground: "text-white",
    descriptionForeground: "text-gray-300"
  };
 
  return (
    <HeroConcert sectionColors={colorSettings} />
  );
};

Color Properties

PropertyTypeDefaultDescription
backgroundstring"bg-background"Section background
foregroundstring"text-foreground"Main text color
descriptionForegroundstring"text-muted-foreground"Description text color

Carousel Functionality (HeroConcertClient)

The client component handles all carousel interactions:

  • Auto-plays every 3 seconds
  • Manual navigation with arrow buttons
  • Click-to-select indicator dots
  • Smooth transitions between slides
  • Touch-friendly controls
  • Responsive image sizing

Technical Details

  • Images are loaded optimally using Next.js Image component
  • Carousel maintains aspect ratio across screen sizes
  • Uses CSS transforms for smooth animations
  • Includes hover states for controls

Best Practices

  1. Images

    • Use high-quality images
    • Compress images to maintain fast loading times
    • Provide meaningful alt text

  2. Content

    • Keep titles concise and impactful
    • Use action-oriented button text
    • Ensure description text is scannable
    • Test all social media links

  3. Performance

    • Compress carousel images
    • Consider lazy loading for lower-priority images
    • Test carousel on different devices
    • Monitor auto-play performance

Common Usage Examples

Music Festival Hero

<HeroConcert
  text={{
    title: "Rock Festival 2024",
    description: "Two stages. Twenty bands. One unforgettable weekend.",
    ctaPrimaryText: "Buy Passes",
    ctaSecondaryText: "View Artists"
  }}
  carouselItems={[
    { imageSrc: '/images/stage.jpg', alt: 'Main stage setup' },
    { imageSrc: '/images/crowd.jpg', alt: 'Festival crowd' }
  ]}
/>

Concert Venue Landing

<HeroConcert
  text={{
    title: "Your Premier Concert Venue",
    description: "Hosting world-class performances in the heart of the city",
    ctaPrimaryText: "Upcoming Shows",
    ctaSecondaryText: "Virtual Tour"
  }}
  sectionColors={{
    background: "bg-zinc-900",
    foreground: "text-white",
    descriptionForeground: "text-zinc-300"
  }}
/>

Event Announcement

<HeroConcert
  text={{
    title: "Symphony Under the Stars",
    description: "An evening of classical masterpieces in an outdoor setting",
    ctaPrimaryText: "Reserve Seats",
    ctaSecondaryText: "Program Details",
    newTab: true
  }}
  CustomButton={<CustomTicketButton />}
/>

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

HeroBannerHeroSection