Modernize guest PWA header and homepage

resources/js/guest/components/GalleryPreview.tsx

@@ -8,6 +8,7 @@ import { Heart } from 'lucide-react';
 import { useTranslation } from '../i18n/useTranslation';
 import { useEventBranding } from '../context/EventBrandingContext';
 import { cn } from '@/lib/utils';
+import { motion } from 'framer-motion';
 
 type Props = { token: string };
 
@@ -97,14 +98,16 @@ export default function GalleryPreview({ token }: Props) {
       style={{ borderRadius: radius, fontFamily: bodyFont }}
     >
       <CardContent className="space-y-3 p-3">
-        <div className="flex items-center justify-between">
+        <div className="flex items-center justify-between gap-3">
           <div>
-            <p className="text-xs uppercase tracking-wide text-muted-foreground" style={headingFont ? { fontFamily: headingFont } : undefined}>Live-Galerie</p>
+            <div className="mb-1 inline-flex items-center rounded-full border border-white/50 bg-white/80 px-3 py-1 text-[10px] font-semibold uppercase tracking-[0.3em] text-muted-foreground shadow-sm backdrop-blur dark:border-white/10 dark:bg-slate-950/70" style={headingFont ? { fontFamily: headingFont } : undefined}>
+              Live-Galerie
+            </div>
             <h3 className="text-lg font-semibold text-foreground" style={headingFont ? { fontFamily: headingFont } : undefined}>Alle Uploads auf einen Blick</h3>
           </div>
           <Link
             to={`/e/${encodeURIComponent(token)}/gallery?mode=${mode}`}
-            className="text-sm font-semibold transition"
+            className="rounded-full border border-white/40 bg-white/70 px-3 py-1 text-sm font-semibold shadow-sm backdrop-blur transition hover:bg-white/90 dark:border-white/10 dark:bg-slate-950/70 dark:hover:bg-slate-950"
             style={{ color: linkColor }}
           >
             Alle ansehen →
@@ -112,28 +115,31 @@ export default function GalleryPreview({ token }: Props) {
         </div>
 
         <div className="flex overflow-x-auto pb-1 text-xs font-semibold [-ms-overflow-style:none] [scrollbar-width:none]">
-          <div className="inline-flex items-center rounded-full border border-border/70 bg-white/80 p-1 shadow-sm backdrop-blur dark:border-white/10 dark:bg-slate-950/70">
-            {filters.map((filter, index) => {
+          <div className="inline-flex items-center gap-1 rounded-full border border-border/70 bg-white/80 p-1 shadow-sm backdrop-blur dark:border-white/10 dark:bg-slate-950/70">
+            {filters.map((filter) => {
               const isActive = mode === filter.value;
 
               return (
-                <div key={filter.value} className="flex items-center">
-                  <button
-                    type="button"
-                    onClick={() => setMode(filter.value)}
-                    className={cn(
-                      'inline-flex items-center rounded-full px-3 py-1.5 transition',
-                      isActive
-                        ? 'bg-pink-500 text-white shadow'
-                        : 'text-muted-foreground hover:bg-pink-50 hover:text-pink-600 dark:text-white/70 dark:hover:bg-white/10 dark:hover:text-white',
-                    )}
-                  >
-                    <span className="whitespace-nowrap">{filter.label}</span>
-                  </button>
-                  {index < filters.length - 1 && (
-                    <span className="mx-1 h-4 w-px bg-border/60 dark:bg-white/10" aria-hidden />
+                <button
+                  key={filter.value}
+                  type="button"
+                  onClick={() => setMode(filter.value)}
+                  className={cn(
+                    'relative inline-flex items-center rounded-full px-3 py-1.5 transition',
+                    isActive
+                      ? 'text-white'
+                      : 'text-muted-foreground hover:text-pink-600 dark:text-white/70 dark:hover:text-white',
                   )}
-                </div>
+                >
+                  {isActive && (
+                    <motion.span
+                      layoutId="gallery-filter-pill"
+                      className="absolute inset-0 rounded-full bg-gradient-to-r from-pink-500 to-rose-500 shadow"
+                      transition={{ type: 'spring', stiffness: 380, damping: 30 }}
+                    />
+                  )}
+                  <span className="relative z-10 whitespace-nowrap">{filter.label}</span>
+                </button>
               );
             })}
           </div>