feat: update side home landing

components/landing-page/search-section-polda.tsx

@@ -12,14 +12,26 @@ import EventCalender from "./event-calender";
 import UserSurveyBox from "./survey-box";
 import ScrollableContentPolda from "./scrollable-content-polda";
 import AdvertisementPlacements from "./advertisement-placements";
+import { useTheme } from "next-themes";
 
 const SearchSectionPolda = () => {
   const [contentType, setContentType] = useState("all");
   const [search, setSearch] = useState("");
   const router = useRouter();
   const t = useTranslations("LandingPage");
+  const { theme } = useTheme();
+  
+  // Determine background image based on theme
+  const getBackgroundImage = () => {
+    if (theme === "dark") {
+      return "url('/assets/background-dark.jpg')";
+    } else {
+      return "url('/assets/background-white.jpg')";
+    }
+  };
+
   return (
-    <div className="flex w-full min-h-screen bg-center bg-cover bg-no-repeat" style={{ backgroundImage: "url('/assets/background.png')" }}>
+    <div className="flex w-full min-h-screen bg-center bg-cover bg-no-repeat" style={{ backgroundImage: getBackgroundImage() }}>
       <div className="hidden xl:block w-[15%] pr-4 py-5 sticky top-[150px] space-y-4 self-start">
         <AdvertisementPlacements placement="left"/>
       </div>

components/landing-page/search-section-satker.tsx

@@ -13,14 +13,27 @@ import UserSurveyBox from "./survey-box";
 import ScrollableContentPolda from "./scrollable-content-polda";
 import ScrollableContentSatker from "./scrollable-content-satker";
 import AdvertisementPlacements from "./advertisement-placements";
+import { useTheme } from "next-themes";
 
 const SearchSectionSatker = () => {
   const [contentType, setContentType] = useState("all");
   const [search, setSearch] = useState("");
   const router = useRouter();
   const t = useTranslations("LandingPage");
+
+  const { theme } = useTheme();
+  
+  // Determine background image based on theme
+  const getBackgroundImage = () => {
+    if (theme === "dark") {
+      return "url('/assets/background-dark.jpg')";
+    } else {
+      return "url('/assets/background-white.jpg')";
+    }
+  };
+  
   return (
-    <div className="flex w-full min-h-screen bg-center bg-cover bg-no-repeat" style={{ backgroundImage: "url('/assets/background.png')" }}>
+    <div className="flex w-full min-h-screen bg-center bg-cover bg-no-repeat" style={{ backgroundImage: getBackgroundImage() }}>
       <div className="hidden xl:block w-[15%] pr-4 py-5 sticky top-[150px] space-y-4 self-start">
         <AdvertisementPlacements placement="left"/>
       </div>

components/landing-page/search-section.tsx

@@ -11,6 +11,7 @@ import { useTranslations } from "next-intl";
 import { useRouter } from "next/navigation";
 import router from "next/router";
 import React, { useState } from "react";
+import { useTheme } from "next-themes";
 import ScrollableContent from "./search-section-new";
 import NewContent from "./new-content";
 import ContentCategory from "./content-category";
@@ -24,10 +25,21 @@ const SearchSection = () => {
   const [search, setSearch] = useState("");
   const router = useRouter();
   const t = useTranslations("LandingPage");
+  const { theme } = useTheme();
+  
+  // Determine background image based on theme
+  const getBackgroundImage = () => {
+    if (theme === "dark") {
+      return "url('/assets/background-dark.jpg')";
+    } else {
+      return "url('/assets/background-white.jpg')";
+    }
+  };
+
   return (
     <div
       className="flex w-full min-h-screen bg-center bg-cover bg-no-repeat"
-      style={{ backgroundImage: "url('/assets/background.png')" }}
+      style={{ backgroundImage: getBackgroundImage() }}
     >
       <div className="hidden xl:block w-[15%] pr-4 py-5 sticky top-[130px] space-y-4 self-start">
         <AdvertisementPlacements placement="left"/>