Home page completed

app/(website)/_components/HeroSection.tsx

@@ -0,0 +1,67 @@
+// 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.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;