docs: add Learn section with Nested Routes tutorial

CLAUDE.md

@@ -61,9 +61,3 @@ The router uses two React contexts:
 ### Testing
 
 Tests run in jsdom with `urlpattern-polyfill` (Navigation API is not available, so tests mock navigation behavior via `packages/router/src/__tests__/setup.ts`).
-
-## Development Guidelines
-
-### Documentation Updates
-
-When adding a new feature to the router, you must also update the documentation in `packages/docs` to reflect the changes. This ensures users can discover and learn how to use new functionality.

packages/docs/src/App.tsx

@@ -7,6 +7,8 @@ import { ApiComponentsPage } from "./pages/ApiComponentsPage.js";
 import { ApiHooksPage } from "./pages/ApiHooksPage.js";
 import { ApiUtilitiesPage } from "./pages/ApiUtilitiesPage.js";
 import { ApiTypesPage } from "./pages/ApiTypesPage.js";
+import { LearnPage } from "./pages/LearnPage.js";
+import { LearnNestedRoutesPage } from "./pages/LearnNestedRoutesPage.js";
 import { ExamplesPage } from "./pages/ExamplesPage.js";
 import { useEffect } from "react";
 
@@ -23,6 +25,16 @@ const routes = [
         path: "/getting-started",
         component: GettingStartedPage,
       }),
+      route({
+        path: "/learn",
+        component: LearnPage,
+        children: [
+          route({
+            path: "/nested-routes",
+            component: LearnNestedRoutesPage,
+          }),
+        ],
+      }),
       route({
         path: "/api",
         component: ApiReferencePage,

packages/docs/src/components/Layout.tsx

@@ -4,6 +4,7 @@ import { Outlet, useLocation } from "@funstack/router";
 const navItems = [
   { path: "/funstack-router/", label: "Home" },
   { path: "/funstack-router/getting-started", label: "Getting Started" },
+  { path: "/funstack-router/learn", label: "Learn" },
   { path: "/funstack-router/api", label: "API Reference" },
   { path: "/funstack-router/examples", label: "Examples" },
 ];
@@ -17,6 +18,10 @@ export function Layout() {
     if (path === "/funstack-router/api") {
       return location.pathname.startsWith("/funstack-router/api");
     }
+    // Handle Learn section (match any /learn/* path)
+    if (path === "/funstack-router/learn") {
+      return location.pathname.startsWith("/funstack-router/learn");
+    }
     // Handle home path
     if (path === "/funstack-router/") {
       return (