fix(site): make the docs and landing navbars identical (#25)

Co-authored-by: Alice <alice@prismshadow.com>
Co-authored-by: Claude Fable 5 <noreply@anthropic.com>

packages/landing/src/components/footer.tsx

@@ -1,4 +1,8 @@
-/** Site footer: brand + product/resource link columns + copyright. */
+/**
+ * Site footer: brand + product/resource link columns + copyright. The container is
+ * max-w-7xl to frame the page like the nav (chrome shared with the docs site), while
+ * content sections stay max-w-6xl.
+ */
 import { Link } from "react-router";
 import { S } from "../lib/strings";
 import { DOCS_URL, LICENSE_URL, RELEASES_URL, REPO_URL } from "../lib/links";
@@ -12,7 +16,7 @@ export function Footer() {
 
   return (
     <footer className="border-t border-gray-200 dark:border-gray-800">
-      <div className="mx-auto max-w-6xl px-4 py-12 sm:px-6">
+      <div className="mx-auto max-w-7xl px-4 py-12 sm:px-6">
         <div className="flex flex-col gap-10 sm:flex-row sm:justify-between">
           <div className="max-w-xs">
             <div className="flex items-center gap-2">

packages/landing/src/components/lang-toggle.tsx

@@ -47,7 +47,7 @@ export function LangToggle() {
       {open && (
         <div
           role="menu"
-          className="anim-pop absolute right-0 z-40 mt-1 w-36 rounded-lg border border-gray-200 bg-white py-1 shadow-lg dark:border-gray-700 dark:bg-gray-900"
+          className="anim-fade absolute right-0 z-40 mt-1 w-36 rounded-lg border border-gray-200 bg-white py-1 shadow-lg dark:border-gray-700 dark:bg-gray-900"
         >
           {OPTIONS.map((o) => (
             <button

packages/landing/src/components/nav.tsx

@@ -5,6 +5,10 @@
  * LIVE scroll position (scroll-spy), so the highlight follows as you scroll; on other
  * routes it falls back to route state (e.g. Blog). Section links route through "/#id"
  * so the URL hash stays in sync on click. A disclosure menu covers small screens.
+ *
+ * The markup and class strings are duplicated verbatim in the docs nav
+ * (packages/docs/src/components/nav.tsx — the two sites share no package, as with
+ * site-prefs.ts); keep the two files aligned so the navbars render identically.
  */
 import { useRef, useState } from "react";
 import type { MouseEvent } from "react";
@@ -141,7 +145,7 @@ export function Nav() {
 
   return (
     <header className="sticky top-0 z-40 border-b border-gray-200 bg-white/85 backdrop-blur dark:border-gray-800 dark:bg-gray-950/85">
-      <div className="mx-auto flex h-14 max-w-6xl items-center gap-2 px-4 sm:px-6">
+      <div className="mx-auto flex h-14 max-w-7xl items-center gap-2 px-4 sm:px-6">
         <Link to="/" className="flex items-center gap-2" onClick={() => setOpen(false)}>
           <img src={`${import.meta.env.BASE_URL}penguin-logo.svg`} alt="" className="h-7 w-7" />
           <span className="text-[15px] font-semibold tracking-tight">{S.siteName}</span>