// Bespoke SVG artwork for Webever's Digital Services line // (complementary to the AI product families in solution-art.jsx) const ServiceArt = { // 01 — Web Development // Visual: browser window with code editor + live preview, brand-red accent WebDev: ({ color }) => ( {/* Browser frame */} {/* Title bar */} {/* Traffic lights */} {/* URL pill */} webevertech.com {/* Split: left = code, right = preview */} {/* Code column */} {/* Line numbers + code */} {[ { y: 56, n: '1', a: 30, b: 22 }, { y: 67, n: '2', a: 50, b: 14 }, { y: 78, n: '3', a: 24, b: 36 }, { y: 89, n: '4', a: 60, b: 0 }, { y: 100, n: '5', a: 18, b: 28 }, { y: 111, n: '6', a: 44, b: 22 }, { y: 122, n: '7', a: 36, b: 18 }, { y: 133, n: '8', a: 0, b: 0 }, ].map((l, i) => ( {l.n} {l.b > 0 && } ))} {/* Bracket / closing */} {''} {/* Preview column */} {/* Hero bar */} {/* CTA button */} {/* 3 image cards */} {/* Lighthouse-style score */} 98 ), // 02 — Digital Marketing // Visual: funnel with audience → conversions, growth chart + channel chips Marketing: ({ color }) => ( {/* Channel chips floating in (audience top) */} {[ { x: 30, y: 24, l: 'SEO', c: '#14A04A' }, { x: 80, y: 18, l: 'Ads', c: '#E63329' }, { x: 130, y: 26, l: 'Social', c: '#1B7BD6' }, { x: 184, y: 18, l: 'Email', c: '#F5C518' }, { x: 240, y: 24, l: 'Content', c: '#1B7BD6' }, ].map((ch, i) => ( {ch.l} ))} {/* Convergence arrows down to funnel */} {/* Funnel */} {/* Stage labels */} Reach Engage Convert 128k 14k 2.4k {/* Growth sparkline (right) */} ROAS 3.4× ), // 03 — Graphic Design // Visual: brand sheet — logo mark, palette swatches, type sample GraphicDesign: ({ color }) => ( {/* Sheet */} {/* Top stripe */} {/* Left: logo lockup */} {/* Mark — concentric arcs (logo-y) */} brand IDENTITY {/* Middle: type stack */} DISPLAY Aa Bb BODY Quick fox jumps. {/* Spec lines */} {/* Right: palette swatches */} PALETTE {[ { c: '#E63329', name: 'R/05' }, { c: '#F5C518', name: 'Y/03' }, { c: '#14A04A', name: 'G/06' }, { c: '#1B7BD6', name: 'B/04' }, ].map((s, i) => { const row = Math.floor(i / 2), col = i % 2; return ( {s.name} ); })} {/* Cropmarks — corners */} ), // 04 — eCommerce & CMS // Visual: product grid + storefront with CMS edit handles Ecommerce: ({ color }) => ( {/* Storefront frame */} {/* Header */} store/ search… {/* Product cards 2x3 */} {[0, 1, 2, 3, 4, 5].map((i) => { const col = i % 3, row = Math.floor(i / 3); const x = 28 + col * 70, y = 46 + row * 48; const onSale = i === 1 || i === 4; return ( {/* Product silhouette */} {/* Title + price */} ${(i+1)*9} {/* Sale badge */} {onSale && ( SALE )} ); })} {/* CMS edit panel (right side) */} CMS {/* Field rows */} {[0, 1, 2, 3, 4, 5, 6].map((i) => ( ))} {/* Cart pill */} CART · 3 ), // 05 — All IT Service Bundle // Visual: stack of service tiles with the bundle wrapper highlighting them ITBundle: ({ color }) => ( {/* Bundle wrapper */} BUNDLE · 9 {/* 9 service tiles in a 3x3 grid */} {[ { l: 'Web', c: '#E63329', i: 'web' }, { l: 'Mobile', c: '#F5C518', i: 'mob' }, { l: 'Cloud', c: '#1B7BD6', i: 'cloud' }, { l: 'AI', c: '#E63329', i: 'ai' }, { l: 'Data', c: '#14A04A', i: 'data' }, { l: 'DevOps', c: '#1B7BD6', i: 'dev' }, { l: 'Sec', c: '#14A04A', i: 'sec' }, { l: 'Support', c: '#F5C518', i: 'sup' }, { l: 'Growth', c: '#E63329', i: 'gro' }, ].map((t, idx) => { const col = idx % 3, row = Math.floor(idx / 3); const x = 36 + col * 84, y = 36 + row * 36; return ( {/* Mini glyph */} {t.i === 'web' && <>} {t.i === 'mob' && <>} {t.i === 'cloud' && } {t.i === 'ai' && <>} {t.i === 'data' && <>} {t.i === 'dev' && <>} {t.i === 'sec' && } {t.i === 'sup' && <>} {t.i === 'gro' && <>} {t.l} 24/7 ); })} ), // 06 — Mobile App Development // Visual: phone mockup + tablet + responsive layouts MobileApp: ({ color }) => ( {/* Tablet (back) */} {/* Tablet content */} {/* Phone (front, overlapping right) */} {/* Notch */} {/* Screen */} {/* Status */} 9:41 {/* Header card */} {/* List items */} {[68, 80, 92, 104].map((y, i) => ( ))} {/* Bottom nav */} {[0, 1, 2, 3].map((i) => ( ))} {/* Home indicator */} {/* Floating tags */} iOS · AND RESPONSIVE ), }; window.ServiceArt = ServiceArt;