const { Card, Pill, Wordmark } = window.CammusDesignSystem_2ef585; /* THE SOLUTION — choreography (per sketch): the 3 brand inputs pop in → dotted flows fade in and their dots march continuously down into the Cammus wordmark ("Intelligence") → THE lime arrow of this section draws down → the database card lands → "Ready to produce content". Connector geometry is measured from real node positions (refs) and redrawn on resize. Exactly one lime element in this viewport: the arrow. */ const LINE = 'var(--cam-border-strong)'; const FLOW = 'var(--cam-text-inactive)'; function TriRight({ style, className }) { return ; } /* Database cylinder — thin geometric line drawing, per the DS shape vocabulary */ function DbIcon() { return ( ); } /* ---- Chat demo: one information-packed input → every format ---- */ const CHAT_MSG = "New offer: brand-audit sprint. 3 clients, +212% qualified leads in 45 days. I want to announce it."; const CHAT_PLACEHOLDER = 'Describe the post: topic, context, or point of view.'; const CHAT_FORMATS = [ { k: 'post', label: 'Post', meta: 'LinkedIn' }, { k: 'onepager', label: 'One-pager', meta: 'LinkedIn' }, { k: 'carousel', label: 'Carousel', meta: 'Instagram' }, { k: 'reels', label: 'Reels script', meta: 'Instagram' }, { k: 'magnet', label: 'Lead magnet', meta: 'Capture' }, ]; /* Thin geometric format glyphs — rects, lines, triangles only */ function FormatGlyph({ kind }) { const S = 'var(--cam-text-auxiliary)'; const common = { fill: 'none', stroke: S, strokeWidth: 1.5, strokeLinecap: 'round' }; return ( ); } /* Looping choreography: type → send → think → five formats cascade → hold → reset. Runs only while on screen; prefers-reduced-motion renders the final state, static. Elements are always in flow (opacity/transform only) so the panel never reflows. */ function ChatDemo() { const reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches; const panelRef = React.useRef(null); const [active, setActive] = React.useState(false); const [phase, setPhase] = React.useState(reduce ? 4 : 0); /* 0 idle · 1 typing · 2 sent · 3 thinking · 4 delivered · 5 fading */ const [typed, setTyped] = React.useState(''); React.useEffect(() => { const el = panelRef.current; if (!el || reduce) return; const io = new IntersectionObserver((es) => setActive(es[0].isIntersecting), { threshold: 0.35 }); io.observe(el); return () => io.disconnect(); }, []); React.useEffect(() => { if (!active || reduce) return; let alive = true; const timers = []; const wait = (ms) => new Promise((r) => timers.push(setTimeout(r, ms))); const typeAll = () => new Promise((res) => { let i = 0; const t = setInterval(() => { if (!alive || i >= CHAT_MSG.length) { clearInterval(t); res(); return; } i += 1; setTyped(CHAT_MSG.slice(0, i)); }, 26); timers.push(t); }); (async () => { while (alive) { setTyped(''); setPhase(1); await typeAll(); if (!alive) break; await wait(450); setPhase(2); setTyped(''); await wait(650); setPhase(3); await wait(1500); setPhase(4); await wait(6200); setPhase(5); await wait(600); } })(); return () => { alive = false; timers.forEach(clearTimeout); }; }, [active]); const vis = (on, delay, dy) => ({ opacity: on ? 1 : 0, transform: on ? 'none' : 'translateY(' + (dy == null ? 10 : dy) + 'px)', transition: 'opacity .5s ease ' + (delay || 0) + 's, transform .55s cubic-bezier(.34, 1.3, .64, 1) ' + (delay || 0) + 's', }); const hasText = typed.length > 0; return (

{/* Panel header */}

Create post

{/* Conversation */}

What post do you want to create?

{/* The one information-packed input */}

= 2 && phase < 5, 0), }}>{CHAT_MSG}

{/* Thinking */} {/* One input → every format */}

{CHAT_FORMATS.map((f, i) => (

= 4, phase >= 4 ? i * 0.15 : 0, 12), }}> {f.label} {f.meta}

))}

{/* Composer */}

{hasText ? typed : CHAT_PLACEHOLDER}{phase === 1 && }

AI-generated. You review and approve before publishing.

); } /* Geometric person — circle head + shoulder arc */ function PersonGlyph({ size }) { const s = size || 40; return ( ); } /* THE SYSTEM — the loop that keeps working (per sketch): Lead ⇄ Cammus Intelligence tied by two marching dotted arcs ("Create more content like this." up, "Let's get more leads." back), an olive +1 pulsing off the lead, then THE lime handoff arrow into the sales panel with three leads. Arc geometry is measured from the real node positions. */ function SystemLoop() { const boxRef = React.useRef(null); const leadRef = React.useRef(null); const camRef = React.useRef(null); const [g, setG] = React.useState(null); React.useEffect(() => { const box = boxRef.current; if (!box) return; const measure = () => { const b = box.getBoundingClientRect(); const l = leadRef.current && leadRef.current.getBoundingClientRect(); const c = camRef.current && camRef.current.getBoundingClientRect(); if (!b.width || !l || !c) return; const lx = l.left + l.width / 2 - b.left, lyT = l.top - b.top, lyB = l.bottom - b.top; const cx = c.left + c.width / 2 - b.left, cyT = c.top - b.top, cyB = c.bottom - b.top; const apex = Math.min(lyT, cyT) - 64; const base = Math.max(lyB, cyB) + 58; setG({ w: b.width, h: b.height, top: `M ${lx} ${lyT - 12} C ${lx} ${apex} ${cx} ${apex} ${cx} ${cyT - 12}`, topTri: `${cx - 4},${cyT - 19} ${cx + 4},${cyT - 19} ${cx},${cyT - 11}`, bot: `M ${cx} ${cyB + 12} C ${cx} ${base} ${lx} ${base} ${lx} ${lyB + 13}`, botTri: `${lx - 4},${lyB + 20} ${lx + 4},${lyB + 20} ${lx},${lyB + 12}`, qTop: { x: (lx + cx) / 2, y: apex - 10 }, qBot: { x: (lx + cx) / 2, y: base + 10 }, mid: { x: (lx + cx) / 2, y: (Math.min(lyT, cyT) + Math.max(lyB, cyB)) / 2 }, }); }; measure(); const ro = new ResizeObserver(measure); ro.observe(box); if (document.fonts && document.fonts.ready) document.fonts.ready.then(measure); return () => ro.disconnect(); }, []); const quoteStyle = { fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 'var(--fs-small)', color: 'var(--cam-text-secondary)', whiteSpace: 'nowrap', letterSpacing: 0, }; /* Typewriter — loops while in view: type → hold → erase → retype. Layout is reserved by an invisible copy of the full phrase so the diagram never shifts. */ function TypeQuote({ text, delay, style }) { const reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches; const ref = React.useRef(null); const [n, setN] = React.useState(reduce ? text.length : 0); React.useEffect(() => { if (reduce) return undefined; const el = ref.current; if (!el) return undefined; let timer = null; let running = false; const type = (c) => { setN(c); if (c < text.length) timer = setTimeout(() => type(c + 1), 38 + Math.random() * 42); else timer = setTimeout(() => erase(c), 2200); /* hold full phrase */ }; const erase = (c) => { setN(c); if (c > 0) timer = setTimeout(() => erase(c - 1), 18); else timer = setTimeout(() => type(1), 900); /* pause before retype */ }; const io = new IntersectionObserver((entries) => { const vis = entries.some((e) => e.isIntersecting); if (vis && !running) { running = true; timer = setTimeout(() => type(1), (delay || 0) * 1000); } if (!vis && running) { running = false; clearTimeout(timer); } }, { threshold: 0.5 }); io.observe(el); return () => { io.disconnect(); clearTimeout(timer); }; }, []); const done = n >= text.length; return ( "{text.slice(0, n)}{done ? '"' : } ); } const eyebrow = { color: 'var(--cam-text-inactive)', fontSize: 'var(--fs-eyebrow)', fontWeight: 'var(--fw-semibold)', textTransform: 'uppercase', letterSpacing: 'var(--track-eyebrow)', whiteSpace: 'nowrap', }; return (

{/* The feedback loop */}

{g && ( )} {g && ( "Let's get more leads." )} {g && ( Feedbackloop )}

Lead

Intelligence

{/* THE lime signal — handoff to sales */}

Handoff to sales

{/* Sales panel */}

"The leads that have come in are..."

{[1, 2, 3].map((n, i) => (

Lead {n} info #1 info #2

))}

); } function SolutionSection() { const boxRef = React.useRef(null); const pillRefs = React.useRef([]); const markRef = React.useRef(null); const [geom, setGeom] = React.useState({ w: 0, h: 0, flows: [] }); const eyebrowStyle = { color: 'var(--cam-text-inactive)', fontSize: 'var(--fs-eyebrow)', fontWeight: 'var(--fw-semibold)', textTransform: 'uppercase', letterSpacing: 'var(--track-eyebrow)', marginBottom: 'var(--space-4)', }; const inputs = ['Commercial DNA', 'Brand guidelines', 'Brand DNA']; const quoteStyle = { margin: 0, fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 'var(--fs-lead)', color: 'var(--cam-text-secondary)', lineHeight: 1.4, letterSpacing: 0, }; React.useEffect(() => { const box = boxRef.current; if (!box) return; const measure = () => { const b = box.getBoundingClientRect(); const mark = markRef.current; const pr = pillRefs.current.map((el) => (el ? el.getBoundingClientRect() : null)); if (!b.width || !mark || pr.some((r) => !r)) return; const m = mark.getBoundingClientRect(); const cx = m.left + m.width / 2 - b.left; const ty = m.top - b.top - 14; /* flows end just above the wordmark */ const tips = [cx - 30, cx, cx + 30]; /* three converging entry points */ const R = 14; /* corner radius of the bends */ const flows = []; /* left pill — leaves its right edge, runs, bends down */ { const sx = pr[0].right - b.left + 8, sy = pr[0].top + pr[0].height / 2 - b.top; flows.push({ d: `M ${sx} ${sy} H ${tips[0] - R} Q ${tips[0]} ${sy} ${tips[0]} ${sy + R} V ${ty}`, x: tips[0] }); } /* center pill — straight vertical drop */ { const sy = pr[1].bottom - b.top + 8; flows.push({ d: `M ${tips[1]} ${sy} V ${ty}`, x: tips[1] }); } /* right pill — leaves its left edge, runs, bends down */ { const sx = pr[2].left - b.left - 8, sy = pr[2].top + pr[2].height / 2 - b.top; flows.push({ d: `M ${sx} ${sy} H ${tips[2] + R} Q ${tips[2]} ${sy} ${tips[2]} ${sy + R} V ${ty}`, x: tips[2] }); } setGeom({ w: b.width, h: b.height, flows, ty }); }; measure(); const ro = new ResizeObserver(measure); ro.observe(box); if (document.fonts && document.fonts.ready) document.fonts.ready.then(measure); return () => ro.disconnect(); }, []); return (

The Solution

Access app.cammusai.com

We onboard your company in 5 minutes, and you're ready to post.

{/* Funnel: inputs ⇢ Cammus Intelligence → database */}

{/* Dotted data flows (desktop) — measured, marching toward the wordmark */} {/* The three brand inputs */}

{inputs.map((label, i) => ( { pillRefs.current[i] = el; }} className={'lp-pop' + (i !== 1 ? ' lp-fun-side' : '')} style={{ '--d': (0.05 + i * 0.12) + 's', display: 'inline-flex' }}> {label} ))}

{/* Mobile connector — simple dotted drop */} {/* Cammus Intelligence */}

Intelligence

{/* THE lime signal — the arrow */} {/* The database */}

{/* Inside the platform — one input, every format */}

Inside the platform

One input. Every format.

{/* THE RESULTS — real assets, attached as delivered */} {/* THE SYSTEM — post, track, and the loop keeps producing */}

The System

Now, simply post and track performance.

And the system keeps working...

); } window.SolutionSection = SolutionSection;