refactor: centralize public site navigation

frontend/src/components/PublicSiteNav.tsx

@@ -0,0 +1,49 @@
+import Link from 'next/link';
+
+const links = [
+  { href: '/how-it-works/', label: 'How it works' },
+  { href: '/about/', label: 'About' },
+  { href: '/services/', label: 'Packages' },
+  { href: '/client-portal/', label: 'Client login' },
+];
+
+export default function PublicSiteNav() {
+  return (
+    <header className='sticky top-3 z-50 px-5 pt-5'>
+      <div className='mx-auto flex max-w-6xl items-center justify-between gap-4 rounded-none bg-white px-4 py-2.5 ring-1 ring-[#19192d]/5 backdrop-blur-xl md:px-5 md:py-3'>
+        <Link
+          href='/'
+          className='flex items-center gap-3 text-lg font-semibold tracking-tight'
+        >
+          <span className='flex h-9 w-9 items-center justify-center rounded-none bg-[#fffdf9] text-xl font-black text-[#35b7a5]'>
+            C
+          </span>
+          <span className='sr-only'>Coaching SaaS Workspace</span>
+        </Link>
+
+        <nav className='hidden items-center gap-6 text-base font-medium text-[#19192d] md:flex'>
+          {links.map((item) => (
+            <Link key={item.href} href={item.href}>
+              {item.label}
+            </Link>
+          ))}
+        </nav>
+
+        <Link
+          href='/intake/'
+          className='rounded-none bg-[#35b7a5] px-5 py-2.5 text-sm font-semibold text-white transition hover:brightness-105'
+        >
+          Start assessment
+        </Link>
+      </div>
+
+      <nav className='mx-auto mt-2 flex max-w-6xl gap-4 overflow-x-auto border border-[#19192d]/10 bg-white px-4 py-3 text-sm font-semibold text-[#19192d] md:hidden'>
+        {links.map((item) => (
+          <Link key={item.href} href={item.href}>
+            {item.label}
+          </Link>
+        ))}
+      </nav>
+    </header>
+  );
+}

frontend/src/pages/about.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import type { ReactElement } from 'react';
 import Head from 'next/head';
 import Link from 'next/link';
+import PublicSiteNav from '../components/PublicSiteNav';
 import LayoutGuest from '../layouts/Guest';
 import { getPageTitle } from '../config';
 import { publicCoachSite } from '../coachingSite';
@@ -24,40 +25,6 @@ const ui = {
   heading: 'font-serif font-semibold tracking-tight text-[#19192d]',
 };
 
-function Nav() {
-  return (
-    <header className='sticky top-3 z-50 px-5 pt-5'>
-      <div
-        className={`mx-auto flex max-w-6xl items-center justify-between gap-4 px-4 py-2.5 backdrop-blur-xl md:px-5 md:py-3 ${ui.navShell}`}
-      >
-        <Link href='/' className='flex items-center gap-3 text-lg font-semibold'>
-          <span className='flex h-9 w-9 items-center justify-center rounded-none bg-[#fffdf9] text-xl font-black text-[#35b7a5]'>
-            C
-          </span>
-          <span className='sr-only'>Coaching Workspace</span>
-        </Link>
-        <nav className={`hidden items-center gap-6 text-base font-medium ${ui.ink} md:flex`}>
-          <Link href='/how-it-works/'>How it works</Link>
-          <Link href='/about/'>About</Link>
-          <Link href='/services/'>Packages</Link>
-          <Link href='/client-portal/'>Client login</Link>
-        </nav>
-        <Link href='/intake/' className={`rounded-none px-5 py-2.5 text-sm font-semibold ${ui.button}`}>
-          Start assessment
-        </Link>
-      </div>
-      <nav
-        className={`mx-auto mt-2 flex max-w-6xl gap-4 overflow-x-auto border border-[#19192d]/10 bg-white px-4 py-3 text-sm font-semibold ${ui.ink} md:hidden`}
-      >
-        <Link href='/how-it-works/'>How it works</Link>
-        <Link href='/about/'>About</Link>
-        <Link href='/services/'>Packages</Link>
-        <Link href='/client-portal/'>Client login</Link>
-      </nav>
-    </header>
-  );
-}
-
 export default function AboutCoach() {
   return (
     <>
@@ -75,7 +42,7 @@ export default function AboutCoach() {
           </p>
         </div>
 
-        <Nav />
+        <PublicSiteNav />
 
         <section className={`${ui.section} grid gap-12 lg:grid-cols-[0.9fr_1.1fr] lg:items-center`}>
           <div>

frontend/src/pages/how-it-works.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import type { ReactElement } from 'react';
 import Head from 'next/head';
 import Link from 'next/link';
+import PublicSiteNav from '../components/PublicSiteNav';
 import LayoutGuest from '../layouts/Guest';
 import { getPageTitle } from '../config';
 
@@ -149,50 +150,6 @@ const faq = [
   ],
 ];
 
-function Nav() {
-  return (
-    <header className='sticky top-3 z-50 px-5 pt-5'>
-      <div
-        className={`mx-auto flex max-w-6xl items-center justify-between gap-4 px-4 py-2.5 backdrop-blur-xl md:px-5 md:py-3 ${ui.navShell}`}
-      >
-        <Link
-          href='/'
-          className='flex items-center gap-3 text-lg font-semibold tracking-tight'
-        >
-          <span className='flex h-9 w-9 items-center justify-center rounded-none bg-[#fffdf9] text-xl font-black text-[#35b7a5]'>
-            C
-          </span>
-          <span className='sr-only'>Coaching SaaS Workspace</span>
-        </Link>
-        <nav
-          className={`hidden items-center gap-6 text-base font-medium ${ui.ink} md:flex`}
-        >
-          <Link href='/how-it-works/'>How it works</Link>
-          <Link href='/about/'>About</Link>
-          <Link href='/services/'>Packages</Link>
-          <Link href='/client-portal/'>Client login</Link>
-          <a href='#client-experience'>Compare</a>
-          <a href='#control'>Trust</a>
-        </nav>
-        <Link
-          href='/intake/'
-          className={`rounded-none px-5 py-2.5 text-sm font-semibold ${ui.button}`}
-        >
-          Start assessment
-        </Link>
-      </div>
-      <nav
-        className={`mx-auto mt-2 flex max-w-6xl gap-4 overflow-x-auto border border-[#19192d]/10 bg-white px-4 py-3 text-sm font-semibold ${ui.ink} md:hidden`}
-      >
-        <Link href='/how-it-works/'>How it works</Link>
-        <Link href='/about/'>About</Link>
-        <Link href='/services/'>Packages</Link>
-        <Link href='/client-portal/'>Client login</Link>
-      </nav>
-    </header>
-  );
-}
-
 function WaveDivider({
   from = '#fffdf9',
   to = '#19192d',
@@ -458,7 +415,7 @@ export default function HowItWorks() {
           </p>
         </div>
 
-        <Nav />
+        <PublicSiteNav />
 
         <section className='mx-auto max-w-6xl px-5 pb-16 pt-14 text-center lg:px-8'>
           <p className={ui.overline}>How it works</p>

frontend/src/pages/index.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import type { ReactElement } from 'react';
 import Head from 'next/head';
 import Link from 'next/link';
+import PublicSiteNav from '../components/PublicSiteNav';
 import LayoutGuest from '../layouts/Guest';
 import { getPageTitle } from '../config';
 
@@ -175,46 +176,7 @@ export default function Starter() {
           </p>
         </div>
 
-        <header className='sticky top-3 z-50 px-5 pt-5'>
+        <PublicSiteNav />
-          <div
-            className={`mx-auto flex max-w-6xl items-center justify-between gap-4 px-4 py-2.5 backdrop-blur-xl md:px-5 md:py-3 ${ui.navShell}`}
-          >
-            <Link
-              href='/'
-              className='flex items-center gap-3 text-lg font-semibold tracking-tight'
-            >
-              <span className='flex h-9 w-9 items-center justify-center rounded-none bg-[#fffdf9] text-xl font-black text-[#35b7a5]'>
-                C
-              </span>
-              <span className='sr-only'>Coaching SaaS Workspace</span>
-            </Link>
-            <nav
-              className={`hidden items-center gap-6 text-base font-medium ${ui.ink} md:flex`}
-            >
-              <Link href='/how-it-works/'>How it works</Link>
-              <Link href='/about/'>About</Link>
-              <Link href='/services/'>Packages</Link>
-              <Link href='/client-portal/'>Client login</Link>
-              <a href='#pricing'>Pricing</a>
-              <a href='#session-memory'>Compare</a>
-              <a href='#trust'>Trust</a>
-            </nav>
-            <Link
-              href='/intake/'
-              className={`rounded-none px-5 py-2.5 text-sm font-semibold ${ui.button}`}
-            >
-              Start assessment
-            </Link>
-          </div>
-          <nav
-            className={`mx-auto mt-2 flex max-w-6xl gap-4 overflow-x-auto border border-[#19192d]/10 bg-white px-4 py-3 text-sm font-semibold ${ui.ink} md:hidden`}
-          >
-            <Link href='/how-it-works/'>How it works</Link>
-            <Link href='/about/'>About</Link>
-            <Link href='/services/'>Packages</Link>
-            <Link href='/client-portal/'>Client login</Link>
-          </nav>
-        </header>
 
         <section className='mx-auto max-w-7xl px-5 pb-16 pt-7 text-center lg:px-8'>
           <div className='mx-auto max-w-4xl'>

frontend/src/pages/login.tsx

@@ -7,6 +7,7 @@ import { mdiEye, mdiEyeOff } from '@mdi/js';
 import { toast, ToastContainer } from 'react-toastify';
 import { useRouter } from 'next/router';
 import BaseIcon from '../components/BaseIcon';
+import PublicSiteNav from '../components/PublicSiteNav';
 import LayoutGuest from '../layouts/Guest';
 import { getPageTitle } from '../config';
 import { findMe, loginUser, resetAction } from '../stores/authSlice';
@@ -57,46 +58,6 @@ const demoAccounts = [
   },
 ];
 
-function Nav() {
-  return (
-    <header className='sticky top-3 z-50 px-5 pt-5'>
-      <div
-        className={`mx-auto flex max-w-6xl items-center justify-between gap-4 px-4 py-2.5 backdrop-blur-xl md:px-5 md:py-3 ${ui.navShell}`}
-      >
-        <Link
-          href='/'
-          className='flex items-center gap-3 text-lg font-semibold tracking-tight'
-        >
-          <span className='flex h-9 w-9 items-center justify-center rounded-none bg-[#fffdf9] text-xl font-black text-[#35b7a5]'>
-            C
-          </span>
-          <span className='sr-only'>Coaching SaaS Workspace</span>
-        </Link>
-        <nav
-          className={`hidden items-center gap-6 text-base font-medium ${ui.ink} md:flex`}
-        >
-          <Link href='/how-it-works/'>How it works</Link>
-          <Link href='/about/'>About</Link>
-          <Link href='/services/'>Packages</Link>
-        </nav>
-        <Link
-          href='/intake/'
-          className={`rounded-none px-5 py-2.5 text-sm font-semibold ${ui.button}`}
-        >
-          Start assessment
-        </Link>
-      </div>
-      <nav
-        className={`mx-auto mt-2 flex max-w-6xl gap-4 overflow-x-auto border border-[#19192d]/10 bg-white px-4 py-3 text-sm font-semibold ${ui.ink} md:hidden`}
-      >
-        <Link href='/how-it-works/'>How it works</Link>
-        <Link href='/about/'>About</Link>
-        <Link href='/services/'>Packages</Link>
-      </nav>
-    </header>
-  );
-}
-
 export default function Login() {
   const router = useRouter();
   const dispatch = useAppDispatch();
@@ -166,7 +127,7 @@ export default function Login() {
           </p>
         </div>
 
-        <Nav />
+        <PublicSiteNav />
 
         <section className='mx-auto grid max-w-7xl grid-cols-1 items-center gap-12 px-5 pb-20 pt-14 lg:grid-cols-[0.95fr_1.05fr] lg:px-8'>
           <div>

frontend/src/pages/services.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import type { ReactElement } from 'react';
 import Head from 'next/head';
 import Link from 'next/link';
+import PublicSiteNav from '../components/PublicSiteNav';
 import LayoutGuest from '../layouts/Guest';
 import { getPageTitle } from '../config';
 import { publicCoachSite } from '../coachingSite';
@@ -23,40 +24,6 @@ const ui = {
   heading: 'font-serif font-semibold tracking-tight text-[#19192d]',
 };
 
-function Nav() {
-  return (
-    <header className='sticky top-3 z-50 px-5 pt-5'>
-      <div
-        className={`mx-auto flex max-w-6xl items-center justify-between gap-4 px-4 py-2.5 backdrop-blur-xl md:px-5 md:py-3 ${ui.navShell}`}
-      >
-        <Link href='/' className='flex items-center gap-3 text-lg font-semibold'>
-          <span className='flex h-9 w-9 items-center justify-center rounded-none bg-[#fffdf9] text-xl font-black text-[#35b7a5]'>
-            C
-          </span>
-          <span className='sr-only'>Coaching Workspace</span>
-        </Link>
-        <nav className={`hidden items-center gap-6 text-base font-medium ${ui.ink} md:flex`}>
-          <Link href='/how-it-works/'>How it works</Link>
-          <Link href='/about/'>About</Link>
-          <Link href='/services/'>Packages</Link>
-          <Link href='/client-portal/'>Client login</Link>
-        </nav>
-        <Link href='/intake/' className={`rounded-none px-5 py-2.5 text-sm font-semibold ${ui.button}`}>
-          Start assessment
-        </Link>
-      </div>
-      <nav
-        className={`mx-auto mt-2 flex max-w-6xl gap-4 overflow-x-auto border border-[#19192d]/10 bg-white px-4 py-3 text-sm font-semibold ${ui.ink} md:hidden`}
-      >
-        <Link href='/how-it-works/'>How it works</Link>
-        <Link href='/about/'>About</Link>
-        <Link href='/services/'>Packages</Link>
-        <Link href='/client-portal/'>Client login</Link>
-      </nav>
-    </header>
-  );
-}
-
 export default function Services() {
   return (
     <>
@@ -74,7 +41,7 @@ export default function Services() {
           </p>
         </div>
 
-        <Nav />
+        <PublicSiteNav />
 
         <section className={`${ui.section} text-center`}>
           <p className={ui.overline}>Coaching offers</p>