enhancements of the homepage in the guest pwa

resources/js/guest/pages/HomePage.tsx

@@ -12,6 +12,8 @@ import { Sparkles, UploadCloud, X, RefreshCw } from 'lucide-react';
 import { useTranslation, type TranslateFn } from '../i18n/useTranslation';
 import { useEventBranding } from '../context/EventBrandingContext';
 import type { EventBranding } from '../types/event-branding';
+import { animated, useSpring } from '@react-spring/web';
+import { useGesture } from '@use-gesture/react';
 
 export default function HomePage() {
   const { token } = useParams<{ token: string }>();
@@ -25,17 +27,7 @@ export default function HomePage() {
   const radius = branding.buttons?.radius ?? 12;
 
   const heroStorageKey = token ? `guestHeroDismissed_${token}` : 'guestHeroDismissed';
-  const [heroVisible, setHeroVisible] = React.useState(() => {
-    if (typeof window === 'undefined') {
-      return true;
-    }
-
-    try {
-      return window.sessionStorage.getItem(heroStorageKey) !== '1';
-    } catch {
-      return true;
-    }
-  });
+  const [heroVisible, setHeroVisible] = React.useState(false);
 
   React.useEffect(() => {
     if (typeof window === 'undefined') {
@@ -43,9 +35,11 @@ export default function HomePage() {
     }
 
     try {
-      setHeroVisible(window.sessionStorage.getItem(heroStorageKey) !== '1');
+      const stored = window.sessionStorage.getItem(heroStorageKey);
+      // standardmäßig versteckt, nur sichtbar falls explizit gesetzt (kann später wieder aktiviert werden)
+      setHeroVisible(stored === 'show');
     } catch {
-      setHeroVisible(true);
+      setHeroVisible(false);
     }
   }, [heroStorageKey]);
 
@@ -67,20 +61,37 @@ export default function HomePage() {
   const accentColor = branding.primaryColor;
   const secondaryAccent = branding.secondaryColor;
 
-  const [missionPreview, setMissionPreview] = React.useState<MissionPreview | null>(null);
+  const [missionDeck, setMissionDeck] = React.useState<MissionPreview[]>([]);
   const [missionLoading, setMissionLoading] = React.useState(false);
   const missionPoolRef = React.useRef<MissionPreview[]>([]);
 
-  const shuffleMissionPreview = React.useCallback(() => {
+  const drawRandom = React.useCallback((excludeIds: Set<number>) => {
+    const pool = missionPoolRef.current.filter((item) => !excludeIds.has(item.id));
+    if (!pool.length) return null;
+    return pool[Math.floor(Math.random() * pool.length)];
+  }, []);
+
+  const resetDeck = React.useCallback(() => {
     const pool = missionPoolRef.current;
     if (!pool.length) {
-      setMissionPreview(null);
+      setMissionDeck([]);
       return;
     }
-    const choice = pool[Math.floor(Math.random() * pool.length)];
-    setMissionPreview(choice);
+    const shuffled = [...pool].sort(() => Math.random() - 0.5);
+    setMissionDeck(shuffled.slice(0, 4));
   }, []);
 
+  const advanceDeck = React.useCallback(() => {
+    setMissionDeck((prev) => {
+      if (!prev.length) return prev;
+      const [, ...rest] = prev;
+      const exclude = new Set(rest.map((r) => r.id));
+      const nextCandidate = drawRandom(exclude);
+      const replenished = nextCandidate ? [...rest, nextCandidate] : rest;
+      return replenished;
+    });
+  }, [drawRandom]);
+
   React.useEffect(() => {
     if (!token) return;
     let cancelled = false;
@@ -108,16 +119,16 @@ export default function HomePage() {
             duration: typeof task.duration === 'number' ? task.duration : 3,
             emotion: task.emotion ?? null,
           }));
-          shuffleMissionPreview();
+          resetDeck();
         } else {
           missionPoolRef.current = [];
-          setMissionPreview(null);
+          setMissionDeck([]);
         }
       } catch (err) {
         if (!cancelled) {
           console.warn('Mission preview failed', err);
           missionPoolRef.current = [];
-          setMissionPreview(null);
+          setMissionDeck([]);
         }
       } finally {
         if (!cancelled) {
@@ -129,14 +140,35 @@ export default function HomePage() {
     return () => {
       cancelled = true;
     };
-  }, [shuffleMissionPreview, token, locale]);
+  }, [resetDeck, token, locale]);
 
   if (!token) {
     return null;
   }
 
+  const introArray: string[] = [];
+  for (let i = 0; i < 12; i += 1) {
+    const candidate = t(`home.introRotating.${i}`, '');
+    if (candidate) {
+      introArray.push(candidate);
+    }
+  }
+  const introMessage =
+    introArray.length > 0 ? introArray[Math.floor(Math.random() * introArray.length)] : '';
+
   return (
-    <div className="space-y-6 pb-32" style={bodyFont ? { fontFamily: bodyFont } : undefined}>
+    <div className="space-y-0.5 pb-24" style={bodyFont ? { fontFamily: bodyFont } : undefined}>
+      <section className="space-y-1 px-4">
+        <p className="text-sm font-semibold text-foreground">
+          {t('home.welcomeLine').replace('{name}', displayName)}
+        </p>
+        {introMessage && (
+          <p className="text-xs text-muted-foreground">
+            {introMessage}
+          </p>
+        )}
+      </section>
+
       {heroVisible && (
         <HeroCard
           name={displayName}
@@ -150,23 +182,17 @@ export default function HomePage() {
         />
       )}
 
-      <section className="space-y-4" style={headingFont ? { fontFamily: headingFont } : undefined}>
-        <div className="flex items-center justify-between gap-3">
-          <div>
-            <h2 className="text-base font-semibold text-foreground">Starte dein Fotospiel</h2>
-            <p className="text-xs text-muted-foreground">Wähle, wie du den nächsten Moment einfängst.</p>
-          </div>
-        </div>
-
-        <div className="space-y-3">
+      <section className="space-y-0.5" style={headingFont ? { fontFamily: headingFont } : undefined}>
+        <div className="space-y-0.5">
           <MissionActionCard
             token={token}
-            mission={missionPreview}
+            mission={missionDeck[0] ?? null}
             loading={missionLoading}
-            onShuffle={shuffleMissionPreview}
+            onAdvance={advanceDeck}
+            stack={missionDeck.slice(0, 3)}
           />
-          <EmotionActionCard />
           <UploadActionCard token={token} accentColor={accentColor} secondaryAccent={secondaryAccent} radius={radius} bodyFont={bodyFont} />
+          <EmotionActionCard />
         </div>
       </section>
 
@@ -254,58 +280,233 @@ function MissionActionCard({
   token,
   mission,
   loading,
-  onShuffle,
+  onAdvance,
+  stack,
 }: {
   token: string;
   mission: MissionPreview | null;
   loading: boolean;
-  onShuffle: () => void;
+  onAdvance: () => void;
+  stack: MissionPreview[];
 }) {
+  const { branding } = useEventBranding();
+  const radius = branding.buttons?.radius ?? 12;
+  const primary = branding.buttons?.primary ?? branding.primaryColor;
+  const secondary = branding.buttons?.secondary ?? branding.secondaryColor;
+  const buttonStyle = branding.buttons?.style ?? 'filled';
+  const headingFont = branding.typography?.heading ?? branding.fontFamily ?? undefined;
+  const bodyFont = branding.typography?.body ?? branding.fontFamily ?? undefined;
+  const textColor = '#1f2937';
+  const subTextColor = '#334155';
+  const swipeThreshold = 120;
+  const stackLayers = stack.slice(1, 4);
+
+  const cardStyle: React.CSSProperties = {
+    borderRadius: `${radius + 8}px`,
+    backgroundColor: '#fcf7ef',
+    backgroundImage: `linear-gradient(0deg, ${primary}33, ${primary}22), url(/patterns/rays-sunburst.svg)`,
+    backgroundBlendMode: 'multiply, normal',
+    backgroundSize: '330% 330%',
+    backgroundPosition: 'center',
+    backgroundRepeat: 'no-repeat',
+    filter: 'contrast(1.12) saturate(1.1)',
+    border: `1px solid ${primary}26`,
+    boxShadow: `0 12px 28px ${primary}22, 0 2px 6px ${primary}1f`,
+    fontFamily: bodyFont,
+    position: 'relative',
+    overflow: 'hidden',
+  };
+
+  const [{ x, y, rotateZ, rotateY, rotateX, scale, opacity }, api] = useSpring(() => ({
+    x: 0,
+    y: 0,
+    rotateZ: 0,
+    rotateY: 0,
+    rotateX: 0,
+    scale: 1,
+    opacity: 1,
+    config: { tension: 320, friction: 26 },
+  }));
+
+  React.useEffect(() => {
+    api.start({ x: 0, y: 0, rotateZ: 0, rotateY: 0, rotateX: 0, scale: 1, opacity: 1, immediate: false });
+  }, [mission?.id, api]);
+
+  const bind = useGesture(
+    {
+      onDrag: ({ active, movement: [mx, my], velocity: [vx], direction: [dx], cancel }) => {
+        if (active && Math.abs(mx) > swipeThreshold) {
+          cancel?.();
+          api.start({
+            x: dx > 0 ? 520 : -520,
+            y: my,
+            rotateZ: dx > 0 ? 12 : -12,
+            rotateY: dx > 0 ? 18 : -18,
+            rotateX: -my / 10,
+            opacity: 0,
+            scale: 1,
+            immediate: false,
+            onRest: () => {
+              onAdvance();
+              api.start({ x: 0, y: 0, rotateZ: 0, rotateY: 0, rotateX: 0, opacity: 1, scale: 1, immediate: false });
+            },
+          });
+          return;
+        }
+
+        api.start({
+          x: mx,
+          y: my,
+          rotateZ: mx / 18,
+          rotateY: mx / 28,
+          rotateX: -my / 36,
+          scale: active ? 1.02 : 1,
+          opacity: 1,
+          immediate: false,
+        });
+      },
+      onDragEnd: () => {
+        api.start({ x: 0, y: 0, rotateZ: 0, rotateY: 0, rotateX: 0, scale: 1, opacity: 1, immediate: false });
+      },
+    },
+    {
+      drag: {
+        filterTaps: true,
+        bounds: { left: -200, right: 200, top: -120, bottom: 120 },
+        rubberband: true,
+      },
+    }
+  );
+
   return (
-    <Card className="border-0 shadow-sm">
-      <CardHeader className="flex flex-row items-start gap-3">
-        <div className="flex h-10 w-10 items-center justify-center rounded-2xl bg-pink-100 text-pink-600">
-          <Sparkles className="h-5 w-5" aria-hidden />
-        </div>
-        <div>
-          <CardTitle className="text-base font-semibold text-foreground">Mission starten</CardTitle>
-          <CardDescription className="text-xs text-muted-foreground">
-            Wir haben bereits eine Aufgabe für dich vorbereitet. Tippe, um direkt loszulegen.
-          </CardDescription>
-        </div>
-      </CardHeader>
-      <CardContent className="space-y-3">
-        {mission ? (
-          <>
-            <p className="text-lg font-semibold text-foreground">{mission.title}</p>
-            {mission.description && (
-              <p className="text-sm text-muted-foreground line-clamp-2">{mission.description}</p>
-            )}
-            <div className="flex gap-3 text-xs text-muted-foreground">
-              <span>{mission.duration ?? 3} Min</span>
-              {mission.emotion?.name && <span>{mission.emotion.name}</span>}
-            </div>
-          </>
-        ) : (
-          <p className="text-sm text-muted-foreground">
-            Ziehe deine erste Mission im Aufgaben-Tab oder lade deine Stimmung hoch.
-          </p>
-        )}
-        <div className="flex flex-col gap-2 sm:flex-row">
-          <Button asChild className="flex-1">
-            <Link to={`/e/${encodeURIComponent(token)}/tasks`}>Mission starten</Link>
-          </Button>
-          <Button
-            type="button"
-            variant="ghost"
-            className="flex-1"
-            onClick={onShuffle}
-            disabled={loading}
+    <Card className="border-0 shadow-none bg-transparent" style={{ fontFamily: bodyFont }}>
+      <CardContent className="px-0 py-0">
+        <div className="relative min-h-[280px]">
+          {stackLayers.map((item, index) => {
+            const depth = index + 1;
+            const scaleDown = 1 - depth * 0.03;
+            const translateY = depth * 12;
+            const fade = Math.max(0.25, 0.55 - depth * 0.08);
+            return (
+              <div
+                key={item.id ?? index}
+                className="absolute inset-0 pointer-events-none"
+                style={{
+                  ...cardStyle,
+                  transform: `translateY(${translateY}px) scale(${scaleDown})`,
+                  opacity: fade,
+                  filter: 'brightness(0.96) contrast(0.98)',
+                }}
+                aria-hidden
+              />
+            );
+          })}
+          <animated.div
+            className="relative overflow-hidden touch-pan-y"
+            style={{
+              ...cardStyle,
+              x,
+              y,
+              rotateZ,
+              rotateY,
+              rotateX,
+              scale,
+              opacity,
+              transformOrigin: 'center center',
+              willChange: 'transform',
+            }}
+            {...bind()}
           >
-            <RefreshCw className={`mr-2 h-4 w-4 ${loading ? 'animate-spin' : ''}`} aria-hidden />
-            Andere Mission
-          </Button>
-        </div>
+            <div
+              className="absolute inset-x-0 top-0 h-12"
+              style={{
+                background: `linear-gradient(90deg, ${secondary}80, ${primary}cc)`,
+                filter: 'saturate(1.05)',
+            }}
+            aria-hidden
+          />
+          <div className="relative z-10 flex flex-col gap-3 px-5 pb-4 pt-1">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-3">
+                <div
+                  className="flex h-11 w-11 items-center justify-center rounded-2xl bg-white/90 text-foreground shadow-sm"
+                  style={{ borderRadius: `${radius - 2}px` }}
+                >
+                  <Sparkles className="h-5 w-5" aria-hidden />
+                </div>
+                <div>
+                  <p
+                    className="text-xs font-semibold uppercase tracking-wide"
+                    style={{ ...(headingFont ? { fontFamily: headingFont } : {}), color: subTextColor }}
+                  >
+                    Fotoaufgabe
+                  </p>
+                  <p className="text-sm" style={{ color: subTextColor }}>
+                    Wir haben schon etwas für dich vorbereitet.
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            {mission ? (
+              <div className="space-y-2">
+                <div
+                  className="rounded-[14px] py-3 text-center"
+                  style={{
+                    background: 'rgba(255,255,255,0.6)',
+                    paddingLeft: '30px',
+                    paddingRight: '30px',
+                  }}
+                >
+                  <p
+                    className="text-lg font-semibold leading-snug"
+                    style={{ ...(headingFont ? { fontFamily: headingFont } : {}), color: textColor }}
+                  >
+                    {mission.title}
+                  </p>
+                  {mission.description && (
+                    <p className="text-sm leading-relaxed" style={{ color: subTextColor }}>
+                      {mission.description}
+                    </p>
+                  )}
+                </div>
+              </div>
+            ) : (
+              <p className="text-sm text-center" style={{ color: subTextColor }}>
+                Ziehe deine erste Mission im Aufgaben-Tab oder wähle eine Stimmung.
+              </p>
+            )}
+
+            <div className="grid grid-cols-[2fr_1fr] gap-2 pt-1">
+              <Button asChild className="w-full" style={{ borderRadius: `${radius}px` }}>
+                <Link
+                  to={
+                    mission
+                      ? `/e/${encodeURIComponent(token)}/upload?task=${mission.id}`
+                      : `/e/${encodeURIComponent(token)}/tasks`
+                  }
+                >
+                  Aufgabe starten
+                </Link>
+              </Button>
+              <Button
+                type="button"
+                variant="secondary"
+                className="w-full"
+                onClick={onShuffle}
+                disabled={loading}
+                style={{
+                  borderRadius: `${radius}px`,
+                  backgroundColor: secondary,
+                  color: '#ffffff',
+                }}
+              >
+                <RefreshCw className={`mr-2 h-4 w-4 ${loading ? 'animate-spin' : ''}`} aria-hidden />
+                Andere Aufgabe
+              </Button>
+            </div>
+          </div>
+        </animated.div>
       </CardContent>
     </Card>
   );
@@ -314,13 +515,13 @@ function MissionActionCard({
 function EmotionActionCard() {
   return (
     <Card className="border border-muted/40 shadow-sm">
-      <CardHeader>
-        <CardTitle>Foto nach Gefühlslage</CardTitle>
+      <CardHeader className="py-[4px]">
+        <CardTitle>Wähle eine Stimmung und erhalte eine passende Aufgabe</CardTitle>
         <CardDescription className="text-sm text-muted-foreground">
-          Wähle deine Stimmung, wir schlagen dir passende Missionen vor.
+          Tippe deinen Mood, wir picken die nächste Mission für dich.
         </CardDescription>
       </CardHeader>
-      <CardContent>
+      <CardContent className="py-[4px]">
         <EmotionPicker variant="embedded" showSkip={false} />
       </CardContent>
     </Card>
@@ -342,30 +543,35 @@ function UploadActionCard({
 }) {
   return (
     <Card
-      className="overflow-hidden border-0 text-white shadow-sm"
+      className="overflow-hidden border border-muted/30 shadow-sm"
       style={{
-        background: `linear-gradient(120deg, ${accentColor}, ${secondaryAccent})`,
+        background: 'var(--guest-surface)',
         borderRadius: `${radius}px`,
         fontFamily: bodyFont,
       }}
     >
-      <CardContent className="flex flex-col gap-3 py-5">
+      <CardContent className="flex flex-col gap-1.5 py-[4px]">
         <div className="flex items-center gap-3">
-          <div className="rounded-2xl bg-white/15 p-3">
-            <UploadCloud className="h-5 w-5" aria-hidden />
+          <div className="rounded-2xl p-3" style={{ background: `${accentColor}15` }}>
+            <UploadCloud className="h-5 w-5" aria-hidden style={{ color: accentColor }} />
           </div>
           <div>
-            <p className="text-lg font-semibold">Direkt hochladen</p>
-            <p className="text-sm text-white/80">Kamera öffnen oder ein Foto aus deiner Galerie wählen.</p>
+            <p className="text-lg font-semibold text-foreground">Direkt hochladen</p>
+            <p className="text-sm text-muted-foreground">Kamera öffnen oder ein Foto aus deiner Galerie wählen.</p>
           </div>
         </div>
         <Button
           asChild
-          className="bg-white/90 text-slate-900 hover:bg-white"
-          style={{ borderRadius: `${radius}px` }}
+          className="text-white"
+          style={{
+            borderRadius: `${radius}px`,
+            background: `linear-gradient(120deg, ${accentColor}, ${secondaryAccent})`,
+            boxShadow: `0 12px 28px ${accentColor}25`,
+          }}
         >
           <Link to={`/e/${encodeURIComponent(token)}/upload`}>Foto hochladen</Link>
         </Button>
+        <p className="text-xs text-muted-foreground">Offline möglich – wir laden später hoch.</p>
       </CardContent>
     </Card>
   );