Modernize guest PWA header and homepage

resources/js/guest/components/Header.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { createPortal } from 'react-dom';
-import { Link, useLocation } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import AppearanceToggleDropdown from '@/components/appearance-dropdown';
 import {
   User,
@@ -22,13 +22,12 @@ import {
 } from 'lucide-react';
 import { useEventData } from '../hooks/useEventData';
 import { useOptionalEventStats } from '../context/EventStatsContext';
-import { useOptionalGuestIdentity } from '../context/GuestIdentityContext';
 import { SettingsSheet } from './settings-sheet';
 import { useTranslation, type TranslateFn } from '../i18n/useTranslation';
 import { DEFAULT_EVENT_BRANDING, useOptionalEventBranding } from '../context/EventBrandingContext';
 import { useOptionalNotificationCenter, type NotificationCenterValue } from '../context/NotificationCenterContext';
 import { usePushSubscription } from '../hooks/usePushSubscription';
-import { getContrastingTextColor, relativeLuminance } from '../lib/color';
+import { getContrastingTextColor, relativeLuminance, hexToRgb } from '../lib/color';
 import { isTaskModeEnabled } from '../lib/engagement';
 
 const EVENT_ICON_COMPONENTS: Record<string, React.ComponentType<{ className?: string }>> = {
@@ -81,6 +80,14 @@ function getInitials(name: string): string {
   return name.substring(0, 2).toUpperCase();
 }
 
+function toRgba(value: string, alpha: number): string {
+  const rgb = hexToRgb(value);
+  if (!rgb) {
+    return `rgba(255, 255, 255, ${alpha})`;
+  }
+  return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha})`;
+}
+
 function EventAvatar({
   name,
   icon,
@@ -167,9 +174,7 @@ function EventAvatar({
 }
 
 export default function Header({ eventToken, title = '' }: { eventToken?: string; title?: string }) {
-  const location = useLocation();
   const statsContext = useOptionalEventStats();
-  const identity = useOptionalGuestIdentity();
   const { t } = useTranslation();
   const brandingContext = useOptionalEventBranding();
   const branding = brandingContext?.branding ?? DEFAULT_EVENT_BRANDING;
@@ -206,23 +211,6 @@ export default function Header({ eventToken, title = '' }: { eventToken?: string
     return () => document.removeEventListener('mousedown', handler);
   }, [notificationsOpen]);
 
-  if (!eventToken) {
-    return (
-      <div
-        className="guest-header z-20 flex items-center justify-between border-b bg-white/70 px-4 py-2 dark:bg-black/40"
-        style={branding.fontFamily ? { fontFamily: branding.fontFamily } : undefined}
-      >
-        <div className="flex flex-col">
-          <div className="font-semibold">{title}</div>
-        </div>
-        <div className="flex items-center gap-2">
-          <AppearanceToggleDropdown />
-          <SettingsSheet />
-        </div>
-      </div>
-    );
-  }
-
   const headerFont = branding.typography?.heading ?? branding.fontFamily ?? undefined;
   const bodyFont = branding.typography?.body ?? branding.fontFamily ?? undefined;
   const logoPosition = branding.logo?.position ?? 'left';
@@ -231,16 +219,48 @@ export default function Header({ eventToken, title = '' }: { eventToken?: string
     color: headerTextColor,
     fontFamily: headerFont,
   };
+  const headerGlowPrimary = toRgba(branding.primaryColor, 0.35);
+  const headerGlowSecondary = toRgba(branding.secondaryColor, 0.35);
+  const headerShimmer = `linear-gradient(120deg, ${toRgba(branding.primaryColor, 0.28)}, transparent 45%, ${toRgba(branding.secondaryColor, 0.32)})`;
+  const headerHairline = `linear-gradient(90deg, transparent, ${toRgba(headerTextColor, 0.4)}, transparent)`;
+
+  if (!eventToken) {
+    return (
+      <div
+        className="guest-header sticky top-0 z-30 relative overflow-hidden border-b border-white/20 bg-white/70 px-4 py-2 shadow-[0_14px_40px_-30px_rgba(15,23,42,0.6)] backdrop-blur-2xl dark:border-white/10 dark:bg-black/40"
+        style={branding.fontFamily ? { fontFamily: branding.fontFamily } : undefined}
+      >
+        <div className="pointer-events-none absolute inset-0 opacity-70 guest-aurora-soft" style={{ backgroundImage: headerShimmer }} aria-hidden />
+        <div className="pointer-events-none absolute -top-8 right-0 h-24 w-24 rounded-full bg-white/60 blur-3xl dark:bg-white/10" aria-hidden />
+        <div className="pointer-events-none absolute inset-x-0 bottom-0 h-px bg-gradient-to-r from-transparent via-white/40 to-transparent dark:via-white/15" aria-hidden />
+        <div className="relative z-10 flex w-full items-center gap-3 flex-nowrap">
+          <div className="flex min-w-0 flex-col">
+            <div className="font-semibold">{title}</div>
+          </div>
+          <div className="ml-auto flex items-center justify-end gap-2">
+            <AppearanceToggleDropdown />
+            <SettingsSheet />
+          </div>
+        </div>
+      </div>
+    );
+  }
 
   const accentColor = branding.secondaryColor;
 
   if (status === 'loading') {
     return (
-      <div className="guest-header z-20 flex items-center justify-between border-b border-white/10 px-4 py-2 text-white shadow-sm backdrop-blur" style={headerStyle}>
-        <div className="font-semibold" style={branding.fontFamily ? { fontFamily: branding.fontFamily } : undefined}>{t('header.loading')}</div>
-        <div className="flex items-center gap-2">
-          <AppearanceToggleDropdown />
-          <SettingsSheet />
+      <div className="guest-header sticky top-0 z-30 relative overflow-hidden border-b border-white/20 px-4 py-2 shadow-[0_18px_45px_-30px_rgba(15,23,42,0.65)] backdrop-blur-2xl" style={headerStyle}>
+        <div className="pointer-events-none absolute inset-0 opacity-70 guest-aurora" style={{ backgroundImage: headerShimmer }} aria-hidden />
+        <div className="pointer-events-none absolute -top-10 right-[-32px] h-28 w-28 rounded-full blur-3xl" style={{ background: headerGlowSecondary }} aria-hidden />
+        <div className="pointer-events-none absolute -bottom-8 left-1/3 h-20 w-40 -translate-x-1/2 rounded-full blur-3xl" style={{ background: headerGlowPrimary }} aria-hidden />
+        <div className="pointer-events-none absolute inset-x-0 bottom-0 h-px" style={{ background: headerHairline }} aria-hidden />
+        <div className="relative z-10 flex w-full items-center gap-3 flex-nowrap">
+          <div className="font-semibold" style={branding.fontFamily ? { fontFamily: branding.fontFamily } : undefined}>{t('header.loading')}</div>
+          <div className="ml-auto flex items-center justify-end gap-2">
+            <AppearanceToggleDropdown />
+            <SettingsSheet />
+          </div>
         </div>
       </div>
     );
@@ -254,16 +274,20 @@ export default function Header({ eventToken, title = '' }: { eventToken?: string
     statsContext && statsContext.eventKey === eventToken ? statsContext : undefined;
   return (
     <div
-      className="guest-header z-20 flex items-center justify-between border-b border-white/10 px-4 py-3 text-white shadow-sm backdrop-blur"
+      className="guest-header sticky top-0 z-30 relative flex flex-nowrap items-center gap-3 overflow-hidden border-b border-white/20 px-4 py-2 shadow-[0_18px_45px_-30px_rgba(15,23,42,0.65)] backdrop-blur-2xl"
       style={headerStyle}
     >
+      <div className="pointer-events-none absolute inset-0 opacity-70 guest-aurora" style={{ backgroundImage: headerShimmer }} aria-hidden />
+      <div className="pointer-events-none absolute -top-12 right-[-40px] h-32 w-32 rounded-full blur-3xl" style={{ background: headerGlowSecondary }} aria-hidden />
+      <div className="pointer-events-none absolute -bottom-10 left-1/3 h-24 w-44 -translate-x-1/2 rounded-full blur-3xl" style={{ background: headerGlowPrimary }} aria-hidden />
+      <div className="pointer-events-none absolute inset-x-0 bottom-0 h-px" style={{ background: headerHairline }} aria-hidden />
       <div
         className={
-          logoPosition === 'center'
-            ? 'flex flex-col items-center gap-2 text-center'
+          `relative z-10 flex min-w-0 flex-1 ${logoPosition === 'center'
+            ? 'flex-col items-center gap-1 text-center'
             : logoPosition === 'right'
-              ? 'flex flex-row-reverse items-center gap-3'
-              : 'flex items-center gap-3'
+              ? 'flex-row-reverse items-center gap-3'
+              : 'items-center gap-3'}`
         }
       >
         <EventAvatar
@@ -277,7 +301,7 @@ export default function Header({ eventToken, title = '' }: { eventToken?: string
           className={`flex flex-col${logoPosition === 'center' ? ' items-center text-center' : ''}`}
           style={headerFont ? { fontFamily: headerFont } : undefined}
         >
-          <div className="font-semibold text-lg">{event.name}</div>
+          <div className="truncate text-base font-semibold sm:text-lg">{event.name}</div>
           <div className="flex items-center gap-2 text-xs opacity-70" style={bodyFont ? { fontFamily: bodyFont } : undefined}>
             {stats && tasksEnabled && (
               <>
@@ -295,7 +319,7 @@ export default function Header({ eventToken, title = '' }: { eventToken?: string
           </div>
         </div>
       </div>
-      <div className="flex items-center gap-2">
+      <div className="relative z-10 ml-auto flex shrink-0 items-center justify-end gap-2">
         {notificationCenter && eventToken && (
           <NotificationButton
             eventToken={eventToken}