// ======== WORK / CASE STUDIES ======== function GraphicFleet() { // Featured: fleet dispatch — map + routes + live pins return ( {/* abstract district shapes */} {/* route A — active delivery path */} {/* route B */} {/* pickup pin */} {/* driver (current, accent) */} {/* dropoff pin */} {/* other fleet dots */} {[[180,130],[320,340],[620,120],[720,280],[400,340]].map(([x,y],i) => ( ))} {/* top-left floating card — ETA */} ETA · ORDER 12 min {/* bottom-right stat cluster — illustrative only */} ROUTES · FLEET · ); } function GraphicNoise() { // Workplace noise monitoring — giant circular dB meter return ( {/* label top-left */} ZONE · FLOOR 3 / BAY A Live noise level {/* circular meter (arc) */} {/* ticks */} {Array.from({length: 48}).map((_, i) => { const angle = (i / 48) * Math.PI * 1.4 - Math.PI * 1.2; const r1 = 130, r2 = i % 4 === 0 ? 152 : 144; const x1 = Math.cos(angle) * r1, y1 = Math.sin(angle) * r1; const x2 = Math.cos(angle) * r2, y2 = Math.sin(angle) * r2; const hot = i > 30; return ; })} {/* dial value */} CURRENT 78 dB (A) {/* needle */} {/* threshold bars on right */} THRESHOLDS {[ { label: 'SAFE', val: '< 70', color: '#F3F1EC', op: 0.5, active: false }, { label: 'CAUTION', val: '70 – 85', color: '#F3F1EC', op: 1, active: true }, { label: 'LOUD', val: '85 – 100', color: 'oklch(0.72 0.18 145)', op: 0.6, active: false }, { label: 'CRITICAL', val: '> 100', color: 'oklch(0.72 0.18 145)', op: 0.3, active: false }, ].map((t, i) => ( {t.label} {t.val} {t.active && } ))} ); } function GraphicChat() { // Website AI chat — full browser window with chat widget popping out bottom-right return ( {/* browser window */} {/* browser chrome */} company.com {/* website content — faded so the widget reads as foreground */} {/* nav */} {/* hero */} A better way to do business. {/* cards on right */} {/* chat widget — bottom right, popping out */} {/* widget header */} Ask our team ONLINE · AR / EN {/* message — user */} {/* message — AI */} {/* input */} Type a message... {/* floating widget launcher at bottom-right edge */} ); } function GraphicRentals() { // Rentals marketplace — search bar + photo-forward listing cards return ( {/* search bar */} Dubai Marina DATES Jun 12 – Jun 20 TYPE 2BR Apartment {/* listing cards */} {[ { grad: 'photoA', price: '6,800', tag: 'MARINA', favorite: true, x: 60 }, { grad: 'photoC', price: '4,200', tag: 'DOWNTOWN', favorite: false, x: 290 }, { grad: 'photoB', price: '9,400', tag: 'JBR', favorite: false, x: 520 }, ].map((c, i) => ( {/* inside-photo overlays */} {/* image markers — fake window lights */} {Array.from({length: 12}).map((_, j) => ( ))} {/* heart */} {/* dots */} {[0,1,2,3].map(j => )} ))} {/* card meta rows */} {[ { x: 60, price: '6,800', tag: '2BR · MARINA', rating: '4.9' }, { x: 290, price: '4,200', tag: '1BR · DOWNTOWN', rating: '4.8' }, { x: 520, price: '9,400', tag: '3BR · JBR', rating: '5.0' }, ].map((c, i) => ( {c.tag} {c.price} AED/MO {c.rating} ))} ); } function GraphicClinic() { // Clinic appointments — day-view timeline with stacked blocks return ( {/* header */} TODAY · THU 12 JUN Dr. Leila's day {/* clinician tabs */} {['LEILA', 'OMAR', 'YARA'].map((n, i) => ( {n} ))} {/* timeline hour labels */} {['08', '09', '10', '11', '12', '13', '14', '15', '16', '17'].map((h, i) => ( {h} ))} {/* now-line */} NOW {/* appointment blocks */} {[ { row: 0, start: 0, dur: 1.5, name: 'S. Haddad', type: 'Consult', past: true }, { row: 1, start: 1.5, dur: 1, name: 'M. Qasim', type: 'Follow-up', past: true }, { row: 0, start: 2.5, dur: 1, name: 'A. Reza', type: 'Consult', current: true }, { row: 0, start: 3.8, dur: 1.5, name: 'N. Farouk', type: 'Procedure', past: false }, { row: 1, start: 3.8, dur: 1, name: 'R. Antoun', type: 'Telehealth', past: false }, { row: 0, start: 6, dur: 1.8, name: 'H. Tawfik', type: 'Consult', past: false }, { row: 1, start: 6.5, dur: 1.3, name: 'D. Ayad', type: 'Follow-up', past: false }, { row: 0, start: 8, dur: 1.5, name: 'Y. Malek', type: 'Procedure', past: false }, ].map((a, i) => { const x = a.start * 72; const w = a.dur * 72 - 8; const y = 28 + a.row * 86; return ( {/* left color bar */} {!a.past && } {a.name} {a.type.toUpperCase()} {a.current && ( )} ); })} {/* footer stats — illustrative */} DAY VIEW CLINICIANS UPCOMING ); } const WORK = [ { title: 'Fleet dispatch platform', tag: 'LOGISTICS · WEB · KSA', desc: 'Real-time dispatch and ops dashboard for a fleet operating across Riyadh.', featured: true, Graphic: GraphicFleet, bg: 'bg-fleet' }, { title: 'Workplace noise monitoring', tag: 'IoT · WEB · GCC', desc: 'A sound-monitoring system letting operations teams track and manage noise levels across their sites in real time.', Graphic: GraphicNoise, bg: 'bg-noise' }, { title: 'Website AI chat assistant', tag: 'AI · WEB', desc: 'An embedded AI chat assistant that answers customer questions directly on a company website. Arabic + English.', Graphic: GraphicChat, bg: 'bg-chat' }, { title: 'Rentals marketplace', tag: 'MARKETPLACE · WEB', desc: 'Short and long-term rentals across the UAE, with built-in KYC and payments.', Graphic: GraphicRentals, bg: 'bg-rentals' }, { title: 'Clinic appointments', tag: 'HEALTHTECH · WEB', desc: 'Appointment and clinic ops software for independent practitioners.', Graphic: GraphicClinic, bg: 'bg-clinic' }, ]; function Work() { return (
[ 04 / Selected work ]

Things we've shipped.

A representative slice of work, across the region and beyond.

{WORK.map((w, i) => { const G = w.Graphic; return (
{w.title}
{w.desc}
{w.tag}
 ); })}
); } Object.assign(window, { Work });