// Bespoke SVG artwork for each Webever product family. // Each illustration is a self-contained scene — abstract, brand-colored, // suggestive of the product's actual mechanic (chat thread, pipeline, doc, // flow graph, people, ledger). // Palette stays consistent: primary = it.color; supports = brand red/yellow/green/blue. const SolutionArt = { // 01 — AI Chatbots & Conversational AI // Visual: chat bubbles + waveform, message threads from many sources converging into an agent Chatbots: ({ color }) => ( {/* Incoming bubbles (left, neutral) */} {/* Bubble content lines */} {/* Agent reply (right, brand) */} {/* Waveform across bottom — conversational AI signature */} {/* Live dot */} live ), // 02 — Startup Management Systems (CRM + Ops) // Visual: pipeline kanban columns with deals + a sparkline header StartupOps: ({ color }) => ( {/* Sparkline header */} +34% {/* Kanban columns */} {[ { x: 18, label: 'Lead', count: 14 }, { x: 90, label: 'Qualify', count: 8 }, { x: 162, label: 'Propose', count: 5 }, { x: 234, label: 'Won', count: 3 }, ].map((col, i) => ( {col.label.toUpperCase()} {col.count} ))} {/* Cards */} {/* Won cards highlighted */} {/* Card content lines */} ), // 03 — Smart Document Processing // Visual: stack of documents with extraction box highlighting fields Documents: ({ color }) => ( {/* Stack of 3 documents - back, mid, front */} {/* Back doc */} {/* Mid doc */} {/* Front doc */} {/* Folded corner */} {/* Header */} {/* Body lines */} {[50, 60, 70, 80, 100, 110, 120].map((y, i) => ( ))} {/* Extraction highlight: total amount */} {/* Bottom signature line */} {/* Extraction → JSON output */} {/* JSON badge */} EXTRACTED $ 12,480.00 {/* Confidence ring */} 98% ), // 04 — Business Workflow Automation // Visual: node graph with branching flow + triggers Workflow: ({ color }) => ( {/* Connecting lines */} {/* Animated dashed overlay on connections */} {/* Trigger node (left) */} TRIGGER {/* Decision diamond (center) */} if DECIDE {/* 3 branches */} {/* Top branch (auto-approve) */} {/* Middle branch (escalate) */} {/* Bottom branch (notify human) */} {/* Output / commit (right) */} ), // 05 — HRMS — AI Employee Lifecycle // Visual: pipeline of people avatars across lifecycle stages with progress HRMS: ({ color }) => ( {/* Lifecycle track */} {/* Stages */} {[ { x: 32, label: 'HIRE', state: 'done' }, { x: 96, label: 'ONBOARD', state: 'done' }, { x: 160, label: 'GROW', state: 'done' }, { x: 224, label: 'RETAIN', state: 'active' }, { x: 288, label: 'EXIT', state: 'pending' }, ].map((s, i) => { const fill = s.state === 'pending' ? 'var(--surface)' : color; const ringOpacity = s.state === 'active' ? 0.4 : 0; return ( {s.state === 'active' && } {s.state === 'done' && ( )} {s.label} ); })} {/* Top row: candidate avatars (heads) */} {[ { x: 32, c: '#E63329' }, { x: 96, c: '#F5C518' }, { x: 160, c: '#14A04A' }, { x: 224, c: '#1B7BD6' }, { x: 288, c: 'var(--muted)' }, ].map((p, i) => ( ))} {/* Stat callouts */} 12 hired +8% perf 94% retain {/* Top label */} EMPLOYEE LIFECYCLE ), // 06 — AI-Enabled ERP // Visual: ledger / 3D cube layers (finance, inventory, ops) + forecast line ERP: ({ color }) => ( {/* Ledger card stack on left */} {/* Stack shadows */} {/* Front ledger */} {/* Header */} GENERAL LEDGER {/* Rows */} {[ { y: 30, k: 'A/R', v: '+ 412.8K', c: '#14A04A' }, { y: 46, k: 'A/P', v: '− 188.2K', c: '#E63329' }, { y: 62, k: 'Inventory', v: ' 926.0K', c: 'var(--text)' }, { y: 78, k: 'COGS', v: '− 244.4K', c: '#E63329' }, { y: 94, k: 'Net', v: '+ 906.2K', c: '#14A04A', bold: true }, ].map((r, i) => ( {r.bold && } {r.k} {r.v} {!r.bold && } ))} {/* Right: forecast chart panel */} {/* Title */} AI FORECAST · 90D {/* Axis baseline */} {/* Historical bars */} {[40, 56, 48, 70, 60, 78].map((h, i) => ( ))} {/* Forecast area */} {/* Forecast line */} {/* Forecast endpoint */} {/* Anomaly marker */} anomaly {/* Bottom legend */} actual predicted ), }; window.SolutionArt = SolutionArt;