// Shared site chrome — Navbar + Footer. // Every page mounts and . function OctodusLogo({ size = 32, glow = false }) { return ( {Icons.mark({ width: size, height: size })} ); } const SITE_NAV = [ { id: 'home', label: 'Home', href: '/' }, { id: 'capabilities', label: 'Capabilities', href: 'Capabilities.html' }, { id: 'integrations', label: 'Integrations', href: 'Integrations.html' }, { id: 'stories', label: 'Stories', href: 'Stories.html' }, { id: 'pricing', label: 'Pricing', href: 'Pricing.html' }, { id: 'blog', label: 'Blog', href: 'Blog.html' }, ]; function SiteNav({ active = 'home' }) { const [scrolled, setScrolled] = React.useState(false); const [open, setOpen] = React.useState(false); React.useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 12); onScroll(); window.addEventListener('scroll', onScroll, { passive: true }); return () => window.removeEventListener('scroll', onScroll); }, []); return ( ); } function SiteFooter() { return (
octodus
The AI coworker that lives in your chat.
© 2026 · octodus.com
EN · DE · FR · Made in chat
); } // ── Shared final CTA used across every sub-page ── function FinalCTA({ heading, sub, ctaLabel = 'Hire octodus', secondary }) { return (
Add octodus to your chat

{heading || (<>Send your first message.
Watch what happens.)}

{sub || '$15 of credits to start. No credit card. No setup call. Credits never expire. Paste a message into Telegram and let Octodus get to work.'}

EN · DE · FR · Telegram today · Slack & Discord soon
); } // ── Shared accent-palette tweak (mounted on every page) ── // Mono-light sub-variants. All keep the cream-paper substrate; only the // pop changes. const ACCENT_PALETTES = [ ['#C9501A', '#E0571E', '#7A2C0A'], // Terracotta (default) ['#6B7A1C', '#8A9938', '#3E4711'], // Olive ['#1A3E66', '#2C5A99', '#0E2440'], // Ink Blue ['#161311', '#3D3934', '#06040E'], // Pure ink (no pop) ]; function useAccentTweaks() { const defaults = (typeof window !== 'undefined' && window.__OCTODUS_TWEAKS) || { accent: ACCENT_PALETTES[0], }; const [tweaks, setTweak] = useTweaks(defaults); React.useEffect(() => { const palette = Array.isArray(tweaks.accent) ? tweaks.accent : ACCENT_PALETTES[0]; const [primary, light, deep] = palette; const root = document.documentElement.style; root.setProperty('--accent', primary); root.setProperty('--accent-light', light); root.setProperty('--accent-deep', deep); const hex = primary.replace('#', ''); const r = parseInt(hex.slice(0, 2), 16); const g = parseInt(hex.slice(2, 4), 16); const b = parseInt(hex.slice(4, 6), 16); root.setProperty('--accent-soft', `rgba(${r}, ${g}, ${b}, 0.12)`); }, [tweaks.accent]); return [tweaks, setTweak]; } function SiteTweaks({ children }) { const [tweaks, setTweak] = useAccentTweaks(); return ( setTweak('accent', v)} options={ACCENT_PALETTES} /> {children} ); } // ── Scroll-reveal: toggles `revealed` class on [data-reveal] elements // as they intersect the viewport. Also auto-tags common card selectors // so I don't have to sprinkle attributes everywhere. ── const AUTO_REVEAL_SELECTORS = [ // Cards & grids '.skill-card', '.st-card', '.story', '.stt', '.plan', '.int-card', '.featured-cell', '.post', '.bf', '.spotlight', '.compare-card', '.role-bullet', '.cmp-group', '.faq-item', '.how-card', '.powered-pill', '.powered-feat', '.rule', // Section heads '.page-hero-body', '.skills-head', '.stories-head', '.chat-section-head', '.cmp-head', '.faq-head', '.compare-head', '.roles-head', ]; function useScrollReveal() { React.useEffect(() => { if (typeof window === 'undefined') return; const reduceMotion = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches; // Auto-tag matching elements const autoTag = () => { AUTO_REVEAL_SELECTORS.forEach((sel) => { document.querySelectorAll(sel).forEach((el) => { if (!el.hasAttribute('data-reveal')) el.setAttribute('data-reveal', ''); }); }); }; if (reduceMotion) { autoTag(); document.querySelectorAll('[data-reveal]').forEach((el) => el.classList.add('revealed')); return; } // Scroll-based reveal — works in sandboxed iframes where IntersectionObserver // doesn't fire its initial callback. const REVEAL_OFFSET = 80; // px below viewport edge before we count as "near" let ticking = false; const scan = () => { ticking = false; const vh = window.innerHeight; const pending = document.querySelectorAll('[data-reveal]:not(.revealed)'); pending.forEach((el) => { const rect = el.getBoundingClientRect(); if (rect.top < vh - REVEAL_OFFSET && rect.bottom > 0) { el.classList.add('revealed'); } }); }; const onScroll = () => { if (!ticking) { ticking = true; requestAnimationFrame(scan); } }; // Initial pass + observe later-mounted nodes autoTag(); // Multiple staggered scans to catch slow-mounting React subtrees // (Babel-in-browser pages mount progressively). requestAnimationFrame(scan); setTimeout(scan, 100); setTimeout(scan, 400); setTimeout(scan, 1000); setTimeout(scan, 2000); window.addEventListener('scroll', onScroll, { passive: true }); document.addEventListener('scroll', onScroll, { passive: true, capture: true }); window.addEventListener('resize', onScroll); // Belt-and-suspenders: keep scanning every 300ms for the first 5 seconds // after mount so progressively-rendered React subtrees never get stuck. const interval = setInterval(scan, 300); setTimeout(() => clearInterval(interval), 5000); const mo = new MutationObserver(() => { autoTag(); requestAnimationFrame(scan); }); mo.observe(document.body, { subtree: true, childList: true }); return () => { window.removeEventListener('scroll', onScroll); document.removeEventListener('scroll', onScroll, { capture: true }); window.removeEventListener('resize', onScroll); clearInterval(interval); mo.disconnect(); }; }, []); } // Drop-in wrapper that activates reveal + accent tweaks on any page function SiteEffects() { useScrollReveal(); return null; } Object.assign(window, { SiteNav, SiteFooter, FinalCTA, OctodusLogo, SiteTweaks, SiteEffects, useScrollReveal, ACCENT_PALETTES, useAccentTweaks });