feat(docs): add Not Found page for unmatched routes

packages/docs/src/App.tsx

@@ -12,6 +12,7 @@ import { LearnNavigationApiPage } from "./pages/LearnNavigationApiPage.js";
 import { LearnNestedRoutesPage } from "./pages/LearnNestedRoutesPage.js";
 import { LearnTypeSafetyPage } from "./pages/LearnTypeSafetyPage.js";
 import { ExamplesPage } from "./pages/ExamplesPage.js";
+import { NotFoundPage } from "./pages/NotFoundPage.js";
 import { useEffect } from "react";
 
 const routes = [
@@ -71,6 +72,9 @@ const routes = [
         path: "/examples",
         component: ExamplesPage,
       }),
+      route({
+        component: NotFoundPage,
+      }),
     ],
   }),
 ];

packages/docs/src/pages/NotFoundPage.tsx

@@ -0,0 +1,13 @@
+export function NotFoundPage() {
+  return (
+    <div className="page not-found-page">
+      <h1>Page Not Found</h1>
+      <p>The page you're looking for doesn't exist.</p>
+      <p>
+        <a href="/funstack-router/" className="button primary">
+          Go Home
+        </a>
+      </p>
+    </div>
+  );
+}

packages/docs/src/styles/pages.css

@@ -225,3 +225,19 @@
 .learn-content li strong {
   color: var(--color-text);
 }
+
+/* Not Found Page */
+.not-found-page {
+  text-align: center;
+  padding: 64px 0;
+}
+
+.not-found-page h1 {
+  font-size: 3rem;
+  margin-bottom: 16px;
+}
+
+.not-found-page p {
+  font-size: 1.1rem;
+  margin-bottom: 24px;
+}