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

// components/HeroSectionModern.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 HeroSectionModern: React.FC<HeroSectionProps> = ({
  title,
  subtitle,
  buttonText,
  buttonHref,
  imageUrl = "/hero-bg.jpg", // Default background image - MAKE SURE THIS EXISTS
}) => {
  return (
    // Use min-h-screen for full viewport height adjust if needed
    <section className="relative flex flex-col md:flex-row items-center bg-background min-h-[80vh] md:min-h-screen overflow-hidden">
      {/* Background Image/Video Layer */}
      <div className="absolute inset-0 z-0">
        {imageUrl && (
          <Image
            src={imageUrl}
            alt="OMS Hero background"
            layout="fill"
            objectFit="cover"
            quality={80} // Slightly higher quality
            priority
            // Add subtle zoom/pan animation on load (optional)
            className="animate-[scale_1.05s_ease-out_forwards]" // Requires scale keyframes in globals.css
          />
        )}
        {/* TODO: Add video support if needed */}

        {/* Gradient Overlay - Stronger on left, fades towards right */}
        {/* Adjust gradient stops and colors based on light/dark mode */}
        <div className="absolute inset-0 z-10 bg-gradient-to-r from-background via-background/70 to-background/10 dark:from-background dark:via-background/80 dark:to-background/20"></div>
      </div>

      {/* Content Area (Takes up roughly half on desktop) */}
      <div className="relative z-20 w-full md:w-1/2 lg:w-3/5 h-full flex items-center py-20 md:py-0">
        <div className="container mx-auto px-4 sm:px-6 lg:px-8 md:px-12 text-center md:text-left">
          {" "}
          {/* Container for padding */}
          {/* Title - Using Primary color */}
          <h1 className="text-4xl sm:text-5xl lg:text-6xl xl:text-7xl font-bold mb-5 md:mb-6 leading-tight text-primary animate-fade-in-up">
            {title}
          </h1>
          {/* Subtitle - Using Foreground color */}
          <p className="text-lg sm:text-xl lg:text-2xl max-w-xl mx-auto md:mx-0 mb-8 md:mb-10 text-foreground/90 dark:text-foreground/80 animate-fade-in-up animation-delay-300">
            {subtitle}
          </p>
          {/* Button */}
          <div className="animate-fade-in-up animation-delay-600">
            <Button
              href={buttonHref}
              variant="primary"
              size="lg"
              className="shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300" // Added hover effect
            >
              {buttonText} →
            </Button>
          </div>
        </div>
      </div>

      {/* Optional: Right side visual area (mostly shows background now) */}
      {/* You could add abstract shapes or other elements here if desired */}
      {/* <div className="hidden md:block md:w-1/2 lg:w-2/5 h-full"></div> */}
    </section>
  );
};

export default HeroSectionModern;