Migrate from old project

components/Helper/SectionDivider.tsx

@@ -0,0 +1,24 @@
+
+export const SectionDivider1 = () => {
+
+    return (
+        <div
+            className="w-full h-20 transition-all duration-500 ease-in-out"
+            style={{
+                background: `linear-gradient(to bottom, var(--primary-bg), var(--secondary-bg))`
+            }}
+        />
+    );
+};
+
+export const SectionDivider2 = () => {
+
+    return (
+        <div
+            className="w-full h-20 transition-all duration-500 ease-in-out"
+            style={{
+                background: `linear-gradient(to bottom, var(--secondary-bg), var(--primary-bg))`
+            }}
+        />
+    );
+};

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;

components/Helper/Theme.ts

@@ -0,0 +1,18 @@
+"use server";
+
+import {cookies} from "next/headers";
+
+// ✅ Get theme from cookies OR detect system preference
+export async function getInitialTheme(): Promise<"dark" | "light"> {
+    const themeCookie = (await cookies()).get("theme")?.value;
+
+    if (themeCookie === "dark" || themeCookie === "light") {
+        return themeCookie;
+    }
+
+    // Detect system preference
+    const prefersDarkMode =
+        typeof window !== "undefined" && window.matchMedia("(prefers-color-scheme: dark)").matches;
+
+    return prefersDarkMode ? "dark" : "light";
+}

components/Helper/ThemeColors.ts

@@ -0,0 +1,28 @@
+export const themeColors: Record<
+    "light" | "dark",
+    {
+        primaryBg: string;
+        secondaryBg: string;
+        primaryText: string;
+        secondaryText: string;
+        inputFieldBg: string;
+        inputBorder: string;
+    }
+> = {
+    dark: {
+        primaryBg: "#121212",  // Dark gray/black background (closer to true dark mode)
+        secondaryBg: "#1e1e1e", // Slightly lighter gray for contrast
+        primaryText: "#e0e0e0", // Light gray for good readability
+        secondaryText: "#b0b0b0", // Muted gray for subtle contrast
+        inputFieldBg: "#252525", // Dark but slightly distinguishable from primaryBg
+        inputBorder: "#3a3a3a", // Slightly lighter gray for a soft contrast
+    },
+    light: {
+        primaryBg: "#f7f6fb",
+        secondaryBg: "#ffffff",
+        primaryText: "#1a1a2e",
+        secondaryText: "#4a4a4a", // Muted text color
+        inputFieldBg: "#ffffff", // White input field (same as secondaryBg)
+        inputBorder: "#dcdcdc", // Light gray border for subtle visibility
+    },
+};