index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CEO Assistant</title>
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;font-family:'Space Grotesk',sans-serif;background:#000;color:#e4e4e7}
a{color:#818cf8;text-decoration:none}
::-webkit-scrollbar{display:none}

/* Two-page snap scroll */
.pages{height:100%;overflow-y:scroll;scroll-snap-type:y mandatory}
.page{height:100vh;scroll-snap-align:start;position:relative;overflow:hidden}

/* ===== CANVAS BG ===== */
canvas#bg{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0}

/* ===== PAGE 1: HERO ===== */
.p1{display:flex;align-items:center;z-index:1;position:relative}
.p1-inner{width:100%;max-width:1200px;margin:0 auto;padding:0 48px;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.p1-left h1{font-size:clamp(2.8rem,5.5vw,4.5rem);font-weight:700;letter-spacing:-0.04em;line-height:1}
.p1-left h1 span{display:block;background:linear-gradient(135deg,#818cf8 0%,#c084fc 40%,#f472b6 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-size:200% 200%;animation:gShift 6s ease infinite}
@keyframes gShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.p1-left p{color:#a1a1aa;font-size:1.05rem;margin:20px 0 32px;line-height:1.7;max-width:440px}
.p1-left .install{font-family:'JetBrains Mono',monospace;font-size:0.85rem;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);border-radius:8px;padding:12px 20px;display:inline-block;color:#818cf8;cursor:pointer;transition:all 0.3s}
.p1-left .install:hover{background:rgba(129,140,248,0.1);border-color:rgba(129,140,248,0.3)}
.p1-left .install::before{content:'$ ';color:#52525b}

/* Right side: terminal */
.terminal{background:rgba(9,9,11,0.8);border:1px solid rgba(255,255,255,0.06);border-radius:12px;backdrop-filter:blur(20px);overflow:hidden;box-shadow:0 25px 60px rgba(0,0,0,0.5)}
.t-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:rgba(255,255,255,0.02);border-bottom:1px solid rgba(255,255,255,0.04)}
.t-dot{width:9px;height:9px;border-radius:50%;opacity:0.6}
.t-dot:nth-child(1){background:#f87171}.t-dot:nth-child(2){background:#fbbf24}.t-dot:nth-child(3){background:#4ade80}
.t-body{padding:16px 18px;font-family:'JetBrains Mono',monospace;font-size:0.78rem;line-height:1.9;color:#71717a}
.t-body .g{color:#4ade80}.t-body .w{color:#e4e4e7}.t-body .v{color:#818cf8}.t-body .p{color:#f472b6}
.cursor{display:inline-block;width:7px;height:14px;background:#818cf8;animation:blink 1s step-end infinite;vertical-align:middle;margin-left:2px}
@keyframes blink{50%{opacity:0}}

/* Stats row */
.stats-row{display:flex;gap:24px;margin:28px 0 0;flex-wrap:wrap}
.sr-item{display:flex;align-items:baseline;gap:6px}
.sr-num{font-size:1.4rem;font-weight:700}
.sr-num.a{color:#818cf8}.sr-num.b{color:#4ade80}.sr-num.c{color:#f472b6}.sr-num.d{color:#fbbf24}
.sr-label{font-size:0.7rem;color:#52525b;text-transform:uppercase;letter-spacing:0.08em}

/* Scroll hint */
.scroll-hint{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:4px;color:#3f3f46;font-size:0.65rem;text-transform:uppercase;letter-spacing:0.15em;animation:bobble 2s ease-in-out infinite}
@keyframes bobble{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(6px)}}
.scroll-hint svg{width:16px;height:16px;stroke:#3f3f46;fill:none;stroke-width:2}

/* ===== PAGE 2: DASHBOARD ===== */
.p2{z-index:1;position:relative}
.p2-grid{max-width:1200px;margin:0 auto;padding:20px 32px 48px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;height:calc(100vh - 48px);grid-template-rows:auto 1fr auto}

/* Glass panels */
.panel{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;padding:16px 20px;overflow:hidden;transition:border-color 0.3s;backdrop-filter:blur(8px)}
.panel:hover{border-color:rgba(255,255,255,0.16)}
.panel-head{font-size:0.65rem;text-transform:uppercase;letter-spacing:0.15em;color:#a1a1aa;font-weight:600;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.panel-dot{width:7px;height:7px;border-radius:50%;display:inline-block}

/* Command chips */
.cmd-flow{display:flex;flex-wrap:wrap;gap:6px}
.chip{font-family:var(--mono);font-size:0.72rem;padding:5px 12px;background:rgba(129,140,248,0.08);border:1px solid rgba(129,140,248,0.15);border-radius:100px;color:#a5b4fc;transition:all 0.2s;cursor:default}
.chip:hover{background:rgba(129,140,248,0.15);border-color:rgba(129,140,248,0.4);color:#c7d2fe;transform:translateY(-1px)}

/* Built with numbers */
.built-nums{display:flex;gap:20px;justify-content:center;padding:8px 0}
.built-nums div{text-align:center}
.built-nums strong{display:block;font-size:1.6rem;font-weight:800;background:linear-gradient(135deg,#e4e4e7,#71717a);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.built-nums small{font-size:0.6rem;color:#52525b;text-transform:uppercase;letter-spacing:0.1em}

/* Table */
.tbl{width:100%;border-collapse:collapse;font-size:0.75rem}
.tbl th{text-align:left;padding:6px 12px;font-size:0.6rem;text-transform:uppercase;letter-spacing:0.08em;color:#a1a1aa;border-bottom:1px solid rgba(255,255,255,0.08);font-weight:600}
.tbl td{padding:5px 12px;color:#d4d4d8;border-bottom:1px solid rgba(255,255,255,0.03)}
.tbl tr:hover td{color:#e4e4e7}
.pill{font-size:0.65rem;padding:2px 8px;border-radius:100px;font-weight:600}
.pill.g{background:rgba(74,222,128,0.1);color:#4ade80}
.pill.y{background:rgba(251,191,36,0.1);color:#fbbf24}
.pill.r{background:rgba(248,113,113,0.1);color:#f87171}

/* Capability bars */
.cap-list{display:flex;flex-direction:column;gap:10px}
.cap{position:relative}
.cap-bar{height:3px;border-radius:2px;display:block;margin-bottom:4px;opacity:0.6}
.cap-name{font-size:0.78rem;font-weight:600;display:block;color:#e4e4e7}
.cap-detail{font-size:0.62rem;color:#a1a1aa}

/* Calculator pills */
.calc-pills{display:flex;flex-wrap:wrap;gap:5px}
.cpill{font-size:0.7rem;padding:4px 10px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:6px;color:#d4d4d8;transition:all 0.2s}
.cpill:hover{border-color:rgba(56,189,248,0.3);color:#e4e4e7}
.cpill.hl{border-color:rgba(56,189,248,0.2);color:#38bdf8;background:rgba(56,189,248,0.05)}

/* Source tags */
.src-tags{display:flex;flex-wrap:wrap;gap:6px}
.stag{font-size:0.68rem;padding:4px 10px;background:rgba(168,85,247,0.06);border:1px solid rgba(168,85,247,0.12);border-radius:6px;color:#a78bfa}
.stag small{color:#7c3aed;margin-left:4px}

/* Footer bar */
.p2-footer{position:absolute;bottom:0;left:0;right:0;padding:10px 32px;display:flex;justify-content:space-between;align-items:center;font-size:0.7rem;color:#3f3f46;border-top:1px solid rgba(255,255,255,0.03);background:rgba(0,0,0,0.5);backdrop-filter:blur(10px);z-index:2}
.p2-footer a{color:#818cf8}

@media(max-width:900px){
.p1-inner,.p2-inner{grid-template-columns:1fr;padding:0 24px}
.terminal{display:none}
.feat-row{grid-template-columns:1fr 1fr}
.p2-inner{height:auto;overflow:auto}
.page{height:auto;min-height:100vh}
}
</style>
</head>
<body>

<canvas id="bg"></canvas>

<div class="pages">

<!-- PAGE 1 -->
<div class="page p1">
<div class="p1-inner">
<div class="p1-left">
<h1>Office of<br><span>the CEO</span></h1>
<p>19 Claude Code commands that turn your AI into a startup chief of staff. Validated frameworks from YC, Sequoia, Bessemer, and a16z. Real benchmarks, real formulas, real workflows.</p>
<div class="install" onclick="navigator.clipboard.writeText('/plugin marketplace add sacredvoid/ceo-assistant')">/plugin marketplace add sacredvoid/ceo-assistant</div>
<div class="stats-row">
<div class="sr-item"><span class="sr-num a">19</span><span class="sr-label">Commands</span></div>
<div class="sr-item"><span class="sr-num b">14</span><span class="sr-label">Calculators</span></div>
<div class="sr-item"><span class="sr-num c">13</span><span class="sr-label">Industries</span></div>
<div class="sr-item"><span class="sr-num d">12</span><span class="sr-label">Frameworks</span></div>
</div>
</div>
<div class="terminal">
<div class="t-bar"><div class="t-dot"></div><div class="t-dot"></div><div class="t-dot"></div></div>
<div class="t-body">
<div><span class="g">$</span> <span class="w">/ceo-validate</span></div>
<div>Describe your idea...</div>
<div style="height:6px"></div>
<div><span class="g">$</span> <span class="w">AI contract generator for startups</span></div>
<div style="height:4px"></div>
<div><span class="v">Score: 78/100</span> <span class="p">Strong</span></div>
<div>Industry: LegalTech | CAC: $200-500</div>
<div>Tar Pit: <span class="g">CLEAR</span> - LLMs unlock this</div>
<div style="height:6px"></div>
<div><span class="g">$</span> <span class="w">/ceo-calc</span></div>
<div>LTV:CAC = <span class="v">5.2:1</span> <span class="g">Excellent</span></div>
<div>Runway = <span class="v">14.3mo</span> <span class="p">Start fundraising</span></div>
<div>Burn Multiple = <span class="v">1.8x</span> <span class="g">Good</span></div>
<div style="height:6px"></div>
<div><span class="g">$</span> <span class="w">/ceo-pitch-deck</span><span class="cursor"></span></div>
</div>
</div>
</div>
<div class="scroll-hint">
<svg viewBox="0 0 24 24"><path d="M12 5v14M5 12l7 7 7-7"/></svg>
scroll
</div>
</div>

<!-- PAGE 2 -->
<div class="page p2">
<div class="p2-grid">

<!-- TOP ROW: 3 glass panels -->
<div class="panel" style="grid-column:1/3">
<div class="panel-head"><span class="panel-dot" style="background:#818cf8"></span>19 Commands</div>

<div class="cmd-flow">
<span class="chip">validate</span><span class="chip">score</span><span class="chip">calc</span><span class="chip">spreadsheet</span><span class="chip">pitch-deck</span><span class="chip">presentation</span><span class="chip">compete</span><span class="chip">market-size</span><span class="chip">lean-canvas</span><span class="chip">gtm</span><span class="chip">fundraise</span><span class="chip">board-update</span><span class="chip">okrs</span><span class="chip">metrics</span><span class="chip">persona</span><span class="chip">interview</span><span class="chip">hiring</span><span class="chip">legal</span><span class="chip">decision</span>
</div>
</div>

<div class="panel">
<div class="panel-head"><span class="panel-dot" style="background:#4ade80"></span>Built with</div>
<div class="built-nums">
<div><strong>~50</strong><small>agents</small></div>
<div><strong>200+</strong><small>pages</small></div>
<div><strong>60K</strong><small>words</small></div>
</div>
</div>

<!-- MIDDLE ROW: benchmarks + capabilities -->
<div class="panel" style="grid-column:1/3">
<div class="panel-head"><span class="panel-dot" style="background:#f472b6"></span>Industry Benchmarks</div>

<table class="tbl">
<tr><th>Industry</th><th>Success</th><th>CAC</th><th>LTV</th><th>PMF</th></tr>
<tr><td>SaaS B2B</td><td><span class="pill g">62%</span></td><td>$200-500</td><td>$1.5-5K</td><td>10-14mo</td></tr>
<tr><td>FinTech</td><td><span class="pill g">58%</span></td><td>$50-200</td><td>$500-2K</td><td>12-18mo</td></tr>
<tr><td>HealthTech</td><td><span class="pill y">55%</span></td><td>$100-400</td><td>$1-5K</td><td>14-24mo</td></tr>
<tr><td>AI/ML</td><td><span class="pill y">~45%</span></td><td>$50-500</td><td>$500-5K</td><td>8-18mo</td></tr>
<tr><td>Marketplace</td><td><span class="pill r">42%</span></td><td>$20-80</td><td>$200-800</td><td>12-24mo</td></tr>
<tr><td>Mobile App</td><td><span class="pill r">35%</span></td><td>$2-10</td><td>$10-50</td><td>8-16mo</td></tr>
</table>
</div>

<div class="panel">
<div class="panel-head"><span class="panel-dot" style="background:#fbbf24"></span>Capabilities</div>
<div class="cap-list">
<div class="cap"><span class="cap-bar" style="background:linear-gradient(90deg,#818cf8,#6366f1);width:100%"></span><span class="cap-name">Idea Validation</span><span class="cap-detail">15-criteria scoring + tar pit detection</span></div>
<div class="cap"><span class="cap-bar" style="background:linear-gradient(90deg,#4ade80,#22c55e);width:90%"></span><span class="cap-name">Financial Modeling</span><span class="cap-detail">14 calculators + .xlsx export</span></div>
<div class="cap"><span class="cap-bar" style="background:linear-gradient(90deg,#f472b6,#ec4899);width:85%"></span><span class="cap-name">Pitch Decks</span><span class="cap-detail">Sequoia format + live research</span></div>
<div class="cap"><span class="cap-bar" style="background:linear-gradient(90deg,#fbbf24,#f59e0b);width:80%"></span><span class="cap-name">Competitive Intel</span><span class="cap-detail">Live web scraping + positioning</span></div>
<div class="cap"><span class="cap-bar" style="background:linear-gradient(90deg,#a855f7,#9333ea);width:75%"></span><span class="cap-name">CEO Operations</span><span class="cap-detail">OKRs, EOS, cadences, board prep</span></div>
<div class="cap"><span class="cap-bar" style="background:linear-gradient(90deg,#38bdf8,#0ea5e9);width:70%"></span><span class="cap-name">Decision Frameworks</span><span class="cap-detail">Bezos, Pre-Mortem, RAPID, 9 more</span></div>
</div>
</div>

<!-- BOTTOM ROW: calculators + sources -->
<div class="panel">
<div class="panel-head"><span class="panel-dot" style="background:#38bdf8"></span>14 Calculators</div>
<div class="calc-pills">
<span class="cpill">ROI</span><span class="cpill">TAM/SAM/SOM</span><span class="cpill">Startup Costs</span><span class="cpill">Funding</span><span class="cpill">Break-Even</span><span class="cpill">Runway</span><span class="cpill">Valuation</span><span class="cpill">CAC</span><span class="cpill">LTV</span><span class="cpill">Equity</span><span class="cpill hl">Magic Number</span><span class="cpill hl">Burn Multiple</span><span class="cpill hl">Quick Ratio</span><span class="cpill hl">Rule of X</span>
</div>
</div>

<div class="panel" style="grid-column:2/4">
<div class="panel-head"><span class="panel-dot" style="background:#a855f7"></span>Data Sources</div>

<div class="src-tags">
<span class="stag">IdeaProof.io <small>63 pages</small></span>
<span class="stag">Carta 2025</span>
<span class="stag">Bessemer Cloud 100</span>
<span class="stag">a16z Growth Guide</span>
<span class="stag">YC Startup School</span>
<span class="stag">Sequoia Arc PMF</span>
<span class="stag">SaaStr</span>
<span class="stag">Lenny's Newsletter</span>
<span class="stag">First Page Sage</span>
<span class="stag">First Round Review</span>
<span class="stag">OpenView SaaS</span>
</div>
</div>

</div>
<div class="p2-footer">
<span>MIT License / <a href="https://github.com/sacredvoid">sacredvoid</a></span>
<span style="color:#3f3f46">v3.0</span>
<span>Powered by <a href="https://claude.ai/code">Claude Code</a></span>
</div>
</div>

</div>

<script>
// Animated dot grid background
const c=document.getElementById('bg'),x=c.getContext('2d');
let W,H,t=0,mx=0,my=0;
function resize(){W=c.width=innerWidth;H=c.height=innerHeight}
resize();window.addEventListener('resize',resize);
document.addEventListener('mousemove',e=>{mx=e.clientX;my=e.clientY});

const dots=[];const S=40;
function initDots(){dots.length=0;for(let i=0;i<W;i+=S)for(let j=0;j<H;j+=S)dots.push({ox:i,oy:j,x:i,y:j})}
initDots();window.addEventListener('resize',initDots);

function draw(){
x.fillStyle='rgba(0,0,0,0.15)';x.fillRect(0,0,W,H);
t+=0.003;
for(const d of dots){
const dx=mx-d.ox,dy=my-d.oy;
const dist=Math.sqrt(dx*dx+dy*dy);
const pull=Math.max(0,1-dist/200);
d.x=d.ox+Math.sin(t+d.ox*0.01)*3+dx*pull*0.08;
d.y=d.oy+Math.cos(t+d.oy*0.01)*3+dy*pull*0.08;
const bright=0.15+pull*0.6;
const hue=240+pull*80;
x.fillStyle=`hsla(${hue},70%,70%,${bright})`;
x.beginPath();
x.arc(d.x,d.y,1+pull*2,0,Math.PI*2);
x.fill();
// Connect nearby dots
for(const d2 of dots){
const ddx=d.x-d2.x,ddy=d.y-d2.y;
const dd=ddx*ddx+ddy*ddy;
if(dd<S*S*1.5&&dd>0){
x.strokeStyle=`hsla(${hue},60%,60%,${0.03+pull*0.1})`;
x.beginPath();x.moveTo(d.x,d.y);x.lineTo(d2.x,d2.y);x.stroke();
}
}
}
requestAnimationFrame(draw);
}
draw();
</script>

</body>
</html>