/* ────────────────────────────────────────────────────────── "What We Do" + "MATAI Framework" — split into two sections (each its own component, exported separately). ────────────────────────────────────────────────────────── */ const { useState, useEffect, useRef } = React; /* Simple inline icons for the framework rail */ function StackIconSimple({ size = 32 }) { return ( ); } function CompassFrameworkIcon({ size = 32 }) { return ( ); } function CubeFrameworkIcon({ size = 32 }) { return ( ); } function ChartFrameworkIcon({ size = 32 }) { return ( ); } /* ────────────────────────────────────────────────────────── What We Do — three service cards with custom PNG icons, no numbers, no clickable arrows. ────────────────────────────────────────────────────────── */ function ServiceCard({ s, delay = 0 }) { const [hover, setHover] = useState(false); return (
setHover(true)} onMouseLeave={()=>setHover(false)} style={{ position:'relative', padding:'30px 36px', borderRadius:'18px', background:'var(--paper)', border:'1px solid var(--line)', display:'grid', gridTemplateColumns:'220px 1fr', alignItems:'center', gap:'32px', minHeight:'200px', transition:'transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .35s', transform: hover ? 'translateY(-3px)' : 'translateY(0)', boxShadow: hover ? '0 24px 48px -20px rgba(20,24,31,0.14)' : 'none', borderColor: hover ? 'var(--gold)' : 'var(--line)', }}>
{s.title}

{s.desc}

); } function WhatWeDoSection() { const isMobile = useIsMobile(); const [openIdx, setOpenIdx] = useState(null); const services = [ { title:'Agentic AI Strategy Development', icon:'assets/icon-strategy.png', desc:'We help you define a clear AI strategy aligned to your business goals, identify high-impact opportunities, and create a roadmap for success.' }, { title:'AI Implementation', icon:'assets/icon-implementation.png', desc:'We design and build secure, scalable AI systems that integrate seamlessly with your workflows and deliver measurable business value.' }, { title:'Training, Support & Maintenance', icon:'assets/icon-training.png', desc:'We equip your teams, monitor performance, and provide ongoing support to ensure your AI systems continue to evolve and perform.' }, ]; if (isMobile) { return (
{/* Header */} What We Do

Turning Agentic AI Potential into{' '} Business Results

From strategy and governance to architecture and execution, we help organizations move beyond experimentation and scale AI with confidence.

{/* Accordion */}
{services.map((s, i) => { const open = openIdx === i; return (
0 ? '1px solid var(--line)' : 'none' }}>

{s.desc}

); })}
); } return (
What We Do

Turning Agentic AI Potential into{' '} Business Results

From strategy and governance to architecture and execution, we help organizations move beyond experimentation and scale AI with confidence.

{services.map((s, i) => )}
); } /* ────────────────────────────────────────────────────────── MATAI Framework — its own section, horizontal phase rail ────────────────────────────────────────────────────────── */ function FrameworkSection() { const phases = [ { n:'01', t:'Discover', d:'We assess your AI maturity, data readiness, and opportunities to identify where AI can create the most value.', Icon: CompassFrameworkIcon }, { n:'02', t:'Design', d:'We architect your roadmap and solution blueprints aligned to your goals—grounded in the MATAI Framework.', Icon: StackIconSimple }, { n:'03', t:'Deploy', d:'We build and integrate custom solutions that move from prototype to production with speed and precision.', Icon: CubeFrameworkIcon }, { n:'04', t:'Scale', d:'We optimize, measure, and evolve your systems to continuously improve performance and drive long-term impact.', Icon: ChartFrameworkIcon }, ]; return (
Our Approach

The MATAI
Framework.

A proven, end-to-end approach that turns strategy into scalable, real-world impact.

▶ Explore the framework
{phases.map((p, i) => (
{p.n}
{p.t}

{p.d}

{i < phases.length - 1 && (
›
)} ))}
Built for the Agentic AI era. Focused on outcomes that matter.
); } /* ────────────────────────────────────────────────────────── About Matai — left copy, right brand orbit visual. ────────────────────────────────────────────────────────── */ function AboutOrbit({ size }) { const gold = '#B89968', goldDeep = '#8A6F45'; const cx = 200, cy = 200; const N = 9; // Stable particle definitions (don't recompute on re-render or the loop restarts). const parts = React.useMemo(() => Array.from({ length: N }, (_, i) => ({ ang: (i / N) * Math.PI * 2, r: 64 + ((i * 41) % 92), // varied orbit radii 64..152 speed: 0.10 + ((i % 4) * 0.028), // varied orbital speed side: i % 2 === 0 ? 1 : -1, // which side of centre it aligns to rad: i % 3 === 0 ? 3.6 : 2.4, // dot radius deep: i % 2 === 0, })), []); const dotsRef = useRef([]); const lineRef = useRef(null); const hoverRef = useRef(false); const progRef = useRef(0); const [hovered, setHovered] = useState(false); useEffect(() => { const start = performance.now(); let raf; const loop = (now) => { const t = (now - start) / 1000; const target = hoverRef.current ? 1 : 0; progRef.current += (target - progRef.current) * 0.07; // ease toward target const e = progRef.current * progRef.current * (3 - 2 * progRef.current); // smoothstep const phi = t * 0.28; // line angle — keeps rotating parts.forEach((pt, i) => { const orbitAng = pt.ang + t * pt.speed; // each star's own orbit angle const targetAng = phi + (pt.side < 0 ? Math.PI : 0); // its slot on the rotating diameter let d = targetAng - orbitAng; d = Math.atan2(Math.sin(d), Math.cos(d)); // shortest way around the ring const ang = orbitAng + d * e; // travel ALONG the ring to the line const x = cx + Math.cos(ang) * pt.r; // radius preserved → stays on its orbit path const y = cy + Math.sin(ang) * pt.r; const el = dotsRef.current[i]; if (el) { el.setAttribute('cx', x.toFixed(1)); el.setAttribute('cy', y.toFixed(1)); } }); const ln = lineRef.current; // rotating alignment axis if (ln) { const R = 160; ln.setAttribute('x1', (cx - Math.cos(phi) * R).toFixed(1)); ln.setAttribute('y1', (cy - Math.sin(phi) * R).toFixed(1)); ln.setAttribute('x2', (cx + Math.cos(phi) * R).toFixed(1)); ln.setAttribute('y2', (cy + Math.sin(phi) * R).toFixed(1)); } raf = requestAnimationFrame(loop); }; raf = requestAnimationFrame(loop); return () => cancelAnimationFrame(raf); }, [parts]); const onEnter = () => { hoverRef.current = true; setHovered(true); }; const onLeave = () => { hoverRef.current = false; setHovered(false); }; return ( {/* Orbit guide rings — always visible (the stars keep orbiting on them) */} {/* Rotating alignment axis — fades in on hover */} {parts.map((pt, i) => ( dotsRef.current[i] = el} cx={cx} cy={cy} r={pt.rad} fill={pt.deep ? goldDeep : gold} /> ))} ); } function AboutSection() { const isMobile = useIsMobile(); const paras = [ "Most organizations do not struggle with a lack of AI ideas. They struggle with turning those ideas into trusted, scalable business outcomes.", "Matai Consulting was founded to help organizations navigate the opportunities and challenges of the Agentic AI era. Combining enterprise transformation experience with proprietary methodologies, we help leaders assess readiness, develop effective strategies, and implement AI systems that are governed, trusted, and built for long-term adoption.", "We believe successful AI transformation requires more than technology. It requires alignment across strategy, governance, data, workflows, and organizational change.", ]; return (
{/* Left — copy */} About Matai

From AI ambition to AI adoption.

{paras.map((p, i) => (

{p}

))}

That’s where Matai comes in.

{/* Right — brand orbit visual */}
); } Object.assign(window, { WhatWeDoSection, FrameworkSection, AboutSection });