Add custom 404 page

src/pages/404.mdx

@@ -0,0 +1,15 @@
+---
+title: Page not found
+description: The page you're looking for doesn't exist. Navigate back to Tempo documentation.
+---
+
+<div className="flex flex-col items-center justify-center text-center py-16">
+  <div className="text-[120px] font-bold text-[var(--vocs-color_text3)] leading-none select-none">404</div>
+  <h1 className="text-2xl font-semibold mt-4 mb-2">Page not found</h1>
+  <p className="text-[var(--vocs-color_text2)] max-w-md mb-8">
+    The page you're looking for doesn't exist or may have been moved.
+  </p>
+  <a href="/" className="text-[var(--vocs-color_textAccent)] hover:underline">
+    ← Back to home
+  </a>
+</div>

vocs.config.ts

@@ -645,4 +645,25 @@ export default defineConfig({
       },
     },
   },
+  vite: {
+    plugins: [
+      {
+        // Vocs's default NotFound component shows a generic 404 page.
+        // This patches it to redirect to our custom /404 page instead.
+        name: 'fix-404-route',
+        transform(code, id) {
+          if (!id.includes('vocs/_lib/app/routes')) return
+          return code
+            .replace(
+              "import { NotFound } from './components/NotFound.js';",
+              "import { Navigate } from 'react-router';",
+            )
+            .replace(
+              '_jsx(NotFound, {})',
+              '_jsx(Navigate, { to: "/404", replace: true })',
+            )
+        },
+      },
+    ],
+  },
 })