Home page completed

app/(website)/_components/CallToActionSection.tsx

@@ -0,0 +1,43 @@
+// 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-primary 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="secondary" 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;