feat: implement dynamic hero image and header updates

app/[lang]/page.tsx

@@ -13,19 +13,15 @@ export default async function Home({ params }: { params: Promise<{ lang: string
   const { lang } = await params;
   const dict = await getDictionary(lang);
   
-  const dbPhotos = await prisma.gallery.findMany({
-    orderBy: { createdAt: 'desc' }
-  });
+  const [dbPhotos, dbServices, heroMediaList, dbSettings] = await Promise.all([
+    prisma.gallery.findMany({ orderBy: { createdAt: 'desc' } }),
+    prisma.service.findMany({ orderBy: { createdAt: 'asc' } }),
+    prisma.heroMedia.findMany(),
+    prisma.siteSettings.findFirst()
+  ]);
 
-  const dbServices = await prisma.service.findMany({
-    orderBy: { createdAt: 'asc' }
-  });
-
-  const heroMediaList = await prisma.heroMedia.findMany();
   const dbHeroMedia = heroMediaList.length > 0 ? heroMediaList[0] : null;
 
-  const dbSettings = await prisma.siteSettings.findFirst();
-
   return (
     <main className="min-h-screen bg-brand-white">
       <Header dict={dict} lang={lang} dbSettings={dbSettings} />

app/admin/actions.ts

@@ -3,6 +3,7 @@
 import { prisma } from '@/lib/db';
 import { createSession, deleteSession } from '@/lib/auth';
 import bcrypt from 'bcryptjs';
+import { revalidatePath } from 'next/cache';
 
 // Auth Actions
 export async function login(formData: FormData) {
@@ -75,6 +76,7 @@ export async function updateHeroMedia(url: string, type: string) {
   await prisma.heroMedia.create({
     data: { url, type }
   });
+  revalidatePath('/', 'layout');
 }
 
 // Site Settings Actions

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>