// ff-hero.jsx — Hero section with rotating audience text + two variants const { useState: __h_useState, useEffect: __h_useEffect } = React; // Fade-in-up rotator — whole phrase swaps with a stable width function Rotator({ items, interval = 2800 }) { const [i, setI] = __h_useState(0); const [key, setKey] = __h_useState(0); __h_useEffect(() => { setI(0); setKey((k) => k + 1); }, [items]); __h_useEffect(() => { const id = setInterval(() => { setI((v) => (v + 1) % items.length); setKey((k) => k + 1); }, interval); return () => clearInterval(id); }, [items, interval]); return ( {items[i]} ); } function HeroMetric({ value, label, sub }) { return (
{value}
{label}
{sub &&
{sub}
}
); } function Hero({ variant = "flow", accent, s }) { return (
{variant === "split" && }
{variant === "flow" ? : }
); } function HeroFlow({ s }) { return (
{s.hero.titlePre}
{s.hero.sub} {s.hero.ctaPrimary} → {s.hero.ctaSecondary} } label={s.hero.metric1.label} sub={s.hero.metric1.sub} /> } label={s.hero.metric2.label} sub={s.hero.metric2.sub} /> } label={s.hero.metric3.label} sub={s.hero.metric3.sub} /> ~} label={s.hero.metric4.label} sub={s.hero.metric4.sub} />
); } // ─────────── Live demo — running automation flow ─────────── // Two-pane design: left = static topology with CSS-animated rail flow; // right = live event console where rows stream upward. No travelling SVG // nodes — eliminates the chip-leak class of bug entirely. const LIVE_TOPO_SOURCES = [ { y: 56, icon: "letter", label: "Email", sub: "imap", tag: "EML" }, { y: 130, icon: "code", label: "Webhook", sub: "POST", tag: "WEB" }, { y: 204, icon: "telegram", label: "Telegram", sub: "bot", tag: "TG" }, ]; const LIVE_TOPO_SINKS = [ { y: 56, icon: "shop", label: "CRM", sub: "leads", tag: "CRM" }, { y: 130, icon: "server", label: "ERP", sub: "orders", tag: "ERP" }, { y: 204, icon: "slack", label: "Slack", sub: "ops", tag: "SLK" }, ]; // Payload examples per source kind. Realistic-feeling shorthand that reads as // "things are happening" rather than placeholder text. const LIVE_PAYLOADS = { EML: [ { sink: "CRM", text: "lead@acme.co · RFQ #4821" }, { sink: "CRM", text: "info@vela.eu · pricing" }, { sink: "ERP", text: "po@northbound.co · invoice" }, { sink: "CRM", text: "hello@stride.io · demo" }, { sink: "SLK", text: "support@kr.co · urgent" }, ], WEB: [ { sink: "ERP", text: "POST /order/4821 · 200" }, { sink: "CRM", text: "POST /signup · 201" }, { sink: "ERP", text: "POST /invoice/19 · 200" }, { sink: "SLK", text: "POST /alert/disk · 200" }, { sink: "CRM", text: "POST /lead · 201" }, ], TG: [ { sink: "SLK", text: "@kfomenko · invoice?" }, { sink: "CRM", text: "@dani · status update" }, { sink: "SLK", text: "@team · daily report" }, { sink: "ERP", text: "@ops · ship status" }, { sink: "SLK", text: "@anna · onboarding" }, ], }; const LIVE_SOURCE_KEYS = ["EML", "WEB", "TG"]; // Solar Bold Duotone + Simple Icons (Slack/Telegram). // Returns bare elements (no wrapping ) so they can be embedded // inside a parent SVG via . 24×24 source viewBox. function LiveNodeIcon({ kind }) { switch (kind) { case "letter": return ( ); case "code": return ( ); case "telegram": return ( ); case "junction": return ( ); case "shop": return ( ); case "server": return ( ); case "slack": return ( ); default: return null; } } // Icon glyph as an inline SVG ; expects to be placed inside a parent SVG. // Scales 24×24 source to size px, translated so its top-left lands at (x,y). function LiveIconG({ kind, x, y, size = 24, className = "hero-live-icon-g" }) { const k = size / 24; return ( ); } // Compact topology node: 32px round-rect tile + side label/sub. Placed by // vertical centerline (y) at a fixed x for either side of the lane band. function LiveTopoNode({ x, y, icon, label, sub, side }) { const tile = 32; const tx = x - tile / 2; const ty = y - tile / 2; const labelX = side === "left" ? x + tile / 2 + 10 : x - tile / 2 - 10; const anchor = side === "left" ? "start" : "end"; return ( {label} {sub} ); } function LiveDemo() { // Event feed: one entry every ~700ms. We keep the last 6 for the console, // plus a rolling counter for the header. Per-lane intensity is derived from // how recently each source fired — implies a real working system. const [events, setEvents] = __h_useState([]); const [count, setCount] = __h_useState(0); __h_useEffect(() => { let seq = 0; // Lightly weighted picker so lanes "feel" alive at different rates. const weights = [ { k: "WEB", w: 5 }, { k: "EML", w: 3 }, { k: "TG", w: 2 }, ]; const wsum = weights.reduce((a, b) => a + b.w, 0); const pick = () => { let r = Math.random() * wsum; for (const x of weights) { if ((r -= x.w) < 0) return x.k; } return "WEB"; }; const tick = () => { const src = pick(); const pool = LIVE_PAYLOADS[src]; const item = pool[seq % pool.length]; seq += 1; const id = Date.now() + "-" + seq; const t = new Date(); const hh = String(t.getHours()).padStart(2, "0"); const mm = String(t.getMinutes()).padStart(2, "0"); const ss = String(t.getSeconds()).padStart(2, "0"); const ms = String(t.getMilliseconds()).padStart(3, "0").slice(0, 2); setEvents((es) => [...es.slice(-5), { id, src, sink: item.sink, text: item.text, ts: `${hh}:${mm}:${ss}.${ms}`, }]); setCount((c) => c + 1); }; tick(); const id = setInterval(tick, 720); return () => clearInterval(id); }, []); const counter = String(count).padStart(4, "0"); // 800×280 canvas. Topology lives on the left half (0–360); console on the // right (380–796). Lane band spans y=56..204; junction at x=320. const LANE_X_IN = 84; // where rails start (right edge of source tile) const LANE_X_OUT = 320; // junction center x const SINK_X = 348; // sink fan-out start (left edge of sink tile) const HUB = { cx: 320, cy: 130, r: 16 }; // Build lane paths source → junction → sink. Straight middle lane, gentle // S-curves for top/bottom. Three lanes total (one per source). const lanes = LIVE_TOPO_SOURCES.map((s, i) => { const yS = s.y; const yH = HUB.cy; return { key: s.tag, inPath: `M ${LANE_X_IN} ${yS} C ${LANE_X_IN + 80} ${yS}, ${LANE_X_OUT - 60} ${yH}, ${HUB.cx - HUB.r} ${yH}`, // Each source fans to a single matching sink (visually 1:1); reroutes // happen in the console feed. outPath: `M ${HUB.cx + HUB.r} ${yH} C ${LANE_X_OUT + 60} ${yH}, ${SINK_X - 80} ${LIVE_TOPO_SINKS[i].y}, ${SINK_X} ${LIVE_TOPO_SINKS[i].y}`, yS, yD: LIVE_TOPO_SINKS[i].y, tag: s.tag, }; }); return (
intake.flow live · 3 sources → junction → 3 sinks events{counter} err0000
{/* Left: topology with CSS-animated rail flow. SVG content never leaves the viewBox — animations are stroke-dashoffset only. */} {/* Right: live event console. Rows are React-rendered into a column; CSS animates the newest row in (slide-up + fade) so the panel is always in motion between event ticks. */}
); } function HeroSplit({ s }) { return (
); } function HeroDiagram({ s }) { return (
{s.hero.diagramHead}
{[ { x: 30, y: 40, w: 96, h: 32, label: "Email" }, { x: 30, y: 124, w: 96, h: 32, label: "Webhook" }, { x: 30, y: 208, w: 96, h: 32, label: "Telegram" }, { x: 160, y: 124, w: 92, h: 36, label: "AI Router", on: true }, { x: 286, y: 40, w: 64, h: 32, label: "CRM" }, { x: 286, y: 124, w: 64, h: 32, label: "ERP" }, { x: 286, y: 208, w: 64, h: 32, label: "Slack" }, ].map((n, i) => ( {n.label} {n.on && } ))} {[ ["M126,56 C 145,56 145,142 158,142"], ["M126,140 L158,140"], ["M126,224 C 145,224 145,144 158,144"], ["M252,142 C 270,142 270,56 284,56"], ["M252,142 L284,140"], ["M252,144 C 270,144 270,224 284,224"], ].map((d, i) => ( ))}
n8n openai postgres +8
); } window.Hero = Hero;