admin/40234-vm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Tokenize coaching landing design

Browse Source
This commit is contained in:
Flatlogic Bot 2026-06-09 11:37:23 +00:00
parent b55c4cdb40
commit 9fb010bc3b
1 changed files with 110 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

210
frontend/src/pages/index.tsx
View File

@ -5,6 +5,27 @@ import Link from 'next/link';
import LayoutGuest from '../layouts/Guest'; import LayoutGuest from '../layouts/Guest';
import { getPageTitle } from '../config'; 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 trustItems = ['Coach-reviewed AI', 'Private client records', 'Built for coaching']; const trustItems = ['Coach-reviewed AI', 'Private client records', 'Built for coaching'];
const stats = [ const stats = [
@ -19,6 +40,13 @@ const workflow = [
['Before the next session', 'Surface open commitments, recent patterns, and a focused opening question.'], ['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 = [ const testimonials = [
[ [
'The session recap caught the exact leadership pattern I wanted to revisit. I edited one sentence and sent it.', 'The session recap caught the exact leadership pattern I wanted to revisit. I edited one sentence and sent it.',
@ -44,27 +72,27 @@ export default function Starter() {
<title>{getPageTitle('Coaching Workspace')}</title> <title>{getPageTitle('Coaching Workspace')}</title>
</Head> </Head>
<main className="min-h-screen bg-[#fffdf9] text-[#19192d]"> <main className={`min-h-screen ${ui.page}`}>
<div className="bg-gradient-to-r from-[#35b7a5] via-[#97b879] to-[#c38a25] px-5 py-5 text-center text-lg text-white"> <div className={`${ui.banner} px-5 py-5 text-center text-lg`}>
<p className="text-xs font-bold uppercase tracking-[0.34em]">Still human</p> <p className="text-xs font-bold uppercase tracking-[0.34em]">Still human</p>
<p className="mt-2 text-2xl font-medium">AI is not a coach. Keep the real relationship at the center.</p> <p className="mt-2 text-2xl font-medium">AI is not a coach. Keep the real relationship at the center.</p>
<p className="mt-3 text-lg text-white/90"> <p className="mt-3 text-lg text-white/90">
Launch a modern coaching workspace. 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 Open workspace
</Link> </Link>
</p> </p>
</div> </div>
<header className="relative z-20 px-5 pt-7"> <header className="relative z-20 px-5 pt-7">
<div className="mx-auto flex max-w-6xl items-center justify-between gap-5 rounded-full bg-white px-7 py-5 shadow-[0_18px_60px_rgba(31,31,50,0.08)] ring-1 ring-[#19192d]/5"> <div className={`mx-auto flex max-w-6xl items-center justify-between gap-5 px-7 py-5 ${ui.navShell}`}>
<Link href="/" className="flex items-center gap-3 text-lg font-semibold tracking-tight"> <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-[#fff5e7] text-2xl font-black text-[#37ad9f]"> <span className="flex h-11 w-11 items-center justify-center rounded-2xl bg-[#f3fbf8] text-2xl font-black text-[#35b7a5]">
C C
</span> </span>
<span className="sr-only">Coaching SaaS Workspace</span> <span className="sr-only">Coaching SaaS Workspace</span>
</Link> </Link>
<nav className="hidden items-center gap-8 text-lg font-medium text-[#25263d] md:flex"> <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="#how-it-works">How it works</a>
<a href="#coachee">Coachee</a> <a href="#coachee">Coachee</a>
<a href="#pricing">Pricing</a> <a href="#pricing">Pricing</a>
@ -73,43 +101,33 @@ export default function Starter() {
<a href="#events">Events</a> <a href="#events">Events</a>
<a href="#pricing">Packages</a> <a href="#pricing">Packages</a>
</nav> </nav>
<div className="flex items-center gap-3"> <Link href="/register/" className={`rounded-full px-7 py-3 text-base font-semibold ${ui.button}`}>
<Link Join waitlist
href="/register/" </Link>
className="rounded-full bg-gradient-to-r from-[#36b39f] to-[#b98624] px-7 py-3 text-base font-semibold text-white shadow-[0_12px_35px_rgba(54,179,159,0.25)] transition hover:brightness-105"
>
Join waitlist
</Link>
</div>
</div> </div>
</header> </header>
<section className="mx-auto max-w-7xl px-5 pb-20 pt-8 text-center lg:px-8"> <section className="mx-auto max-w-7xl px-5 pb-20 pt-8 text-center lg:px-8">
<div className="mx-auto max-w-5xl"> <div className="mx-auto max-w-5xl">
<p className="mb-8 text-sm font-bold uppercase tracking-[0.28em] text-[#b17a1e]"> <p className={`mb-8 ${ui.overline}`}>For leadership and executive coaches</p>
For leadership and executive coaches <h1 className={`${ui.heading} text-6xl leading-[1.12] md:text-7xl xl:text-[6.7rem]`}>
</p>
<h1 className="font-serif text-6xl font-semibold leading-[1.12] tracking-tight text-[#19192d] md:text-7xl xl:text-[6.7rem]">
What happens when your best coaching{' '} What happens when your best coaching{' '}
<span className="text-[#35b7a5]">keeps going.</span> <span className={ui.accent}>keeps going.</span>
</h1> </h1>
<p className="mx-auto mt-9 max-w-3xl text-2xl leading-10 text-[#72798a]"> <p className={`mx-auto mt-9 max-w-3xl text-2xl leading-10 ${ui.muted}`}>
Show up fully present. No note-taking. No admin. Your workspace captures what makes 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. your coaching yours, so clients stay connected to the work between sessions.
</p> </p>
<div className="mt-12 flex justify-center"> <div className="mt-12 flex justify-center">
<Link <Link href="/register/" className={`rounded-full px-10 py-5 text-lg font-semibold ${ui.button}`}>
href="/register/"
className="rounded-full bg-gradient-to-r from-[#36b39f] to-[#b98624] px-10 py-5 text-lg font-semibold text-white shadow-[0_18px_45px_rgba(54,179,159,0.24)] transition hover:brightness-105"
>
Join waitlist Join waitlist
</Link> </Link>
</div> </div>
<p className="mt-6 text-lg text-[#5f6575]">$14/client/month. Everything included.</p> <p className={`mt-6 text-lg ${ui.muted}`}>$14/client/month. Everything included.</p>
<div className="mx-auto mt-10 flex max-w-3xl flex-wrap justify-center gap-x-9 gap-y-4 text-lg text-[#72798a]"> <div className={`mx-auto mt-10 flex max-w-3xl flex-wrap justify-center gap-x-9 gap-y-4 text-lg ${ui.muted}`}>
{trustItems.map((item) => ( {trustItems.map((item) => (
<span key={item} className="flex items-center gap-2"> <span key={item} className="flex items-center gap-2">
<span className="text-[#35b7a5]">✦</span> <span className={ui.accent}>✦</span>
{item} {item}
</span> </span>
))} ))}
@ -118,28 +136,28 @@ export default function Starter() {
<div className="relative mx-auto mt-16 max-w-4xl"> <div className="relative mx-auto mt-16 max-w-4xl">
<div className="absolute -inset-12 rounded-full bg-[#35b7a5]/10 blur-3xl" /> <div className="absolute -inset-12 rounded-full bg-[#35b7a5]/10 blur-3xl" />
<div className="relative rounded-[2rem] border border-[#19192d]/10 bg-white p-4 shadow-[0_24px_80px_rgba(31,31,50,0.10)]"> <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] bg-[#17130d] p-4 text-[#fff7ec]"> <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> <div>
<p className="text-xs uppercase tracking-[0.16em] text-[#f3b35c]">Session insights</p> <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> <h2 className="mt-1 text-2xl font-semibold">Maya Chen · Session 4</h2>
</div> </div>
<span className="rounded-full bg-[#f3b35c] px-3 py-1 text-sm font-semibold text-[#17130d]"> <span className="rounded-full bg-[#c79a38] px-3 py-1 text-sm font-semibold text-white">
Review Review
</span> </span>
</div> </div>
<div className="grid grid-cols-1 gap-3 md:grid-cols-3"> <div className="grid grid-cols-1 gap-3 md:grid-cols-3">
{['Delegation trust', 'Decision rights', 'Founder visibility'].map((topic) => ( {['Delegation trust', 'Decision rights', 'Founder visibility'].map((topic) => (
<div key={topic} className="rounded-2xl bg-[#fff7ec]/10 p-4"> <div key={topic} className="rounded-2xl bg-white/10 p-4">
<p className="text-sm font-medium text-[#fff7ec]">{topic}</p> <p className="text-sm font-medium text-white">{topic}</p>
</div> </div>
))} ))}
</div> </div>
<div className="mt-4 rounded-2xl bg-[#fff7ec] p-5 text-[#17130d]"> <div className="mt-4 rounded-2xl bg-white p-5 text-[#19192d]">
<p className="text-sm font-semibold uppercase tracking-[0.14em] text-[#8d6125]">Commitments</p> <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"> <ul className="mt-4 space-y-3 text-sm leading-6">
<li>Draft a decision-rights matrix before Friday.</li> <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>
@ -148,27 +166,27 @@ export default function Starter() {
</div> </div>
<div className="mt-4 grid grid-cols-1 gap-4 lg:grid-cols-[0.9fr_1.1fr]"> <div className="mt-4 grid grid-cols-1 gap-4 lg:grid-cols-[0.9fr_1.1fr]">
<div className="rounded-2xl bg-[#fff7ec]/10 p-5"> <div className="rounded-2xl bg-white/10 p-5">
<p className="text-sm font-semibold text-[#f3b35c]">Pattern</p> <p className="text-sm font-semibold text-[#c79a38]">Pattern</p>
<p className="mt-2 leading-7 text-[#f6ead5]"> <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> </p>
</div> </div>
<div className="rounded-2xl bg-[#fff7ec]/10 p-5"> <div className="rounded-2xl bg-white/10 p-5">
<p className="text-sm font-semibold text-[#f3b35c]">Follow-up draft</p> <p className="text-sm font-semibold text-[#c79a38]">Follow-up draft</p>
<p className="mt-2 leading-7 text-[#f6ead5]"> <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> </p>
</div> </div>
</div> </div>
</div> </div>
<div className="absolute -bottom-8 right-8 hidden w-80 rounded-3xl border border-[#19192d]/10 bg-white p-5 text-left shadow-[0_22px_60px_rgba(31,31,50,0.14)] lg:block"> <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] text-[#8d6125]">Client message</p> <p className={`text-xs font-semibold uppercase tracking-[0.16em] ${ui.gold}`}>Client message</p>
<p className="mt-3 leading-7 text-[#5c5143]"> <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.” “The board conversation went better than expected. I led with the narrative instead of defending the roadmap.”
</p> </p>
<p className="mt-4 rounded-2xl bg-[#f3eddf] p-3 text-sm font-medium"> <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? Suggested reply: What changed in the room when you led that way?
</p> </p>
</div> </div>
@ -176,34 +194,34 @@ export default function Starter() {
</div> </div>
</section> </section>
<section className="border-y border-[#19192d]/10 bg-[#fbf8f1] px-5 py-10"> <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"> <div className="mx-auto grid max-w-7xl grid-cols-1 gap-6 md:grid-cols-3">
{stats.map(([value, label]) => ( {stats.map(([value, label]) => (
<div key={value} className="border-l border-[#2e2417]/15 pl-5"> <div key={value} className={`border-l pl-5 ${ui.border}`}>
<p className="font-serif text-5xl font-semibold text-[#17130d]">{value}</p> <p className={`${ui.heading} text-5xl`}>{value}</p>
<p className="mt-3 max-w-sm leading-7 text-[#5c5143]">{label}</p> <p className={`mt-3 max-w-sm leading-7 ${ui.muted}`}>{label}</p>
</div> </div>
))} ))}
</div> </div>
</section> </section>
<section id="how-it-works" className="mx-auto max-w-7xl px-5 py-20 lg:px-8"> <section id="how-it-works" className={ui.section}>
<div className="grid grid-cols-1 gap-10 lg:grid-cols-[0.8fr_1.2fr]"> <div className="grid grid-cols-1 gap-10 lg:grid-cols-[0.8fr_1.2fr]">
<div> <div>
<p className="text-sm font-semibold uppercase tracking-[0.18em] text-[#8d6125]">The new practice rhythm</p> <p className={ui.overline}>The new practice rhythm</p>
<h2 className="mt-4 font-serif text-5xl font-semibold leading-tight md:text-6xl"> <h2 className={`${ui.heading} mt-4 text-5xl leading-tight md:text-6xl`}>
Before, between, and after every session. Before, between, and after every session.
</h2> </h2>
</div> </div>
<div className="grid grid-cols-1 gap-4"> <div className="grid grid-cols-1 gap-4">
{workflow.map(([title, copy], index) => ( {workflow.map(([title, copy], index) => (
<div key={title} className="grid grid-cols-[3rem_1fr] gap-5 rounded-3xl border border-[#2e2417]/10 bg-[#fff8ec] p-5"> <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-[#17130d] font-semibold text-[#fff7ec]"> <div className="flex h-12 w-12 items-center justify-center rounded-full bg-[#35b7a5] font-semibold text-white">
{index + 1} {index + 1}
</div> </div>
<div> <div>
<h3 className="text-xl font-semibold">{title}</h3> <h3 className="text-xl font-semibold">{title}</h3>
<p className="mt-2 leading-7 text-[#5c5143]">{copy}</p> <p className={`mt-2 leading-7 ${ui.muted}`}>{copy}</p>
</div> </div>
</div> </div>
))} ))}
@ -211,33 +229,33 @@ export default function Starter() {
</div> </div>
</section> </section>
<section id="session-memory" className="bg-[#17130d] px-5 py-20 text-[#fff7ec]"> <section id="session-memory" className={`px-5 py-20 ${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="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"> <div className="flex flex-col justify-center">
<p className="text-sm font-semibold uppercase tracking-[0.18em] text-[#f3b35c]">Session memory</p> <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"> <h2 className="mt-4 font-serif text-5xl font-semibold leading-tight md:text-6xl">
Stop opening old notes before every call. Stop opening old notes before every call.
</h2> </h2>
<p className="mt-6 text-lg leading-8 text-[#d8cbb6]"> <p className={`mt-6 text-lg leading-8 ${ui.darkMuted}`}>
The workspace pulls together open commitments, themes across sessions, client messages, The workspace pulls together open commitments, themes across sessions, client messages,
and a suggested opening question. You review everything first. and a suggested opening question. You review everything first.
</p> </p>
<div className="mt-8 grid grid-cols-2 gap-4"> <div className="mt-8 grid grid-cols-2 gap-4">
{['Open commitments', 'Client patterns', 'Shared notes', 'Prep questions'].map((item) => ( {['Open commitments', 'Client patterns', 'Shared notes', 'Prep questions'].map((item) => (
<div key={item} className="rounded-2xl border border-[#fff7ec]/10 bg-[#fff7ec]/5 p-4"> <div key={item} className="rounded-2xl border border-white/10 bg-white/5 p-4">
<p className="font-semibold">{item}</p> <p className="font-semibold">{item}</p>
</div> </div>
))} ))}
</div> </div>
</div> </div>
<div className="rounded-[2rem] border border-[#fff7ec]/10 bg-[#fff7ec] p-5 text-[#17130d]"> <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 border-[#2e2417]/10 pb-5"> <div className={`flex flex-wrap items-center justify-between gap-4 border-b pb-5 ${ui.border}`}>
<div> <div>
<p className="text-sm font-semibold uppercase tracking-[0.16em] text-[#8d6125]">Session prep</p> <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> <h3 className="mt-1 text-2xl font-semibold">Maya Chen · Session 5</h3>
</div> </div>
<span className="rounded-full bg-[#e7f2df] px-4 py-2 text-sm font-semibold text-[#356133]"> <span className="rounded-full bg-[#e8f6f2] px-4 py-2 text-sm font-semibold text-[#248b7e]">
Ready when you are Ready when you are
</span> </span>
</div> </div>
@ -248,23 +266,23 @@ export default function Starter() {
['2', 'open commitments'], ['2', 'open commitments'],
['3', 'goals in focus'], ['3', 'goals in focus'],
].map(([value, label]) => ( ].map(([value, label]) => (
<div key={label} className="rounded-2xl bg-[#f3eddf] p-4"> <div key={label} className={`rounded-2xl p-4 ${ui.softSurface}`}>
<p className="text-3xl font-semibold">{value}</p> <p className="text-3xl font-semibold">{value}</p>
<p className="mt-1 text-sm text-[#5c5143]">{label}</p> <p className={`mt-1 text-sm ${ui.muted}`}>{label}</p>
</div> </div>
))} ))}
</div> </div>
<div className="mt-5 rounded-2xl border border-[#2e2417]/10 p-5"> <div className={`mt-5 rounded-2xl border p-5 ${ui.border}`}>
<p className="text-sm font-semibold uppercase tracking-[0.14em] text-[#8d6125]">Top thread</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 text-lg font-semibold">Decision rights are clear on paper, but still feel risky in practice.</p>
<p className="mt-3 leading-7 text-[#5c5143]"> <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> </p>
</div> </div>
<div className="mt-5 rounded-2xl bg-[#17130d] p-5 text-[#fff7ec]"> <div className={`mt-5 rounded-2xl p-5 ${ui.darkPanel}`}>
<p className="text-sm font-semibold text-[#f3b35c]">Suggested opening</p> <p className="text-sm font-semibold text-[#c79a38]">Suggested opening</p>
<p className="mt-3 text-xl leading-8"> <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?” “Where did delegation feel cleaner this week, and where did your body still want to take the wheel?”
</p> </p>
@ -273,52 +291,47 @@ export default function Starter() {
</div> </div>
</section> </section>
<section id="trust" className="mx-auto max-w-7xl px-5 py-20 lg:px-8"> <section id="trust" className={ui.section}>
<div className="grid grid-cols-1 gap-10 lg:grid-cols-[0.9fr_1.1fr]"> <div className="grid grid-cols-1 gap-10 lg:grid-cols-[0.9fr_1.1fr]">
<div> <div>
<p className="text-sm font-semibold uppercase tracking-[0.18em] text-[#8d6125]">Coach supervised</p> <p className={ui.overline}>Coach supervised</p>
<h2 className="mt-4 font-serif text-5xl font-semibold leading-tight md:text-6xl"> <h2 className={`${ui.heading} mt-4 text-5xl leading-tight md:text-6xl`}>
The AI proposes. The coach decides. The AI proposes. The coach decides.
</h2> </h2>
<p className="mt-6 text-lg leading-8 text-[#5c5143]"> <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, Private notes stay private. Shared notes are approved. Client-facing content carries the coach's voice,
not a generic chatbot voice. not a generic chatbot voice.
</p> </p>
</div> </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]) => (
['Your method', 'Capture language, frameworks, and recurring patterns from real sessions.'], <div key={title} className={`p-6 ${ui.card}`}>
['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.'],
].map(([title, copy]) => (
<div key={title} className="rounded-3xl border border-[#2e2417]/10 bg-[#fff8ec] p-6">
<h3 className="text-xl font-semibold">{title}</h3> <h3 className="text-xl font-semibold">{title}</h3>
<p className="mt-3 leading-7 text-[#5c5143]">{copy}</p> <p className={`mt-3 leading-7 ${ui.muted}`}>{copy}</p>
</div> </div>
))} ))}
</div> </div>
</div> </div>
</section> </section>
<section className="bg-[#fff8ec] px-5 py-20"> <section id="events" className={`px-5 py-20 ${ui.softSurface}`}>
<div className="mx-auto max-w-7xl"> <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 className="mb-8 flex flex-col justify-between gap-4 md:flex-row md:items-end">
<div> <div>
<p className="text-sm font-semibold uppercase tracking-[0.18em] text-[#8d6125]">Built with coaches</p> <p className={ui.overline}>Built with coaches</p>
<h2 className="mt-4 font-serif text-5xl font-semibold">Designed for real client work.</h2> <h2 className={`${ui.heading} mt-4 text-5xl`}>Designed for real client work.</h2>
</div> </div>
<Link href="/register/" className="rounded-full bg-[#17130d] px-6 py-3 text-center font-semibold text-[#fff7ec]"> <Link href="/register/" className={`rounded-full px-6 py-3 text-center font-semibold ${ui.button}`}>
Start your workspace Start your workspace
</Link> </Link>
</div> </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]) => ( {testimonials.map(([quote, name, role]) => (
<figure key={name} className="rounded-3xl border border-[#2e2417]/10 bg-[#f3eddf] p-6"> <figure key={name} className={`p-6 ${ui.card}`}>
<blockquote className="leading-8 text-[#3b3023]">“{quote}”</blockquote> <blockquote className={`leading-8 ${ui.ink}`}>“{quote}”</blockquote>
<figcaption className="mt-6"> <figcaption className="mt-6">
<p className="font-semibold">{name}</p> <p className="font-semibold">{name}</p>
<p className="text-sm text-[#5c5143]">{role}</p> <p className={`text-sm ${ui.muted}`}>{role}</p>
</figcaption> </figcaption>
</figure> </figure>
))} ))}
@ -327,37 +340,34 @@ export default function Starter() {
</section> </section>
<section id="pricing" className="px-5 py-20"> <section id="pricing" className="px-5 py-20">
<div className="mx-auto grid max-w-7xl grid-cols-1 overflow-hidden rounded-[2rem] border border-[#2e2417]/10 bg-[#17130d] text-[#fff7ec] lg:grid-cols-[0.9fr_1.1fr]"> <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"> <div className="p-8 md:p-12">
<p className="text-sm font-semibold uppercase tracking-[0.18em] text-[#f3b35c]">Template package</p> <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"> <h2 className="mt-4 font-serif text-5xl font-semibold leading-tight">
Launch a coaching practice with the workspace already inside. Launch a coaching practice with the workspace already inside.
</h2> </h2>
</div> </div>
<div className="bg-[#fff7ec] p-8 text-[#17130d] md:p-12"> <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 text-[#5c5143]"> <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> </p>
<div className="mt-7 grid grid-cols-1 gap-3 sm:grid-cols-2"> <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) => ( {['6 coaching sessions', 'AI-assisted session notes', 'Shared resources', 'Client portal access'].map((item) => (
<div key={item} className="rounded-2xl bg-[#f3eddf] p-4 font-medium"> <div key={item} className={`rounded-2xl p-4 font-medium ${ui.softSurface}`}>
{item} {item}
</div> </div>
))} ))}
</div> </div>
<Link <Link href="/register/" className={`mt-8 inline-flex rounded-full px-7 py-4 font-semibold ${ui.button}`}>
href="/register/"
className="mt-8 inline-flex rounded-full bg-[#17130d] px-7 py-4 font-semibold text-[#fff7ec]"
>
Create workspace Create workspace
</Link> </Link>
</div> </div>
</div> </div>
</section> </section>
<footer className="border-t border-[#2e2417]/10 px-5 py-10"> <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 text-[#5c5143] md:flex-row"> <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> <p>© 2026 Coaching SaaS Workspace. Coaching beyond the session.</p>
<div className="flex gap-5"> <div className="flex gap-5">
<Link href="/privacy-policy/">Privacy Policy</Link> <Link href="/privacy-policy/">Privacy Policy</Link>