Concept project
Torque Auto Repair
A complete working concept site for a fictional independent garage. Raijin Studios is a new studio, so we built the kind of site we would make for a repair shop, including an estimator you can use.
The brief
Torque Auto Repair is a fictional independent garage. The business, its prices and its customer reviews in the demo are placeholder content, written to show how real content would work. The estimator ranges are illustrative only.
The brief we set ourselves: the biggest worry for a driver is the bill, so the site should give a believable price range straight away and make the next step, a call or an inspection, obvious.
Goals
- Give a price range before the visitor has to call.
- Make the phone number and the next step visible on every screen.
- Show social proof in a format that works on a small screen.
- Keep the page light and quick for visitors in a hurry.
Design decisions
Price transparency
The estimator turns a service and a vehicle size into a range, which removes the biggest barrier to getting in touch.
Bold, industrial look
Tall, condensed Oswald capitals with Barlow body text, near-black surfaces and a safety-yellow accent suit a workshop and give strong contrast for outdoor phone use.
Signature effect: speed lines
Streaks rush across the hero and a small speedometer needle swings as you scroll down the page. For visitors who prefer reduced motion the streaks stop and the needle stays still.
A carousel that respects people
The reviews carousel has previous and next buttons, a visible position count and no auto-advance, and its animation is switched off for visitors who prefer reduced motion.
Plain promises
Written quotes, returned parts and a warranty are stated simply, as in a real conversation at the counter.
Mobile-first decisions
- The phone layout was designed first, with the call button always one tap away.
- Select menus are native, so they use the platform's own pickers on phones.
- Carousel buttons are 48 pixels across.
- Nothing scrolls sideways at 390 pixels wide.
Features in the demo
Everything below is actually present in the live concept site, which you can open and try.
- Service cards
- Repair estimator with a service selector and a vehicle size selector that changes the price range
- Reviews carousel with previous and next buttons, a position status and wrap-around
- Opening hours and location
- Tap-to-call phone links
- Reviews clearly marked as fictional placeholder content
Measured Lighthouse scores
- 100Performance
- 99Accessibility
- 100Best practices
- 91SEO
Measured on 2026-10-15 with Lighthouse 12.8.2, mobile form factor. Each demo was audited from a local web server on this machine using Lighthouse's default mobile emulation and throttling, headless Chromium, one run per demo. The server sent the demo's real security headers but not the noindex header used on the showcase, because a real client site would be indexable. Scores vary a few points between runs and machines.
Tech and security
- Hand-coded HTML and CSS with a small amount of vanilla JavaScript, with no framework or page builder.
- Self-hosted fonts, so no third-party font requests.
- A strict Content-Security-Policy with no inline code, enforced by our build scan.
- No trackers, no cookies and no third-party scripts.
What we'd do for a real client next
- Replace the sample reviews with genuine ones and connect the estimator to the shop's real price list.
- Add online booking and text-message quote approval.
- Write AutoRepair structured data and align the Google Business Profile.
- Add a care plan so prices, hours and seasonal offers stay current.
Ready for a faster, safer website?
Tell us about your business. We review your current site first, reply within one business day, and there is no obligation.