Proof first, phone always: a landscaping site built for how trades get hired

A demo marketing site for a fictional landscaping business — before/after gallery as the proof, and a sticky mobile bar that keeps call and quote one thumb away.

Huron Valley Landscaping is a demo build — a fictional lawn care, landscaping, and snow removal business in Ann Arbor. Trade businesses get hired on two things: visible proof of work, and how fast you can reach them. The site is organized around exactly those two.

Stack: React 19, TypeScript, Vite, Tailwind CSS v4, static deploy on a Cloudflare Worker. Services, gallery pairs, reviews, and contact details are typed data in data.ts.

Proof up top

The before/after gallery leads the page — four project transformations shown as paired images, because "we transformed this yard" beats any amount of copy about quality and care. Below it: six services, Google-style reviews, and the service-area list that local search cares about.

The sticky bar is the whole mobile strategy

On mobile, a fixed bottom bar keeps both conversion paths permanently visible — click-to-call and a smooth-scroll jump to the quote form:

1<div id="mobile-sticky-bar"2  className="fixed bottom-0 left-0 right-0 z-40 bg-white/95 backdrop-blur-md border-t border-gray-200 px-4 py-3 shadow-[_-px_16px_rgba(0,0,0,0.06)] flex items-center gap-3 md:hidden">3  <button onClick={handleScrollToQuote}4    className="flex-1 flex items-center justify-center gap-2 py-2.5 px-3 bg-emerald-50 hover:bg-emerald-100 text-emerald-800 font-semibold text-sm rounded-lg border border-emerald-200/50 transition-colors">5    <Calendar className="w-4 h-4" />6    <span>Get Free Quote</span>7  </button>8  <a href={`tel:${COMPANY_CONTACT.phoneRaw}`}9    className="flex-1 flex items-center justify-center gap-2 py-2.5 px-3 bg-emerald-700 hover:bg-emerald-800 text-white font-bold text-sm rounded-lg shadow-sm transition-colors">10    <Phone className="w-4 h-4 fill-current" />11    <span>Call {COMPANY_CONTACT.phone}</span>12  </a>13</div>

Most contractor sites make you scroll back to the top to find the number. Here the phone call — the highest-intent action a trade site has — is always one tap.

What I'd improve

• The quote form needs a backend to actually deliver — a Worker with Turnstile is the obvious next step.
• Before/after pairs would be stronger as an interactive slider than side-by-side images.

One of eight small-business demos on this site. See the projects or get a quote for a site built around how your customers actually hire you.