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

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>
+  );
+}