// The "chat IS the product" section — paired chat demo + 3 principles // + competitor comparison strip + role-tabbed use cases. const { useState: useStateNs, useEffect: useEffectNs } = React; /* ------------------------------------------------------------- * THE CHAT IS THE PRODUCT * ------------------------------------------------------------- */ function ChatSection() { return (
The chat is the product

Drop anything in.
Finished work comes out.

i.

Speaks chat, not API.

A voice note. A photo. A panicked “is this working?” — Octodus replies like a coworker who already knows the project.

ii.

Remembers your rules.

“Draft, wait for OK, then publish.” Once learned, never repeated. Every team keeps its own brain.

iii.

Takes action, not notes.

Ships scripts, files tasks, schedules briefings, verifies its own bug fixes — and shows you the receipts.

Now watching 3 real chat scenes from real users →
); } /* ------------------------------------------------------------- * COMPETITOR COMPARISON STRIP * ------------------------------------------------------------- */ const COMPETITORS = [ { name: 'ChatGPT', label: 'A.I.', role: 'You ask. It answers.', miss: 'But it doesn\u2019t live in your chat. Doesn\u2019t remember your team\u2019s rules. Doesn\u2019t ship work without you copy-pasting it.', color: '#5fb494', }, { name: 'Slack AI', label: 'A.I. in Slack', role: 'Summarises threads.', miss: 'But only inside Slack \u2014 if your team isn\u2019t there yet, neither is the AI. And summarising is not shipping.', color: '#4a154b', }, { name: 'Notion AI', label: 'A.I. in docs', role: 'Writes in your docs.', miss: 'But only inside Notion. And only if someone opens Notion. Your team is in Telegram.', color: '#a78bfa', }, { name: 'Zapier', label: 'No A.I.', role: 'If this, then that.', miss: 'But every “if” needs a human to wire. “Context” isn\u2019t a trigger.', color: '#fb7185', }, { name: 'A junior hire', label: 'Human', role: 'Actually does work.', miss: 'But costs 50× more, sleeps, asks the same question twice, and quits.', color: '#fbbf24', }, ]; function Compare() { return (
The receipts

You've tried the AI tools.
The work is still there.

Most AI is a parlor trick: clever answers, no shipped work. Octodus is the opposite. It is the thing that actually does the thing.

{COMPETITORS.map((c) => (

{c.name}

{c.label}
{c.role}
does some of it
))} {/* Octodus card — the answer */}

octodus

A.I. + action
Lives in your chat. Ships actual work.
Reads context. Decides. Acts. Posts receipts — inside the chat your team already lives in. Not yet another tool to wire up.
does the whole job
); } /* ------------------------------------------------------------- * ROLE TABS — "Built for…" * ------------------------------------------------------------- */ const ROLES = [ { id: 'creator', label: 'Solo creators', headline: 'Ship a product on the weekend.\nLaunch on Monday.', sub: 'You are the founder, designer, dev, marketer. Octodus is the team you can\u2019t afford yet.', icon: 'code', bullets: [ ['Voice note → 112 dev-ready prompts', 'Like Michael, who shipped 6 Gumroad plugins'], ['Photo → published blog post + Telegram caption', 'Cover image auto-generated'], ['One subscription. No team to manage.', '$50 flat. $15 credits to start.'], ['Works while you sleep.', 'Wakes up: "ran the cleanup at 3:14 AM."'], ], tint: 'var(--t-code)', }, { id: 'agency', label: 'Agencies', headline: 'Run 10+ clients.\nDouble delivery. Same headcount.', sub: 'Octodus is your junior team. Content pipelines, SEO blogs, design loops — across every client at once.', icon: 'pen', bullets: [ ['Concurrent content pipelines', 'Each client gets its own memory & rules'], ['Design iteration in chat', '16 revisions in one evening, like Maya\u2019s pageant banner'], ['Blog SEO + social posts', 'Drafted, waits for OK, then publishes — automatically'], ['Senior-quality output.', 'You charge senior rates without a senior team.'], ], tint: 'var(--t-design)', }, { id: 'eng', label: 'Engineers', headline: 'Stop watching dashboards.\nGet receipts in chat.', sub: 'Octodus reads logs, diagnoses, drafts the script, runs it, sets the TTLs, and posts the before/after.', icon: 'gear', bullets: [ ['Self-healing infra', 'Like Dan: 27 GB → 124 MB at 3:14 AM'], ['DNS diagnostics that don\u2019t give up', 'Step-by-step until it\u2019s really working'], ['Plays well with your stack', 'OAuth-only integrations. No data lock-in.'], ['End-to-end task automation', 'Application form → CV tailored → PDF → OTP → submitted'], ], tint: 'var(--t-auto)', }, { id: 'ops', label: 'Ops & programs', headline: 'Five orgs. One deadline.\nNo project manager.', sub: 'Pre-call briefings, paperwork chasing, schedule alignment — all from chat mentions and dropped docs.', icon: 'calendar', bullets: [ ['Coordinate across organizations', 'Like Ana: $240K grant across 5 partners'], ['Pre-call briefs at 17:00 sharp', 'Reads the doc, makes the brief, reminds the team'], ['Lead hand-off without dropped balls', 'Recognises urgency, files the task, writes the follow-up'], ['No new tools to adopt.', 'It lives where the conversation already lives.'], ], tint: 'var(--t-plan)', }, ]; function RoleTabs({ initialRoleId } = {}) { const defaultId = ROLES.find((r) => r.id === initialRoleId) ? initialRoleId : ROLES[0].id; const [active, setActive] = useStateNs(defaultId); const role = ROLES.find((r) => r.id === active); return (
Built for

Whatever the role,
same teammate.

{/* Tab bar */}
{ROLES.map((r) => ( ))}
{/* Panel */}
{role.bullets.map((b, i) => (
{String(i + 1).padStart(2, '0')}
{b[0]} {b[1]}
))}
); } Object.assign(window, { ChatSection, Compare, RoleTabs });