[FEAT] Minor tweak

src/components/layout/navbar/NavbarSocials.vue

@@ -15,6 +15,9 @@
         <i class="fas fa-question-circle text-lg"></i>
       </button>
     </Tooltip>
+    
+    <div class="h-4 w-px bg-gray-200 dark:bg-gray-700 ml-1.5"></div>
+    
     <DarkModeToggle />
   </div>
 </template>

src/router/index.ts

@@ -49,6 +49,11 @@ const router = createRouter({
       name: 'editor',
       component: () => import('../views/EditorView.vue'),
     },
+    {
+      path: '/:pathMatch(.*)*',
+      name: 'not-found',
+      component: () => import('../views/NotFound.vue'),
+    },
   ],
   scrollBehavior(to, from, savedPosition) {
     if (savedPosition) {

src/views/NotFound.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="flex flex-col items-center justify-center min-h-[60vh] text-center px-4">
+    <div class="mb-8 relative">
+      <div class="text-9xl font-black text-gray-200 dark:text-gray-800 select-none">404</div>
+      <div class="absolute inset-0 flex items-center justify-center">
+        <div class="text-6xl">👻</div>
+      </div>
+    </div>
+    
+    <h1 class="text-3xl font-bold text-gray-900 dark:text-gray-100 mb-4">Page not found</h1>
+    <p class="text-lg text-gray-600 dark:text-gray-400 max-w-md mb-8">
+      Oops! The page you're looking for doesn't exist or has been moved.
+    </p>
+    
+    <router-link 
+      to="/" 
+      class="px-6 py-3 bg-indigo-600 hover:bg-indigo-700 text-white font-medium rounded-xl transition-all shadow-lg hover:shadow-indigo-500/30 flex items-center gap-2"
+    >
+      <i class="fas fa-home"></i>
+      <span>Go home</span>
+    </router-link>
+  </div>
+</template>