oms-website-nextjs/app/(website)/_components/HeroSection.tsx

// components/HeroSection.tsx
import React from "react";
import Image from "next/image";
import Button from "@/components/ui/Button"; // Use the updated Button

type HeroSectionProps = {
  title: React.ReactNode; // Allow JSX like <br/>
  subtitle: string;
  buttonText: string;
  buttonHref: string;
  imageUrl?: string; // Optional image URL
  // videoUrl?: string; // Optional video URL
};

const HeroSection: React.FC<HeroSectionProps> = ({
  title,
  subtitle,
  buttonText,
  buttonHref,
  imageUrl = "/hero-bg-2.jpg", // Default background image
}) => {
  return (
    <section className="relative h-[70vh] md:h-[85vh] flex items-center justify-center text-center bg-gradient-to-b from-black/10 to-black/40 text-white overflow-hidden">
      {" "}
      {/* Adjusted background */}
      {/* Background Image/Video */}
      <div className="absolute inset-0 z-0 opacity-40 dark:opacity-30">
        {" "}
        {/* Adjusted opacity */}
        {imageUrl && (
          <Image
            src={imageUrl}
            alt="Hero background"
            layout="fill"
            objectFit="cover"
            quality={75}
            priority // Load hero image quickly
          />
        )}
        {/* TODO: Add video support if needed */}
      </div>
      {/* Overlay for better text contrast */}
      <div className="absolute inset-0 bg-black/60 z-10"></div>
      {/* Content */}
      <div className="relative z-20 container mx-auto px-4 sm:px-6 lg:px-8">
        {" "}
        {/* Use container */}
        <h1 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold mb-4 leading-tight text-primary animate-fade-in-up">
          {title}
        </h1>
        <p className="text-lg md:text-xl max-w-3xl mx-auto mb-8 text-gray-200 dark:text-gray-300 animate-fade-in-up animation-delay-300">
          {subtitle}
        </p>
        <Button
          href={buttonHref}
          variant="primary" // Use primary variant defined in Button component
          size="lg"
          className="animate-fade-in-up animation-delay-600"
        >
          {buttonText} → {/* Simple arrow */}
        </Button>
      </div>
    </section>
  );
};

export default HeroSection;