// Maple Pavers Explorer — PROCESS / HOW IT WORKS, 5 variants. (function () { const { Icon, Overline, PHOTO } = window.MP; const STEPS = window.MP.data.process; const Heading = ({ onDark }) => (
How It Works

Four steps from idea to driveway.

); // V1 — Numbered icon circles (2×2) function ProcGrid() { return (
{STEPS.map((s, i) => (
{i + 1}

{s.t}

{s.d}

))}
); } // V2 — Vertical timeline function ProcTimeline() { return (
{STEPS.map((s, i) => (
{i < STEPS.length - 1 &&
}
STEP {String(i + 1).padStart(2, '0')}

{s.t}

{s.d}

))}
); } // V3 — Big serif numerals function ProcNumerals() { return (
{STEPS.map((s, i) => (
{String(i + 1).padStart(2, '0')}

{s.t}

{s.d}

))}
); } // V4 — Stacked cards function ProcCards() { return (
{STEPS.map((s, i) => (
STEP {String(i + 1).padStart(2, '0')}

{s.t}

{s.d}

))}
); } // V5 — Photo-paired function ProcPhoto() { const imgs = ['svc-driveways.png', 'house-render.png', 'svc-steps.png', 'svc-patios.png']; return (
{STEPS.map((s, i) => (
STEP {String(i + 1).padStart(2, '0')}

{s.t}

{s.d}

))}
); } window.MP.register('process', { label: 'How it works', options: [ { id: 'grid', name: '1 · Icon grid', Render: ProcGrid }, { id: 'timeline', name: '2 · Vertical timeline', Render: ProcTimeline }, { id: 'numerals', name: '3 · Big numerals', Render: ProcNumerals }, { id: 'cards', name: '4 · Stacked cards', Render: ProcCards }, { id: 'photo', name: '5 · Photo-paired', Render: ProcPhoto }, ], }); })();