788 lines
29 KiB
TypeScript
788 lines
29 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 weekSteps = [
|
|
{
|
|
eyebrow: 'Session day',
|
|
title: 'You coach. The workspace captures.',
|
|
copy: 'Run the session the way you already do. Drop in raw notes, transcript snippets, or a quick debrief, then let the workspace organize themes, commitments, breakthroughs, and follow-up opportunities.',
|
|
proof: 'Zero extra admin after the session you already ran.',
|
|
mockup: 'capture',
|
|
},
|
|
{
|
|
eyebrow: 'After',
|
|
title: 'Review the notes before anything is shared.',
|
|
copy: 'Session memory turns rough material into coach-readable notes: summary, patterns, commitments, homework, and follow-up copy. You edit what needs your voice and approve only what is ready.',
|
|
proof: 'Nothing reaches the client without your explicit action.',
|
|
mockup: 'review',
|
|
},
|
|
{
|
|
eyebrow: 'Between',
|
|
title: 'Your client stays connected to the work.',
|
|
copy: 'Clients keep seeing approved prompts, resources, and action items that reference the real language of their sessions. The support feels like it comes from the coach, not a generic chatbot.',
|
|
proof: 'You stay present without manually texting every follow-up.',
|
|
mockup: 'between',
|
|
},
|
|
{
|
|
eyebrow: 'Before next',
|
|
title: 'Walk in with the thread already visible.',
|
|
copy: 'Before the next session, prep briefs surface what happened last time, what changed since, what is still open, and where the next conversation could start.',
|
|
proof: 'No more spending the first 15 minutes reconnecting.',
|
|
mockup: 'prep',
|
|
},
|
|
{
|
|
eyebrow: 'Ongoing',
|
|
title: 'Your method becomes a reusable client space.',
|
|
copy: 'When the engagement ends, the same client portal can keep approved notes, resources, commitments, and coaching context in one place.',
|
|
proof: 'A cleaner client experience and a stronger coaching signature.',
|
|
mockup: 'space',
|
|
},
|
|
];
|
|
|
|
const processSteps = [
|
|
{
|
|
title: 'Assessment',
|
|
copy: 'A prospective client submits goals, role context, current pressure points, and what they want from coaching.',
|
|
output: 'Intake lead and prep context for the coach.',
|
|
},
|
|
{
|
|
title: 'Coaching engagement',
|
|
copy: 'The coach converts the lead into a client workspace, runs sessions, and keeps relationship context in one place.',
|
|
output: 'Client profile, session history, resources, and commitments.',
|
|
},
|
|
{
|
|
title: 'Session memory',
|
|
copy: 'After each session, the coach records or uploads audio, reviews the transcript, and generates a coach-owned memory draft.',
|
|
output: 'Summary, topics, commitments, homework, quotes, and private coach notes.',
|
|
},
|
|
{
|
|
title: 'Approved follow-up',
|
|
copy: 'The coach edits what AI produced and chooses what becomes client-facing. Nothing is shared automatically.',
|
|
output: 'Approved notes, action items, resources, and follow-up copy.',
|
|
},
|
|
{
|
|
title: 'Client portal',
|
|
copy: 'The client logs in to see only the work the coach approved: shared notes, commitments, reflections, and resources.',
|
|
output: 'A private client area that keeps progress visible between sessions.',
|
|
},
|
|
];
|
|
|
|
const deeperItems = [
|
|
[
|
|
'Session Notes & Coaching Insights',
|
|
'What the AI extracts from raw notes and how the coach reviews it.',
|
|
],
|
|
[
|
|
'Between-Session Support',
|
|
'How approved reflection prompts and commitments keep clients moving.',
|
|
],
|
|
[
|
|
'Session Preparation',
|
|
'How briefs bring back context before the next call.',
|
|
],
|
|
[
|
|
'Client Portal',
|
|
'What your clients see after you share approved notes and resources.',
|
|
],
|
|
];
|
|
|
|
const clientExperience = [
|
|
[
|
|
'Your name, your voice',
|
|
'Clients see coaching support from you, reviewed and approved by you.',
|
|
],
|
|
[
|
|
'Connected to real sessions',
|
|
'Prompts reference actual goals, commitments, and language.',
|
|
],
|
|
[
|
|
'Private by default',
|
|
'Client records are organized around confidentiality and role-based access.',
|
|
],
|
|
[
|
|
'Easy to introduce',
|
|
'Use the portal as a clean home for notes, resources, and next actions.',
|
|
],
|
|
];
|
|
|
|
const faq = [
|
|
[
|
|
'How fast do I get the first session memory?',
|
|
'Paste notes or a transcript after a session and generate structured memory immediately.',
|
|
],
|
|
[
|
|
'Do coaches need to change their workflow?',
|
|
'No. The template supports raw notes, transcripts, resources, prep briefs, and client follow-up around the coaching workflow you already use.',
|
|
],
|
|
[
|
|
'Can the coach edit AI output?',
|
|
'Yes. Every generated insight, prompt, and shared note is meant to be reviewed before the client sees it.',
|
|
],
|
|
[
|
|
'Can I start with one client?',
|
|
'Yes. The workspace is built so a coach can test the full loop with a single client first.',
|
|
],
|
|
];
|
|
|
|
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',
|
|
flip = false,
|
|
}: {
|
|
from?: string;
|
|
to?: string;
|
|
flip?: boolean;
|
|
}) {
|
|
return (
|
|
<div
|
|
className='relative h-24 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>
|
|
);
|
|
}
|
|
|
|
function Mockup({ type }: { type: string }) {
|
|
if (type === 'capture') {
|
|
return (
|
|
<div className={`${ui.card} p-5`}>
|
|
<div className='flex items-center justify-between border-b border-[#19192d]/10 pb-4'>
|
|
<p className={`${ui.overline} text-xs`}>Recording</p>
|
|
<span className='rounded-none bg-[#fffdf9] px-3 py-1 text-sm font-semibold text-[#35b7a5]'>
|
|
Zoom connected
|
|
</span>
|
|
</div>
|
|
<div className='mt-6 text-center'>
|
|
<p className='font-serif text-6xl font-semibold'>38:12</p>
|
|
<p className={`mt-2 ${ui.muted}`}>
|
|
Session 4 · Leadership transition
|
|
</p>
|
|
</div>
|
|
<div className='mt-6 grid gap-3'>
|
|
{[
|
|
'Key themes & patterns',
|
|
'Client commitments',
|
|
'Breakthrough moments',
|
|
'Reflection opportunities',
|
|
].map((item) => (
|
|
<div
|
|
key={item}
|
|
className='flex items-center gap-3 rounded-none bg-[#fffdf9] p-3'
|
|
>
|
|
<span className='flex h-7 w-7 items-center justify-center rounded-none bg-[#35b7a5] text-sm text-white'>
|
|
✓
|
|
</span>
|
|
<span className='font-medium'>{item}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (type === 'review') {
|
|
return (
|
|
<div className={`${ui.card} p-5`}>
|
|
<p className={`${ui.overline} text-xs`}>Session notes</p>
|
|
<h3 className='mt-2 text-2xl font-semibold'>
|
|
Sarah Mitchell · Session 4
|
|
</h3>
|
|
<div className='mt-5 rounded-none bg-[#fffdf9] p-4'>
|
|
<p className='text-sm font-semibold text-[#35b7a5]'>Summary</p>
|
|
<p className='mt-2 leading-7'>
|
|
Explored over-preparing for presentations and the shift from proving
|
|
competence to trusting it.
|
|
</p>
|
|
</div>
|
|
<div className='mt-4 flex flex-wrap gap-2'>
|
|
{['Confidence', 'Delegation', 'Breakthrough'].map((item) => (
|
|
<span
|
|
key={item}
|
|
className='rounded-none bg-[#fffdf9] px-3 py-1 text-sm font-semibold text-[#35b7a5]'
|
|
>
|
|
{item}
|
|
</span>
|
|
))}
|
|
</div>
|
|
<div className='mt-5 flex gap-3'>
|
|
<button
|
|
className={`rounded-none px-5 py-3 font-semibold ${ui.button}`}
|
|
>
|
|
Looks good
|
|
</button>
|
|
<button className='rounded-none border border-[#19192d]/10 px-5 py-3 font-semibold'>
|
|
Edit
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (type === 'between') {
|
|
return (
|
|
<div className={`${ui.card} p-5`}>
|
|
<div className='mb-5 flex items-center justify-between'>
|
|
<p className={`${ui.overline} text-xs`}>Between sessions</p>
|
|
<span className={ui.muted}>Day 3</span>
|
|
</div>
|
|
<div className='space-y-4'>
|
|
<div className='rounded-none bg-[#fffdf9] p-4'>
|
|
<p className='text-sm font-semibold text-[#72798a]'>You sent</p>
|
|
<p className='mt-2 leading-7'>
|
|
Last session you mentioned confidence feels different in small
|
|
groups vs large meetings. What did you notice this week?
|
|
</p>
|
|
</div>
|
|
<div className='ml-8 rounded-none bg-white p-4 ring-1 ring-[#19192d]/10'>
|
|
<p className='text-sm font-semibold'>Sarah Mitchell</p>
|
|
<p className='mt-2 leading-7'>
|
|
I led the Monday standup and it felt easier. I think naming it
|
|
helped.
|
|
</p>
|
|
</div>
|
|
<div className='rounded-none bg-[#fffdf9] p-4'>
|
|
<p className='text-sm font-semibold text-[#35b7a5]'>
|
|
Coach-approved suggestion
|
|
</p>
|
|
<p className='mt-2 leading-7'>
|
|
That is a real shift. What made it feel easier?
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (type === 'prep') {
|
|
return (
|
|
<div className={`${ui.card} p-5`}>
|
|
<p className={`${ui.overline} text-xs`}>Prep brief</p>
|
|
<h3 className='mt-2 text-2xl font-semibold'>Session 5</h3>
|
|
<div className='mt-5 grid gap-3'>
|
|
<div className='rounded-none bg-[#fffdf9] p-4'>
|
|
<p className='font-semibold'>Last session themes</p>
|
|
<p className={`mt-2 ${ui.muted}`}>
|
|
Confidence · Delegation · Board presence
|
|
</p>
|
|
</div>
|
|
<div className='rounded-none bg-[#fffdf9] p-4'>
|
|
<p className='font-semibold'>Open commitments</p>
|
|
<p className={`mt-2 ${ui.muted}`}>
|
|
Lead Monday standup without notes. Delegate Q2 report.
|
|
</p>
|
|
</div>
|
|
<div className={`${ui.darkPanel} rounded-none p-4`}>
|
|
<p className='text-sm font-semibold text-[#35b7a5]'>
|
|
Suggested opening
|
|
</p>
|
|
<p className='mt-2 leading-7'>
|
|
How did the standup go? You sounded energized about it on Day 3.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className={`${ui.card} p-5`}>
|
|
<div className={`${ui.darkPanel} rounded-none p-5`}>
|
|
<p className='text-sm font-semibold uppercase tracking-[0.18em] text-[#35b7a5]'>
|
|
Your coaching space
|
|
</p>
|
|
<h3 className='mt-2 text-2xl font-semibold'>Sarah's Coaching</h3>
|
|
<p className={`mt-2 ${ui.darkMuted}`}>Private · coach-approved</p>
|
|
</div>
|
|
<div className='mt-4 space-y-3'>
|
|
{['Messages', 'Notes', 'Commitments', 'Resources'].map((item) => (
|
|
<div
|
|
key={item}
|
|
className='flex items-center justify-between rounded-none bg-[#fffdf9] p-4'
|
|
>
|
|
<span className='font-medium'>{item}</span>
|
|
<span className={ui.accent}>→</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function StepSection({
|
|
step,
|
|
index,
|
|
}: {
|
|
step: (typeof weekSteps)[number];
|
|
index: number;
|
|
}) {
|
|
const text = (
|
|
<div>
|
|
<p className={ui.overline}>{step.eyebrow}</p>
|
|
<p className={`mt-5 font-serif text-6xl font-semibold ${ui.accent}`}>
|
|
{index + 1}
|
|
</p>
|
|
<h2 className={`${ui.heading} mt-5 text-4xl leading-tight md:text-5xl`}>
|
|
{step.title}
|
|
</h2>
|
|
<p className={`mt-5 text-lg leading-8 ${ui.muted}`}>{step.copy}</p>
|
|
<p className='mt-6 rounded-none bg-[#fffdf9] px-5 py-4 font-semibold text-[#35b7a5]'>
|
|
{step.proof}
|
|
</p>
|
|
</div>
|
|
);
|
|
|
|
const visual = <Mockup type={step.mockup} />;
|
|
|
|
return (
|
|
<section className={ui.section}>
|
|
<div className='grid grid-cols-1 items-center gap-10 lg:grid-cols-2'>
|
|
{index % 2 === 0 ? (
|
|
<>
|
|
{text}
|
|
{visual}
|
|
</>
|
|
) : (
|
|
<>
|
|
<div className='lg:order-2'>{text}</div>
|
|
<div className='lg:order-1'>{visual}</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
export default function HowItWorks() {
|
|
return (
|
|
<>
|
|
<Head>
|
|
<title>{getPageTitle('How It Works')}</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>
|
|
|
|
<Nav />
|
|
|
|
<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>
|
|
<h1
|
|
className={`${ui.heading} mx-auto mt-6 max-w-5xl text-5xl leading-[1.08] md:text-7xl`}
|
|
>
|
|
Your coaching week, without the admin drag.
|
|
</h1>
|
|
<p className={`mx-auto mt-7 max-w-3xl text-xl leading-9 ${ui.muted}`}>
|
|
Before the session, between sessions, and after the engagement ends:
|
|
the workspace keeps client context, session memory, and follow-up in
|
|
one coach-supervised flow.
|
|
</p>
|
|
<div className='mt-9 flex flex-wrap justify-center gap-4'>
|
|
<Link
|
|
href='/intake/'
|
|
className={`rounded-none px-8 py-4 font-semibold ${ui.button}`}
|
|
>
|
|
Start assessment
|
|
</Link>
|
|
<a
|
|
href='#coaching-process'
|
|
className='rounded-none border border-[#19192d]/10 bg-white px-8 py-4 font-semibold'
|
|
>
|
|
See the process
|
|
</a>
|
|
</div>
|
|
<p className={`mt-5 ${ui.muted}`}>
|
|
Start with one client. 5-minute setup. Coach-approved outputs.
|
|
</p>
|
|
</section>
|
|
|
|
<section
|
|
id='coaching-process'
|
|
className={`border-y px-5 py-16 ${ui.border} ${ui.softSurface}`}
|
|
>
|
|
<div className='mx-auto max-w-7xl lg:px-8'>
|
|
<div className='grid gap-10 lg:grid-cols-[0.85fr_1.15fr] lg:items-start'>
|
|
<div>
|
|
<p className={ui.overline}>The full coaching process</p>
|
|
<h2 className={`${ui.heading} mt-4 text-4xl leading-tight md:text-6xl`}>
|
|
From public assessment to private client workspace.
|
|
</h2>
|
|
<p className={`mt-6 text-lg leading-8 ${ui.muted}`}>
|
|
Founder-style coaching sites explain the offer. This
|
|
workspace connects that public offer to the operational flow
|
|
behind it: intake, client management, session memory, and
|
|
client follow-through.
|
|
</p>
|
|
<div className='mt-8 flex flex-wrap gap-3'>
|
|
<Link
|
|
href='/intake/'
|
|
className={`rounded-none px-7 py-4 font-semibold ${ui.button}`}
|
|
>
|
|
Start assessment
|
|
</Link>
|
|
<Link
|
|
href='/services/'
|
|
className='rounded-none border border-[#19192d]/10 bg-white px-7 py-4 font-semibold'
|
|
>
|
|
View packages
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
|
|
<div className='grid gap-4'>
|
|
{processSteps.map((step, index) => (
|
|
<div
|
|
key={step.title}
|
|
className={`${ui.card} grid gap-4 p-5 md:grid-cols-[4rem_1fr]`}
|
|
>
|
|
<div className='flex h-14 w-14 items-center justify-center rounded-none bg-[#19192d] font-serif text-2xl font-semibold text-white'>
|
|
{index + 1}
|
|
</div>
|
|
<div>
|
|
<h3 className='text-2xl font-semibold'>{step.title}</h3>
|
|
<p className={`mt-3 leading-7 ${ui.muted}`}>
|
|
{step.copy}
|
|
</p>
|
|
<p className='mt-4 rounded-none bg-[#fffdf9] px-4 py-3 text-sm font-semibold text-[#35b7a5]'>
|
|
{step.output}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section
|
|
id='coaching-week'
|
|
className={`border-y px-5 py-16 ${ui.border} ${ui.softSurface}`}
|
|
>
|
|
<div className='mx-auto max-w-6xl text-center'>
|
|
<p className={ui.overline}>Your coaching week</p>
|
|
<h2 className={`${ui.heading} mt-4 text-4xl md:text-6xl`}>
|
|
What if the busywork just was not there?
|
|
</h2>
|
|
<p
|
|
className={`mx-auto mt-5 max-w-3xl text-lg leading-8 ${ui.muted}`}
|
|
>
|
|
Five moments a week. You get your time back, your clients get
|
|
clearer support, and your coaching signature gets stronger.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
{weekSteps.map((step, index) => (
|
|
<StepSection key={step.eyebrow} step={step} index={index} />
|
|
))}
|
|
|
|
<WaveDivider from='#fffdf9' to='#19192d' />
|
|
|
|
<section className={`px-5 pb-20 pt-10 ${ui.darkPanel}`}>
|
|
<div className='mx-auto max-w-7xl lg:px-8'>
|
|
<div className='grid grid-cols-1 gap-10 lg:grid-cols-[0.9fr_1.1fr]'>
|
|
<div>
|
|
<p className='text-sm font-semibold uppercase tracking-[0.18em] text-[#35b7a5]'>
|
|
Go deeper
|
|
</p>
|
|
<h2 className='mt-4 font-serif text-5xl font-semibold leading-tight md:text-6xl'>
|
|
Curious about a specific part?
|
|
</h2>
|
|
<p className={`mt-6 text-lg leading-8 ${ui.darkMuted}`}>
|
|
Each part of the workflow can stand alone, but the real value
|
|
shows up when session memory, client prompts, resources, and
|
|
prep briefs reinforce each other.
|
|
</p>
|
|
</div>
|
|
<div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
|
|
{deeperItems.map(([title, copy]) => (
|
|
<div
|
|
key={title}
|
|
className='rounded-none border border-white/10 bg-white/5 p-6'
|
|
>
|
|
<h3 className='text-xl font-semibold'>{title}</h3>
|
|
<p className={`mt-3 leading-7 ${ui.darkMuted}`}>{copy}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<WaveDivider from='#fffdf9' to='#19192d' flip />
|
|
|
|
<section id='client-experience' className={`${ui.section} pt-10`}>
|
|
<div className='grid grid-cols-1 items-center gap-10 lg:grid-cols-[0.95fr_1.05fr]'>
|
|
<div className={`${ui.card} overflow-hidden`}>
|
|
<div className={`p-6 ${ui.darkPanel}`}>
|
|
<p className='text-sm font-semibold uppercase tracking-[0.18em] text-[#35b7a5]'>
|
|
Client view
|
|
</p>
|
|
<h3 className='mt-2 text-2xl font-semibold'>
|
|
Sarah's Coaching
|
|
</h3>
|
|
<p className={`mt-2 ${ui.darkMuted}`}>
|
|
Private workspace · approved by coach
|
|
</p>
|
|
</div>
|
|
<div className='grid gap-4 p-6'>
|
|
<div className='rounded-none bg-[#fffdf9] p-4'>
|
|
<p className='font-semibold'>Reflection prompt</p>
|
|
<p className={`mt-2 leading-7 ${ui.muted}`}>
|
|
What is one boundary you could set this week to protect
|
|
strategic thinking time?
|
|
</p>
|
|
</div>
|
|
<div className='rounded-none border border-[#19192d]/10 p-4'>
|
|
<p className='font-semibold'>Session notes 6 shared</p>
|
|
<p className={`mt-2 ${ui.muted}`}>
|
|
Board presence, CPO conversations, delegation trust.
|
|
</p>
|
|
</div>
|
|
<div className='rounded-none border border-[#19192d]/10 p-4'>
|
|
<p className='font-semibold'>Commitments</p>
|
|
<p className={`mt-2 ${ui.muted}`}>2 open · 5 done</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<p className={ui.overline}>The client experience</p>
|
|
<h2
|
|
className={`${ui.heading} mt-4 text-5xl leading-tight md:text-6xl`}
|
|
>
|
|
What your client actually sees.
|
|
</h2>
|
|
<p className={`mt-6 text-lg leading-8 ${ui.muted}`}>
|
|
Your client receives support that feels like it comes from you,
|
|
because it is based on your sessions, reviewed by you, and
|
|
shared by you.
|
|
</p>
|
|
<div className='mt-8 grid grid-cols-1 gap-4 md:grid-cols-2'>
|
|
{clientExperience.map(([title, copy]) => (
|
|
<div key={title} className={ui.softCard + ' p-5'}>
|
|
<h3 className='font-semibold'>{title}</h3>
|
|
<p className={`mt-2 leading-7 ${ui.muted}`}>{copy}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id='control' className={`px-5 py-20 ${ui.softSurface}`}>
|
|
<div className='mx-auto grid max-w-7xl grid-cols-1 gap-10 lg:grid-cols-[0.8fr_1.2fr]'>
|
|
<div>
|
|
<p className={ui.overline}>Coach-supervised AI</p>
|
|
<h2
|
|
className={`${ui.heading} mt-4 text-5xl leading-tight md:text-6xl`}
|
|
>
|
|
You control everything.
|
|
</h2>
|
|
<p className={`mt-6 text-lg leading-8 ${ui.muted}`}>
|
|
The workspace is opinionated about one thing: AI output should
|
|
be visible to the coach before it becomes client-facing.
|
|
</p>
|
|
</div>
|
|
<div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
|
|
{[
|
|
'You see every suggestion first',
|
|
'You edit the wording and tone',
|
|
'You can skip anything',
|
|
'Your client data stays structured',
|
|
].map((item) => (
|
|
<div key={item} className={`${ui.card} p-6`}>
|
|
<p className='text-3xl text-[#35b7a5]'>✓</p>
|
|
<h3 className='mt-4 text-xl font-semibold'>{item}</h3>
|
|
</div>
|
|
))}
|
|
</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]'>
|
|
Simple pricing
|
|
</p>
|
|
<h2 className='mt-4 font-serif text-5xl font-semibold leading-tight'>
|
|
One workspace for the whole coaching loop.
|
|
</h2>
|
|
</div>
|
|
<div className={`p-8 md:p-12 ${ui.surface} ${ui.ink}`}>
|
|
<p className={ui.overline}>During coaching</p>
|
|
<h3 className='mt-3 text-4xl font-semibold'>
|
|
$14 / client / month
|
|
</h3>
|
|
<p className={`mt-4 leading-7 ${ui.muted}`}>
|
|
Everything included: session memory, prep briefs, resources,
|
|
client portal, and approved follow-up prompts.
|
|
</p>
|
|
<Link
|
|
href='/intake/'
|
|
className={`mt-8 inline-flex rounded-none px-7 py-4 font-semibold ${ui.button}`}
|
|
>
|
|
Start assessment
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section className={`${ui.section} pt-0`}>
|
|
<div className='mx-auto max-w-4xl'>
|
|
<p className={`${ui.overline} text-center`}>
|
|
Questions before you start
|
|
</p>
|
|
<h2
|
|
className={`${ui.heading} mt-4 text-center text-4xl md:text-5xl`}
|
|
>
|
|
The questions coaches ask first.
|
|
</h2>
|
|
<div className='mt-10 grid gap-4'>
|
|
{faq.map(([question, answer]) => (
|
|
<div key={question} className={`${ui.card} p-6`}>
|
|
<h3 className='text-xl font-semibold'>{question}</h3>
|
|
<p className={`mt-3 leading-7 ${ui.muted}`}>{answer}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section className={`px-5 py-20 text-center ${ui.darkPanel}`}>
|
|
<p className='text-sm font-semibold uppercase tracking-[0.18em] text-[#35b7a5]'>
|
|
Ready to try it?
|
|
</p>
|
|
<h2 className='mx-auto mt-4 max-w-3xl font-serif text-5xl font-semibold leading-tight md:text-6xl'>
|
|
Start with one client and see the full loop.
|
|
</h2>
|
|
<div className='mt-8 flex justify-center'>
|
|
<Link
|
|
href='/intake/'
|
|
className={`rounded-none px-8 py-4 font-semibold ${ui.button}`}
|
|
>
|
|
Start assessment
|
|
</Link>
|
|
</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/'>Packages</Link>
|
|
<Link href='/login/'>Login</Link>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</main>
|
|
</>
|
|
);
|
|
}
|
|
|
|
HowItWorks.getLayout = function getLayout(page: ReactElement) {
|
|
return <LayoutGuest>{page}</LayoutGuest>;
|
|
};
|