// Additional rich visuals per section (non-compass, relevant to AR control) // 1) Value card hero icons (large, animated) — each tied to its value const ValueIcon = { // 01 · 24/7 control — shield with rotating ring + tick Shield247: () => ( ), // 02 · Morning digest — envelope with sun Digest: () => ( ), // 03 · Team 2-3x efficiency — bar chart with ascending bars TeamChart: () => ( ), // 04 · Not hostage to employee — dossier card with badge Dossier: () => ( ), // 05 · Calendar 2-8 weeks Calendar28: () => ( ), }; // 2) Pain card symptom visuals — editorial scenes filling the card top band const PainIcon = { // 1 · Control tied to you: CEO figure yanked by a red tether toward a pile of files // while 3 empty desks with "?" sit idle. TiedControl: () => ( ), // 2 · Postfactum — calm DSO line, then a cliff drop with alert ping + too-late calendar badge Postfactum: () => ( ), // 3 · History gone — open door, papers flying OUT of folder into WhatsApp/Outlook/speech bubbles, empty folder left HistoryGone: () => ( ), // 4 · Team chaos — 3 employees, 2 clients: one client tangled by 3 threads, another with broken thread + "silence" TeamChaos: () => ( ), }; // 3) Feature section-level big number mark const FeatureMark = ({ n }) => (
{n}
); // 4) Security perimeter diagram — architectural: 3 concentric zones, live packet flow with labels, firewall, cert badge const PerimeterDiagram = () => { // Zones: outer = internet (untrusted), middle = your perimeter, inner = Compass + 1C const W = 900, H = 460; const cx = W/2, cy = H/2; // External integration clusters (grouped, on the left side — "internet") const external = [ {g:"ЕДО", color:"rgb(var(--primary))", y: 60, items:[ {l:"Диадок", logo:"D"}, {l:"СБИС", logo:"С"}, {l:"1С-ЭДО", logo:"1"}, ]}, {g:"Банки", color:"rgb(16 185 129)", y: 180, items:[ {l:"СберБизнес", logo:"С"}, {l:"Т-Банк", logo:"Т"}, {l:"ВТБ", logo:"В"}, ]}, {g:"Реестры", color:"rgb(99 102 241)", y: 300, items:[ {l:"ЕФРСБ", logo:"Е"}, {l:"kad.arbitr", logo:"K"}, {l:"ФССП", logo:"Ф"}, ]}, ]; // Live packets: each packet is a named request with a direction and a TTL path const packets = [ {group:0, label:"накладные", dir:"in", dur:4.0, delay:0.0, tls:true}, {group:1, label:"выписка", dir:"in", dur:4.4, delay:0.6, tls:true}, {group:2, label:"проверка", dir:"out", dur:4.8, delay:1.2, tls:true}, {group:0, label:"претензия", dir:"out", dur:5.2, delay:1.8, tls:true}, {group:1, label:"1С · read", dir:"loop",dur:3.4, delay:0.3, tls:false}, {group:2, label:"ЕФРСБ ✓", dir:"in", dur:4.2, delay:2.4, tls:true}, ]; return (
); }; // 5) Week progress bar visual for rollout const WeekProgress = ({ weeks, highlight=[], color="primary" }) => { const cls = color==="emerald" ? "bg-emerald-500" : "bg-primary"; return (
{Array.from({length: weeks}).map((_,i)=>{ const hot = highlight.includes(i+1); return (
{hot &&
}
Н{i+1}
); })}
); }; // 6) ROI ribbon — decorative numeric ribbon shown inside result card const RoiRibbon = () => ( ); Object.assign(window, { ValueIcon, PainIcon, FeatureMark, PerimeterDiagram, WeekProgress, RoiRibbon });