Car service and detailing website
A car service and detailing site “Garage 42” in a dark garage with an orange accent: a header with a free-lift status, a hero with a car silhouette that draws itself and highlights zones with prices, a service calculator by car class, tabbed before/after with a curtain, a process with a rail that fills on scroll, mechanics with a 3D tilt, reviews with marquees and counters, weekly slot booking from today, a map with a route that draws itself and a footer with an outlined word. Unbounded, Inter Tight and JetBrains Mono.
A service site where customers see at once what will be done to their car and for how much: zones light up on the silhouette, a calculator prices by car class, before-and-after shows the result, and booking takes a couple of steps. The garage in the demo is fictional.
What it is made of
10 catalog blocks in page order. Each one is installed with its own command; nothing is recreated.
1. Header
Car service navbar with an emblem and a live bay statusnavbar-034
A pulsing “lift #2 is free” status, phone, “Book”, burger.
2. First screen
Video intro hero: loader, a car driving in, a freeze frame and a wordmark behind the roofhero-046
A Supra drifts into frame and freezes on a night bridge, «Garage 42» rises behind the roof.
3. Calculator
Detailing service calculator: chips, car class, live totalauto-001
Car class and service chips, live total and time, “Book” carries the choice to booking.
4. Before / after
Detailing before/after: a draggable curtain with “lights / body / interior” tabsauto-002
A comparison curtain with “lights / body / interior” tabs.
5. Process
Car service process: a four-step timeline with scroll progressauto-003
Four steps with a rail that fills on scroll.
6. Mechanics
Car service masters: photo cards that tilt toward the cursorpeople-014
Cards with a 3D tilt and glare, experience and cars.
7. Reviews
Car service reviews: counters, a brand ribbon and two running card rowstestimonials-026
Counters roll up, a brand strip, two review rows moving towards each other.
8. Booking
Car service booking: a week slot grid and an order panelauto-004
A week × hours grid from today, busy slots struck through, a stub form.
9. Contacts
Car service map and contacts: an svg scheme with a route and a bay pinmap-011
An SVG block map, the route draws itself, a pulsing pin.
10. Footer
Car service footer with a huge outlined wordmarkfooter-033
Columns, contacts, a giant outlined “Garage 42”.
Pro
The exact composition, page source and agent link are in PRO
The demo and the block list are open to everyone. Subscribers see every block's props as in the demo, the theme rules, the image prompts and one link an AI agent uses to build the same page.
Get PROFAQ
- What is the “Car service and detailing website” page made of?
- 10 catalog sections in order: Car service navbar with an emblem and a live bay status, Video intro hero, Detailing service calculator, Detailing before/after, Car service process, Car service masters, Car service reviews, Car service booking, Car service map and contacts, Car service footer with a huge outlined wordmark. Each one is a separate VibeUI item.
- How do I build this page with an AI agent?
- Press “Copy the scenario for AI” and paste it into Cursor or Claude Code: the agent gets the page source, shared theme rules and image prompts, and installs every section from the registry with the shadcn CLI.
- Is the scenario free?
- The live demo and the list of sections are open to everyone. The page source and the instruction for the agent come with PRO.