// Peak Garage Solutions — main page components // Brand: off-black + electric yellow (matches tote lids), Archivo display + Plex Mono. const PG_OWNER = 'Benny Pacheco'; const PG_PHONE = '289-707-4755'; const PG_PHONE_TEL = '+12897074755'; const PG_PHONE_SMS = 'sms:+12897074755'; const PG_DOMAIN = 'peakgaragesolutions.ca'; const PG_REGION = 'Burlington & surrounding areas'; const PG_EST = '2024'; // EmailJS — quote form delivery (same account/templates as the legacy site). const EMAILJS_PUBLIC_KEY = 'oNs9CbcPHf_Nhc4kH'; const EMAILJS_SERVICE_ID = 'service_4qiybvi'; const EMAILJS_TEMPLATE_OWNER = 'template_w5deyiz'; // notification to Benny const EMAILJS_TEMPLATE_CUSTOMER = 'template_ayvgsvb'; // confirmation to the customer const PG_OWNER_EMAIL = 'benny@peakgaragesolutions.ca'; // Asset-URL resolver: prefers a blob URL injected by the standalone bundler, // falls back to the project-relative path in dev mode. function PG_R(id, fallback) { if (typeof window !== 'undefined' && window.__resources && window.__resources[id]) { return window.__resources[id]; } return fallback; } // Each item knows the config it represents — clicking jumps to #build with this loaded. // Tag price is the lowest base price for that build (no add-ons). // Clicking loads cols/rows or dualKind only — NO add-ons applied. const PG_GALLERY = [ { id: 'gallery1', src: 'assets/gallery1.jpg', label: 'Workbench · 3-wide · pegboard + work top', tag: 'Workbench 3W · from $177', cfg: { wbWidth: 3, addons: ['pegboard'] } }, { id: 'gallery5', src: 'assets/gallery5.jpg', label: 'Workbench · 4-wide · maple work top', tag: 'Workbench 4W · from $236', cfg: { wbWidth: 4 } }, { id: 'gallery4', src: 'assets/gallery4.jpg', label: 'Workbench · 3-wide · maple work top', tag: 'Workbench 3W · from $177', cfg: { wbWidth: 3 } }, { id: 'gallery6', src: 'assets/gallery6.jpg', label: 'Natural pine · 2-HIGH double w/ shelves', tag: 'Double 2H · from $340', cfg: { dualKind: '2high' } }, { id: 'gallery3', src: 'assets/gallery3.jpg', label: 'Natural pine · 4-HIGH double w/ shelves', tag: 'Double 4H · from $530', cfg: { dualKind: '4high' } }, { id: 'gallery7', src: 'assets/gallery7.jpg', label: 'Custom · 4-wide · 4-high · walnut stain', tag: '16 totes · from $352', cfg: { cols: 4, rows: 4 } }, { id: 'gallery8', src: 'assets/gallery8.jpg', label: 'Custom · 4-wide · 5-high · walnut stain', tag: '20 totes · from $440', cfg: { cols: 4, rows: 5 } }, { id: 'gallery9', src: 'assets/gallery9.jpg', label: 'Custom · 5-wide · 5-high · walnut stain', tag: '25 totes · from $550', cfg: { cols: 5, rows: 5 } }, { id: 'gallery2', src: 'assets/gallery2.jpg', label: 'Custom · 2-wide · 4-high · walnut stain', tag: '8 totes · from $176', cfg: { cols: 2, rows: 4 } }, ]; /* ─────────────────────────────────────────── TopBar + Nav */ function TopBar() { return (
// HAND-BUILT IN BURLINGTON · EST. {PG_EST} · FITS COSTCO · HDX · GSC 102 L TOTES ★ 4.9 · 60+ REVIEWS ☏ {PG_PHONE}
); } function Nav() { return ( ); } /* ─────────────────────────────────────────── Hero */ function Hero() { return (
// CUSTOM TOTE STORAGE · BUILT TO SPEC

A SHELF
SIZED
FOR YOUR
TOTES.

Hand-built pine and bin garage storage, sized to fit Costco, HDX, and GSC 27 Gal / 102 L totes. From 2-bin starters to 30-bin full walls — pick your width, height, add-ons, and get an instant price.

CONFIGURE & PRICE → ☏ TEXT {PG_PHONE}
★ 4.9 · 60+ REVIEWS
240+ DELIVERED
READY IN DAYS
DELIVERY + SETUP INCLUDED
{ e.preventDefault(); window.dispatchEvent(new CustomEvent('pg-load-config', { detail: { dualKind: '2high', addons: ['pegboard'], ledCount: 1, stain: 'ebony' } })); const el = document.getElementById('build'); if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 60, behavior: 'smooth' }); }}>
{/* Spec overlay */} {/* corner brackets */} {/* call-outs */} PEGBOARD BACK tools + LED light bar 8 TOTES · 2×2 PER SIDE yellow-lid 27 gal / 102 L OPEN WORKBENCH BAY work surface + shelf {/* tick marks */} FIG. 1 / CUSTOM WORKBENCH · PEGBOARD + 8 TOTES · BURLINGTON
TAP TO BUILD THIS →
{/* Marquee */} ); } function Marquee({ items }) { return (
{Array.from({length: 8}).map((_,i) => items.map((it,j) => {it})).flat()}
); } /* ─────────────────────────────────────────── Gallery */ function Gallery() { function loadInBuilder(cfg, e) { e.preventDefault(); // Add-ons from the gallery card (e.g. pegboard); otherwise show the bare build. const payload = { ...cfg, addons: cfg.addons || [], ledCount: cfg.ledCount || 0, stain: cfg.stain || 'walnut' }; window.dispatchEvent(new CustomEvent('pg-load-config', { detail: payload })); const el = document.getElementById('build'); if (el) { const top = el.getBoundingClientRect().top + window.scrollY - 60; window.scrollTo({ top, behavior: 'smooth' }); } } return ( ); } /* ─────────────────────────────────────────── How it works */ function How() { const steps = [ { n: '01', t: 'SKETCH OR SHOOT', d: 'Photo of your garage wall plus rough dimensions. Or just tell me how many totes you need to store.' }, { n: '02', t: 'INSTANT PRICE', d: 'Use the builder above for an instant fixed price. Or text me — I quote back within 24 hours.' }, { n: '03', t: 'WORKSHOP BUILD', d: 'Kiln-dried pine, pocket-screw joinery, stained or natural. Built by hand in my Burlington shop — most orders done by the end of the week.' }, { n: '04', t: 'DELIVERED & SET UP', d: 'Next-day or two-day delivery once it’s ready. Free in-garage setup across the GTA core — wheel it in (if you ordered casters) and you’re done.' }, ]; return (
// 03 — PROCESS

FOUR STEPS.
TWO WEEKS.

NO SHOWROOM, NO MIDDLEMAN.
JUST A WOODWORKER, A WORKSHOP, A TRUCK.
{steps.map(s => (
STEP / {s.n}
{s.n}

{s.t}

{s.d}

))}
); } /* ─────────────────────────────────────────── About Benny */ function About() { return (
// 05 — THE WORKSHOP

ONE GUY.
ONE WORKSHOP.
ZERO BS.

I'm Benny. I started Peak Garage Solutions in {PG_EST} because I couldn't find a shelf sized right for the 27 Gal / 102 L totes that everyone in Burlington has from Costco. So I built one for my own garage. Then a neighbor wanted one.

Two years and many builds later, it's still just me in the shop. Every shelf is built by hand, by the same set of hands. I quote it, I build it, I deliver it. That's the whole pitch.

— {PG_OWNER.toUpperCase()} / BUILDER & OWNER
{`${PG_OWNER} { e.currentTarget.style.display = 'none'; }} />
// FIG. 4
); } /* ─────────────────────────────────────────── Reviews */ function Reviews() { const reviews = [ { q: 'Benny measured our wall, drew it up the same afternoon, and installed two weeks later. Cleanest the garage has been since we moved in.', a: 'SARAH & DEV', loc: 'ALDERSHOT', build: 'PG-16' }, { q: 'I priced Gladiator and the Costco systems — this was half, looks twice as good, and the bins actually fit without wiggle.', a: 'TOM R.', loc: 'TYANDAGA', build: 'PG-24' }, { q: 'Asked for a 36-bin wall with a notch around the breaker panel. He just figured it out. The QR inventory app is icing.', a: 'MEGAN H.', loc: 'OAKVILLE', build: 'PG-36' }, ]; return (
// 06 — REVIEWS

WORD OF
MOUTH.

★ 4.9 · 60+ REVIEWS
{reviews.map((r,i) => (
{r.build} ★★★★★

"{r.q}"

{r.a} {r.loc}
))}
); } /* ─────────────────────────────────────────── Delivery */ function Delivery() { const free = [ ['MILTON', '~10 KM'], ['BURLINGTON', '~12 KM'], ['WATERDOWN / STONEY CK', '~15 KM'], ['HAMILTON / DUNDAS', '~20 KM'], ['OAKVILLE', '~22 KM'], ]; const paid = [ ['MISSISSAUGA', '$40'], ['TORONTO / BRAMPTON / ETOBICOKE', '$50'], ['CAMBRIDGE / WATERLOO / GUELPH', '$50'], ['BRANTFORD / GRIMSBY / NIAGARA FALLS', "LET'S TALK"], ]; return (
// 07 — DELIVERY & SETUP

DELIVERY +
SETUP INCLUDED.

These shelves are big and heavy — so delivery and in-garage setup are baked into the price for the cities below. Most orders ship next day or within two days of being ready.

FREE DELIVERY + SETUP
{free.map(([k,d]) => (
{k} {d} FREE
))}
FLAT DELIVERY FEE
{paid.map(([k,v]) => (
{k} {v}
))}

FURTHER? TEXT BENNY — HAPPY TO QUOTE.

{[70, 130, 190].map((r,i) => ( ))} WORKSHOP {[ [285, 170, 'BURLINGTON', 'FREE'], [360, 145, 'OAKVILLE', 'FREE'], [150, 160, 'HAMILTON', 'FREE'], [240, 100, 'WATERDOWN', 'FREE'], [340, 95, 'MILTON', 'FREE'], [395, 175, 'MISSISSAUGA', '$40'], [440, 130, 'TORONTO', '$50'], [60, 105, 'CAMBRIDGE', '$50'], [30, 60, 'KW / GUELPH', '$50'], [120, 245, 'BRANTFORD / NIAGARA', '$$'], ].map(([x,y,n,v]) => ( {n} {v} ))} LAKE ONTARIO FIG. 5 — DELIVERY ZONES / NEXT-DAY OR 2-DAY
); } /* ─────────────────────────────────────────── FAQ */ function FAQ() { const qs = [ ['Do you only build for 102 L / 27 Gal totes?', "That's the standard — the totes Costco, HDX, and GSC all sell. But I've built shelves for 17 Gal small bins, mixed walls, and oddball totes too. Send me a photo with rough dimensions and I'll size around it."], ['How heavy can each shelf go?', "Each shelf level handles 2,000 lb total — these aren’t wire racks. If you go with the wheel casters, each individual caster is rated to 250 lb, so even a fully loaded 24-bin wall rolls easy."], ['Do you install?', "Yes — delivery and in-garage setup are included in the price for Milton, Burlington, Waterdown/Stoney Creek, Hamilton/Dundas, and Oakville. Mississauga is $40 flat, Toronto/Brampton/Etobicoke/Cambridge/Waterloo/Guelph is $50 flat, and further out (Brantford, Grimsby, Niagara) we’ll work it out. No drilling required unless you want them wall-anchored."],, ['Can I add a workbench later?', "Yes — everything is modular. Workbench bays, extra columns, casters, and stain finishes can all be added later."], ['How long does it take?', "Usually 2 to 7 days — most orders are done by the end of the week. Holiday season (Oct–Dec) can run a little longer. A 25% deposit holds your spot in the build queue."],, ['Payment?', "E-transfer, debit, or cash on delivery. 25% deposit up front, balance on delivery."], ['Do the totes come with the shelf?', "Optional. Costco 27 Gal black-and-yellow totes are $20 each as an add-on, or bring your own."], ]; return (
// 09 — FAQ

WHAT I GET
ASKED.

{qs.map(([q,a],i) => (
{q} +

{a}

))}
); } /* ─────────────────────────────────────────── Contact / Quote */ function Contact() { return (
// 10 — QUOTE / CONTACT

LET'S
BUILD.

Quote back within 24 hours. Text the workshop directly for fastest reply — usually within an hour during business hours.

{[ ['CALL / TEXT', PG_PHONE, '8AM – 8PM · DAILY'], ['EMAIL', 'benny@peakgaragesolutions.ca', '24-HR REPLY'], ['WORKSHOP', 'BURLINGTON, ON', 'PICKUP BY APPT.'], ['SOCIAL', '@PEAKGARAGE', 'IG · FB'], ].map(([k,v,d]) => (
{k}
{v}
{d}
))}
); } // Parse the configurator's build summary into the individual fields the // EmailJS owner template renders (type/rows/slots/dims/addons/total). function parseBuild(b) { const out = { type: '—', rows: '—', slots: '—', addons: 'None', width: '—', height: '—', depth: '28.5"', total: '—' }; if (!b) return out; const lines = b.split('\n').map((s) => s.trim()).filter(Boolean); if (lines[0]) out.type = lines[0]; const dim = b.match(/([\d.]+)\s*["″]?\s*W\s*[×x]\s*([\d.]+)\s*["″]?\s*H\s*[×x]\s*([\d.]+)\s*["″]?\s*D/i); if (dim) { out.width = dim[1] + '"'; out.height = dim[2] + '"'; out.depth = dim[3] + '"'; } const add = b.match(/Add-?ons?:\s*(.+)/i); if (add) out.addons = add[1].trim(); const tot = b.match(/total:\s*(\$[\d,]+)/i); if (tot) out.total = tot[1]; const slot = b.match(/(\d+)\s*tote/i); if (slot) out.slots = slot[1] + ' totes'; const hi = b.match(/(\d+)\s*HIGH/i); if (hi) out.rows = hi[1] + ' high'; return out; } function QuoteForm() { const [sent, setSent] = React.useState(false); const [build, setBuild] = React.useState(''); const [sending, setSending] = React.useState(false); const [error, setError] = React.useState(''); // When the user clicks "Lock this build" in the configurator, the spec + price // arrive here so they only have to add their contact info. React.useEffect(() => { function onQuote(e) { setBuild((e.detail && e.detail.summary) || ''); setSent(false); } window.addEventListener('pg-load-quote', onQuote); return () => window.removeEventListener('pg-load-quote', onQuote); }, []); function handleSubmit(e) { e.preventDefault(); const fd = new FormData(e.target); const name = (fd.get('name') || '').trim(); const phone = (fd.get('phone') || '').trim(); const email = (fd.get('email') || '').trim(); const postal = (fd.get('postal') || '').trim(); const notes = (fd.get('notes') || '').trim(); if (!name) { setError('Please enter your name.'); return; } if (!phone && !email) { setError('Add a phone number or email so we can reach you.'); return; } if (email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) { setError('That email address looks off — mind double-checking it?'); return; } if (!window.emailjs) { setError(`Email service didn't load — please text us at ${PG_PHONE}.`); return; } const p = parseBuild(build); setSending(true); setError(''); window.emailjs.init(EMAILJS_PUBLIC_KEY); window.emailjs.send(EMAILJS_SERVICE_ID, EMAILJS_TEMPLATE_OWNER, { to_email: PG_OWNER_EMAIL, from_name: name, from_email: email || '(not provided)', phone: phone || '(not provided)', config_cols: p.type, config_rows: p.rows, config_slots: p.slots, config_width: p.width, config_height: p.height, config_depth: p.depth, config_addons: p.addons, config_total: p.total, config_summary: build || '(no configuration attached)', notes: (notes || 'None') + (postal ? ` · Postal: ${postal}` : ''), }).then(() => { if (email) { return window.emailjs.send(EMAILJS_SERVICE_ID, EMAILJS_TEMPLATE_CUSTOMER, { to_email: email, from_name: name, config_summary: build || '', }); } }).then(() => { setSending(false); setSent(true); }).catch((err) => { console.error('EmailJS error:', err); setSending(false); setError(`Something went wrong sending your request — please text us at ${PG_PHONE}.`); }); } if (sent) { return (
✓

QUOTE REQUESTED

THANKS — I'LL REPLY WITHIN 24 HOURS.

NEED IT FASTER? TEXT ME AT {PG_PHONE}.

); } return (
// QUOTE FORM
{build && (
YOUR BUILD
{build}
)} {[ ['NAME', 'Sarah Cavanaugh', 'name', true], ['PHONE', '(289) 555-0123', 'phone', false], ['EMAIL', 'sarah@email.com', 'email', false], ['POSTAL CODE', 'L7T 1A1', 'postal', false], ].map(([k, p, n, req]) => ( ))}