// CLARITY — Fuel Talent homepage (Apple-emulation) // Light primary with dramatic dark sections. SF Pro / Inter typography. // Sapphire (#1e3a8a) accent, used sparingly on CTAs, links, and active states. const { useState, useEffect, useRef, useMemo, useCallback } = React; // ─── content (shared with Studio — single source of truth lives here) ── const NAV = [ { label: "Expertise", href: "#expertise", panel: "expertise" }, { label: "Services", href: "#services", panel: "services" }, { label: "Resources", href: "#resources", panel: "resources" }, { label: "Find a Job", href: "jobs.html", panel: null, noUnderline: true }, { label: "About", href: "#about", panel: null, noUnderline: true }, ]; const MEGA_PANELS = { expertise: { eyebrow: "Expertise · 8 practices", cols: [ { head: "Build", items: ["Tech & Engineering", "Product", "Design & UX Research"] }, { head: "Operate", items: ["HR & Operations", "Finance & Accounting", "Admin & Lifestyle"] }, { head: "Lead", items: ["C-Suite", "Marketing"] }, { head: "Featured", items: ["Browse all expertise ›", "Submit a role"] }, ], }, services: { eyebrow: "Services · 3 modes", cols: [ { head: "01 — Recruiting & Staffing", items: ["Permanent placement", "Contract & contingent", "Embedded recruiting"] }, { head: "02 — Professional & Managed", items: ["Specialist teams", "Operational coverage", "Project execution"] }, { head: "03 — Digital Workers", items: [{ label: "The roles we staff", href: "digital-worker.html#roles" }, { label: "How we build them", href: "digital-worker.html#stack" }, { label: "Hire a Digital Worker ›", href: "digital-worker.html" }] }, { head: "Not sure?", items: ["Talk to a strategist ›"] }, ], }, resources: { eyebrow: "Fuel for thought", cols: [ { head: "Field Notes", items: ["Hiring playbooks", "Career guides", "Salary trends 2026"] }, { head: "Case Studies", items: ["Provider case · Providence", "Scale-up case · Pacagen"] }, { head: "Podcast", items: ["Make Them Lose Sleep", "Browse all episodes ›"] }, { head: "Subscribe", items: ["Monthly newsletter"] }, ], }, }; const EXPERTISE = [ { id: "tech", group: "Build", title: "Tech & Engineering", live: 47, days: 18, blurb: "Software, infra, ML, security and platform leaders for high-growth tech." }, { id: "design", group: "Build", title: "Design & UX Research", live: 23, days: 16, blurb: "Product designers, design systems leads, and research-led practitioners." }, { id: "product", group: "Build", title: "Product", live: 19, days: 21, blurb: "PMs and product leadership who can ship inside ambiguity." }, { id: "marketing", group: "Lead", title: "Marketing", live: 14, days: 17, blurb: "Growth, brand, content and demand-gen operators for B2B and consumer." }, { id: "csuite", group: "Lead", title: "C-Suite", live: 6, days: 41, blurb: "Founder, CEO, CTO, CPO and CFO searches for venture-backed companies." }, { id: "admin", group: "Operate", title: "Admin & Lifestyle", live: 11, days: 12, blurb: "Executive assistants, chiefs of staff and household operators." }, { id: "hrops", group: "Operate", title: "HR & Operations", live: 17, days: 19, blurb: "People leaders, recruiters, biz-ops and program managers." }, { id: "finance", group: "Operate", title: "Finance & Accounting", live: 12, days: 22, blurb: "Controllers, FP&A, CFOs and finance operators ready to scale." }, ]; const SERVICES = [ { num: "01", title: <>Recruiting & Staffing., blurb: "Permanent and contract hires across engineering, design, product and operations. We average 18 days to offer and close 91% of extended offers.", link: "Explore Recruiting", href: "#" }, { num: "02", title: <>Professional & Managed., blurb: "Embedded teams of senior specialists who execute critical initiatives or run ongoing operations end-to-end.", link: "Explore Managed", href: "#" }, { num: "03", title: <>Digital Workers., blurb: "An AI-fueled workforce of digital agents that automates repetitive work — so your humans can do the hard thinking.", link: "Explore Digital Workers", href: "digital-worker.html" }, ]; const PILLARS = [ { num: "01", title: <>Who we fuel., body: "Venture-backed startups, scale-ups, and innovation-led enterprises. Whether you're building your first engineering team or scaling a mature org, we deliver talent that fits on paper and in culture.", stats: [{ k: <>48hr, v: "to first slate" }, { k: <>18d, v: "median offer time" }] }, { num: "02", title: <>How we fuel., body: "Discovery, calibration, sourcing, vetting, present. We pair human judgment with proprietary AI sourcing that surfaces candidates outside the obvious channels — and removes the busywork that slows great recruiters down.", stats: [{ k: "5-step", v: "calibrated" }, { k: "AI-assisted", v: "sourcing + screening" }] }, { num: "03", title: <>Why we fuel., body: "We build legacies — not just fill roles. We close 91% of extended offers because we don't push the wrong fits. We invest in the long-term relationship with both sides, and that compounds.", stats: [{ k: <>91%, v: "offer accept" }, { k: <>10y+, v: "median client tenure" }] }, ]; const TESTIMONIALS = [ { quote: <>Fuel consistently takes the time to learn what's needed from an open role, how it fits within the team, and the qualities that will help a candidate succeed and thrive., name: "CHRO", role: "Think Tank · Executive Private Office", initials: "TT" }, { quote: <>Incredibly responsive, adaptable, and a valuable partner that delivers results., name: "Beth Mead", role: "Providence", initials: "BM" }, { quote: <>Continuous improvement is in your DNA. The experience and vision was exactly what I'd hoped for., name: "Casey Bayless", role: "Moss Adams · Recruiting Manager", initials: "CB" }, { quote: <>Fuel found the most effective candidates for us., name: "Director of Product Design", role: "Remitly", initials: "RT" }, { quote: <>Their ability to consistently present high-quality candidates tailored to our specific needs has been remarkable., name: "Marc", role: "Co-Founder & CTO", initials: "MC" }, ]; const CLIENT_WORDMARKS = [ { name: "Providence", render: () => Providence }, { name: "Moss Adams", render: () => MOSS ADAMS }, { name: "Appen", render: () => appen }, { name: "Remitly", render: () => Remitly }, { name: "Whitepages", render: () => whitepages }, { name: "Madrona", render: () => Madrona }, { name: "RealSelf", render: () => realself }, { name: "KnowLabs", render: () => knowlabs }, { name: "Pacagen", render: () => Pacagen }, ]; const JOBS_PREVIEW = [ { id: "FT-0481", title: "Staff Software Engineer, Platform", company: "Series C SaaS", loc: "Seattle, WA · Hybrid", type: "Direct", area: "Tech" }, { id: "FT-0476", title: "Senior Product Designer", company: "AI Health Startup", loc: "Remote (US)", type: "Direct", area: "Design" }, { id: "FT-0470", title: "Director of Product, Growth", company: "Consumer Marketplace", loc: "Bellevue, WA", type: "Direct", area: "Product" }, { id: "FT-0463", title: "Head of Recruiting", company: "Climate Tech", loc: "Seattle · Onsite", type: "Direct", area: "HR & Ops" }, ]; const RESOURCES = [ { kind: "Field Notes", title: "10 strategies for attracting top talent in a thin market", read: "5 min", date: "May 12" }, { kind: "Field Notes", title: "Streamlining the virtual onboarding process", read: "4 min", date: "Apr 29" }, { kind: "Candidates", title: "Affected by mass layoffs? Where to start and regain confidence", read: "6 min", date: "Apr 14" }, { kind: "Case Study", title: "How we built an engineering team from zero to 40", read: "8 min", date: "Mar 30" }, ]; const PROOF_STATS = [ { n: "48 hr", l: "to first candidate slate" }, { n: "18 d", l: "average time-to-offer" }, { n: "91%", l: "offer accept rate" }, { n: "300+", l: "active company partners" }, { n: "75+", l: "five-star reviews" }, { n: "100k", l: "podcast listeners" }, { n: "9", l: "specialty practices" }, { n: "10y+", l: "in market" }, ]; // ─── nav ───────────────────────────────────────────────────────────── function TopNav({ darkBg }) { const [open, setOpen] = useState(null); const closeT = useRef(null); const enter = (key) => { clearTimeout(closeT.current); setOpen(key); }; const leave = () => { closeT.current = setTimeout(() => setOpen(null), 120); }; return (
Fuel Talent For Candidates ›
clearTimeout(closeT.current)} onMouseLeave={leave} />
); } function MegaMenu({ open, onMouseEnter, onMouseLeave }) { const p = open && MEGA_PANELS[open]; return (
{p && (
{p.eyebrow}
{p.cols.map((c) => (
{c.head}
    {c.items.map((it) => { const label = typeof it === "string" ? it : it.label; const href = typeof it === "string" ? "#" : it.href; return
  • {label}
    • ; })}
))}
)}
); } // ─── hero ──────────────────────────────────────────────────────────── function Hero() { const videoRef = useRef(null); useEffect(() => { const v = videoRef.current; if (!v) return; v.muted = true; const tryPlay = () => v.play().catch(() => {}); tryPlay(); document.addEventListener("visibilitychange", tryPlay); return () => document.removeEventListener("visibilitychange", tryPlay); }, []); return (
); } // ─── proof bar ─────────────────────────────────────────────────────── function ProofBar() { const doubled = [...PROOF_STATS, ...PROOF_STATS]; return (
{doubled.map((it, i) => ( {it.n} {it.l} · ))}
); } // ─── intro (Apple "two-up" centered statement) ────────────────────── function Intro() { return (
Designed for ambition

We don't fill roles.
We build legacies.

For 10+ years we've connected Seattle's most ambitious companies with the people who shape what they become — from founding engineer to chief executive. We calibrate every search, present only candidates who fit, and close 91% of extended offers.

See how we work › Why founders choose Fuel
); } // ─── scroll-pinned product-reveal section (signature) ────────────── const REVEAL_STOPS = [ { stat: <>300+, phrase: <>People we've placed across Seattle's most ambitious teams. }, { stat: <>91%, phrase: <>Of extended offers, accepted — because we calibrate first. }, { stat: <>18d, phrase: <>Median time-to-offer. Fast, without shortcuts. }, ]; function ScrollReveal() { const wrapRef = useRef(null); const [stop, setStop] = useState(0); useEffect(() => { const update = () => { const el = wrapRef.current; if (!el) return; const r = el.getBoundingClientRect(); const total = Math.max(1, el.offsetHeight - window.innerHeight); const raw = Math.min(1, Math.max(0, -r.top / total)); // 3 stops over the section, each occupies ~1/3 const idx = Math.min(REVEAL_STOPS.length - 1, Math.floor(raw * REVEAL_STOPS.length)); setStop(idx); }; update(); window.addEventListener("scroll", update, { passive: true }); window.addEventListener("resize", update); return () => { window.removeEventListener("scroll", update); window.removeEventListener("resize", update); }; }, []); return (
); } // ─── services — Apple bento tiles ────────────────────────────────── function Services() { return (
Services

Talent that moves you forward.

Three ways to engage — calibrated to where you are, not where a packaged offering says you should be.

{SERVICES.map((s) => ( ))}
); } // ─── pillars — Who, How, Why ─────────────────────────────────────── function Pillars() { return (
Operating system

Three pillars, one promise.

Who we fuel. How we work. Why this compounds for the companies we partner with.

{PILLARS.map((p) => (
{p.num}

{p.title}

{p.body}

{p.stats.map((s, i) => (
{s.k}
{s.v}
))}
))}
); } // ─── expertise — filter tabs + tile grid ─────────────────────────── function Expertise() { const [filter, setFilter] = useState("All"); const groups = ["All", "Build", "Operate", "Lead"]; const filtered = useMemo( () => (filter === "All" ? EXPERTISE : EXPERTISE.filter((e) => e.group === filter)), [filter] ); return (
Expertise

Deep specialty, human-shipped.

Eight specialist practices, each led by a partner who's hired into the field they recruit for.

{groups.map((g) => ( ))}
{filtered.map((e) => (
{e.group} live

{e.title}

{e.blurb}

{e.live} roles · {e.days}d avg ›
))}
); } // ─── case study reel — Apple full-bleed media block ─────────────── function CaseReel() { const videoRef = useRef(null); useEffect(() => { const v = videoRef.current; if (!v) return; v.muted = true; v.play().catch(() => {}); }, []); return (
Inside the work

From zero to 40 in eleven months.

A profitable Series C health-tech company partnered with us on a build-out across platform, ML, and security. Forty hires shipped at 92% offer acceptance, without ever scaling beyond two embedded consultants.

40
hires shipped
11 mo
end-to-end
92%
offer accept
Read the full case study
); } // ─── testimonials — Apple single-quote stage ────────────────────── function Testimonials() { const [i, setI] = useState(0); const next = useCallback(() => setI((x) => (x + 1) % TESTIMONIALS.length), []); const prev = useCallback(() => setI((x) => (x - 1 + TESTIMONIALS.length) % TESTIMONIALS.length), []); useEffect(() => { const t = setInterval(next, 7500); return () => clearInterval(t); }, [next]); const q = TESTIMONIALS[i]; return (
Voices

What our partners say.

"

{q.quote}

{q.initials}
{q.name}
{q.role}
{TESTIMONIALS.map((_, k) => ( setI(k)} /> ))}
); } // ─── clients band ──────────────────────────────────────────────────── function Clients() { return (

Trusted by Seattle's most ambitious teams

{CLIENT_WORDMARKS.map((c) => (
{c.render()}
))}
); } // ─── jobs preview ──────────────────────────────────────────────────── function Jobs() { const [q, setQ] = useState(""); const [loc, setLoc] = useState(""); const filtered = useMemo(() => { const ql = q.toLowerCase(), ll = loc.toLowerCase(); return JOBS_PREVIEW.filter((j) => (!ql || j.title.toLowerCase().includes(ql) || j.area.toLowerCase().includes(ql)) && (!ll || j.loc.toLowerCase().includes(ll)) ); }, [q, loc]); return (
Live board

Where careers get fueled.

Every role is calibrated directly with the hiring manager — no recycled listings, no surprises.

e.preventDefault()}>
{filtered.map((j) => ( {j.id}
{j.title}
{j.company} · {j.area}
{j.loc} {j.type} › ))}
Open the full board
); } // ─── resources + podcast ──────────────────────────────────────────── function Resources() { const [playing, setPlaying] = useState(false); const [pos, setPos] = useState(0.32); useEffect(() => { if (!playing) return; const t = setInterval(() => setPos((p) => (p >= 0.99 ? 0 : p + 0.005)), 200); return () => clearInterval(t); }, [playing]); const wave = useMemo(() => Array.from({ length: 48 }).map((_, i) => 6 + Math.sin(i * 0.5) * 4 + (i % 3) * 4 + Math.random() * 5), []); return (
Resources

Fuel for thought.

Hiring playbooks, candidate guides, case studies and a podcast — written by the team that runs the searches.

{RESOURCES.map((r) => (
{r.kind}·{r.date}

{r.title}

{r.read} ›
 ))}
Latest podcast · Ep. 047
"What Fuels You" — Shauna Swerland, host.
{wave.map((h, i) => )}
{Math.floor(pos * 42)}:{String(Math.floor((pos * 42 * 60) % 60)).padStart(2, "0")} / 42:18
75+
five-star reviews
100k
listeners
); } // ─── CTA ────────────────────────────────────────────────────────── function CTABand() { return (

We build legacies,
not just fill roles.

Haven't found the right role? We'll help you find it. Hiring? We'll deliver people who change what's possible.

Find a job › Let's talk
); } // ─── footer ─────────────────────────────────────────────────────── function Footer() { return ( ); } // ─── App root ──────────────────────────────────────────────────── function App() { return ( <>