597 lines
22 KiB
TypeScript
597 lines
22 KiB
TypeScript
import React from 'react';
|
|
import type { ReactElement } from 'react';
|
|
import Head from 'next/head';
|
|
import Link from 'next/link';
|
|
import LayoutGuest from '../layouts/Guest';
|
|
import { getPageTitle } from '../config';
|
|
|
|
const ui = {
|
|
page: 'bg-[#fffdf9] text-[#19192d]',
|
|
banner: 'bg-[#19192d] text-white',
|
|
navShell: 'rounded-none bg-white ring-1 ring-[#19192d]/5',
|
|
ink: 'text-[#19192d]',
|
|
muted: 'text-[#72798a]',
|
|
accent: 'text-[#35b7a5]',
|
|
gold: 'text-[#35b7a5]',
|
|
border: 'border-[#19192d]/10',
|
|
surface: 'bg-white',
|
|
softSurface: 'bg-[#fffdf9]',
|
|
darkPanel: 'bg-[#19192d] text-white',
|
|
darkMuted: 'text-white/70',
|
|
button: 'bg-[#35b7a5] text-white transition hover:brightness-105',
|
|
section: 'mx-auto max-w-7xl px-5 py-20 lg:px-8',
|
|
card: 'rounded-none border border-[#19192d]/10 bg-white ',
|
|
softCard: 'rounded-none border border-[#19192d]/10 bg-[#fffdf9]',
|
|
overline: 'text-sm font-bold uppercase tracking-[0.28em] text-[#35b7a5]',
|
|
heading: 'font-serif font-semibold tracking-tight text-[#19192d]',
|
|
};
|
|
|
|
const trustItems = [
|
|
'Coach-reviewed AI',
|
|
'Private client records',
|
|
'Built for coaching',
|
|
];
|
|
|
|
const stats = [
|
|
[
|
|
'30 min',
|
|
'saved after every session with structured notes and follow-up drafts',
|
|
],
|
|
['23 days', 'between sessions where client momentum needs support'],
|
|
[
|
|
'6 outputs',
|
|
'summary, commitments, blockers, homework, prep, and client notes',
|
|
],
|
|
];
|
|
|
|
const workflow = [
|
|
[
|
|
'After every session',
|
|
'Capture themes, commitments, patterns, and follow-up copy while the coach stays present.',
|
|
],
|
|
[
|
|
'Between sessions',
|
|
'Keep clients connected to approved notes, resources, and action items inside their portal.',
|
|
],
|
|
[
|
|
'Before the next session',
|
|
'Surface open commitments, recent patterns, and a focused opening question.',
|
|
],
|
|
];
|
|
|
|
const trustCards = [
|
|
[
|
|
'Your method',
|
|
'Capture language, frameworks, and recurring patterns from real sessions.',
|
|
],
|
|
[
|
|
'Your approval',
|
|
'Review notes, prompts, resources, and messages before they reach the client.',
|
|
],
|
|
[
|
|
'Your data',
|
|
'Keep client records structured around confidentiality and role-based access.',
|
|
],
|
|
[
|
|
'Your client portal',
|
|
'Share only the commitments, resources, and reflections that move the work forward.',
|
|
],
|
|
];
|
|
|
|
const testimonials = [
|
|
[
|
|
'The session recap caught the exact leadership pattern I wanted to revisit. I edited one sentence and sent it.',
|
|
'Ari Morgan',
|
|
'Executive Coach',
|
|
],
|
|
[
|
|
'My clients finally have one place for notes, commitments, and the resources I share after each call.',
|
|
'Leah Stone',
|
|
'Founder Coach',
|
|
],
|
|
[
|
|
'Prep used to mean hunting through old docs. Now I start every session with the thread already visible.',
|
|
'Daniel Reyes',
|
|
'Leadership Advisor',
|
|
],
|
|
];
|
|
|
|
function WaveDivider({
|
|
from = '#fffdf9',
|
|
to = '#19192d',
|
|
flip = false,
|
|
}: {
|
|
from?: string;
|
|
to?: string;
|
|
flip?: boolean;
|
|
}) {
|
|
return (
|
|
<div
|
|
className='relative h-28 overflow-hidden'
|
|
style={{ backgroundColor: from }}
|
|
>
|
|
<svg
|
|
className={`absolute inset-x-0 bottom-0 h-full w-full ${flip ? 'rotate-180' : ''}`}
|
|
viewBox='0 0 1440 160'
|
|
preserveAspectRatio='none'
|
|
aria-hidden='true'
|
|
>
|
|
<path
|
|
fill={to}
|
|
d='M0,96 C180,122 330,136 520,124 C720,112 865,58 1090,72 C1248,82 1356,106 1440,96 L1440,160 L0,160 Z'
|
|
/>
|
|
</svg>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function Starter() {
|
|
return (
|
|
<>
|
|
<Head>
|
|
<title>{getPageTitle('Coaching Workspace')}</title>
|
|
</Head>
|
|
|
|
<main className={`min-h-screen ${ui.page}`}>
|
|
<div className={`${ui.banner} px-5 py-4 text-center text-lg`}>
|
|
<p className='text-xs font-bold uppercase tracking-[0.34em]'>
|
|
Still human
|
|
</p>
|
|
<p className='mt-2 text-xl font-medium md:text-2xl'>
|
|
AI is not a coach. Keep the real relationship at the center.
|
|
</p>
|
|
<p className='mt-2 text-base text-white/90 md:text-lg'>
|
|
Launch a modern coaching workspace.
|
|
<Link
|
|
href='/login/'
|
|
className='ml-2 font-semibold underline decoration-white underline-offset-4'
|
|
>
|
|
Open workspace
|
|
</Link>
|
|
</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/'>Services</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/'>Services</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'>
|
|
<p className={`mb-6 ${ui.overline}`}>
|
|
For leadership and executive coaches
|
|
</p>
|
|
<h1
|
|
className={`${ui.heading} text-5xl leading-[1.08] md:text-6xl xl:text-[5.4rem]`}
|
|
>
|
|
What happens when your best coaching{' '}
|
|
<span className={ui.accent}>keeps going.</span>
|
|
</h1>
|
|
<p
|
|
className={`mx-auto mt-7 max-w-3xl text-xl leading-8 md:text-2xl md:leading-9 ${ui.muted}`}
|
|
>
|
|
Show up fully present. No note-taking. No admin. Your workspace
|
|
captures what makes your coaching yours, so clients stay connected
|
|
to the work between sessions.
|
|
</p>
|
|
<div className='mt-9 flex justify-center'>
|
|
<Link
|
|
href='/intake/'
|
|
className={`rounded-none px-10 py-5 text-lg font-semibold ${ui.button}`}
|
|
>
|
|
Start assessment
|
|
</Link>
|
|
</div>
|
|
<p className={`mt-5 text-lg ${ui.muted}`}>
|
|
$14/client/month. Everything included.
|
|
</p>
|
|
<div
|
|
className={`mx-auto mt-7 flex max-w-3xl flex-wrap justify-center gap-x-9 gap-y-4 text-lg ${ui.muted}`}
|
|
>
|
|
{trustItems.map((item) => (
|
|
<span key={item} className='flex items-center gap-2'>
|
|
<span className={ui.accent}>✦</span>
|
|
{item}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className='relative mx-auto mt-12 max-w-4xl'>
|
|
<div
|
|
className={`relative rounded-none border p-4 ${ui.border} ${ui.surface}`}
|
|
>
|
|
<div className={`rounded-none p-4 ${ui.darkPanel}`}>
|
|
<div className='mb-4 flex items-center justify-between'>
|
|
<div>
|
|
<p className='text-xs uppercase tracking-[0.16em] text-[#35b7a5]'>
|
|
Session insights
|
|
</p>
|
|
<h2 className='mt-1 text-2xl font-semibold'>
|
|
Maya Chen · Session 4
|
|
</h2>
|
|
</div>
|
|
<span className='rounded-none bg-[#35b7a5] px-3 py-1 text-sm font-semibold text-white'>
|
|
Review
|
|
</span>
|
|
</div>
|
|
|
|
<div className='grid grid-cols-1 gap-3 md:grid-cols-3'>
|
|
{[
|
|
'Delegation trust',
|
|
'Decision rights',
|
|
'Founder visibility',
|
|
].map((topic) => (
|
|
<div key={topic} className='rounded-none bg-white/10 p-4'>
|
|
<p className='text-sm font-medium text-white'>{topic}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className='mt-4 rounded-none bg-white p-5 text-[#19192d]'>
|
|
<p
|
|
className={`text-sm font-semibold uppercase tracking-[0.14em] ${ui.gold}`}
|
|
>
|
|
Commitments
|
|
</p>
|
|
<ul className='mt-4 space-y-3 text-sm leading-6'>
|
|
<li>Draft a decision-rights matrix before Friday.</li>
|
|
<li>
|
|
Choose three decisions the team can own without founder
|
|
approval.
|
|
</li>
|
|
<li>Review customer escalation rules with the COO.</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div className='mt-4 grid grid-cols-1 gap-4 lg:grid-cols-[0.9fr_1.1fr]'>
|
|
<div className='rounded-none bg-white/10 p-5'>
|
|
<p className='text-sm font-semibold text-[#35b7a5]'>
|
|
Pattern
|
|
</p>
|
|
<p className={`mt-2 leading-7 ${ui.darkMuted}`}>
|
|
Maya is moving from control as quality assurance toward
|
|
explicit decision boundaries.
|
|
</p>
|
|
</div>
|
|
<div className='rounded-none bg-white/10 p-5'>
|
|
<p className='text-sm font-semibold text-[#35b7a5]'>
|
|
Follow-up draft
|
|
</p>
|
|
<p className={`mt-2 leading-7 ${ui.darkMuted}`}>
|
|
This week is about making delegation visible enough that
|
|
trust can become operational.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
className={`absolute -bottom-8 right-8 hidden w-80 p-5 text-left lg:block ${ui.card}`}
|
|
>
|
|
<p
|
|
className={`text-xs font-semibold uppercase tracking-[0.16em] ${ui.gold}`}
|
|
>
|
|
Client message
|
|
</p>
|
|
<p className={`mt-3 leading-7 ${ui.muted}`}>
|
|
“The board conversation went better than expected. I led with
|
|
the narrative instead of defending the roadmap.”
|
|
</p>
|
|
<p
|
|
className={`mt-4 rounded-none p-3 text-sm font-medium ${ui.softSurface}`}
|
|
>
|
|
Suggested reply: What changed in the room when you led that
|
|
way?
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section
|
|
className={`border-y px-5 py-10 ${ui.border} ${ui.softSurface}`}
|
|
>
|
|
<div className='mx-auto grid max-w-7xl grid-cols-1 gap-6 md:grid-cols-3'>
|
|
{stats.map(([value, label]) => (
|
|
<div key={value} className={`border-l pl-5 ${ui.border}`}>
|
|
<p className={`${ui.heading} text-5xl`}>{value}</p>
|
|
<p className={`mt-3 max-w-sm leading-7 ${ui.muted}`}>{label}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
<section id='how-it-works' className={ui.section}>
|
|
<div className='grid grid-cols-1 gap-10 lg:grid-cols-[0.8fr_1.2fr]'>
|
|
<div>
|
|
<p className={ui.overline}>The new practice rhythm</p>
|
|
<h2
|
|
className={`${ui.heading} mt-4 text-5xl leading-tight md:text-6xl`}
|
|
>
|
|
Before, between, and after every session.
|
|
</h2>
|
|
</div>
|
|
<div className='grid grid-cols-1 gap-4'>
|
|
{workflow.map(([title, copy], index) => (
|
|
<div
|
|
key={title}
|
|
className={`grid grid-cols-[3rem_1fr] gap-5 p-5 ${ui.card}`}
|
|
>
|
|
<div className='flex h-12 w-12 items-center justify-center rounded-none bg-[#35b7a5] font-semibold text-white'>
|
|
{index + 1}
|
|
</div>
|
|
<div>
|
|
<h3 className='text-xl font-semibold'>{title}</h3>
|
|
<p className={`mt-2 leading-7 ${ui.muted}`}>{copy}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<WaveDivider from='#fffdf9' to='#19192d' />
|
|
|
|
<section
|
|
id='session-memory'
|
|
className={`px-5 pb-20 pt-10 ${ui.darkPanel}`}
|
|
>
|
|
<div className='mx-auto grid max-w-7xl grid-cols-1 gap-10 lg:grid-cols-[0.95fr_1.05fr] lg:px-8'>
|
|
<div className='flex flex-col justify-center'>
|
|
<p className='text-sm font-semibold uppercase tracking-[0.18em] text-[#35b7a5]'>
|
|
Session memory
|
|
</p>
|
|
<h2 className='mt-4 font-serif text-5xl font-semibold leading-tight md:text-6xl'>
|
|
Stop opening old notes before every call.
|
|
</h2>
|
|
<p className={`mt-6 text-lg leading-8 ${ui.darkMuted}`}>
|
|
The workspace pulls together open commitments, themes across
|
|
sessions, client messages, and a suggested opening question. You
|
|
review everything first.
|
|
</p>
|
|
<div className='mt-8 grid grid-cols-2 gap-4'>
|
|
{[
|
|
'Open commitments',
|
|
'Client patterns',
|
|
'Shared notes',
|
|
'Prep questions',
|
|
].map((item) => (
|
|
<div
|
|
key={item}
|
|
className='rounded-none border border-white/10 bg-white/5 p-4'
|
|
>
|
|
<p className='font-semibold'>{item}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
className={`rounded-none border p-5 ${ui.border} ${ui.surface} ${ui.ink}`}
|
|
>
|
|
<div
|
|
className={`flex flex-wrap items-center justify-between gap-4 border-b pb-5 ${ui.border}`}
|
|
>
|
|
<div>
|
|
<p
|
|
className={`text-sm font-semibold uppercase tracking-[0.16em] ${ui.gold}`}
|
|
>
|
|
Session prep
|
|
</p>
|
|
<h3 className='mt-1 text-2xl font-semibold'>
|
|
Maya Chen · Session 5
|
|
</h3>
|
|
</div>
|
|
<span className='rounded-none bg-[#fffdf9] px-4 py-2 text-sm font-semibold text-[#35b7a5]'>
|
|
Ready when you are
|
|
</span>
|
|
</div>
|
|
|
|
<div className='mt-5 grid grid-cols-3 gap-3'>
|
|
{[
|
|
['4', 'messages'],
|
|
['2', 'open commitments'],
|
|
['3', 'goals in focus'],
|
|
].map(([value, label]) => (
|
|
<div
|
|
key={label}
|
|
className={`rounded-none p-4 ${ui.softSurface}`}
|
|
>
|
|
<p className='text-3xl font-semibold'>{value}</p>
|
|
<p className={`mt-1 text-sm ${ui.muted}`}>{label}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className={`mt-5 rounded-none border p-5 ${ui.border}`}>
|
|
<p
|
|
className={`text-sm font-semibold uppercase tracking-[0.14em] ${ui.gold}`}
|
|
>
|
|
Top thread
|
|
</p>
|
|
<p className='mt-3 text-lg font-semibold'>
|
|
Decision rights are clear on paper, but still feel risky in
|
|
practice.
|
|
</p>
|
|
<p className={`mt-3 leading-7 ${ui.muted}`}>
|
|
The last two sessions both returned to trust, escalation
|
|
rules, and what Maya needs to see before stepping back.
|
|
</p>
|
|
</div>
|
|
|
|
<div className={`mt-5 rounded-none p-5 ${ui.darkPanel}`}>
|
|
<p className='text-sm font-semibold text-[#35b7a5]'>
|
|
Suggested opening
|
|
</p>
|
|
<p className='mt-3 text-xl leading-8'>
|
|
“Where did delegation feel cleaner this week, and where did
|
|
your body still want to take the wheel?”
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<WaveDivider from='#fffdf9' to='#19192d' flip />
|
|
|
|
<section id='trust' className={`${ui.section} pt-10`}>
|
|
<div className='grid grid-cols-1 gap-10 lg:grid-cols-[0.9fr_1.1fr]'>
|
|
<div>
|
|
<p className={ui.overline}>Coach supervised</p>
|
|
<h2
|
|
className={`${ui.heading} mt-4 text-5xl leading-tight md:text-6xl`}
|
|
>
|
|
The AI proposes. The coach decides.
|
|
</h2>
|
|
<p className={`mt-6 text-lg leading-8 ${ui.muted}`}>
|
|
Private notes stay private. Shared notes are approved.
|
|
Client-facing content carries the coach's voice, not a
|
|
generic chatbot voice.
|
|
</p>
|
|
</div>
|
|
<div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
|
|
{trustCards.map(([title, copy]) => (
|
|
<div key={title} className={`p-6 ${ui.card}`}>
|
|
<h3 className='text-xl font-semibold'>{title}</h3>
|
|
<p className={`mt-3 leading-7 ${ui.muted}`}>{copy}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id='events' className={`px-5 py-20 ${ui.softSurface}`}>
|
|
<div className='mx-auto max-w-7xl'>
|
|
<div className='mb-8 flex flex-col justify-between gap-4 md:flex-row md:items-end'>
|
|
<div>
|
|
<p className={ui.overline}>Built with coaches</p>
|
|
<h2 className={`${ui.heading} mt-4 text-5xl`}>
|
|
Designed for real client work.
|
|
</h2>
|
|
</div>
|
|
<Link
|
|
href='/intake/'
|
|
className={`rounded-none px-6 py-3 text-center font-semibold ${ui.button}`}
|
|
>
|
|
Start your workspace
|
|
</Link>
|
|
</div>
|
|
<div className='grid grid-cols-1 gap-4 md:grid-cols-3'>
|
|
{testimonials.map(([quote, name, role]) => (
|
|
<figure key={name} className={`p-6 ${ui.card}`}>
|
|
<blockquote className={`leading-8 ${ui.ink}`}>
|
|
“{quote}”
|
|
</blockquote>
|
|
<figcaption className='mt-6'>
|
|
<p className='font-semibold'>{name}</p>
|
|
<p className={`text-sm ${ui.muted}`}>{role}</p>
|
|
</figcaption>
|
|
</figure>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id='pricing' className='px-5 py-20'>
|
|
<div
|
|
className={`mx-auto grid max-w-7xl grid-cols-1 overflow-hidden rounded-none border lg:grid-cols-[0.9fr_1.1fr] ${ui.border} ${ui.darkPanel}`}
|
|
>
|
|
<div className='p-8 md:p-12'>
|
|
<p className='text-sm font-semibold uppercase tracking-[0.18em] text-[#35b7a5]'>
|
|
Template package
|
|
</p>
|
|
<h2 className='mt-4 font-serif text-5xl font-semibold leading-tight'>
|
|
Launch a coaching practice with the workspace already inside.
|
|
</h2>
|
|
</div>
|
|
<div className={`p-8 md:p-12 ${ui.surface} ${ui.ink}`}>
|
|
<h3 className='text-2xl font-semibold'>Executive Momentum</h3>
|
|
<p className={`mt-3 leading-7 ${ui.muted}`}>
|
|
A ready-made package page, client records, session memory, prep
|
|
briefs, resources, and portal flow.
|
|
</p>
|
|
<div className='mt-7 grid grid-cols-1 gap-3 sm:grid-cols-2'>
|
|
{[
|
|
'6 coaching sessions',
|
|
'AI-assisted session notes',
|
|
'Shared resources',
|
|
'Client portal access',
|
|
].map((item) => (
|
|
<div
|
|
key={item}
|
|
className={`rounded-none p-4 font-medium ${ui.softSurface}`}
|
|
>
|
|
{item}
|
|
</div>
|
|
))}
|
|
</div>
|
|
<Link
|
|
href='/intake/'
|
|
className={`mt-8 inline-flex rounded-none px-7 py-4 font-semibold ${ui.button}`}
|
|
>
|
|
Create workspace
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<footer className={`border-t px-5 py-10 ${ui.border}`}>
|
|
<div
|
|
className={`mx-auto flex max-w-7xl flex-col justify-between gap-5 text-sm md:flex-row ${ui.muted}`}
|
|
>
|
|
<p>© 2026 Coaching SaaS Workspace. Coaching beyond the session.</p>
|
|
<div className='flex gap-5'>
|
|
<Link href='/privacy-policy/'>Privacy Policy</Link>
|
|
<Link href='/terms-of-use/'>Terms of Use</Link>
|
|
<Link href='/about/'>About</Link>
|
|
<Link href='/services/'>Services</Link>
|
|
<Link href='/login/'>Login</Link>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</main>
|
|
</>
|
|
);
|
|
}
|
|
|
|
Starter.getLayout = function getLayout(page: ReactElement) {
|
|
return <LayoutGuest>{page}</LayoutGuest>;
|
|
};
|