import Image from "next/image";
import Link from "next/link";

/**
 * HeroBanner Module
 * A customizable hero banner section with support for images, text overlay and CTA buttons.
 * 
 * More Information:
 * - Documentation: https://www.startupbolt.com/docs/nativemodules/hero-banner
 * - Demo and Code: https://www.startupbolt.com/modules/marketing/hero_sections/#hero-banner
 */

// Default color settings for the HeroBanner module
const defaultSectionColors = {
    background: "bg-background",
    foreground: "text-foreground",
    slideBackgroundTint: "bg-black bg-opacity-50",
    slideTextForeground: "text-white dark:text-gray-300",
    buttonBackground: "bg-white dark:bg-gray-800",
    buttonForeground: "text-black dark:text-gray-300"
}

// Default text and background color for the Banner in HeroBanner module
const defaultHeroData = {
    title: "Welcome to Our Website.",
    description: "Discover amazing products and services.",
    imageUrl: "/images/demo/herobanner.jpg",
    backgroundColor: "#34970b",
    ctaText: "Learn More",
    ctaUrl: "#",
};

const HeroBanner = ({
    sectionColors: customSectionColors,
    hero: customHeroData,
}) => {

    const sectionColors = { ...defaultSectionColors, ...customSectionColors };
    const hero = { ...defaultHeroData, ...customHeroData };
    const useImage = hero.imageUrl !== undefined;

    return (
        <section className={`${sectionColors.background} ${sectionColors.foreground} w-full overflow-hidden`}>
            <div
                className="relative w-full aspect-[4/3] sm:aspect-[16/9] md:aspect-[21/9] lg:aspect-[3/1] bg-cover bg-center"
                style={!useImage ? { backgroundColor: hero.backgroundColor } : undefined}
            >
                {useImage && (
                    <Image
                        src={hero.imageUrl}
                        alt={hero.title}
                        fill={true}
                        className="object-cover object-center"
                        sizes="100vw"
                    />
                )}
                <div className={`absolute inset-0 flex flex-col items-center justify-center text-center ${sectionColors.slideBackgroundTint} ${sectionColors.slideTextForeground} p-4 sm:p-8`}>
                    <h1 className="font-extrabold text-4xl leading-tight sm:text-5xl lg:text-6xl lg:leading-tight mb-4 max-w-4xl">{hero.title}</h1>
                    <p className="text-lg mb-6 max-w-2xl">{hero.description}</p>
                    {hero.ctaText && (
                        <Link
                            href={hero.ctaUrl}
                            className={`${sectionColors.buttonBackground} ${sectionColors.buttonForeground} py-2 px-4 sm:px-6 rounded-full font-semibold hover:bg-opacity-90 transition-colors duration-300 text-base`}
                        >
                            {hero.ctaText}
                        </Link>
                    )}
                </div>
            </div>
        </section>
    );
};

export default HeroBanner;

import Image from 'next/image';
import Link from 'next/link';
import CustomerRatings from '@/modules/native/CustomerRatings';

/**
 * HeroSection Module
 * A customizable hero section component with support for headings, descriptions,
 * call-to-action buttons, and customer ratings. This module is designed
 * to be the main banner/hero area of your landing pages with flexible layout options.
 * 
 * More Information:
 * - Documentation: https://www.startupbolt.com/docs/nativemodules/hero-section
 * - Demo and Code: https://www.startupbolt.com/modules/marketing/hero_sections/#hero-section
 */

// Default color settings for the HeroSection module
const defaultSectionColors = {
    background: "bg-background",
    foreground: "text-foreground"
}

// Default text content for the HeroSection module
const defaultText = {
    heading: "Launch your Startup today. Why wait months?",
    description: "StartupBolt is a NextJS Rapid Launch Kit that transforms your software idea into a live product quickly.",
    ctaText: "Get StartupBolt",
    ctaUrl: "#",
    newTab: false,
}

// Default image data for the HeroSection module
// This can be overridden by passing custom image data to the component
const imageData = {
    name: "Nutshell",
    imageSrc: "/images/demo/nutshell.jpg",
    priority: false
}

const HeroSection = ({
    sectionColors: customSectionColors,
    text: customText,
    image: customImageData,
    CustomButton, // Optional prop for a custom button component
}) => {

    const sectionColors = { ...defaultSectionColors, ...customSectionColors };
    const text = { ...defaultText, ...customText };
    const image = { ...imageData, ...customImageData };

    return (
        <section className={`${sectionColors.background} ${sectionColors.foreground}`}>
            <div className="container mx-auto flex flex-col px-4 sm:px-8 pt-4 sm:pt-8 pb-12 sm:pb-24">
                <div className="grid grid-cols-1 gap-2 items-center lg:grid-cols-2">
                    <div className="flex flex-col items-center text-center lg:items-start lg:text-left">
                        <h1 className="font-extrabold text-4xl tracking-tight sm:text-5xl lg:text-6xl mb-8">
                            {text.heading}
                        </h1>
                        <p className="text-xl leading-relaxed mb-8">
                            {text.description}
                        </p>
                        {CustomButton ? (
                            CustomButton
                        ) : text.ctaText && (
                            <Link
                                href={text.ctaUrl}
                                target={text.newTab ? "_blank" : "_self"}
                                className="bg-primary text-primary-foreground text-lg font-bold py-3 px-8 rounded-md hover:bg-primary/90 transition duration-300 text-center self-center lg:self-start flex items-center justify-center"
                            >
                                {text.ctaText}
                            </Link>
                        )}
                        <CustomerRatings sectionColors={sectionColors} />
                    </div>
                    <div className="aspect-square relative p-4 lg:p-8 w-full sm:w-2/3 lg:w-full mx-auto">
                        <div className="relative w-full h-full">
                            <Image
                                src={image.imageSrc}
                                alt={image.name}
                                fill={true}
                                loading="eager"
                                priority={image.priority || false}
                                className="object-cover object-center rounded-lg"
                                sizes="(max-width: 640px) 100vw, (max-width: 1024px) 66vw, 50vw"
                            />
                        </div>
                    </div>
                </div>
            </div>
        </section>
    );
};

export default HeroSection;

import Link from 'next/link';
import { Instagram, Linkedin, Facebook, Youtube } from 'lucide-react';
import HeroConcertClient from './HeroConcertClient';

/**
 * HeroConcert Module
 * A versatile hero section component featuring a dynamic carousel and dual call-to-action buttons.
 * This module combines engaging visuals with compelling content to create an impactful landing section.
 * Key features include:
 * - Responsive image carousel with auto-play and manual controls
 * - Primary and secondary call-to-action buttons
 * - Customizable colors and text content
 * 
 * More Information:
 * - Documentation: https://www.startupbolt.com/docs/nativemodules/hero-concert
 * - Demo and Code: https://www.startupbolt.com/modules/marketing/hero_sections/#hero-concert
 */

// Default color settings for the HeroConcert module
const defaultSectionColors = {
    background: "bg-background",
    foreground: "text-foreground",
    descriptionForeground: "text-muted-foreground"
}

// Default text content for the HeroConcert module
const defaultText = {
    title: "Experience Live Music Like Never Before",
    description: "Join us for an unforgettable night of music featuring world-class artists. From classical masterpieces to contemporary hits, immerse yourself in the magic of live performance.",
    ctaPrimaryText: "Book Tickets", // Delete this or keep it empty to not show Primary CTA button
    ctaPrimaryUrl: "#",
    ctaSecondaryText: "View Schedule", // Delete this or keep it empty to not show Secondary CTA button
    ctaSecondaryUrl: "#",
    newTab: false, // Set to true if you want to open the CTA link in a new tab
}

// Default carousel items for the HeroConcert module
const defaultCarouselItems = [
    { imageSrc: '/images/demo/concert-1.jpg', alt: 'Live concert performance with dramatic lighting' },
    { imageSrc: '/images/demo/concert-2.jpg', alt: 'Orchestra performing on stage' },
    { imageSrc: '/images/demo/concert-3.jpg', alt: 'Crowd enjoying live music performance' },
    { imageSrc: '/images/demo/concert-4.jpg', alt: 'Close-up of musician performing' },
    { imageSrc: '/images/demo/concert-5.jpg', alt: 'Concert venue with spectacular light show' },
];

const HeroConcert = ({
    sectionColors: customSectionColors,
    text: customText,
    carouselItems = defaultCarouselItems,
    CustomButton, // Optional prop that allows you to pass a custom button component for Primary CTA
}) => {
    const sectionColors = { ...defaultSectionColors, ...customSectionColors };
    const text = { ...defaultText, ...customText };

    return (
        <section className={`${sectionColors.background} ${sectionColors.foreground}`}>
            <div className="container mx-auto flex flex-col md:flex-row md:items-center md:justify-between px-4 sm:px-8 py-12 sm:py-24">
                <div className="w-full md:w-1/2 mb-6 md:mb-0 md:pr-8">
                    <h1 className="font-bold text-4xl md:text-5xl mb-4">{text.title}</h1>
                    <p className={`${sectionColors.descriptionForeground} text-base md:text-xl mb-6`}>{text.description}</p>
                    <div className="flex flex-col lg:flex-row space-y-3 lg:space-y-0 lg:space-x-4 mb-6">
                        {CustomButton ? (
                            CustomButton
                        ) : text.ctaPrimaryText && (
                            <Link
                                href={text.ctaPrimaryUrl}
                                target={text.newTab ? "_blank" : "_self"}
                                className="bg-primary text-primary-foreground hover:bg-primary/90 px-6 py-3 rounded-md transition-colors flex items-center justify-center text-base md:text-lg font-semibold w-full lg:w-auto">
                                {text.ctaPrimaryText}
                            </Link>
                        )}
                        {text.ctaSecondaryText && (
                            <Link
                                href={text.ctaSecondaryUrl}
                                target={text.newTab ? "_blank" : "_self"}
                                className="bg-secondary text-secondary-foreground hover:bg-secondary/80 border-border px-6 py-3 rounded-md transition-colors flex items-center justify-center text-base md:text-lg font-semibold w-full lg:w-auto"
                            >
                                <span className="mr-2">{text.ctaSecondaryText}</span>
                                <svg className="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M5 12H19M19 12L12 5M19 12L12 19" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                                </svg>
                            </Link>
                        )}
                    </div>
                    <div className="border-t border-border pt-6">
                        <p className="text-sm text-muted-foreground mb-4 uppercase tracking-wider font-semibold">Follow us on:</p>
                        <div className="flex space-x-6">
                            <Instagram className="w-10 h-10 text-muted-foreground hover:text-primary" />
                            <Youtube className="w-10 h-10 text-muted-foreground hover:text-primary" />
                            <Facebook className="w-10 h-10 text-muted-foreground hover:text-primary" />
                            <Linkedin className="w-10 h-10 text-muted-foreground hover:text-primary" />
                        </div>
                    </div>
                </div>
                <HeroConcertClient carouselItems={carouselItems} />
            </div>
        </section>
    );
};

export default HeroConcert;