Home page completed

2026-02-04 21:17:41 +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/HeroSectionDynamic.tsx
+++ b/app/(website)/_components/HeroSectionDynamic.tsx
@ -0,0 +1,98 @@
+// 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.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;