feat: implement dynamic hero image and header updates

components/Header.tsx

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