);
}
// ---------- Page-level FAQ section ----------
// Renders the FAQs tagged for a given page id, with a compact accordion.
// Pass title / eyebrow to override the defaults.
function PageFAQ({
pageId,
go,
eyebrow = "Common questions",
title = "Questions clients ask",
viewAllLink = true,
}) {
const items = (window.getFAQsForPage ? window.getFAQsForPage(pageId) : [])
.filter(Boolean);
const [open, setOpen] = React.useState(null);
if (!items.length) return null;
return (
{eyebrow}
{title}
{viewAllLink && go ? (
go("faqs")}>See all FAQs
) : null}
{items.map((f, i) => (
{open === i &&
{f.a}
}
))}
);
}
// ---------- EnablementSequence ----------
// Repeated across the three Foundations service pages. Foundations is communicated
// as an ordered sequence the client moves through: 1) AI Setup → 2) AI Governance
// → 3) AI Literacy. The current page's step is marked "You are here"; the others
// are clickable. Reuses the site stepper so it reads as native process language.
const ENABLEMENT_STEPS = [
{ key: "ai-setup", name: "AI Setup", desc: "Get the right everyday assistants in place, chosen, configured, and rolled out for how your team actually works." },
{ key: "governance", name: "AI Governance", desc: "Set clear rules and guardrails around those tools, so they're used safely and responsibly." },
{ key: "literacy", name: "AI Literacy", desc: "Build the confidence and skill to get real, daily value from the tools." },
];
function EnablementSequence({ active, go }) {
return (
The foundations sequence
Foundations work best in order.
First the tools, then the rules, then the skills. Each step makes the next one
land, so AI is set up properly, used safely, and actually adopted.
);
}
// ---------- EnablementTriangle ----------
// The deck's triangle motif, reused across the three Foundations pages. Foundations
// has three sides, tools (AI Setup), rules (AI Governance), skills (AI Literacy).
// On each page the relevant side is LIT and the other two are dimmed, exactly like
// the deck. The numbered order (1→2→3) is preserved in the legend.
const TRI_SIDES = [
{ key: "ai-setup", n: "01", name: "AI Setup", side: "Tools", blurb: "The right everyday AI assistants, set up and rolled out.", color: "var(--ia-dark-blue)" },
{ key: "governance", n: "02", name: "AI Governance", side: "Rules", blurb: "Policies and guardrails for safe, responsible use.", color: "var(--ia-blue)" },
{ key: "literacy", n: "03", name: "AI Literacy", side: "Skills", blurb: "The confidence and capability to use it all well.", color: "var(--ia-light-blue)" },
];
const TRI_COPY = {
"ai-setup": { side: "the tools" },
"governance": { side: "the rules" },
"literacy": { side: "the skills" },
};
function EnablementTriangle({ active, go }) {
const copy = TRI_COPY[active] || TRI_COPY["ai-setup"];
// geometry
const apex = [300, 100], bl = [115, 385], br = [485, 385];
const sw = 74;
const dim = 0.16;
const op = (k) => (k === active ? 1 : dim);
return (
The foundations triangle
Foundations have three sides. This page is {copy.side}.
Tools, rules, and skills, the three sides of getting AI adoption right. Each
one holds the others up, and we deliver all three.
);
}
// ---------- EnablementMiniTriangle ----------
// Compact version of the triangle for the hero of each Foundations page, the
// active side lit, others dimmed (like the deck's per-slide pillar indicator).
function EnablementMiniTriangle({ active, width = 76 }) {
const dim = 0.2;
const op = (k) => (k === active ? 1 : dim);
return (
);
}
// ---------- Cursor-follow stage ----------
// Publishes normalised pointer position as --mx / --my (-1..1) on itself, so any
// child can read them in a transform. Resets to centre on leave.
function TiltStage({ className = "", children, strength = 1, style, ariaHidden, innerRef }) {
const own = React.useRef(null);
const ref = innerRef || own;
const set = (x, y) => {
const el = ref.current;
if (!el) return;
el.style.setProperty("--mx", (x * strength).toFixed(3));
el.style.setProperty("--my", (y * strength).toFixed(3));
};
return (
);
}
/* ---------- Long-form legal documents (Terms, Privacy Policy) ----------
Shared so each policy page reads like the document it reproduces, and so the
pages cannot drift apart typographically. */
const LP = ({ children }) =>