refactor(site): declutter and regroup the header navigation

site/src/components/sections/Nav.astro

@@ -1,17 +1,19 @@
 ---
 import ThemeToggle from '../ui/ThemeToggle.astro'
 
-const links = [
+// The header stays deliberately short. Links are grouped: in-page sections first
+// (in the order they appear as you scroll the home page), then standalone
+// destination pages. Everything else — Cloud, Plugins, React, Commitments,
+// Changelog, the SDK docs — lives in the footer.
+const homeLinks = [
   { href: '/#app', label: 'App' },
-  { href: '/react', label: 'React' },
-  { href: '/build-with', label: 'Build' },
-  { href: '/plugins', label: 'Plugins' },
   { href: '/#hubs', label: 'Teams' },
-  { href: '/cloud', label: 'Cloud' },
   { href: '/#vision', label: 'Vision' },
-  { href: '/commitments', label: 'Commitments' },
+]
+const pageLinks = [
+  { href: '/why', label: 'Why' },
+  { href: '/build-with', label: 'Build' },
   { href: '/blog', label: 'Blog' },
-  { href: '/changelog', label: 'Changelog' },
 ]
 ---
 
@@ -20,8 +22,14 @@ const links = [
     <a href="/" class="font-mono text-xl font-bold tracking-tight text-gray-900 dark:text-white hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">
       xNet
     </a>
-    <div class="flex items-center gap-6 text-sm">
-      {links.map(link => (
+    <div class="flex items-center gap-5 text-sm">
+      {homeLinks.map(link => (
+        <a href={link.href} class="hidden sm:inline text-gray-500 hover:text-gray-900 dark:hover:text-white transition-colors">
+          {link.label}
+        </a>
+      ))}
+      <span class="hidden sm:inline h-4 w-px bg-border" aria-hidden="true"></span>
+      {pageLinks.map(link => (
         <a href={link.href} class="hidden sm:inline text-gray-500 hover:text-gray-900 dark:hover:text-white transition-colors">
           {link.label}
         </a>
@@ -38,10 +46,10 @@ const links = [
       <ThemeToggle />
       <a
         href="https://github.com/crs48/xNet"
-        class="hidden sm:flex items-center gap-2 rounded-lg border border-border px-3 py-1.5 text-sm text-gray-600 dark:text-gray-300 hover:border-indigo-500/50 hover:bg-surface transition-all"
+        aria-label="xNet on GitHub"
+        class="hidden sm:flex items-center rounded-lg border border-border p-1.5 text-gray-600 dark:text-gray-300 hover:border-indigo-500/50 hover:bg-surface transition-all"
       >
         <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
-        GitHub
       </a>
     </div>
   </nav>

site/src/data/changelog/2026-06-27-a-tidier-site-header.json

@@ -0,0 +1,10 @@
+{
+  "id": "2026-06-27-a-tidier-site-header",
+  "date": "June 27, 2026",
+  "title": "A tidier site header",
+  "summary": "The top navigation is shorter and better organized: home-page sections (App, Teams, Vision) come first, then key pages (Why, Build, Blog). Cloud, Plugins, React, Commitments, and the changelog moved to the footer.",
+  "highlights": [],
+  "tags": [
+    "platform"
+  ]
+}