/* OperatorsDen — content sections (part 1): Hero variants, What-Is, Four Cs, Ladder */
/* ---------- Animated terminal (the 7:15 report building itself) ---------- */
function Terminal({ compact = false }) {
const lines = React.useMemo(() => ([
{ t: '07:15 market-wind › building daily report', c: 'var(--gold)', pre: '' },
{ t: 'pulling 11 tickers · pre-market gaps', c: 'var(--text-on-dark-muted)', pre: '→ ' },
{ t: 'scoring overnight news · risk flags', c: 'var(--text-on-dark-muted)', pre: '→ ' },
{ t: 'drafting + formatting · sending to inbox', c: 'var(--text-on-dark-muted)', pre: '→ ' },
{ t: 'delivered · 0 hands touched it', c: '#5fd08a', pre: '✓ ' },
]), []);
const [shown, setShown] = React.useState(0);
const [typed, setTyped] = React.useState('');
const ref = React.useRef(null);
React.useEffect(() => {
const el = ref.current; if (!el) return;
let timers = [];
timers.push(setTimeout(run, 500));
function run() {
let li = 0;
function nextLine() {
if (li >= lines.length) {
// loop after a pause
timers.push(setTimeout(() => { setShown(0); setTyped(''); li = 0; nextLine(); }, 3800));
return;
}
const full = lines[li].pre + lines[li].t;
let ci = 0;
function typeChar() {
ci++;
setTyped(full.slice(0, ci));
if (ci < full.length) {
timers.push(setTimeout(typeChar, 16 + Math.random() * 22));
} else {
setShown((s) => s + 1);
setTyped('');
li++;
timers.push(setTimeout(nextLine, 360));
}
}
typeChar();
}
nextLine();
}
return () => { timers.forEach(clearTimeout); };
}, [lines]);
return (
JJ_OS — market-wind.skill
System Running
{lines.slice(0, shown).map((l, i) => (
{l.pre}{l.t}
))}
{shown < lines.length && (
{typed}
)}
);
}
/* ---------- Hero ---------- */
function Hero({ go, layout, accent }) {
const emph = accent === 'gold' ? 'var(--gold)' : 'var(--coral)';
const headline = (em) => (
<>Your business runs on what you know.{' '}
We wire it into an AI system that runs the work while you stay in control.
);
const sub = 'The Operators Den installs an AI operating system, one 60-minute session at a time. No dev team. No subscriptions. Just a system mapped to how you actually think and operate.';
const ctas = (
);
const trust = (
{['Bring your own Claude account', 'Every session stands alone', 'Built live, with you'].map((t) => (
{t}
))}
);
// ---------- SPLIT ----------
if (layout === 'split') {
return (
Currently Taking Clients
{headline(emph)}
{sub}
{ctas}{trust}
);
}
// ---------- EDITORIAL (centered) ----------
if (layout === 'editorial') {
return (
Currently Taking Clients
{headline(emph)}
{sub}
{ctas}
{['Bring your own Claude account', 'Every session stands alone', 'Built live, with you'].map((t) => (
{t}
))}
);
}
// ---------- MOSAIC ----------
const tiles = [
['context', 'Know', 'Learns your business cold', 'brain'],
['connections', 'Reach', 'Wired to your real tools', 'cable'],
['capabilities', 'Do', 'Does the work without you', 'zap'],
['cadence', 'Run', 'Runs daily. Laptop closed.', 'repeat'],
];
return (
Currently Taking Clients
{headline(emph)}
{sub}
{ctas}{trust}
{tiles.map(([key, title, body, icon], i) => (
))}
);
}
function hStyle() {
return { margin: '22px 0 0', fontSize: 'clamp(2.5rem, 1.4rem + 4.2vw, 4.1rem)', fontWeight: 800, letterSpacing: '-0.025em', lineHeight: 1.04, color: 'var(--navy)', textWrap: 'balance' };
}
function pStyle() {
return { margin: '24px 0 0', fontSize: 'clamp(1.05rem, 1rem + 0.4vw, 1.2rem)', lineHeight: 1.62, color: 'var(--text-body)', maxWidth: 560, textWrap: 'pretty' };
}
/* ---------- Logo marquee strip ---------- */
function ProofStrip() {
const items = ['Market report at 7:15 AM', 'Trading journal in 20 min', 'Client reports that write themselves', 'Lead follow-up handled for you', 'Weekly research, no prompt', 'Inbox triaged before coffee'];
const row = [...items, ...items];
return (
{row.map((t, i) => (
{t}
))}
);
}
/* ---------- What this is (habit vs system) ---------- */
function WhatIs() {
const habitTags = ['re-explains daily', 'forgets context', 'always manual'];
const systemTags = ['remembers everything', 'stays connected', 'runs automatically'];
const examples = [
['mail', 'Market report', 'Emails you at 7:15 AM every weekday, written, formatted, and sent without your hands touching it.'],
['trending-up', 'Trading journal', 'Pulls your trade data, scores your decisions against your own rules, and drafts the analysis.'],
['file-text', 'Client report', 'Assembles itself from your session notes and delivers a monthly summary before you open your laptop.'],
];
return (
What this is
Most people use AI like a search engine.{' '}
That is a habit, not a system.
A real system is different. It captures your business context, your workflows, your knowledge, your data, and runs the execution so you can focus on decisions. It does not forget between conversations. It does not need to be re-explained every Monday morning.
{/* contrast pair — coral = bad, gold = good */}
A habit
Open it. Ask a question. Copy-paste the answer. Close it. Tomorrow you start from scratch and explain everything again.
{habitTags.map((t) => (
{t}
))}
{/* VS badge */}
A system
Lives on your machine. Knows your business. Wired to your calendar, email, and data. Runs things on its own, before you ask.
{systemTags.map((t) => (
{t}
))}
{/* in practice */}
What one looks like in practice
{examples.map(([icon, title, text]) => (
))}
One operator. No dev team.
);
}
/* ---------- Four Cs ---------- */
function FourCs() {
const data = [
['context', '01', 'Know', 'The system learns your business — we map your tools and find where your time leaks.', 'brain'],
['connections', '02', 'Reach', 'We wire your tools into a live foundation — calendar, email, CRM, whatever you run on.', 'cable'],
['capabilities', '03', 'Do', 'We build the first automation doing real work inside your workflow.', 'zap'],
['cadence', '04', 'Run', 'We set the rhythm. You hand off the task. Laptop closed, it keeps going.', 'repeat'],
];
return (
The framework
Everything we build runs on Know, Reach, Do, Run
A complete system answers all four. We build toward that together, one session at a time.
{data.map(([key, num, title, body, icon], i) => (
{num}
{title}
{body}
))}