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

// components/CallToActionSection.tsx
import React from "react";
import Button from "@/components/ui/Button";

type CallToActionSectionProps = {
  title: string;
  subtitle: string;
  buttonText: string;
  buttonHref: string;
};

const CallToActionSection: React.FC<CallToActionSectionProps> = ({
  title,
  subtitle,
  buttonText,
  buttonHref,
}) => {
  return (
    // Use primary background, primary-foreground for text
    <section className="bg-[linear-gradient(to_right,#e6cd4b,#fff8b3,#e0b843)] text-primary-foreground py-16 md:py-20">
      {" "}
      {/* Adjusted padding */}
      <div className="container mx-auto px-4 sm:px-6 lg:px-8 text-center">
        {" "}
        {/* Use container */}
        <h2 className="text-3xl md:text-4xl font-bold mb-4">{title}</h2>{" "}
        {/* Text color inherited */}
        <p className="text-lg mb-8 max-w-xl mx-auto opacity-90">
          {subtitle}
        </p>{" "}
        {/* Slightly less emphasis */}
        {/* Button needs contrast on primary bg. Use a secondary/outline/custom variant */}
        <Button href={buttonHref} variant="black" size="lg" >
          {/* Example: Using 'secondary' which uses light/dark gray bg defined in globals */}
          {/* OR custom class: className="bg-background text-foreground hover:bg-background/90" */}
          {buttonText}
        </Button>
      </div>
    </section>
  );
};

export default CallToActionSection;