Refactor layout.tsx to include new header buttons and SVG icons for improved UI

src/app/AboutButton.tsx

@@ -0,0 +1,20 @@
+'use client';
+import BadgeButton from './BadgeButton';
+
+const InfoIcon = (
+  <svg width="16" height="16" fill="white" viewBox="0 0 16 16" aria-hidden="true">
+    <circle cx="8" cy="8" r="8" fill="#2563eb"/>
+    <text x="8" y="12" textAnchor="middle" fontSize="9" fill="white" fontWeight="bold" alignmentBaseline="middle">i</text>
+  </svg>
+);
+
+export default function AboutButton() {
+  return (
+    <BadgeButton
+      label="ABOUT ME"
+      color="#2563eb"
+      icon={InfoIcon}
+      onClick={() => window.open('http://' + window.location.hostname + ':80', '_blank')}
+    />
+  );
+}

src/app/BadgeButton.tsx

@@ -0,0 +1,31 @@
+"use client";
+import React from 'react';
+
+export default function BadgeButton({
+  label,
+  color = '#2563eb',
+  icon,
+  onClick,
+}: {
+  label: string;
+  color?: string;
+  icon: React.ReactNode;
+  onClick?: () => void;
+}) {
+  return (
+    <button
+      onClick={onClick}
+      className="flex items-center gap-2 h-8 px-5 font-bold tracking-wider uppercase text-white"
+      style={{
+        background: color,
+        borderRadius: '4px',
+        fontFamily: 'Verdana, Geneva, DejaVu Sans, sans-serif',
+        fontSize: '0.95rem',
+        letterSpacing: '0.08em',
+      }}
+    >
+      <span className="flex items-center">{icon}</span>
+      <span>{label}</span>
+    </button>
+  );
+} 

src/app/HeaderButtons.tsx

@@ -0,0 +1,37 @@
+'use client';
+import BadgeButton from './BadgeButton';
+import AboutButton from './AboutButton';
+
+const PersonIcon = (
+  <svg width="18" height="18" viewBox="0 0 20 20" fill="none">
+    <circle cx="10" cy="6" r="4" fill="white" stroke="white" strokeWidth="1.5" />
+    <rect x="3" y="13" width="14" height="5" rx="2.5" fill="white" stroke="white" strokeWidth="1.5" />
+  </svg>
+);
+
+const InfoIcon = (
+  <svg width="18" height="18" viewBox="0 0 20 20" fill="none">
+    <circle cx="10" cy="10" r="9" stroke="white" strokeWidth="2" />
+    <rect x="9" y="8" width="2" height="6" rx="1" fill="white" />
+    <rect x="9" y="5" width="2" height="2" rx="1" fill="white" />
+  </svg>
+);
+
+export default function HeaderButtons() {
+  return (
+    <div className="flex gap-2 justify-center w-full md:w-auto mt-2 md:mt-0">
+      <BadgeButton
+        label="Admin Login"
+        color="#dc2626"
+        icon={PersonIcon}
+        onClick={() => window.location.href = '/admin'}
+      />
+      <BadgeButton
+        label="About Me"
+        color="#2563eb"
+        icon={InfoIcon}
+        onClick={() => window.open('http://' + window.location.hostname + ':80', '_blank')}
+      />
+    </div>
+  );
+}

src/app/layout.tsx

@@ -3,6 +3,9 @@ import { Inter } from 'next/font/google';
 import './globals.css';
 import Link from 'next/link';
 import Head from 'next/head';
+import AboutButton from './AboutButton';
+import BadgeButton from './BadgeButton';
+import HeaderButtons from './HeaderButtons';
 
 const inter = Inter({ subsets: ['latin'] });
 
@@ -11,6 +14,21 @@ export const metadata: Metadata = {
   description: 'Ein Blog von Sebastian Zinkl, gebaut mit Next.js und Markdown',
 };
 
+const PersonIcon = (
+  <svg width="18" height="18" viewBox="0 0 20 20" fill="none">
+    <circle cx="10" cy="6" r="4" stroke="white" strokeWidth="2" />
+    <rect x="3" y="13" width="14" height="5" rx="2.5" stroke="white" strokeWidth="2" />
+  </svg>
+);
+
+const InfoIcon = (
+  <svg width="18" height="18" viewBox="0 0 20 20" fill="none">
+    <circle cx="10" cy="10" r="9" stroke="white" strokeWidth="2" />
+    <rect x="9" y="8" width="2" height="6" rx="1" fill="white" />
+    <rect x="9" y="5" width="2" height="2" rx="1" fill="white" />
+  </svg>
+);
+
 export default function RootLayout({
   children,
 }: {
@@ -42,9 +60,9 @@ export default function RootLayout({
                 <img src="https://img.shields.io/badge/GitHub-%23121011.svg?style=for-the-badge&logo=GitHub&logoColor=white" alt="GitHub" />
               </a>
             </div>
-            <Link href="/admin" className="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded-full">
+            <div className="flex gap-2 justify-center w-full md:w-auto mt-2 md:mt-0">
-              Admin Login
+              <HeaderButtons />
-            </Link>
+            </div>
           </div>
         </header>
         {children}

src/app/page.tsx

@@ -72,6 +72,19 @@ export default function Home() {
     })),
   ];
 
+  // Helper to recursively collect all posts from the tree
+  function collectPosts(nodes: Node[]): Post[] {
+    let posts: Post[] = [];
+    for (const node of nodes) {
+      if (node.type === 'post') {
+        posts.push(node);
+      } else if (node.type === 'folder') {
+        posts = posts.concat(collectPosts(node.children));
+      }
+    }
+    return posts;
+  }
+
   return (
     <main className="min-h-screen p-8 max-w-4xl mx-auto">
       <h1 className="text-4xl font-bold mb-8">Sebastian Zinkls - Blog</h1>
@@ -89,6 +102,52 @@ export default function Home() {
           </span>
         ))}
       </nav>
+      {/* Pinned posts at the top (only on root) */}
+      {currentPath.length === 0 && (() => {
+        const allPosts = collectPosts(tree);
+        const pinnedPosts = allPosts.filter((post) => post.pinned);
+        if (pinnedPosts.length === 0) return null;
+        return (
+          <div className="mb-8">
+            <h2 className="text-2xl font-bold mb-4 flex items-center gap-2">📌 Pinned Posts</h2>
+            <div className="grid gap-8">
+              {pinnedPosts.map((post) => (
+                <article key={post.slug} className="border rounded-lg p-6 hover:shadow-lg transition-shadow relative">
+                  <span className="absolute top-4 right-4 text-2xl" title="Pinned">📌</span>
+                  <Link href={`/posts/${post.slug}`}>
+                    <h2 className="text-2xl font-semibold mb-2">{post.title}</h2>
+                    <div className="text-gray-600 mb-4">
+                      {post.date ? (
+                        <div>Veröffentlicht: {format(new Date(post.date), 'd. MMMM yyyy')}</div>
+                      ) : (
+                        <div className="flex flex-col items-center">
+                          <div className="flex">
+                            <span className="text-2xl animate-spin mr-2">⚙️</span>
+                            <span className="text-2xl animate-spin-reverse">⚙️</span>
+                          </div>
+                          <div className="text-xl font-bold mt-2">In Bearbeitung</div>
+                        </div>
+                      )}
+                      <div>Erstellt: {format(new Date(post.createdAt), 'd. MMMM yyyy HH:mm')}</div>
+                    </div>
+                    <p className="text-gray-700 mb-4">{post.summary}</p>
+                    <div className="flex gap-2">
+                      {post.tags.map((tag: string) => (
+                        <span
+                          key={tag}
+                          className="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm"
+                        >
+                          {tag}
+                        </span>
+                      ))}
+                    </div>
+                  </Link>
+                </article>
+              ))}
+            </div>
+          </div>
+        );
+      })()}
       <div className="grid gap-8">
         {/* Folders */}
         {nodes.filter((n) => n.type === 'folder').map((folder: any) => (