Refactor site header, heroes, and design system

app/[locale]/(site)/layout.tsx

@@ -2,10 +2,11 @@ import type { ReactNode } from "react";
 import { unstable_noStore as noStore } from "next/cache";
 import { redirect } from "next/navigation";
 
+import { SiteAmbientBackdrop } from "@/components/layout/site-ambient-backdrop";
 import { SiteFooter } from "@/components/layout/site-footer";
 import { SiteHeader } from "@/components/layout/site-header";
 import { isAdminAuthenticated } from "@/lib/admin-auth";
-import { getMaintenanceMode } from "@/lib/app-config";
+import { getMaintenanceMode, getSiteSettingsMediaBindings } from "@/lib/app-config";
 import { getLocalizedPath, resolveLocale } from "@/lib/locale";
 
 type SiteLayoutProps = {
@@ -22,7 +23,10 @@ export default async function SiteLayout({ children, params: { locale } }: SiteL
   noStore();
 
   const localeKey = resolveLocale(locale);
-  const maintenanceEnabled = await getMaintenanceMode();
+  const [maintenanceEnabled, mediaBindings] = await Promise.all([
+    getMaintenanceMode(),
+    getSiteSettingsMediaBindings(),
+  ]);
   const authenticated = isAdminAuthenticated();
 
   if (maintenanceEnabled && !authenticated) {
@@ -30,8 +34,13 @@ export default async function SiteLayout({ children, params: { locale } }: SiteL
   }
 
   return (
-    <div className="flex min-h-screen flex-col">
-      <SiteHeader isAdmin={authenticated} />
+    <div className="relative flex min-h-screen flex-col overflow-hidden">
+      <SiteAmbientBackdrop />
+      <SiteHeader
+        isAdmin={authenticated}
+        lightLogoUrl={mediaBindings.siteLogoLight?.url}
+        darkLogoUrl={mediaBindings.siteLogoDark?.url}
+      />
       <main className="flex-1">{children}</main>
       <SiteFooter isAdmin={authenticated} />
     </div>