├── src ├── assets │ ├── car.png │ ├── car1.png │ ├── car2.png │ ├── car5.png │ ├── car6.png │ ├── banner-car.png │ ├── white-car.png │ ├── website │ │ ├── app_store.png │ │ ├── pattern.jpeg │ │ └── play_store.png │ └── react.svg ├── main.jsx ├── index.css ├── components │ ├── Contact │ │ └── Contact.jsx │ ├── Navbar │ │ ├── ResponsiveMenu.jsx │ │ └── Navbar.jsx │ ├── About │ │ └── About.jsx │ ├── Experience │ │ └── Experience.jsx │ ├── AppStoreBanner │ │ └── AppStoreBanner.jsx │ ├── Hero │ │ └── Hero.jsx │ ├── Testimonial │ │ └── Testimonial.jsx │ ├── Services │ │ └── Services.jsx │ ├── CarList │ │ └── CarList.jsx │ └── Footer │ │ └── Footer.jsx └── App.jsx ├── postcss.config.js ├── vite.config.js ├── .gitignore ├── index.html ├── README.md ├── tailwind.config.js ├── .eslintrc.cjs ├── package.json └── public └── vite.svg /src/assets/car.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dilshad-ahmed/car-rental-website/HEAD/src/assets/car.png -------------------------------------------------------------------------------- /src/assets/car1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dilshad-ahmed/car-rental-website/HEAD/src/assets/car1.png -------------------------------------------------------------------------------- /src/assets/car2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dilshad-ahmed/car-rental-website/HEAD/src/assets/car2.png -------------------------------------------------------------------------------- /src/assets/car5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dilshad-ahmed/car-rental-website/HEAD/src/assets/car5.png -------------------------------------------------------------------------------- /src/assets/car6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dilshad-ahmed/car-rental-website/HEAD/src/assets/car6.png -------------------------------------------------------------------------------- /src/assets/banner-car.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dilshad-ahmed/car-rental-website/HEAD/src/assets/banner-car.png -------------------------------------------------------------------------------- /src/assets/white-car.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dilshad-ahmed/car-rental-website/HEAD/src/assets/white-car.png -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /src/assets/website/app_store.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dilshad-ahmed/car-rental-website/HEAD/src/assets/website/app_store.png -------------------------------------------------------------------------------- /src/assets/website/pattern.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dilshad-ahmed/car-rental-website/HEAD/src/assets/website/pattern.jpeg -------------------------------------------------------------------------------- /src/assets/website/play_store.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dilshad-ahmed/car-rental-website/HEAD/src/assets/website/play_store.png -------------------------------------------------------------------------------- /vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App.jsx' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('root')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | html { 6 | scroll-behavior: smooth; 7 | } 8 | 9 | @layer components { 10 | .link { 11 | @apply cursor-pointer hover:underline; 12 | } 13 | .button-outline { 14 | @apply rounded-md border-2 border-primary hover:bg-primary/80 hover:text-black duration-500 py-2 px-6 text-primary tracking-wider; 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Car Rental 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Enjoy the Free code + Assets 😍 2 | - Support us on YouTube Channel: https://www.youtube.com/channel/UC1H-a1MKEFXRiFlGNLcy7gQ 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | export default { 3 | content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], 4 | darkMode: "class", 5 | theme: { 6 | extend: { 7 | colors: { 8 | primary: "#ffc727", 9 | secondary: { 10 | 100: "#E2E2D5", 11 | 200: "#888883", 12 | }, 13 | dark: "#111111", 14 | }, 15 | container: { 16 | center: true, 17 | padding: { 18 | DEFAULT: "1rem", 19 | sm: "3rem", 20 | }, 21 | }, 22 | }, 23 | }, 24 | plugins: [], 25 | }; 26 | -------------------------------------------------------------------------------- /.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { browser: true, es2020: true }, 4 | extends: [ 5 | 'eslint:recommended', 6 | 'plugin:react/recommended', 7 | 'plugin:react/jsx-runtime', 8 | 'plugin:react-hooks/recommended', 9 | ], 10 | ignorePatterns: ['dist', '.eslintrc.cjs'], 11 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, 12 | settings: { react: { version: '18.2' } }, 13 | plugins: ['react-refresh'], 14 | rules: { 15 | 'react-refresh/only-export-components': [ 16 | 'warn', 17 | { allowConstantExport: true }, 18 | ], 19 | }, 20 | } 21 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "the-coding-journey", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "aos": "^2.3.4", 14 | "react": "^18.2.0", 15 | "react-dom": "^18.2.0", 16 | "react-icons": "^4.12.0" 17 | }, 18 | "devDependencies": { 19 | "@types/react": "^18.2.43", 20 | "@types/react-dom": "^18.2.17", 21 | "@vitejs/plugin-react": "^4.2.1", 22 | "autoprefixer": "^10.4.16", 23 | "eslint": "^8.55.0", 24 | "eslint-plugin-react": "^7.33.2", 25 | "eslint-plugin-react-hooks": "^4.6.0", 26 | "eslint-plugin-react-refresh": "^0.4.5", 27 | "postcss": "^8.4.32", 28 | "tailwindcss": "^3.3.6", 29 | "vite": "^5.0.8" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /src/components/Contact/Contact.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const Contact = () => { 4 | return ( 5 | <> 6 | 7 |
8 |
9 |
10 |
11 |

12 | Let's collaborate on your upcoming car rental venture 13 |

14 |

15 | Lorem ipsum dolor, sit amet consectetur adipisicing elit. 16 | Exercitationem necessitatibus quasi et vel,{" "} 17 |

18 |
19 |
20 | 24 | Contact 25 | 26 |
27 |
28 |
29 |
30 | 31 | ); 32 | }; 33 | 34 | export default Contact; 35 | -------------------------------------------------------------------------------- /public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/Navbar/ResponsiveMenu.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { FaUserCircle } from "react-icons/fa"; 3 | 4 | import { Navlinks } from "./Navbar"; 5 | 6 | const ResponsiveMenu = ({ showMenu }) => { 7 | console.log("showMenu", showMenu); 8 | return ( 9 |
14 |
15 |
16 | 17 |
18 |

Hello User

19 |

Premium user

20 |
21 |
22 | 33 |
34 |
35 |

36 | Made with ❤ by Dilshad{" "} 37 |

38 |
39 |
40 | ); 41 | }; 42 | 43 | export default ResponsiveMenu; 44 | -------------------------------------------------------------------------------- /src/components/About/About.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import CarPng from "../../assets/car1.png"; 3 | 4 | const About = () => { 5 | return ( 6 |
7 |
8 |
9 |
10 | 15 |
16 |
17 |
18 |

22 | About us 23 |

24 |

25 | Lorem, ipsum dolor sit amet consectetur adipisicing elit. 26 | Aspernatur, magnam! Tenetur odio quo et maxime? 27 |

28 |

29 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi, 30 | tempora. 31 |

32 | 35 |
36 |
37 |
38 |
39 |
40 | ); 41 | }; 42 | 43 | export default About; 44 | -------------------------------------------------------------------------------- /src/components/Experience/Experience.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const Experience = () => { 4 | return ( 5 |
6 |
7 |
8 | {/* first col */} 9 |
10 |
11 |

12

12 |

Years Experience

13 |
14 |
15 | {/* second col */} 16 |
17 |
18 |

60+

19 |

Happy Clients

20 |
21 |
22 |

120+

23 |

Completed Projects

24 |
25 |
26 | {/* Third col */} 27 |
28 |
29 |

60+

30 |

Happy Clients

31 |
32 |
33 |

120+

34 |

Completed Projects

35 |
36 |
37 |
38 |
39 |
40 | ); 41 | }; 42 | 43 | export default Experience; 44 | -------------------------------------------------------------------------------- /src/App.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component, useEffect, useState } from "react"; 2 | import AOS from "aos"; 3 | import "aos/dist/aos.css"; 4 | 5 | // Component import 6 | import Navbar from "./components/Navbar/Navbar"; 7 | import Hero from "./components/Hero/Hero"; 8 | import About from "./components/About/About"; 9 | import Services from "./components/Services/Services"; 10 | import CarList from "./components/CarList/CarList"; 11 | import AppStoreBanner from "./components/AppStoreBanner/AppStoreBanner"; 12 | import Contact from "./components/Contact/Contact"; 13 | import Testimonial from "./components/Testimonial/Testimonial"; 14 | import Footer from "./components/Footer/Footer"; 15 | 16 | const App = () => { 17 | // dark mode start 18 | const [theme, setTheme] = useState( 19 | localStorage.getItem("theme") ? localStorage.getItem("theme") : "light" 20 | ); 21 | const element = document.documentElement; 22 | 23 | useEffect(() => { 24 | if (theme === "dark") { 25 | element.classList.add("dark"); 26 | localStorage.setItem("theme", "dark"); 27 | } else { 28 | element.classList.remove("dark"); 29 | localStorage.setItem("theme", "light"); 30 | } 31 | }, [theme]); 32 | // dark mode end 33 | 34 | React.useEffect(() => { 35 | AOS.init({ 36 | offset: 100, 37 | duration: 800, 38 | easing: "ease-in-sine", 39 | delay: 100, 40 | }); 41 | AOS.refresh(); 42 | }, []); 43 | return ( 44 |
45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 |
55 | ); 56 | }; 57 | 58 | export default App; 59 | -------------------------------------------------------------------------------- /src/components/AppStoreBanner/AppStoreBanner.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import AppStoreImg from "../../assets/website/app_store.png"; 3 | import PlayStoreImg from "../../assets/website/play_store.png"; 4 | import pattern from "../../assets/website/pattern.jpeg"; 5 | 6 | const bannerImg = { 7 | backgroundImage: `url(${pattern})`, 8 | backgroundPosition: "center", 9 | backgroundRepeat: "no-repeat", 10 | backgroundSize: "cover", 11 | height: "100%", 12 | width: "100%", 13 | }; 14 | const AppStoreBanner = () => { 15 | return ( 16 |
17 |
21 |
22 |
23 |

27 | Get Started with our app 28 |

29 |

30 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique 31 | magnam harum accusantium odit? 32 |

33 |
37 | 38 | 43 | 44 | 45 | 50 | 51 |
52 |
53 |
54 |
55 |
56 | ); 57 | }; 58 | 59 | export default AppStoreBanner; 60 | -------------------------------------------------------------------------------- /src/components/Hero/Hero.jsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | import carPng from "../../assets/car.png"; 3 | import yellowCar from "../../assets/banner-car.png"; 4 | import AOS from "aos"; 5 | 6 | const Hero = ({ theme }) => { 7 | useEffect(() => { 8 | AOS.refresh(); 9 | }); 10 | return ( 11 |
12 |
13 |
14 |
20 | 25 |
26 |
27 |

28 | Effortless 29 |

30 |

35 | Car Rental 36 |

37 |

38 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione 39 | veritatis explicabo quibusdam quae reprehenderit ab{" "} 40 |

41 | 51 |
52 |
53 |
54 |
55 | ); 56 | }; 57 | 58 | export default Hero; 59 | -------------------------------------------------------------------------------- /src/components/Testimonial/Testimonial.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const testimonialData = [ 4 | { 5 | name: "Dilshad", 6 | image: "", 7 | description: "Lorem ipsum dolor sit amet consectetur, adipisicing elit.", 8 | aosDelay: "0", 9 | }, 10 | { 11 | name: "Satya", 12 | image: "", 13 | description: "Lorem ipsum dolor sit amet consectetur, adipisicing elit.", 14 | aosDelay: "300", 15 | }, 16 | { 17 | name: "Sabir", 18 | image: "", 19 | description: "Lorem ipsum dolor sit amet consectetur, adipisicing elit.", 20 | aosDelay: "1000", 21 | }, 22 | ]; 23 | const Testimonial = () => { 24 | return ( 25 | <> 26 | 27 |
28 |
29 | {/* Header */} 30 |
31 |

35 | What Our Clients Say About Us 36 |

37 |

38 | Lorem ipsum dolor sit amet consectetur adipisicing elit. 39 | Perferendis iure consectetur tempora amet. 40 |

41 |
42 | 43 |
44 | {testimonialData.map((skill) => ( 45 |
51 |
52 | 57 |
58 |
⭐⭐⭐⭐⭐
59 |

{skill.description}

60 |

{skill.name}

61 |
62 | ))} 63 |
64 |
65 |
66 | 67 | ); 68 | }; 69 | 70 | export default Testimonial; 71 | -------------------------------------------------------------------------------- /src/components/Services/Services.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { FaCameraRetro } from "react-icons/fa"; 3 | import { GiNotebook } from "react-icons/gi"; 4 | import { SlNote } from "react-icons/sl"; 5 | 6 | const skillsData = [ 7 | { 8 | name: "Best Price", 9 | icon: ( 10 | 11 | ), 12 | link: "#", 13 | description: "Lorem ipsum dolor sit amet consectetur, adipisicing elit.", 14 | aosDelay: "0", 15 | }, 16 | { 17 | name: "Fast and Safe", 18 | icon: ( 19 | 20 | ), 21 | link: "#", 22 | description: "Lorem ipsum dolor sit amet consectetur, adipisicing elit.", 23 | aosDelay: "500", 24 | }, 25 | { 26 | name: "Experience Drivers", 27 | icon: ( 28 | 29 | ), 30 | link: "#", 31 | description: "Lorem ipsum dolor sit amet consectetur, adipisicing elit.", 32 | aosDelay: "1000", 33 | }, 34 | ]; 35 | const Services = () => { 36 | return ( 37 | <> 38 | 39 |
40 |
41 |
42 |

46 | Why Choose Us 47 |

48 |
49 |
50 | {skillsData.map((skill) => ( 51 |
57 |
{skill.icon}
58 |

{skill.name}

59 |

{skill.description}

60 | 64 | Learn more 65 | 66 |
67 | ))} 68 |
69 |
70 |
71 | 72 | ); 73 | }; 74 | 75 | export default Services; 76 | -------------------------------------------------------------------------------- /src/components/CarList/CarList.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import whiteCar from "../../assets/white-car.png"; 3 | import car2 from "../../assets/car5.png"; 4 | import car3 from "../../assets/car6.png"; 5 | 6 | const carList = [ 7 | { 8 | name: "BMW UX", 9 | price: 100, 10 | image: whiteCar, 11 | aosDelay: "0", 12 | }, 13 | { 14 | name: "KIA UX", 15 | price: 140, 16 | image: car2, 17 | aosDelay: "500", 18 | }, 19 | { 20 | name: "BMW UX", 21 | price: 100, 22 | image: car3, 23 | aosDelay: "1000", 24 | }, 25 | ]; 26 | 27 | const CarList = () => { 28 | return ( 29 |
30 |
31 | {/* Heading */} 32 |

36 | Lorem ipsum dolor 37 |

38 |

39 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor iure 40 | nemo ab? 41 |

42 | {/* Car listing */} 43 |
44 |
45 | {carList.map((data) => ( 46 |
51 |
52 | 57 |
58 |
59 |

{data.name}

60 |
61 |

${data.price}/Day

62 | Details 63 |
64 |
65 |

66 | 12Km 67 |

68 |
69 | ))} 70 |
71 |
72 | {/* End of car listing */} 73 |
74 | 77 |
78 |
79 |
80 | ); 81 | }; 82 | 83 | export default CarList; 84 | -------------------------------------------------------------------------------- /src/components/Navbar/Navbar.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import { BiSolidSun, BiSolidMoon } from "react-icons/bi"; 3 | import { HiMenuAlt3, HiMenuAlt1 } from "react-icons/hi"; 4 | import ResponsiveMenu from "./ResponsiveMenu"; 5 | 6 | export const Navlinks = [ 7 | { 8 | id: 1, 9 | name: "HOME", 10 | link: "/#", 11 | }, 12 | { 13 | id: 2, 14 | name: "CARS", 15 | link: "/#cars", 16 | }, 17 | { 18 | id: 1, 19 | name: "ABOUT", 20 | link: "/#about", 21 | }, 22 | { 23 | id: 1, 24 | name: "BOOKING", 25 | link: "/#booking", 26 | }, 27 | ]; 28 | const Navbar = ({ theme, setTheme }) => { 29 | const [showMenu, setShowMenu] = useState(false); 30 | 31 | const toggleMenu = () => { 32 | setShowMenu(!showMenu); 33 | }; 34 | return ( 35 |
39 |
40 |
41 |
42 | Car Rental 43 |
44 | 70 | {/* Mobile view */} 71 |
72 | {/* dark mode */} 73 | {theme === "dark" ? ( 74 | setTheme("light")} 76 | className="text-2xl" 77 | /> 78 | ) : ( 79 | setTheme("dark")} 81 | className="text-2xl" 82 | /> 83 | )} 84 | {/* Mobile Hamburger icon */} 85 | {showMenu ? ( 86 | 91 | ) : ( 92 | 97 | )} 98 |
99 |
100 |
101 | 102 |
103 | ); 104 | }; 105 | 106 | export default Navbar; 107 | -------------------------------------------------------------------------------- /src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/Footer/Footer.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { 3 | FaFacebook, 4 | FaInstagram, 5 | FaLinkedin, 6 | FaLocationArrow, 7 | FaMobileAlt, 8 | } from "react-icons/fa"; 9 | 10 | const FooterLinks = [ 11 | { 12 | title: "Home", 13 | link: "/#", 14 | }, 15 | { 16 | title: "About", 17 | link: "/#about", 18 | }, 19 | { 20 | title: "Contact", 21 | link: "/#contact", 22 | }, 23 | { 24 | title: "Blog", 25 | link: "/#blog", 26 | }, 27 | ]; 28 | const Footer = () => { 29 | return ( 30 |
31 |
32 |
33 | {/* company Details */} 34 |
35 |

36 | Car Rental 37 |

38 |

39 | Lorem ipsum dolor sit amet consectetur. Lorem ipsum dolor sit amet 40 | consectetur adipisicing elit. Possimus, voluptate.{" "} 41 |

42 |
43 |
44 | 45 |

Noida, Uttar Pradesh

46 |
47 |
48 | 49 |

+91 123456789

50 |
51 | {/* Social Handle */} 52 | 63 |
64 | {/* Links */} 65 |
66 |
67 |
68 |

69 | Important Links 70 |

71 |
    72 | {FooterLinks.map((link) => ( 73 |
  • 74 | ⮚ 75 | {link.title} 76 |
    • 77 | ))} 78 |
79 |
80 |
81 |
82 |
83 |

84 | Links 85 |

86 |
    87 | {FooterLinks.map((link) => ( 88 |
  • 89 | ⮚ 90 | {link.title} 91 |
    • 92 | ))} 93 |
94 |
95 |
96 |
97 |
98 |

99 | Location 100 |

101 | {/*
    */} 102 |
      103 | {FooterLinks.map((link) => ( 104 |
    • 105 | ⮚ 106 | {link.title} 107 |
      • 108 | ))} 109 |
    110 |
111 |
112 |
113 |
114 |
115 |
116 | ); 117 | }; 118 | 119 | export default Footer; 120 | --------------------------------------------------------------------------------