);
}
MPD.Header = Header;
// ───────────────────────── Hero (image + thumbnail rail) ─────────────────────────
// Desktop port of the mobile HeroRail (src/hero.jsx). The right column is a
// crossfading image with an overlaid step caption, a thumbnail filmstrip, and
// one CTA. No address field / upload / "90 seconds" — by design.
const HERO_STEPS = [
{ img: 't-address.jpg', title: 'Add Your Driveway', long: 'Type in your address or snap a photo of your driveway to get started.' },
{ img: 't-style.jpg', title: 'Pick Materials & Style', long: 'Select from premium styles and materials and see your finished driveway with a real estimate automatically.' },
{ img: 't-render.jpg', title: 'See Your New Driveway', long: 'A realistic preview of your driveway with a real estimate in under 90 seconds — for free.' },
];
const HERO_DWELL = 3200;
// Auto-advancing cycle with manual override (adapted from mobile useCycle).
function useHeroCycle(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];
}
function Hero() {
const [active, go] = useHeroCycle(HERO_STEPS.length, HERO_DWELL);
return (
{/* Credential chips — mirrors the mobile hero (4.9 Google · HomeStars Best 2025 · Family-Owned Since 1992) */}
★ 4.9 Google
HomeStars Best 2025Family-OwnedSince 1992
Get the driveway your home deserves.
Design yours and get a free estimate automatically.
{/* Crossfading hero image with overlaid step caption */}
{HERO_STEPS.map((s, i) => (
))}
{/* Whole-image tint for caption legibility without killing the photo */}
{/* Bottom gradient — caption block sits on solid dark */}
Step {active + 1}
{HERO_STEPS[active].title}
{HERO_STEPS[active].long}
{/* Thumbnail filmstrip — all steps, active enlarged */}
{HERO_STEPS.map((s, i) => {
const on = i === active;
return (
);
})}
);
}
MPD.Hero = Hero;
// ───────────────────────── Quote (full phone flow, desktop port) ─────────────────────────
// Desktop port of the mobile QuotePhone sequence (src/quote.jsx), rebuilt as
// inline-styled React for the dark chat card: greet → address → street view →
// analysis → render + material swatches → estimate → lead toast, then loop.
// No light phone CSS is imported; everything reads on the graphite-800 card.
const QUOTE_FLOW = {
greet: "👋 Hi! I'm Maple Pavers' quote assistant. Want to see your new driveway before you spend a dollar? Just drop in your address.",
addr: '88 Forest Hill Rd, Toronto',
found: "Found it. Here's your place from the street.",
streetView: 'quote-phone-before.jpg',
analyze: 'Give me a sec to size it up…',
rows: [
['Current surface', 'Aging asphalt'],
['Driveway size', '~820 sq ft'],
['Best upgrade', 'Premium pavers'],
],
renderMsg: "Here's your home with fresh new pavers ✨",
materials: [
{ n: 'Stamped Concrete', img: 'quote-phone-stamped.jpg', c1: '#C3B8AB', c2: '#A89C8C', p: '$6,200 – $7,800' },
{ n: 'Poured Concrete', img: 'quote-phone-concrete.jpg', c1: '#cfd3d8', c2: '#9aa0a8', p: '$7,200 – $9,400' },
{ n: 'Charcoal Pavers', img: 'quote-phone-pavers.jpg', c1: '#4A505A', c2: '#2C313A', p: '$8,450 – $10,250' },
],
active: 2, // Charcoal Pavers — the render/estimate subject
incs: [
'Premium charcoal pavers',
'Base prep + compaction',
'~2-week install',
'10-year workmanship warranty',
],
lead: { nm: 'Sarah Johnson', mt: 'Charcoal Pavers driveway · Toronto, ON', pr: '$8,450–$10,250', initial: 'SJ' },
};
// AI / user text bubble on the dark card.
function QBubble({ ai, children }) {
return (
{ai && }
{children}
);
}
// A rounded image block in the chat (street view / render), with a caption pill.
function QImage({ src, label }) {
return (
{label}
);
}
// "Analyzing project…" card — rows reveal one by one (self-staggering).
function QAnalysis({ rows }) {
const [n, setN] = React.useState(0);
React.useEffect(() => {
let cancelled = false; const timers = [];
rows.forEach((_, i) => { timers.push(setTimeout(() => { if (!cancelled) setN(i + 1); }, 360 + i * 460)); });
return () => { cancelled = true; timers.forEach(clearTimeout); };
}, []);
return (
Analyzing project…
{rows.map((r, i) => (
{r[0]}{r[1]}
))}
);
}
// Render image + 3 material swatch chips, with a subtle auto-tap to Charcoal.
function QRender({ materials, target }) {
const [sel, setSel] = React.useState(0);
React.useEffect(() => {
const t = setTimeout(() => setSel(target), 1100);
return () => clearTimeout(t);
}, [target]);
const mat = materials[sel];
return (
{mat.n} · {mat.p}
{materials.map((m, i) => {
const on = i === sel;
return (
);
})}
);
}
// "New lead" notification toast (as in mobile).
function QLead({ lead }) {
return (
Meanwhile, at the shop
{lead.initial}
{lead.nm}
{lead.mt}
{lead.pr}
);
}
function Quote() {
const T = QUOTE_FLOW;
const mat = T.materials[T.active];
// Timeline of items appended to the chat; each entry is a typed step.
// think = AI typing pause before the item; pause = settle time after it.
const STEPS = React.useMemo(() => [
{ kind: 'ai', think: 1000, pause: 420, content: T.greet },
{ kind: 'user', think: 720, pause: 480, content: '📍 ' + T.addr },
{ kind: 'ai', think: 1000, pause: 360, content: T.found },
{ kind: 'image', think: 0, pause: 900, src: T.streetView, label: 'Your home · Street View' },
{ kind: 'ai', think: 950, pause: 300, content: T.analyze },
{ kind: 'analysis', think: 0, pause: 1900, rows: T.rows },
{ kind: 'ai', think: 1100, pause: 360, content: T.renderMsg },
{ kind: 'render', think: 0, pause: 2400, materials: T.materials, target: T.active },
{ kind: 'ai', think: 850, pause: 320, content: 'Here is your instant estimate:' },
{ kind: 'estimate', think: 0, pause: 2200, mat, incs: T.incs },
{ kind: 'lead', think: 0, pause: 3200, lead: T.lead },
], []);
const [shown, setShown] = React.useState([]);
const [typing, setTyping] = React.useState(false);
const bodyRef = React.useRef(null);
React.useEffect(() => {
let cancelled = false; const timers = [];
const wait = (ms) => new Promise((r) => timers.push(setTimeout(r, ms)));
(async function run() {
while (!cancelled) {
setShown([]); setTyping(false); await wait(700);
for (let i = 0; i < STEPS.length; i++) {
const s = STEPS[i];
if (cancelled) return;
if (s.kind === 'ai') { setTyping(true); await wait(s.think); if (cancelled) return; setTyping(false); }
else if (s.think) { await wait(s.think); }
if (cancelled) return;
setShown((prev) => [...prev, s]);
await wait(s.pause || 380);
}
if (cancelled) return;
await wait(3600); // hold on the finished flow, then loop
}
})();
return () => { cancelled = true; timers.forEach(clearTimeout); };
}, [STEPS]);
React.useEffect(() => { const el = bodyRef.current; if (el) el.scrollTop = el.scrollHeight; }, [shown, typing]);
function renderItem(s, i) {
switch (s.kind) {
case 'ai': return {s.content};
case 'user': return {s.content};
case 'image': return ;
case 'analysis': return ;
case 'render': return ;
case 'estimate': return ;
case 'lead': return ;
default: return null;
}
}
return (
Drop your address and a photo. Maple AI redesigns your driveway and hands you a real price range — in about 90 seconds. No salesperson, no waiting.
{[['sparkles', 'Photorealistic AI render of your home'], ['tag', 'Instant ballpark estimate'], ['badge-check', 'No obligation, no pushy follow-ups']].map(([ic, tx]) => (