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

// components/HeroSectionDynamic.tsx
import React from "react";
import Image from "next/image";
import Button from "@/components/ui/Button"; // Use the updated Button
import { FiArrowRight } from "react-icons/fi";

type HeroSectionProps = {
  title: React.ReactNode; // Allow JSX like <br/>
  subtitle: string;
  buttonText: string;
  buttonHref: string;
  imageUrl?: string; // Main background visual
};

const HeroSectionDynamic: React.FC<HeroSectionProps> = ({
  title,
  subtitle,
  buttonText,
  buttonHref,
  imageUrl = "/hero-bg-2.jpg", // Ensure this high-quality image exists
}) => {
  return (
    <section className="relative flex items-center bg-background min-h-screen overflow-hidden">
      {/* Layer 1: Background Image/Gradient */}
      <div className="absolute inset-0 z-0">
        {imageUrl && (
          <Image
            src={imageUrl}
            alt="Innovative Technology Background"
            layout="fill"
            objectFit="cover"
            quality={85}
            priority
            className="opacity-40 dark:opacity-30" // Slightly dim the image
          />
        )}
        {/* Fallback gradient if no image */}
        {/* <div className="absolute inset-0 bg-gradient-to-br from-secondary via-background to-background"></div> */}
        {/* Subtle Vignette Effect */}
        <div className="absolute inset-0 z-10 bg-gradient-radial from-transparent via-transparent to-background/60 dark:to-background/80"></div>
      </div>

      {/* Layer 2: Floating Abstract Shapes (Subtle animation) */}
      {/* Shape 1 - Soft Primary Color Blob */}
      <div
        aria-hidden="true"
        className="absolute top-[10%] left-[5%] w-48 h-48 md:w-72 md:h-72 bg-primary/10 dark:bg-primary/15 rounded-full filter blur-3xl opacity-70 dark:opacity-50 animate-float animation-delay-300 z-10"
      ></div>
      {/* Shape 2 - Outline Shape */}
      <div
        aria-hidden="true"
        className="absolute bottom-[15%] right-[8%] w-40 h-40 md:w-56 md:h-56 border-2 border-primary/30 dark:border-primary/40 rounded-lg opacity-50 animate-drift z-10 transform rotate-12 hidden lg:block"
      ></div>
      {/* Shape 3 - Small Accent */}
      <div
        aria-hidden="true"
        className="absolute top-[25%] right-[15%] w-12 h-12 bg-secondary dark:bg-secondary/50 rounded-full opacity-60 animate-pulse-slow z-10 hidden md:block"
      ></div>

      {/* Layer 3: Content */}
      <div className="relative z-20 container mx-auto px-4 sm:px-6 lg:px-8 py-24 md:py-32">
        <div className="max-w-2xl lg:max-w-3xl text-center md:text-left">
          {" "}
          {/* Max width for content */}
          {/* Optional: Small "Eyebrow" text */}
          <p className="text-sm font-semibold uppercase tracking-wider text-primary mb-3 animate-fade-in-up">
            Owethu Managed Services
          </p>
          {/* Title - Larger, bolder */}
          <h1 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-extrabold mb-6 leading-tight text-foreground animate-fade-in-up animation-delay-300">
            {/* Example gradient text - remove class if not desired */}
            <span className="bg-gradient-to-r from-primary via-primary/80 to-foreground/80 dark:to-foreground/90 bg-clip-text text-transparent">
              {title}
            </span>
          </h1>
          {/* Subtitle - Clear foreground color */}
          <p className="text-lg md:text-xl lg:text-2xl max-w-xl text-foreground/80 dark:text-foreground/70 mb-10 animate-fade-in-up animation-delay-600">
            {subtitle}
          </p>
          {/* Button - Primary variant */}
          <div className="animate-fade-in-up animation-delay-900">
            <Button
              href={buttonHref}
              variant="primary"
              size="lg"
              className="group shadow-lg hover:shadow-primary/30 dark:hover:shadow-primary/20 transform transition-all duration-300 hover:scale-105" // Enhanced hover
            >
              {buttonText}
              <FiArrowRight className="ml-2 transition-transform duration-300 group-hover:translate-x-1" />
            </Button>
          </div>
        </div>
      </div>
    </section>
  );
};

export default HeroSectionDynamic;