Refactor admin preferences management to use global site preferences, update UI components for better user experience, and implement image selection for background settings.

components/HeroSection.tsx

@@ -1,13 +1,17 @@
 "use client";
 
+import { useBackgroundImage } from "@/hooks/usePreferences";
+
 export default function HeroSection() {
+  const backgroundImage = useBackgroundImage("home", "/got-2.jpg");
+
   return (
     <section className="relative w-full min-h-screen flex flex-col items-center justify-center overflow-hidden pt-24">
       {/* Background Image */}
       <div
         className="absolute inset-0 bg-cover bg-center bg-no-repeat"
         style={{
-          backgroundImage: `url('/got-2.jpg')`,
+          backgroundImage: `url('${backgroundImage}')`,
         }}
       >
         {/* Dark overlay for readability */}