Contractor Website Lead Capture Local SEO

Open Air Construction

Charlotte deck and outdoor-living contractor website — built for conversions, content, and search visibility.

Open Air Construction is a production-grade marketing site for a Charlotte-area deck and outdoor-living contractor. It combines a polished Material 3 design system with typed content, an MDX blog, and a full lead-capture pipeline — from first visit to inbox notification.

The Challenge

Local contractors need more than a brochure site: they need fast pages, trust signals, service-area coverage, and a reliable way to turn consultation requests into actionable leads — without sacrificing editorial control or SEO fundamentals.

What We Built

A Next.js 16 App Router application with Tailwind CSS v4 and a custom Material 3 token layer. Content lives in typed TypeScript modules and MDX blog posts, so updates are safe, structured, and rebuild automatically in development. Light and dark themes are handled via next-themes with a header toggle.

Key Capabilities

Typed Content Layer Services, team, FAQs, values, and site metadata in `content/*.ts` — TypeScript catches structural mistakes at build time.

MDX Blog Drop-in `.mdx` posts with frontmatter; loaded by a custom blog loader and rendered with `next-mdx-remote`.

Lead Pipeline Contact form Server Action with Zod validation, Postgres persistence, and Resend email notifications.

Admin Inbox Protected `/admin` area with bcrypt auth, lead filtering, status management, and CRM sync hooks.

Integration Seams JobTread CRM and AI enrichment gateways wired into the lead flow — activate by setting env keys, no plumbing changes.

Technical SEO LocalBusiness + Service + FAQ JSON-LD, sitemap, robots.txt, dynamic OG images, and Lighthouse SEO score of 100.

Core Stack

Frontend

Next.js 16, TypeScript, Tailwind CSS v4, Material 3 tokens, next-themes

Content

Typed TS modules, MDX blog, next-mdx-remote/rsc

Backend & Data

Server Actions, Zod, Postgres (Neon), Alembic migrations

Ops & Quality

Resend email, Vercel deploy, Vitest + Testing Library

Highlights

Editor-friendly workflow: Non-developers can add blog posts and update service copy without touching layout code.
Lead-to-CRM ready: Email notifications today; JobTread and AI enrichment activate with environment keys.
Local search foundations: Structured data, canonical URLs, and a post-launch checklist for Search Console and Google Business Profile.

Visit live site Back to showcase