Websites · React
Auto repair garage
Straightforward auto repair shop site with a price list, how a service visit works, reviews, hours and booking.
What you get
A site for an independent garage or auto repair shop: services and a clear price list, how a visit works from drop-off to pick-up, customer reviews, opening hours and a service booking form. All content lives in src/site.ts.
Files
Exactly what is copied into a new project: 13 files, nothing generated.
Explorer 13
src/site.ts
import type { Site } from "./types"; /** Everything this site shows. Edit freely. */export const site: Site = { "brand": "Kowalski Auto Care", "nav": [ { "label": "Services", "href": "#services" }, { "label": "Prices", "href": "#prices" }, { "label": "Reviews", "href": "#reviews" }, { "label": "Hours", "href": "#hours" } ], "navCta": { "label": "Book a service", "href": "#contact" }, "sections": [ { "kind": "hero", "variant": "split", "eyebrow": "Independent garage · Since 1998 · Milwaukee", "title": "Honest repairs, a written estimate, and your old parts back.", "text": "Family-run shop with four bays and six technicians. We fix most makes, including hybrids, and call before doing anything not on the estimate.", "primary": { "label": "Book a service", "href": "#contact" }, "secondary": { "label": "See prices", "href": "#prices" }, "visual": { "type": "mock", "title": "Estimate · 2019 Honda CR-V", "rows": [ { "label": "Oil & filter change", "value": "$79" }, { "label": "Front brake pads & rotors", "value": "$389" }, { "label": "Tire rotation", "value": "Free" }, { "label": "Cabin air filter", "value": "$45", "tone": "#b45309" } ], "footer": "Approved by text at 10:42 am. Ready by 4 pm." } }, { "kind": "features", "id": "services", "eyebrow": "Services", "title": "What we work on", "columns": 3, "items": [ { "title": "Servicing", "text": "Factory-schedule maintenance that keeps your warranty valid.", "icon": "wrench" }, { "title": "Brakes & suspension", "text": "Pads, rotors, shocks and alignment, with a free brake check.", "icon": "shield" }, { "title": "Diagnostics", "text": "Check-engine lights and electrical faults, with a printed scan report.", "icon": "chart" }, { "title": "Hybrids", "text": "Battery health checks and hybrid servicing on most Toyota and Honda models.", "icon": "bolt" }, { "title": "Tires", "text": "Supply, fit and balance, plus seasonal tire storage for $60.", "icon": "truck" }, { "title": "AC & heating", "text": "Recharge, leak tests and blower repairs before the season turns.", "icon": "sun" } ] }, { "kind": "menu", "id": "prices", "eyebrow": "Prices", "title": "Common jobs, common prices", "text": "Labor is $128 per hour. Prices below include parts for most sedans and small SUVs.", "groups": [ { "name": "Maintenance", "items": [ { "name": "Synthetic oil change", "text": "Up to 5 quarts, filter, 21-point check", "price": "$79" }, { "name": "30k-mile service", "text": "Filters, fluids, inspection", "price": "$289" }, { "name": "Wheel alignment", "price": "$119" }, { "name": "State emissions test", "price": "$30" } ] }, { "name": "Repairs", "items": [ { "name": "Brake pads, one axle", "text": "Pads and labor", "price": "$219" }, { "name": "Battery replacement", "text": "Including tested battery", "price": "$189" }, { "name": "Diagnostic scan", "text": "Credited if we do the repair", "price": "$95" }, { "name": "AC recharge", "price": "$159" } ] } ] }, { "kind": "steps", "eyebrow": "How it works", "title": "Drop off at 8, pick up by 5", "items": [ { "title": "Book and drop off", "text": "Choose a day online. Drop the car from 7:30 am or use the key box overnight." }, { "title": "Approve by text", "text": "We inspect, then text you a priced estimate with photos. Nothing extra without your OK." }, { "title": "Pick up", "text": "Most jobs are done the same day. Pay at the desk or by link, and take your old parts if you want them." } ] }, { "kind": "quotes", "id": "reviews", "eyebrow": "Reviews", "title": "From our customers", "items": [ { "quote": "Dealer quoted me $1,100. Kowalski found a $90 sensor and showed me the old one.", "name": "Denise R.", "role": "Customer since 2017" }, { "quote": "They text photos of the problem. I have never had a mechanic do that before.", "name": "Marcus J.", "role": "Bay View" }, { "quote": "Three cars in our family, all serviced here. Same people every time.", "name": "The Lindqvists", "role": "Customers since 2004" } ] }, { "kind": "hours", "id": "hours", "eyebrow": "Hours", "title": "Opening hours", "text": "Free loaner bikes and a shuttle within 3 miles while you wait.", "rows": [ { "day": "Monday – Friday", "time": "7:30 – 17:30" }, { "day": "Saturday", "time": "8:00 – 12:00" }, { "day": "Sunday", "time": "Closed" } ], "address": "2316 S Kinnickinnic Ave, Milwaukee, WI", "phone": "(414) 555-0193", "email": "service@kowalskiauto.com" }, { "kind": "contact", "eyebrow": "Booking", "title": "Book a service", "text": "Tell us the make, model and what you have noticed. We confirm your slot by text within the hour.", "fields": [ "name", "phone", "email", "date", "message" ], "button": "Request booking" } ], "footer": { "text": "Independent auto repair in Bay View, Milwaukee.", "columns": [ { "title": "Shop", "links": [ "2316 S Kinnickinnic Ave", "(414) 555-0193" ] }, { "title": "Services", "links": [ "Servicing", "Brakes", "Diagnostics", "Tires" ] }, { "title": "About", "links": [ "Warranty", "Careers" ] } ], "legal": "© Kowalski Auto Care. Sample content: replace it in src/site.ts." }};Remix
Remix this template
Describe what to change and the agent starts from Auto repair garage's files. The box is already started for you: finish “Start from Auto repair garage and …”
Dependencies
Documented from the template's package.json. The runtime has a prebuilt dependency set for Vite + React + TypeScript, so installs are fast.
- react^19.1.0
- react-dom^19.1.0
- vite^6.3.0
- @vitejs/plugin-react^4.4.0
- tailwindcss^4.1.0
- @tailwindcss/vite^4.1.0
- typescript^5.8.0
How it runs
- Framework
- Vite + React + TypeScript
- Dev command
- npm run dev
- Build command
- npm run build
- Output directory
- dist
- Port
- 5173
- Entry route
- /
Projects run in an isolated sandbox with a live preview. Read the projects documentation for settings, snapshots and deployment.
Keep browsing
All templates
Architecture studio
Editorial architecture practice site with selected projects, the studio's approach, a short history and the team.
Boutique hotel
Elegant small-hotel website with rooms and rates, the restaurant, guest notes, arrival details and a stay request form.
Static website
Plain HTML, CSS, and JavaScript with no build step. Ideal for simple sites and learning.
Build on Auto repair garage
Create a free account, start from this template, and ask the AI agent to turn it into your app.