);
}
/* ---------- Stat band: proof strip on dark ---------- */
function StatBand({ inView }) {
const [ref, shown] = useReveal(0.4);
const ink = inView ? 'var(--inv-text-1)' : 'var(--ink-1)';
const muted = inView ? 'var(--inv-text-2)' : 'var(--text-muted)';
const hair = inView ? 'var(--inv-hairline)' : 'var(--hairline)';
const faint = inView ? 'rgba(247,243,237,0.42)' : 'rgba(12,25,38,0.42)';
const CT = 'color 1400ms cubic-bezier(0.4,0,0.2,1)';
const stats = [
{ v: '31x', l: 'Median revenue multiple for AI business‑building portfolio companies, 2023–25', src: 'McKinsey' },
{ v: '6.1x', l: 'Higher shareholder-return CAGR for AI leaders vs. laggards', src: 'McKinsey · QuantumBlack' },
{ v: '+$180k', l: 'Median revenue-per-employee gain at the top AI maturity level', src: 'McKinsey' },
{ v: '~20%', l: 'Of portfolio companies have AI in production with real results', src: 'Bain', note: '1' },
];
const rule = { position: 'absolute', left: 0, top: '50%', transform: 'translateY(-50%)', width: 1, height: 96, background: `linear-gradient(180deg, transparent 0%, ${hair} 22%, ${hair} 78%, transparent 100%)` };
return (
PROVEN IN PUBLIC, NOT IN THE PITCH
The value is already proven. The gap is who actually builds it.
{stats.map((s, i) => (
{i > 0 ? : null}
{s.v}
{s.note ? {s.note} : null}
{s.l}
{s.src}
))}
1 Sources: McKinsey, “Beyond AI productivity: Creating value in private equity,” 2025 (analysis of 471 PE-backed companies); Bain Global Private Equity Report, 2025. The industry has proven the value. Most portfolios still can’t capture it. That’s the gap we build for.
{SHOW_UNBUILT_LINKS ? (
How we close it{'\u2192'}
) : null}
);
}
/* ---------- Assurance: how the value gets captured (workable cards) ---------- */
function GlowBar({ shown, tall }) {
const h = shown ? (tall ? 272 : 52) : 0;
return (
{tall ? : null}
);
}
function BuildBarViz({ shown }) {
/* Time comparison: bar LENGTH is proportional to elapsed time, so the shorter
bar reads as the faster option. (It previously gave Hallmir the tall bar for
the shorter duration, which read as "we take longer".) 12 wks vs 12-18 mo
to 65 weeks, drawn on one shared scale. */
const rows = [
{ name: 'Hallmir', val: '12 wks', pct: 18, us: true },
{ name: 'Typical programme', val: '12\u201318 mo', pct: 100, us: false },
];
return (
);
}
function Assurance({ inView }) {
const [ref, shown] = useReveal(0.12);
const ink = inView ? 'var(--inv-text-1)' : 'var(--ink-1)';
const muted = inView ? 'var(--inv-text-2)' : 'var(--text-muted)';
const CT = 'color 1400ms cubic-bezier(0.4,0,0.2,1)';
const cards = [
{ viz: , title: 'Built, not advised', body: 'We ship production systems in weeks, not a transformation programme that lands after the hold period.' },
{ viz: , title: 'Governance-first, audit‑ready', body: 'Every model, decision and data flow is documented as it ships, so the work survives diligence and the exit.' },
{ viz: , title: 'You own what we build', body: 'Code, models and playbooks are yours. Your team runs everything before we leave, no licences, no lock‑in.' },
];
return (
Most AI advice stops at the deck. We stay until it runs.
{cards.map((c, i) => (
{c.viz}
{c.title}
{c.body}
))}
);
}
/* ---------- Closing CTA: audience split ---------- */
function ClosingCTA({ inView }) {
const [ref, shown] = useReveal(0.2);
const ink = inView ? 'var(--inv-text-1)' : 'var(--ink-1)';
const muted = inView ? 'var(--inv-text-2)' : 'var(--text-muted)';
const hair = inView ? 'var(--inv-hairline)' : 'var(--hairline)';
const CT = 'color 1400ms cubic-bezier(0.4,0,0.2,1)';
const ghostBg = inView ? 'rgba(247,243,237,0.08)' : 'rgba(12,25,38,0.05)';
const ghostHover = inView ? 'rgba(247,243,237,0.14)' : 'rgba(12,25,38,0.09)';
const cardBg = inView ? 'linear-gradient(180deg, rgba(247,243,237,0.045) 0%, rgba(247,243,237,0.012) 100%)' : 'linear-gradient(180deg, rgba(12,25,38,0.035) 0%, rgba(12,25,38,0.01) 100%)';
const arrow = ();
const cards = [
{ t: 'Hallmir for funds', d: 'A portfolio‑wide programme: we prioritise where AI moves EBITDA, then embed and build across your companies through the hold.', cta: 'Our approach', href: '#' },
{ t: 'Hallmir for portfolio companies', d: 'Production AI built with your team and handed over before we leave: first system live in weeks, full ownership at the end.', cta: 'See a build', href: '#' },
];
const pill = { display: 'inline-flex', alignItems: 'center', gap: 6, whiteSpace: 'nowrap', fontFamily: 'var(--font-sans)', fontSize: 14.5, fontWeight: 500, borderRadius: 999, padding: '11px 20px', textDecoration: 'none', cursor: 'pointer', transition: 'background 400ms ease, color 400ms ease, transform 220ms ease, border-color 400ms ease' };
return (
);
}
/* ---------- Post-hero dark run: white↔blue scroll transition through to footer ---------- */
function PostRun() {
const ref = React.useRef(null);
const [inView, setInView] = React.useState(false);
React.useEffect(() => {
const el = ref.current;
if (!el) return;
let last = window.scrollY, upDist = 0;
const onScroll = () => {
const y = window.scrollY;
const dy = y - last;
last = y;
upDist = dy < 0 ? upDist - dy : 0;
const r = el.getBoundingClientRect();
const line = window.innerHeight * 0.55;
setInView(r.top < line && r.bottom > line && upDist < 220);
};
onScroll();
window.addEventListener('scroll', onScroll, { passive: true });
return () => window.removeEventListener('scroll', onScroll);
}, []);
return
;
}
/* ---------- Recognition / trust strip ---------- */
function Recognition() {
/* Hallmir has no clients yet, so this cannot be a logo wall. Per the approved
content doc it states the sectors we build for: the real economy that PE
owns and that AI has barely reached. */
const sectors = ['Manufacturing', 'Distribution', 'Logistics', 'Industrial healthcare', 'Professional services', 'Business services'];
return (
Built for the real economy that private equity owns
);
}
/* ---------- 02 The gap: coverage exhibit ---------- */
function GapScene({ active }) {
const narrow = useIsNarrow();
const [tick, setTick] = React.useState(0);
React.useEffect(() => { setTick((t) => t + 1); }, [active]);
if (narrow) return ;
const stages = [['Strategy', '& Diligence'], ['Data', '& Systems'], ['Engineering', '& Build'], ['Operations', '& Adoption'], ['The P&L', 'the outcome']];
const rows = [
{ name: 'Strategy houses', from: 0, to: 20, note: 'leave after the roadmap' },
{ name: 'Dev shops', from: 20, to: 60, note: 'leave at handover' },
{ name: 'Hallmir', from: 0, to: 100, note: 'owns it to the number' },
];
const covered = [[0], [1, 2], [0, 1, 2, 3, 4]][active] || [];
const T = 'all 600ms cubic-bezier(0.4,0,0.2,1)';
return (
{stages.map((s, i) => {
const on = covered.includes(i);
return (
{s[0]} {s[1]}
);
})}
{[20, 40, 60, 80].map((x) => (
))}
NEVER REACHED
{rows.map((r, i) => {
const on = i === active;
const isH = i === 2;
const bar = 'var(--coral-1)';
const dur = isH ? 1300 : 900;
const startX = 'calc(' + r.from + '% + 16px)';
const widthX = 'calc(' + (r.to - r.from) + '% - 32px)';
return (
{r.name}
{on ? : null}
{isH ? (
{on ? : null}
{r.note}
) : (
{on ? : null}
{on ?
{'\u2715'}
: null}
{r.note}
)}
);
})}
ADVICEEXECUTIONOUTCOME
);
}
/* Mobile coverage exhibit: full-width vertical stack. All three players are shown
at once (a stronger static comparison than desktop's timed reveal), so nothing
is clipped and there is no sideways scroll. Active row (driven by the accordion)
draws in coral; the others sit muted for contrast. */
function GapSceneMobile({ active }) {
const rows = [
{ name: 'Strategy houses', from: 0, to: 20, cov: '0–20%', note: 'leave after the roadmap' },
{ name: 'Dev shops', from: 20, to: 60, cov: '20–60%', note: 'leave at handover' },
{ name: 'Hallmir', from: 0, to: 100, cov: '0–100%', note: 'owns it to the number' },
];
const T = 'all 500ms cubic-bezier(0.4,0,0.2,1)';
const peek = { position: 'absolute', top: 26, bottom: 26, width: 26, borderRadius: 13, background: 'linear-gradient(180deg, #FBF9F3, #EFEAE0)', border: '1px solid var(--hairline)', filter: 'blur(2.5px)', opacity: 0.72, zIndex: 0 };
return (
{/* ambient drifting glow — the motion layer that gives the panel depth */}
{/* blurred side panels peeking behind the sharp card (Mercury-style depth) */}
{/* the sharp media card */}
Coverage of the AI journey
{[20, 60].map((x) => (
))}
{rows.map((r, i) => {
const on = i === active;
const isH = i === 2;
const fill = on ? 'var(--coral-1)' : 'rgba(16,29,46,0.22)';
const dur = isH ? 1200 : 900;
return (
{r.name}{r.cov}
{!isH ? : null}
{on ? : null}
{isH ? (
) : (
)}
{isH
?
: {'✕'}}
{r.note}
);
})}
AdviceExecutionOutcome
);
}
/* Motion-graphics demo: an animated on-brand "Hallmir · Production" console
(Mercury-style live product panel). Counting hero metric + drawing sparkline +
staggered deploy-event feed + sheen, with a pause control. Reusable anywhere.
The hero metric changes with the accordion so each open reveals a new figure. */
function HallmirConsole({ active = 0 }) {
const heroes = [
{ label: 'Value created · LTM', pre: '$', num: 48.2, dec: 1, suf: 'M', sub: 'across 40+ portfolio companies' },
{ label: 'Margin impact · avg', pre: '+', num: 18, dec: 0, suf: '%', sub: 'EBITDA within the hold period' },
{ label: 'Still in production', pre: '', num: 94, dec: 0, suf: '%', sub: 'owned by the company’s own team' },
];
const events = [
{ m: 'M', t: 'Ops copilot shipped', meta: 'Manufacturing co.', d: '9 wks' },
{ m: 'D', t: 'Pricing engine live', meta: 'Distribution co.', d: '6 wks' },
{ m: 'F', t: 'Underwriting model live', meta: 'Financial services', d: '12 wks' },
];
const hero = heroes[active] || heroes[0];
const [paused, setPaused] = React.useState(false);
const [cycle, setCycle] = React.useState(0);
const [disp, setDisp] = React.useState(0);
React.useEffect(() => {
if (paused) return;
const id = setInterval(() => setCycle((c) => c + 1), 9000);
return () => clearInterval(id);
}, [paused]);
React.useEffect(() => {
if (paused) return;
setDisp(0);
let raf, start = null;
const tick = (t) => {
if (start === null) start = t;
const p = Math.min(1, (t - start) / 1500);
setDisp(hero.num * (1 - Math.pow(1 - p, 3)));
if (p < 1) raf = requestAnimationFrame(tick);
};
raf = requestAnimationFrame(tick);
return () => { if (raf) cancelAnimationFrame(raf); };
}, [active, cycle, paused, hero.num]);
const ps = paused ? 'paused' : 'running';
const brass = '#C79A5B', cream = '#F3EFE6', dim = 'rgba(243,239,230,0.56)', line = 'rgba(243,239,230,0.10)';
const rk = active + '-' + cycle;
return (
Hallmir · Production
Live
{hero.label}
{hero.pre}{disp.toFixed(hero.dec)}{hero.suf}
{hero.sub}
{events.map((e, i) => (
{e.m}
{e.t}
{e.meta}
{e.d}{'✓'}
))}
);
}
/* Mercury-style media panel: a looping cinematic Flow (Remotion + Higgsfield),
self-titled in the video. Breakpoint-aware: landscape desktop cut vs. taller
mobile cut. Framed screen with a soft glow + pause control. */
function MotionPanel({ srcDesktop, srcMobile, poster, posterMobile }) {
const narrow = useIsNarrow();
const [paused, setPaused] = React.useState(false);
const vref = React.useRef(null);
const userPaused = React.useRef(false);
const ringRef = React.useRef(null);
const RC = 2 * Math.PI * 20;
const toggle = () => {
const v = vref.current; if (!v) return;
if (v.paused) {
v.removeAttribute('data-user-paused');
v.play().catch(() => {}); setPaused(false); userPaused.current = false;
} else {
v.setAttribute('data-user-paused', '');
v.pause(); setPaused(true); userPaused.current = true;
}
};
const src = narrow ? srcMobile : srcDesktop;
const pos = narrow ? (posterMobile || poster) : poster;
// best practice: only play while on-screen (saves battery/data), respect manual pause
React.useEffect(() => {
const v = vref.current; if (!v) return;
v.muted = true; v.playsInline = true; // React won't set `muted` reliably; mobile blocks autoplay without it
const io = new IntersectionObserver(([e]) => {
if (e.isIntersecting) { if (!userPaused.current) v.play().catch(() => {}); } else { v.pause(); }
}, { threshold: 0.2 });
io.observe(v);
return () => io.disconnect();
}, [src]);
// circular progress ring on the control — fills as the video plays, resets each loop
React.useEffect(() => {
const v = vref.current; if (!v) return;
let raf;
const tick = () => {
const el = ringRef.current;
if (el && v.duration) el.style.strokeDashoffset = String(RC * (1 - (v.currentTime / v.duration)));
raf = requestAnimationFrame(tick);
};
raf = requestAnimationFrame(tick);
return () => cancelAnimationFrame(raf);
}, [src]);
return (
);
}
/* Signature exhibit — "The Journey to the P&L". One responsive component for
desktop + mobile. The section's argument rendered as a data-film: real figures
(20% / 60% / 100% / +$48.2M) as luminous brass light-streams on a navy field.
The two that quit fray into embers; Hallmir completes into a bloom. Rational
(figures, axis, labels) fused with irrational (light, glow, particles). */
function JourneyExhibit({ active = 0 }) {
const narrow = useIsNarrow();
const players = [
{ name: 'Strategy houses', from: 0, to: 20, note: 'leave after the roadmap', fig: '20%', kind: 'dissolve' },
{ name: 'Dev shops', from: 20, to: 60, note: 'leave at handover', fig: '60%', kind: 'dissolve' },
{ name: 'Hallmir', from: 0, to: 100, note: 'owns it to the number', fig: '100%', sub: '+$48.2M', kind: 'complete' },
];
const T = 'all 600ms cubic-bezier(0.4,0,0.2,1)';
const brass = '#C79A5B', brassLite = '#E7C588', cream = '#F3EFE6';
const dim = 'rgba(243,239,230,0.55)', faint = 'rgba(243,239,230,0.30)', track = 'rgba(243,239,230,0.09)', line = 'rgba(243,239,230,0.11)';
const laneH = narrow ? 12 : 14;
const pad = narrow ? '20px 18px 16px' : '32px 32px 26px';
const gapY = narrow ? 18 : 28;
const grain = "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E\")";
return (
Coverage of the engagement
Live
{[20, 60].map((x) => )}
{players.map((p, i) => {
const on = i === active;
const isC = p.kind === 'complete';
const rk = i + '-' + active;
return (
);
}
/* Quiet link CTA (Mercury "Launch demo" pattern): small text, thin underline
sitting just under it, whisper arrow. Understated by design. */
function EngageLink({ children, href = '#', style }) {
const [h, setH] = React.useState(false);
return (
setH(true)} onMouseLeave={() => setH(false)}
style={{ display: 'inline-flex', alignItems: 'baseline', gap: 8, fontFamily: 'var(--font-sans)', fontSize: 14.5, fontWeight: 500, letterSpacing: '0.01em', color: 'var(--ink-1)', textDecoration: 'none', borderBottom: 'none', cursor: 'pointer', ...style }}>
{children}→
);
}
function Accounts() {
const items = [
{ t: 'Consultants ship decks', d: 'Strategy houses hand over the roadmap and leave before the build. The thinking is sound; the software never arrives.', vDesk: '/uploads/flow-meridian-cl.mp4?v=1', vMob: '/uploads/flow-meridian-cl-m.mp4?v=1', poster: '/uploads/poster-flow-meridian-cl.jpg', posterMob: '/uploads/poster-flow-meridian-cl-m.jpg' },
{ t: "Dev shops don't speak EBITDA", d: 'Agencies can write the code, but not underwrite the outcome. Nothing is scoped against margin, multiple, or the hold period.', vDesk: '/uploads/flow-northgate-cl.mp4?v=1', vMob: '/uploads/flow-northgate-cl-m.mp4?v=1', poster: '/uploads/poster-flow-northgate-cl.jpg', posterMob: '/uploads/poster-flow-northgate-cl-m.jpg' },
{ t: 'Nobody ties it to the P&L', d: 'Hallmir engineers the system and owns the number it moves. Every engagement lands as a line in the P&L.', vDesk: '/uploads/flow-alder-cl.mp4?v=1', vMob: '/uploads/flow-alder-cl-m.mp4?v=1', poster: '/uploads/poster-flow-alder-cl.jpg', posterMob: '/uploads/poster-flow-alder-cl-m.jpg' },
];
const [active, setActive] = React.useState(0);
const [hov, setHov] = React.useState(null);
const narrow = useIsNarrow();
return (
The build gap
Everyone advises on AI. Almost nobody builds it.
Three reasons AI stalls between the boardroom and the P&L:
{items.map((it, i) => {
const on = i === active;
return (
{it.d}
{narrow && on ?
: null}
);
})}
{SHOW_UNBUILT_LINKS ? Walk through an engagement : null}
{!narrow && active != null ?
: null}
);
}
/* ---------- Proof: trust band + testimonial carousel ---------- */
function Proof({ inView }) {
const quotes = [
{ tag: 'Commitment \u00B7 01', img: '/ui_kits/homepage/assets/commit-embedded.jpg?v=2', imgM: '/ui_kits/homepage/assets/commit-embedded-m.jpg?v=1', q: 'Senior engineers on your floor from week one.', sub: 'Partner‑led delivery. No leveraged juniors, no offshore hand‑off, no learning on your time.', name: 'Embedded, not advisory', role: 'Written into the engagement', metrics: [['2 wks', 'to diagnostic'], ['Senior‑only', 'delivery team'], ['On‑site', 'with your ops']] },
{ tag: 'Commitment \u00B7 02', img: '/ui_kits/homepage/assets/commit-scoped.jpg?v=2', imgM: '/ui_kits/homepage/assets/commit-scoped-m.jpg?v=1', q: 'One number, agreed before we build.', sub: 'Scoped against margin, multiple and the hold period. The target goes in the contract, not the pitch.', name: 'Underwritten to the P&L', role: 'Written into the engagement', metrics: [['EBITDA‑first', 'scope'], ['6 wks', 'to first value'], ['In writing', 'not in a deck']] },
{ tag: 'Commitment \u00B7 03', img: '/ui_kits/homepage/assets/commit-handover.jpg?v=2', imgM: '/ui_kits/homepage/assets/commit-handover-m.jpg?v=1', q: 'Your team runs it after we leave.', sub: 'Code, models, documentation and runbooks transfer in full. We build for handover from day one.', name: 'Built to be owned', role: 'Written into the engagement', metrics: [['100%', 'IP transferred'], ['In‑house', 'operated by you'], ['No lock‑in', 'by design']] }, ];
const [i, setI] = React.useState(0);
const [paused, setPaused] = React.useState(false);
React.useEffect(() => {
if (paused) return;
const t = setTimeout(() => setI((v) => (v + 1) % quotes.length), 8000);
return () => clearTimeout(t);
}, [i, paused]);
const cur = quotes[i];
const bg = inView ? 'var(--inv-surface)' : 'var(--surface-page)';
const bgT = 'background 1400ms cubic-bezier(0.4,0,0.2,1)';
return (
setPaused(true)} onMouseLeave={() => setPaused(false)} style={{ position: 'relative' }}>
The standard we sign to.
Most firms show you logos. We show you the terms. Three commitments, written into every engagement, and you hold us to all three.
{quotes.map((q, k) => (
))}
{cur.tag}
{cur.name}
{cur.q}
{cur.sub}
{cur.metrics.map(([v, l]) => (
{v}
{l}
))}
{quotes.map((q, k) => (
))}
{[['Engagements at a time', '3', 'Partner‑led and senior‑only. We take three, so every one gets the founders'], ['Diagnostic, then you decide', '2 wks', 'Flat fee, credited in full against the build. Walk away with the roadmap either way'], ['Of the IP transfers to you', '100%', 'Code, models, docs and runbooks. Your team runs it, with no lock‑in']].map(([l, v, d]) => (
} title="Value creation, not cost‑cutting" body="Revenue, pricing and velocity through product and marketing, not headcount cuts. The model shows which line moves before any code is written." />
} title="Speed, at hold‑period pace" body="First system live in weeks, not a transformation programme. Every workstream is scoped to pay back inside the hold, not after it." />
} title="Governance-first, audit‑ready" body="Every model, decision and data flow is documented as it ships, so the work survives diligence, not just the demo." />
} title="You own the IP" body="Everything we build is yours: code, models, playbooks. Your team runs it before we leave. No licences, no lock‑in, nothing to negotiate at exit." />
);
}
/* ---------- Dark band: Proof + Capabilities share one background state ---------- */
function DarkBand() {
const ref = React.useRef(null);
const [inView, setInView] = React.useState(false);
React.useEffect(() => {
const el = ref.current;
if (!el) return;
let last = window.scrollY, upDist = 0;
const onScroll = () => {
const y = window.scrollY;
const dy = y - last;
last = y;
upDist = dy < 0 ? upDist - dy : 0;
const r = el.getBoundingClientRect();
const line = window.innerHeight * 0.49;
const q = el.lastElementChild.getBoundingClientRect();
setInView(r.top < line && r.bottom > line && upDist < 160 && q.top > window.innerHeight * 0.55);
};
onScroll();
window.addEventListener('scroll', onScroll, { passive: true });
return () => window.removeEventListener('scroll', onScroll);
}, []);
return
);
}
function GetStarted() {
/* Mirrors the "build gap" section: eyebrow, headline, intro, accordion,
quiet link CTA, panel vertically centred. No flex spacer (it was pushing
the accordion to the bottom and leaving a void under the headline). */
const items = [
{ t: 'For PE funds', w: 'Operating partners and value-creation leads', d: 'Portfolio\u2011wide value creation. Prove it in one company, then roll it across the fund at near\u2011zero marginal cost.', cta: 'How we work with funds' },
{ t: 'For portfolio companies', w: 'CEOs, CTOs, marketing and product leads', d: 'A marketing, product and back\u2011office AI stack: the CMO-and-product capability that lifts revenue and valuation.', cta: 'How we work with companies' },
];
const [active, setActive] = React.useState(0);
const [hov, setHov] = React.useState(null);
const narrow = useIsNarrow();
return (
Who it{'\u2019'}s for
Two ways in. The same discipline.
Whether you own the company or run it, the engagement is scoped the same way:
{items.map((it, i) => {
const on = i === active;
return (
);
}
function Engage() {
/* Same ladder as the other two sections: eyebrow, headline, intro, accordion.
No flex spacer, panel vertically centred, mobile reveals the visual inline. */
const items = [
{ t: 'Assess the ground truth', w: 'WKS 1\u20132', d: 'A two\u2011week governance snapshot of one company: the data, the systems, the decisions. Where AI can move the number, and where it can\u2019t.' },
{ t: 'Scope to a single P&L line', w: 'WK 3', d: 'One line, one target, one owner. The engagement is priced and scoped against a number you can hold us to, in writing.' },
{ t: 'Ship a system you own', w: 'WKS 4\u201312', d: 'A working system, live in operations in twelve weeks or less, built inside your team\u2019s tools, documented, and yours on handover.' },
];
const [active, setActive] = React.useState(0);
const [hov, setHov] = React.useState(null);
const narrow = useIsNarrow();
return (
{!narrow ?
: null}
The engagement
How it works.
No transformation programme. One company, one number, one working system, then repeat.
{items.map((it, i) => {
const on = i === active;
return (