/* ============================================================ Reynard Marketing — homepage sections Single scrolling page. Every word sits on glass; bare engraving shows only in the gaps (atmosphere bands). ============================================================ */ const MAXW = 1180; const smoothTo = (id) => { const root = document.querySelector("#site-scroll"); const el = document.getElementById(id); if (!root || !el) return; root.scrollTo({ top: el.offsetTop - 90, behavior: "smooth" }); }; /* ---------------- NAV ---------------- */ function Nav({ onBook, links }) { const [scrolled, setScrolled] = React.useState(false); const [open, setOpen] = React.useState(false); React.useEffect(() => { const el = document.querySelector("#site-scroll"); const fn = () => setScrolled((el?.scrollTop || 0) > 30); el?.addEventListener("scroll", fn); return () => el?.removeEventListener("scroll", fn); }, []); return (
{ e.preventDefault(); smoothTo("top"); }} style={{ display: "flex" }}>
{Icon.phone({ s: 18 })} (800) 555-0199 Book a call
{open && ( {links.map((l) => ( { e.preventDefault(); smoothTo(l.id); setOpen(false); }} style={{ padding: "13px 16px", color: "var(--text-on-dark-soft)", textDecoration: "none", fontFamily: "var(--font-body)", fontWeight: 500, borderRadius: "var(--r-sm)" }}>{l.label} ))} )}
); } function NavLink({ label, target }) { const [h, setH] = React.useState(false); return ( setH(true)} onMouseLeave={() => setH(false)} onClick={(e) => { e.preventDefault(); smoothTo(target); }} style={{ fontFamily: "var(--font-body)", fontWeight: 500, fontSize: "0.96rem", color: h ? "var(--text-on-dark)" : "var(--text-on-dark-soft)", textDecoration: "none", transition: "color var(--dur)", }}>{label} ); } /* ---------------- HERO ---------------- */ function Hero({ onBook, layout, ticker, motion }) { const centered = layout === "centered"; return (
Lead-gen for local service businesses

We hunt.
You book.

Reynard Marketing brings local service businesses more booked jobs — through PPC, SEO, websites, and funnels built to track every dollar back to a real phone call.

Book a free strategy call {Icon.arrow({ s: 18 })} smoothTo("results")}>See the catch
{[["Booked jobs", "the metric we lead with"], ["Every $", "tracked to a real phone call"], ["24h", "to your first strategy call"]].map(([n, l]) => (
6 ? "1.15rem" : "1.5rem", color: "var(--amber-400)", lineHeight: 1.1 }}>{n}
{l}
))}
{!centered && ( )}
); } /* ---------------- LIVE CALL-TRACKING CARD ---------------- */ const ALL_LEADS = [ { type: "Phone call", icon: Icon.phone, channel: "Google PPC · “emergency plumber”", status: "Booked", value: 1840 }, { type: "Form submission", icon: Icon.form, channel: "Website · “book online” form", status: "Booked", value: 980 }, { type: "Website lead", icon: Icon.globe, channel: "Local SEO · map pack", status: "Booked", value: 640 }, { type: "Form submission", icon: Icon.form, channel: "Funnel · spring AC tune-up", status: "Quoted", value: 320 }, { type: "Phone call", icon: Icon.phone, channel: "Google PPC · “water heater repair”", status: "Booked", value: 2200 }, { type: "Website lead", icon: Icon.globe, channel: "Local SEO · “roof leak near me”", status: "Booked", value: 1450 }, { type: "Phone call", icon: Icon.phone, channel: "Chat widget · “need a quote”", status: "Quoted", value: 410 }, ]; const BASE = ALL_LEADS.slice(0, 4); const BASE_BOOKED = BASE.filter((l) => l.status === "Booked").length; const BASE_TOTAL = BASE.filter((l) => l.status === "Booked").reduce((a, l) => a + l.value, 0); function CallTrackingCard({ ticker }) { const [rows, setRows] = React.useState(BASE); const [total, setTotal] = React.useState(BASE_TOTAL); const [booked, setBooked] = React.useState(BASE_BOOKED); const [pulse, setPulse] = React.useState(false); const idx = React.useRef(4); React.useEffect(() => { if (!ticker) { setRows(BASE); setTotal(BASE_TOTAL); setBooked(BASE_BOOKED); return; } const iv = setInterval(() => { // loop in a believable range — reset after a full pass so the sample // never climbs into implausible territory if (idx.current >= ALL_LEADS.length + 4) { idx.current = 4; setRows(BASE); setTotal(BASE_TOTAL); setBooked(BASE_BOOKED); return; } const next = ALL_LEADS[idx.current % ALL_LEADS.length]; idx.current += 1; setRows((r) => [next, ...r].slice(0, 4)); if (next.status === "Booked") { setTotal((t) => t + next.value); setBooked((b) => b + 1); } setPulse(true); setTimeout(() => setPulse(false), 700); }, 3200); return () => clearInterval(iv); }, [ticker]); const fmt = (n) => "$" + n.toLocaleString(); return (
Your lead dashboard SAMPLE
{booked} jobs booked {fmt(total)} tracked
{rows.map((lead, i) => (
{lead.icon({ s: 16 })}
{lead.type}
{lead.channel}
{lead.status} {fmt(lead.value)}
))}
Example dashboard · your real leads land here {Icon.waveform({ s: 22 })}
); } /* ---------------- PROBLEM ---------------- */ function Problem({ motion }) { const vanity = ["Impressions", "Clicks", "“Engagement”", "Reach", "Likes", "Page views"]; return (
The problem

Most agencies can’t tell you what your money did.

You get a report full of numbers that look busy and prove nothing. Impressions. Clicks. “Engagement.” None of it tells you whether the phone rang, or whether the job got booked. You’re paying for motion, not results.

A booked job is the only number that pays you back. That’s the only one we count.

What other agencies report
{vanity.map((v) => (
{Icon.eyeOff({ s: 18 })} {v} vanity
))}
{Icon.check({ s: 18 })} Booked jobs what we count
); } Object.assign(window, { MAXW, smoothTo, Nav, Hero, CallTrackingCard, Problem });