Skip to content
All client work
Case study · Pro Automotive Center

A high-tech site for a shop that fixes what others can’t.

How KumoKodo Studio rebuilt Pro Automotive Center — a Corpus Christi auto repair and computer-diagnostics shop, in business since 1997 — as a premium "Precision Diagnostics" site that converts drivers into appointment requests, with a real inquiry pipeline and a Sanity CMS the owner edits himself.

1997
Serving since
5
Pages
6
Core services
5.0
CARFAX rating
Client
Pro Automotive Center · Corpus Christi
Industry
Auto Repair & Diagnostics
Services
Design, build, content, CMS
Status
Live — proautomotive.us
The challenge

Make 25 years of trust look the part.

Pro Automotive Center is a Corpus Christi institution — diagnostics, brakes, A/C, engine, maintenance, and the tough jobs other shops turn away. It needed a site that matched its reputation, led with its diagnostics edge, and turned visitors into booked appointments — one the owner could keep current himself.

A trusted shop with a dated presence

Since 1997

  • Pro Automotive Center has kept Corpus Christi’s cars running since 1997 — but the old site didn’t reflect that credibility, and its SSL certificate had lapsed
  • The shop’s real edge — factory-level computer diagnostics that crack problems other shops can’t — was buried instead of led with
  • The site needed to turn drivers into booked appointment requests, not just list a menu of services

Owner-editable, without a developer

Self-serve content

  • The owner, Jamie, needed to update services, reviews, FAQs, and photos himself — no code, no deploys, no waiting on us
  • Customers say the real storefront photo helps them find the shop, so swapping key imagery had to be effortless
  • Every claim had to be verifiable — anything we couldn’t prove had to come out, no matter what old listings said
What we delivered

A complete, self-editable presence.

Design, build, content, and the integration plumbing — shipped as one production-ready site, tuned to convert and handed over so the owner keeps control.

01

A “Precision Diagnostics” brand site

A clean, high-tech precision-shop design that leads on the computer-diagnostics edge — light surfaces punctuated by cinematic dark "diagnostics" sections, an animated diagnostic console, and count-up stats, all built mobile-first and reduced-motion aware.

  • Signal-blue + electric-cyan brand system
  • Saira Condensed / Archivo / IBM Plex Mono
  • Five pages: Home, Services, About, Reviews, Contact
  • Accessibility + mobile passes
02

A real appointment-request pipeline

The primary conversion is an appointment request — a working form wired to email delivery, validated and spam-hardened server-side, with a graceful fallback so it never hard-fails if a key is missing.

  • Server Action + Zod validation
  • Honeypot spam trap
  • Resend email delivery
  • Logs instead of throwing when unconfigured
03

An owner-editable Sanity CMS

An embedded Sanity Studio at /studio lets Jamie edit services, reviews, FAQs, process steps, homepage photos, and the Google reviews link with a Google login — no code, no deploys — and publishing triggers a revalidation webhook so changes appear almost instantly.

  • Embedded Studio at /studio (Google login)
  • Instant-publish revalidation webhook
  • Static fallback if Sanity is ever down
  • No deploys to update content
04

Verified proof, and only verified proof

We stripped every claim we couldn’t substantiate and rebuilt the trust story on provable signals — so the credibility holds up to scrutiny instead of inviting it.

  • Serving since 1997 · BBB Accredited
  • CARFAX 5.0 rated
  • Factory-level / ALLDATA diagnostics
  • Real reviews pulled from public profiles
Technical approach

Fast, editable, and maintainable.

A static-first Next.js site backed by a headless CMS with a static fallback — so it stays fast and cheap to host, and keeps working whether or not Sanity is connected.

Next.js 16 frontend

Next.js App Router with React Server Components. Business facts used for SEO and structured data — name, address, geo, hours — live as typed constants in a single source of truth, so the same values stay consistent across every server and client component.

  • Next.js 16 (App Router) + React
  • TypeScript end to end
  • Tailwind CSS v4 + Motion
  • Business constants in src/lib/site.ts

Sanity CMS with a static fallback

A data layer fetches editable content from Sanity and falls back to typed content in code when Sanity is unconfigured, empty, or erroring — so the site builds and runs identically before Sanity is connected, and degrades gracefully during an outage.

  • Studio embedded at /studio
  • Falls back to content.ts / site.ts
  • Tag-based Next data cache + revalidation
  • Publish → /api/revalidate webhook

SEO + local discovery

Per-page metadata, Open Graph and Twitter cards, AutoRepair JSON-LD, an auto-generated sitemap and robots, and an llms.txt — so the site is legible to search engines, local results, and AI search alike.

  • sitemap.ts + robots.ts
  • AutoRepair structured data
  • Open Graph / Twitter cards
  • llms.txt for AI-search visibility

Stateless appointment plumbing

The only dynamic surface is the appointment-request Server Action. There’s no customer database and no accounts — inquiries go to email, editorial content lives in Sanity, and everything else renders statically.

  • Server Action → Resend delivery
  • No customer DB, no auth
  • Honeypot + Zod validation
  • Logs when email keys are unset
Key decisions

Why we built it this way.

Lead on the diagnostics edge

Most shops sell "repair." Pro Automotive’s real differentiator is computer diagnostics that crack problems other shops can’t. The whole site — from the headline to the dark diagnostic sections — leads with that.

A CMS the owner actually uses

Sanity’s embedded Studio with a Google login means Jamie edits content and swaps photos himself, with no code and no deploys — and the site degrades gracefully if Sanity is ever down.

Only verifiable claims

We removed every claim we couldn’t prove and rebuilt trust on provable signals — since 1997, BBB Accredited, CARFAX 5.0, factory-level diagnostics — so the credibility survives scrutiny.

Constants in code, content in CMS

Business facts that feed SEO and structured data stay as typed constants for consistency; editorial content lives in Sanity for the owner to edit. The right split for a lead-gen site.

What shipped

Live at proautomotive.us.

The experience

  • Full "Precision Diagnostics" redesign leading on the computer-diagnostics edge
  • Five pages: Home, Services, About, Reviews, Contact
  • Animated diagnostic console, count-up stats, and scroll reveals — reduced-motion aware
  • Real storefront photo as a "look for the blue sign" banner on Contact
  • Mobile menu, hero, and layout polish throughout

The plumbing

  • Appointment-request form via Server Action + Zod + Resend
  • Sanity CMS embedded at /studio with instant-publish revalidation
  • SEO pass: AutoRepair schema, Open Graph, sitemap, robots, and llms.txt
  • "Designed & built by KumoKodo Studio" footer credit
  • Deployed on Vercel, auto-building from GitHub

Serving Corpus Christi drivers on domestic and Japanese makes — diagnostics, brakes, A/C, engine, maintenance, and the jobs other shops can’t crack.

Built with

Technology stack.

Next.js 16ReactTypeScriptTailwind CSS v4MotionSanity CMSResendJSON-LDVercelSaira CondensedArchivoIBM Plex Mono
See it live

Visit Pro Automotive Center.

Take a look at the live site — or tell us about a business of your own that needs a site that converts and stays easy to run.