feat: add dynamic site settings, hero media, admin panels, and database integration

components/Header.tsx

@@ -3,7 +3,7 @@
 import { useState, useEffect } from "react";
 import { Menu, X } from "lucide-react";
 
-export default function Header({ dict, lang }: { dict: any, lang: string }) {
+export default function Header({ dict, lang, dbSettings }: { dict: any, lang: string, dbSettings?: any }) {
   const [isScrolled, setIsScrolled] = useState(false);
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
 
@@ -31,9 +31,9 @@ export default function Header({ dict, lang }: { dict: any, lang: string }) {
       <div className="container mx-auto px-4 md:px-6 flex justify-between items-center">
         <a href="#" className="flex items-center">
           <img 
-            src="/logo.png" 
+            src={dbSettings?.logoUrl || "/logo.png"} 
             alt="Moy Beach Logo" 
-            className={`h-12 w-auto transition-all duration-300 ${!isScrolled ? "brightness-0 invert opacity-90" : ""}`} 
+            className={`h-12 w-auto transition-all duration-300 ${(!isScrolled && !dbSettings?.logoUrl) ? "brightness-0 invert opacity-90" : ""}`} 
           />
         </a>