refactor: centralize public site navigation

This commit is contained in:
Flatlogic Bot 2026-06-11 12:44:44 +00:00
parent bda36efcb7
commit 89aa6411b0
6 changed files with 59 additions and 196 deletions

View File

@ -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>
);
}

View File

@ -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>

View File

@ -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>

View File

@ -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'>
<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>
<PublicSiteNav />
<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'>

View File

@ -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>

View File

@ -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>