);
}
function Services() {
const TRAINING = {
label: "Training",
title: "We teach you how to use AI",
desc: "Whether it's one person or a team of 50, you'll walk away knowing how to use AI in your day-to-day.",
items: [
["Self-paced courses & guides", "Your own time, your own pace"],
["Team workshops", "Half or full day, remote or in-person"],
["1:1 coaching", "Personalised support for career development"],
["Job seeker AI coaching", "Build an AI portfolio and stand out in your job search"],
],
cta: "Enquire about training",
};
const CONSULTING = {
label: "Consulting",
title: "Or we can build AI RecOps for you",
desc: "Some teams would rather have someone come in and just sort it. We'll audit your workflows, figure out where AI fits, and build it into your operations.",
items: [
["Process & workflow audit", "Find where AI saves your team real time"],
["Tool selection & implementation", "Cut through the noise, pick what works"],
["Automation builds", "We build it, hand it over, train you on it"],
["Ongoing support & iteration", "We don't just build and disappear"],
],
cta: "Enquire about consulting",
};
return (
How we help recruiting teams get more value out of their AI tools.
However your team learns best, we'll make it work. Or a mix of all.
);
}
/* ── VIBE-CODING DEMO ── */
function ChatDemo() {
const scenarios = [
{
tag: "Hiring brief",
prompt: "Just had a screening call with Mark, Head of Eng, for a Senior Backend Engineer role. Build me the internal hiring brief.",
response: "On it — drafting the brief from your call notes ✨",
preview: "brief",
},
{
tag: "Public JD",
prompt: "Now turn that into a public job description we can post on LinkedIn.",
response: "Cool — making it candidate-facing.",
preview: "jd",
},
{
tag: "Sourcing plan",
prompt: "And the sourcing plan — target companies, channels, and 3 boolean strings.",
response: "Got it — putting together the kickoff pack.",
preview: "sourcing",
},
{
tag: "Pipeline dashboard",
prompt: "Pull my last 30 days of Metaview calls — build a dashboard with funnel, time-to-screen, and top rejection reasons.",
response: "Cool — crunching your call data now.",
preview: "dashboard",
},
];
const [scenarioIdx, setScenarioIdx] = useState(0);
const [phase, setPhase] = useState("typing-prompt");
const [promptText, setPromptText] = useState("");
const [responseText, setResponseText] = useState("");
const [buildStep, setBuildStep] = useState(0);
const sc = scenarios[scenarioIdx];
const PREVIEW_STEPS = 5;
useEffect(() => {
let t;
if (phase === "typing-prompt") {
if (promptText.length < sc.prompt.length) {
t = setTimeout(() => setPromptText(sc.prompt.slice(0, promptText.length + 1)), 24 + Math.random() * 20);
} else {
t = setTimeout(() => setPhase("thinking"), 600);
}
} else if (phase === "thinking") {
t = setTimeout(() => setPhase("claude-response"), 1100);
} else if (phase === "claude-response") {
if (responseText.length < sc.response.length) {
t = setTimeout(() => setResponseText(sc.response.slice(0, responseText.length + 1)), 22 + Math.random() * 18);
} else {
t = setTimeout(() => setPhase("building"), 450);
}
} else if (phase === "building") {
if (buildStep < PREVIEW_STEPS) {
t = setTimeout(() => setBuildStep(s => s + 1), 340);
} else {
t = setTimeout(() => setPhase("done"), 3600);
}
} else if (phase === "done") {
t = setTimeout(() => {
setPromptText(""); setResponseText(""); setBuildStep(0);
setScenarioIdx(i => (i + 1) % scenarios.length);
setPhase("typing-prompt");
}, 350);
}
return () => clearTimeout(t);
}, [phase, promptText, responseText, buildStep, scenarioIdx]);
const resetTo = (i) => {
setScenarioIdx(i); setPromptText(""); setResponseText(""); setBuildStep(0); setPhase("typing-prompt");
};
const previewItem = (key, step, children) => (
We're looking for a senior engineer to own our payments service. You'll work directly with our Head of Engineering on services that move real money for thousands of customers.
)}
{previewItem("do", 2,
What you'll do
{["Design + ship Go services end-to-end", "Lead architectural decisions across the team", "Mentor mid-level engineers"].map((t, i) => (
→{t}
))}
)}
{previewItem("want", 3,
What we want
{["5+ yrs production Go (or similar)", "Distributed systems experience", "Strong opinions, held loosely"].map((t, i) => (
{[
`("Senior Backend Engineer" OR "Staff Engineer") AND Go AND payments`,
`"Backend" AND (Monzo OR Wise OR Revolut) AND ("5 years" OR "6 years")`,
`Golang AND ("distributed systems" OR microservices) AND London`,
].map((s, i) => (
);
}
/* ── ABOUT ── */
function About() {
return (
{/* layered cards behind */}
About
Meet the founder, Jamie
8 years in recruitment across agency, in-house, and AI rec-tech. 300+ hires across PlayStation, TikTok, AMEX and over 100 more brands. 2x founding teams and funded VC scale up.
Throughout my career I've naturally gravitated towards the ops side of recruitment; process, systems, making things work better. I began learning Python and SQL before AI entered the conversation. When it did, the pivot was a no-brainer.
Now I spend my days researching the latest in AI, and how that can impact recruitment, and turning that into content, trainings, or directly building for recruitment teams.
);
}
/* ── WORKSHOPS GALLERY ── */
function Workshops() {
const talks = [
{ src: "images/workshop-prompt.jpg", alt: "Jamie leading a hands-on prompting workshop", cap: "Prompt engineering, live" },
{ src: "images/workshop-cvinvaders.jpg", alt: "Jamie demoing the CV Invaders game to the room", cap: "CV Invaders — live demo" },
{ src: "images/workshop-tips.jpg", alt: "Jamie sharing final tips and tricks with attendees", cap: "Final tips & tricks" },
{ src: "images/workshop-room.jpg", alt: "A full room of recruiters at a Rec Lab workshop", cap: "Full house" },
];
return (
In the room
Workshops & talks
Hands-on sessions where recruiting teams actually build with AI — from prompting fundamentals to shipping working tools live.
A Recruiter’s Road to Vibe-Coding
{talks.map((t, i) => (
{t.cap}
))}
);
}
/* ── PHILOSOPHY ── */
function Philosophy() {
const items = [
{ t: "Practical over theoretical", b: "If you can't use it on Monday morning, we're not teaching it." },
{ t: "Built by a recruiter, for recruiters", b: "Who spends all day researching and building AI tools." },
{ t: "Tool-agnostic", b: "We teach you to think about AI regardless of which tools your team uses." },
{ t: "Tailored to your world", b: "We learn your tech stack, workflows, and pain points first." },
];
return (
Why us
Why it works
{items.map((item, i) => (
{item.t}
{item.b}
))}
);
}
/* ── TESTIMONIALS ── */
/* ── CASE STUDIES (Metaview-style bento) ── */
function CaseStudies() {
const cards = [
// Big featured — image + metric + quote
{
kind: "featured",
bg: C.peach,
company: "Few and Far",
metric: "Cut screening time by 40%",
quote: "If you're in recruitment and want to explore AI in a way that actually feels useful and inspiring, I would thoroughly recommend Jamie. He's ridiculously knowledgeable, and explains things in a super digestible way.",
name: "Kiera",
role: "Head of People",
},
// Metric tile
{ kind: "metric", company: "PlayStation", metric: "300+ hires across 5 teams", bg: C.sage },
// Logo + small metric
{ kind: "logo", company: "TikTok", metric: "AI sourcing workshop, 24 recruiters" },
// Quote tile
{
kind: "quote",
company: "Creatio",
quote: "Jamie cuts through the noise. We had three workflows automated within a fortnight of his audit.",
name: "Milan",
role: "Head of Talent",
},
// Image card (placeholder)
{ kind: "image", company: "AMEX", metric: "Internal AI training programme" },
// Pull-quote on dark
{
kind: "darkQuote",
company: "Placeholder Co.",
quote: "Saved my team 12 hours a week, easy.",
name: "Placeholder",
role: "TA Lead",
},
// Small metric
{ kind: "metric", company: "100+ brands", metric: "AI tooling consulted on", bg: C.butter },
// Small quote
{
kind: "quote",
company: "Placeholder",
quote: "Bookmark every workshop. They keep paying off six months on.",
name: "Placeholder",
role: "Head of Recruitment",
compact: true,
},
];
const LogoBlock = ({ company }) => (
{company[0]}
{company}
);
return (
Designed for recruiting teams who actually care about hiring well.
);
}
/* ── BUILDS ── */
function Builds() {
const projects = [
{ title: "Candidate Interview Packs", desc: "Branded, interactive interview prep sites.", tag: "Vibe-coded", tint: TINTS[0] },
{ title: "Vibe-coded CV", desc: "A fully interactive CV as a website.", tag: "Personal", tint: TINTS[2] },
{ title: "Vibe-coded CRM", desc: "A lightweight recruitment CRM from scratch.", tag: "Tool", tint: TINTS[1] },
{ title: "CV Invaders", desc: "Retro arcade game. Shoot down bad CVs.", tag: "Just for fun", tint: TINTS[3] },
{ title: "Custom Calendly", desc: "Bespoke booking page, no off-the-shelf.", tag: "Vibe-coded", tint: TINTS[4] },
{ title: "Research Agent", desc: "AI agent scraping ATS data and role counts.", tag: "Tool", tint: TINTS[5] },
];
const BuildVisual = ({ tint, large }) => (
{tint.letter}
Preview
);
return (
Recent work
Things I've built
All built with AI tools. No dev team. Just me and the tools I teach.
{projects.slice(0, 2).map((p, i) => (
{p.tag}
{p.title}
{p.desc}
View project →
))}
{projects.slice(2).map((p, i) => (
{p.tag}
{p.title}
{p.desc}
))}
);
}
/* ── FAQ + CTA ── */
function FAQ() {
const [open, setOpen] = useState(null);
const faqs = [
{ q: "Do you work with teams outside the UK?", a: "Yes. Workshops can be delivered remotely and most consulting work is done virtually." },
{ q: "How long is a typical workshop?", a: "Most run as a half-day or full day. We'll figure out the right format together." },
{ q: "What AI tools do you cover?", a: "Claude, ChatGPT, Gemini, Cursor, n8n, Make, Notion AI and more. We're tool-agnostic." },
{ q: "Do I need any technical experience?", a: "Not at all. Everything is designed for recruiters, not engineers." },
{ q: "What's the difference between training and consulting?", a: "Training teaches your team to use AI themselves. Consulting means we build the workflows for you." },
{ q: "How much does it cost?", a: "Depends on scope. Get in touch and we'll put something together. No templated packages." },
];
return (
Contact
Still got questions? Let's talk
Whether it's a workshop for 50, coaching for one, or some automated workflows, the first step is a conversation.
hello@thereclab.comLinkedIn
{faqs.map((f, i) => (
{f.a}
))}
);
}
/* ── FOOTER ── */
function Footer() {
return (
);
}
/* ── HERO (photo / full-bleed — from Claude Design "RecLab Hero.html", option 01) ── */
function HeroPhoto() {
return (
{/* Full-bleed background photo — framed to keep the presenter in view */}
{/* Diagonal scrim for headline legibility */}
{/* Content pinned to lower-left */}
Where recruiters turn AI into real impact
Hands-on training, mentorship and consulting projects to help talent teams put AI to work.
{/* Diagonal scrim for headline legibility */}
{/* Content pinned to lower-left */}