// Maple Pavers Explorer — HERO section. // Five LOCKUP treatments of the 3-step flow: // 1) Enter address (or upload) 2) Pick materials & style 3) Render + first estimate // — ALL IN 90 SECONDS. Each ends with the address on-ramp + one clear CTA. (function () { const { Button, Badge } = window.MaplePaversDesignSystem_8de4d8; const { Icon, Overline, Stars, PHOTO, ASSET, PHONE, startQuote } = window.MP; const ADDRS = ['123 Maple Ave, Toronto', '88 Forest Hill Rd', '12 Lakeshore Blvd, Etobicoke', '45 Bayview Cres, Markham']; const STEPS = [ { icon: 'map-pin', short: 'Your address', t: 'Enter your address', d: 'Or upload a photo of your home.', tileDesc: 'Enter your property address.', img: 't-address.jpg' }, { icon: 'layers', short: 'Your style', t: 'Pick materials & style', d: 'Choose your paver look and colour.', tileDesc: 'Choose the perfect paver style.', img: 't-style.jpg' }, { icon: 'tag', short: 'Render + price', t: 'Get your render + estimate', d: 'A finished preview and a first price.', tileDesc: 'See your AI render and instant price.', img: 't-render.jpg' }, ]; function usePlaceholder(active) { const [txt, setTxt] = React.useState(ADDRS[0]); React.useEffect(() => { if (!active) return; let cancelled = false; const timers = []; const wait = (ms) => new Promise((r) => timers.push(setTimeout(r, ms))); (async function loop() { while (!cancelled) { for (const a of ADDRS) { for (let i = 1; i <= a.length; i++) { if (cancelled) return; setTxt(a.slice(0, i)); await wait(52); } await wait(1400); for (let i = a.length; i >= 0; i--) { if (cancelled) return; setTxt(a.slice(0, i)); await wait(24); } await wait(280); } } })(); return () => { cancelled = true; timers.forEach(clearTimeout); }; }, [active]); return txt; } function AddressField() { const [val, setVal] = React.useState(''); const [focus, setFocus] = React.useState(false); const ph = usePlaceholder(!focus && !val); return (
setVal(e.target.value)} onFocus={() => setFocus(true)} onBlur={() => setFocus(false)} placeholder={focus ? 'Enter your address…' : ph} style={{ flex: 1, border: 0, outline: 'none', fontFamily: 'var(--font-body)', fontSize: 16, background: 'transparent', color: 'var(--text-body)', minWidth: 0 }} />
); } function CtaBtn({ children }) { return ( ); } // "ALL IN 90 SECONDS" punchline lockup function Ninety({ onDark, center }) { return (
All in 90 seconds
); } function HeroTop({ h, sub }) { return (
Family-Owned Since 1992

{sub}

); } const Card = ({ children, pull = -46 }) => (
{children}
); // ── L1 — Horizontal numbered row (chips + connectors) ── function StepsRow() { return (
From address
to estimate.} />
{STEPS.map((s, i) => (
{i + 1} {s.short}
{i < STEPS.length - 1 && } ))}
Design My Driveway
); } // ── L2 — Vertical numbered list (icon + title + desc) ── function StepsList() { return (
Three taps to
your new driveway.} />
{STEPS.map((s, i) => (
{i + 1}
{s.t}
{s.d}
))}
Design My Driveway
); } // ── L3 — Video-card image tiles (matches the supplied sample) ── function StepsTiles() { return (
Premium pavers,
priced in 90 seconds.} />
{STEPS.map((s, i) => (
{s.short}
Step {i + 1}
{s.short}

{s.tileDesc}

))}
Design My Driveway
); } // ── L4 — Connected timeline with a 90s end-flag ── function StepsTimeline() { return (
The last driveway
you'll ever buy.} />
{STEPS.map((s, i) => (
{s.short}
))}
All in 90 seconds
Design My Driveway
); } // ── L5 — Render preview + numbered step captions (evolves the example-renders card) ── function StepsRender() { return (
See it before
you buy it.} />

How it works

90 SECONDS
Example render
Before After + $
{STEPS.map((s, i) => (
{i + 1} {s.t}. {s.d}
))}
Design My Driveway
); } // ════════════════════════════════════════════════════════════════════════ // V6 — Image + thumbnail rail (from Maple Pavers Explorer.html design pack) // Big crossfading hero image with an animated caption; thumbs below jump // between steps. Auto-advances every DWELL ms. // ════════════════════════════════════════════════════════════════════════ const RAIL_DWELL = 3600; // Rail-specific headline + support copy. Keeps STEPS[].t untouched so the // older variants (steps-tiles / steps-list / etc.) still read sensibly. const RAIL_COPY = [ { title: 'Add Your Driveway', long: 'Type in your address or snap a photo of your driveway to get started.' }, { title: 'Pick Materials & Style', long: 'Select from premium styles and materials and see your finished driveway with a real estimate automatically.' }, { title: 'See Your New Driveway', long: 'A realistic preview of your driveway with a real estimate in under 90 seconds — for free.' }, ]; function useCycle(n, dwell) { const [active, setActive] = React.useState(0); const [tick, setTick] = React.useState(0); const ref = React.useRef(); React.useEffect(() => { ref.current = setTimeout(() => { setActive((a) => (a + 1) % n); setTick((t) => t + 1); }, dwell); return () => clearTimeout(ref.current); }, [active, tick, n, dwell]); const go = (i) => { clearTimeout(ref.current); setActive(i); setTick((t) => t + 1); }; return [active, go]; } // Text-only header for the rail variant. `onDark` flips colors for the // photo-backed background treatment. function HeroShell({ onDark }) { // Credential strip (Option C): two glassy pill chips on row 1 // (★ 4.9 Google + HomeStars Best 2025), heritage caps on row 2. const chipBase = { display: 'inline-flex', alignItems: 'center', gap: 5, padding: '3px 9px', borderRadius: 999, fontFamily: 'var(--font-body)', fontSize: 10.5, fontWeight: 700, whiteSpace: 'nowrap', lineHeight: 1.4, }; const chipNeutral = { ...chipBase, background: onDark ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.04)', border: onDark ? '1px solid rgba(255,255,255,0.2)' : '1px solid rgba(0,0,0,0.1)', color: onDark ? 'var(--beige-150)' : 'var(--text-strong)', }; const chipTerra = { ...chipBase, background: 'var(--terracotta)', border: '1px solid var(--terracotta)', color: '#ffffff', }; return (
★ 4.9 Google HomeStars Best 2025 Family-Owned Since 1992

Get the driveway
your home deserves.

Design yours and get a free estimate automatically.

); } function HeroRail() { const [active, go] = useCycle(3, RAIL_DWELL); return (
{STEPS.map((s, i) => ( {s.t} ))} {/* Whole-image tint to help text legibility without killing the photo */}
{/* Bottom gradient — extends higher, fades earlier so the caption block sits on solid dark */}
Step {active + 1}

{RAIL_COPY[active].title}

{RAIL_COPY[active].long}

{/* thumbnail rail — all steps, active enlarged */}
{STEPS.map((s, i) => { const on = i === active; return ( ); })}
Design My Driveway
); } window.MP.register('hero', { label: 'Hero', options: [ { id: 'rail', name: '6 · Image + thumbnail rail', Render: HeroRail }, { id: 'steps-tiles', name: '1 · Image tiles', Render: StepsTiles }, { id: 'steps-render', name: '2 · Render + step captions', Render: StepsRender }, { id: 'steps-list', name: '3 · Vertical numbered list', Render: StepsList }, { id: 'steps-row', name: '4 · Horizontal numbered row', Render: StepsRow }, { id: 'steps-timeline', name: '5 · Connected timeline', Render: StepsTimeline }, ], }); })();