Loading

Drainage Contractor

Drainage Pro

Perimeter drainage specialists in North Vancouver, BC: camera inspections before anyone digs, drainage repair, foundation waterproofing and maintenance from one crew.

Drainage Pro website by TheBomb®
Drainage Pro mobile website by TheBomb®

The case file

What we built for Drainage Pro.

Drainage Pro is a perimeter drainage contractor based in North Vancouver, BC, working across North Vancouver, West Vancouver, Vancouver and Burnaby. The crew finds the cause of a wet basement with a camera before anyone digs, replaces the drainage that failed, waterproofs the foundation wall while the trench is open, and puts the ground back, with a Red Seal plumber running every job.

The old Webflow site had twelve thin pages, no structured data, and two H1s on every service page. We rebuilt it from the ground up in Astro on Cloudflare Workers, around Drainage Pro's new brand and a clear structure: sixteen services grouped into the four stages of a drainage job (Inspect, Repair, Protect and Maintain), four city pages, and six long-form homeowner guides.

The homepage opens on a cinematic, scroll-driven hero, then works back from the symptom. Six common signs, from water in the basement after heavy rain to a sump pump that never rests, each lead straight to the matching service. Further down, a six-layer breakdown shows everything that goes back in the ground on a full replacement, and a nine-stage timeline walks through how a job runs, from camera diagnosis to the written warranty.

Booking works with or without JavaScript, behind Cloudflare Turnstile and rate limiting, and every request reaches the office by email with an automatic reply to the customer. A floating call or text launcher shows whether the office is open, phones get a Call, Text and Book dock on every page, and a dedicated Built Better Warranty page spells out the workmanship warranty term by term.

The brief

The problem, and how we solved it.

Challenge

A wet basement is a symptom, and most homeowners search for the symptom, not the fix. Drainage Pro needed a site that meets people at the problem they can see, explains buried work they never get to see finished, and earns a booked inspection before anyone quotes a trench. Home buyers on subject-removal deadlines and strata managers needed their own paths, and the old site had too little content and no structured data to compete in Metro Vancouver search.

Solution

We built a photography-led Astro and Tailwind CSS site on Cloudflare Workers, with sixteen service pages organized by stage, four city pages with local terrain and permit detail, and six homeowner guides. A symptom-first homepage, a step-by-step process timeline, and a written warranty page make the buried work easy to understand, while one structured-data graph per page, one-hop redirects from the old URLs, and a no-JavaScript booking form handle the technical side.

Problems solved

What was in the way.

Three concrete problems on the old experience, and the fixes we shipped.

  1. Homeowners know the symptom, like water in the basement or a pump that never stops, but not which service fixes it.

    A symptom-first section on the homepage sends each of six common signs to the matching service, and the mega menu groups all sixteen services by stage: Inspect, Repair, Protect and Maintain.

  2. Perimeter drainage is buried, expensive work that customers never see once the trench is closed.

    A six-layer breakdown of a full replacement, a nine-stage job timeline, and real job photos show exactly what goes back in the ground and in what order.

  3. Thin pages, duplicate H1s and no structured data left the old site struggling against Metro Vancouver drainage competitors.

    Long-form service, city and guide pages, a single JSON-LD graph per page, a clean heading structure, and one-hop redirects from the old URLs and the www host give search engines and AI assistants a clear picture of the business.

Search visibility

SEO features built in.

Concrete search foundations for Drainage Pro, not a generic checklist.

  • HomeAndConstructionBusiness and Plumber structured data with all four service areas
  • FAQPage schema that matches the visible questions on each page
  • Sixteen service pages and four city pages with local terrain and permit detail
  • Six long-form guides on perimeter drains, drain tile and replacement costs
  • One-hop 301 redirects from the old site's URLs and the www host
  • Unique titles and meta descriptions on every page
  • llms.txt summary for AI assistants

Mobile ready

Built for phones first.

Most visits happen on a phone. The layout, type, and actions are designed for thumbs, not just shrunk from desktop.

  • Call, Text and Book dock on every page
  • Call or text launcher that shows whether the office is open
  • Full-screen menu with all sixteen services by stage
  • Static photo hero on phones, so the desktop scroll footage never slows a mobile visit
  • Booking form that works without JavaScript

Outcomes

What the build delivers.

  • Sixteen services, four cities and six guides in one clear structure

  • Booking, calling and texting one tap away on every page

  • Buried work explained with real photos and a step-by-step timeline

  • One consistent description of the business for search engines and AI assistants

  • Room to add case studies and new guides without a rebuild

Build sheet

How it was built.

Category
Drainage Contractor
Built with
  • Astro JS
  • TypeScript
  • Tailwind CSS
  • Cloudflare
Visit the live site

Ready when you are.

Tell us about your project. We reply within one business day.

Free quote · no obligation · plain-spoken advice