Exactly what the C$500 Business package delivers: a four-page site for a GTA renovation company with prices, before-and-afters, the team and an estimate form.
Type
Renovation company website
Scope
Four pages · services & prices · before/after · estimate form
Hiring a renovator means letting strangers take a house apart for weeks, often for tens of thousands of dollars. Before homeowners call, they want proof of past work, a sense of what it will cost, a look at the people who will be in their home and some reassurance about licences, insurance and warranties. One page cannot carry all of that without becoming a wall of text. Maple & Pine shows how the Business package spreads it over four focused pages, adds the motion and polish that make a small company feel established, and still keeps the next step to a single estimate request.
VISUAL SYSTEMDESIGN DIRECTION
Warm, light and made by hand.
Warm paper and soft stone backgrounds with a faint grain keep the site light and calm, like a well-lit showroom. Deep forest green carries every action, oak and walnut tones mark labels and details, and charcoal text keeps longer descriptions easy to read. Instrument Serif gives headings an editorial, architectural voice, with italic for the key phrase, while Jost handles body copy, prices and the form. Large, softly rounded photography does most of the talking.
Paper #F7F3EC
Forest #1F3D2F
Oak #B98A5A
Charcoal #23211E
THE SOLUTION04 KEY DECISIONS
Key decisions in Maple & Pine Renovations
01
The Business package, as sold
Four pages (Home, Services, About and Contact), responsive for phones, tablets and desktop, a working contact form with links to the map, social profiles and an existing booking service, basic SEO and launch setup: the same list as the C$500 Business package, with two revision rounds. No CMS, blog, client accounts or price calculator were added to make the example look bigger than the offer.
02
What the extra C$250 buys
Compared with the one-page Starter example, the story gets room across four pages: services with what is included, typical timelines and starting prices, an FAQ, the team, values and service areas, and a fuller estimate form with project type, budget and timeline. It also gets more design and motion work, from the editorial layout to the before-and-after comparison.
03
Motion that stays out of the way
The headline rises in word by word, the hero photo zooms slowly, sections fade up as they scroll into view, stats count up, the before-and-after divider sways once to show that it moves, and pages cross-fade under a header that stays in place. Everything animates only transform and opacity, never hides content from visitors without scripts, and switches off entirely for reduced motion.
04
Fast, accessible and honest
The standalone build scores 98–99 for mobile Lighthouse performance and 100 for accessibility, best practices and SEO on all four pages, with no layout shift and about 10 KB of JavaScript. The slider, tabs and menu work from the keyboard, the form validates inline, and the site says plainly that the business, team and reviews are fictional and that estimate requests reach the developer.
USER JOURNEYHOW IT WORKS
From a search for a contractor to a booked visit.
The four pages follow the questions a homeowner asks before inviting a renovator in.
01
Arrive
The first screen shows a finished kitchen, what the company builds, where it works and two ways to act: request an estimate or call.
02
Compare
Services lists what each renovation includes, how long it takes and where prices start, then answers common questions.
03
Trust
Before-and-after projects, reviews, the team and licence, insurance and warranty details show who will be in the house.
04
Request
A short estimate form, preselected from the service chosen, with phone, hours, a map and booking links beside it.
SCREENSHOTSIN PRACTICE
Screenshots of Maple & Pine Renovations
A full-height hero with the promise and both ways to act
Drag, swipe or use the keyboard to compare before and after
Fictional renovation company. Estimate requests are sent to the portfolio developer, not a contractor, and nobody will call or visit.
What this demo does not include
Maple & Pine Renovations is a fictional business created for this portfolio. The studio address is a street corner rather than a storefront, the phone number is in the reserved 555-01xx range, and the team, reviews and figures are written samples; the reviews and team are labelled as such on the page. The before-and-after photos are real renovation photos by immo RENOVATION on Unsplash, aligned and paired for the slider, with invented project names and places. Estimate requests really are delivered via Formspree, but to the portfolio developer: no contractor receives them and nobody will call. Photos chosen in the form are checked in the browser and never uploaded, and the Google Business, Instagram, Houzz and booking links open each platform’s home page. There is no CMS, blog, client account or price calculator, which are outside the Business package. Photos are Unsplash images credited in the project’s CREDITS file, and the map is a static OpenStreetMap image.
UNDER THE HOODTECH
How it is built.
Astro 7 static output, four pages, no UI framework
Astro client router: view transitions and hover prefetch
Plain CSS with self-hosted OFL fonts and metric-matched fallbacks
About 10 KB of JavaScript (gzipped), router included
IntersectionObserver reveals and counters, transform and opacity only
Before-and-after slider for pointer, touch and keyboard
Responsive WebP images from the Astro image pipeline
Formspree delivery with inline validation; photos checked in the browser only
Per-page meta and Open Graph plus HomeAndConstructionBusiness JSON-LD
Mobile Lighthouse 98–100 on all four pages (standalone build)
Want a website like this for your business?
Tell me what you need and get a fixed quote, with no obligation.