fix: reorder navbar for better UX and logical grouping

Closes #7

New order:
- Core Product: Tools, Agents, How It Works, Playground, Integrations
- Separator
- Developer Section: Docs, SDK, Spec, Changelog, FAQ, Stats

Changes:
- Reorder links in AppHeader for desktop navigation
- Add visual separator between product and developer sections
- Make Tools/Agents links bold for visual hierarchy
- Update MobileMenu with same ordering

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

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

apps/web/src/components/AppHeader.tsx

@@ -32,39 +32,48 @@ export function AppHeader(): React.ReactElement {
           <>
             {/* Desktop Navigation - hidden on mobile */}
             <div className="hidden md:flex items-center gap-4">
+              {/* Core Product Links */}
               <Link href="/tool/tool-search">
-                <Button variant="ghost" size="sm" className="text-foreground hover:text-foreground">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="text-foreground hover:text-foreground font-semibold"
+                >
                   Tools
                 </Button>
               </Link>
               <Link href="/dashboard/agents">
-                <Button variant="ghost" size="sm" className="text-foreground hover:text-foreground">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="text-foreground hover:text-foreground font-semibold"
+                >
                   Agents
                 </Button>
               </Link>
-              <Link href="/docs">
-                <Button variant="ghost" size="sm" className="text-foreground hover:text-foreground">
-                  Docs
-                </Button>
-              </Link>
               <Link href="/how-it-works">
                 <Button variant="ghost" size="sm" className="text-foreground hover:text-foreground">
                   How It Works
                 </Button>
               </Link>
-              <Link href="/integrations">
-                <Button variant="ghost" size="sm" className="text-foreground hover:text-foreground">
-                  Integrations
-                </Button>
-              </Link>
               <a href="https://playground.tpmjs.com" target="_blank" rel="noopener noreferrer">
                 <Button variant="ghost" size="sm" className="text-foreground hover:text-foreground">
                   Playground
                 </Button>
               </a>
-              <Link href="/spec">
+              <Link href="/integrations">
                 <Button variant="ghost" size="sm" className="text-foreground hover:text-foreground">
-                  Spec
+                  Integrations
+                </Button>
+              </Link>
+
+              {/* Separator */}
+              <span className="text-foreground-tertiary">|</span>
+
+              {/* Developer Section */}
+              <Link href="/docs">
+                <Button variant="ghost" size="sm" className="text-foreground hover:text-foreground">
+                  Docs
                 </Button>
               </Link>
               <Link href="/sdk">
@@ -72,6 +81,16 @@ export function AppHeader(): React.ReactElement {
                   SDK
                 </Button>
               </Link>
+              <Link href="/spec">
+                <Button variant="ghost" size="sm" className="text-foreground hover:text-foreground">
+                  Spec
+                </Button>
+              </Link>
+              <Link href="/changelog">
+                <Button variant="ghost" size="sm" className="text-foreground hover:text-foreground">
+                  Changelog
+                </Button>
+              </Link>
               <Link href="/faq">
                 <Button variant="ghost" size="sm" className="text-foreground hover:text-foreground">
                   FAQ
@@ -82,11 +101,6 @@ export function AppHeader(): React.ReactElement {
                   Stats
                 </Button>
               </Link>
-              <Link href="/changelog">
-                <Button variant="ghost" size="sm" className="text-foreground hover:text-foreground">
-                  Changelog
-                </Button>
-              </Link>
               <a
                 href="https://discord.gg/KuJRBCn89c"
                 target="_blank"

apps/web/src/components/MobileMenu.tsx

@@ -12,17 +12,19 @@ interface MobileMenuProps {
 }
 
 const navLinks = [
+  // Core Product Links
   { href: '/tool/tool-search', label: 'Tools' },
   { href: '/dashboard/agents', label: 'Agents' },
-  { href: '/docs', label: 'Docs' },
   { href: '/how-it-works', label: 'How It Works' },
-  { href: '/integrations', label: 'Integrations' },
   { href: 'https://playground.tpmjs.com', label: 'Playground', external: true },
-  { href: '/spec', label: 'Spec' },
+  { href: '/integrations', label: 'Integrations' },
+  // Developer Section
+  { href: '/docs', label: 'Docs' },
   { href: '/sdk', label: 'SDK' },
+  { href: '/spec', label: 'Spec' },
+  { href: '/changelog', label: 'Changelog' },
   { href: '/faq', label: 'FAQ' },
   { href: '/stats', label: 'Stats' },
-  { href: '/changelog', label: 'Changelog' },
 ];
 
 const socialLinks = [