Create a new and improved version of the website at https://www.107autorepairs.com.au/. We're a family-owned mechanic workshop based in Adelaide, South Australia. We pride ourselves on our honesty, reliability, quality workmanship and friendly service.
Design aesthetic: vintage/retro. Classic typography, traditional layout rhythms, badge/label accents, subtle texture cues, and a timeless feel (avoid overly modern UI tropes). Use the provided brand colours as the source of truth; apply them with a muted, heritage-friendly treatment and clear readability. If no colours are provided, choose a warm, nostalgic palette.
Devise a colour palette that complements this aesthetic.
Required pages: Landing.
Include a contact form that displays a success message on submit (no actual email sending). Include an embedded map using a free public tile service (e.g., OpenStreetMap via Leaflet). No API keys required. If no location is provided, center the map on Melbourne, Australia.
Brand images:
- Screenshot 2026-03-04 at 7.49.22 pm.png: business logo (landscape): https://firebasestorage.googleapis.com/v0/b/digitaldoo-198e7.firebasestorage.app/o/assets%2F699c6f755224d5c0de980097%2F1772617410373_Screenshot_2026-03-04_at_7.49.22_pm.png?alt=media&token=3a00ca91-f03c-4ecf-b588-8073b6b2044a
- dd_107autorepairs_1.webp: outside view of workshop (square): https://firebasestorage.googleapis.com/v0/b/digitaldoo-198e7.firebasestorage.app/o/assets%2F699c6f755224d5c0de980097%2F1772616272944_dd_107autorepairs_1.webp?alt=media&token=756908b9-9d53-4dd5-b7f9-4f04f420a26d
- dd_107autorepairs_2.webp: happy customer handing over keys (landscape): https://firebasestorage.googleapis.com/v0/b/digitaldoo-198e7.firebasestorage.app/o/assets%2F699c6f755224d5c0de980097%2F1772616286078_dd_107autorepairs_2.webp?alt=media&token=44ad9849-999b-428b-ab8a-4955e918f76b
- dd_107autorepairs_3.webp: old photo of mechanic in the workshop (landscape): https://firebasestorage.googleapis.com/v0/b/digitaldoo-198e7.firebasestorage.app/o/assets%2F699c6f755224d5c0de980097%2F1772616300295_dd_107autorepairs_3.webp?alt=media&token=e0bb391b-1966-4d8f-b77a-5173066e62be
- dd_107autorepairs_4.webp: old photo of mechanic in the workshop (landscape): https://firebasestorage.googleapis.com/v0/b/digitaldoo-198e7.firebasestorage.app/o/assets%2F699c6f755224d5c0de980097%2F1772616315945_dd_107autorepairs_4.webp?alt=media&token=de66002d-5169-484a-ad8b-36cf4bf4632f
Draw visual inspiration from: https://www.107autorepairs.com.au/.
I'll build a stunning vintage/retro landing page for 107 Auto Repairs. Let me start by fetching the existing website for content details and generating a design brief, while also exploring the codebase.
Now I have all the content details from the existing site and a design brief. Let me save the brand images to the public folder and then build out the entire landing page.
Now let me update the globals.css with the vintage/heritage color theme, update the layout with appropriate fonts, and build all the components.
Now let me build all the components. I'll create the header, hero, about, services, gallery, testimonials, contact form with map, and footer components.
Now let me create the contact form with the Leaflet map and the footer:
Now let me assemble everything into the main page:
The landing page for 107 Auto Repairs is now complete. Here's a summary of what was built:
Vintage/Heritage Design System — A warm, muted palette anchored by the brand blue (#3B7DBF), cream parchment background (#F5F0E8), deep navy text (#1C2B3A), aged tan accents (#D4C5A9), and a rust accent (#B85C38). Playfair Display serif for headings, DM Sans for body — classic, readable, and timeless.
Page Sections:
- Header — Fixed navigation with logo, section links, and call-to-action phone button; mobile-responsive hamburger menu
- Hero — Full-width dark navy section with "Family-Owned Since 1988" badge, bold serif headline, CTA buttons, and a three-image strip showcasing the workshop, a happy customer, and a vintage mechanic photo
- About — Four value cards (Honesty, Reliability, Quality, Friendly Service) with icon badges and hover effects
- Services — Dark section with 8 service cards (Oil Changes, Logbook Servicing, Fuel Injection, Brakes, Full Service, Suspension, A/C, Clutch & Gearbox) plus a fleet management CTA
- Our Story — Split layout with narrative text, stat badges (35+ years, 1000s of happy customers, 1 Family), and a staggered gallery of the vintage workshop photos
- Testimonials — Three customer review cards with star ratings
- Contact — Form with success message on submit (no email sending), info cards (address, phone, hours, tip), and an embedded Leaflet/OpenStreetMap map centered on 107 Cardwell Street, Adelaide
- Footer — Logo, quick links, contact details, and copyright
"We have had a workshop on this site since 1986. That’s 35+ years of great service and tens of thousands of cars over the decades!
Paul, who now heads the business, started with his father in this workshop as first-year apprentice in the 1980s, graduating from pumping petrol after school at his parent’s Shell service station, then on the corner of Hutt Street and Gilles. (You could say it’s in his blood.)
Those were the days of ‘fill ’er up, check tyres and oil’, when the attendant would fill your car while you waited.
While the days of pump service at petrol stations are long gone, the personal approach continues today at 107 Auto Repairs on Cardwell Street, Adelaide city.
At 107 Auto Repairs, the team are genuine, honest, and don’t pressure customers. We tell it like it is—we let you know what your options are for repair or replacement so you can make the decision about what you would like to have fixed and when."
Add this copy to the About page.
The "Our Story" section is the natural home for this rich backstory copy. I'll replace the placeholder text with the provided narrative about Paul, the Shell station origins, and the workshop's personal approach.
I also want to update the stats to reflect the actual copy better -- "tens of thousands" of cars rather than "1000s of happy customers":
I've replaced the generic placeholder story text with the authentic copy about Paul's journey from pumping petrol at his parents' Shell station to running the workshop today. Key phrases like "fill 'er up, check tyres and oil" and "you could say it's in his blood" are styled in italic serif to give them a nostalgic pull-quote feel, and the stats badge now reads "10,000s Cars Serviced" to match the "tens of thousands of cars" line.