← All workMarketing site
Studiogrey
A cabro paving yard that sells per square metre. The site answers the price question and turns it into a WhatsApp chat.
- Client
- Studiogrey
- Role
- Design, build, SEO and lead capture
- Year
- 2026

- from calculator estimate to a pre-filled WhatsApp message
- 1 tapfrom calculator estimate to a pre-filled WhatsApp message
- town landing pages generated from one data file
- 16town landing pages generated from one data file
- Lighthouse SEO and accessibility on every page
- 100Lighthouse SEO and accessibility on every page
The problem
Every buyer of cabro arrives with the same question, how much per square metre, and every competing site answers it with a phone number. Buyers are on Android phones on mobile data, often standing in the compound they want paved, and the sale is lost in the gap between reading a page and explaining what they want in a chat.
What I built
- 01A quantity and cost calculator: length by width or m², use-case selector that recommends a thickness and says why, wastage, supply-only or supply-and-lay, town for transport, then one button that opens WhatsApp with every input and the estimate already typed.
- 02Page-aware conversion paths: the sticky Call and WhatsApp bar, the product pages and the town pages each pre-fill a different message, so the customer never has to explain what they were looking at.
- 03A one-field 'call me back' capture in the hero, the closing band and a once-per-visit slide-in, posting to a free form service with a WhatsApp fallback so nothing is lost when the form is not configured.
- 04Sixteen local landing pages with genuinely different content per town, soil, estate access, typical jobs, generated from a typed data file rather than a template with the name swapped.
- 05Four buying guides written from the trade, thickness, prices, cabro versus a slab, what to check before buying, with FAQPage schema, and LocalBusiness and Product schema across the site.
- 06Every business fact and price in data files with comments, so the owner changes a price in one place and the calculator, product pages and price guide update together.
- 07A design taken from the material: a palette sampled from the block photos, condensed stencil numerals for the thickness figures, a unipaver zigzag band as the only decoration, and a spec-sheet rail layout instead of the centred-card template.
How it was measured
- Six GA4 events, WhatsApp click, phone click, calculator completed, calculator sent, quote form, call-back, each carrying the page and button that produced it.
- Titles and descriptions measured on all 38 pages and cut to what Google shows; every page prerendered static with a canonical, sitemap and Open Graph image.
Stack
- Next.js 16
- TypeScript
- Tailwind 4
- Vercel
- Web3Forms
- Cloudflare Email Routing
- GA4
Result
Live on its own .co.ke domain within two days, fully static, with the owner editing prices and towns in one file. The calculator's WhatsApp send removes the hardest step in the sale, the customer explaining the job, and every lead arrives with the page, product and area already attached.