Merge branch 'homepage-refactoring-pt4' into 'dev'

Homepage refactoring pt4

See merge request rheinsw/website!31

components/Helper/SmallHero.tsx

@@ -1,38 +1,56 @@
-import React from "react";
+'use client';
+
+import React, {useContext} from "react";
+import {ThemeContext} from "@/components/provider/ThemeProvider";
+import {themeColors} from "@/components/Helper/ThemeColors";
+import {motion} from "framer-motion";
 
 type SmallHeroProps = {
     title: string;
     subtitle?: string;
-    backgroundImage?: string; // Optional background image
+    backgroundImage?: string;
+    blurBackground?: boolean;
 };
 
-const SmallHero = ({title, subtitle, backgroundImage}: SmallHeroProps) => {
+const SmallHero = ({title, subtitle, backgroundImage, blurBackground}: SmallHeroProps) => {
+    const {theme} = useContext(ThemeContext);
+    const colors = themeColors[theme];
+
+    const primaryTextColor = backgroundImage ? "#ffffff" : colors.primaryText;
+    const secondaryTextColor = backgroundImage ? "rgba(255, 255, 255, 0.8)" : "#6B7280"; // Tailwind gray-500
+
     return (
-        <div
-            className="w-full py-20 text-center flex flex-col items-center justify-center bg-cover bg-center"
-            style={{
-                backgroundColor: backgroundImage ? "transparent" : "var(--primary-bg)", // Fallback if no image
-                color: "var(--primary-text)",
-                backgroundImage: backgroundImage ? `url(${backgroundImage})` : "none",
-                backgroundSize: "cover",
-                backgroundPosition: "center",
-                backgroundBlendMode: "overlay",
-                transition: "background-color 0.4s ease-in-out, color 0.4s ease-in-out",
-            }}
-        >
-            <h1 className="text-3xl sm:text-4xl font-bold"
-                data-aos="fade-up"
-            >
-                {title}
-            </h1>
-            {subtitle &&
-                <p className="mt-2 text-lg text-[var(--secondary-text)]"
-                   data-aos="fade-up"
-                   data-aos-delay="200"
+        <div className="relative w-full py-36 overflow-hidden">
+            {backgroundImage && blurBackground && (
+                <div
+                    className="absolute inset-0 bg-cover bg-center blur-sm scale-[1.05] z-0 will-change-transform"
+                    style={{backgroundImage: `url(${backgroundImage})`}}
+                />
+            )}
+
+            {/* Text content */}
+            <div className="relative z-10 px-6 sm:px-12 max-w-5xl mx-auto">
+                <motion.h1
+                    className="text-3xl sm:text-4xl font-bold text-left"
+                    initial={{opacity: 0, y: 20}}
+                    animate={{opacity: 1, y: 0}}
+                    transition={{duration: 0.6}}
+                    style={{color: primaryTextColor}}
                 >
-                    {subtitle}
-                </p>
-            }
+                    {title}
+                </motion.h1>
+                {subtitle && (
+                    <motion.p
+                        className="mt-3 text-lg text-left"
+                        initial={{opacity: 0, y: 10}}
+                        animate={{opacity: 1, y: 0}}
+                        transition={{duration: 0.6, delay: 0.2}}
+                        style={{color: secondaryTextColor}}
+                    >
+                        {subtitle}
+                    </motion.p>
+                )}
+            </div>
         </div>
     );
 };