Website + Platform

Yardley Hastings Garage

A Next.js site for an independent garage, with a managed stocklist and customer reviews as structured data behind the marketing front end — not just a brochure site.

Next.jsSupabaseNetlify

At a glance

A Next.js site for an independent garage, with a managed stocklist and customer reviews as structured data behind the marketing front end — not just a brochure site.

Technology

Next.js 16 (App Router), React 19, TypeScript, Tailwind CSS v4 — mobile-first throughout.

Backend & data

Supabase (Postgres) behind a server-side API route — customers, vehicles and enquiries are structured tables, not a form-to-email bridge. A new enquiry upserts the customer by email first, so repeat contact from the same person links to one record instead of duplicating it. A stocklist browser and homepage preview read from the same vehicles table used to manage listings.

Animation

A scroll-triggered fade-in component reveals content as it enters view, alongside a homepage image/video carousel and a lazy-loaded background video that only starts downloading once it's needed.

Hosting

Netlify, via the official Next.js runtime plugin, on a Node 20 build.

Forms

A general enquiry form and a separate vehicle-specific enquiry form tied to a stock listing, plus a slide-out service request drawer and a floating mobile call-to-action button for booking or calling directly — built around how the site actually gets used on a phone in a car park.

SEO & reviews

Structured data (schema.org JSON-LD) for local business and vehicle listings, a generated sitemap and robots.txt, and a testimonials section pulling in real customer reviews.

Home page — forecourt hero and current stock teaser

Real workshop and forecourt photography in the hero, keeping the site grounded in the actual business rather than stock imagery, with a live teaser of current stock pulled straight from Supabase.

Site-wide navigation — servicing, bodywork and detailing

Servicing, bodywork and detailing each get their own section off a single clear nav, so the site reads as one garage with several services rather than a bolted-together set of pages.

Stocklist page — structured vehicle listings from Supabase

Each vehicle — make, model, registration, spec, photo set — is a structured Supabase record, so listings can be added, updated or removed without a developer in the loop.

Servicing — booking flow and service information

Clear service information and a straightforward booking path — the kind of detail that turns a browsing visitor into a phone call or a booking, not just a page view.

Need a site with real data behind it, not just pages?

Yardley Hastings Garage now has one place customers browse and one place stock gets managed, instead of a static site that goes stale the moment a car sells.

Start a project →

← APKI Technologies Renewables Connect →