Add coaching how it works page
This commit is contained in:
Flatlogic Bot
parent
5f1364f0dd
commit
51d2ca289f
693
frontend/src/pages/how-it-works.tsx
Normal file
693
frontend/src/pages/how-it-works.tsx
Normal file
@ -0,0 +1,693 @@
|
||||
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-gradient-to-r from-[#35b7a5] via-[#95b76e] to-[#c38a25] text-white',
|
||||
navShell:
|
||||
'rounded-full bg-white shadow-[0_18px_60px_rgba(31,31,50,0.08)] ring-1 ring-[#19192d]/5',
|
||||
ink: 'text-[#19192d]',
|
||||
muted: 'text-[#72798a]',
|
||||
accent: 'text-[#35b7a5]',
|
||||
gold: 'text-[#b17a1e]',
|
||||
border: 'border-[#19192d]/10',
|
||||
surface: 'bg-white',
|
||||
softSurface: 'bg-[#fbf8f1]',
|
||||
darkPanel: 'bg-[#19192d] text-white',
|
||||
darkMuted: 'text-white/70',
|
||||
button:
|
||||
'bg-gradient-to-r from-[#36b39f] to-[#b98624] text-white shadow-[0_18px_45px_rgba(54,179,159,0.24)] transition hover:brightness-105',
|
||||
section: 'mx-auto max-w-7xl px-5 py-20 lg:px-8',
|
||||
card: 'rounded-[1.75rem] border border-[#19192d]/10 bg-white shadow-[0_18px_50px_rgba(31,31,50,0.05)]',
|
||||
softCard: 'rounded-[1.75rem] border border-[#19192d]/10 bg-[#fbf8f1]',
|
||||
overline: 'text-sm font-bold uppercase tracking-[0.28em] text-[#b17a1e]',
|
||||
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 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-4 z-50 px-5 pt-7'>
|
||||
<div
|
||||
className={`mx-auto flex max-w-6xl items-center justify-between gap-5 px-5 py-4 backdrop-blur-xl md:px-7 md:py-5 ${ui.navShell}`}
|
||||
>
|
||||
<Link
|
||||
href='/'
|
||||
className='flex items-center gap-3 text-lg font-semibold tracking-tight'
|
||||
>
|
||||
<span className='flex h-11 w-11 items-center justify-center rounded-2xl bg-[#f3fbf8] text-2xl font-black text-[#35b7a5]'>
|
||||
C
|
||||
</span>
|
||||
<span className='sr-only'>Coaching SaaS Workspace</span>
|
||||
</Link>
|
||||
<nav
|
||||
className={`hidden items-center gap-8 text-lg font-medium ${ui.ink} md:flex`}
|
||||
>
|
||||
<Link href='/how-it-works/'>How it works</Link>
|
||||
<Link href='/client-portal/'>Coachee</Link>
|
||||
<a href='#pricing'>Pricing</a>
|
||||
<a href='#client-experience'>Compare</a>
|
||||
<a href='#control'>Trust</a>
|
||||
</nav>
|
||||
<Link
|
||||
href='/register/'
|
||||
className={`rounded-full px-7 py-3 text-base font-semibold ${ui.button}`}
|
||||
>
|
||||
Join waitlist
|
||||
</Link>
|
||||
</div>
|
||||
</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-full bg-[#e8f6f2] px-3 py-1 text-sm font-semibold text-[#248b7e]'>
|
||||
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-2xl bg-[#fbf8f1] p-3'
|
||||
>
|
||||
<span className='flex h-7 w-7 items-center justify-center rounded-full 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-2xl bg-[#fbf8f1] p-4'>
|
||||
<p className='text-sm font-semibold text-[#b17a1e]'>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-full bg-[#e8f6f2] px-3 py-1 text-sm font-semibold text-[#248b7e]'
|
||||
>
|
||||
{item}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
<div className='mt-5 flex gap-3'>
|
||||
<button
|
||||
className={`rounded-full px-5 py-3 font-semibold ${ui.button}`}
|
||||
>
|
||||
Looks good
|
||||
</button>
|
||||
<button className='rounded-full 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-2xl bg-[#fbf8f1] 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-2xl 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-2xl bg-[#e8f6f2] p-4'>
|
||||
<p className='text-sm font-semibold text-[#248b7e]'>
|
||||
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-2xl bg-[#fbf8f1] 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-2xl bg-[#fbf8f1] 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-2xl p-4`}>
|
||||
<p className='text-sm font-semibold text-[#c79a38]'>
|
||||
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-[1.5rem] p-5`}>
|
||||
<p className='text-sm font-semibold uppercase tracking-[0.18em] text-[#c79a38]'>
|
||||
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-2xl bg-[#fbf8f1] 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-2xl bg-[#e8f6f2] px-5 py-4 font-semibold text-[#248b7e]'>
|
||||
{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='/register/'
|
||||
className={`rounded-full px-8 py-4 font-semibold ${ui.button}`}
|
||||
>
|
||||
Join waitlist
|
||||
</Link>
|
||||
<a
|
||||
href='#coaching-week'
|
||||
className='rounded-full border border-[#19192d]/10 bg-white px-8 py-4 font-semibold'
|
||||
>
|
||||
See your coaching week
|
||||
</a>
|
||||
</div>
|
||||
<p className={`mt-5 ${ui.muted}`}>
|
||||
Start with one client. 5-minute setup. Coach-approved outputs.
|
||||
</p>
|
||||
</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-[#c79a38]'>
|
||||
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-[1.5rem] 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-[#c79a38]'>
|
||||
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-2xl bg-[#fbf8f1] 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-2xl 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-2xl 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-[2rem] 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-[#c79a38]'>
|
||||
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='/register/'
|
||||
className={`mt-8 inline-flex rounded-full px-7 py-4 font-semibold ${ui.button}`}
|
||||
>
|
||||
Join waitlist
|
||||
</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-[#c79a38]'>
|
||||
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='/register/'
|
||||
className={`rounded-full px-8 py-4 font-semibold ${ui.button}`}
|
||||
>
|
||||
Join waitlist
|
||||
</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='/login/'>Login</Link>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</main>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
HowItWorks.getLayout = function getLayout(page: ReactElement) {
|
||||
return <LayoutGuest>{page}</LayoutGuest>;
|
||||
};
|
||||
@ -7,8 +7,10 @@ import { getPageTitle } from '../config';
|
||||
|
||||
const ui = {
|
||||
page: 'bg-[#fffdf9] text-[#19192d]',
|
||||
banner: 'bg-gradient-to-r from-[#35b7a5] via-[#95b76e] to-[#c38a25] text-white',
|
||||
navShell: 'rounded-full bg-white shadow-[0_18px_60px_rgba(31,31,50,0.08)] ring-1 ring-[#19192d]/5',
|
||||
banner:
|
||||
'bg-gradient-to-r from-[#35b7a5] via-[#95b76e] to-[#c38a25] text-white',
|
||||
navShell:
|
||||
'rounded-full bg-white shadow-[0_18px_60px_rgba(31,31,50,0.08)] ring-1 ring-[#19192d]/5',
|
||||
ink: 'text-[#19192d]',
|
||||
muted: 'text-[#72798a]',
|
||||
accent: 'text-[#35b7a5]',
|
||||
@ -18,7 +20,8 @@ const ui = {
|
||||
softSurface: 'bg-[#fbf8f1]',
|
||||
darkPanel: 'bg-[#19192d] text-white',
|
||||
darkMuted: 'text-white/70',
|
||||
button: 'bg-gradient-to-r from-[#36b39f] to-[#b98624] text-white shadow-[0_18px_45px_rgba(54,179,159,0.24)] transition hover:brightness-105',
|
||||
button:
|
||||
'bg-gradient-to-r from-[#36b39f] to-[#b98624] text-white shadow-[0_18px_45px_rgba(54,179,159,0.24)] transition hover:brightness-105',
|
||||
section: 'mx-auto max-w-7xl px-5 py-20 lg:px-8',
|
||||
card: 'rounded-[1.75rem] border border-[#19192d]/10 bg-white shadow-[0_18px_50px_rgba(31,31,50,0.05)]',
|
||||
softCard: 'rounded-[1.75rem] border border-[#19192d]/10 bg-[#fbf8f1]',
|
||||
@ -26,25 +29,56 @@ const ui = {
|
||||
heading: 'font-serif font-semibold tracking-tight text-[#19192d]',
|
||||
};
|
||||
|
||||
const trustItems = ['Coach-reviewed AI', 'Private client records', 'Built for coaching'];
|
||||
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'],
|
||||
[
|
||||
'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'],
|
||||
[
|
||||
'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.'],
|
||||
[
|
||||
'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.'],
|
||||
[
|
||||
'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 = [
|
||||
@ -75,16 +109,19 @@ function WaveDivider({
|
||||
flip?: boolean;
|
||||
}) {
|
||||
return (
|
||||
<div className="relative h-28 overflow-hidden" style={{ backgroundColor: from }}>
|
||||
<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"
|
||||
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"
|
||||
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>
|
||||
@ -100,59 +137,90 @@ export default function Starter() {
|
||||
|
||||
<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">
|
||||
<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">
|
||||
<Link
|
||||
href='/login/'
|
||||
className='ml-2 font-semibold underline decoration-white underline-offset-4'
|
||||
>
|
||||
Open workspace
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<header className="sticky top-4 z-50 px-5 pt-7">
|
||||
<div className={`mx-auto flex max-w-6xl items-center justify-between gap-5 px-5 py-4 backdrop-blur-xl md:px-7 md:py-5 ${ui.navShell}`}>
|
||||
<Link href="/" className="flex items-center gap-3 text-lg font-semibold tracking-tight">
|
||||
<span className="flex h-11 w-11 items-center justify-center rounded-2xl bg-[#f3fbf8] text-2xl font-black text-[#35b7a5]">
|
||||
<header className='sticky top-4 z-50 px-5 pt-7'>
|
||||
<div
|
||||
className={`mx-auto flex max-w-6xl items-center justify-between gap-5 px-5 py-4 backdrop-blur-xl md:px-7 md:py-5 ${ui.navShell}`}
|
||||
>
|
||||
<Link
|
||||
href='/'
|
||||
className='flex items-center gap-3 text-lg font-semibold tracking-tight'
|
||||
>
|
||||
<span className='flex h-11 w-11 items-center justify-center rounded-2xl bg-[#f3fbf8] text-2xl font-black text-[#35b7a5]'>
|
||||
C
|
||||
</span>
|
||||
<span className="sr-only">Coaching SaaS Workspace</span>
|
||||
<span className='sr-only'>Coaching SaaS Workspace</span>
|
||||
</Link>
|
||||
<nav className={`hidden items-center gap-8 text-lg font-medium ${ui.ink} md:flex`}>
|
||||
<a href="#how-it-works">How it works</a>
|
||||
<a href="#coachee">Coachee</a>
|
||||
<a href="#pricing">Pricing</a>
|
||||
<a href="#session-memory">Compare</a>
|
||||
<a href="#trust">Trust</a>
|
||||
<a href="#events">Events</a>
|
||||
<a href="#pricing">Packages</a>
|
||||
<nav
|
||||
className={`hidden items-center gap-8 text-lg font-medium ${ui.ink} md:flex`}
|
||||
>
|
||||
<Link href='/how-it-works/'>How it works</Link>
|
||||
<Link href='/client-portal/'>Coachee</Link>
|
||||
<a href='#pricing'>Pricing</a>
|
||||
<a href='#session-memory'>Compare</a>
|
||||
<a href='#trust'>Trust</a>
|
||||
<a href='#events'>Events</a>
|
||||
<a href='#pricing'>Packages</a>
|
||||
</nav>
|
||||
<Link href="/register/" className={`rounded-full px-7 py-3 text-base font-semibold ${ui.button}`}>
|
||||
<Link
|
||||
href='/register/'
|
||||
className={`rounded-full px-7 py-3 text-base font-semibold ${ui.button}`}
|
||||
>
|
||||
Join waitlist
|
||||
</Link>
|
||||
</div>
|
||||
</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]`}>
|
||||
<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
|
||||
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="/register/" className={`rounded-full px-10 py-5 text-lg font-semibold ${ui.button}`}>
|
||||
<div className='mt-9 flex justify-center'>
|
||||
<Link
|
||||
href='/register/'
|
||||
className={`rounded-full px-10 py-5 text-lg font-semibold ${ui.button}`}
|
||||
>
|
||||
Join waitlist
|
||||
</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}`}>
|
||||
<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 key={item} className='flex items-center gap-2'>
|
||||
<span className={ui.accent}>✦</span>
|
||||
{item}
|
||||
</span>
|
||||
@ -160,68 +228,103 @@ export default function Starter() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative mx-auto mt-12 max-w-4xl">
|
||||
<div className="absolute -inset-12 rounded-full bg-[#35b7a5]/10 blur-3xl" />
|
||||
<div className={`relative rounded-[2rem] border p-4 shadow-[0_24px_80px_rgba(31,31,50,0.10)] ${ui.border} ${ui.surface}`}>
|
||||
<div className='relative mx-auto mt-12 max-w-4xl'>
|
||||
<div className='absolute -inset-12 rounded-full bg-[#35b7a5]/10 blur-3xl' />
|
||||
<div
|
||||
className={`relative rounded-[2rem] border p-4 shadow-[0_24px_80px_rgba(31,31,50,0.10)] ${ui.border} ${ui.surface}`}
|
||||
>
|
||||
<div className={`rounded-[1.5rem] p-4 ${ui.darkPanel}`}>
|
||||
<div className="mb-4 flex items-center justify-between">
|
||||
<div className='mb-4 flex items-center justify-between'>
|
||||
<div>
|
||||
<p className="text-xs uppercase tracking-[0.16em] text-[#c79a38]">Session insights</p>
|
||||
<h2 className="mt-1 text-2xl font-semibold">Maya Chen · Session 4</h2>
|
||||
<p className='text-xs uppercase tracking-[0.16em] text-[#c79a38]'>
|
||||
Session insights
|
||||
</p>
|
||||
<h2 className='mt-1 text-2xl font-semibold'>
|
||||
Maya Chen · Session 4
|
||||
</h2>
|
||||
</div>
|
||||
<span className="rounded-full bg-[#c79a38] px-3 py-1 text-sm font-semibold text-white">
|
||||
<span className='rounded-full bg-[#c79a38] 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-2xl bg-white/10 p-4">
|
||||
<p className="text-sm font-medium text-white">{topic}</p>
|
||||
<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-2xl bg-white/10 p-4'>
|
||||
<p className='text-sm font-medium text-white'>{topic}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-4 rounded-2xl 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">
|
||||
<div className='mt-4 rounded-2xl 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>
|
||||
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-2xl bg-white/10 p-5">
|
||||
<p className="text-sm font-semibold text-[#c79a38]">Pattern</p>
|
||||
<div className='mt-4 grid grid-cols-1 gap-4 lg:grid-cols-[0.9fr_1.1fr]'>
|
||||
<div className='rounded-2xl bg-white/10 p-5'>
|
||||
<p className='text-sm font-semibold text-[#c79a38]'>
|
||||
Pattern
|
||||
</p>
|
||||
<p className={`mt-2 leading-7 ${ui.darkMuted}`}>
|
||||
Maya is moving from control as quality assurance toward explicit decision boundaries.
|
||||
Maya is moving from control as quality assurance toward
|
||||
explicit decision boundaries.
|
||||
</p>
|
||||
</div>
|
||||
<div className="rounded-2xl bg-white/10 p-5">
|
||||
<p className="text-sm font-semibold text-[#c79a38]">Follow-up draft</p>
|
||||
<div className='rounded-2xl bg-white/10 p-5'>
|
||||
<p className='text-sm font-semibold text-[#c79a38]'>
|
||||
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.
|
||||
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.”
|
||||
<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-4 rounded-2xl p-3 text-sm font-medium ${ui.softSurface}`}>
|
||||
Suggested reply: What changed in the room when you led that way?
|
||||
<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-2xl 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">
|
||||
<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>
|
||||
@ -231,22 +334,27 @@ export default function Starter() {
|
||||
</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]">
|
||||
<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`}>
|
||||
<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">
|
||||
<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-full bg-[#35b7a5] font-semibold text-white">
|
||||
<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-full bg-[#35b7a5] font-semibold text-white'>
|
||||
{index + 1}
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-xl font-semibold">{title}</h3>
|
||||
<h3 className='text-xl font-semibold'>{title}</h3>
|
||||
<p className={`mt-2 leading-7 ${ui.muted}`}>{copy}</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -255,88 +363,129 @@ export default function Starter() {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<WaveDivider from="#fffdf9" to="#19192d" />
|
||||
<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-[#c79a38]">Session memory</p>
|
||||
<h2 className="mt-4 font-serif text-5xl font-semibold leading-tight md:text-6xl">
|
||||
<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-[#c79a38]'>
|
||||
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.
|
||||
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-2xl border border-white/10 bg-white/5 p-4">
|
||||
<p className="font-semibold">{item}</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-2xl border border-white/10 bg-white/5 p-4'
|
||||
>
|
||||
<p className='font-semibold'>{item}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={`rounded-[2rem] 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
|
||||
className={`rounded-[2rem] 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>
|
||||
<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-full bg-[#e8f6f2] px-4 py-2 text-sm font-semibold text-[#248b7e]">
|
||||
<span className='rounded-full bg-[#e8f6f2] px-4 py-2 text-sm font-semibold text-[#248b7e]'>
|
||||
Ready when you are
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="mt-5 grid grid-cols-3 gap-3">
|
||||
<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-2xl p-4 ${ui.softSurface}`}>
|
||||
<p className="text-3xl font-semibold">{value}</p>
|
||||
<div
|
||||
key={label}
|
||||
className={`rounded-2xl 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-2xl 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={`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.
|
||||
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-2xl p-5 ${ui.darkPanel}`}>
|
||||
<p className="text-sm font-semibold text-[#c79a38]">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 className='text-sm font-semibold text-[#c79a38]'>
|
||||
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 />
|
||||
<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]">
|
||||
<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`}>
|
||||
<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.
|
||||
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">
|
||||
<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>
|
||||
<h3 className='text-xl font-semibold'>{title}</h3>
|
||||
<p className={`mt-3 leading-7 ${ui.muted}`}>{copy}</p>
|
||||
</div>
|
||||
))}
|
||||
@ -344,23 +493,30 @@ export default function Starter() {
|
||||
</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">
|
||||
<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>
|
||||
<h2 className={`${ui.heading} mt-4 text-5xl`}>
|
||||
Designed for real client work.
|
||||
</h2>
|
||||
</div>
|
||||
<Link href="/register/" className={`rounded-full px-6 py-3 text-center font-semibold ${ui.button}`}>
|
||||
<Link
|
||||
href='/register/'
|
||||
className={`rounded-full 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">
|
||||
<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>
|
||||
<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>
|
||||
@ -369,27 +525,43 @@ export default function Starter() {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="pricing" className="px-5 py-20">
|
||||
<div className={`mx-auto grid max-w-7xl grid-cols-1 overflow-hidden rounded-[2rem] 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-[#c79a38]">Template package</p>
|
||||
<h2 className="mt-4 font-serif text-5xl font-semibold leading-tight">
|
||||
<section id='pricing' className='px-5 py-20'>
|
||||
<div
|
||||
className={`mx-auto grid max-w-7xl grid-cols-1 overflow-hidden rounded-[2rem] 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-[#c79a38]'>
|
||||
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>
|
||||
<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.
|
||||
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-2xl p-4 font-medium ${ui.softSurface}`}>
|
||||
<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-2xl p-4 font-medium ${ui.softSurface}`}
|
||||
>
|
||||
{item}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<Link href="/register/" className={`mt-8 inline-flex rounded-full px-7 py-4 font-semibold ${ui.button}`}>
|
||||
<Link
|
||||
href='/register/'
|
||||
className={`mt-8 inline-flex rounded-full px-7 py-4 font-semibold ${ui.button}`}
|
||||
>
|
||||
Create workspace
|
||||
</Link>
|
||||
</div>
|
||||
@ -397,12 +569,14 @@ export default function Starter() {
|
||||
</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}`}>
|
||||
<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="/login/">Login</Link>
|
||||
<div className='flex gap-5'>
|
||||
<Link href='/privacy-policy/'>Privacy Policy</Link>
|
||||
<Link href='/terms-of-use/'>Terms of Use</Link>
|
||||
<Link href='/login/'>Login</Link>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user