feature - added darkmode background

Frontend/components/Utilities/Background.tsx

@@ -1,6 +1,4 @@
 "use client";
-
-import colors, { hexToRgb } from "@/utils/colors";
 import { useTheme } from "next-themes";
 import React, { ReactNode, useEffect, useState } from "react";
 import Image from "next/image";
@@ -13,28 +11,13 @@ const Background = ({
   className?: string;
 }) => {
   const { theme } = useTheme();
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
-  if (!mounted) {
-    return (
-      <div
-        className={"h-full relative w-full bg-center bg-no-repeat bg-cover bg-fixed min-h-screen flex flex-col animation-pulse " + className}
-      ></div>
-    );
-  }
-
-  const backgroundColor = hexToRgb(colors[theme!]["neutral"]);
 
   return (
     <div
       className={"h-full relative w-full bg-center bg-no-repeat bg-cover bg-fixed  flex flex-col " + className}
     >
       <Image
-        src="/images/gradient.webp"
+        src={theme == "dark" ? "/images/dark-gradient.webp" : "/images/gradient.webp"}
         alt="background"
         layout="fill"
         objectFit="cover"

Frontend/sections/Hero/SquaredBackgroundHero.tsx

@@ -278,7 +278,7 @@ const SquaredBackgroundHero = () => {
                   src="/images/fastpocket-diagram_352x316.webp"
                   alt="Image Description"
                 />
-                <div className="absolute inset-0 -z-[1] bg-gradient-to-tr from-gray-200 via-white/0 to-white/0 size-full rounded-md mt-4 -mb-4 me-4 -ms-4 lg:mt-6 lg:-mb-6 lg:me-6 lg:-ms-6 dark:from-slate-800 dark:via-slate-900/0 dark:to-slate-900/0" />
+                <div className="absolute inset-0 -z-[1] size-full rounded-md mt-4 -mb-4 me-4 -ms-4 lg:mt-6 lg:-mb-6 lg:me-6 lg:-ms-6" />
               </div>
               {/* End Col */}
             </div>