Home page completed

2025-12-19 01:18:08 +00:00 · 2025-04-20 18:19:43 +02:00
parent 211cb3fc6f
commit 5eb60015cc
24 changed files with 1412 additions and 428 deletions
--- a/app/(website)/_components/HeroSectionModern.tsx
+++ b/app/(website)/_components/HeroSectionModern.tsx
@ -0,0 +1,80 @@
+// 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;