A modern and responsive auto-repair service website built with React + Vite, featuring dynamic pages, a booking modal, service details, blogs, contact form, and Google Maps integration.
- ⚡ Built with React + Vite
- 🎨 Fully responsive Tailwind CSS UI
- 🧭 React Router for navigation
- 🧩 Reusable components (Hero, Title, Modal, etc.)
- 🧠 Context API Modal System for booking appointments
- 📝 Blog system with sidebar
- 🛠 Service and Shop repair pages
- 📍 Google Maps embedded directions page
- ⭐ Clean, scalable, and production-ready codebase
src/
│── assets/
│── components/
│ ├── Home/
│ ├── Blog/
│ ├── Service/
│ ├── Contact/
│── Shared/
│ ├── Hero.jsx
│ ├── NavBar.jsx
│ ├── Title.jsx
│── ModalContext/
│ ├── ModalContext.jsx
│── Router/
│ ├── Router.jsx
│── pages/
│ ├── HomePage.jsx
│ ├── BlogPage.jsx
│ ├── ContactPage.jsx
│ ├── DirectionsPage.jsx
│ ├── MobileMechanicPage.jsx
│ ├── SpecialPage.jsx
│ ├── ShopRe.jsx
│── main.jsx
│── index.css
| Category | Tools |
|---|---|
| Framework | React + Vite |
| Styling | Tailwind CSS |
| Routing | React Router |
| Icons | React Icons |
| State Management | Context API |
| Map | Google Maps Embed |
npm install
npm run devDynamic banner for all pages with title, description, and image.
Global appointment modal using Context API.
Reusable, optimized component architecture.
- Home Page — Facilities, Choice, Services, Offers, Testimonials
- Blog Page — Expert articles + Popular blog section
- Contact Page — Dynamic contact form
- Directions Page — Google Maps embed
- Mobile Mechanic Page — On-site service details
- Special Offers Page — Discounts & coupons
- Shop Repair Page — In-shop repair services
- Smooth modal animations
- Clean code architecture
- SEO-friendly structure
- Easy to extend for future features
- Professional, modern UI
This project is free for personal and portfolio use.
If you want, I can also create:
✔ GitHub badges
✔ Preview screenshots
✔ Project demo GIF
✔ More advanced README formatting