// Maple Pavers — DESKTOP sections, part 2: Gallery, Why, Social, Testimonials, CTA, Footer. (function () { const DS = window.MaplePaversDesignSystem_8de4d8; const { Button, Badge, StatBlock } = DS; const { Icon, Overline, Stars, PHOTO, ASSET, PHONE, startQuote } = window.MP; const D = window.MP.data; const MPD = window.MPD; const { Container, SecHead } = MPD; const BEFORE = 'grayscale(0.9) brightness(0.62) contrast(0.92)'; // ───────────────────────── Gallery (before/after slider) ───────────────────────── // Accepts a gallery `item`. Uses real `before` + `after` images when present; // falls back to grayscale-on-after fake when only `img` is set (legacy items). function BASlider({ item, height }) { const [pos, setPos] = React.useState(52); const ref = React.useRef(null); const beforeImg = item.before || item.img; const afterImg = item.after || item.img; const beforeFilter = item.before ? 'none' : BEFORE; const set = (cx) => { const r = ref.current.getBoundingClientRect(); setPos(Math.max(2, Math.min(98, ((cx - r.left) / r.width) * 100))); }; const down = (e) => { e.preventDefault(); const move = (ev) => set(ev.touches ? ev.touches[0].clientX : ev.clientX); move(e.nativeEvent); const up = () => { window.removeEventListener('pointermove', move); window.removeEventListener('pointerup', up); }; window.addEventListener('pointermove', move); window.addEventListener('pointerup', up); }; return (
Before
After
); } function Gallery() { const items = D.gallery.slice(0, 5); const [active, setActive] = React.useState(0); return ( ); } MPD.Gallery = Gallery; // ───────────────────────── Why (dark pillars) ───────────────────────── function Why() { return (

Three decades of high-end stonework across Toronto and the GTA. We're not the cheapest quote you'll get — we're the one you won't have to call back.

{D.pillars.map((p) => (

{p.t}

{p.d}

))}
); } MPD.Why = Why; // ───────────────────────── Social proof (marquee) ───────────────────────── function Social() { const loop = [...D.badges, ...D.badges, ...D.badges]; return (

Trusted across the GTA

{loop.map((b, i) => ( {b.t} {b.s} ))}
{D.partners.map((p) => {p})}
); } MPD.Social = Social; // ───────────────────────── Testimonials (marquee) ───────────────────────── function Testimonials() { const loop = [...D.testimonials, ...D.testimonials]; return (
{loop.map((t, i) => (
“{t.quote}”
— {t.author}{t.location}
))}
); } MPD.Testimonials = Testimonials; // ───────────────────────── CTA (dark, render-only) ───────────────────────── function CTA() { return (
Free · No Obligation

Ready to lose the cracked asphalt?

See your home redone in a premium paver finish — free, in 90 seconds. The hardest part is uploading a photo.

{PHONE}
); } MPD.CTA = CTA; // ───────────────────────── Footer (full) ───────────────────────── function Footer() { const ADDRESS = '245 Bridgeland Ave, North York, ON M6A 1Z4'; const EMAIL = 'hello@maplepavers.ca'; const HOURS = 'Mon–Fri 8 AM–6 PM · Sat by appointment'; const lbl = { fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 12, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--clay)', margin: '0 0 16px' }; const li = { fontFamily: 'var(--font-body)', fontSize: 14, lineHeight: '26px', color: 'var(--text-on-dark-muted)', textDecoration: 'none', display: 'block' }; return ( ); } MPD.Footer = Footer; })();