Upright Roofing & Gutters — central Oklahoma roofing marketing site

The problem

Most Oklahoma roofing sites look the same: navy-and-red patriotic banners, stock crew photos, and a generic "family-owned since YYYY" line that could belong to anyone. After a hailstorm, homeowners are choosing a contractor at the same speed they'd pick a restaurant — and out-of-state storm chasers are winning that race on volume alone. Upright is an owner-operated, central-Oklahoma crew that doesn't sub out work and doesn't chase storms. The site needed to make that obvious in the first scroll.

What we built

A purpose-built marketing site for Upright Roofing & Gutters at uprightok.com: dedicated service pages for roofing, gutters, metal roofing, storm damage, and home additions; a service-area page covering twelve cities across Garvin, McClain, Cleveland, Grady, Stephens, and Oklahoma counties; an editorial "Journal" of MDX posts on attic ventilation, hail-damage claims, material comparisons, and contractor selection; and a multi-field quote form that emails the company and the lead simultaneously.

Technical highlights

Form security without a third-party CRM

Quote requests are validated with Zod, gated by Google reCAPTCHA v2 (invisible) plus a honeypot field and a three-second minimum-submit window, then sent through Resend with React Email templates — one notification to the owner and an auto-reply to the lead. No CRM platform in the middle, no monthly seat fees, no leads siloed in someone else's database. The owner's inbox is the CRM.

Local SEO and structured data on every page

Every service page emits Schema.org JSON-LD (Service, Place, Organization, ContactPage) tied to the central Oklahoma service area. Canonical URLs, OpenGraph metadata, and a redirect map cover legacy URLs from the prior site so existing search rankings transfer cleanly. The result is structured signal that local roofing search results actually reward.

A design system worth documenting

Dark-slate palette (#0F172A bone, #F1F5F9 ink, #C26A4E burnt-sienna accent), Playfair Display for display type and Manrope for body, a credo block with an illuminated drop cap carrying a Colossians 3:23 scripture pull-quote, and a grain-texture SVG overlay applied withmix-blend-mode: screen. Tailwind 4 @theme inline tokens make the palette self-documenting. The whole system is captured in a 180-line DESIGN.mdcommitted to the repo so future contributors don't guess.

Accessibility and security headers as a baseline

16px minimum body text, 4.5:1 contrast minimum, 44×44px tap targets, focus rings on every interactive element, and motion that respects prefers-reduced-motion. CSP, HSTS, X-Frame-Options, and Referrer-Policy ship as response headers. None of this is exotic; all of it should be table stakes.

Stack

• Next.js 16 (App Router, Turbopack)
• React 19 + TypeScript
• Tailwind CSS 4 with @theme inline token-based theming
• react-hook-form + Zod for validated forms
• Resend + React Email for transactional mail
• Google reCAPTCHA v2 invisible + honeypot + submit-gate
• MDX (gray-matter frontmatter) for the Journal
• Vercel for hosting and analytics

Outcome

Upright Roofing & Gutters now has a site that looks like the crew behind it: owner-operated, central Oklahoma, no stock photography, no storm-chaser polish. Quote requests land directly in the owner's inbox within seconds, with an automatic reply to the lead so no one feels ignored. The Journal is steadily accumulating the kind of educational content that local search rewards over months, not weeks.

Why it matters to clients

Small service businesses don't need a SaaS stack to compete locally — they need a site that loads fast, ranks for the searches their customers actually run, and turns visitors into phone calls. Upright is the proof we can deliver that without forcing the client into a recurring platform bill.