Merge branch 'homepage-refactoring' into 'dev'

Homepage Refactoring - Pt .3

See merge request rheinsw/website!28

components/Helper/SectionDivider.tsx

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

components/Helper/Theme.ts

@@ -1,18 +0,0 @@
-"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

@@ -3,26 +3,32 @@ export const themeColors: Record<
     {
         primaryBg: string;
         secondaryBg: string;
+        navBg: string;
+        footerBg: 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
+        primaryBg: "#F3F4F6",
+        secondaryBg: "#eff1f3",
+        navBg: "#F9FAFB",
+        footerBg: "#E5E7EB",
+        primaryText: "#1E293B",
+        secondaryText: "#475569",
+        inputFieldBg: "#ffffff",
+        inputBorder: "#cbd5e1",
+    },
+    dark: {
+        primaryBg: "#1A1A23",
+        secondaryBg: "#22222C",
+        navBg: "#2A2A35",
+        footerBg: "#1F1F29",
+        primaryText: "#F0F0F3",
+        secondaryText: "#C0C2CC",
+        inputFieldBg: "#2D2D38",
+        inputBorder: "#4B4B5A",
     },
 };