Galerie aller shadcn/ui-Komponenten auf der Startseite

- Alle 63 Komponenten aus dem shadcn-Register installiert (Stil base-luma)
- Galerie unter components/galerie mit 7 Kategorien und Sprungnavigation
- Inhaltsbreite auf max-w-6xl erweitert
- shadcn-Hauptfarbe auf E&P-Tiefblau, größter Radius eckig
- App-Titel "UI-Galerie"

Co-Authored-By: Claude Opus 5.5 <[email protected]>

frontend-starter/app/globals.css

@@ -6,3 +6,14 @@
 
 /* E&P-Farben, Schriften und Bausteine (ep-karte, ep-knopf, …) kommen aus @ep/ui/theme.css.
  * Hier nur app-eigene Regeln ergänzen. */
+
+/* shadcn/ui-Komponenten an das E&P-Layout angleichen:
+ * Hauptfarbe Tiefblau statt Schwarz, auch die größten Radien eckig. */
+@theme {
+  --radius-4xl: 0px;
+}
+:root {
+  --primary: var(--ep-tiefblau);
+  --primary-foreground: var(--on-accent);
+  --ring: var(--ep-tiefblau);
+}

frontend-starter/app/layout.tsx

@@ -25,7 +25,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
           Zum Inhalt springen
         </a>
         <EpKopf titel={APP_TITEL} />
-        <main id="inhalt" className="mx-auto w-full max-w-3xl flex-1 px-4 py-8 sm:px-6 sm:py-12">
+        <main id="inhalt" className="mx-auto w-full max-w-6xl flex-1 px-4 py-8 sm:px-6 sm:py-12">
           {children}
         </main>
         <EpFuss />

frontend-starter/app/page.tsx

@@ -1,17 +1,21 @@
+import { Galerie } from "@/components/galerie/galerie";
 import { Card, CardContent, CardHeader } from "@/components/ui/card";
 import { APP_BESCHREIBUNG, APP_TITEL } from "@/lib/app";
 
-// Startseite im E&P-Layout. Kopf und Fuß kommen aus app/layout.tsx,
-// Farben und Bausteine (ep-karte, ep-ueberschrift, …) aus @ep/ui/theme.css.
+// Startseite im E&P-Layout mit der Galerie aller shadcn/ui-Komponenten.
+// Kopf und Fuß kommen aus app/layout.tsx, Farben und Bausteine (ep-karte, ep-ueberschrift, …) aus @ep/ui/theme.css.
 export default function Home() {
   return (
-    <Card className="ep-karte rounded-none shadow-none ring-0">
-      <CardHeader className="px-0">
-        <h1 className="ep-ueberschrift text-3xl">{APP_TITEL}</h1>
-      </CardHeader>
-      <CardContent className="px-0">
-        <p className="text-ink-muted">{APP_BESCHREIBUNG}</p>
-      </CardContent>
-    </Card>
+    <>
+      <Card className="ep-karte mb-10 rounded-none shadow-none ring-0">
+        <CardHeader className="px-0">
+          <h1 className="ep-ueberschrift text-3xl">{APP_TITEL}</h1>
+        </CardHeader>
+        <CardContent className="px-0">
+          <p className="text-ink-muted">{APP_BESCHREIBUNG}</p>
+        </CardContent>
+      </Card>
+      <Galerie />
+    </>
   );
 }