); const SolutionIcon = ({ kind, tone }) => { const c = tone === "onOrange" ? "white" : "#18181B"; if (kind === "Cloud") return ( ); if (kind === "Server") return ( ); if (kind === "Datacenter") return ( ); if (kind === "Network") return ( ); if (kind === "IoT & Automation") return ( ); if (kind === "Security") return ( ); return null; }; Object.assign(window, { Solutions }); // ============================================================ // XSOL CLOUD — official brand mark // Cloud outline that envelopes a stacked "XSOL / — / CLOUD" wordmark. // Reused in the ecosystem hub (white on orange) and the WeDeliver // laptop screen (orange on white). // ============================================================ const XsolCloudMark = ({ size = 160 }) => (

); // ============================================================ // XSOL Cloud Ecosystem — hub & spokes + benefits panel // (Replaces the old "Three pillars" section) // ============================================================ const Pillars = () => { // 6 partners arranged on a circle. Angles in degrees, 0° = top, clockwise. const partners = [ { kind: "microsoft", label: "Microsoft", role: "Solutions Partner", angle: 330 }, { kind: "aws", label: "AWS", role: "Business Partner", angle: 30 }, { kind: "googleCloud",label: "Google Cloud", role: "Partner", angle: 90 }, { kind: "fortinet", label: "Fortinet", role: "Authorized Partner", angle: 150 }, { kind: "hpeAruba", label: "HPE Aruba", role: "Networking", angle: 210 }, { kind: "kaspersky", label: "kaspersky", role: "Registered Partner", angle: 270 }, ]; // 6 concept badges — small circular chips in an inner ring, // each sitting between the hub and a partner pill. const concepts = [ { kind: "solutions", label: "SOLUTIONS", angle: 330 }, { kind: "infrastructure", label: "INFRASTRUCTURE", angle: 30 }, { kind: "cloud", label: "CLOUD", angle: 90 }, { kind: "protection", label: "PROTECTION", angle: 150 }, { kind: "networking", label: "NETWORKING", angle: 210 }, { kind: "security", label: "SECURITY", angle: 270 }, ]; const features = [ { name: "Disaster Protection", desc: "Geographic redundancy and hardware-failure isolation with recovery SLAs in writing.", tone: "var(--bel-orange)" }, { name: "Hardened Security", desc: "Nine layers of integrated controls and granular telemetry across every workload.", tone: "var(--bel-blue)" }, { name: "Dedicated Provisioning", desc: "Reserved capacity per client — no noisy-neighbour multi-tenancy on critical paths.", tone: "var(--bel-orange)" }, { name: "Zero Ops Overhead", desc: "Fully managed — your team ships product while we run the floor 24×7.", tone: "var(--bel-blue)" }, { name: "Cost-controlled", desc: "Pay-as-you-go blended with reserved capacity and a monthly FinOps review.", tone: "var(--bel-orange)" }, ]; return (

{/* Header */}

One operating layer. Every vendor worth deploying.} />

We don't sell you a hyperscaler. We pick the right blend for the workload — and hold the certifications that prove we've earned the right to.

{/* Body — diagram + benefits */}

{/* LEFT — hub & spokes */}

{/* RIGHT — benefits panel */}

Cloud, security, network —{" "} one accountable team.

We empower regulated businesses with hybrid cloud architecture, seamless on-prem integration, and the operational rigour of a single throat to choke.

Talk to an architect Download platform paper

WHAT YOU GET

{f.name} {f.desc}

); }; // ---------- ISO / accreditation chip strip ---------- const CertChipRow = () => (

Independently audited · FY25

); const CertChip = ({ line1, line2 }) => (

{line1} {line2}

); // ---------- Hub & spokes diagram ---------- const HubDiagram = ({ partners, concepts = [] }) => { const SIZE = 560; // viewBox / container square const CX = SIZE / 2; const CY = SIZE / 2; const HUB_R = 104; // radius of central XSOL circle const SPOKE_R = 224; // distance from center to each pill anchor const HALO_R = HUB_R + 22; const ORBIT_R = HUB_R + 42; const CONCEPT_R = HUB_R + 62; // radius of inner concept-badge ring const positions = partners.map((p) => { const rad = ((p.angle - 90) * Math.PI) / 180; // 0° at top return { ...p, x: CX + SPOKE_R * Math.cos(rad), y: CY + SPOKE_R * Math.sin(rad), // line endpoints — stop just outside the hub halo x1: CX + HALO_R * Math.cos(rad), y1: CY + HALO_R * Math.sin(rad), }; }); const conceptPositions = concepts.map((c) => { const rad = ((c.angle - 90) * Math.PI) / 180; return { ...c, x: CX + CONCEPT_R * Math.cos(rad), y: CY + CONCEPT_R * Math.sin(rad), }; }); return (

{/* spoke lines + guides */} {/* Soft pulsing halo behind hub — removed */} {/* Rotating dashed ring (clockwise) */} {/* Rotating thin ring (counter-clockwise) */} {/* Orbiting accent dot */} {/* central XSOL hub */}

{/* inner ring — removed */} {/* gloss highlight */}

{/* partner pills */} {positions.map((p, i) => (

))}

); }; // Compact partner pill used on the hub diagram const PartnerPill = ({ kind, label, role }) => (

{label} {role}

); // Concept badge icons (inner ring of the hub diagram) const ConceptIcon = ({ kind }) => { const p = { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.7, strokeLinecap: "round", strokeLinejoin: "round" }; switch (kind) { case "solutions": return ; case "infrastructure": return ; case "cloud": return ; case "protection": return ; case "networking": return ; case "security": return ; default: return null; } }; // Tiny partner glyphs (~26px). Stylized abstractions, not full logos. const PartnerGlyph = ({ kind }) => { const S = 26; if (kind === "microsoft") return ( ); if (kind === "aws") return ( ); if (kind === "googleCloud") return ( ); if (kind === "fortinet") return ( ); if (kind === "hpeAruba") return ( ); if (kind === "kaspersky") return ( ); return null; }; // ---------- Feature glyph (5 different stylized icons) ---------- const FeatureGlyph = ({ index, tone }) => { const wrapStyle = { width: 40, height: 40, borderRadius: 12, background: `color-mix(in oklab, ${tone} 14%, var(--paper))`, border: `1px solid color-mix(in oklab, ${tone} 30%, var(--line))`, color: tone, display: "grid", placeItems: "center", }; const ico = { width: 20, height: 20, fill: "none", stroke: "currentColor", strokeWidth: 1.8, strokeLinecap: "round", strokeLinejoin: "round" }; const glyphs = [ // Disaster Protection — shield with bolt , // Hardened Security — lock with ring , // Dedicated Provisioning — server stack , // Zero Ops — gear with check , // Cost-controlled — chart up , ]; return {glyphs[index] || glyphs[0]}; }; // ============================================================ // Stats banner — Strategic Advisory / Tech Solutions / Security / Innovation // ============================================================ const Stats = () => (

Numbers we'd defend in a room.
The work, by the work.} />

{[ { value: "36", suffix: "M", label: "Strategic IT Advisory", sub: "Engagement value delivered for CIO/CTO offices across 9 sectors." }, { value: "68", suffix: "M", label: "Technology Solutions Consulting", sub: "Cloud migrations, infra modernization, and platform rollouts." }, { value: "12", suffix: "M", label: "Security & Compliance Audits", sub: "Posture reviews and remediation across regulated industries." }, { value: "93", suffix: "%", label: "Digital Innovation Outcomes", sub: "Of FY25 transformation programs hit their stated business case." }, ].map((s, i, arr) => (

))}

*Reported value across FY24–25. Independent attestation available on request. Download FY25 outcomes report

); // ============================================================ // Capabilities grid — what we do under each practice // ============================================================ const Capabilities = () => { const items = [ { code: "01", title: "Strategic IT advisory", desc: "Architecture reviews, vendor consolidation, cost modelling, CIO/CTO-as-a-service engagements." }, { code: "02", title: "Cloud & platform consulting", desc: "Microsoft, AWS and GCP migrations — sized, planned, and stewarded end-to-end." }, { code: "03", title: "Cybersecurity & compliance", desc: "Posture audits, DPDP readiness, ISO 27001 and SOC 2 pre-assessment." }, { code: "04", title: "AI & data readiness", desc: "Data maturity audits, modern data stack design, and pragmatic AI use-case selection." }, { code: "05", title: "Operating model design", desc: "Org structure, RACI, process re-engineering, and the KPI tree that ties it together." }, { code: "06", title: "GTM & sales enablement", desc: "Positioning, sales playbooks, pipeline systems, and the dashboards that keep them honest." }, { code: "07", title: "Corporate legal & contracts", desc: "MSAs, NDAs, vendor agreements, entity structuring, IP, and DPDP-grade data clauses." }, { code: "08", title: "Regulatory advisory", desc: "Sector-specific compliance for healthcare, finance, energy, and public sector clients." }, ]; return (

CAPABILITIES — WHAT WE ACTUALLY DO

Eight specific things we're good at —{" "} listed so you can tell whether to call us.

We don't pretend to do everything. If your problem isn't on this list, we'll either refer you, or tell you honestly.

{items.map((c, i) => (

e.currentTarget.style.background = "#202024"} onMouseLeave={e => e.currentTarget.style.background = "transparent"}>

{c.code}

{c.title}

{c.desc}

))}

); }; Object.assign(window, { Pillars, Stats, Capabilities });

Top Solutions,{" "} Our Expertise.

Cloud, security, network —{" "} one accountable team.

Eight specific things we're good at —{" "} listed so you can tell whether to call us.