// Caliber — "The 24-Month Contract Buyout" dark mega-section. // Dominant hero moment: "Locked into Bullhorn?" cycles through 9 competitor // wordmarks every 2.4s; below, a 4-step 9-day timeline and a real claim form. // // Business framing (per PLAN.md §A): // - We DON'T reimburse cash. We give Caliber free during the overlap. // - Page promises: (a) there is a buyout, (b) it's 24 months, (c) click to claim. // - Specifics (Core-free, Scout 50%) stay off the page — they happen in the // one-on-one that the "Claim my buyout" button kicks off. // - Carousel covers every big ATS so no agency feels "this isn't for me". // // Exports: /* ---------- Competitor carousel list ---------- */ // Brand-accurate colors, tuned for legibility on dark ink (#06082C). // Fraunces italic treatment — sits cleanly in the giant display headline. const BUYOUT_COMPETITORS = [ { name: 'Bullhorn', color: '#FF6A3D' }, { name: 'JobAdder', color: '#3DA8F4' }, { name: 'Vincere', color: '#00BFA6' }, { name: 'Recruit CRM', color: '#4F7FFF' }, { name: 'Crelate', color: '#8566F8' }, { name: 'Loxo', color: '#A389FF' }, { name: 'Manatal', color: '#FF5A5F' }, { name: 'TeamTailor', color: '#F19AB2' }, { name: 'Workable', color: '#21C2A3' }, ]; /* ---------- 4-step timeline (9-day sweep) ---------- */ const BUYOUT_TIMELINE = [ { day: 'Day 0', title: 'Start the trial', body: 'Spin up Caliber, invite your team, load one real role. No contract, no card.' }, { day: 'Day 3', title: 'Kick-off call', body: 'We scope your exports, seats, and the term left on your incumbent. You sign nothing yet.' }, { day: 'Day 7', title: 'Cutover', body: 'Candidates, notes, pipelines, contracts migrated. Caliber becomes your system of record. Incumbent keeps running until its term ends.' }, { day: 'Day 8', title: 'First Scout shortlist', body: 'Brief it in plain English. Your first Scout pipeline lands the day after cutover.' }, ]; /* ---------- Style tokens local to this section ---------- */ const BO_INK = '#06082C'; // canonical dark-ink; matches Monday 9am section per design system const BO_MONO = 'ui-monospace, "SF Mono", Menlo, Consolas, monospace'; const BO_SERIF = '"Fraunces", "Times New Roman", serif'; /* ========================================================= MAIN ========================================================= */ function BuyoutSection() { return (
{/* ─────── Eyebrow ─────── */}
The 24-Month Contract Buyout
{/* ─────── Headline with competitor carousel ─────── */} {/* ─────── Subhead (eligible list moved into the form's left column) ─────── */}

We'll absorb up to{' '} 24 months of overlap{' '} while your old tool runs out. One conversation, no hidden terms.

{/* ─────── Timeline ─────── */} {/* ─────── Claim form ─────── */}
); } /* ========================================================= Headline + carousel — dominant moment. Three-line structure per S11.7: cycling H1 → static H2 → small tag. ========================================================= */ function BuyoutHeadline() { const [i, setI] = React.useState(0); React.useEffect(() => { const id = setInterval(() => { setI((v) => (v + 1) % BUYOUT_COMPETITORS.length); }, 2400); return () => clearInterval(id); }, []); const widest = BUYOUT_COMPETITORS.reduce( (m, b) => (b.name.length > m ? b.name.length : m), 0 ); return (
{/* Line 1 — cycling, Fraunces italic, brand-colored */}

Locked into{' '} {BUYOUT_COMPETITORS.map((b, idx) => ( {b.name} ))} ?

{/* Line 2 — static, medium */}
Two years left?{' '} We'll buy you out.
); } /* ========================================================= 6-step timeline ========================================================= */ function BuyoutTimeline() { const highlight = 3; // Day 8 first Scout shortlist — the payoff return (

One week to cutover.{' '} If it takes longer, we eat the overlap month.

{/* Rail */}
{BUYOUT_TIMELINE.map((s, i) => (
{i + 1}
{s.day}
{s.title}
{s.body}
))}
); } /* ========================================================= Claim form — real button → short form inline. Submit is a no-op (prototype); shows a success state so the psychology lands without wiring an endpoint. ========================================================= */ function BuyoutClaimForm() { const [tool, setTool] = React.useState('Bullhorn'); const [email, setEmail] = React.useState(''); const [seats, setSeats] = React.useState('10'); // Default renewal date = 12 months from today (YYYY-MM). Gives the form // something to show so the field doesn't read as empty/broken. const [renewal, setRenewal] = React.useState(() => { const d = new Date(); d.setMonth(d.getMonth() + 12); return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}`; }); const [state, setState] = React.useState('idle'); // idle | submitting | done const submit = (e) => { e.preventDefault(); if (state !== 'idle') return; setState('submitting'); setTimeout(() => setState('done'), 900); }; return (
{/* LEFT — the pitch (flex col so the eligible block sits flush against the form bottom) */}

Tell us what you’re locked into.{' '} We’ll take it from there.

Claimed buyouts get a reply in under 24 hours, NZ business hours. A real person, not a lead-qual bot. Numbers and eligibility walked through on the call — nothing to argue with a chat widget.

Eligible: any active ATS or CRM contract. {BUYOUT_COMPETITORS.map((b) => b.name).join(', ')}, and more.
{/* RIGHT — the form */} {state === 'done' ? ( ) : (
setSeats(v.replace(/[^\d]/g, '').slice(0, 3))} required />
b.name).concat(['Other'])} />
We reply in under 24 hours. Your data never leaves Caliber. Eligibility and specifics walked through on the call.
)}
); } function Field({ label, type, placeholder, value, onChange, required, inputMode, className }) { return ( ); } function FieldSelect({ label, value, onChange, options }) { return ( ); } /* ========================================================= Success state — replaces the form post-submit ========================================================= */ function BuyoutSuccessCard({ tool, seats, renewal }) { return (
✓
Buyout claimed
You’re in the queue. We’ll email you inside 24 hours to walk the numbers.
tool: {tool}
seats: {seats}
renews:{' '} {renewal || '—'}
); } /* ========================================================= Background — ambient, not distracting ========================================================= */ function BuyoutBackground() { return (
); } Object.assign(window, { BuyoutSection });