fix: restore navigation to all pages using PageWithNav

After removing @nav parallel routes, all pages were missing navigation.
Added PageWithNav wrapper to main application pages:

- Homepage: 🧮 Soroban Flashcards
- Games listing: 🕹️ Soroban Arcade
- Interactive guide: 📚 Interactive Guide
- Create flashcards: ✨ Create Flashcards
- Game pages already had navigation from previous commit

Each page now has appropriate nav title and emoji displayed in the
mini navigation bar. All navigation is working correctly again.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

.claude/settings.local.json

@@ -167,7 +167,8 @@
       "Bash(open http://localhost:3001)",
       "Bash(open http://localhost:3001/arcade)",
       "Bash(open http://localhost:6006)",
-      "Bash(open http://localhost:3002/games/matching)"
+      "Bash(open http://localhost:3002/games/matching)",
+      "Bash(open http://localhost:3002/create)"
     ],
     "deny": [],
     "ask": []

apps/web/src/app/create/page.tsx

@@ -4,6 +4,7 @@ import { useState } from 'react'
 import { useForm } from '@tanstack/react-form'
 import { css } from '../../../styled-system/css'
 import { container, stack, hstack, grid } from '../../../styled-system/patterns'
+import { PageWithNav } from '@/components/PageWithNav'
 import Link from 'next/link'
 import { ConfigurationForm } from '@/components/ConfigurationForm'
 import { ConfigurationFormWithoutGenerate } from '@/components/ConfigurationFormWithoutGenerate'
@@ -185,7 +186,8 @@ export default function CreatePage() {
   }
 
   return (
-    <div className={css({ minHeight: '100vh', bg: 'gray.50' })}>
+    <PageWithNav navTitle="Create Flashcards" navEmoji="✨">
+      <div className={css({ minHeight: '100vh', bg: 'gray.50' })}>
 
       {/* Main Content */}
       <div className={container({ maxW: '7xl', px: '4', py: '8' })}>
@@ -378,6 +380,7 @@ export default function CreatePage() {
           </div>
         )}
       </div>
-    </div>
+      </div>
+    </PageWithNav>
   )
 }

apps/web/src/app/games/page.tsx

@@ -5,6 +5,7 @@ import Link from 'next/link'
 import { useRouter } from 'next/navigation'
 import { css } from '../../../styled-system/css'
 import { grid } from '../../../styled-system/patterns'
+import { PageWithNav } from '@/components/PageWithNav'
 import { useUserProfile } from '../../contexts/UserProfileContext'
 import { useGameMode } from '../../contexts/GameModeContext'
 import { FullscreenProvider, useFullscreen } from '../../contexts/FullscreenContext'
@@ -1158,7 +1159,11 @@ const globalAnimations = `
 `
 
 export default function GamesPage() {
-  return <GamesPageContent />
+  return (
+    <PageWithNav navTitle="Soroban Arcade" navEmoji="🕹️">
+      <GamesPageContent />
+    </PageWithNav>
+  )
 }
 
 // Inject refined animations into the page

apps/web/src/app/guide/page.tsx

@@ -4,6 +4,7 @@ import { useState } from 'react'
 import Link from 'next/link'
 import { css } from '../../../styled-system/css'
 import { container, stack, hstack, grid } from '../../../styled-system/patterns'
+import { PageWithNav } from '@/components/PageWithNav'
 import { TypstSoroban } from '@/components/TypstSoroban'
 import { InteractiveAbacus } from '@/components/InteractiveAbacus'
 import { AbacusReact } from '@soroban/abacus-react'
@@ -16,7 +17,8 @@ type TabType = 'reading' | 'arithmetic'
 export default function GuidePage() {
   const [activeTab, setActiveTab] = useState<TabType>('reading')
   return (
-    <div className={css({ minHeight: '100vh', bg: 'gray.50' })}>
+    <PageWithNav navTitle="Interactive Guide" navEmoji="📚">
+      <div className={css({ minHeight: '100vh', bg: 'gray.50' })}>
 
       {/* Hero Section */}
       <div className={css({
@@ -1281,6 +1283,7 @@ function ArithmeticOperationsGuide() {
           Practice Arithmetic Operations →
         </Link>
       </div>
-    </div>
+      </div>
+    </PageWithNav>
   )
 }

apps/web/src/app/page.tsx

@@ -2,11 +2,13 @@
 
 import { css } from '../../styled-system/css'
 import { container, stack, hstack } from '../../styled-system/patterns'
+import { PageWithNav } from '@/components/PageWithNav'
 import Link from 'next/link'
 
 export default function HomePage() {
   return (
-    <div className={css({ minHeight: '100vh', bg: 'gradient-to-br from-brand.50 to-brand.100' })}>
+    <PageWithNav navTitle="Soroban Flashcards" navEmoji="🧮">
+      <div className={css({ minHeight: '100vh', bg: 'gradient-to-br from-brand.50 to-brand.100' })}>
 
       {/* Hero Section */}
       <main className={container({ maxW: '6xl', px: '4' })}>
@@ -109,7 +111,8 @@ export default function HomePage() {
           </div>
         </div>
       </main>
-    </div>
+      </div>
+    </PageWithNav>
   )
 }