Lucas Granite

Lucas Granite

Premium Stone Surfaces

Location

Layton, Utah

Timeline

2 Weeks

Year

2025

Full multi-page lead-gen site for a granite countertop company serving 30+ cities across Utah, Idaho, and Wyoming — 3-step MT-aware booking wizard, middleware city routing with cookie persistence, auto-generated SEO landing pages, and a dual-nav system — zero UI kits.

Responsive Design
lucasgranite.net
Lucas Granite desktop
Lucas Granite mobile

Mobile

375px viewport

Mobile bottom nav

Fixed icon bar replaces the desktop header on mobile — no external menu library

3-step booking wizard

Contact info → project details → MT time-slot scheduling, fully usable on any screen size

City landing pages on mobile

30+ auto-generated city pages load fast with city-specific copy and meta — all responsive

Performance-first mobile build

Lazy Firebase init, optimized images, and minimal JS keep load times fast on any connection

About

Lucas Granite is a marketing and lead-generation site for a granite countertop company serving 30+ cities across Utah, Idaho, and Wyoming. The site is engineered for local search — each city gets its own landing page with unique copy and reviews, and a 3-step booking wizard walks customers from inquiry to scheduled estimate in minutes. A dual navigation system, a service area carousel with embedded maps, and a live review section build trust at every scroll.

Highlights
  • Middleware City Routing

    Custom Next.js middleware reads a cookie and silently rewrites the homepage to the visitor's last-visited city — personalized return experience with no third-party routing library.

  • 30+ Auto-Generated City Pages

    Each city page is statically generated via generateStaticParams with unique H1s, meta tags, and local reviews — all templated from a single data file using a {{city}}/{{state}} replacement system.

  • 3-Step MT-Aware Booking Wizard

    Multi-step form collects contact info, project details, and a time slot — slots generated in Mountain Time (8AM–6:30PM, 30-min intervals) with honeypot spam protection and Formspree submission.

  • Dual Navigation System

    Desktop gets a sticky header with a transparent-to-solid scroll transition; mobile gets a fixed bottom icon bar — both built without any external navigation library.

  • Service Area Carousel

    Horizontal-scroll city cards with embedded grayscale Google Maps and an 'All Cities' modal organized by state — giving users a clear view of the full 30+ city service area.

  • Firebase Analytics & SEO Sitemap

    Lazy-initialized Firebase Analytics avoids blocking page load, while a dynamically generated sitemap covers all city slugs and static routes for maximum search engine coverage.

Let's build something great together

Not sure where to start?