Add AppNavbar component to the main page layout

app/components/AppNavbar.vue

@@ -0,0 +1,29 @@
+<template>
+  <nav class="sticky top-0 z-30 border-b border-slate-800/60 bg-slate-950/80 backdrop-blur">
+    <div class="mx-auto max-w-6xl px-4 py-4 sm:px-6 lg:px-8">
+      <div class="flex items-center justify-between gap-6">
+        <p class="text-lg font-semibold text-white sm:text-xl">Slipmatz</p>
+        <div class="flex items-center gap-3">
+          <button
+            type="button"
+            class="rounded-full border border-slate-700/80 px-4 py-2 text-sm font-medium text-slate-200 transition hover:border-slate-500 hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-sky-500 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-950"
+          >
+            Login
+          </button>
+          <button
+            type="button"
+            class="rounded-full bg-sky-500/90 px-4 py-2 text-sm font-semibold text-white transition hover:bg-sky-400 focus:outline-none focus-visible:ring-2 focus-visible:ring-sky-300 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-950"
+          >
+            Register
+          </button>
+          <button
+            type="button"
+            class="rounded-full border border-slate-700/80 px-4 py-2 text-sm font-medium text-slate-200 transition hover:border-rose-500 hover:text-rose-300 focus:outline-none focus-visible:ring-2 focus-visible:ring-rose-500 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-950"
+          >
+            Logout
+          </button>
+        </div>
+      </div>
+    </div>
+  </nav>
+</template>

app/pages/index.vue

@@ -49,6 +49,7 @@ const handleExport = async () => {
 
 <template>
   <main class="min-h-screen bg-slate-950 pb-16 text-slate-100">
+    <AppNavbar />
     <div class="mx-auto max-w-6xl px-4 pt-12 sm:px-6 lg:px-8">
       <header class="space-y-3">
         <p class="text-sm uppercase tracking-[0.35em] text-sky-400">