Jansen Car Detailing
A premium marketing site for a local detailing studio.
- Role
- Developer & Designer
- Year
- 2025
- Stack
- Next.js · TypeScript · Tailwind
- Status
- Live
Where this lives
Jansen Car Detailing is a small, owner-led detailing studio in Belgium. The work itself is meticulous — multi-stage paint corrections, ceramic coatings, full interior reconditioning — but the previous web presence didn't reflect any of that. Prospective clients arrived from search or word-of-mouth and bounced off a site that looked thrown together.
The brief from the owner was straightforward: a site that looks as expensive as the work, that he can update himself, and that converts curious visitors into booked appointments. No fluff. No agency vibes.
Three constraints framed the build. First, the site had to feel premium — the kind of dark editorial palette that automotive enthusiasts already associate with quality, without tipping into nightclub territory. Second, mobile had to come first: more than seven in ten visitors land on a phone, and the booking path has to fit a single thumb. Third, the owner needed to be able to add new services, update prices, swap hero photography — without ever opening a code editor.
Beyond that: every screen had to load fast on a 4G connection, every service had to be discoverable in two taps, and the visual language had to feel like the same hand designed the whole thing — typography, spacing, photography crop, button radius — even on the long detail pages.
An automotive luxury feel, kept editorial
The pillars that shaped every decision — from typography down to how a single chrome trim photo crops on mobile.
Deep dark editorial
Near-black backgrounds let the actual detailing photography do the heavy lifting. A single accent — chrome blue — used surgically for hover states and call-to-action moments, never as decoration.
Serif headlines, mono labels
Display serif for the editorial headings, paired with mono caps for the small structural labels (service tags, price tiers, time estimates). The result reads more like a print magazine than a generic service site.
Single hero, generous crops
One full-bleed hero photo per landing area. Tight crops on the detail pages — a single chrome reflection, a clay-bar pass, a polishing pad mid-rotation — instead of an everything-shot. The work shows up bigger that way.
Restrained, never decorative
Fade and rise on scroll for cards, gentle parallax on the hero image, hover states that lift cards a couple of pixels. No bouncy springs, no flashy reveals — motion as a focus tool, not a personality.
The site, on real screens
Captures from the live build across desktop and mobile. Click any image to open it fullscreen.
Fast, restrained, mobile-first
Marketing sites live or die on the first three seconds. The technical decisions all point the same direction: load fast, render right, never get in the way of the work.
Mobile-first layout
Every section was designed at 375 px first and scaled up. Booking CTAs sit inside the thumb-reach zone on phones; the desktop layout is the responsive expansion, not the starting point.
Next.js Image everywhere
Hero, gallery and service detail photos all route through next/image with explicit `sizes` hints. Format negotiation (AVIF / WebP) and responsive srcsets keep the heaviest pages comfortably under 1 MB on first paint.
Static where it can be
Service pages render statically at build time. The site has no database in the request path — the only runtime calls are the contact form submit and a small analytics ping. First contentful paint stays sub-second on 4G.
Structured service catalogue
Every service (washes, paint correction, ceramic coatings, interior detail) lives as a TypeScript record with name, description, price tier, duration and gallery. Adding a service is one entry; the listing pages, detail pages and homepage cards all derive from the same source.
Owner-editable content
Long-form copy and pricing live in a small content layer the owner edits directly through a guided UI. No deploy step, no developer handover for an evening edit before a phone call with a client.
Accessibility baseline
Real focus rings, alt text on every photo, proper heading hierarchy, contrast ratios checked at AA. None of this is glamorous — it's just the table-stakes a credible 2025 site is built on.
What changed after launch
Post-launch the owner saw a clear bump in direct contact through the site — typed quote requests, phone calls referencing specific service pages. Conversations now start with the work the visitor already understood from the site, not a blank slate.
The maintenance workflow that used to require a developer round-trip for every price tweak is gone. Adding a service, updating a hero photo, posting a before/after — all owner-controlled. The site keeps shipping without me touching it.
Mobile UX held up: bookings from phones run smoothly through the contact flow, and the homepage video plays inline without forcing a tap.
Premium-feeling client sites aren't built from clever animation libraries. They're built from typography, photography crop, restrained motion and a content model the owner can live with for years. Jansen was a chance to prove that out on a real client brief with real revenue downstream.
The repo stays small and maintainable on purpose — Next.js, TypeScript, Tailwind, one small content layer. Easy to revisit, easy to extend.