feat(ui): Dark-Glassmorphism-Designsystem und Grundlayout

Optischer Rahmen der Anwendung:

- Hintergrund aus drei langsam driftenden Nebeln, feinem Raster und einer
  Rauschtextur gegen Farbbanding
- .glass / .glass-soft als Grundflaechen, .card-glow fuer den Hover-Effekt
  mit Farbverlaufsrand je Projektakzent
- Buttons, Formularfelder und Scrollbars im gleichen Stil
- prefers-reduced-motion schaltet saemtliche Animationen ab

Dazu Kopfzeile mit aktiver Navigationsmarkierung, ein wiederverwendbarer
Modal-Dialog (Escape schliesst, Scroll wird gesperrt), das SVG-Icon sowie
Fehler- und 404-Seiten. Die Fehlerseite erkennt Datenbankprobleme und nennt
direkt die drei Befehle, die in dem Fall meistens helfen.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-07-25 19:34:15 +02:00
co-authored by Claude Opus 5
parent 7690bc87c5
commit 6fcbc04110
7 changed files with 642 additions and 0 deletions
+19
View File
@@ -0,0 +1,19 @@
import Link from "next/link";
import { Compass } from "lucide-react";
export default function NotFound() {
return (
<div className="glass fade-up mx-auto mt-16 max-w-lg px-6 py-16 text-center">
<span className="mx-auto grid h-14 w-14 place-items-center rounded-2xl bg-gradient-to-br from-violet-500/25 to-cyan-400/20 text-violet-200">
<Compass className="h-6 w-6" />
</span>
<h1 className="mt-4 text-2xl font-semibold text-white">Nichts gefunden</h1>
<p className="mt-2 text-sm text-slate-400">
Diese Seite existiert nicht (mehr). Vielleicht wurde das Projekt geloescht.
</p>
<Link href="/" className="btn btn-primary mt-6">
Zurueck zum Dashboard
</Link>
</div>
);
}