// primitives.jsx — shared tiny components + hooks
const { useState, useEffect, useRef, useMemo, useCallback } = React;
// IntersectionObserver reveal
function useReveal(threshold = 0.15) {
const ref = useRef(null);
const [inView, setInView] = useState(false);
useEffect(() => {
if (!ref.current) return;
const el = ref.current;
// Fallback: if an element is already in viewport on mount, reveal immediately.
const r = el.getBoundingClientRect();
if (r.top < (window.innerHeight || 0) && r.bottom > 0) {
setInView(true);
return;
}
const io = new IntersectionObserver(
([entry]) => { if (entry.isIntersecting) { setInView(true); io.disconnect(); } },
{ threshold, rootMargin: "0px 0px -5% 0px" }
);
io.observe(el);
// Safety net: reveal after 600ms regardless, so the page never ends up invisible.
const t = setTimeout(() => { setInView(true); io.disconnect(); }, 600);
return () => { io.disconnect(); clearTimeout(t); };
}, [threshold]);
return [ref, inView];
}
function Reveal({ children, delay = 0, as: Tag = "div", className = "", ...rest }) {
const [ref, inView] = useReveal();
return (
{children}
);
}
// Tiny inline icons
const Icon = {
arrow: (p) => (),
signal: (p) => (),
calendar: (p) => (),
wrench: (p) => (),
chat: (p) => (),
dot: (p) => (),
plus: (p) => (),
};
// Content
const TAGLINES = {
headline_primary: {
headline: (<>The AI shift is already happening. Your team can't see it yet.),
plain: "The AI shift is already happening. Your team can't see it yet.",
},
headline_urgent: {
headline: (<>AI is rewriting how companies work. Most brands are missing it.),
plain: "AI is rewriting how companies work. Most brands are missing it.",
},
headline_ships: {
headline: (<>A two-year head start is up for grabs. Take yours.),
plain: "A two-year head start is up for grabs. Take yours.",
},
};
const PHASES = {
install_solve_embed: [
{ name: "Install", italic: "Install",
when: "Week 1–2",
desc: "We bring in the tools that actually work. Claude Code, MCP servers, Obsidian, the integrations that wire your stack together.",
items: [
"Claude Code + MCP servers on team laptops",
"Obsidian vault wired to Notion / Linear / Slack",
"Access audit, secrets, model routing",
"One workflow lift selected with you",
]
},
{ name: "Solve", italic: "Solve",
when: "Day 1 live session",
desc: "We pick one real problem from your backlog and solve it in front of your team. Tom's was three shipped outcomes in an hour.",
items: [
"1-hour working session, your team watching",
"Ship at least one real outcome that day",
"Hand over the recording + the prompts",
"Their first 'oh, this is different' moment",
]
},
{ name: "Embed", italic: "Embed",
when: "Month 2 onward",
desc: "The retainer. One person who filters the noise, keeps your stack current, shows up on Tuesdays, ships the next thing.",
items: [
"Weekly office hours with your team",
"Monthly build day on a real workflow",
"Signal filter: the 2 things that matter this month",
"Stack upkeep as models / tools change",
]
},
],
integrate_audit_distribute: [
{ name: "Integrate", italic: "Integrate",
when: "Week 1–2",
desc: "We bring in the tools that actually work. Claude Code, MCP servers, Obsidian, the integrations that wire your stack together.",
items: [
"Claude Code + MCP servers on team laptops",
"Obsidian vault wired to Notion / Linear / Slack",
"Access audit, secrets, model routing",
"One workflow lift selected with you",
]
},
{ name: "Audit", italic: "Audit",
when: "Day 1 live session",
desc: "We pick one real problem from your backlog and solve it in front of your team. Tom's was three shipped outcomes in an hour.",
items: [
"1-hour working session, your team watching",
"Ship at least one real outcome that day",
"Hand over the recording + the prompts",
"Their first 'oh, this is different' moment",
]
},
{ name: "Distribute", italic: "Distribute",
when: "Month 2 onward",
desc: "The retainer. One person who filters the noise, keeps your stack current, shows up on Tuesdays, ships the next thing.",
items: [
"Weekly office hours with your team",
"Monthly build day on a real workflow",
"Signal filter: the 2 things that matter this month",
"Stack upkeep as models / tools change",
]
},
],
};
Object.assign(window, { useReveal, Reveal, Icon, TAGLINES, PHASES });