{/* Mobile menu overlay — rendered as sibling of header so position:fixed
escapes the header's backdrop-filter containing block. */}
{ if (e.target === e.currentTarget) setOpen(false); }}>
// menu
setOpen(false)}>{window.t('Book a call')}
);
}
// ─── Hero — cosmic, centered, with rotating gas sphere + starfield ──
function Hero() {
window.useLang();
return (
{window.t('Enterprise automation.')}
{window.t('Built for demanding businesses.')}
{window.t('Machine-learning systems that run retail, manufacturing and logistics operations — enterprise engineering, your scale.')}
{/* Built-by proof strip */}
{window.t('Built by')} {window.t('a team with years of experience')}{window.t('delivering')} {window.t('business-critical')} {window.t('ML automation at scale')}
);
}
// Real-cosmos starfield — masked out where the sphere sits so the sphere
// reads as a clean object in space, not transparent through the ring.
// Slow, all-stars-twinkle blinking on long varied clocks for a calm dark-sky feel.
function HeroStars() {
const data = React.useMemo(() => {
const rng = (i, salt) => {
let h = i * 2654435761 + salt * 374761393 >>> 0;
h = Math.imul(h ^ h >>> 15, 0x85ebca6b);
h = Math.imul(h ^ h >>> 13, 0xc2b2ae35);
return ((h ^ h >>> 16) >>> 0) / 4294967296;
};
const stars = [];
const haloPositions = [];
const minDist = 320;
for (let i = 0; i < 1100; i++) {
const tier = rng(i, 99);
let size, baseOp, bright;
if (tier > 0.97) {
size = 1.2 + rng(i, 17) * 1.0;
baseOp = 0.85 + rng(i, 19) * 0.15;
bright = true;
} else if (tier > 0.78) {
size = 0.55 + rng(i, 17) * 0.45;
baseOp = 0.45 + rng(i, 19) * 0.35;
bright = false;
} else {
size = 0.22 + rng(i, 17) * 0.32;
baseOp = 0.14 + rng(i, 19) * 0.3;
bright = false;
}
const x = rng(i, 7) * 1920;
const y = rng(i, 13) * 1080;
if (bright) {
const tooClose = haloPositions.some(([px, py]) => (px - x) ** 2 + (py - y) ** 2 < minDist * minDist);
if (tooClose) {bright = false;size = 0.7;} else
haloPositions.push([x, y]);
}
const tintRoll = rng(i, 71);
const fill = tintRoll > 0.92 ? '#FFE4C4' :
tintRoll > 0.82 ? '#C4D8FF' :
'#FFFFFF';
stars.push({
x, y, size, baseOp, bright, fill,
// All stars blink now — slow, varied so they're not in sync
twDur: 4 + rng(i, 29) * 10, // 4–14s
twDelay: -rng(i, 31) * 12,
twAmpLow: 0.12 + rng(i, 53) * 0.38 // dims to 12–50% of base
});
}
const nebulae = [
{ x: 320, y: 280, r: 380, c: '#4D8BFF', op: 0.06 },
{ x: 1620, y: 760, r: 420, c: '#1E6BFF', op: 0.05 },
{ x: 1340, y: 220, r: 260, c: '#9FBFFF', op: 0.04 }];
return { stars, nebulae };
}, []);
return (
);
}
// Black hole — pitch-black event horizon, sharp photon-ring outline, with
// soft drifting mist around it. Slow, calm motion; nothing sudden.
function HeroSphere() {
return (
{/* 1. Far cosmic glow — extra-wide, very gradual fade so the outer
boundary never reads as a visible circle edge. */}
{/* 2. MIST LAYER A — soft cloud-like patches drifting slowly clockwise.
Patches are radial-gradient hot spots inside a ring-masked div, so
they look like detached wisps of fog encircling the black hole.
Outer mask fade lengthened so the layer dissolves into the void. */}
{/* 3. MIST LAYER B — fewer, larger patches, counter-rotating even slower */}
{/* 4. Subtle inner color halo right around the event horizon */}
{/* 5. EVENT HORIZON — pitch black core. */}
{/* 6. PHOTON RING — sharp glowing outline at the void's edge. */}
);
}
// ─── Hero scene — floating composition of tech UI elements ──
function HeroScene() {
return (
{/* Decorative dotted connectors behind elements */}
{/* Glow nodes */}
{/* Live status — top left */}
{/* Main console card — top right */}
{/* Metric chip — overlapping console left side */}
);
}
// Inline sparkline SVG — area chart with a gradient
function Sparkline() {
const pts = [22, 28, 24, 32, 30, 38, 34, 42, 40, 48, 46, 54, 52, 60, 58, 68, 64, 72, 70, 78, 74];
const W = 880,H = 110,max = Math.max(...pts),min = Math.min(...pts);
const xy = pts.map((v, i) => [i * (W / (pts.length - 1)), H - (v - min) / (max - min) * (H - 20) - 8]);
const line = xy.map(([x, y], i) => (i ? 'L' : 'M') + x.toFixed(1) + ' ' + y.toFixed(1)).join(' ');
const area = line + ` L ${W} ${H} L 0 ${H} Z`;
return (
);
}
// ─── Logo marquee ────────────────────────────────────────────
function LogoMarquee() {
const logos = [
'NORDLY', 'KOENIG·CO', 'AXIS·LABS', 'ENVOY/FI', 'HELIO', 'MORPHIC',
'NUMERA', 'PARLEY', 'STRATA', 'CIRCUIT·9', 'OASIS', 'DELTAQ'];
const doubled = [...logos, ...logos];
return (
Teams we've built with
{doubled.map((n, i) =>
{n}
)}
);
}
// ─── Why Xybos ───────────────────────────────────────────────
function WhyUs() {
const pillars = [
{
title: 'Enterprise engineering, your scale',
body: 'The same engineering principles found in global enterprise systems — applied to your business. We deliver the system, run it, and keep improving it. You get the outcome, not the team to manage.'
},
{
title: 'Secure, modern, built to last',
body: 'Modern technologies, secure by default. Your data stays encrypted in transit and at rest, dependencies stay patched, the framework keeps receiving security updates for years. We make engineering choices today with what they cost you tomorrow.'
},
{
title: 'Specialists, not generalists.',
body: 'Operational automation for retail, manufacturing, and logistics. Nothing else lands on our desk. That focus is why we ship faster — and why our systems still run two years in.'
}];
window.useLang();
return (
{window.t("Most automation projects fail in execution, not in the tech. We've spent years building production ML systems at enterprise scale — the kind where downtime costs tens of thousands a day. We bring that same engineering expertise to your project.")}
{pillars.map((p, i) =>
[ 0{i + 1} ]
{window.t(p.title)}
{window.t(p.body)}
)}
);
}
// ─── Services / capabilities ─────────────────────────────────
function Services() {
const items = [
{ icon: 'cube', title: <>{window.t('Store Ordering')} {window.t('Automation')},
tag: 'RETAIL · ORDERING',
body: 'Most retailers lose 5–15% of revenue to stockouts and another 10–20% to overstock. Our ordering engine combines your sales history, current stock levels, supplier lead times and seasonality into a daily ML-driven recommendation — or fully automated order placement.',
bullets: ['30–60% fewer stockouts', '15–25% lower inventory holding cost', '4–13% higher turnover'] },
{ icon: 'database', title: <>{window.t('Warehouse')} {window.t('Automation')},
tag: 'LOGISTICS · OPS',
body: 'We build an automated warehouse system: inventory tracking, ML demand forecasts that account for seasonality and supplier lead times, purchase orders generated automatically when thresholds are crossed. Your team stops chasing spreadsheets — they oversee a system that handles the calculations, the timing, and the paperwork.',
bullets: ['Pick-path optimisation', 'Predictive replenishment', 'WMS / ERP integration '] },
{ icon: 'chart', title: <>{window.t('AI-Powered')} {window.t('Business Intelligence')},
tag: 'INSIGHT · DECISION',
body: 'Dashboards are not insight. We build BI systems that flag what matters, predict what\'s coming, and tell your team what to do about it — instead of leaving them to interpret another chart.',
bullets: ['Predictive forecasts, not retrospective charts', 'Action-flagged alerts', 'Built on your data warehouse'] },
{ icon: 'flow', title: <>{window.t('Custom')} {window.t('Process Automation')},
tag: 'OPERATIONS · BACK-OFFICE',
body: 'The work nobody wants to do but everyone has to: invoice reconciliation, supplier matching, demand forecasting, quality-control flagging, document processing. Where there\'s a clear rule, we code it. Where there isn\'t, we let ML learn the pattern from your data.',
bullets: ['Rules where they fit, ML where they don\'t', '70%+ of manual work eliminated', 'Catches errors humans miss'] }];
window.useLang();
return (
{window.t('Four core services.')} {window.t('Each starts with a specific problem.')}} />
{window.t('Each one ends with a system that pays for itself. No products, no templates — every engagement is built from scratch, then deployed and maintained. You see the outcome in your operation; we carry the engineering.')}