K&J Shine Works

The problem

The original site was WordPress with a shop plugin, which sold a detail as a product with a cart and a checkout. The single static page that replaced it was fast, but it had nowhere to grow, and when online booking arrived it was a plain text link under a large Call for a Free Quote button. A phone call is the slowest way to book a detail: the crew is usually mid-job, and the customer is reading the next listing while it rings. There was no page for ceramic coating, the job worth most, none for the towns the mobile service reaches, and nothing that showed the work before somebody asked the price.

What got built

Still plain HTML, CSS and JavaScript, with no framework and nothing to patch, but now assembled by a small Node build. The header, the footer and the layout exist once, every page is stamped out from them, and the sitemap and the llms.txt are rewritten on the same pass. The build refuses to run on a title or description too long for a search result, on an em dash, on a page hero missing its photograph or its placeholder, and on a link preview rendered from an old title. Booking is Mobile Service Sync, our CRM for mobile crews, embedded on the site: it looks the plate up to price the right size of vehicle and posts each finished booking back to the page, where the Google Ads tag counts it once, with its own value. The look is night (black paint, chrome lettering, ice) with a real day palette in pearl and gunmetal, and the motion starts from the shop's own photographs: water beading on a hood, animated as a slow loop that mounts only after the page has loaded, and a snow-foamed tailgate where the foam slides off to clean paint.

Details worth naming

• Book Online is the first button in the header, the hero and every closing band. The phone number keeps two prominent places, the footer and the contact page, plus the call icon on a phone's action bar.
• Each completed booking is reported to Google Ads by the scheduler itself, once per booking and with its real value, so the campaign is judged on booked jobs rather than clicks. A tap on the phone number counts separately.
• Before and after pairs as a single frame: a wand line sweeps across once, then follows a finger or a mouse, with a real range input underneath so a keyboard and a screen reader can work it too.
• A page for each service and for each town the van reaches (Marion, Hiawatha, Robins, Mount Vernon), each opening on a different one of the shop's photographs, with customers' plates blurred.
• Night and day as two designed palettes, and the car from the shop's logo traced to a vector mark that takes either colour. Every loop and glint switches off under reduced motion, and the loops never load on a phone.
• Privacy and SMS terms that say exactly what is texted and how to stop, which is the wording a carrier reads before it lets a business text its customers. Like every legal page we build, they are set with a contents column.
• All 29 addresses the WordPress site used, its product pages included, redirect to the page that replaced each one.