/* Workfloor — Page sections (sections.jsx) Editorial layout, Podium-influenced rhythm, Workfloor brand ============================================================= */ const { useState, useEffect, useRef } = React; /* ---------------- Reveal-on-scroll hook ---------------- */ const useReveal = () => { const ref = useRef(null); useEffect(() => { if (!ref.current) return; const obs = new IntersectionObserver( (ents) => ents.forEach((e) => {if (e.isIntersecting) {e.target.classList.add("in");obs.unobserve(e.target);}}), { threshold: 0.12, rootMargin: "0px 0px -60px 0px" } ); obs.observe(ref.current); return () => obs.disconnect(); }, []); return ref; }; /* ---------------- NAV ---------------- */ const INDUSTRIES = [ { label: "HVAC", href: "hvac.html" }, { label: "Oil & Gas", href: "oil-and-gas.html" }, { label: "Roofing", href: "roofing.html" }, { label: "Electrical", href: "electrical.html" }, { label: "Plumbing", href: "plumbing.html" }, { label: "Painting", href: "painting.html" }, ]; const ChevronDown = () => ( ); const ArrowRight = () => ( ); const Nav = ({ onWatchDemo }) => { const [scrolled, setScrolled] = useState(false); const [openMenu, setOpenMenu] = useState(null); const navRef = useRef(null); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 12); window.addEventListener("scroll", onScroll); return () => window.removeEventListener("scroll", onScroll); }, []); useEffect(() => { if (!openMenu) return; const onKey = (e) => { if (e.key === "Escape") setOpenMenu(null); }; const onClick = (e) => { if (navRef.current && !navRef.current.contains(e.target)) setOpenMenu(null); }; document.addEventListener("keydown", onKey); document.addEventListener("mousedown", onClick); return () => { document.removeEventListener("keydown", onKey); document.removeEventListener("mousedown", onClick); }; }, [openMenu]); const toggle = (menu) => setOpenMenu(openMenu === menu ? null : menu); const PANEL = { position: "absolute", top: "calc(100% + 10px)", background: "rgba(10,16,28,0.97)", backdropFilter: "blur(18px)", WebkitBackdropFilter: "blur(18px)", border: "1px solid rgba(255,255,255,0.09)", borderRadius: 14, boxShadow: "0 24px 56px rgba(0,0,0,0.55)", zIndex: 200, animation: "wf-dd-in 0.2s cubic-bezier(0.2,0.8,0.2,1) both" }; const btnStyle = (active) => ({ display: "inline-flex", alignItems: "center", gap: 6, fontSize: 13, color: active ? "#F5F3EE" : "#9AAABB", padding: "6px 14px", fontWeight: 500, borderRadius: 100, transition: "color 0.2s", background: "transparent", border: "none", cursor: "pointer", fontFamily: "var(--font-display)" }); return (
); }; /* ---------------- HERO — cinematic intro, then centered hero over video ---------------- */ const Hero = ({ headline, accentMix, onIntroChange }) => { // Parse headline: split off final clause as italic amber const [main, italic] = (() => { const parts = headline.split("|"); if (parts.length === 2) return [parts[0].trim(), parts[1].trim()]; return [headline, ""]; })(); // Intro state: "playing" → cinematic plays, only nav visible. // "done" → hero content revealed. Skipped if returning visitor. const seenIntro = (() => { try { return localStorage.getItem("wf-intro-seen") === "1"; } catch (e) { return false; } })(); const [intro, setIntro] = useState(seenIntro ? "done" : "playing"); const [muted, setMuted] = useState(true); const [loaded, setLoaded] = useState(false); const [soundPrompt, setSoundPrompt] = useState(false); const [isMobile, setIsMobile] = useState(false); const [videoEnded, setVideoEnded] = useState(false); const videoRef = useRef(null); const heroRef = useRef(null); const endedRef = useRef(false); const restartVideo = () => { const v = videoRef.current; if (!v) return; endedRef.current = false; setVideoEnded(false); // Return to the fresh-visit view: scroll to top so the headline hides // and the video plays full-screen with nothing over it. const root = document.scrollingElement || document.documentElement; if (root) root.scrollTop = 0; window.scrollTo(0, 0); setReveal(0); v.currentTime = 0; v.play().catch(() => {}); }; // Mobile detection — on phones we skip the heavy cinematic entirely and // show the static HVAC poster image instead. useEffect(() => { const mq = window.matchMedia("(max-width: 768px)"); const update = () => setIsMobile(mq.matches); update(); mq.addEventListener("change", update); return () => mq.removeEventListener("change", update); }, []); // On mobile, never run the cinematic intro — jump straight to hero content. useEffect(() => { if (isMobile && intro === "playing") finishIntroSilent(); }, [isMobile]); // Notify parent (App) so it can hide page chrome / lock scroll during intro useEffect(() => { onIntroChange && onIntroChange(intro); }, [intro]); // 0..1 — how far the scroll-driven hero reveal has progressed. const [reveal, setReveal] = useState(0); const finishIntro = () => { setIntro("done"); setSoundPrompt(false); try { localStorage.setItem("wf-intro-seen", "1"); } catch (e) {} }; // Mobile / returning visitor: jump straight to the static hero. const finishIntroSilent = () => { setIntro("done"); setSoundPrompt(false); }; // Lock scroll while the cinematic plays. The page sits at the top with only // the video + nav visible until the cinematic ends or the user skips. useEffect(() => { if (intro === "playing") { const prev = document.body.style.overflow; document.body.style.overflow = "hidden"; window.scrollTo(0, 0); return () => { document.body.style.overflow = prev; }; } }, [intro]); // Once the cinematic is done, the hero content is revealed by SCROLLING: // the headline, copy, and CTA rise up from the bottom and settle into place, // each tied directly to scroll position (not a one-shot toggle). useEffect(() => { if (intro !== "done" || isMobile) return; const onScroll = () => { const el = heroRef.current; if (!el) return; const vh = window.innerHeight; const dist = vh * 0.85; // scroll needed to fully reveal // Body is the scroll container (overflow-x:hidden), so window.scrollY // can be 0 — derive scroll from the section's position instead. const scrolled = Math.max(0, -el.getBoundingClientRect().top); const p = Math.max(0, Math.min(1, scrolled / dist)); setReveal(p); // Pause the bg video once the hero has fully scrolled away. const v = videoRef.current; if (v) { const past = scrolled > vh * 1.05; // Never auto-resume a video that has finished its single play-through. if (past && !v.paused) v.pause(); else if (!past && v.paused && !endedRef.current) v.play().catch(() => {}); } }; onScroll(); window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, [intro, isMobile]); // Mobile: no scroll trick — content is shown immediately. useEffect(() => { if (isMobile) setReveal(1); }, [isMobile]); const toggleSound = () => { const v = videoRef.current; if (!v) return; const next = !muted; v.muted = next; setMuted(next); setSoundPrompt(false); if (!next) { v.play().catch(() => {}); } }; const isPlaying = intro === "playing"; const contentVisible = intro === "done"; // Per-element reveal progress (staggered) + rise-from-bottom transform. const lp = (offset) => { if (isMobile) return 1; if (!contentVisible) return 0; const span = 1 - offset; return Math.max(0, Math.min(1, (reveal - offset) / span)); }; const rise = (offset, dist = 70) => { const p = lp(offset); return { opacity: p, transform: `translateY(${(1 - p) * dist}px)`, transition: "opacity 0.12s linear, transform 0.12s linear" }; }; // Show the big "turn on sound" prompt for the first few seconds of the cinematic useEffect(() => { if (isPlaying && !isMobile && muted) { setSoundPrompt(true); const t = setTimeout(() => setSoundPrompt(false), 6000); return () => clearTimeout(t); } }, [isPlaying, isMobile]); return (
{/* Sticky stage: video + content stay pinned full-screen while the reveal plays out over the section's scroll runway. */}
{/* Full-bleed cinematic / background video (desktop only) */} {!isMobile && } {/* Static HVAC poster background (mobile) */} {isMobile &&
} {/* Loading shimmer — covers the black gap before the video first paints */} {!isMobile && !loaded &&
} {/* Tint overlay — lighter during cinematic, full wash once hero is shown */}
{/* Drifting amber glow (hero only) */}
{/* ===== BIG SOUND PROMPT (centered, first seconds of cinematic) ===== */} {isPlaying && soundPrompt && muted && } {/* ===== CINEMATIC CONTROLS (only while playing) ===== */} {isPlaying &&
{/* Sound toggle */} {/* Skip */}
} {/* ===== HERO CONTENT (rises from the bottom, tied to scroll) ===== */} {/* ===== RESTART VIDEO (after the cinematic has finished) ===== */} {!isMobile && contentVisible && videoEnded && } {/* ===== SCROLL CUE — invites the scroll-reveal; click jumps to Built different ===== */} {!isPlaying && }
); }; /* ---------------- LOGO STRIP — marquee ---------------- */ const LogoStrip = ({ light = false }) => { const items = ["ServiceTitan", "Jobber", "HouseCall Pro", "Twilio", "Zapier", "Calendly", "QuickBooks", "Slack", "Stripe"]; const fg = light ? "#3d5268" : "#3d5268"; const bg = light ? "#F5F2EE" : "#03070d"; const lab = light ? "#9AAABB" : "#1e3045"; const div = light ? "#9AAABB" : "#0f1e2e"; return (
Connects to
{[...items, ...items].map((name, i) => {name} ◇ )}
); }; /* ---------------- HOW IT WORKS — light, big numerals ---------------- */ const HowItWorks = () => { const ref = useReveal(); const STEPS = [ { n: "01", title: "We map your operation.", body: "30 minutes. We look at where calls, jobs, and revenue are slipping — which leads go unanswered, which slots go unfilled, which tasks eat your day. We tell you exactly what we'd build and what it would recover. If we're not the right fit, we'll say so." }, { n: "02", title: "We build your system.", body: "We connect to your existing CRM — whatever you're already using — and build everything to your operation. Your service area, your pricing, how you handle customers. End-to-end tested before anything goes live. You approve the setup. Then it runs." }, { n: "03", title: "It learns. You never fall behind.", body: "The system learns from your business over time — your call patterns, your peak seasons, what works in your market. Workfloor's team reviews performance every month. Month 3 runs sharper than month 1. You never manage it. You just see the results." }]; return (

How it works

Three steps.
One running system.

Most contractors are running within a week of the discovery call. No software to learn, no dashboards to babysit. The system gets handed back to us. We run it, you see results.

{STEPS.map((step, i) =>
{step.n}
STEP {step.n}

{step.title}

{step.body}

)}
); }; /* ---------------- STATS — editorial big numbers ---------------- */ const Stats = () => { const STATS = [ { stat: "1 in 4", label: "Calls go unanswered", sub: "In the average HVAC shop. Owners guess 8%. The gap is what your competitor lives in." }, { stat: "<60s", label: "System response time", sub: "Every missed contact gets a response. Day or night, on a job or off the clock." }, { stat: "8×", label: "Conversion drops after 5 min", sub: "Leads go cold fast. The system fires before they dial the next number." }, { stat: "292%", label: "After-hours booking lift", sub: "From 12/month to 47/month — documented in field deployments." }, { stat: "78%", label: "Pick the first responder", sub: "Speed to lead is the only advantage that matters at 9pm." }, { stat: "3 weeks", label: "Avg time to first results", sub: "The system starts working from day one. Most contractors see their first recovered lead in days." }]; const ref = useReveal(); return (

Real results · Real businesses

The numbers behind every missed call.

{STATS.map((card, i) =>
{card.stat}
{card.label}

{card.sub}

)}

Industry data from ACCA, Hatch, and documented field deployments.

); }; /* ---------------- BUILT DIFFERENT — FAQ-style accordion + sticky mockup Two-column: left side is a vertical accordion (one open at a time), right side is a sticky mockup that swaps to match the open row. ---------------------------------------------------------------------- */ const BuiltDifferent = () => { const FEATURES = [ { title: "Trained on your shop, not a template.", body: "Every system is built from your call patterns, your pricing, your service area. It runs the way you would — not the way a generic vendor thinks an HVAC shop should.", mockKey: "approval" }, { title: "You don't manage it. We do.", body: "No dashboards to babysit. We run the system, tune it monthly, and update it as your operation changes. You see the results in a morning report.", mockKey: "morning" }, { title: "Custom voice. Custom logic.", body: "It speaks the way you speak. It handles after-hours the way you'd handle after-hours. And it hands off to you the moment something needs your judgment.", mockKey: "missed" }, { title: "Plugs into what you already run.", body: "ServiceTitan. Jobber. HouseCall Pro. Twilio. We connect to your existing CRM, dispatch, and phones — without forcing you to switch.", mockKey: "tracking" }]; const [open, setOpen] = useState(0); const [progress, setProgress] = useState(0); // 0..1 progress through whole section const [isMobile, setIsMobile] = useState(false); const sectionRef = useRef(null); const userClickedRef = useRef(false); const userClickTimerRef = useRef(null); const lastChangeRef = useRef(0); const lastIdxRef = useRef(0); // Detect mobile — disables the scroll-cycle pattern entirely. useEffect(() => { const mq = window.matchMedia("(max-width: 980px)"); const update = () => setIsMobile(mq.matches); update(); mq.addEventListener("change", update); return () => mq.removeEventListener("change", update); }, []); // Per-card scroll "weight" — the last card gets HALF the runway of the // others so users can naturally scroll past once they've seen it. const WEIGHTS = FEATURES.map((_, i) => i === FEATURES.length - 1 ? 0.5 : 1); const TOTAL_W = WEIGHTS.reduce((a, b) => a + b, 0); const THRESHOLDS = (() => { const out = []; let acc = 0; for (let k = 0; k < WEIGHTS.length; k++) { out.push(acc / TOTAL_W); acc += WEIGHTS[k]; } return out; })(); // Scroll-driven (desktop only): derive active index + smooth progress from // how far we've scrolled THROUGH the section. After each transition, briefly // lock further changes so users can't blow through in one flick. useEffect(() => { if (isMobile) return; const onScroll = () => { if (userClickedRef.current) return; const el = sectionRef.current; if (!el) return; const rect = el.getBoundingClientRect(); const vh = window.innerHeight; // Tiny lead-in (~10vh) — the section locks visually right when the // headline + cards layout is fully in view, then the cycle begins. const leadIn = vh * 0.1; const total = el.offsetHeight - vh - leadIn; if (total <= 0) return; const scrolled = Math.max(0, Math.min(total, -rect.top - leadIn)); const p = scrolled / total; setProgress(p); // Find active card by walking the uneven thresholds. let idx = 0; for (let k = FEATURES.length - 1; k >= 0; k--) { if (p >= THRESHOLDS[k]) {idx = k;break;} } if (idx === lastIdxRef.current) return; const now = performance.now(); if (now - lastChangeRef.current < 520) return; lastChangeRef.current = now; lastIdxRef.current = idx; setOpen(idx); if (history.replaceState) { history.replaceState(null, "", `#built-${idx + 1}`); } }; onScroll(); window.addEventListener("scroll", onScroll, { passive: true }); window.addEventListener("resize", onScroll); return () => { window.removeEventListener("scroll", onScroll); window.removeEventListener("resize", onScroll); }; }, [isMobile]); // Per-card progress (0..1 within that card's slice) — powers progress bars. const cardLocalProgress = (i) => { const start = THRESHOLDS[i]; const end = i < FEATURES.length - 1 ? THRESHOLDS[i + 1] : 1; if (progress <= start) return 0; if (progress >= end) return 1; return (progress - start) / (end - start); }; const onRowClick = (i) => { userClickedRef.current = true; lastIdxRef.current = i; lastChangeRef.current = performance.now(); setOpen(i); if (history.replaceState) history.replaceState(null, "", `#built-${i + 1}`); const el = sectionRef.current; if (el && !isMobile) { const vh = window.innerHeight; const leadIn = vh * 0.1; const total = el.offsetHeight - vh - leadIn; // Use the same uneven thresholds so clicks match the scroll mapping. const sliceStart = THRESHOLDS[i]; const sliceEnd = i < FEATURES.length - 1 ? THRESHOLDS[i + 1] : 1; const target = el.offsetTop + leadIn + total * ((sliceStart + sliceEnd) / 2); window.scrollTo({ top: target, behavior: "smooth" }); } if (userClickTimerRef.current) clearTimeout(userClickTimerRef.current); userClickTimerRef.current = setTimeout(() => {userClickedRef.current = false;}, 1100); }; /* ============== MOBILE: vertical stack of static cards — no scroll-cycle ============== */ if (isMobile) { return (

Built different

AI made for all of HVAC is made for none.

{FEATURES.map((f, i) => { const Mock = MOCKUPS[f.mockKey].Comp; return (
Feature {String(i + 1).padStart(2, "0")}

{f.title}

{f.body}

); })}
); } /* ============== DESKTOP: scroll-locked stepper ============== */ return (
{/* Sticky stage: stays locked in view as the user scrolls through the section */}
{/* Header */}

Built different

AI made for all of HVAC is made for none.

{/* Two-column: compact accordion + sticky mockup */}
{/* Left: compact accordion card */}
{FEATURES.map((f, i) => { const isOpen = open === i; const isLast = i === FEATURES.length - 1; return (
{/* Active progress bar across top of open row */} {isOpen &&
}

{f.body}

); })}
{/* Right: mockup card — cross-fades through states */}
{FEATURES.map((f, i) => { const Mock = MOCKUPS[f.mockKey].Comp; const isActive = open === i; const isPrev = i < open; return (
); })}
); }; /* ---------------- FEATURE DEEP DIVE — alternating layout ---------------- */ const FeatureDeepDive = () => { const FEATURES = [ { eyebrow: "Always-on", title: <>Answers every lead within 60 seconds., body: "Calls and texts. Day, night, weekends, holidays. The system picks up, qualifies the lead, and books the right slot — without you noticing.", bullets: ["24/7 voice + SMS", "Triages by urgency", "Never sounds like a bot"], mockKey: "missed" }, { eyebrow: "Self-healing schedule", title: <>Fills your cancellations from a waitlist., body: "When a slot opens, the system fires through your waitlist in priority order. Most slots refill before you've heard about the cancellation.", bullets: ["Instant waitlist trigger", "Smart customer match", "Recovers $300–$500 per slot"], mockKey: "booking" }, { eyebrow: "Owner-in-the-loop", title: <>Holds the high-stakes calls for you., body: "Quotes above your threshold, after-hours emergencies, anything unusual — held for your approval. One tap on your phone. Never goes off the rails.", bullets: ["Custom approval rules", "Mobile-first review", "Audit trail on every action"], mockKey: "approval" }]; return (

What the system does

Three jobs. Done relentlessly.

{FEATURES.map((f, i) => {const Mock = MOCKUPS[f.mockKey].Comp; const reverse = i % 2 === 1; return (

{f.eyebrow}

{f.title}

{f.body}

    {f.bullets.map((b) =>
  • {b}
    • )}
); })}
); }; /* ---------------- MOCKUP GALLERY — tabbed switcher ---------------- */ const MockupGallery = () => { const [active, setActive] = useState("approval"); const Mock = MOCKUPS[active].Comp; return (

A look inside

Five views. One system.

You don't manage these screens. We do.  They exist so you can see what the system is doing.

{Object.entries(MOCKUPS).map(([k, v]) => )}

{MOCKUPS[active].desc}

); }; /* ---------------- TESTIMONIALS — marquee cards (Podium-style) ---------------- */ const Testimonials = () => { const PREVIEWS = [ { snippet: "Three weeks in and we'd already booked four jobs we would've missed entirely last quarter and never known it.", who: "Owner", where: "Cedar Rapids, IA", initials: "M.R." }, { snippet: "The morning report is the best part. I know exactly what happened overnight without opening a thing.", who: "Owner", where: "Des Moines, IA", initials: "K.L." }, { snippet: "Filled a same-day cancellation in four minutes. I wasn't even at my phone. That paid for the year.", who: "Ops Lead", where: "Quad Cities", initials: "J.A." }]; return (

The results

What contractors say once the phone stops ruling their day.

Our customers' numbers are their own — recovered jobs, after-hours bookings, hours handed back. We share the full stories, references, and the real figures directly with owners weighing it for their own shop.

{/* Gated preview cards — blurred, "verified customer" chip, unlock on contact */}
{PREVIEWS.map((p, i) =>
Verified customer

"{p.snippet}"

{p.initials}
{p.who} · Lindgren HVAC
{p.where}
)}
{/* Contact CTA */}

See the full results and talk to a customer.

We'll walk you through the real numbers and connect you with a shop running Workfloor so you can hear it firsthand.

Contact us →
); }; /* ---------------- FAQ ---------------- */ const FAQ = () => { const [open, setOpen] = useState(0); const Q = [ { q: "Do I need to learn new software?", a: "No. We connect to your existing CRM — ServiceTitan, Jobber, HouseCall Pro, whatever you're already running. The system lives in the background. You get a morning report, an approval ping when something needs you, and that's it." }, { q: "Will my customers know they're talking to AI?", a: "It doesn't sound like a bot, and it doesn't pretend to be a human either. It introduces itself as your after-hours line. Every interaction is logged and reviewable. We tune the voice and tone to match how you'd actually talk." }, { q: "What if I want to take a call myself?", a: "You always can. The system hands off cleanly the moment you pick up. It also holds anything outside your approval thresholds — high-dollar quotes, unusual requests — so you decide the high-stakes stuff." }, { q: "How much does it cost?", a: "Scoped on the discovery call. We don't publish pricing because we don't sell a package — every system is built to your operation. Most contractors recover the cost in the first 60 days from after-hours and waitlist alone." }, { q: "How long does setup take?", a: "Within a month you will have leads being handled 24/7. The discovery call is week zero. Build and test happens in week one and two. You approve, then we flip it on. Most contractors see their first recovered lead in days." }, { q: "What if it's not a fit?", a: "We'll tell you on the discovery call. If we can't find at least three concrete revenue gaps to fix, we'll say so. There's no obligation after the call." }]; return (

Common questions

Things contractors ask before signing.

Don't see yours? Email contact@getworkfloor.com — usually a same-day reply.

{Q.map((item, i) =>
{item.a}
)}
); }; /* ---------------- BOOK CALL ---------------- */ const BookCallSection = () => { const [form, setForm] = useState({ business: "", name: "", email: "", phone: "", crm: "" }); const [submitted, setSubmitted] = useState(false); const [errors, setErrors] = useState({}); const inputStyle = { width: "100%", padding: "13px 16px", background: "#fff", border: "2px solid var(--wf-border-cream)", borderRadius: 8, fontSize: 14.5, color: "var(--wf-navy-700)", outline: "none", boxSizing: "border-box", fontFamily: "var(--font-body)", transition: "border-color 0.2s" }; const labelStyle = { display: "block", fontSize: 13, fontWeight: 600, color: "var(--wf-navy-700)", marginBottom: 8, fontFamily: "var(--font-display)" }; const handle = (e) => {e.preventDefault(); const errs = {}; ["business", "name", "email", "phone", "crm"].forEach((k) => {if (!form[k]) errs[k] = true;}); if (form.email && !form.email.includes("@")) errs.email = true; setErrors(errs); if (Object.keys(errs).length === 0) setSubmitted(true); }; const onChange = (k, v) => {setForm({ ...form, [k]: v });if (errors[k]) setErrors({ ...errors, [k]: false });}; return (

Book a discovery call

30 minutes. Honest map of your operation.

We'll map your operation, identify where AI makes the most sense, and walk you through exactly what we'd build. You'll leave with a clear picture — whether we work together or not.

{[ { n: "1", t: "We review your business before the call." }, { n: "2", t: "30-minute discovery — we map your operation." }, { n: "3", t: "Proposal in your inbox within 24 hours." }]. map((s) =>
{s.n}
{s.t}
)}
The Discovery Guarantee

In 30 minutes, we'll map exactly where your business is losing revenue. If we can't find at least three concrete gaps, we'll say so. No obligation after the call.

{submitted ?

Got it. Talk soon.

We'll review your business and email back within 4 hours (weekdays) with two times that work.

:
{[ { k: "business", l: "Business name", ph: "Smith's HVAC", t: "text" }, { k: "name", l: "Your name", ph: "John Smith", t: "text" }]. map((f) =>
onChange(f.k, e.target.value)} onFocus={(e) => e.target.style.borderColor = "var(--wf-amber)"} onBlur={(e) => e.target.style.borderColor = errors[f.k] ? "var(--wf-red)" : "var(--wf-border-cream)"} />
)}
onChange("email", e.target.value)} onFocus={(e) => e.target.style.borderColor = "var(--wf-amber)"} onBlur={(e) => e.target.style.borderColor = errors.email ? "var(--wf-red)" : "var(--wf-border-cream)"} />
onChange("phone", e.target.value)} onFocus={(e) => e.target.style.borderColor = "var(--wf-amber)"} onBlur={(e) => e.target.style.borderColor = errors.phone ? "var(--wf-red)" : "var(--wf-border-cream)"} />

So we can confirm how we'd connect before we talk.

We respond within 4 hours, weekdays.

}
); }; /* ---------------- CTA BANNER ---------------- */ const CTABanner = () =>

Other AI tools give you a dashboard. We give you your mornings back.

Show me how →
; /* ---------------- FOOTER ---------------- */ const Footer = () => ; Object.assign(window, { Nav, Hero, LogoStrip, HowItWorks, BuiltDifferent, Stats, FeatureDeepDive, MockupGallery, Testimonials, FAQ, BookCallSection, CTABanner, Footer });