Migrate from old project

components/Helper/SmallHero.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+
+type SmallHeroProps = {
+    title: string;
+    subtitle?: string;
+    backgroundImage?: string; // Optional background image
+};
+
+const SmallHero = ({title, subtitle, backgroundImage}: SmallHeroProps) => {
+    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"
+                >
+                    {subtitle}
+                </p>
+            }
+        </div>
+    );
+};
+
+export default SmallHero;