Landingpages als eigene Gattung, erster Typ: Mehrere Links

Die sechs noch offenen Typen haben kein fremdes Ziel, auf das man weiterleiten koennte — sie brauchen eine Seite. Dafuer bekommt der Typ-Vertrag `hasLandingPage`: /r/[slug] schickt solche Codes auf /s/[slug], statt `redirectTarget` zu befragen. Die oeffentlichen Seiten duerfen die Navigation der Anwendung nicht zeigen — wer einen Code scannt, hat mit „Verwaltung" nichts zu tun. Deshalb liegt das App-Chrome jetzt in der Routengruppe (app); das Wurzel-Layout traegt nur noch html und body. Die URLs aendern sich dadurch nicht.
2026-08-14 22:27:49 +02:00
parent b3d386b0d2
commit e627f7c372
27 changed files with 678 additions and 124 deletions
@@ -0,0 +1,128 @@
+import Link from "next/link";
+
+import { Icon } from "@/components/icons";
+import { Badge, Notice } from "@/components/ui";
+import { requirePageActor } from "@/lib/auth/guard";
+import { getVisibleQrTypes } from "@/lib/qr/availability";
+
+// Welche Typen sichtbar sind, steht in der Datenbank und ist jederzeit
+// änderbar — die Startseite darf deshalb nicht vorgerendert werden.
+export const dynamic = "force-dynamic";
+
+export default async function HomePage() {
+  await requirePageActor();
+  const types = await getVisibleQrTypes();
+  const usableCount = types.filter((entry) => entry.usable).length;
+
+  return (
+    <div className="mx-auto max-w-6xl px-4 py-10 sm:px-6 sm:py-14">
+      <div className="max-w-2xl">
+        <h1 className="text-3xl font-bold tracking-tight text-slate-900 sm:text-4xl">
+          Was möchtest du erstellen?
+        </h1>
+        <p className="mt-3 text-base text-slate-600">
+          Wähle einen Typ, gib deine Daten ein und lade den fertigen QR-Code als
+          PNG oder SVG herunter. Auf Wunsch als dynamischer Code, dessen Ziel du
+          später änderst, ohne den Code neu drucken zu müssen.
+        </p>
+      </div>
+
+      {usableCount === 0 ? (
+        <div className="mt-9 max-w-2xl">
+          <Notice tone="warning">
+            {types.length === 0
+              ? "Zurzeit ist kein QR-Typ freigegeben."
+              : "Zurzeit ist kein QR-Typ zum Erstellen freigegeben — die unten gezeigten Typen folgen erst in einer späteren Version."}{" "}
+            Unter{" "}
+            <Link href="/verwaltung/typen" className="font-medium underline">
+              Verwaltung → QR-Typen
+            </Link>{" "}
+            lassen sich Typen wieder freigeben.
+          </Notice>
+        </div>
+      ) : null}
+
+      {types.length === 0 ? null : (
+        <ul className="mt-9 grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
+          {types.map(({ qrType, usable }) => {
+            const tile = (
+              <>
+                <span
+                  className={
+                    usable
+                      ? "flex size-11 shrink-0 items-center justify-center rounded-xl bg-indigo-50 text-indigo-600"
+                      : "flex size-11 shrink-0 items-center justify-center rounded-xl bg-slate-100 text-slate-400"
+                  }
+                >
+                  <Icon name={qrType.icon} className="size-6" />
+                </span>
+                <span className="min-w-0 flex-1">
+                  <span className="flex flex-wrap items-center gap-2">
+                    <span
+                      className={
+                        usable
+                          ? "font-semibold text-slate-900"
+                          : "font-semibold text-slate-500"
+                      }
+                    >
+                      {qrType.title}
+                    </span>
+                    {usable ? (
+                      <Badge tone="popular">Beliebt</Badge>
+                    ) : (
+                      <Badge tone="soon">Bald verfügbar</Badge>
+                    )}
+                  </span>
+                  <span
+                    className={
+                      usable
+                        ? "mt-1 block text-sm text-slate-600"
+                        : "mt-1 block text-sm text-slate-400"
+                    }
+                  >
+                    {qrType.description}
+                  </span>
+                </span>
+              </>
+            );
+
+            return (
+              <li key={qrType.id}>
+                {usable ? (
+                  <Link
+                    href={`/erstellen/${qrType.id}`}
+                    className="flex h-full items-start gap-4 rounded-2xl border border-slate-200 bg-white p-4 shadow-sm transition-all hover:border-indigo-300 hover:shadow-md"
+                  >
+                    {tile}
+                  </Link>
+                ) : (
+                  <div
+                    aria-disabled="true"
+                    title={`„${qrType.title}“ folgt in einer späteren Version`}
+                    className="flex h-full cursor-not-allowed items-start gap-4 rounded-2xl border border-dashed border-slate-200 bg-slate-50/60 p-4"
+                  >
+                    {tile}
+                  </div>
+                )}
+              </li>
+            );
+          })}
+        </ul>
+      )}
+
+      {usableCount > 0 && usableCount < types.length ? (
+        <p className="mt-8 text-sm text-slate-500">
+          Die übrigen Typen folgen in einer späteren Version. Welche Kacheln
+          hier erscheinen, legst du unter{" "}
+          <Link
+            href="/verwaltung/typen"
+            className="font-medium text-slate-600 underline"
+          >
+            Verwaltung → QR-Typen
+          </Link>{" "}
+          fest.
+        </p>
+      ) : null}
+    </div>
+  );
+}