überarbeitung der kameraseite

resources/js/guest/pages/UploadPage.tsx

@@ -150,6 +150,7 @@ const [uploadError, setUploadError] = useState<string | null>(null);
 const [uploadWarning, setUploadWarning] = useState<string | null>(null);
 const [immersiveMode, setImmersiveMode] = useState(true);
 const [showCelebration, setShowCelebration] = useState(false);
+const [showHeroOverlay, setShowHeroOverlay] = useState(true);
 
   const [errorDialog, setErrorDialog] = useState<UploadErrorDialog | null>(null);
   const [taskDetailsExpanded, setTaskDetailsExpanded] = useState(false);
@@ -817,7 +818,16 @@ const [canUpload, setCanUpload] = useState(true);
     setTaskDetailsExpanded(false);
   }, [task?.id]);
 
+  useEffect(() => {
+    if (task) {
+      setShowHeroOverlay(false);
+    } else {
+      setShowHeroOverlay(true);
+    }
+  }, [task]);
+
   const handlePrimaryAction = useCallback(() => {
+    setShowHeroOverlay(false);
     if (!isCameraActive) {
       startCamera();
       return;
@@ -872,6 +882,42 @@ const [canUpload, setCanUpload] = useState(true);
     </button>
   ) : null;
 
+  const heroOverlay = !task && showHeroOverlay && mode !== 'uploading' ? (
+    <div className="absolute left-4 right-4 top-6 z-30 rounded-3xl border border-white/30 bg-black/60 p-4 text-white shadow-2xl backdrop-blur sm:left-6 sm:right-6 sm:top-8">
+      <div className="flex items-start justify-between gap-2">
+        <div>
+          <p className="text-xs font-semibold uppercase tracking-[0.2em] text-white/70">Bereit für dein Foto?</p>
+          <p className="text-lg font-semibold leading-tight">Teile den Moment mit allen Gästen.</p>
+          <p className="text-sm text-white/80">Zieh dir eine Mission oder starte direkt mit der Kamera.</p>
+        </div>
+        <Badge variant="secondary" className="rounded-full bg-white/15 px-3 py-1 text-[11px] font-semibold uppercase tracking-wide text-white/90">
+          Live
+        </Badge>
+      </div>
+      <div className="mt-3 flex flex-wrap items-center gap-2">
+        <Button
+          size="sm"
+          className="rounded-full bg-white text-black shadow"
+          onClick={() => navigate(tasksUrl)}
+        >
+          Mission ziehen
+        </Button>
+        <Button
+          size="sm"
+          variant="secondary"
+          className="rounded-full border border-white/30 bg-white/10 text-white"
+          onClick={() => navigate(tasksUrl)}
+        >
+          Stimmung wählen
+        </Button>
+        <span className="inline-flex items-center gap-2 rounded-full border border-white/20 bg-white/5 px-3 py-1 text-xs text-white/85">
+          <Sparkles className="h-4 w-4 text-amber-200" />
+          Mini-Mission: Fang ein Lachen ein
+        </span>
+      </div>
+    </div>
+  ) : null;
+
   const dialogToneIconClass: Record<Exclude<UploadErrorDialog['tone'], undefined>, string> = {
     danger: 'text-rose-500',
     warning: 'text-amber-500',
@@ -1025,6 +1071,7 @@ const renderWithDialog = (content: ReactNode, wrapperClassName = 'space-y-6 pb-[
     <>
       <div className="relative flex min-h-screen flex-col gap-6 pt-4" style={bodyFont ? { fontFamily: bodyFont } : undefined}>
         {taskFloatingCard}
+        {heroOverlay}
         <section
           className="relative flex min-h-[70vh] flex-col overflow-hidden border border-white/10 bg-black text-white shadow-2xl"
           style={{ borderRadius: radius }}