A modern and responsive car rental website built using React and Tailwind CSS.
This project focuses on clean UI design, smooth navigation, reusable components, and structured frontend architecture.
🔗 Live Demo: (Add your GitHub Pages link here)
- Responsive design (Mobile, Tablet, Desktop)
- Smooth scrolling navigation using react-scroll
- Interactive vehicle model section
- Dynamic car selection display
- Reusable UI components
- Clean and modern layout
- Lucide React icons integration
- Home
- About
- Vehicle Models
- Testimonials
- Contact
- Footer
In the Vehicle Models section:
- Users can click on a car name
- The car image updates dynamically
- A details card displays:
- Car specifications
- Rental rate per hour
- Additional information
This creates an interactive user experience without backend integration.
- React.js
- Tailwind CSS
- react-scroll
- lucide-react
- GitHub Pages (Deployment)
Clone the repository:
git clone https://github.com/your-username/car-rental.git
cd car-rentalInstall dependencies:
npm installRun the development server:
npm run devThis project is deployed using GitHub Pages (gh-pages).
To deploy:
npm run build
npm run deploysrc/
├── components/
├── assets/
├── App.jsx
└── main.jsx
The project follows a clean component-based structure for better scalability and maintainability.
- Improved Tailwind CSS layout and responsive design skills
- Built reusable UI components
- Structured React components effectively
- Implemented smooth scrolling navigation using react-scroll
- Integrated Lucide icons for clean UI
- Deployed a React project using GitHub Pages
- Backend integration for real booking functionality
- Car filtering options
- Date-based rental selection
- Authentication system
- Payment integration
Aman Khan
Frontend Developer
University of Central Punjab (Expected Graduation: 2027)
⭐ If you like this project, consider giving it a star!