tenant admin startseite schicker gestaltet und super-admin und tenant admin (filament) aufgesplittet.

Es gibt nun task collections und vordefinierte tasks für alle. Onboarding verfeinert und webseite-carousel gefixt (logging später entfernen!)

resources/js/admin/pages/WelcomeTeaserPage.tsx

@@ -0,0 +1,115 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Sparkles, Users, Camera, Heart, ArrowRight } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { ADMIN_HOME_PATH } from '../constants';
+import { useAuth } from '../auth/context';
+
+const highlights = [
+  {
+    icon: Sparkles,
+    title: 'Momente lenken, nicht das Handy',
+    description:
+      'Fotospiel liefert euch spielerische Aufgaben, damit eure Gäste das Fest genießen und gleichzeitig emotionale Motive festhalten.',
+  },
+  {
+    icon: Users,
+    title: 'Alle Gäste auf einer Reise',
+    description:
+      'Einladungslinks und QR-Codes führen direkt in eure Event-Galerie. Kein Technik-Know-how nötig – nur teilen und loslegen.',
+  },
+  {
+    icon: Camera,
+    title: 'Live-Galerie und Moderation',
+    description:
+      'Sammelt Bilder in Echtzeit, markiert Highlights und entscheidet gemeinsam, welche Erinnerungen groß rauskommen.',
+  },
+];
+
+export default function WelcomeTeaserPage() {
+  const navigate = useNavigate();
+  const { login } = useAuth();
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-rose-50 via-white to-sky-50 text-slate-800">
+      <header className="mx-auto flex w-full max-w-5xl flex-col gap-6 px-6 pb-12 pt-16 text-center md:pt-20">
+        <div className="mx-auto w-fit rounded-full border border-rose-100 bg-white/80 px-4 py-1 text-sm font-medium text-rose-500 shadow-sm">
+          Willkommen bei Fotospiel
+        </div>
+        <h1 className="font-display text-4xl font-semibold tracking-tight text-slate-900 md:text-5xl">
+          Eure Gäste als Geschichtenerzähler – ohne Technikstress
+        </h1>
+        <p className="mx-auto max-w-2xl text-base leading-relaxed text-slate-600 md:text-lg">
+          Dieses Kontrollzentrum zeigt euch, wie ihr Fotospiel für Hochzeit, Jubiläum oder Team-Event einsetzt.
+          Wir führen euch Schritt für Schritt durch Aufgaben, Event-Setup und Einladungen.
+        </p>
+        <div className="flex flex-col justify-center gap-3 md:flex-row">
+          
+          <button
+            type="button"
+            className="group inline-flex items-center justify-center gap-2 rounded-full border border-transparent bg-white px-6 py-3 text-base font-semibold text-rose-500 shadow-sm transition hover:border-rose-200 hover:text-rose-600"
+            onClick={() => login(ADMIN_HOME_PATH)}
+          >
+            Ich habe bereits Zugang
+            <ArrowRight className="h-4 w-4 transition group-hover:translate-x-0.5" />
+          </button>
+        </div>
+      </header>
+
+      <main className="mx-auto w-full max-w-5xl space-y-12 px-6 pb-16">
+        <section className="grid gap-6 rounded-3xl border border-white/60 bg-white/80 p-6 shadow-xl shadow-rose-100/40 backdrop-blur-md md:grid-cols-3 md:p-8">
+          {highlights.map((item) => (
+            <article key={item.title} className="flex flex-col gap-4 rounded-2xl bg-white/70 p-5 shadow-sm">
+              <div className="flex h-12 w-12 items-center justify-center rounded-full bg-rose-100 text-rose-500">
+                <item.icon className="h-6 w-6" />
+              </div>
+              <h2 className="text-lg font-semibold text-slate-900">{item.title}</h2>
+              <p className="text-sm leading-relaxed text-slate-600">{item.description}</p>
+            </article>
+          ))}
+        </section>
+
+        <section className="grid gap-8 rounded-3xl border border-sky-100 bg-gradient-to-br from-white via-sky-50 to-white p-6 shadow-lg md:grid-cols-2 md:p-10">
+          <div className="space-y-5">
+            <div className="inline-flex items-center gap-2 rounded-full bg-sky-100 px-3 py-1 text-xs font-semibold text-sky-700">
+              <Heart className="h-4 w-4" />
+              So startet ihr
+            </div>
+            <h2 className="text-2xl font-semibold text-slate-900 md:text-3xl">In drei Schritten zu eurer Story</h2>
+            <ol className="space-y-4 text-sm leading-relaxed text-slate-600">
+              <li>
+                <span className="font-semibold text-slate-900">1. Aufgaben entdecken&nbsp;</span>
+                Stellt euer erstes Aufgabenpaket zusammen, das zu eurer Feier passt.
+              </li>
+              <li>
+                <span className="font-semibold text-slate-900">2. Event anlegen&nbsp;</span>
+                Benennt euer Event, legt Farben fest und erstellt den QR-Einladungslink.
+              </li>
+              <li>
+                <span className="font-semibold text-slate-900">3. Link teilen&nbsp;</span>
+                Gäste scannen, laden Fotos hoch und ihr entscheidet, was in euer Album kommt.
+              </li>
+            </ol>
+          </div>
+          <aside className="space-y-4 rounded-2xl border border-rose-100 bg-white/90 p-6 text-sm leading-relaxed text-slate-600 shadow-md">
+            <p>
+              Ihr könnt jederzeit unterbrechen und später weiter machen. Falls ihr Fragen habt, meldet euch unter{' '}
+              <a className="font-medium text-rose-500 underline" href="mailto:hallo@fotospiel.de">
+                hallo@fotospiel.de
+              </a>
+              .
+            </p>
+            <p>
+              Nach dem Login geleiten wir euch automatisch zur geführten Einrichtung. Dort entscheidet ihr auch,
+              wann eure Gästegalerie sichtbar wird.
+            </p>
+          </aside>
+        </section>
+      </main>
+
+      <footer className="border-t border-white/60 bg-white/70 py-6 text-center text-xs text-slate-500">
+        Fotospiel • Eure Gäste gestalten eure Lieblingsmomente
+      </footer>
+    </div>
+  );
+}