/* ========================================================= AI Employees Overview — page composition (6 sections + footer) The roster page. Near-white canvas, ink panels, one cobalt accent. ========================================================= */ /* ---------- 1 · Hero (team lineup) ---------- */ function HeroOv() { const ref = useReveal(); const order = ["summer", "april", "taylor", "avery", "riley", "lily"]; return (
The AI Employees

Meet the team that never clocks out.

Six voice AI employees for sales and service — answering calls, working leads, and booking appointments around the clock.

Book a Demo Hear It Work
{/* Six-headshot team lineup */}
{order.map((id, i) => { const a = AGENT_BY[id]; return (
{a.name}
 ); })}
); } /* ---------- 2 · The Roster (grouped) ---------- */ function RosterOv() { const ref = useReveal(); const groups = [ { label: "Sales", ids: ["summer", "lily"] }, { label: "Service", ids: ["april", "taylor", "riley"] }, { label: "Front desk", ids: ["avery"] }, ]; return (

The full lineup

The right employee for every job.

{groups.map((g) => (
{g.label} {g.ids.length} {g.ids.length === 1 ? "agent" : "agents"}
{g.ids.map((id) => )}
))}
); } /* ---------- 3 · What Every Employee Does ---------- */ function EveryOv() { const ref = useReveal(); const items = [ "Makes or answers real phone calls — voice, not just text", "Books into your CRM and service scheduler", "Hands off to a live rep the moment a deal needs one", "Plugs into your CRM, DMS, phone, and scheduler", "Works around the clock — nights, weekends, holidays", "TCPA-compliant, discloses AI if asked", ]; return (

Every one of them

What every employee does.

{items.map((it, i) => (
{it}
))}
); } /* ---------- 4 · How They Work Together (lifecycle band) ---------- */ function LifecycleOv() { const ref = useReveal(); // Customer lifecycle order across the dealership const stages = [ { id: "avery", stage: "Reception" }, { id: "summer", stage: "Sales" }, { id: "lily", stage: "Service-to-sales" }, { id: "taylor", stage: "Inbound service" }, { id: "april", stage: "Service win-back" }, { id: "riley", stage: "Recall" }, ]; const [active, setActive] = useState(prefersReducedMotion ? -1 : 0); useEffect(() => { if (prefersReducedMotion) return; const t = setInterval(() => setActive((a) => (a + 1) % stages.length), 1400); return () => clearInterval(t); }, []); return (

Better together

Cover the full lifecycle.

Run one, or stack several. Summer reactivates sales, April recovers service, Taylor catches every inbound call, Avery covers the desk — and 2+ agents automatically unlock a bundle discount.

{/* Lifecycle band */}
{/* routing line behind the row */}
{stages.map((s, i) => { const a = AGENT_BY[s.id]; const on = i === active; return (
{a.name}
{s.stage}
 ); })}
{/* Bundle note */}
Run 2+ employees and a bundle discount unlocks automatically.
); } /* ---------- 5 · Proof (count-up strip) ---------- */ function ProofStatOv({ value, suffix, prefix, label }) { const [v, ref] = useCountUp(value, { duration: 1500 }); return (
{(prefix || "") + Math.round(v) + (suffix || "")}
{label}
); } function ProofOv() { const ref = useReveal(); return (

The proof

<1%
of customers know it's AI
Hear the actual calls — judge for yourself. Hear It Work
); } /* ---------- 6 · Closing CTA ---------- */ function ClosingOv() { const ref = useReveal(); const order = ["summer", "april", "taylor", "avery", "riley", "lily"]; return (
{order.map((id, i) => ( ))}

Build your AI team.

Book a Demo Hear It Work
); } /* ---------- Footer ---------- */ function FooterOv() { return ( ); } /* ---------- App ---------- */ function OverviewApp() { return (
); } ReactDOM.createRoot(document.getElementById("root")).render();