181 lines
12 KiB
HTML
181 lines
12 KiB
HTML
<html lang="en">
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>FocusFlow — Executive Summary</title>
|
|
<style>
|
|
:root{
|
|
--ink:#0B0D14; --surface:#13161F; --card:#13161F; --card-2:#1A1E29;
|
|
--line:rgba(150,160,190,.16); --line-strong:rgba(150,160,190,.30);
|
|
--text:#EEF0F7; --muted:#9BA1B4; --faint:#6E7488;
|
|
--emerald:#8F84F6; --emerald-deep:#ABA2F9; --emerald-glow:#ABA2F9;
|
|
--gold:#F4B24C; --coral:#E0A63E;
|
|
--serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
|
|
--sans:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
|
|
--mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
|
|
}
|
|
@media (prefers-color-scheme: light){
|
|
:root{ --ink:#F6F7FB; --surface:#FFFFFF; --card:#FFFFFF; --card-2:#EEF0F8;
|
|
--line:rgba(20,25,55,.10); --line-strong:rgba(20,25,55,.20);
|
|
--text:#14161D; --muted:#565C6C; --faint:#858B9C;
|
|
--emerald:#4B3FD1; --emerald-deep:#372BB0; --emerald-glow:#372BB0; --gold:#E8920C; --coral:#C77A11; }
|
|
}
|
|
:root[data-theme="dark"]{ --ink:#0B0D14; --surface:#13161F; --card:#13161F; --card-2:#1A1E29;
|
|
--line:rgba(150,160,190,.16); --line-strong:rgba(150,160,190,.30);
|
|
--text:#EEF0F7; --muted:#9BA1B4; --faint:#6E7488;
|
|
--emerald:#8F84F6; --emerald-deep:#ABA2F9; --emerald-glow:#ABA2F9; --gold:#F4B24C; --coral:#E0A63E; }
|
|
:root[data-theme="light"]{ --ink:#F6F7FB; --surface:#FFFFFF; --card:#FFFFFF; --card-2:#EEF0F8;
|
|
--line:rgba(20,25,55,.10); --line-strong:rgba(20,25,55,.20);
|
|
--text:#14161D; --muted:#565C6C; --faint:#858B9C;
|
|
--emerald:#4B3FD1; --emerald-deep:#372BB0; --emerald-glow:#372BB0; --gold:#E8920C; --coral:#C77A11; }
|
|
|
|
*{box-sizing:border-box}
|
|
body{margin:0; background:var(--ink); color:var(--text); font-family:var(--sans); font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased}
|
|
.sheet{max-width:960px; margin:0 auto; padding:40px 34px 46px}
|
|
h1,h2,h3{font-family:var(--serif); font-weight:600; margin:0; text-wrap:balance}
|
|
p{margin:0}
|
|
.tnum{font-variant-numeric:tabular-nums}
|
|
a{color:inherit}
|
|
|
|
.head{display:flex; align-items:flex-start; gap:16px; flex-wrap:wrap; border-bottom:1px solid var(--line); padding-bottom:20px}
|
|
.head .brand{display:flex; align-items:center; gap:10px; font-family:var(--serif); font-weight:700; font-size:19px}
|
|
.spark{width:11px;height:11px;border-radius:3px;background:var(--emerald);box-shadow:0 0 12px var(--emerald)}
|
|
.head .doc{font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--emerald); margin-top:3px}
|
|
.head .right{margin-left:auto; display:flex; gap:8px; align-items:center}
|
|
.pill{font-family:var(--mono); font-size:11px; padding:5px 10px; border-radius:999px; border:1px solid var(--line-strong); color:var(--muted); display:inline-flex; gap:7px; align-items:center; text-decoration:none}
|
|
.pill .dot{width:6px;height:6px;border-radius:50%;background:var(--emerald); box-shadow:0 0 7px var(--emerald)}
|
|
a.pill{color:var(--emerald); border-color:color-mix(in srgb,var(--emerald) 40%,var(--line-strong))}
|
|
|
|
.thesis{margin:24px 0 4px; font-family:var(--serif); font-size:clamp(24px,3.6vw,32px); line-height:1.16; letter-spacing:-.015em; max-width:26ch}
|
|
.thesis .em{color:var(--emerald)}
|
|
.deck{color:var(--muted); margin-top:12px; max-width:70ch; font-size:15.5px}
|
|
|
|
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:24px}
|
|
@media(max-width:720px){ .grid3{grid-template-columns:1fr} }
|
|
.blk{background:var(--card); border:1px solid var(--line); border-radius:13px; padding:18px 19px}
|
|
.blk .lab{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); margin-bottom:9px}
|
|
.blk .lab.g{color:var(--gold)}
|
|
.blk h3{font-size:16.5px; letter-spacing:-.01em; margin-bottom:6px}
|
|
.blk p{color:var(--muted); font-size:13.5px; line-height:1.5}
|
|
|
|
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden; margin-top:16px}
|
|
.stats > div{background:var(--card); padding:15px 16px}
|
|
.stats .k{font-family:var(--serif); font-weight:700; font-size:26px; letter-spacing:-.02em; color:var(--emerald)}
|
|
.stats .k.g{color:var(--gold)}
|
|
.stats .m{font-family:var(--mono); font-size:10px; letter-spacing:.07em; text-transform:uppercase; color:var(--faint); margin-top:5px}
|
|
@media(max-width:720px){ .stats{grid-template-columns:1fr 1fr} }
|
|
|
|
.split{display:grid; grid-template-columns:1.15fr .85fr; gap:16px; margin-top:16px}
|
|
@media(max-width:720px){ .split{grid-template-columns:1fr} }
|
|
.econ{background:linear-gradient(180deg,var(--card-2),var(--card)); border:1px solid var(--line-strong); border-radius:13px; padding:19px}
|
|
.econ .lab{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); margin-bottom:8px}
|
|
.econ .eq{font-family:var(--mono); font-size:12.5px; color:var(--muted); line-height:1.9}
|
|
.econ .eq .hi{color:var(--emerald); font-weight:600} .econ .eq .hg{color:var(--gold); font-weight:600}
|
|
.econ .big{font-family:var(--serif); font-weight:700; font-size:22px; letter-spacing:-.01em; margin-top:8px}
|
|
|
|
.status{background:var(--card); border:1px solid var(--line); border-radius:13px; padding:19px}
|
|
.status .lab{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); margin-bottom:10px}
|
|
.srow{display:flex; align-items:center; gap:10px; padding:5px 0; font-size:13.5px}
|
|
.srow .ic{width:18px;height:18px;flex:0 0 18px;border-radius:5px;display:grid;place-items:center;font-size:11px;font-weight:700}
|
|
.ic.ok{background:color-mix(in srgb,var(--emerald) 20%,transparent); color:var(--emerald)}
|
|
.ic.gate{background:color-mix(in srgb,var(--gold) 22%,transparent); color:var(--gold)}
|
|
.srow .g2{margin-left:auto; font-family:var(--mono); font-size:10px; color:var(--faint)}
|
|
|
|
.ask{margin-top:18px; background:var(--card-2); border:1px solid var(--line-strong); border-left:3px solid var(--emerald); border-radius:0 12px 12px 0; padding:16px 20px}
|
|
.ask .lab{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--emerald); margin-bottom:6px}
|
|
.ask p{font-size:14.5px}
|
|
.ask b{color:var(--text)}
|
|
|
|
.foot{margin-top:22px; border-top:1px solid var(--line); padding-top:14px; font-family:var(--mono); font-size:11px; color:var(--faint); display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap}
|
|
.foot a{color:var(--emerald); text-decoration:none}
|
|
|
|
@media print{
|
|
:root{ --ink:#fff; --surface:#fff; --card:#fff; --card-2:#f4f5fa; --line:rgba(20,25,55,.14); --line-strong:rgba(20,25,55,.26);
|
|
--text:#14161d; --muted:#3d4250; --faint:#6a7080; --emerald:#3a2fb0; --emerald-deep:#2c2288; --gold:#a9690a; --coral:#9a5f0d; }
|
|
*{ -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important }
|
|
@page{ size:A4; margin:10mm }
|
|
html,body{ background:#fff; font-size:11.5px; line-height:1.48 }
|
|
.sheet{ padding:0; max-width:none }
|
|
.head{ padding-bottom:12px } .head .right .pill.pdflink{ display:none }
|
|
.thesis{ font-size:21px; margin:14px 0 3px }
|
|
.deck{ font-size:12px; margin-top:8px }
|
|
.grid3{ margin-top:12px; gap:10px } .blk{ padding:13px 14px } .blk h3{ font-size:14.5px } .blk p{ font-size:11.5px; line-height:1.42 }
|
|
.stats{ margin-top:10px } .stats > div{ padding:11px 13px } .stats .k{ font-size:22px }
|
|
.split{ margin-top:10px; gap:10px } .econ,.status{ padding:14px } .econ .big{ font-size:19px }
|
|
.srow{ padding:3px 0 } .ask{ margin-top:11px; padding:12px 16px } .ask p{ font-size:12.5px }
|
|
.foot{ margin-top:12px; padding-top:10px }
|
|
.blk,.econ,.status,.ask,.stats{ break-inside:avoid }
|
|
}
|
|
</style>
|
|
|
|
<div class="sheet">
|
|
<div class="head">
|
|
<div>
|
|
<div class="brand"><span class="spark"></span>FocusFlow</div>
|
|
<div class="doc">Executive Summary</div>
|
|
</div>
|
|
<div class="right">
|
|
<span class="pill"><span class="dot"></span>Live in production</span>
|
|
<a class="pill pdflink" href="https://zoe-pitches.mosaic.site/focusflow/FocusFlow-Executive-Summary.pdf">PDF ↓</a>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="thesis">An academic operating system for the students mainstream tools leave behind — <span class="em">already live in production</span>.</p>
|
|
<p class="deck">FocusFlow combines an AI study coach that teaches instead of handing over answers, a full executive-function toolkit, and a safe, verified tutor marketplace in one app — built for the roughly 1 in 5 students who are neurodivergent. It’s not a prototype: 49 data models, 51 screens, and 600+ automated tests, built solo to production grade in about ten weeks. The revenue engine is coded and proven end-to-end against live Stripe (test mode) — one decision from turning on.</p>
|
|
|
|
<div class="grid3">
|
|
<div class="blk">
|
|
<div class="lab g">The problem</div>
|
|
<h3>Built for the already-organized</h3>
|
|
<p>Mainstream study tools assume the hard part is content. For a neurodivergent student, the hard part is starting, staying on track, and self-regulating — a layer no point tool owns, so families duct-tape a planner, flashcards, a tutor, and a wellbeing app together.</p>
|
|
</div>
|
|
<div class="blk">
|
|
<div class="lab">The solution</div>
|
|
<h3>Nine modules, one shared brain</h3>
|
|
<p>An AI coach, executive-function toolkit, full study system, grades & GPA, an accessibility engine, and a safe tutor marketplace — every module writes to the same student model, so the coach gets proactive before a test.</p>
|
|
</div>
|
|
<div class="blk">
|
|
<div class="lab">Why it wins</div>
|
|
<h3>Neuro-first moat, revenue already built</h3>
|
|
<p>Accessibility-first architecture and a “teaches, won’t cheat” AI are hard to fast-follow. Near-zero cost to run, and it owns the whole student — so it’s sticky, and the revenue engine is already proven against live Stripe.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="stats">
|
|
<div><div class="k tnum">51</div><div class="m">Product screens shipped</div></div>
|
|
<div><div class="k g tnum">600+</div><div class="m">Automated tests green</div></div>
|
|
<div><div class="k tnum">Live</div><div class="m">Deployed & verified</div></div>
|
|
<div><div class="k g tnum">3</div><div class="m">Sided market · student·parent·tutor</div></div>
|
|
</div>
|
|
|
|
<div class="split">
|
|
<div class="econ">
|
|
<div class="lab">Unit economics</div>
|
|
<div class="eq">
|
|
<span class="hi">1</span> paying tutor = <span class="hi">$5/mo</span> recurring<br>
|
|
<span class="hg">1,000</span> tutors ≈ <span class="hg">~$60K/yr</span> recurring<br>
|
|
→ before any premium tier or B2B school seats
|
|
</div>
|
|
<div class="big">Free core. Multiple ways to earn.</div>
|
|
<p style="color:var(--muted); font-size:12.5px; margin-top:7px">Model: free-forever student core drives adoption; revenue rides tutor subscriptions, a premium family tier, and B2B school licensing — near-zero cost to serve. <span style="color:var(--faint)">Figures illustrative.</span></p>
|
|
</div>
|
|
<div class="status">
|
|
<div class="lab">Where we are</div>
|
|
<div class="srow"><span class="ic ok">✓</span> Core app + accessibility engine, live <span class="g2">DONE</span></div>
|
|
<div class="srow"><span class="ic ok">✓</span> 600+ tests · CI on real Postgres <span class="g2">DONE</span></div>
|
|
<div class="srow"><span class="ic ok">✓</span> Premium AI & notifications wired <span class="g2">DONE</span></div>
|
|
<div class="srow"><span class="ic gate">!</span> Marketplace payments — test mode only <span class="g2">GATE</span></div>
|
|
<div class="srow"><span class="ic gate">!</span> LiveKit video — built, needs credentials <span class="g2">GATE</span></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ask">
|
|
<div class="lab">The ask</div>
|
|
<p><b>A green light to run a small student pilot this term (15–30 real students), then flip the marketplace live.</b> The build risk is behind us — this is now about proving retention with real students and turning a revenue engine already proven in test mode into real dollars.</p>
|
|
</div>
|
|
|
|
<div class="foot">
|
|
<span>FocusFlow · Executive Summary · Confidential</span>
|
|
<span>Full plan: <a href="https://zoe-pitches.mosaic.site/focusflow/">zoe-pitches.mosaic.site/focusflow</a></span>
|
|
</div>
|
|
</div>
|