Implement portfolio admin management

app/root/page.tsx

@@ -1,4 +1,4 @@
-import { ArrowLeft, ExternalLink, LockKeyhole, LogOut } from "lucide-react";
+import { ArrowLeft, ExternalLink, ImageIcon, LockKeyhole, LogOut } from "lucide-react";
 import Link from "next/link";
 import { redirect } from "next/navigation";
 
@@ -49,6 +49,14 @@ const copy = {
   uiKitTitle: "UI Kit",
   uiKitDescription: "Globale Referenz fuer Cards, Buttons, Inputs und Surface Levels.",
   uiKitAction: "Zur UI Kit",
+  media: "Media",
+  portfolio: "Portfolio",
+  portfolioTitle: "Portfolio",
+  portfolioDescription: "Kategorien, Projekte, Sections und Assets verwalten.",
+  portfolioAction: "Zum Portfolio",
+  mediaTitle: "Media Library",
+  mediaDescription: "Uploads, externe URLs und Verwendungsorte zentral verwalten.",
+  mediaAction: "Zur Media Library",
   loginTitle: "Root Login",
   loginText: "Nur autorisierte Nutzer duerfen diesen Bereich verwenden.",
   passwordLabel: "Passwort",
@@ -204,7 +212,7 @@ export default async function RootPage({ searchParams }: RootPageProps) {
       }
     >
       <div className="grid gap-6">
-        <section className="grid gap-4 lg:grid-cols-2">
+        <section className="grid gap-4 lg:grid-cols-4">
           <MotionFade delay={0.05}>
             <AppCard level={2}>
               <CardHeader>
@@ -244,6 +252,42 @@ export default async function RootPage({ searchParams }: RootPageProps) {
               </CardContent>
             </AppCard>
           </MotionFade>
+
+          <MotionFade delay={0.15}>
+            <AppCard level={2}>
+              <CardHeader>
+                <CardDescription>{copy.portfolioTitle}</CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <p className="text-lg font-semibold text-foreground">{copy.portfolioTitle}</p>
+                <p className="text-sm text-muted-foreground">{copy.portfolioDescription}</p>
+                <Button asChild variant="outline">
+                  <Link href="/root/portfolio">
+                    {copy.portfolioAction}
+                    <ExternalLink className="h-4 w-4" />
+                  </Link>
+                </Button>
+              </CardContent>
+            </AppCard>
+          </MotionFade>
+
+          <MotionFade delay={0.2}>
+            <AppCard level={2}>
+              <CardHeader>
+                <CardDescription>{copy.mediaTitle}</CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <p className="text-lg font-semibold text-foreground">{copy.mediaTitle}</p>
+                <p className="text-sm text-muted-foreground">{copy.mediaDescription}</p>
+                <Button asChild variant="outline">
+                  <Link href="/root/media">
+                    {copy.mediaAction}
+                    <ImageIcon className="h-4 w-4" />
+                  </Link>
+                </Button>
+              </CardContent>
+            </AppCard>
+          </MotionFade>
         </section>
       </div>
     </AppShell>