refactor: centralize public site navigation
This commit is contained in:
parent
bda36efcb7
commit
89aa6411b0
49
frontend/src/components/PublicSiteNav.tsx
Normal file
49
frontend/src/components/PublicSiteNav.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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'>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user