Garden & Yard Renovation Pricing Website Template

Quick summary

Groundwork is a single-page template built for outdoor flooring installers who lay porcelain pavers, composite decking, and resin-bound gravel. It leads with a full-width before-and-after case study slider, layers in guarantee-led scroll sections, and closes with an instant price configurator. The whole page is designed to build confidence fast and convert visitors into booked installations.

Who this template is for

This template is built for trade businesses that install hard outdoor surfaces directly to homeowners. If your work involves ripping out failed gardens and replacing them with something structural and lasting, this page was designed around your sales process.

• Garden and yard flooring installers offering porcelain, composite, or resin-bound surfaces
• Outdoor trade contractors targeting UK homeowners, post-extension clients, and landlords preparing rental properties
• Service businesses that want to show fixed pricing upfront rather than asking visitors to call first

What problem this template solves

Most outdoor trade websites ask visitors to "get in touch" before showing any numbers. That friction loses the homeowner who is just trying to work out whether the job is within budget. This template removes that barrier entirely.

• Visitors see a ballpark price before entering any contact details, earning their trust first
• Cracked patios, failed lawns, and post-build construction sites are addressed directly in the copy and case study, so the right audience self-identifies immediately
• The guarantee-led structure answers objections around sinking, shifting, and weed growth before a visitor has to ask

What you get with this template

You get a fully structured, single-page layout with five distinct content sections, each serving a specific role in the conversion journey. The page moves a visitor from visual impact, through proof, to a committed price request in one continuous scroll.

• A full-width interactive before-and-after slider as the hero, paired with a stat bar showing project time, area covered, and guarantee length
• A masonry gallery grid displaying eight completed projects, each expandable into a detail modal with cross-section diagrams and material close-ups
• A three-step price configurator covering surface type, approximate area in square metres, and postcode, with an instant ballpark price shown before any contact details are collected

Feature list

The template ships with purpose-built components matched to the exact sales flow of an outdoor flooring installer.

Interactive Before-and-After Drag Slider

A full-width hero slider splits a single garden into its before and after states. Visitors drag an amber handle to reveal the transformation. A stat bar below the image displays job duration, square meterage, and guarantee length at a glance.

Guarantee Grid with Cross-Section Detail Cards

Three bold guarantee headlines open the section before any supporting copy appears. Each guarantee card expands to show cross-section diagrams of sub-base layers, drainage membranes, and jointing compounds, alongside a close-up material shot and a homeowner quote with their town and project type.

Eight-Project Masonry Gallery

A staggered masonry grid shows eight completed gardens. Each project card carries its own call-to-action button. Clicking a card opens a full detail modal with project specifics and supporting visuals.

Three-Step Price Configurator

Visitors select their preferred surface type in step one, set an approximate area using a simple square-metre slider in step two, and enter their postcode and preferred start month in step three. An instant ballpark price in GBP appears before any personal contact details are required.

Sticky Mobile Call-to-Action Bar

On mobile, the primary "Get My Fixed Price" call-to-action button stays pinned to the bottom of the viewport throughout the scroll. This keeps the conversion path visible at every point in the journey without interrupting the reading flow.

Homeowner Testimonial Section

Social proof is presented as a dedicated scroll section with quotes from named homeowners, each identified by first name, town, and project type. This ground-level specificity reinforces the guarantee-led message with real, locatable proof.

Page sections overview

Design & branding system

The visual identity follows an Industrial Raw theme. The palette reads like a freshly swept workshop floor: authoritative and no-nonsense, with amber used only where action or assurance is needed.

• Core colours: deep command navy (#0B1D3A), poured-concrete mid-gray (#7B8794), chalk-line white (#F4F5F7), and hi-vis amber (#E8A317) reserved for calls-to-action, guarantee callouts, and price figures
• Typography: Plus Jakarta Sans in bold and extra-bold weights for headings, paired with DM Sans for body copy
• Texture and detail: grain overlay on the hero slider, brushed-steel edging references in photography direction, and warm LED strip lighting in after-state imagery reinforce the workshop-grade aesthetic

Mobile & speed optimization

The page is built mobile-first. Every interactive element has been considered for thumb reach and small-screen legibility from the ground up.

• The sticky amber call-to-action bar pins to the viewport bottom on mobile so the conversion prompt is always within reach
• Server Components handle all static content sections, while Client Components are reserved for the interactive slider, gallery modal, and price configurator
• The three-step configurator uses a simple slider input for area selection, keeping the mobile interaction clean and requiring minimal typing

How this template helps you convert

The page earns commitment by showing value before asking for anything. Each scroll section is structured to reduce a specific objection before it forms.

1. The before-and-after slider creates immediate visual proof of the transformation, giving visitors a concrete reason to keep reading before any claims are made in copy.
2. The guarantee grid addresses the three most common hesitations around outdoor paving quality (movement, drainage, and long-term appearance) with structural detail, not just words.
3. The price configurator shows a real GBP ballpark figure before collecting a name or email, making the first step feel low-risk and building the trust needed to complete an enquiry.

Other information about this template

This template is localised for the United Kingdom market. All pricing outputs use GBP, area measurements use square metres, and the postcode field in the configurator is formatted for UK postcodes. It is well suited to any garden and yard flooring installer operating in the UK home improvement and trade services space.

• Scroll animations include staggered gallery reveals, scroll-triggered section entrances, and modal expand transitions
• The footer follows a linear single-row pattern, keeping the page exit clean and uncluttered
• The template style is Gallery and Detail, meaning it combines visual project proof with structured information rather than leaning purely on one or the other
• This layout suits businesses where the product needs to be seen and the price needs to be justified before a visitor will commit to an enquiry

Show more