Polish coaching landing design
This commit is contained in:
Flatlogic Bot
parent
05ae5235ee
commit
93bfc4732f
@ -3,9 +3,40 @@ import type { ReactElement } from 'react';
|
||||
import Head from 'next/head';
|
||||
import Link from 'next/link';
|
||||
import LayoutGuest from '../layouts/Guest';
|
||||
import BaseButton from '../components/BaseButton';
|
||||
import { getPageTitle } from '../config';
|
||||
|
||||
const trustItems = ['Coach-reviewed AI', 'Private client records', 'Session memory', 'Client portal'];
|
||||
|
||||
const stats = [
|
||||
['30 min', 'saved after every session with structured notes and follow-up drafts'],
|
||||
['23 days', 'between sessions where client momentum needs support'],
|
||||
['6 outputs', 'summary, commitments, blockers, homework, prep, and client notes'],
|
||||
];
|
||||
|
||||
const workflow = [
|
||||
['After every session', 'Capture themes, commitments, patterns, and follow-up copy while the coach stays present.'],
|
||||
['Between sessions', 'Keep clients connected to approved notes, resources, and action items inside their portal.'],
|
||||
['Before the next session', 'Surface open commitments, recent patterns, and a focused opening question.'],
|
||||
];
|
||||
|
||||
const testimonials = [
|
||||
[
|
||||
'The session recap caught the exact leadership pattern I wanted to revisit. I edited one sentence and sent it.',
|
||||
'Ari Morgan',
|
||||
'Executive Coach',
|
||||
],
|
||||
[
|
||||
'My clients finally have one place for notes, commitments, and the resources I share after each call.',
|
||||
'Leah Stone',
|
||||
'Founder Coach',
|
||||
],
|
||||
[
|
||||
'Prep used to mean hunting through old docs. Now I start every session with the thread already visible.',
|
||||
'Daniel Reyes',
|
||||
'Leadership Advisor',
|
||||
],
|
||||
];
|
||||
|
||||
export default function Starter() {
|
||||
return (
|
||||
<>
|
||||
@ -13,79 +44,321 @@ export default function Starter() {
|
||||
<title>{getPageTitle('Coaching Workspace')}</title>
|
||||
</Head>
|
||||
|
||||
<main className="min-h-screen bg-[#f7f3ec] text-slate-900">
|
||||
<section className="mx-auto grid min-h-[88vh] max-w-7xl grid-cols-1 gap-10 px-6 py-10 lg:grid-cols-[1.05fr_0.95fr] lg:px-10">
|
||||
<div className="flex flex-col justify-center">
|
||||
<p className="mb-5 text-sm font-semibold uppercase tracking-[0.18em] text-emerald-700">
|
||||
<main className="min-h-screen bg-[#f3eddf] text-[#17130d]">
|
||||
<div className="border-b border-[#2e2417]/10 bg-[#17130d] px-5 py-2 text-center text-sm text-[#f6ead5]">
|
||||
Built for coaches who want the session to keep working after the call ends.
|
||||
<Link href="/login/" className="ml-2 font-semibold underline decoration-[#f3b35c] underline-offset-4">
|
||||
Open workspace
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<header className="sticky top-0 z-20 border-b border-[#2e2417]/10 bg-[#f3eddf]/90 px-5 py-4 backdrop-blur">
|
||||
<div className="mx-auto flex max-w-7xl items-center justify-between gap-5">
|
||||
<Link href="/" className="text-lg font-semibold tracking-tight">
|
||||
Coaching SaaS Workspace
|
||||
</Link>
|
||||
<nav className="hidden items-center gap-7 text-sm font-medium text-[#5c5143] md:flex">
|
||||
<a href="#how-it-works">How it works</a>
|
||||
<a href="#session-memory">Session memory</a>
|
||||
<a href="#trust">Trust</a>
|
||||
<a href="#pricing">Packages</a>
|
||||
</nav>
|
||||
<div className="flex items-center gap-3">
|
||||
<Link href="/login/" className="hidden text-sm font-semibold text-[#17130d] sm:block">
|
||||
Login
|
||||
</Link>
|
||||
<Link
|
||||
href="/register/"
|
||||
className="rounded-full bg-[#17130d] px-5 py-2 text-sm font-semibold text-[#fff7ec] transition hover:bg-[#2c2419]"
|
||||
>
|
||||
Start free
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section className="mx-auto grid max-w-7xl grid-cols-1 gap-12 px-5 py-16 lg:grid-cols-[0.95fr_1.05fr] lg:px-8 lg:py-24">
|
||||
<div className="flex flex-col justify-center">
|
||||
<p className="mb-6 w-fit rounded-full border border-[#2e2417]/15 bg-[#fff8ec] px-4 py-2 text-xs font-semibold uppercase tracking-[0.18em] text-[#8d6125]">
|
||||
For executive and leadership coaches
|
||||
</p>
|
||||
<h1 className="max-w-3xl text-5xl font-semibold leading-tight text-slate-950 md:text-6xl">
|
||||
Turn every coaching session into clear memory, next steps, and client momentum.
|
||||
<h1 className="max-w-4xl font-serif text-6xl font-semibold leading-[0.95] tracking-tight text-[#17130d] md:text-7xl xl:text-8xl">
|
||||
Coaching that keeps going between sessions.
|
||||
</h1>
|
||||
<p className="mt-6 max-w-2xl text-lg leading-8 text-slate-600">
|
||||
A vertical SaaS workspace for coaches who need client context, AI-assisted session notes,
|
||||
prep briefs, shared resources, and a client portal without stitching together generic tools.
|
||||
<p className="mt-7 max-w-2xl text-xl leading-9 text-[#5c5143]">
|
||||
Turn raw session notes into client memory, prep briefs, commitments, and a private portal
|
||||
that reflects how you actually coach.
|
||||
</p>
|
||||
<div className="mt-8 flex flex-col gap-3 sm:flex-row">
|
||||
<BaseButton href="/login" label="Login" color="info" className="w-full sm:w-auto" />
|
||||
<BaseButton href="/register" label="Create account" color="white" className="w-full sm:w-auto" />
|
||||
<div className="mt-9 flex flex-col gap-3 sm:flex-row">
|
||||
<Link
|
||||
href="/register/"
|
||||
className="rounded-full bg-[#17130d] px-7 py-4 text-center font-semibold text-[#fff7ec] transition hover:bg-[#2c2419]"
|
||||
>
|
||||
Create workspace
|
||||
</Link>
|
||||
<a
|
||||
href="#session-memory"
|
||||
className="rounded-full border border-[#2e2417]/20 bg-[#fff8ec] px-7 py-4 text-center font-semibold text-[#17130d] transition hover:border-[#17130d]"
|
||||
>
|
||||
See session flow
|
||||
</a>
|
||||
</div>
|
||||
<div className="mt-8 flex flex-wrap gap-3 text-sm text-[#5c5143]">
|
||||
{trustItems.map((item) => (
|
||||
<span key={item} className="rounded-full border border-[#2e2417]/10 bg-[#fff8ec] px-4 py-2">
|
||||
{item}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center">
|
||||
<div className="w-full rounded bg-white p-5 shadow-sm ring-1 ring-slate-200">
|
||||
<div className="mb-5 flex items-center justify-between border-b border-slate-200 pb-4">
|
||||
<div>
|
||||
<p className="text-sm text-slate-500">Next session</p>
|
||||
<h2 className="text-xl font-semibold">Maya Chen</h2>
|
||||
<div className="relative">
|
||||
<div className="absolute -left-5 top-8 hidden h-28 w-28 rounded-full bg-[#f3b35c]/50 blur-3xl lg:block" />
|
||||
<div className="relative rounded-[2rem] border border-[#2e2417]/15 bg-[#fff8ec] p-4 shadow-[0_30px_90px_rgba(46,36,23,0.16)]">
|
||||
<div className="rounded-[1.5rem] bg-[#17130d] p-4 text-[#fff7ec]">
|
||||
<div className="mb-4 flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-xs uppercase tracking-[0.16em] text-[#f3b35c]">Session insights</p>
|
||||
<h2 className="mt-1 text-2xl font-semibold">Maya Chen · Session 4</h2>
|
||||
</div>
|
||||
<span className="rounded-full bg-[#f3b35c] px-3 py-1 text-sm font-semibold text-[#17130d]">
|
||||
Review
|
||||
</span>
|
||||
</div>
|
||||
<span className="rounded bg-emerald-50 px-3 py-1 text-sm font-medium text-emerald-700">
|
||||
Ready
|
||||
</span>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<p className="text-sm font-semibold text-slate-500">Prep brief</p>
|
||||
<p className="mt-1 text-slate-700">
|
||||
Review delegation boundaries, decision-rights matrix, and where Maya still feels exposed.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 gap-3 md:grid-cols-2">
|
||||
{['Open commitments', 'Suggested questions', 'Shared resources', 'Follow-up email'].map((item) => (
|
||||
<div key={item} className="rounded border border-slate-200 bg-slate-50 p-4">
|
||||
<p className="font-medium">{item}</p>
|
||||
<p className="mt-2 text-sm leading-6 text-slate-500">
|
||||
Generated from previous sessions and coach notes.
|
||||
</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-[#fff7ec]/10 p-4">
|
||||
<p className="text-sm font-medium text-[#fff7ec]">{topic}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-4 rounded-2xl bg-[#fff7ec] p-5 text-[#17130d]">
|
||||
<p className="text-sm font-semibold uppercase tracking-[0.14em] text-[#8d6125]">Commitments</p>
|
||||
<ul className="mt-4 space-y-3 text-sm leading-6">
|
||||
<li>Draft a decision-rights matrix before Friday.</li>
|
||||
<li>Choose three decisions the team can own without founder approval.</li>
|
||||
<li>Review customer escalation rules with the COO.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 grid grid-cols-1 gap-4 lg:grid-cols-[0.9fr_1.1fr]">
|
||||
<div className="rounded-2xl bg-[#fff7ec]/10 p-5">
|
||||
<p className="text-sm font-semibold text-[#f3b35c]">Pattern</p>
|
||||
<p className="mt-2 leading-7 text-[#f6ead5]">
|
||||
Maya is moving from control as quality assurance toward explicit decision boundaries.
|
||||
</p>
|
||||
</div>
|
||||
<div className="rounded-2xl bg-[#fff7ec]/10 p-5">
|
||||
<p className="text-sm font-semibold text-[#f3b35c]">Follow-up draft</p>
|
||||
<p className="mt-2 leading-7 text-[#f6ead5]">
|
||||
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 rounded-3xl border border-[#2e2417]/10 bg-white p-5 shadow-[0_22px_60px_rgba(46,36,23,0.18)] lg:block">
|
||||
<p className="text-xs font-semibold uppercase tracking-[0.16em] text-[#8d6125]">Client message</p>
|
||||
<p className="mt-3 leading-7 text-[#5c5143]">
|
||||
“The board conversation went better than expected. I led with the narrative instead of defending the roadmap.”
|
||||
</p>
|
||||
<p className="mt-4 rounded-2xl bg-[#f3eddf] p-3 text-sm font-medium">
|
||||
Suggested reply: What changed in the room when you led that way?
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="border-t border-slate-200 bg-white">
|
||||
<div className="mx-auto grid max-w-7xl grid-cols-1 gap-6 px-6 py-10 md:grid-cols-3 lg:px-10">
|
||||
{[
|
||||
['Session Memory', 'Extract summaries, blockers, homework, quotes, and follow-up notes from session transcripts.'],
|
||||
['Client Workspace', 'Keep goals, private notes, resources, and action items organized around every client.'],
|
||||
['Client Portal', 'Share the right notes, resources, and commitments without exposing coach-only context.'],
|
||||
].map(([title, copy]) => (
|
||||
<div key={title} className="rounded border border-slate-200 p-5">
|
||||
<h3 className="text-lg font-semibold">{title}</h3>
|
||||
<p className="mt-3 leading-7 text-slate-600">{copy}</p>
|
||||
<section className="border-y border-[#2e2417]/10 bg-[#fff8ec] px-5 py-10">
|
||||
<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 border-[#2e2417]/15 pl-5">
|
||||
<p className="font-serif text-5xl font-semibold text-[#17130d]">{value}</p>
|
||||
<p className="mt-3 max-w-sm leading-7 text-[#5c5143]">{label}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer className="bg-slate-950 px-6 py-6 text-sm text-white">
|
||||
<div className="mx-auto flex max-w-7xl flex-col justify-between gap-3 md:flex-row">
|
||||
<p>© 2026 Coaching SaaS Workspace. All rights reserved.</p>
|
||||
<div className="flex gap-4">
|
||||
<section id="how-it-works" className="mx-auto max-w-7xl px-5 py-20 lg:px-8">
|
||||
<div className="grid grid-cols-1 gap-10 lg:grid-cols-[0.8fr_1.2fr]">
|
||||
<div>
|
||||
<p className="text-sm font-semibold uppercase tracking-[0.18em] text-[#8d6125]">The new practice rhythm</p>
|
||||
<h2 className="mt-4 font-serif text-5xl font-semibold leading-tight md:text-6xl">
|
||||
Before, between, and after every session.
|
||||
</h2>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 gap-4">
|
||||
{workflow.map(([title, copy], index) => (
|
||||
<div key={title} className="grid grid-cols-[3rem_1fr] gap-5 rounded-3xl border border-[#2e2417]/10 bg-[#fff8ec] p-5">
|
||||
<div className="flex h-12 w-12 items-center justify-center rounded-full bg-[#17130d] font-semibold text-[#fff7ec]">
|
||||
{index + 1}
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-xl font-semibold">{title}</h3>
|
||||
<p className="mt-2 leading-7 text-[#5c5143]">{copy}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="session-memory" className="bg-[#17130d] px-5 py-20 text-[#fff7ec]">
|
||||
<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-[#f3b35c]">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 text-[#d8cbb6]">
|
||||
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-[#fff7ec]/10 bg-[#fff7ec]/5 p-4">
|
||||
<p className="font-semibold">{item}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-[2rem] border border-[#fff7ec]/10 bg-[#fff7ec] p-5 text-[#17130d]">
|
||||
<div className="flex flex-wrap items-center justify-between gap-4 border-b border-[#2e2417]/10 pb-5">
|
||||
<div>
|
||||
<p className="text-sm font-semibold uppercase tracking-[0.16em] text-[#8d6125]">Session prep</p>
|
||||
<h3 className="mt-1 text-2xl font-semibold">Maya Chen · Session 5</h3>
|
||||
</div>
|
||||
<span className="rounded-full bg-[#e7f2df] px-4 py-2 text-sm font-semibold text-[#356133]">
|
||||
Ready when you are
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="mt-5 grid grid-cols-3 gap-3">
|
||||
{[
|
||||
['4', 'messages'],
|
||||
['2', 'open commitments'],
|
||||
['3', 'goals in focus'],
|
||||
].map(([value, label]) => (
|
||||
<div key={label} className="rounded-2xl bg-[#f3eddf] p-4">
|
||||
<p className="text-3xl font-semibold">{value}</p>
|
||||
<p className="mt-1 text-sm text-[#5c5143]">{label}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-5 rounded-2xl border border-[#2e2417]/10 p-5">
|
||||
<p className="text-sm font-semibold uppercase tracking-[0.14em] text-[#8d6125]">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 text-[#5c5143]">
|
||||
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 bg-[#17130d] p-5 text-[#fff7ec]">
|
||||
<p className="text-sm font-semibold text-[#f3b35c]">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>
|
||||
|
||||
<section id="trust" className="mx-auto max-w-7xl px-5 py-20 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-[#8d6125]">Coach supervised</p>
|
||||
<h2 className="mt-4 font-serif text-5xl font-semibold leading-tight md:text-6xl">
|
||||
The AI proposes. The coach decides.
|
||||
</h2>
|
||||
<p className="mt-6 text-lg leading-8 text-[#5c5143]">
|
||||
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">
|
||||
{[
|
||||
['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.'],
|
||||
].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>
|
||||
<p className="mt-3 leading-7 text-[#5c5143]">{copy}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="bg-[#fff8ec] px-5 py-20">
|
||||
<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="text-sm font-semibold uppercase tracking-[0.18em] text-[#8d6125]">Built with coaches</p>
|
||||
<h2 className="mt-4 font-serif text-5xl font-semibold">Designed for real client work.</h2>
|
||||
</div>
|
||||
<Link href="/register/" className="rounded-full bg-[#17130d] px-6 py-3 text-center font-semibold text-[#fff7ec]">
|
||||
Start your workspace
|
||||
</Link>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-3">
|
||||
{testimonials.map(([quote, name, role]) => (
|
||||
<figure key={name} className="rounded-3xl border border-[#2e2417]/10 bg-[#f3eddf] p-6">
|
||||
<blockquote className="leading-8 text-[#3b3023]">“{quote}”</blockquote>
|
||||
<figcaption className="mt-6">
|
||||
<p className="font-semibold">{name}</p>
|
||||
<p className="text-sm text-[#5c5143]">{role}</p>
|
||||
</figcaption>
|
||||
</figure>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="pricing" className="px-5 py-20">
|
||||
<div className="mx-auto grid max-w-7xl grid-cols-1 overflow-hidden rounded-[2rem] border border-[#2e2417]/10 bg-[#17130d] text-[#fff7ec] lg:grid-cols-[0.9fr_1.1fr]">
|
||||
<div className="p-8 md:p-12">
|
||||
<p className="text-sm font-semibold uppercase tracking-[0.18em] text-[#f3b35c]">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="bg-[#fff7ec] p-8 text-[#17130d] md:p-12">
|
||||
<h3 className="text-2xl font-semibold">Executive Momentum</h3>
|
||||
<p className="mt-3 leading-7 text-[#5c5143]">
|
||||
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 bg-[#f3eddf] p-4 font-medium">
|
||||
{item}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<Link
|
||||
href="/register/"
|
||||
className="mt-8 inline-flex rounded-full bg-[#17130d] px-7 py-4 font-semibold text-[#fff7ec]"
|
||||
>
|
||||
Create workspace
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer className="border-t border-[#2e2417]/10 px-5 py-10">
|
||||
<div className="mx-auto flex max-w-7xl flex-col justify-between gap-5 text-sm text-[#5c5143] md:flex-row">
|
||||
<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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user