// jsx/Training.jsx: the AI training page, the prospectus for "AI at work",
// Zarco's two-session live course for whole teams. Namespace: tr- (this page
// loads only TopNav, Glyphs, Training, Closing and Footer, so every tr- rule
// below is a fresh, self-contained set, the same isolation contract
// LocalAi.jsx documents for la-).
//
// Register: concrete and specific, elevated in the 2026-08-16 round (Luke:
// the first cut read "very plain"). A course sells on its agenda, so the
// spine of the page is the four-stage "how it runs" process spine (the
// homepage hp-proc recipe: alternating dark mini-scenes, magenta scroll
// fill); the practical bits sit on the page's one Committed-magenta
// surface; the one cinematic moment (photo budget) is the closing claim
// that the team leaves with assistants it built itself. No testimonials, no
// trained-N-teams figures: the course is new and the page must not imply a
// track record it does not have (spec honesty rule). No prices on the page,
// consistent with the whole site. Composition: TopNav → hero (scoped
// aurora) → who this is for → how it runs (spine) → the practical bits
// (committed band) → what you keep → the takeaway statement (photo moment)
// → Closing (supplies #contact) → Footer.
// ── hero: full-bleed photographic cinema (round two of the 2026-08-16
// elevation: the first fold was the unchanged part and read "same page").
// The cp-hero recipe from Console.jsx, ported: photo+scrim stack in its own
// absolute layer, bottom-weighted content, guaranteed legibility wash. The
// page's ONE photographic moment now lives here (the closing statement band
// handed its photo back, see TrStatement); altitude.jpg on a LOW cloud-sea
// crop and a darker grade, both distinct from the homepage's use of the
// same file. ──────────────────────────────────────────────────────────────
function TrHero() {
return (
Zarco / AI training
Your whole team,working with AI.
AI at work is our live training course for businesses. Two sessions of 3.5 hours, shaped around your company's real work, for everyone from the sceptic to the person already deep in it.
Two sessions of 3.5 hours·Up to 12 people·Remote or at your office
);
}
// ── who this is for: the quiet index shape, but indexed by STARTING LEVEL,
// not job function. A function list read as "for these departments only"
// (Luke, 2026-08-16 late: "feels like it might limit us"); ability levels
// exclude nobody and restate the tailoring promise, each row carrying a
// small note on what the course does with that person. ───────────────────
const TR_LEVELS = [
{ level: "New to all of it", note: "starts here" },
{ level: "Uses it most weeks", note: "goes deeper" },
{ level: "Already building things", note: "goes further" },
];
function TrWho() {
return (
Who this is for
Any business, any mix of roles. What matters is where each person starts, and the skills survey finds that before day one.
{TR_LEVELS.map((r) => (
{r.level}{r.note}
))}
One room, mixed roles, on purpose. The point is a company that works with AI, not a specialist who owns it.
);
}
// ── how it runs: the page's spine, PHOTOGRAPHIC since the fifth round.
// Luke's throughline across four rounds of notes: every designed dark
// UI fragment on this page read as "promoting software", not a course.
// So the software idiom is gone from training.html entirely (the session
// window mock, the teaching-chrome mini-scenes and the assistant fragment
// were all removed in this round; git history has them). The spine keeps
// the homepage recipe's structure (alternating sides, magenta scroll fill,
// node dots) but each stage's visual is now a photograph of people doing
// that stage. Photos: self-hosted, Unsplash-licensed, people/ set. ───────
const TR_STAGES = [
{ phase: "Before", title: "A scoping call and a short skills survey.", body: "We learn your work and your team's level before anyone books a room, so both sessions run on tasks the room recognises.", photo: "assets/photo/people/class-scope.jpg", alt: "Two people talking through the work at a table, laptop open between them", pos: "50% 30%" },
{ phase: "Session one", title: "Foundations.", body: "How the models actually work, prompting that holds up, everyday workflows for writing, analysis, meetings and research, and the ground rules for company data.", photo: "assets/photo/people/class-board.jpg", alt: "A facilitator working through a flip chart with a small group", pos: "62% 30%" },
{ phase: "The week between", title: "One real task each.", body: "Everyone runs AI on one real task from their own job and brings back what happened. Session two opens on what they found.", photo: "assets/photo/people/class-desk.jpg", alt: "Back at their own desk, running the task for real", pos: "50% 45%" },
{ phase: "Session two", title: "Building.", body: "Custom GPTs and assistants on your own documents, first automations across the tools you already use, and a where-next roadmap.", photo: "assets/photo/people/class-group.jpg", alt: "The cohort heads-down at one table, building on their own laptops", pos: "50% 40%" },
];
function TrCourse() {
return (
How it runs
Tailoring is the course. The scoping call decides the examples, the pace and where session two spends its build time.
{TR_STAGES.map((s, i) => (
{s.phase}
{s.title}
{s.body}
))}
);
}
// ── the practical bits: promoted to the page's Committed-magenta surface
// (2026-08-16 elevation round; the homepage FAQ band's exact color-mix
// formula, never raw --magenta as a ground). Four label-and-value cells;
// each answers a question a buyer actually asks. Price stays off the page
// by design (sitewide rule); the cell says how it is priced instead. ──────
const TR_FACTS = [
{ label: "Format", value: "Two live sessions of 3.5 hours, about a week apart." },
{ label: "Where", value: "Remote, or at your office anywhere in the UK." },
{ label: "The room", value: "Up to 12 people, mixed roles welcome." },
{ label: "Price", value: "Per cohort, not per head. Scoped on the call." },
];
function TrFacts() {
return (
The practical bits.
{TR_FACTS.map((f) => (
{f.label}
{f.value}
))}
);
}
// ── what you keep: plain rows on paper (the round-three assistant mock
// was removed with the rest of the software idiom; the sentence "working,
// yours" carries the claim now). ─────────────────────────────────────────
const TR_KEEPS = [
"The assistants and automations built in the room. Working, yours.",
"A prompt library shaped around your team's actual tasks.",
"An AI usage policy template you can put in front of staff.",
"A follow-up clinic call within 30 days, once the questions get real.",
];
function TrKeep() {
return (
What you keep
{TR_KEEPS.map((k) => (
{k}
))}
);
}
// ── the takeaway statement: a dark typographic band on --panel (round two
// moved the page's one photographic moment up to the hero, so this band
// handed its photo back rather than spending a second one; the magenta rule
// and the display-light sentence carry it alone, the ConsoleOneSystem
// register at band scale). ────────────────────────────────────────────────
function TrStatement() {
return (
Your team leaves with assistants it built itself, on work it recognises.
);
}
function Training() {
return (
);
}
function TrainingPage() {
React.useEffect(() => window.initRevealObserver(), []);
return (
Start with the scoping call.}
lede="Tell us about your team and we will find a time. Thirty minutes, no obligation, UK-based."
cells={[
{ label: "When", value: "30 minutes, any working day." },
{ label: "Where", value: "Google Meet, or your office if you're London-based." },
{ label: "What you leave with", value: "The course shaped to your team, and dates if you want them." },
]}
form={{
subject: "AI at work enquiry (training page)",
messageLabel: "Tell us about your team",
messagePlaceholder: "Roughly how many people, and where they are with AI today.",
submitLabel: "Book a scoping call",
}}
/>
