Brakeline Automotive Works

Brakeline Automotive Works — A workshop that earns trust before the bay door opens

A concept design exploring how a modern auto service shop should show up online

This is a portfolio concept piece, not a live client engagement. We built it to demonstrate how Lindevo would design and ship a website for an independent auto workshop competing against dealerships and chain franchises. The brief we wrote for ourselves: "a customer with a check-engine light should be able to book a diagnostic in under 90 seconds and feel calmer doing it."

What the design solves

Independent shops live and die on trust. Most of the sites we audited in the niche either look stuck in 2012 (template, clipart, "Submit Form" buttons) or pretend to be a dealership and lose all the warmth that a neighborhood workshop actually has. Brakeline's mockup deliberately splits the difference — industrial typography, hard red accents, and a candid hero photo, paired with soft microcopy that explains what's wrong with my car before it sells.

The hero leads with a floating diagnostic card showing live workshop status (a pulsing "Workshop Open" indicator) — the digital equivalent of seeing the bay doors rolled up from the street. Below it, three service tiers (Maintenance, Diagnostics, Fleet) sit in a sharp grid with transparent starting prices. No "Contact for quote." Visitors leave with a number in their head before they leave the page.

A dedicated Fleet Services section addresses the highest-LTV customer most independent shops never market to: small business owners running 3–20 vehicles. That section uses a different rhythm — wider, calmer, more enterprise — to signal that Brakeline is set up for invoicing, not just walk-ins.

Design system highlights

• Industrial red primary (#ba1a1a) paired with workshop-grayscale photography for a tactile, mechanical feel
• Hard-edged frames around the hero image to evoke a workshop bay door — a small, durable detail that competitors miss
• Live status indicator with a CSS pulse animation, anchored to the hero card
• Process timeline built as a four-step horizontal grid that reads diagonally on mobile, preserving rhythm without forcing a vertical stack
• Accessible focus rings on every interactive element — required for businesses that get older customers booking from a phone

Stack

• TanStack Start with React 19 for SSR and per-route streaming
• Tailwind v4 @theme tokens scoped per mockup so themes don't leak between routes
• Framer Motion for hero stagger animations (kept minimal — auto customers are not impressed by parallax)
• Deployed on Vercel with edge caching

Want this for your auto shop?

Every component you see here is real and themeable: navbar, hero, service tier grid, fleet block, process timeline, locations map block, and contact form. We can rebrand it to your shop, swap in your real photography, wire up booking through your existing software, and ship the production site in around two weeks. Start a conversation →