├── src
    ├── styles
    │   ├── AboutStyles
    │   │   ├── _index.scss
    │   │   └── _about.scss
    │   ├── BookStyles
    │   │   ├── _index.scss
    │   │   └── _book.scss
    │   ├── FaqStyles
    │   │   ├── _index.scss
    │   │   └── _faq.scss
    │   ├── HeroStyles
    │   │   ├── _index.scss
    │   │   └── _hero.scss
    │   ├── PickStyles
    │   │   ├── _index.scss
    │   │   └── _pick.scss
    │   ├── TeamStyles
    │   │   ├── _index.scss
    │   │   └── _team.scss
    │   ├── BannerStyles
    │   │   ├── _index.scss
    │   │   └── _banner.scss
    │   ├── ChooseStyles
    │   │   ├── _index.scss
    │   │   └── _choose.scss
    │   ├── ContactStyles
    │   │   ├── _index.scss
    │   │   └── _contact.scss
    │   ├── FooterStyles
    │   │   ├── _index.scss
    │   │   └── _footer.scss
    │   ├── ModelsStyles
    │   │   ├── _index.scss
    │   │   └── _models.scss
    │   ├── NavbarStyles
    │   │   ├── _index.scss
    │   │   └── _navbar.scss
    │   ├── PlanTripStyles
    │   │   ├── _index.scss
    │   │   └── _plan.scss
    │   ├── DownloadStyles
    │   │   ├── _index.scss
    │   │   └── _download.scss
    │   ├── TestimonialsStyles
    │   │   ├── _index.scss
    │   │   └── _testimonials.scss
    │   ├── global
    │   │   ├── _index.scss
    │   │   ├── _colors.scss
    │   │   ├── _typhography.scss
    │   │   └── _boilerplate.scss
    │   └── styles.scss
    ├── images
    │   ├── team
    │   │   ├── 1.png
    │   │   ├── 2.png
    │   │   ├── 3.png
    │   │   ├── 4.png
    │   │   ├── 5.png
    │   │   └── 6.png
    │   ├── faq
    │   │   └── car.png
    │   ├── about
    │   │   ├── icon1.png
    │   │   ├── icon2.png
    │   │   ├── icon3.png
    │   │   └── about-main.jpg
    │   ├── chooseUs
    │   │   ├── bg.png
    │   │   ├── main.png
    │   │   ├── icon1.png
    │   │   ├── icon2.png
    │   │   └── icon3.png
    │   ├── logo
    │   │   └── logo.png
    │   ├── plan
    │   │   ├── icon1.png
    │   │   ├── icon2.png
    │   │   └── icon3.png
    │   ├── banners
    │   │   ├── bg-1.png
    │   │   ├── bg02.png
    │   │   ├── bg-contact.png
    │   │   └── book-banner.png
    │   ├── cars-big
    │   │   ├── benz.jpg
    │   │   ├── audia1.jpg
    │   │   ├── bmw-box.png
    │   │   ├── bmw320.jpg
    │   │   ├── golf6.jpg
    │   │   ├── audi-box.png
    │   │   ├── benz-box.png
    │   │   ├── carforbox.jpg
    │   │   ├── golf6-box.png
    │   │   ├── passatcc.jpg
    │   │   ├── passat-box.png
    │   │   ├── toyota-box.png
    │   │   └── toyotacamry.jpg
    │   ├── hero
    │   │   ├── hero-bg.png
    │   │   ├── main-car.png
    │   │   └── heroes-bg.png
    │   ├── book-car
    │   │   └── book-bg.png
    │   ├── testimonials
    │   │   ├── pfp1.jpg
    │   │   ├── pfp2.jpg
    │   │   └── user.png
    │   └── download
    │   │   ├── appstore.svg
    │   │   └── googleapp.svg
    ├── index.js
    ├── components
    │   ├── HeroPages.jsx
    │   ├── Banner.jsx
    │   ├── Download.jsx
    │   ├── PlanTrip.jsx
    │   ├── CarData.js
    │   ├── CarBox.jsx
    │   ├── Hero.jsx
    │   ├── Testimonials.jsx
    │   ├── Footer.jsx
    │   ├── ChooseUs.jsx
    │   ├── Navbar.jsx
    │   ├── PickCar.jsx
    │   ├── Faq.jsx
    │   └── BookCar.jsx
    ├── Pages
    │   ├── Home.jsx
    │   ├── TestimonialsPage.jsx
    │   ├── Team.jsx
    │   ├── Contact.jsx
    │   ├── About.jsx
    │   └── Models.jsx
    ├── App.js
    └── dist
    │   ├── styles.css.map
    │   └── styles.css
├── public
    ├── rent-icon.png
    ├── rent-icon2.png
    └── index.html
├── .gitignore
├── README.md
└── package.json


/src/styles/AboutStyles/_index.scss:
--------------------------------------------------------------------------------
1 | @forward "./about";
2 | 


--------------------------------------------------------------------------------
/src/styles/BookStyles/_index.scss:
--------------------------------------------------------------------------------
1 | @forward "./book";
2 | 


--------------------------------------------------------------------------------
/src/styles/FaqStyles/_index.scss:
--------------------------------------------------------------------------------
1 | @forward "./faq";
2 | 


--------------------------------------------------------------------------------
/src/styles/HeroStyles/_index.scss:
--------------------------------------------------------------------------------
1 | @forward "./hero";
2 | 


--------------------------------------------------------------------------------
/src/styles/PickStyles/_index.scss:
--------------------------------------------------------------------------------
1 | @forward "./pick";
2 | 


--------------------------------------------------------------------------------
/src/styles/TeamStyles/_index.scss:
--------------------------------------------------------------------------------
1 | @forward "./team";
2 | 


--------------------------------------------------------------------------------
/src/styles/BannerStyles/_index.scss:
--------------------------------------------------------------------------------
1 | @forward "./banner";
2 | 


--------------------------------------------------------------------------------
/src/styles/ChooseStyles/_index.scss:
--------------------------------------------------------------------------------
1 | @forward "./choose";
2 | 


--------------------------------------------------------------------------------
/src/styles/ContactStyles/_index.scss:
--------------------------------------------------------------------------------
1 | @forward "./contact";
2 | 


--------------------------------------------------------------------------------
/src/styles/FooterStyles/_index.scss:
--------------------------------------------------------------------------------
1 | @forward "./footer";
2 | 


--------------------------------------------------------------------------------
/src/styles/ModelsStyles/_index.scss:
--------------------------------------------------------------------------------
1 | @forward "./models";
2 | 


--------------------------------------------------------------------------------
/src/styles/NavbarStyles/_index.scss:
--------------------------------------------------------------------------------
1 | @forward "./navbar";
2 | 


--------------------------------------------------------------------------------
/src/styles/PlanTripStyles/_index.scss:
--------------------------------------------------------------------------------
1 | @forward "./plan";
2 | 


--------------------------------------------------------------------------------
/src/styles/DownloadStyles/_index.scss:
--------------------------------------------------------------------------------
1 | @forward "./download";
2 | 


--------------------------------------------------------------------------------
/src/styles/TestimonialsStyles/_index.scss:
--------------------------------------------------------------------------------
1 | @forward "./testimonials";
2 | 


--------------------------------------------------------------------------------
/public/rent-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cjephuneh/car-rental-main/HEAD/public/rent-icon.png


--------------------------------------------------------------------------------
/public/rent-icon2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cjephuneh/car-rental-main/HEAD/public/rent-icon2.png


--------------------------------------------------------------------------------
/src/images/team/1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cjephuneh/car-rental-main/HEAD/src/images/team/1.png


--------------------------------------------------------------------------------
/src/images/team/2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cjephuneh/car-rental-main/HEAD/src/images/team/2.png


--------------------------------------------------------------------------------
/src/images/team/3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cjephuneh/car-rental-main/HEAD/src/images/team/3.png


--------------------------------------------------------------------------------
/src/images/team/4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cjephuneh/car-rental-main/HEAD/src/images/team/4.png


--------------------------------------------------------------------------------
/src/images/team/5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cjephuneh/car-rental-main/HEAD/src/images/team/5.png


--------------------------------------------------------------------------------
/src/images/team/6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cjephuneh/car-rental-main/HEAD/src/images/team/6.png


--------------------------------------------------------------------------------
/src/images/faq/car.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cjephuneh/car-rental-main/HEAD/src/images/faq/car.png


--------------------------------------------------------------------------------
/src/images/about/icon1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cjephuneh/car-rental-main/HEAD/src/images/about/icon1.png


--------------------------------------------------------------------------------
/src/images/about/icon2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cjephuneh/car-rental-main/HEAD/src/images/about/icon2.png


--------------------------------------------------------------------------------
/src/images/about/icon3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cjephuneh/car-rental-main/HEAD/src/images/about/icon3.png


--------------------------------------------------------------------------------
/src/images/chooseUs/bg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cjephuneh/car-rental-main/HEAD/src/images/chooseUs/bg.png


--------------------------------------------------------------------------------
/src/images/logo/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cjephuneh/car-rental-main/HEAD/src/images/logo/logo.png


--------------------------------------------------------------------------------
/src/images/plan/icon1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cjephuneh/car-rental-main/HEAD/src/images/plan/icon1.png


--------------------------------------------------------------------------------
/src/images/plan/icon2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cjephuneh/car-rental-main/HEAD/src/images/plan/icon2.png


--------------------------------------------------------------------------------
/src/images/plan/icon3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cjephuneh/car-rental-main/HEAD/src/images/plan/icon3.png


--------------------------------------------------------------------------------
/src/images/banners/bg-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cjephuneh/car-rental-main/HEAD/src/images/banners/bg-1.png


--------------------------------------------------------------------------------
/src/images/banners/bg02.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cjephuneh/car-rental-main/HEAD/src/images/banners/bg02.png


--------------------------------------------------------------------------------
/src/images/cars-big/benz.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cjephuneh/car-rental-main/HEAD/src/images/cars-big/benz.jpg


--------------------------------------------------------------------------------
/src/images/chooseUs/main.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cjephuneh/car-rental-main/HEAD/src/images/chooseUs/main.png


--------------------------------------------------------------------------------
/src/images/hero/hero-bg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cjephuneh/car-rental-main/HEAD/src/images/hero/hero-bg.png


--------------------------------------------------------------------------------
/src/images/hero/main-car.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cjephuneh/car-rental-main/HEAD/src/images/hero/main-car.png


--------------------------------------------------------------------------------
/src/styles/global/_index.scss:
--------------------------------------------------------------------------------
1 | @forward "./boilerplate";
2 | @forward "./colors";
3 | @forward "./typhography";
4 | 


--------------------------------------------------------------------------------
/src/images/about/about-main.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cjephuneh/car-rental-main/HEAD/src/images/about/about-main.jpg


--------------------------------------------------------------------------------
/src/images/book-car/book-bg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cjephuneh/car-rental-main/HEAD/src/images/book-car/book-bg.png


--------------------------------------------------------------------------------
/src/images/cars-big/audia1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cjephuneh/car-rental-main/HEAD/src/images/cars-big/audia1.jpg


--------------------------------------------------------------------------------
/src/images/cars-big/bmw-box.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cjephuneh/car-rental-main/HEAD/src/images/cars-big/bmw-box.png


--------------------------------------------------------------------------------
/src/images/cars-big/bmw320.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cjephuneh/car-rental-main/HEAD/src/images/cars-big/bmw320.jpg


--------------------------------------------------------------------------------
/src/images/cars-big/golf6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cjephuneh/car-rental-main/HEAD/src/images/cars-big/golf6.jpg


--------------------------------------------------------------------------------
/src/images/chooseUs/icon1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cjephuneh/car-rental-main/HEAD/src/images/chooseUs/icon1.png


--------------------------------------------------------------------------------
/src/images/chooseUs/icon2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cjephuneh/car-rental-main/HEAD/src/images/chooseUs/icon2.png


--------------------------------------------------------------------------------
/src/images/chooseUs/icon3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cjephuneh/car-rental-main/HEAD/src/images/chooseUs/icon3.png


--------------------------------------------------------------------------------
/src/images/hero/heroes-bg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cjephuneh/car-rental-main/HEAD/src/images/hero/heroes-bg.png


--------------------------------------------------------------------------------
/src/images/banners/bg-contact.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cjephuneh/car-rental-main/HEAD/src/images/banners/bg-contact.png


--------------------------------------------------------------------------------
/src/images/cars-big/audi-box.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cjephuneh/car-rental-main/HEAD/src/images/cars-big/audi-box.png


--------------------------------------------------------------------------------
/src/images/cars-big/benz-box.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cjephuneh/car-rental-main/HEAD/src/images/cars-big/benz-box.png


--------------------------------------------------------------------------------
/src/images/cars-big/carforbox.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cjephuneh/car-rental-main/HEAD/src/images/cars-big/carforbox.jpg


--------------------------------------------------------------------------------
/src/images/cars-big/golf6-box.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cjephuneh/car-rental-main/HEAD/src/images/cars-big/golf6-box.png


--------------------------------------------------------------------------------
/src/images/cars-big/passatcc.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cjephuneh/car-rental-main/HEAD/src/images/cars-big/passatcc.jpg


--------------------------------------------------------------------------------
/src/images/testimonials/pfp1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cjephuneh/car-rental-main/HEAD/src/images/testimonials/pfp1.jpg


--------------------------------------------------------------------------------
/src/images/testimonials/pfp2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cjephuneh/car-rental-main/HEAD/src/images/testimonials/pfp2.jpg


--------------------------------------------------------------------------------
/src/images/testimonials/user.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cjephuneh/car-rental-main/HEAD/src/images/testimonials/user.png


--------------------------------------------------------------------------------
/src/images/banners/book-banner.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cjephuneh/car-rental-main/HEAD/src/images/banners/book-banner.png


--------------------------------------------------------------------------------
/src/images/cars-big/passat-box.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cjephuneh/car-rental-main/HEAD/src/images/cars-big/passat-box.png


--------------------------------------------------------------------------------
/src/images/cars-big/toyota-box.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cjephuneh/car-rental-main/HEAD/src/images/cars-big/toyota-box.png


--------------------------------------------------------------------------------
/src/images/cars-big/toyotacamry.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cjephuneh/car-rental-main/HEAD/src/images/cars-big/toyotacamry.jpg


--------------------------------------------------------------------------------
/src/styles/global/_colors.scss:
--------------------------------------------------------------------------------
 1 | // background colors
 2 | $bg-gray: #f8f8f8;
 3 | $bg-white: #ffffff;
 4 | 
 5 | // text color
 6 | $text-black: #010103;
 7 | $text-orange: #ff4d30;
 8 | $btn-black: #161616;
 9 | $text-gray: #706f7b;
10 | 


--------------------------------------------------------------------------------
/src/styles/global/_typhography.scss:
--------------------------------------------------------------------------------
 1 | // font family
 2 | $titles-font: "Poppins", sans-serif;
 3 | $text-font: "Rubik", sans-serif;
 4 | 
 5 | // sizes
 6 | $h1-size: 5.2rem;
 7 | $h2-size: 4.2rem;
 8 | $h3-size: 2.4rem;
 9 | $h4-size: 2.2rem;
10 | $p-size: 1.6rem;
11 | $input-size: 1.4rem;
12 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import ReactDOM from "react-dom/client";
 3 | import App from "./App";
 4 | import { BrowserRouter } from "react-router-dom";
 5 | 
 6 | const root = ReactDOM.createRoot(document.getElementById("root"));
 7 | root.render(
 8 |   <BrowserRouter>
 9 |     <App />
10 |   </BrowserRouter>
11 | );
12 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 


--------------------------------------------------------------------------------
/src/components/HeroPages.jsx:
--------------------------------------------------------------------------------
 1 | import { Link } from "react-router-dom";
 2 | 
 3 | function HeroPages({ name }) {
 4 |   return (
 5 |     <>
 6 |       <section className="hero-pages">
 7 |         <div className="hero-pages__overlay"></div>
 8 |         <div className="container">
 9 |           <div className="hero-pages__text">
10 |             <h3>{name}</h3>
11 |             <p>
12 |               <Link to="/">Home</Link> / {name}
13 |             </p>
14 |           </div>
15 |         </div>
16 |       </section>
17 |     </>
18 |   );
19 | }
20 | 
21 | export default HeroPages;
22 | 


--------------------------------------------------------------------------------
/src/components/Banner.jsx:
--------------------------------------------------------------------------------
 1 | function Banner() {
 2 |   return (
 3 |     <>
 4 |       <section className="banner-section">
 5 |         <div className="container">
 6 |           <div className="banner-content">
 7 |             <div className="banner-content__text">
 8 |               <h2>Save big with our cheap car rental!</h2>
 9 |               <p>
10 |                 Top Airports. Local Suppliers. <span>24/7</span> Support.
11 |               </p>
12 |             </div>
13 |           </div>
14 |         </div>
15 |       </section>
16 |     </>
17 |   );
18 | }
19 | 
20 | export default Banner;
21 | 


--------------------------------------------------------------------------------
/src/styles/styles.scss:
--------------------------------------------------------------------------------
 1 | @forward "../styles/global";
 2 | @forward "../styles/NavbarStyles";
 3 | @forward "../styles/HeroStyles";
 4 | @forward "../styles/BookStyles";
 5 | @forward "../styles/PlanTripStyles";
 6 | @forward "../styles/PickStyles";
 7 | @forward "../styles/BannerStyles";
 8 | @forward "../styles/ChooseStyles";
 9 | @forward "../styles/TestimonialsStyles";
10 | @forward "../styles/FaqStyles";
11 | @forward "../styles/DownloadStyles";
12 | @forward "../styles/FooterStyles";
13 | @forward "../styles/AboutStyles";
14 | @forward "../styles/ModelsStyles";
15 | @forward "../styles/TeamStyles";
16 | @forward "../styles/ContactStyles";
17 | 


--------------------------------------------------------------------------------
/src/Pages/Home.jsx:
--------------------------------------------------------------------------------
 1 | import Hero from "../components/Hero";
 2 | import BookCar from "../components/BookCar";
 3 | import PlanTrip from "../components/PlanTrip";
 4 | import PickCar from "../components/PickCar";
 5 | import Banner from "../components/Banner";
 6 | import ChooseUs from "../components/ChooseUs";
 7 | import Testimonials from "../components/Testimonials";
 8 | import Faq from "../components/Faq";
 9 | import Download from "../components/Download";
10 | import Footer from "../components/Footer";
11 | 
12 | function Home() {
13 |   return (
14 |     <>
15 |       <Hero />
16 |       <BookCar />
17 |       <PlanTrip />
18 |       <PickCar />
19 |       <Banner />
20 |       <ChooseUs />
21 |       <Testimonials />
22 |       <Faq />
23 |       <Download />
24 |       <Footer />
25 |     </>
26 |   );
27 | }
28 | 
29 | export default Home;
30 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <div align='center'><img style="width:30%" src='https://user-images.githubusercontent.com/105128267/218077760-5694a4ac-4e37-4de7-b31f-268ccd27400a.png'/></div>
 2 | 
 3 | <h2>About the project</h2>
 4 | 
 5 | 
 6 |   <p>A <b>car rental</b> website is an online platform that allows users to rent cars for personal or business use. The website provides an easy-to-use interface for searching, comparing, and reserving cars from a wide selection of vehicles that vary in make, model, size, and price.</p>
 7 | 
 8 | 👉 Live Demo: <a href='https://car-rental-main.netlify.app/'>Live Demo</a>
 9 | 
10 | <h3>Build with:</h3>
11 | 
12 | » Sass / Scss <br>
13 | » React JS
14 | 
15 | <h2>Screenshots of the Project 📸</h2>
16 | <br>
17 | <h3 align='center'>Home Page 🏡</h3>
18 | 
19 | <div align='center'>
20 | <img src='https://user-images.githubusercontent.com/105128267/218077675-f50ac9ae-8d2c-4196-aed8-f4490e142960.png'/>
21 | 
22 | </div>
23 | 


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | import "../src/dist/styles.css";
 2 | import About from "./Pages/About";
 3 | import Home from "./Pages/Home";
 4 | import Navbar from "../src/components/Navbar";
 5 | import { Route, Routes } from "react-router-dom";
 6 | import Models from "./Pages/Models";
 7 | import TestimonialsPage from "./Pages/TestimonialsPage";
 8 | import Team from "./Pages/Team";
 9 | import Contact from "./Pages/Contact";
10 | 
11 | function App() {
12 |   return (
13 |     <>
14 |       <Navbar />
15 |       <Routes>
16 |         <Route index path="/" element={<Home />} />
17 |         <Route path="about" element={<About />} />
18 |         <Route path="models" element={<Models />} />
19 |         <Route path="testimonials" element={<TestimonialsPage />} />
20 |         <Route path="team" element={<Team />} />
21 |         <Route path="contact" element={<Contact />} />
22 |       </Routes>
23 |     </>
24 |   );
25 | }
26 | 
27 | export default App;
28 | 


--------------------------------------------------------------------------------
/src/Pages/TestimonialsPage.jsx:
--------------------------------------------------------------------------------
 1 | import Footer from "../components/Footer";
 2 | import HeroPages from "../components/HeroPages";
 3 | import Testimonials from "../components/Testimonials";
 4 | 
 5 | function TestimonialsPage() {
 6 |   return (
 7 |     <>
 8 |       <section className="testimonial-page">
 9 |         <HeroPages name="Testimonials" />
10 |         <Testimonials />
11 |         <div className="book-banner">
12 |           <div className="book-banner__overlay"></div>
13 |           <div className="container">
14 |             <div className="text-content">
15 |               <h2>Book a car by getting in touch with us</h2>
16 |               <span>
17 |                 <i className="fa-solid fa-phone"></i>
18 |                 <h3>(123) 456-7869</h3>
19 |               </span>
20 |             </div>
21 |           </div>
22 |         </div>
23 |         <Footer />
24 |       </section>
25 |     </>
26 |   );
27 | }
28 | 
29 | export default TestimonialsPage;
30 | 


--------------------------------------------------------------------------------
/src/styles/BannerStyles/_banner.scss:
--------------------------------------------------------------------------------
 1 | @use "../global" as *;
 2 | 
 3 | .banner-section {
 4 |   width: 100%;
 5 |   height: auto;
 6 |   display: flex;
 7 |   background-color: #2d2d2d;
 8 |   margin: 8rem 0;
 9 |   padding: 6rem 0;
10 |   text-align: center;
11 | }
12 | 
13 | .banner-content {
14 |   color: white;
15 |   display: flex;
16 |   justify-content: space-between;
17 |   width: 100%;
18 |   height: 100%;
19 |   align-items: center;
20 | 
21 |   &__text {
22 |     display: flex;
23 |     flex-direction: column;
24 |     gap: 1.5rem;
25 | 
26 |     h2 {
27 |       font-size: $h1-size;
28 |       line-height: 1.3;
29 | 
30 |       @media (max-width: 550px) {
31 |         font-size: $h2-size;
32 |       }
33 |     }
34 | 
35 |     p {
36 |       font-size: $h3-size;
37 | 
38 |       @media (max-width: 550px) {
39 |         font-size: 2rem;
40 |       }
41 |     }
42 | 
43 |     span {
44 |       color: $text-orange;
45 |       font-weight: 500;
46 |     }
47 |   }
48 | }
49 | 


--------------------------------------------------------------------------------
/src/components/Download.jsx:
--------------------------------------------------------------------------------
 1 | import Img1 from "../images/download/appstore.svg";
 2 | import Img2 from "../images/download/googleapp.svg";
 3 | 
 4 | function Download() {
 5 |   return (
 6 |     <>
 7 |       <section className="download-section">
 8 |         <div className="container">
 9 |           <div className="download-text">
10 |             <h2>Download our app to get most out of it</h2>
11 |             <p>
12 |               Thrown shy denote ten ladies though ask saw. Or by to he going
13 |               think order event music. Incommode so intention defective at
14 |               convinced. Led income months itself and houses you.
15 |             </p>
16 |             <div className="download-text__btns">
17 |               <img alt="download_img" src={Img2} />
18 |               <img alt="download_img" src={Img1} />
19 |             </div>
20 |           </div>
21 |         </div>
22 |       </section>
23 |     </>
24 |   );
25 | }
26 | 
27 | export default Download;
28 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "car-rental",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@testing-library/jest-dom": "^5.16.5",
 7 |     "@testing-library/react": "^13.4.0",
 8 |     "@testing-library/user-event": "^13.5.0",
 9 |     "picomatch": "^2.3.1",
10 |     "react": "^18.2.0",
11 |     "react-datepicker": "^4.10.0",
12 |     "react-dom": "^18.2.0",
13 |     "react-router-dom": "^6.8.0",
14 |     "react-scripts": "5.0.1",
15 |     "web-vitals": "^2.1.4"
16 |   },
17 |   "scripts": {
18 |     "start": "react-scripts start",
19 |     "build": "react-scripts build",
20 |     "test": "react-scripts test",
21 |     "eject": "react-scripts eject"
22 |   },
23 |   "eslintConfig": {
24 |     "extends": [
25 |       "react-app",
26 |       "react-app/jest"
27 |     ]
28 |   },
29 |   "browserslist": {
30 |     "production": [
31 |       ">0.2%",
32 |       "not dead",
33 |       "not op_mini all"
34 |     ],
35 |     "development": [
36 |       "last 1 chrome version",
37 |       "last 1 firefox version",
38 |       "last 1 safari version"
39 |     ]
40 |   }
41 | }
42 | 


--------------------------------------------------------------------------------
/src/styles/TeamStyles/_team.scss:
--------------------------------------------------------------------------------
 1 | @use "../global/" as *;
 2 | 
 3 | .team-container {
 4 |   display: grid;
 5 |   grid-template-columns: 1fr 1fr 1fr;
 6 |   grid-template-rows: auto;
 7 |   gap: 4rem;
 8 |   align-items: center;
 9 |   text-align: center;
10 |   padding: 10rem 2rem;
11 |   width: 110rem;
12 |   margin: 0 auto;
13 | 
14 |   @media (max-width: 1150px) {
15 |     grid-template-columns: 1fr 1fr;
16 |     width: fit-content;
17 |   }
18 | 
19 |   @media (max-width: 800px) {
20 |     grid-template-columns: 1fr;
21 |     width: fit-content;
22 |   }
23 | 
24 |   &__box {
25 |     width: 33rem;
26 |     background-color: white;
27 |     box-shadow: 0px 20px 10px 0px rgb(0 0 0 / 8%);
28 | 
29 |     @media (max-width: 400px) {
30 |       width: 100%;
31 |     }
32 | 
33 |     &__img-div {
34 |       width: 100%;
35 |       height: auto;
36 |       background-color: #f6f6f6;
37 |       img {
38 |         width: 100%;
39 |       }
40 |     }
41 | 
42 |     &__descr {
43 |       color: $text-black;
44 |       padding: 3rem;
45 | 
46 |       h3 {
47 |         font-size: $h4-size;
48 |       }
49 | 
50 |       p {
51 |         font-size: $p-size;
52 |         font-weight: 500;
53 |         color: #777777;
54 |       }
55 |     }
56 |   }
57 | }
58 | 


--------------------------------------------------------------------------------
/src/styles/global/_boilerplate.scss:
--------------------------------------------------------------------------------
 1 | @use "./colors" as *;
 2 | @use "./typhography" as *;
 3 | 
 4 | * {
 5 |   box-sizing: border-box;
 6 |   margin: 0;
 7 |   padding: 0;
 8 | }
 9 | 
10 | html {
11 |   font-size: 62.5%;
12 |   scroll-behavior: smooth;
13 | }
14 | 
15 | body {
16 |   background-color: $bg-white;
17 |   font-family: $titles-font;
18 |   position: relative;
19 | }
20 | 
21 | .container {
22 |   max-width: 133rem !important;
23 |   margin: 0 auto !important;
24 |   padding: 0 2.5rem !important;
25 | }
26 | 
27 | // scroll bar ------
28 | 
29 | /* Firefox */
30 | * {
31 |   scrollbar-width: thin;
32 |   scrollbar-color: #ff4d30 #ffffff;
33 | }
34 | 
35 | /* Chrome, Edge and Safari */
36 | *::-webkit-scrollbar {
37 |   width: 10px;
38 |   width: 10px;
39 | }
40 | *::-webkit-scrollbar-track {
41 |   border-radius: 5px;
42 |   background-color: #ffffff;
43 | }
44 | 
45 | *::-webkit-scrollbar-track:hover {
46 |   background-color: #ffffff;
47 | }
48 | 
49 | *::-webkit-scrollbar-track:active {
50 |   background-color: #ffffff;
51 | }
52 | 
53 | *::-webkit-scrollbar-thumb {
54 |   border-radius: 20px;
55 |   background-color: #ff4d30;
56 | }
57 | 
58 | *::-webkit-scrollbar-thumb:hover {
59 |   background-color: #ff4d30;
60 | }
61 | 
62 | *::-webkit-scrollbar-thumb:active {
63 |   background-color: #ff2525;
64 | }
65 | 


--------------------------------------------------------------------------------
/src/styles/DownloadStyles/_download.scss:
--------------------------------------------------------------------------------
 1 | @use "../global" as *;
 2 | 
 3 | .download-section {
 4 |   background-image: url("/src/images/banners/bg02.png");
 5 |   background-color: $bg-gray;
 6 |   background-position: top center;
 7 |   background-repeat: no-repeat;
 8 |   background-size: cover;
 9 |   width: 100%;
10 |   height: auto;
11 |   padding: 10rem 0;
12 | 
13 |   @media (max-width: 700px) {
14 |     background-image: none;
15 |   }
16 | }
17 | 
18 | .download-text {
19 |   display: flex;
20 |   flex-direction: column;
21 |   gap: 2rem;
22 |   max-width: 55rem;
23 |   text-align: left;
24 | 
25 |   @media (max-width: 700px) {
26 |     text-align: center;
27 |     margin: 0 auto;
28 |   }
29 | 
30 |   h2 {
31 |     font-size: $h2-size;
32 |     color: $text-black;
33 |   }
34 | 
35 |   p {
36 |     font-size: $p-size;
37 |     color: $text-gray;
38 |     font-family: $text-font;
39 |     line-height: 1.5;
40 |   }
41 | 
42 |   &__btns {
43 |     display: flex;
44 |     gap: 3rem;
45 |     margin-top: 2rem;
46 | 
47 |     @media (max-width: 700px) {
48 |       justify-content: center;
49 |     }
50 | 
51 |     @media (max-width: 550px) {
52 |       flex-direction: column;
53 |       align-items: center;
54 |     }
55 | 
56 |     img {
57 |       width: 40%;
58 |       cursor: pointer;
59 | 
60 |       @media (max-width: 550px) {
61 |         width: 22rem;
62 |       }
63 |     }
64 |   }
65 | }
66 | 


--------------------------------------------------------------------------------
/src/styles/PlanTripStyles/_plan.scss:
--------------------------------------------------------------------------------
 1 | @use "../global" as *;
 2 | 
 3 | .plan-section {
 4 |   background-color: $bg-white;
 5 |   padding: 5.3rem 0;
 6 | }
 7 | 
 8 | .plan-container {
 9 |   display: flex;
10 |   flex-direction: column;
11 | 
12 |   &__title {
13 |     margin: 0 auto;
14 |     text-align: center;
15 |     color: $text-black;
16 | 
17 |     h3 {
18 |       font-size: $h3-size;
19 |       font-family: $text-font;
20 |       font-weight: 500;
21 |     }
22 | 
23 |     h2 {
24 |       font-size: $h2-size;
25 |       font-family: $titles-font;
26 |       margin: 1.3rem 0 3rem 0;
27 |     }
28 |   }
29 | 
30 |   &__boxes {
31 |     display: grid;
32 |     grid-template-columns: 1fr 1fr 1fr;
33 |     grid-template-rows: auto;
34 |     margin-top: 3.7rem;
35 |     padding: 0 3rem;
36 | 
37 |     @media (max-width: 1021px) {
38 |       grid-template-columns: 1fr 1fr;
39 |       row-gap: 2rem;
40 |     }
41 | 
42 |     @media (max-width: 800px) {
43 |       grid-template-columns: 1fr;
44 |       margin-top: 1rem;
45 |     }
46 | 
47 |     &__box {
48 |       text-align: center;
49 |       padding: 1rem 6rem;
50 | 
51 |       @media (max-width: 500px) {
52 |         padding: 1rem 1rem;
53 |       }
54 | 
55 |       img {
56 |         width: 17rem;
57 |         height: auto;
58 |       }
59 | 
60 |       h3 {
61 |         font-size: $h3-size;
62 |         margin-bottom: 1rem;
63 |       }
64 | 
65 |       p {
66 |         font-size: $p-size;
67 |         font-family: $text-font;
68 |         color: $text-gray;
69 |         line-height: 1.43;
70 |       }
71 |     }
72 |   }
73 | }
74 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="./rent-icon.png" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta
 9 |       name="description"
10 |       content="Discover the best deals you'll ever find with our unbeatable offers. We're dedicated to providing you with the best value for your money, so you can enjoy top-quality services and products without breaking the bank. Our deals are designed to give you the ultimate renting experience, so don't miss out on your chance to save big."
11 |     />
12 |     <link rel="apple-touch-icon" href="./rent-icon2.png" />
13 | 
14 |     <link rel="preconnect" href="https://fonts.googleapis.com">
15 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
16 |     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
17 | 
18 |     <link rel="preconnect" href="https://fonts.googleapis.com">
19 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
20 |     <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700&display=swap" rel="stylesheet">
21 |     
22 |     <script src="https://kit.fontawesome.com/a388be2306.js" crossorigin="anonymous" defer></script>
23 | 
24 | <link rel="stylesheet" href="../src/dist/styles.css">
25 |    
26 |     <title>Car Rental</title>
27 |   </head>
28 |   <body>
29 |     <noscript>You need to enable JavaScript to run this app.</noscript>
30 |     <div id="root"></div>
31 | 
32 |   </body>
33 | </html>
34 | 


--------------------------------------------------------------------------------
/src/components/PlanTrip.jsx:
--------------------------------------------------------------------------------
 1 | import SelectCar from "../images/plan/icon1.png";
 2 | import Contact from "../images/plan/icon2.png";
 3 | import Drive from "../images/plan/icon3.png";
 4 | 
 5 | function PlanTrip() {
 6 |   return (
 7 |     <>
 8 |       <section className="plan-section">
 9 |         <div className="container">
10 |           <div className="plan-container">
11 |             <div className="plan-container__title">
12 |               <h3>Plan your trip now</h3>
13 |               <h2>Quick & easy car rental</h2>
14 |             </div>
15 | 
16 |             <div className="plan-container__boxes">
17 |               <div className="plan-container__boxes__box">
18 |                 <img src={SelectCar} alt="icon_img" />
19 |                 <h3>Select Car</h3>
20 |                 <p>
21 |                   We offers a big range of vehicles for all your driving needs.
22 |                   We have the perfect car to meet your needs
23 |                 </p>
24 |               </div>
25 | 
26 |               <div className="plan-container__boxes__box">
27 |                 <img src={Contact} alt="icon_img" />
28 |                 <h3>Contact Operator</h3>
29 |                 <p>
30 |                   Our knowledgeable and friendly operators are always ready to
31 |                   help with any questions or concerns
32 |                 </p>
33 |               </div>
34 | 
35 |               <div className="plan-container__boxes__box">
36 |                 <img src={Drive} alt="icon_img" />
37 |                 <h3>Let's Drive</h3>
38 |                 <p>
39 |                   Whether you're hitting the open road, we've got you covered
40 |                   with our wide range of cars
41 |                 </p>
42 |               </div>
43 |             </div>
44 |           </div>
45 |         </div>
46 |       </section>
47 |     </>
48 |   );
49 | }
50 | 
51 | export default PlanTrip;
52 | 


--------------------------------------------------------------------------------
/src/Pages/Team.jsx:
--------------------------------------------------------------------------------
 1 | import Footer from "../components/Footer";
 2 | import HeroPages from "../components/HeroPages";
 3 | import Person1 from "../images/team/1.png";
 4 | import Person2 from "../images/team/2.png";
 5 | import Person3 from "../images/team/3.png";
 6 | import Person4 from "../images/team/4.png";
 7 | import Person5 from "../images/team/5.png";
 8 | import Person6 from "../images/team/6.png";
 9 | 
10 | function Team() {
11 |   const teamPpl = [
12 |     { img: Person1, name: "Luke Miller", job: "Salesman" },
13 |     { img: Person2, name: "Michael Diaz", job: "Business Owner" },
14 |     { img: Person3, name: "Briana Ross", job: "Photographer" },
15 |     { img: Person4, name: "Lauren Rivera", job: "Car Detailist" },
16 |     { img: Person5, name: "Martin Rizz", job: "Mechanic" },
17 |     { img: Person6, name: "Caitlyn Hunt", job: "Menager" },
18 |   ];
19 |   return (
20 |     <>
21 |       <section className="team-page">
22 |         <HeroPages name="Our Team" />
23 |         <div className="cotnainer">
24 |           <div className="team-container">
25 |             {teamPpl.map((ppl, id) => (
26 |               <div key={id} className="team-container__box">
27 |                 <div className="team-container__box__img-div">
28 |                   <img src={ppl.img} alt="team_img" />
29 |                 </div>
30 |                 <div className="team-container__box__descr">
31 |                   <h3>{ppl.name}</h3>
32 |                   <p>{ppl.job}</p>
33 |                 </div>
34 |               </div>
35 |             ))}
36 |           </div>
37 |         </div>
38 |         <div className="book-banner">
39 |           <div className="book-banner__overlay"></div>
40 |           <div className="container">
41 |             <div className="text-content">
42 |               <h2>Book a car by getting in touch with us</h2>
43 |               <span>
44 |                 <i className="fa-solid fa-phone"></i>
45 |                 <h3>(123) 456-7869</h3>
46 |               </span>
47 |             </div>
48 |           </div>
49 |         </div>
50 |         <Footer />
51 |       </section>
52 |     </>
53 |   );
54 | }
55 | 
56 | export default Team;
57 | 


--------------------------------------------------------------------------------
/src/components/CarData.js:
--------------------------------------------------------------------------------
 1 | import Golf6 from "../images/cars-big/golf6.jpg";
 2 | import AudiA1 from "../images/cars-big/audia1.jpg";
 3 | import Toyota from "../images/cars-big/toyotacamry.jpg";
 4 | import Bmw320 from "../images/cars-big/bmw320.jpg";
 5 | import Benz from "../images/cars-big/benz.jpg";
 6 | import Passat from "../images/cars-big/passatcc.jpg";
 7 | 
 8 | export const CAR_DATA = [
 9 |   [
10 |     {
11 |       name: "VW Golf 6",
12 |       price: "37",
13 |       img: Golf6,
14 |       model: "Golf 6",
15 |       mark: "Volkswagen",
16 |       year: "2008",
17 |       doors: "4/5",
18 |       air: "Yes",
19 |       transmission: "Manual",
20 |       fuel: "Diesel",
21 |     },
22 |   ],
23 |   [
24 |     {
25 |       name: "Audi A1 S-Line",
26 |       price: "45",
27 |       img: AudiA1,
28 |       model: "Audi",
29 |       mark: "A1",
30 |       year: "2012",
31 |       doors: "4/5",
32 |       air: "Yes",
33 |       transmission: "Manual",
34 |       fuel: "Gasoline",
35 |     },
36 |   ],
37 |   [
38 |     {
39 |       name: "Toyota Camry",
40 |       price: "30",
41 |       img: Toyota,
42 |       model: "Camry",
43 |       mark: "Toyota",
44 |       year: "2006",
45 |       doors: "4/5",
46 |       air: "Yes",
47 |       transmission: "Automatic",
48 |       fuel: "Hybrid",
49 |     },
50 |   ],
51 |   [
52 |     {
53 |       name: "BMW 320 ModernLine",
54 |       price: "35",
55 |       img: Bmw320,
56 |       model: "320",
57 |       mark: "BMW",
58 |       year: "2012",
59 |       doors: "4/5",
60 |       air: "Yes",
61 |       transmission: "Manual",
62 |       fuel: "Diesel",
63 |     },
64 |   ],
65 |   [
66 |     {
67 |       name: "Mercedes-Benz GLK",
68 |       price: "50",
69 |       img: Benz,
70 |       model: "Benz GLK",
71 |       mark: "Mercedes",
72 |       year: "2006",
73 |       doors: "4/5",
74 |       air: "Yes",
75 |       transmission: "Manual",
76 |       fuel: "Diesel",
77 |     },
78 |   ],
79 |   [
80 |     {
81 |       name: "VW Passat CC",
82 |       price: "25",
83 |       img: Passat,
84 |       model: "Passat CC",
85 |       mark: "Volkswagen",
86 |       year: "2008",
87 |       doors: "4/5",
88 |       air: "Yes",
89 |       transmission: "Automatic",
90 |       fuel: "Gasoline",
91 |     },
92 |   ],
93 | ];
94 | 


--------------------------------------------------------------------------------
/src/styles/TestimonialsStyles/_testimonials.scss:
--------------------------------------------------------------------------------
  1 | @use "../global" as *;
  2 | 
  3 | .testimonials-section {
  4 |   background-color: $bg-gray;
  5 |   padding: 10rem 0;
  6 |   color: $text-black;
  7 | }
  8 | 
  9 | .testimonials-content {
 10 |   display: flex;
 11 |   flex-direction: column;
 12 | 
 13 |   &__title {
 14 |     display: flex;
 15 |     flex-direction: column;
 16 |     margin: 0 auto;
 17 |     text-align: center;
 18 |     max-width: 70rem;
 19 |     margin-bottom: 5rem;
 20 | 
 21 |     h4 {
 22 |       font-size: $h4-size;
 23 |       font-family: $text-font;
 24 |       font-weight: 500;
 25 |     }
 26 | 
 27 |     h2 {
 28 |       font-size: $h2-size;
 29 |       margin-bottom: 1.4rem;
 30 |     }
 31 | 
 32 |     p {
 33 |       font-size: $p-size;
 34 |       font-family: $text-font;
 35 |       color: $text-gray;
 36 |       line-height: 1.4;
 37 |     }
 38 |   }
 39 | }
 40 | 
 41 | .all-testimonials {
 42 |   display: flex;
 43 |   gap: 3rem;
 44 |   width: 100%;
 45 |   justify-content: center;
 46 |   padding: 3rem;
 47 | 
 48 |   @media (max-width: 1000px) {
 49 |     padding: 0;
 50 |   }
 51 | 
 52 |   &__box {
 53 |     background-color: white;
 54 |     box-shadow: 0 20px 40px 0 rgb(0 0 0 / 8%);
 55 |     width: 54rem;
 56 |     padding: 5.5rem;
 57 |     position: relative;
 58 | 
 59 |     @media (max-width: 1000px) {
 60 |       padding: 5rem 3rem;
 61 |     }
 62 | 
 63 |     p {
 64 |       font-size: $h4-size;
 65 |       font-weight: 500;
 66 |     }
 67 | 
 68 |     &__name {
 69 |       display: flex;
 70 | 
 71 |       &__profile {
 72 |         display: flex;
 73 |         gap: 2rem;
 74 |         align-items: center;
 75 |         margin-top: 3rem;
 76 | 
 77 |         img {
 78 |           width: 7rem;
 79 |           height: 7rem;
 80 |           border-radius: 50%;
 81 |         }
 82 | 
 83 |         h4 {
 84 |           font-size: 1.8rem;
 85 |         }
 86 | 
 87 |         p {
 88 |           font-size: $p-size;
 89 |           font-family: $text-font;
 90 |           font-weight: 400;
 91 |         }
 92 |       }
 93 |     }
 94 |   }
 95 | }
 96 | 
 97 | .quotes-icon {
 98 |   font-size: 6.2rem;
 99 |   color: $text-orange;
100 |   position: absolute;
101 |   bottom: 33px;
102 |   right: 60px;
103 | 
104 |   @media (max-width: 470px) {
105 |     display: none;
106 |   }
107 | }
108 | 
109 | .box-2 {
110 |   @media (max-width: 900px) {
111 |     display: none;
112 |   }
113 | }
114 | 


--------------------------------------------------------------------------------
/src/styles/FaqStyles/_faq.scss:
--------------------------------------------------------------------------------
  1 | @use "../global" as *;
  2 | 
  3 | .faq-section {
  4 |   background-image: url("/src/images/faq/car.png");
  5 |   padding: 10rem 0;
  6 |   background-size: auto;
  7 |   background-repeat: no-repeat;
  8 |   background-position: 0 70%;
  9 | }
 10 | 
 11 | .faq-content {
 12 |   display: flex;
 13 |   flex-direction: column;
 14 |   color: $text-black;
 15 | 
 16 |   &__title {
 17 |     display: flex;
 18 |     flex-direction: column;
 19 |     margin: 0 auto;
 20 |     text-align: center;
 21 |     max-width: 80rem;
 22 |     line-height: 1.5;
 23 | 
 24 |     h5 {
 25 |       font-size: $h4-size;
 26 |     }
 27 | 
 28 |     h2 {
 29 |       font-size: $h2-size;
 30 |       margin-bottom: 1.7rem;
 31 |     }
 32 | 
 33 |     p {
 34 |       font-size: $p-size;
 35 |       color: $text-gray;
 36 |     }
 37 |   }
 38 | }
 39 | 
 40 | .all-questions {
 41 |   display: flex;
 42 |   flex-direction: column;
 43 |   align-items: center;
 44 |   margin-top: 7rem;
 45 | }
 46 | 
 47 | .faq-box {
 48 |   display: flex;
 49 |   flex-direction: column;
 50 |   color: $text-black;
 51 |   background-color: white;
 52 |   box-shadow: 0 10px 15px 0 rgba(0, 0, 0, 0.1);
 53 | 
 54 |   width: 80rem;
 55 |   cursor: pointer;
 56 | 
 57 |   @media (max-width: 850px) {
 58 |     width: 100%;
 59 |   }
 60 | 
 61 |   &__question {
 62 |     display: flex;
 63 |     justify-content: space-between;
 64 |     align-items: center;
 65 |     box-shadow: 0 3px 6px 0 rgb(0 0 0 / 10%);
 66 |     padding: 1.8rem 4.5rem;
 67 |     transition: 0.15s ease;
 68 | 
 69 |     p {
 70 |       font-size: 1.8rem;
 71 |       font-weight: 500;
 72 |     }
 73 | 
 74 |     i {
 75 |       font-size: 2rem;
 76 |     }
 77 |   }
 78 | 
 79 |   &__answer {
 80 |     font-size: $p-size;
 81 |     font-family: $text-font;
 82 |     color: $text-gray;
 83 |     line-height: 1.7;
 84 |     max-height: 0;
 85 |     overflow: hidden;
 86 |     transition: 0.4s ease;
 87 |     padding: 0 4.5rem;
 88 |   }
 89 | }
 90 | 
 91 | .active-answer {
 92 |   max-height: 20rem;
 93 |   padding: 2.8rem 4.5rem;
 94 |   transition: 0.4s ease;
 95 | 
 96 |   @media (max-width: 550px) {
 97 |     max-height: 30rem;
 98 |   }
 99 | 
100 |   @media (max-width: 420px) {
101 |     max-height: 55rem;
102 |   }
103 | }
104 | 
105 | .active-question {
106 |   background-color: $text-orange;
107 |   color: white;
108 |   box-shadow: 0 10px 15px 0 rgb(255 83 48 / 35%);
109 | }
110 | 


--------------------------------------------------------------------------------
/src/components/CarBox.jsx:
--------------------------------------------------------------------------------
 1 | import { useState } from "react";
 2 | 
 3 | function CarBox({ data, carID }) {
 4 |   const [carLoad, setCarLoad] = useState(true);
 5 |   return (
 6 |     <>
 7 |       {data[carID].map((car, id) => (
 8 |         <div key={id} className="box-cars">
 9 |           {/* car */}
10 |           <div className="pick-car">
11 |             {carLoad && <span className="loader"></span>}
12 |             <img
13 |               style={{ display: carLoad ? "none" : "block" }}
14 |               src={car.img}
15 |               alt="car_img"
16 |               onLoad={() => setCarLoad(false)}
17 |             />
18 |           </div>
19 |           {/* description */}
20 |           <div className="pick-description">
21 |             <div className="pick-description__price">
22 |               <span>${car.price}</span>/ rent per day
23 |             </div>
24 |             <div className="pick-description__table">
25 |               <div className="pick-description__table__col">
26 |                 <span>Model</span>
27 |                 <span>{car.model}</span>
28 |               </div>
29 | 
30 |               <div className="pick-description__table__col">
31 |                 <span>Mark</span>
32 |                 <span>{car.mark}</span>
33 |               </div>
34 | 
35 |               <div className="pick-description__table__col">
36 |                 <span>Year</span>
37 |                 <span>{car.year}</span>
38 |               </div>
39 | 
40 |               <div className="pick-description__table__col">
41 |                 <span>Doors</span>
42 |                 <span>{car.doors}</span>
43 |               </div>
44 | 
45 |               <div className="pick-description__table__col">
46 |                 <span>AC</span>
47 |                 <span>{car.air}</span>
48 |               </div>
49 | 
50 |               <div className="pick-description__table__col">
51 |                 <span>Transmission</span>
52 |                 <span>{car.transmission}</span>
53 |               </div>
54 | 
55 |               <div className="pick-description__table__col">
56 |                 <span>Fuel</span>
57 |                 <span>{car.fuel}</span>
58 |               </div>
59 |             </div>
60 |             {/* btn cta */}
61 |             <a className="cta-btn" href="#booking-section">
62 |               Reserve Now
63 |             </a>
64 |           </div>
65 |         </div>
66 |       ))}
67 |     </>
68 |   );
69 | }
70 | 
71 | export default CarBox;
72 | 


--------------------------------------------------------------------------------
/src/Pages/Contact.jsx:
--------------------------------------------------------------------------------
 1 | import Footer from "../components/Footer";
 2 | import HeroPages from "../components/HeroPages";
 3 | 
 4 | function Contact() {
 5 |   return (
 6 |     <>
 7 |       <section className="contact-page">
 8 |         <HeroPages name="Contact" />
 9 |         <div className="container">
10 |           <div className="contact-div">
11 |             <div className="contact-div__text">
12 |               <h2>Need additional information?</h2>
13 |               <p>
14 |                 A multifaceted professional skilled in multiple fields of
15 |                 research, development as well as a learning specialist. Over 15
16 |                 years of experience.
17 |               </p>
18 |               <a href="/">
19 |                 <i className="fa-solid fa-phone"></i>&nbsp; (123) 456-7869
20 |               </a>
21 |               <a href="/">
22 |                 <i className="fa-solid fa-envelope"></i>&nbsp;
23 |                 carrental@carmail.com
24 |               </a>
25 |               <a href="/">
26 |                 <i className="fa-solid fa-location-dot"></i>&nbsp; Belgrade,
27 |                 Serbia
28 |               </a>
29 |             </div>
30 |             <div className="contact-div__form">
31 |               <form>
32 |                 <label>
33 |                   Full Name <b>*</b>
34 |                 </label>
35 |                 <input type="text" placeholder='E.g: "Joe Shmoe"'></input>
36 | 
37 |                 <label>
38 |                   Email <b>*</b>
39 |                 </label>
40 |                 <input type="email" placeholder="youremail@example.com"></input>
41 | 
42 |                 <label>
43 |                   Tell us about it <b>*</b>
44 |                 </label>
45 |                 <textarea placeholder="Write Here.."></textarea>
46 | 
47 |                 <button type="submit">
48 |                   <i className="fa-solid fa-envelope-open-text"></i>&nbsp; Send
49 |                   Message
50 |                 </button>
51 |               </form>
52 |             </div>
53 |           </div>
54 |         </div>
55 |         <div className="book-banner">
56 |           <div className="book-banner__overlay"></div>
57 |           <div className="container">
58 |             <div className="text-content">
59 |               <h2>Book a car by getting in touch with us</h2>
60 |               <span>
61 |                 <i className="fa-solid fa-phone"></i>
62 |                 <h3>(123) 456-7869</h3>
63 |               </span>
64 |             </div>
65 |           </div>
66 |         </div>
67 |         <Footer />
68 |       </section>
69 |     </>
70 |   );
71 | }
72 | 
73 | export default Contact;
74 | 


--------------------------------------------------------------------------------
/src/components/Hero.jsx:
--------------------------------------------------------------------------------
 1 | import { Link } from "react-router-dom";
 2 | import BgShape from "../images/hero/hero-bg.png";
 3 | import HeroCar from "../images/hero/main-car.png";
 4 | import { useEffect, useState } from "react";
 5 | 
 6 | function Hero() {
 7 |   const [goUp, setGoUp] = useState(false);
 8 | 
 9 |   const scrollToTop = () => {
10 |     window.scrollTo({ top: (0, 0), behavior: "smooth" });
11 |   };
12 | 
13 |   const bookBtn = () => {
14 |     document
15 |       .querySelector("#booking-section")
16 |       .scrollIntoView({ behavior: "smooth" });
17 |   };
18 | 
19 |   useEffect(() => {
20 |     const onPageScroll = () => {
21 |       if (window.pageYOffset > 600) {
22 |         setGoUp(true);
23 |       } else {
24 |         setGoUp(false);
25 |       }
26 |     };
27 |     window.addEventListener("scroll", onPageScroll);
28 | 
29 |     return () => {
30 |       window.removeEventListener("scroll", onPageScroll);
31 |     };
32 |   }, []);
33 |   return (
34 |     <>
35 |       <section id="home" className="hero-section">
36 |         <div className="container">
37 |           <img className="bg-shape" src={BgShape} alt="bg-shape" />
38 |           <div className="hero-content">
39 |             <div className="hero-content__text">
40 |               <h4>Plan your trip now</h4>
41 |               <h1>
42 |                 Save <span>big</span> with our car rental
43 |               </h1>
44 |               <p>
45 |                 Rent the car of your dreams. Unbeatable prices, unlimited miles,
46 |                 flexible pick-up options and much more.
47 |               </p>
48 |               <div className="hero-content__text__btns">
49 |                 <Link
50 |                   onClick={bookBtn}
51 |                   className="hero-content__text__btns__book-ride"
52 |                   to="/"
53 |                 >
54 |                   Book Ride &nbsp; <i className="fa-solid fa-circle-check"></i>
55 |                 </Link>
56 |                 <Link className="hero-content__text__btns__learn-more" to="/">
57 |                   Learn More &nbsp; <i className="fa-solid fa-angle-right"></i>
58 |                 </Link>
59 |               </div>
60 |             </div>
61 | 
62 |             {/* img */}
63 |             <img
64 |               src={HeroCar}
65 |               alt="car-img"
66 |               className="hero-content__car-img"
67 |             />
68 |           </div>
69 |         </div>
70 | 
71 |         {/* page up */}
72 |         <div
73 |           onClick={scrollToTop}
74 |           className={`scroll-up ${goUp ? "show-scroll" : ""}`}
75 |         >
76 |           <i className="fa-solid fa-angle-up"></i>
77 |         </div>
78 |       </section>
79 |     </>
80 |   );
81 | }
82 | 
83 | export default Hero;
84 | 


--------------------------------------------------------------------------------
/src/components/Testimonials.jsx:
--------------------------------------------------------------------------------
 1 | import Img2 from "../images/testimonials/pfp1.jpg";
 2 | import Img3 from "../images/testimonials/pfp2.jpg";
 3 | 
 4 | function Testimonials() {
 5 |   return (
 6 |     <>
 7 |       <section className="testimonials-section">
 8 |         <div className="container">
 9 |           <div className="testimonials-content">
10 |             <div className="testimonials-content__title">
11 |               <h4>Reviewed by People</h4>
12 |               <h2>Client's Testimonials</h2>
13 |               <p>
14 |                 Discover the positive impact we've made on the our clients by
15 |                 reading through their testimonials. Our clients have experienced
16 |                 our service and results, and they're eager to share their
17 |                 positive experiences with you.
18 |               </p>
19 |             </div>
20 | 
21 |             <div className="all-testimonials">
22 |               <div className="all-testimonials__box">
23 |                 <span className="quotes-icon">
24 |                   <i className="fa-solid fa-quote-right"></i>
25 |                 </span>
26 |                 <p>
27 |                   "We rented a car from this website and had an amazing
28 |                   experience! The booking was easy and the rental rates were
29 |                   very affordable. "
30 |                 </p>
31 |                 <div className="all-testimonials__box__name">
32 |                   <div className="all-testimonials__box__name__profile">
33 |                     <img src={Img2} alt="user_img" />
34 |                     <span>
35 |                       <h4>Jones Mbogholi</h4>
36 |                       <p>Kenya</p>
37 |                     </span>
38 |                   </div>
39 |                 </div>
40 |               </div>
41 | 
42 |               <div className="all-testimonials__box box-2">
43 |                 <span className="quotes-icon">
44 |                   <i className="fa-solid fa-quote-right"></i>
45 |                 </span>
46 |                 <p>
47 |                   "The car was in great condition and made our trip even better.
48 |                   Highly recommend for this car rental website!"
49 |                 </p>
50 |                 <div className="all-testimonials__box__name">
51 |                   <div className="all-testimonials__box__name__profile">
52 |                     <img src={Img3} alt="user_img" />
53 |                     <span>
54 |                       <h4>Solomon Odingo </h4>
55 |                       <p>South Sudan</p>
56 |                     </span>
57 |                   </div>
58 |                 </div>
59 |               </div>
60 |             </div>
61 |           </div>
62 |         </div>
63 |       </section>
64 |     </>
65 |   );
66 | }
67 | 
68 | export default Testimonials;
69 | 


--------------------------------------------------------------------------------
/src/components/Footer.jsx:
--------------------------------------------------------------------------------
 1 | function Footer() {
 2 |   return (
 3 |     <>
 4 |       <footer>
 5 |         <div className="container">
 6 |           <div className="footer-content">
 7 |             <ul className="footer-content__1">
 8 |               <li>
 9 |                 <span>CAR</span> Rental
10 |               </li>
11 |               <li>
12 |                 We offers a big range of vehicles for all your driving needs. We
13 |                 have the perfect car to meet your needs.
14 |               </li>
15 |               <li>
16 |                 <a href="tel:123456789">
17 |                   <i className="fa-solid fa-phone"></i> &nbsp; (123) -456-789
18 |                 </a>
19 |               </li>
20 | 
21 |               <li>
22 |                 <a
23 |                   href="mailto: 
24 |                 carrental@gmail.com"
25 |                 >
26 |                   <i className="fa-solid fa-envelope"></i>
27 |                   &nbsp; calebjephuneh@gmail.com
28 |                 </a>
29 |               </li>
30 | 
31 |               <li>
32 |                 <a
33 |                   style={{ fontSize: "14px" }}
34 |                   target="_blank"
35 |                   rel="noreferrer"
36 |                   href="https://jephunneh.com/"
37 |                 >
38 |                   Design by cjephuneh
39 |                 </a>
40 |               </li>
41 |             </ul>
42 | 
43 |             <ul className="footer-content__2">
44 |               <li>Company</li>
45 |               <li>
46 |                 <a href="#home">New York</a>
47 |               </li>
48 |               <li>
49 |                 <a href="#home">Careers</a>
50 |               </li>
51 |               <li>
52 |                 <a href="#home">Mobile</a>
53 |               </li>
54 |               <li>
55 |                 <a href="#home">Blog</a>
56 |               </li>
57 |               <li>
58 |                 <a href="#home">How we work</a>
59 |               </li>
60 |             </ul>
61 | 
62 |             <ul className="footer-content__2">
63 |               <li>Working Hours</li>
64 |               <li>Mon - Fri: 9:00AM - 9:00PM</li>
65 |               <li>Sat: 9:00AM - 19:00PM</li>
66 |               <li>Sun: Closed</li>
67 |             </ul>
68 | 
69 |             <ul className="footer-content__2">
70 |               <li>Subscription</li>
71 |               <li>
72 |                 <p>Subscribe your Email address for latest news & updates.</p>
73 |               </li>
74 |               <li>
75 |                 <input type="email" placeholder="Enter Email Address"></input>
76 |               </li>
77 |               <li>
78 |                 <button className="submit-email">Submit</button>
79 |               </li>
80 |             </ul>
81 |           </div>
82 |         </div>
83 |       </footer>
84 |     </>
85 |   );
86 | }
87 | 
88 | export default Footer;
89 | 


--------------------------------------------------------------------------------
/src/styles/ContactStyles/_contact.scss:
--------------------------------------------------------------------------------
  1 | @use "../global" as *;
  2 | 
  3 | .contact-div {
  4 |   display: grid;
  5 |   grid-template-columns: 1fr 1fr;
  6 |   gap: 3rem;
  7 |   margin: 0 auto;
  8 |   color: $text-black;
  9 |   padding: 10rem 2rem;
 10 |   background-image: url("/src/images/banners/bg-contact.png");
 11 |   background-size: auto;
 12 |   background-position: center center;
 13 |   background-repeat: no-repeat;
 14 | 
 15 |   @media (max-width: 950px) {
 16 |     grid-template-columns: 1fr;
 17 |     text-align: center;
 18 |   }
 19 | 
 20 |   &__text {
 21 |     display: flex;
 22 |     flex-direction: column;
 23 |     gap: 1rem;
 24 |     max-width: 41rem;
 25 | 
 26 |     @media (max-width: 950px) {
 27 |       margin: 0 auto;
 28 |       margin-bottom: 2rem;
 29 |     }
 30 | 
 31 |     h2 {
 32 |       font-size: $h2-size;
 33 |       line-height: 1.3;
 34 |       margin-bottom: 2rem;
 35 |     }
 36 | 
 37 |     p {
 38 |       font-size: $p-size;
 39 |       font-family: $text-font;
 40 |       color: $text-gray;
 41 |       line-height: 1.6;
 42 |       margin-bottom: 2rem;
 43 |     }
 44 | 
 45 |     a {
 46 |       text-decoration: none;
 47 |       color: $text-black;
 48 |       font-size: $p-size;
 49 |       font-weight: 500;
 50 |       transition: all 0.2s;
 51 |       margin-bottom: 0.5rem;
 52 | 
 53 |       &:hover {
 54 |         color: $text-orange;
 55 |       }
 56 |     }
 57 |   }
 58 | 
 59 |   &__form {
 60 |     display: flex;
 61 |     flex-direction: column;
 62 | 
 63 |     form {
 64 |       display: flex;
 65 |       flex-direction: column;
 66 | 
 67 |       label {
 68 |         font-size: $p-size;
 69 |         font-weight: 600;
 70 |         margin-bottom: 1rem;
 71 | 
 72 |         b {
 73 |           color: $text-orange;
 74 |         }
 75 |       }
 76 | 
 77 |       input {
 78 |         background-color: #f2f2f2;
 79 |         padding: 19px 30px 19px 30px;
 80 |         font-size: $p-size;
 81 |         border: none;
 82 |         outline: none;
 83 |         margin-bottom: 2.3rem;
 84 |       }
 85 | 
 86 |       textarea {
 87 |         background-color: #f2f2f2;
 88 |         height: 18rem;
 89 |         padding: 19px 30px 19px 30px;
 90 |         font-size: $p-size;
 91 |         border: none;
 92 |         outline: none;
 93 |         margin-bottom: 2.5rem;
 94 |       }
 95 | 
 96 |       button {
 97 |         background-color: #ff4d30;
 98 |         padding: 1.8rem 3rem;
 99 |         border-radius: 0.3rem;
100 |         box-shadow: 0 10px 15px 0 rgb(255 83 48 / 35%);
101 |         transition: all 0.3s;
102 |         border: 2px solid #ff4d30;
103 |         color: white;
104 |         font-size: 1.8rem;
105 |         font-weight: 600;
106 |         cursor: pointer;
107 | 
108 |         &:hover {
109 |           box-shadow: 0 10px 15px 0 rgb(255 83 48 / 60%);
110 |           background-color: #fa4226;
111 |         }
112 |       }
113 |     }
114 |   }
115 | }
116 | 


--------------------------------------------------------------------------------
/src/Pages/About.jsx:
--------------------------------------------------------------------------------
 1 | import Footer from "../components/Footer";
 2 | import HeroPages from "../components/HeroPages";
 3 | import PlanTrip from "../components/PlanTrip";
 4 | import AboutMain from "../images/about/about-main.jpg";
 5 | import Box1 from "../images/about/icon1.png";
 6 | import Box2 from "../images/about/icon2.png";
 7 | import Box3 from "../images/about/icon3.png";
 8 | 
 9 | function About() {
10 |   return (
11 |     <>
12 |       <section className="about-page">
13 |         <HeroPages name="About" />
14 |         <div className="container">
15 |           <div className="about-main">
16 |             <img
17 |               className="about-main__img"
18 |               src={AboutMain}
19 |               alt="car-renting"
20 |             />
21 |             <div className="about-main__text">
22 |               <h3>About Company</h3>
23 |               <h2>You start the engine and your adventure begins</h2>
24 |               <p>
25 |                 Certain but she but shyness why cottage. Guy the put instrument
26 |                 sir entreaties affronting. Pretended exquisite see cordially the
27 |                 you. Weeks quiet do vexed or whose. Motionless if no to
28 |                 affronting imprudence no precaution. My indulged as disposal
29 |                 strongly attended.
30 |               </p>
31 |               <div className="about-main__text__icons">
32 |                 <div className="about-main__text__icons__box">
33 |                   <img src={Box1} alt="car-icon" />
34 |                   <span>
35 |                     <h4>20</h4>
36 |                     <p>Car Types</p>
37 |                   </span>
38 |                 </div>
39 |                 <div className="about-main__text__icons__box">
40 |                   <img src={Box2} alt="car-icon" />
41 |                   <span>
42 |                     <h4>85</h4>
43 |                     <p>Rental Outlets</p>
44 |                   </span>
45 |                 </div>
46 |                 <div className="about-main__text__icons__box">
47 |                   <img src={Box3} alt="car-icon" className="last-fk" />
48 |                   <span>
49 |                     <h4>75</h4>
50 |                     <p>Repair Shop</p>
51 |                   </span>
52 |                 </div>
53 |               </div>
54 |             </div>
55 |           </div>
56 |           <PlanTrip />
57 |         </div>
58 |       </section>
59 |       <div className="book-banner">
60 |         <div className="book-banner__overlay"></div>
61 |         <div className="container">
62 |           <div className="text-content">
63 |             <h2>Book a car by getting in touch with us</h2>
64 |             <span>
65 |               <i className="fa-solid fa-phone"></i>
66 |               <h3>(123) 456-7869</h3>
67 |             </span>
68 |           </div>
69 |         </div>
70 |       </div>
71 |       <Footer />
72 |     </>
73 |   );
74 | }
75 | 
76 | export default About;
77 | 


--------------------------------------------------------------------------------
/src/styles/ChooseStyles/_choose.scss:
--------------------------------------------------------------------------------
  1 | @use "../global" as *;
  2 | 
  3 | .choose-section {
  4 |   background-color: white;
  5 |   padding: 2rem 0 10rem 0;
  6 |   background-image: url("/src/images/chooseUs/bg.png");
  7 |   background-position: -225px 255px;
  8 |   background-size: cover;
  9 |   background-repeat: no-repeat;
 10 | }
 11 | 
 12 | .choose-container {
 13 |   display: flex;
 14 |   flex-direction: column;
 15 | 
 16 |   &__img {
 17 |     width: 90%;
 18 |     height: auto;
 19 |     margin: 0 auto;
 20 | 
 21 |     @media (max-width: 550px) {
 22 |       width: 100%;
 23 |     }
 24 |   }
 25 | }
 26 | 
 27 | .text-container {
 28 |   display: flex;
 29 |   justify-content: space-around;
 30 |   margin-top: 3rem;
 31 |   width: 100%;
 32 | 
 33 |   @media (max-width: 1000px) {
 34 |     flex-direction: column;
 35 |     align-items: center;
 36 |     text-align: center;
 37 |     gap: 5.5rem;
 38 |   }
 39 | 
 40 |   &__left {
 41 |     text-align: left;
 42 |     display: flex;
 43 |     flex-direction: column;
 44 |     max-width: 50rem;
 45 |     color: $text-black;
 46 | 
 47 |     @media (max-width: 1000px) {
 48 |       align-items: center;
 49 |       text-align: center;
 50 |     }
 51 | 
 52 |     h4 {
 53 |       font-size: $h4-size;
 54 |       margin-bottom: 0.7rem;
 55 |       font-weight: 600;
 56 |       font-family: $text-font;
 57 |     }
 58 | 
 59 |     h2 {
 60 |       font-size: $h2-size;
 61 |       line-height: 1.2;
 62 |       margin-bottom: 2rem;
 63 |     }
 64 | 
 65 |     p {
 66 |       font-size: $p-size;
 67 |       font-family: $text-font;
 68 |       line-height: 1.5;
 69 |       color: $text-gray;
 70 |       margin-bottom: 3.3rem;
 71 |     }
 72 | 
 73 |     a {
 74 |       text-decoration: none;
 75 |       color: white;
 76 |       font-weight: 700;
 77 |       background-color: #ff4d30;
 78 |       padding: 1.5rem 2.5rem;
 79 |       border-radius: 0.3rem;
 80 |       box-shadow: 0 10px 15px 0 rgb(255 83 48 / 35%);
 81 |       transition: all 0.3s;
 82 |       border: 2px solid #ff4d30;
 83 |       font-size: $p-size;
 84 |       width: fit-content;
 85 | 
 86 |       &:hover {
 87 |         box-shadow: 0 10px 15px 0 rgb(255 83 48 / 60%);
 88 |         background-color: #fa4226;
 89 |       }
 90 |     }
 91 |   }
 92 | 
 93 |   &__right {
 94 |     display: flex;
 95 |     flex-direction: column;
 96 |     gap: 4.5rem;
 97 |     max-width: 44rem;
 98 | 
 99 |     &__box {
100 |       display: flex;
101 | 
102 |       @media (max-width: 550px) {
103 |         flex-direction: column;
104 |         align-items: center;
105 |       }
106 | 
107 |       img {
108 |         width: 11rem;
109 |         height: 11rem;
110 |         margin-right: 1.1rem;
111 |       }
112 | 
113 |       &__text {
114 |         display: flex;
115 |         flex-direction: column;
116 |         gap: 1rem;
117 |         justify-content: center;
118 | 
119 |         h4 {
120 |           font-size: $h3-size;
121 |         }
122 | 
123 |         p {
124 |           font-size: $p-size;
125 |           color: $text-gray;
126 |           font-family: $text-font;
127 |           line-height: 1.3;
128 |         }
129 |       }
130 |     }
131 |   }
132 | }
133 | 


--------------------------------------------------------------------------------
/src/styles/FooterStyles/_footer.scss:
--------------------------------------------------------------------------------
  1 | @use "../global" as *;
  2 | 
  3 | footer {
  4 |   background-color: $bg-white;
  5 |   padding: 10rem 0;
  6 | }
  7 | 
  8 | .footer-content {
  9 |   display: grid;
 10 |   color: #010103;
 11 |   grid-template-columns: 27fr 21fr 21fr 21fr;
 12 |   gap: 8rem;
 13 |   justify-content: center;
 14 |   text-align: left;
 15 |   color: $text-black;
 16 | 
 17 |   @media (max-width: 1100px) {
 18 |     grid-template-columns: 1fr 1fr;
 19 |   }
 20 | 
 21 |   @media (max-width: 650px) {
 22 |     grid-template-columns: 1fr;
 23 |   }
 24 | 
 25 |   &__1 {
 26 |     list-style: none;
 27 |     // max-width: 30rem;
 28 | 
 29 |     @media (max-width: 650px) {
 30 |       text-align: center;
 31 |     }
 32 | 
 33 |     li {
 34 |       a {
 35 |         text-decoration: none;
 36 |         color: $text-black;
 37 |         transition: all 0.2s;
 38 | 
 39 |         &:hover {
 40 |           color: $text-orange;
 41 |         }
 42 |       }
 43 | 
 44 |       &:nth-child(1) {
 45 |         font-size: $h3-size;
 46 |         margin-bottom: 1.5rem;
 47 | 
 48 |         span {
 49 |           font-weight: 700;
 50 |         }
 51 |       }
 52 | 
 53 |       &:nth-child(2) {
 54 |         font-size: $p-size;
 55 |         color: $text-gray;
 56 |         line-height: 1.7;
 57 |         margin-bottom: 3rem;
 58 |       }
 59 | 
 60 |       &:nth-child(3),
 61 |       &:nth-child(4) {
 62 |         font-size: $p-size;
 63 |         font-family: $text-font;
 64 |         font-weight: 500;
 65 |         margin-bottom: 1rem;
 66 |       }
 67 |     }
 68 |   }
 69 | 
 70 |   &__2 {
 71 |     list-style: none;
 72 | 
 73 |     @media (max-width: 650px) {
 74 |       text-align: center;
 75 |     }
 76 | 
 77 |     a {
 78 |       text-decoration: none;
 79 |       color: $text-black;
 80 |       transition: all 0.2s;
 81 | 
 82 |       &:hover {
 83 |         color: $text-orange;
 84 |       }
 85 |     }
 86 | 
 87 |     li {
 88 |       font-size: $p-size;
 89 |       margin-bottom: 1rem;
 90 | 
 91 |       &:nth-child(1) {
 92 |         font-size: $h3-size;
 93 |         font-weight: 700;
 94 |         text-transform: uppercase;
 95 |         font-family: $titles-font;
 96 |         cursor: auto;
 97 |       }
 98 |     }
 99 | 
100 |     input {
101 |       font-family: $text-font;
102 |       font-size: 14px;
103 |       font-weight: 400;
104 |       line-height: 26px;
105 |       background-color: #ececec;
106 |       border-width: 1px;
107 |       border-color: transparent;
108 |       padding: 10px 60px;
109 |       outline: none;
110 |       margin-top: 1rem;
111 | 
112 |       @media (max-width: 1100px) {
113 |         width: 100%;
114 |       }
115 |     }
116 |   }
117 | }
118 | 
119 | .submit-email {
120 |   text-decoration: none;
121 |   color: white;
122 |   font-weight: 700;
123 |   background-color: #ff4d30;
124 |   padding: 1.5rem 2.5rem;
125 |   border-radius: 0.3rem;
126 |   box-shadow: 0 10px 15px 0 rgb(255 83 48 / 25%);
127 |   transition: all 0.3s;
128 |   border: 2px solid #ff4d30;
129 |   font-size: 1.6rem;
130 |   width: fit-content;
131 |   cursor: pointer;
132 |   width: 100%;
133 | 
134 |   &:hover {
135 |     box-shadow: 0 10px 15px 0 rgb(255 83 48 / 40%);
136 |     background-color: #fa4226;
137 |   }
138 | }
139 | 


--------------------------------------------------------------------------------
/src/components/ChooseUs.jsx:
--------------------------------------------------------------------------------
 1 | import MainImg from "../images/chooseUs/main.png";
 2 | import Box1 from "../images/chooseUs/icon1.png";
 3 | import Box2 from "../images/chooseUs/icon2.png";
 4 | import Box3 from "../images/chooseUs/icon3.png";
 5 | 
 6 | function ChooseUs() {
 7 |   return (
 8 |     <>
 9 |       <section className="choose-section">
10 |         <div className="container">
11 |           <div className="choose-container">
12 |             <img
13 |               className="choose-container__img"
14 |               src={MainImg}
15 |               alt="car_img"
16 |             />
17 |             <div className="text-container">
18 |               <div className="text-container__left">
19 |                 <h4>Why Choose Us</h4>
20 |                 <h2>Best valued deals you will ever find</h2>
21 |                 <p>
22 |                   Discover the best deals you'll ever find with our unbeatable
23 |                   offers. We're dedicated to providing you with the best value
24 |                   for your money, so you can enjoy top-quality services and
25 |                   products without breaking the bank. Our deals are designed to
26 |                   give you the ultimate renting experience, so don't miss out on
27 |                   your chance to save big.
28 |                 </p>
29 |                 <a href="#home">
30 |                   Find Details &nbsp;
31 |                   <i className="fa-solid fa-angle-right"></i>
32 |                 </a>
33 |               </div>
34 |               <div className="text-container__right">
35 |                 <div className="text-container__right__box">
36 |                   <img src={Box1} alt="car-img" />
37 |                   <div className="text-container__right__box__text">
38 |                     <h4>Cross Country Drive</h4>
39 |                     <p>
40 |                       Take your driving experience to the next level with our
41 |                       top-notch vehicles for your cross-country adventures.
42 |                     </p>
43 |                   </div>
44 |                 </div>
45 |                 <div className="text-container__right__box">
46 |                   {" "}
47 |                   <img src={Box2} alt="coin-img" />
48 |                   <div className="text-container__right__box__text">
49 |                     <h4>All Inclusive Pricing</h4>
50 |                     <p>
51 |                       Get everything you need in one convenient, transparent
52 |                       price with our all-inclusive pricing policy.
53 |                     </p>
54 |                   </div>
55 |                 </div>
56 |                 <div className="text-container__right__box">
57 |                   {" "}
58 |                   <img src={Box3} alt="coin-img" />
59 |                   <div className="text-container__right__box__text">
60 |                     <h4>No Hidden Charges</h4>
61 |                     <p>
62 |                       Enjoy peace of mind with our no hidden charges policy. We
63 |                       believe in transparent and honest pricing.
64 |                     </p>
65 |                   </div>
66 |                 </div>
67 |               </div>
68 |             </div>
69 |           </div>
70 |         </div>
71 |       </section>
72 |     </>
73 |   );
74 | }
75 | 
76 | export default ChooseUs;
77 | 


--------------------------------------------------------------------------------
/src/styles/NavbarStyles/_navbar.scss:
--------------------------------------------------------------------------------
  1 | @use "../global/" as *;
  2 | 
  3 | .navbar {
  4 |   max-width: 133rem;
  5 |   width: 100%;
  6 |   height: auto;
  7 |   display: flex;
  8 |   justify-content: space-between;
  9 |   align-items: center;
 10 |   padding: 2.7rem 2rem;
 11 |   position: absolute;
 12 |   top: 0;
 13 |   left: 0;
 14 |   right: 0;
 15 |   background-color: transparent;
 16 |   z-index: 99999;
 17 |   margin: 0 auto;
 18 | 
 19 |   &__img {
 20 |     width: 14.5rem;
 21 |     img {
 22 |       width: 100%;
 23 |       height: 100%;
 24 |     }
 25 |   }
 26 | 
 27 |   &__links {
 28 |     display: flex;
 29 |     list-style: none;
 30 |     gap: 2.1rem;
 31 | 
 32 |     a {
 33 |       font-size: $p-size;
 34 |       font-family: $text-font;
 35 |       font-weight: 500;
 36 |       color: $text-black;
 37 |       text-decoration: none;
 38 |       cursor: pointer;
 39 |       transition: all 0.3s;
 40 | 
 41 |       &:hover {
 42 |         color: $text-orange;
 43 |       }
 44 |     }
 45 | 
 46 |     @media (max-width: 1000px) {
 47 |       display: none;
 48 |     }
 49 |   }
 50 | 
 51 |   &__buttons {
 52 |     display: flex;
 53 |     gap: 2.5rem;
 54 |     font-size: $p-size;
 55 |     font-family: $text-font;
 56 |     font-weight: 500;
 57 |     align-items: center;
 58 | 
 59 |     @media (max-width: 1000px) {
 60 |       display: none;
 61 |     }
 62 | 
 63 |     &__sign-in {
 64 |       color: $text-black;
 65 |       cursor: pointer;
 66 |       transition: all 0.3s;
 67 | 
 68 |       &:hover {
 69 |         color: $text-orange;
 70 |       }
 71 |     }
 72 | 
 73 |     &__register {
 74 |       background-color: $text-orange;
 75 |       color: white;
 76 |       padding: 1.5rem 3rem;
 77 |       border-radius: 3px;
 78 |       box-shadow: 0 10px 15px 0 rgb(255 83 48 / 35%);
 79 |       transition: all 0.3s;
 80 | 
 81 |       &:hover {
 82 |         box-shadow: 0 10px 15px 0 rgb(255 83 48 / 50%);
 83 |         background-color: #fa4226;
 84 |       }
 85 |     }
 86 | 
 87 |     a {
 88 |       text-decoration: none;
 89 |     }
 90 |   }
 91 | }
 92 | 
 93 | //  mobile nav
 94 | 
 95 | .mobile-hamb {
 96 |   font-size: 2.8rem;
 97 |   display: none;
 98 |   cursor: pointer;
 99 |   transition: all 0.3s;
100 | 
101 |   &:hover {
102 |     color: $text-orange;
103 |   }
104 | 
105 |   @media (max-width: 1000px) {
106 |     display: flex;
107 |   }
108 | }
109 | 
110 | .mobile-navbar {
111 |   display: flex;
112 |   flex-direction: column;
113 |   width: 100%;
114 |   height: 100vh;
115 |   position: fixed;
116 |   top: 0;
117 |   left: -100%;
118 |   background-color: $bg-white;
119 |   z-index: 999999;
120 |   justify-content: center;
121 |   align-items: center;
122 |   transition: all 0.5s ease-in-out;
123 | 
124 |   &__close {
125 |     font-size: 3rem;
126 |     position: absolute;
127 |     top: 3.5rem;
128 |     right: 3.5rem;
129 |     cursor: pointer;
130 |     transition: all 0.3s;
131 | 
132 |     &:hover {
133 |       color: $text-orange;
134 |     }
135 |   }
136 | 
137 |   &__links {
138 |     display: flex;
139 |     flex-direction: column;
140 |     list-style: none;
141 |     font-size: 2.3rem;
142 |     gap: 3rem;
143 |     text-align: center;
144 | 
145 |     li {
146 |       a {
147 |         text-decoration: none;
148 |         color: $text-black;
149 |         font-weight: 500;
150 |         transition: all 0.3s;
151 | 
152 |         &:hover {
153 |           color: $text-orange;
154 |         }
155 |       }
156 |     }
157 |   }
158 | }
159 | 
160 | .open-nav {
161 |   left: 0;
162 | }
163 | 


--------------------------------------------------------------------------------
/src/styles/ModelsStyles/_models.scss:
--------------------------------------------------------------------------------
  1 | @use "../global" as *;
  2 | 
  3 | .models-div {
  4 |   display: grid;
  5 |   grid-template-columns: 1fr 1fr 1fr;
  6 |   grid-template-rows: auto;
  7 |   gap: 3rem;
  8 |   align-items: center;
  9 |   text-align: center;
 10 |   padding: 10rem 0;
 11 |   width: 110rem;
 12 |   margin: 0 auto;
 13 | 
 14 |   @media (max-width: 1150px) {
 15 |     grid-template-columns: 1fr 1fr;
 16 |     width: fit-content;
 17 |   }
 18 | 
 19 |   @media (max-width: 800px) {
 20 |     grid-template-columns: 1fr;
 21 |     width: fit-content;
 22 |   }
 23 | 
 24 |   &__box {
 25 |     border: 1px solid #d5d5d5;
 26 |     border-radius: 0.3rem;
 27 |     display: flex;
 28 |     width: 35rem;
 29 |     flex-direction: column;
 30 | 
 31 |     @media (max-width: 400px) {
 32 |       grid-template-columns: 1fr;
 33 |       width: 100%;
 34 |     }
 35 | 
 36 |     &__img {
 37 |       width: 100%;
 38 |       height: auto;
 39 |       border-radius: 0.3rem;
 40 | 
 41 |       img {
 42 |         width: 100%;
 43 |         height: 27rem;
 44 |       }
 45 |     }
 46 | 
 47 |     &__descr {
 48 |       padding: 2rem 3rem;
 49 |       display: flex;
 50 |       flex-direction: column;
 51 |       color: $text-black;
 52 | 
 53 |       &__name-price {
 54 |         display: flex;
 55 |         justify-content: space-between;
 56 |         align-items: center;
 57 | 
 58 |         &__name {
 59 |           display: flex;
 60 |           flex-direction: column;
 61 |           text-align: left;
 62 |           gap: 0.5rem;
 63 | 
 64 |           p {
 65 |             font-size: $h3-size;
 66 |             font-weight: 700;
 67 |           }
 68 | 
 69 |           span {
 70 |             display: flex;
 71 |             gap: 0.4rem;
 72 | 
 73 |             i {
 74 |               font-size: 1.4rem;
 75 |               color: #ffc933;
 76 |             }
 77 |           }
 78 |         }
 79 | 
 80 |         &__price {
 81 |           display: flex;
 82 |           flex-direction: column;
 83 |           text-align: right;
 84 | 
 85 |           h4 {
 86 |             font-size: 2.8rem;
 87 |           }
 88 | 
 89 |           p {
 90 |             font-size: $p-size;
 91 |           }
 92 |         }
 93 | 
 94 |         &__details {
 95 |           display: grid;
 96 |           grid-template-columns: 1fr 1fr;
 97 |           row-gap: 2rem;
 98 |           column-gap: 7rem;
 99 |           margin-top: 2.5rem;
100 |           margin: 2rem auto;
101 |           padding-bottom: 2.5rem;
102 |           border-bottom: 1px solid #c6c6c6;
103 | 
104 |           span {
105 |             font-size: 1.8rem;
106 |             font-weight: 500;
107 |             color: #777777;
108 |             text-align: left;
109 | 
110 |             i {
111 |               color: $text-black;
112 |             }
113 |           }
114 |         }
115 | 
116 |         &__btn {
117 |           background-color: #ff4d30;
118 |           padding: 1.8rem 3rem;
119 |           border-radius: 0.3rem;
120 |           box-shadow: 0 10px 15px 0 rgb(255 83 48 / 35%);
121 |           transition: all 0.3s;
122 |           border: 2px solid #ff4d30;
123 |           font-size: 1.8rem;
124 |           cursor: pointer;
125 | 
126 |           &:hover {
127 |             box-shadow: 0 10px 15px 0 rgb(255 83 48 / 60%);
128 |             background-color: #fa4226;
129 |           }
130 | 
131 |           a {
132 |             text-decoration: none;
133 |             color: white;
134 |             font-weight: 700;
135 |           }
136 |         }
137 |       }
138 |     }
139 |   }
140 | }
141 | 


--------------------------------------------------------------------------------
/src/styles/HeroStyles/_hero.scss:
--------------------------------------------------------------------------------
  1 | @use "../global" as *;
  2 | 
  3 | .hero-section {
  4 |   width: 100%;
  5 |   height: 97vh;
  6 |   background-color: $bg-gray;
  7 |   position: relative;
  8 | }
  9 | 
 10 | .bg-shape {
 11 |   position: absolute;
 12 |   top: 0;
 13 |   right: 0;
 14 |   z-index: 1;
 15 | 
 16 |   @media (max-width: 800px) {
 17 |     display: none;
 18 |   }
 19 | }
 20 | 
 21 | .hero-content {
 22 |   width: 100%;
 23 |   height: 100vh;
 24 |   display: flex;
 25 |   align-items: center;
 26 |   position: relative;
 27 | 
 28 |   @media (max-width: 800px) {
 29 |     justify-content: center;
 30 |   }
 31 | 
 32 |   &__text {
 33 |     display: flex;
 34 |     flex-direction: column;
 35 |     z-index: 3;
 36 |     max-width: 50rem;
 37 |     margin-top: 5rem;
 38 | 
 39 |     @media (max-width: 800px) {
 40 |       text-align: center;
 41 |       align-items: center;
 42 |     }
 43 | 
 44 |     h4 {
 45 |       font-size: $h4-size;
 46 |       font-family: $text-font;
 47 |       color: $text-black;
 48 |     }
 49 | 
 50 |     h1 {
 51 |       font-size: $h1-size;
 52 |       font-family: $titles-font;
 53 |       font-weight: 700;
 54 |       color: $text-black;
 55 |       line-height: 1.2;
 56 |       margin-top: 1rem;
 57 |       margin-bottom: 2.3rem;
 58 | 
 59 |       span {
 60 |         color: $text-orange;
 61 |       }
 62 |     }
 63 | 
 64 |     p {
 65 |       font-size: $p-size;
 66 |       font-family: $text-font;
 67 |       line-height: 1.6;
 68 |       color: $text-gray;
 69 |       margin-bottom: 4rem;
 70 |     }
 71 | 
 72 |     &__btns {
 73 |       display: flex;
 74 |       gap: 2rem;
 75 |       font-size: $p-size;
 76 |       font-family: $text-font;
 77 | 
 78 |       @media (max-width: 450px) {
 79 |         flex-direction: column;
 80 |       }
 81 | 
 82 |       a {
 83 |         text-decoration: none;
 84 |         color: white;
 85 |         font-weight: 700;
 86 |       }
 87 | 
 88 |       &__book-ride {
 89 |         background-color: $text-orange;
 90 |         padding: 1.8rem 3rem;
 91 |         border-radius: 0.3rem;
 92 |         box-shadow: 0 10px 15px 0 rgb(255 83 48 / 35%);
 93 |         transition: all 0.3s;
 94 |         border: 2px solid $text-orange;
 95 | 
 96 |         @media (max-width: 450px) {
 97 |           padding: 1.8rem 8rem;
 98 |         }
 99 | 
100 |         &:hover {
101 |           box-shadow: 0 10px 15px 0 rgb(255 83 48 / 60%);
102 |           background-color: #fa4226;
103 |         }
104 |       }
105 | 
106 |       &__learn-more {
107 |         background-color: $text-black;
108 |         padding: 1.8rem 3rem;
109 |         border-radius: 0.3rem;
110 |         border: 2px solid $text-black;
111 |         transition: all 0.3s;
112 | 
113 |         &:hover {
114 |           background-color: transparent;
115 |           color: $text-black;
116 |         }
117 |       }
118 |     }
119 |   }
120 | 
121 |   &__car-img {
122 |     z-index: 2;
123 |     position: absolute;
124 |     right: 0;
125 |     width: 65%;
126 |     margin-top: 5rem;
127 | 
128 |     @media (max-width: 800px) {
129 |       display: none;
130 |     }
131 |   }
132 | }
133 | 
134 | .scroll-up {
135 |   position: fixed;
136 |   font-size: 2.5rem;
137 |   color: white;
138 |   background-color: $text-orange;
139 |   border: 3px solid white;
140 |   width: 2rem;
141 |   height: 2rem;
142 |   bottom: 5rem;
143 |   right: 5rem;
144 |   z-index: 20;
145 |   display: none;
146 |   align-items: center;
147 |   text-align: center;
148 |   justify-content: center;
149 |   padding: 2rem;
150 |   cursor: pointer;
151 | }
152 | 
153 | .show-scroll {
154 |   display: flex;
155 | }
156 | 


--------------------------------------------------------------------------------
/src/components/Navbar.jsx:
--------------------------------------------------------------------------------
  1 | import { Link } from "react-router-dom";
  2 | import Logo from "../images/logo/logo.png";
  3 | import { useState } from "react";
  4 | 
  5 | function Navbar() {
  6 |   const [nav, setNav] = useState(false);
  7 | 
  8 |   const openNav = () => {
  9 |     setNav(!nav);
 10 |   };
 11 | 
 12 |   return (
 13 |     <>
 14 |       <nav>
 15 |         {/* mobile */}
 16 |         <div className={`mobile-navbar ${nav ? "open-nav" : ""}`}>
 17 |           <div onClick={openNav} className="mobile-navbar__close">
 18 |             <i className="fa-solid fa-xmark"></i>
 19 |           </div>
 20 |           <ul className="mobile-navbar__links">
 21 |             <li>
 22 |               <Link onClick={openNav} to="/">
 23 |                 Home
 24 |               </Link>
 25 |             </li>
 26 |             <li>
 27 |               <Link onClick={openNav} to="/about">
 28 |                 About
 29 |               </Link>
 30 |             </li>
 31 |             <li>
 32 |               <Link onClick={openNav} to="/models">
 33 |                 Models
 34 |               </Link>
 35 |             </li>
 36 |             <li>
 37 |               <Link onClick={openNav} to="/testimonials">
 38 |                 Testimonials
 39 |               </Link>
 40 |             </li>
 41 |             <li>
 42 |               <Link onClick={openNav} to="/team">
 43 |                 Our Team
 44 |               </Link>
 45 |             </li>
 46 |             <li>
 47 |               <Link onClick={openNav} to="/contact">
 48 |                 Contact
 49 |               </Link>
 50 |             </li>
 51 |           </ul>
 52 |         </div>
 53 | 
 54 |         {/* desktop */}
 55 | 
 56 |         <div className="navbar">
 57 |           <div className="navbar__img">
 58 |             <Link to="/" onClick={() => window.scrollTo(0, 0)}>
 59 |               <img src={Logo} alt="logo-img" />
 60 |             </Link>
 61 |           </div>
 62 |           <ul className="navbar__links">
 63 |             <li>
 64 |               <Link className="home-link" to="/">
 65 |                 Home
 66 |               </Link>
 67 |             </li>
 68 |             <li>
 69 |               {" "}
 70 |               <Link className="about-link" to="/about">
 71 |                 About
 72 |               </Link>
 73 |             </li>
 74 |             <li>
 75 |               {" "}
 76 |               <Link className="models-link" to="/models">
 77 |                 Vehicle Models
 78 |               </Link>
 79 |             </li>
 80 |             <li>
 81 |               {" "}
 82 |               <Link className="testi-link" to="/testimonials">
 83 |                 Testimonials
 84 |               </Link>
 85 |             </li>
 86 |             <li>
 87 |               {" "}
 88 |               <Link className="team-link" to="/team">
 89 |                 Our Team
 90 |               </Link>
 91 |             </li>
 92 |             <li>
 93 |               {" "}
 94 |               <Link className="contact-link" to="/contact">
 95 |                 Contact
 96 |               </Link>
 97 |             </li>
 98 |           </ul>
 99 |           <div className="navbar__buttons">
100 |             <Link className="navbar__buttons__sign-in" to="/">
101 |               Sign In
102 |             </Link>
103 |             <Link className="navbar__buttons__register" to="/">
104 |               Register
105 |             </Link>
106 |           </div>
107 | 
108 |           {/* mobile */}
109 |           <div className="mobile-hamb" onClick={openNav}>
110 |             <i className="fa-solid fa-bars"></i>
111 |           </div>
112 |         </div>
113 |       </nav>
114 |     </>
115 |   );
116 | }
117 | 
118 | export default Navbar;
119 | 


--------------------------------------------------------------------------------
/src/images/download/appstore.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="231" height="69" viewBox="0 0 231 69"><image id="ios-app-btn" width="231" height="69" xlink:href="data:image/png;base64,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"></image></svg>


--------------------------------------------------------------------------------
/src/components/PickCar.jsx:
--------------------------------------------------------------------------------
  1 | import { useState } from "react";
  2 | import CarBox from "./CarBox";
  3 | import { CAR_DATA } from "./CarData";
  4 | 
  5 | function PickCar() {
  6 |   const [active, setActive] = useState("SecondCar");
  7 |   const [colorBtn, setColorBtn] = useState("btn1");
  8 | 
  9 |   const btnID = (id) => {
 10 |     setColorBtn(colorBtn === id ? "" : id);
 11 |   };
 12 | 
 13 |   const coloringButton = (id) => {
 14 |     return colorBtn === id ? "colored-button" : "";
 15 |   };
 16 | 
 17 |   return (
 18 |     <>
 19 |       <section className="pick-section">
 20 |         <div className="container">
 21 |           <div className="pick-container">
 22 |             <div className="pick-container__title">
 23 |               <h3>Vehicle Models</h3>
 24 |               <h2>Our rental fleet</h2>
 25 |               <p>
 26 |                 Choose from a variety of our amazing vehicles to rent for your
 27 |                 next adventure or business trip
 28 |               </p>
 29 |             </div>
 30 |             <div className="pick-container__car-content">
 31 |               {/* pick car */}
 32 |               <div className="pick-box">
 33 |                 <button
 34 |                   className={`${coloringButton("btn1")}`}
 35 |                   onClick={() => {
 36 |                     setActive("SecondCar");
 37 |                     btnID("btn1");
 38 |                   }}
 39 |                 >
 40 |                   Audi A1 S-Line
 41 |                 </button>
 42 |                 <button
 43 |                   className={`${coloringButton("btn2")}`}
 44 |                   id="btn2"
 45 |                   onClick={() => {
 46 |                     setActive("FirstCar");
 47 |                     btnID("btn2");
 48 |                   }}
 49 |                 >
 50 |                   VW Golf 6
 51 |                 </button>
 52 |                 <button
 53 |                   className={`${coloringButton("btn3")}`}
 54 |                   id="btn3"
 55 |                   onClick={() => {
 56 |                     setActive("ThirdCar");
 57 |                     btnID("btn3");
 58 |                   }}
 59 |                 >
 60 |                   Toyota Camry
 61 |                 </button>
 62 |                 <button
 63 |                   className={`${coloringButton("btn4")}`}
 64 |                   id="btn4"
 65 |                   onClick={() => {
 66 |                     setActive("FourthCar");
 67 |                     btnID("btn4");
 68 |                   }}
 69 |                 >
 70 |                   BMW 320 ModernLine
 71 |                 </button>
 72 |                 <button
 73 |                   className={`${coloringButton("btn5")}`}
 74 |                   id="btn5"
 75 |                   onClick={() => {
 76 |                     setActive("FifthCar");
 77 |                     btnID("btn5");
 78 |                   }}
 79 |                 >
 80 |                   Mercedes-Benz GLK
 81 |                 </button>
 82 |                 <button
 83 |                   className={`${coloringButton("btn6")}`}
 84 |                   id="btn6"
 85 |                   onClick={() => {
 86 |                     setActive("SixthCar");
 87 |                     btnID("btn6");
 88 |                   }}
 89 |                 >
 90 |                   VW Passat CC
 91 |                 </button>
 92 |               </div>
 93 | 
 94 |               {active === "FirstCar" && <CarBox data={CAR_DATA} carID={0} />}
 95 |               {active === "SecondCar" && <CarBox data={CAR_DATA} carID={1} />}
 96 |               {active === "ThirdCar" && <CarBox data={CAR_DATA} carID={2} />}
 97 |               {active === "FourthCar" && <CarBox data={CAR_DATA} carID={3} />}
 98 |               {active === "FifthCar" && <CarBox data={CAR_DATA} carID={4} />}
 99 |               {active === "SixthCar" && <CarBox data={CAR_DATA} carID={5} />}
100 |             </div>
101 |           </div>
102 |         </div>
103 |       </section>
104 |     </>
105 |   );
106 | }
107 | 
108 | export default PickCar;
109 | 


--------------------------------------------------------------------------------
/src/styles/PickStyles/_pick.scss:
--------------------------------------------------------------------------------
  1 | @use "../global" as *;
  2 | 
  3 | .pick-section {
  4 |   padding: 10rem 0;
  5 | }
  6 | 
  7 | .pick-container {
  8 |   display: flex;
  9 |   flex-direction: column;
 10 | 
 11 |   &__title {
 12 |     margin: 0 auto;
 13 |     text-align: center;
 14 |     color: $text-black;
 15 |     max-width: 50rem;
 16 |     margin-bottom: 5rem;
 17 | 
 18 |     p {
 19 |       font-size: $p-size;
 20 |       font-family: $text-font;
 21 |       color: $text-gray;
 22 |       line-height: 1.5;
 23 |     }
 24 | 
 25 |     h3 {
 26 |       font-size: $h3-size;
 27 |       font-family: $text-font;
 28 |       font-weight: 500;
 29 |     }
 30 | 
 31 |     h2 {
 32 |       font-size: $h2-size;
 33 |       font-family: $titles-font;
 34 |       margin: 0.5rem 0 1rem 0;
 35 |     }
 36 |   }
 37 | 
 38 |   &__car-content {
 39 |     display: flex;
 40 |     justify-content: space-between;
 41 |     gap: 1rem;
 42 | 
 43 |     @media (max-width: 1050px) {
 44 |       flex-direction: column;
 45 |       gap: 5rem;
 46 |     }
 47 |   }
 48 | }
 49 | 
 50 | .pick-box {
 51 |   display: flex;
 52 |   flex-direction: column;
 53 |   gap: 0.7rem;
 54 | 
 55 |   button {
 56 |     font-size: 2rem;
 57 |     font-family: $titles-font;
 58 |     font-weight: 600;
 59 |     border: none;
 60 |     cursor: pointer;
 61 |     padding: 1.5rem 2.5rem;
 62 |     background-color: #e9e9e9;
 63 |     transition: all 0.2s;
 64 |     text-align: left;
 65 | 
 66 |     &:hover {
 67 |       background-color: $text-orange;
 68 |       color: white;
 69 |     }
 70 |   }
 71 | }
 72 | 
 73 | .pick-car {
 74 |   width: 50rem;
 75 |   position: relative;
 76 | 
 77 |   @media (max-width: 700px) {
 78 |     width: 100%;
 79 |   }
 80 | 
 81 |   img {
 82 |     width: 100%;
 83 |     margin-top: 6rem;
 84 |   }
 85 | }
 86 | 
 87 | .pick-description {
 88 |   width: 25rem;
 89 | 
 90 |   &__price {
 91 |     width: 100%;
 92 |     background-color: $text-orange;
 93 |     font-size: 1.8rem;
 94 |     display: flex;
 95 |     align-items: center;
 96 |     gap: 1.5rem;
 97 |     color: white;
 98 |     padding: 0.3rem 1.9rem;
 99 |     white-space: nowrap;
100 | 
101 |     span {
102 |       font-size: 2.8rem;
103 |       font-weight: 700;
104 |     }
105 |   }
106 | 
107 |   &__table {
108 |     display: grid;
109 |     grid-template-columns: 1fr;
110 |     grid-template-rows: auto;
111 |     font-size: 1.4rem;
112 |     // font-family: $text-font;
113 | 
114 |     &__col {
115 |       display: grid;
116 |       grid-template-columns: 1fr 1fr;
117 |       text-align: center;
118 |       grid-template-rows: auto;
119 |       padding: 0.9rem 0.5rem;
120 |       border-bottom: 2px solid #706f7b;
121 |       border-right: 2px solid #706f7b;
122 |       border-left: 2px solid #706f7b;
123 | 
124 |       span:nth-child(1) {
125 |         border-right: 2px solid #706f7b;
126 |       }
127 |     }
128 |   }
129 | }
130 | 
131 | .cta-btn {
132 |   font-size: 2rem;
133 |   text-transform: uppercase;
134 |   text-decoration: none;
135 |   font-weight: 600;
136 |   color: white;
137 |   font-family: $titles-font;
138 |   background-color: $text-orange;
139 |   padding: 1rem 1rem;
140 |   display: flex;
141 |   width: 100%;
142 |   justify-content: center;
143 |   margin-top: 1.4rem;
144 |   transition: all 0.3s;
145 |   box-shadow: 6px 6px 0 #efe9e9;
146 | 
147 |   &:hover {
148 |     background-color: #e9381d;
149 |   }
150 | }
151 | 
152 | .box-cars {
153 |   gap: 11rem;
154 |   display: flex;
155 |   justify-content: space-between;
156 | 
157 |   @media (max-width: 1200px) {
158 |     gap: 2rem;
159 |   }
160 | 
161 |   @media (max-width: 700px) {
162 |     flex-direction: column;
163 |     align-items: center;
164 |     justify-content: center;
165 |     gap: 5rem;
166 |   }
167 | }
168 | 
169 | .colored-button {
170 |   background-color: $text-orange !important;
171 |   color: white;
172 | }
173 | 
174 | // spiner
175 | .loader {
176 |   width: 48px;
177 |   height: 48px;
178 |   border: 5px solid #00000042;
179 |   border-bottom-color: #ff3d00;
180 |   border-radius: 50%;
181 |   display: inline-block;
182 |   box-sizing: border-box;
183 |   animation: rotation 1s linear infinite;
184 |   position: absolute;
185 |   transform: translate(-50%, -50%);
186 |   top: 40%;
187 |   right: 43%;
188 | }
189 | 
190 | @keyframes rotation {
191 |   0% {
192 |     transform: rotate(0deg);
193 |   }
194 |   100% {
195 |     transform: rotate(360deg);
196 |   }
197 | }
198 | 


--------------------------------------------------------------------------------
/src/images/download/googleapp.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="227" height="69" viewBox="0 0 227 69"><image id="google-app-download" width="227" height="69" xlink:href="data:image/png;base64,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"></image></svg>


--------------------------------------------------------------------------------
/src/styles/AboutStyles/_about.scss:
--------------------------------------------------------------------------------
  1 | @use "../global" as *;
  2 | 
  3 | // hero for all pages
  4 | .hero-pages {
  5 |   width: 100%;
  6 |   height: 41rem;
  7 |   background-image: url("/src/images/hero/heroes-bg.png");
  8 |   background-position: center;
  9 |   background-repeat: no-repeat;
 10 |   background-size: cover;
 11 |   position: relative;
 12 | 
 13 |   &__overlay {
 14 |     width: 100%;
 15 |     height: 100%;
 16 |     position: absolute;
 17 |     top: 0;
 18 |     right: 0;
 19 |     background-color: rgba(255, 255, 255, 0.92);
 20 |   }
 21 | 
 22 |   &__text {
 23 |     display: flex;
 24 |     flex-direction: column;
 25 |     z-index: 3;
 26 |     position: relative;
 27 |     width: 100%;
 28 |     height: 41rem;
 29 |     justify-content: center;
 30 |     color: $text-black;
 31 | 
 32 |     h3 {
 33 |       font-size: 3.6rem;
 34 |       margin-bottom: 0.5rem;
 35 |     }
 36 | 
 37 |     p {
 38 |       font-size: $p-size;
 39 |       font-weight: 600;
 40 | 
 41 |       a {
 42 |         color: $text-black;
 43 |         text-decoration: none;
 44 |         transition: all 0.2s;
 45 | 
 46 |         &:hover {
 47 |           color: $text-orange;
 48 |         }
 49 |       }
 50 |     }
 51 |   }
 52 | }
 53 | 
 54 | // about scss
 55 | .about-main {
 56 |   margin: 10rem auto;
 57 |   display: flex;
 58 |   gap: 5rem;
 59 |   max-width: 90rem;
 60 |   align-items: center;
 61 | 
 62 |   @media (max-width: 960px) {
 63 |     display: grid;
 64 |     grid-template-columns: 1fr;
 65 |     text-align: center;
 66 |     max-width: 49rem;
 67 |   }
 68 | 
 69 |   @media (max-width: 520px) {
 70 |     max-width: 100%;
 71 |   }
 72 | 
 73 |   &__img {
 74 |     width: 43rem;
 75 |     height: 43rem;
 76 | 
 77 |     @media (max-width: 960px) {
 78 |       margin: 0 auto;
 79 |     }
 80 | 
 81 |     @media (max-width: 520px) {
 82 |       width: 100%;
 83 |       height: auto;
 84 |     }
 85 |   }
 86 | 
 87 |   &__text {
 88 |     color: $text-black;
 89 |     display: flex;
 90 |     flex-direction: column;
 91 | 
 92 |     h3 {
 93 |       font-size: $h4-size;
 94 |       font-family: $text-font;
 95 |       font-weight: 500;
 96 |       margin-bottom: 1rem;
 97 |     }
 98 | 
 99 |     h2 {
100 |       font-size: $h2-size;
101 |       line-height: 1.2;
102 |     }
103 | 
104 |     p {
105 |       font-size: $p-size;
106 |       color: $text-gray;
107 |       font-family: $text-font;
108 |       line-height: 1.5;
109 |       margin-top: 2rem;
110 |       margin-bottom: 4rem;
111 |     }
112 | 
113 |     &__icons {
114 |       display: grid;
115 | 
116 |       grid-template-columns: 1fr 1fr 1fr;
117 |       gap: 4rem;
118 | 
119 |       @media (max-width: 520px) {
120 |         grid-template-columns: 1fr;
121 |         margin: 0 auto;
122 |         gap: 0;
123 | 
124 |         p {
125 |           margin-top: 0;
126 |         }
127 |       }
128 | 
129 |       &__box {
130 |         display: flex;
131 |         flex-direction: column;
132 | 
133 |         @media (max-width: 520px) {
134 |           align-items: center;
135 |         }
136 | 
137 |         .last-fk {
138 |           width: 5rem;
139 |         }
140 | 
141 |         img {
142 |           width: 7rem;
143 |         }
144 | 
145 |         span {
146 |           display: flex;
147 |           align-items: center;
148 |           gap: 1rem;
149 | 
150 |           @media (max-width: 520px) {
151 |             text-align: center;
152 |             flex-direction: column;
153 |           }
154 | 
155 |           h4 {
156 |             font-size: 4.6rem;
157 |           }
158 |         }
159 |       }
160 |     }
161 |   }
162 | }
163 | 
164 | .book-banner {
165 |   display: flex;
166 |   width: 100%;
167 |   height: 20rem;
168 |   background-image: url("/src/images/banners/book-banner.png");
169 |   position: relative;
170 |   margin-top: 7rem;
171 | 
172 |   @media (max-width: 750px) {
173 |     height: fit-content;
174 |     padding: 1rem 0;
175 |   }
176 | 
177 |   &__overlay {
178 |     background-color: #2d2d2d;
179 |     opacity: 0.89;
180 |     width: 100%;
181 |     height: 100%;
182 |     position: absolute;
183 |     top: 0;
184 |     right: 0;
185 |   }
186 | }
187 | 
188 | .text-content {
189 |   color: white;
190 |   z-index: 5;
191 |   position: relative;
192 |   width: 100%;
193 |   height: 20rem;
194 |   display: flex;
195 |   align-items: center;
196 |   gap: 5rem;
197 | 
198 |   @media (max-width: 750px) {
199 |     flex-direction: column;
200 |     justify-content: center;
201 |     align-items: center;
202 |     gap: 1rem;
203 |     text-align: center;
204 |   }
205 | 
206 |   h2 {
207 |     font-size: 3.2rem;
208 |   }
209 | 
210 |   span {
211 |     display: flex;
212 |     font-size: 2.7rem;
213 |     gap: 1rem;
214 |     align-items: center;
215 |     color: $text-orange;
216 |     white-space: nowrap;
217 |   }
218 | }
219 | 


--------------------------------------------------------------------------------
/src/components/Faq.jsx:
--------------------------------------------------------------------------------
  1 | import { useState } from "react";
  2 | 
  3 | function Faq() {
  4 |   const [activeQ, setActiveQ] = useState("q1");
  5 | 
  6 |   const openQ = (id) => {
  7 |     setActiveQ(activeQ === id ? "" : id);
  8 |   };
  9 | 
 10 |   const getClassAnswer = (id) => {
 11 |     return activeQ === id ? "active-answer" : "";
 12 |   };
 13 | 
 14 |   const getClassQuestion = (id) => {
 15 |     return activeQ === id ? "active-question" : "";
 16 |   };
 17 | 
 18 |   return (
 19 |     <>
 20 |       <section className="faq-section">
 21 |         <div className="container">
 22 |           <div className="faq-content">
 23 |             <div className="faq-content__title">
 24 |               <h5>FAQ</h5>
 25 |               <h2>Frequently Asked Questions</h2>
 26 |               <p>
 27 |                 Frequently Asked Questions About the Car Rental Booking Process
 28 |                 on Our Website: Answers to Common Concerns and Inquiries.
 29 |               </p>
 30 |             </div>
 31 | 
 32 |             <div className="all-questions">
 33 |               <div className="faq-box">
 34 |                 <div
 35 |                   id="q1"
 36 |                   onClick={() => openQ("q1")}
 37 |                   className={`faq-box__question  ${getClassQuestion("q1")}`}
 38 |                 >
 39 |                   <p>1. What is special about comparing rental car deals?</p>
 40 |                   <i className="fa-solid fa-angle-down"></i>
 41 |                 </div>
 42 |                 <div
 43 |                   id="q1"
 44 |                   onClick={() => openQ("q1")}
 45 |                   className={`faq-box__answer ${getClassAnswer("q1")}`}
 46 |                 >
 47 |                   Comparing rental car deals is important as it helps find the
 48 |                   best deal that fits your budget and requirements, ensuring you
 49 |                   get the most value for your money. By comparing various
 50 |                   options, you can find deals that offer lower prices,
 51 |                   additional services, or better car models. You can find car
 52 |                   rental deals by researching online and comparing prices from
 53 |                   different rental companies.
 54 |                 </div>
 55 |               </div>
 56 |               <div className="faq-box">
 57 |                 <div
 58 |                   id="q2"
 59 |                   onClick={() => openQ("q2")}
 60 |                   className={`faq-box__question ${getClassQuestion("q2")}`}
 61 |                 >
 62 |                   <p>2. How do I find the car rental deals?</p>
 63 |                   <i className="fa-solid fa-angle-down"></i>
 64 |                 </div>
 65 |                 <div
 66 |                   id="q2"
 67 |                   onClick={() => openQ("q2")}
 68 |                   className={`faq-box__answer ${getClassAnswer("q2")}`}
 69 |                 >
 70 |                   You can find car rental deals by researching online and
 71 |                   comparing prices from different rental companies. Websites
 72 |                   such as Expedia, Kayak, and Travelocity allow you to compare
 73 |                   prices and view available rental options. It is also
 74 |                   recommended to sign up for email newsletters and follow rental
 75 |                   car companies on social media to be informed of any special
 76 |                   deals or promotions.
 77 |                 </div>
 78 |               </div>
 79 |               <div className="faq-box">
 80 |                 <div
 81 |                   id="q3"
 82 |                   onClick={() => openQ("q3")}
 83 |                   className={`faq-box__question ${getClassQuestion("q3")}`}
 84 |                 >
 85 |                   <p>3. How do I find such low rental car prices?</p>
 86 |                   <i className="fa-solid fa-angle-down"></i>
 87 |                 </div>
 88 |                 <div
 89 |                   id="q3"
 90 |                   onClick={() => openQ("q3")}
 91 |                   className={`faq-box__answer ${getClassAnswer("q3")}`}
 92 |                 >
 93 |                   Book in advance: Booking your rental car ahead of time can
 94 |                   often result in lower prices. Compare prices from multiple
 95 |                   companies: Use websites like Kayak, Expedia, or Travelocity to
 96 |                   compare prices from multiple rental car companies. Look for
 97 |                   discount codes and coupons: Search for discount codes and
 98 |                   coupons that you can use to lower the rental price. Renting
 99 |                   from an off-airport location can sometimes result in lower
100 |                   prices.
101 |                 </div>
102 |               </div>
103 |             </div>
104 |           </div>
105 |         </div>
106 |       </section>
107 |     </>
108 |   );
109 | }
110 | 
111 | export default Faq;
112 | 


--------------------------------------------------------------------------------
/src/styles/BookStyles/_book.scss:
--------------------------------------------------------------------------------
  1 | @use "../global" as *;
  2 | 
  3 | .book-section {
  4 |   position: relative;
  5 | 
  6 |   background: linear-gradient(to bottom, $bg-gray 20%, $bg-white 80%);
  7 | }
  8 | 
  9 | .book-content {
 10 |   margin: 0 auto;
 11 |   margin-bottom: 10rem;
 12 | 
 13 |   &__box {
 14 |     background-color: $bg-white;
 15 |     width: 100%;
 16 |     padding: 4rem 4.5rem 5rem 5.5rem;
 17 |     box-shadow: 0 10px 20px 0 rgb(0 0 0 / 10%);
 18 |     height: auto;
 19 |     position: relative;
 20 |     z-index: 4;
 21 |     color: white;
 22 |     border-radius: 5px;
 23 |     background-image: url("/src/images/book-car/book-bg.png");
 24 |     background-position: center center;
 25 |     background-repeat: no-repeat;
 26 |     background-size: cover;
 27 |     display: flex;
 28 |     flex-direction: column;
 29 |     color: $text-black;
 30 | 
 31 |     @media (max-width: 400px) {
 32 |       padding: 4rem 2.5rem 5rem 2.5rem;
 33 |     }
 34 | 
 35 |     h2 {
 36 |       font-size: $h3-size;
 37 |       font-weight: 700;
 38 |       margin-bottom: 2.7rem;
 39 |     }
 40 | 
 41 |     .box-form {
 42 |       display: grid;
 43 |       grid-template-columns: 1fr 1fr 1fr;
 44 |       grid-template-rows: auto auto auto;
 45 |       gap: 2rem;
 46 | 
 47 |       b {
 48 |         color: $text-orange;
 49 |       }
 50 | 
 51 |       @media (max-width: 1000px) {
 52 |         grid-template-columns: 1fr 1fr;
 53 |       }
 54 | 
 55 |       @media (max-width: 630px) {
 56 |         grid-template-columns: 1fr;
 57 |       }
 58 | 
 59 |       &__car-type {
 60 |         display: flex;
 61 |         flex-direction: column;
 62 | 
 63 |         label {
 64 |           font-size: $p-size;
 65 |           font-weight: 600;
 66 |           margin-bottom: 1.2rem;
 67 | 
 68 |           i {
 69 |             color: $text-orange;
 70 |           }
 71 |         }
 72 | 
 73 |         select {
 74 |           font-size: 1.5rem;
 75 |           color: #ababab;
 76 |           font-family: $text-font;
 77 |           border: 1px solid #ccd7e6;
 78 |           border-radius: 3px;
 79 |           font-weight: 400;
 80 |           padding: 1.2rem 1.3rem;
 81 |           outline: none;
 82 |         }
 83 |       }
 84 | 
 85 |       &__car-time {
 86 |         display: flex;
 87 |         flex-direction: column;
 88 |         position: relative;
 89 | 
 90 |         input {
 91 |           outline: none;
 92 |           color: #878585;
 93 |           padding-right: 3rem;
 94 |           border: 1px solid #ccd7e6;
 95 |         }
 96 | 
 97 |         label {
 98 |           font-size: 1.6rem;
 99 |           font-weight: 600;
100 |           margin-bottom: 1.2rem;
101 | 
102 |           i {
103 |             color: $text-orange;
104 |           }
105 |         }
106 | 
107 |         ::-webkit-datetime-edit {
108 |           padding: 1.3rem 1.3rem;
109 |         }
110 | 
111 |         ::-webkit-calendar-picker-indicator {
112 |           cursor: pointer;
113 |           font-size: 1.6rem;
114 |         }
115 |       }
116 |     }
117 | 
118 |     button {
119 |       padding: 1.3rem 1.3rem;
120 |       height: fit-content;
121 |       align-self: self-end;
122 |       border: none;
123 |       font-family: $text-font;
124 |       font-size: 1.8rem;
125 |       font-weight: 500;
126 |       color: white;
127 |       background-color: $text-orange;
128 |       box-shadow: 0 10px 15px rgb(255 83 48 / 35%);
129 |       cursor: pointer;
130 |       transition: all 0.3s;
131 | 
132 |       &:hover {
133 |         box-shadow: 0 10px 15px rgb(255 83 48 / 55%);
134 |       }
135 |     }
136 |   }
137 | }
138 | 
139 | .error-message {
140 |   color: #721c24;
141 |   background-color: #f8d7da;
142 |   border-color: #f5c6cb;
143 |   padding: 1rem 1.4rem;
144 |   margin-bottom: 1.8rem;
145 |   margin-top: -1rem;
146 |   border: 1px solid transparent;
147 |   border-radius: 0.8rem;
148 |   font-size: $p-size;
149 |   font-weight: 500;
150 | 
151 |   display: none;
152 |   justify-content: space-between;
153 |   align-items: center;
154 | 
155 |   i {
156 |     cursor: pointer;
157 |   }
158 | }
159 | 
160 | .booking-done {
161 |   color: #2a6817;
162 |   background-color: #c3fabe;
163 |   border-color: #f5c6cb;
164 |   padding: 1rem 1.4rem;
165 |   margin-bottom: 1.8rem;
166 |   margin-top: -1rem;
167 |   border: 1px solid transparent;
168 |   border-radius: 0.8rem;
169 |   font-size: $p-size;
170 |   font-weight: 500;
171 | 
172 |   display: none;
173 |   justify-content: space-between;
174 |   align-items: center;
175 | 
176 |   i {
177 |     cursor: pointer;
178 |   }
179 | }
180 | 
181 | // modal & overlay
182 | 
183 | .active-modal {
184 |   opacity: 1 !important;
185 |   display: flex !important;
186 | }
187 | 
188 | .modal-overlay {
189 |   opacity: 0;
190 |   display: none;
191 | 
192 |   position: fixed;
193 |   width: 100%;
194 |   height: 100%;
195 |   background-color: rgba(0, 0, 0, 0.3);
196 |   z-index: 999999999;
197 |   top: 0;
198 |   right: 0;
199 | }
200 | 
201 | .booking-modal {
202 |   opacity: 0;
203 |   display: none;
204 | 
205 |   flex-direction: column;
206 |   position: fixed;
207 |   overflow-x: hidden;
208 |   overflow-y: scroll;
209 |   z-index: 999999999999;
210 |   top: 54%;
211 |   left: 50%;
212 |   transform: translate(-50%, -50%);
213 |   width: 83rem;
214 |   height: 100vh;
215 |   border: 2px solid white;
216 |   background-color: rgba(255, 255, 255);
217 |   padding-right: 2px;
218 |   color: $text-black;
219 | 
220 |   @media (max-width: 800px) {
221 |     width: 100%;
222 |   }
223 | 
224 |   @media (max-width: 600px) {
225 |     top: 50%;
226 |   }
227 | 
228 |   &__title {
229 |     display: flex;
230 |     justify-content: space-between;
231 |     padding: 1rem 1.5rem;
232 |     background-color: $text-orange;
233 |     color: white;
234 |     align-items: center;
235 | 
236 |     h2 {
237 |       font-size: $h3-size;
238 |       text-transform: uppercase;
239 |     }
240 | 
241 |     i {
242 |       font-size: 2.5rem;
243 |       color: rgba(255, 255, 255, 0.919);
244 |       cursor: pointer;
245 |       transition: all 0.2;
246 | 
247 |       &:hover {
248 |         color: white;
249 |       }
250 |     }
251 |   }
252 | 
253 |   &__message {
254 |     display: flex;
255 |     flex-direction: column;
256 |     gap: 1.5rem;
257 |     padding: 2rem 3rem;
258 |     background-color: #ffeae6;
259 | 
260 |     h4 {
261 |       font-size: 1.9rem;
262 |       font-weight: 700;
263 |       color: $text-orange;
264 | 
265 |       i {
266 |         font-size: 2.5rem;
267 |       }
268 |     }
269 | 
270 |     p {
271 |       font-size: 1.7rem;
272 |       color: #777777;
273 |       font-weight: 500;
274 |       line-height: 1.6;
275 |     }
276 |   }
277 | 
278 |   &__car-info {
279 |     background-color: white;
280 |     padding: 3rem 3rem;
281 |     display: grid;
282 |     grid-template-columns: 1fr 1fr;
283 |     border-bottom: 1px solid #7777779f;
284 | 
285 |     @media (max-width: 650px) {
286 |       grid-template-columns: 1fr;
287 |       text-align: center;
288 |     }
289 | 
290 |     &__dates {
291 |       display: flex;
292 |       flex-direction: column;
293 |       gap: 2rem;
294 | 
295 |       h5 {
296 |         font-size: 1.8rem;
297 |         color: $text-orange;
298 |       }
299 | 
300 |       span {
301 |         display: flex;
302 |         gap: 1rem;
303 | 
304 |         @media (max-width: 650px) {
305 |           grid-template-columns: 1fr;
306 |           text-align: center;
307 |           justify-content: center;
308 |         }
309 | 
310 |         i {
311 |           font-size: 1.8rem;
312 |           padding-top: 0.2rem;
313 |           color: #777777;
314 | 
315 |           @media (max-width: 650px) {
316 |             display: none;
317 |           }
318 |         }
319 | 
320 |         h6 {
321 |           font-size: 1.5rem;
322 |           margin-bottom: 0.2rem;
323 |         }
324 | 
325 |         p {
326 |           font-size: $p-size;
327 |           color: #777777;
328 |         }
329 |       }
330 |     }
331 | 
332 |     &__model {
333 |       display: flex;
334 |       flex-direction: column;
335 |       gap: 3rem;
336 | 
337 |       @media (max-width: 650px) {
338 |         margin-top: 3.5rem;
339 |       }
340 | 
341 |       h5 {
342 |         font-size: 1.8rem;
343 |         color: $text-orange;
344 | 
345 |         span {
346 |           color: $text-black;
347 |         }
348 |       }
349 | 
350 |       img {
351 |         width: 100%;
352 |         height: auto;
353 |       }
354 |     }
355 |   }
356 | 
357 |   &__person-info {
358 |     padding: 3rem 3rem;
359 |     background-color: white;
360 |     display: flex;
361 |     flex-direction: column;
362 | 
363 |     h4 {
364 |       font-size: 1.8rem;
365 |       text-transform: uppercase;
366 |       color: $text-orange;
367 |       margin-bottom: 2rem;
368 |     }
369 |   }
370 | }
371 | 
372 | .input-time {
373 |   text-align: center;
374 |   width: 8rem;
375 |   font-size: 14px;
376 |   cursor: pointer;
377 | }
378 | 
379 | .info-form {
380 |   display: flex;
381 |   flex-direction: column;
382 | 
383 |   &__checkbox {
384 |     display: flex;
385 |     gap: 1rem;
386 |     align-items: center;
387 |     font-size: $p-size;
388 |     color: #565454;
389 |     margin-top: 2rem;
390 |     margin-bottom: 3rem;
391 | 
392 |     input {
393 |       width: 1.6rem;
394 |       height: 1.6rem;
395 |     }
396 |   }
397 | 
398 |   &__1col {
399 |     grid-template-columns: 1fr !important;
400 |   }
401 | 
402 |   &__2col,
403 |   &__1col {
404 |     display: grid;
405 |     grid-template-columns: 1fr 1fr;
406 |     gap: 2rem;
407 |     padding: 1rem 0;
408 | 
409 |     @media (max-width: 650px) {
410 |       grid-template-columns: 1fr;
411 |     }
412 | 
413 |     span {
414 |       display: flex;
415 |       flex-direction: column;
416 |       gap: 0.4rem;
417 | 
418 |       label {
419 |         font-size: $p-size;
420 |         font-weight: 500;
421 |         color: #777777;
422 | 
423 |         b {
424 |           color: $text-orange;
425 |         }
426 |       }
427 | 
428 |       input {
429 |         padding: 14px 15px;
430 |         background-color: #dbdbdb;
431 |         color: #555;
432 |         font-size: 1.5rem;
433 |         font-weight: 500;
434 |         outline: none;
435 |         border: none;
436 |       }
437 |     }
438 |   }
439 | }
440 | 
441 | .reserve-button {
442 |   background-color: #dbdbdb;
443 |   margin: 0 -3rem;
444 |   padding: 3rem;
445 |   text-align: right;
446 | 
447 |   @media (max-width: 650px) {
448 |     text-align: center;
449 |   }
450 | 
451 |   button {
452 |     font-size: $h3-size;
453 |     color: white;
454 |     font-weight: 700;
455 |     background-color: $text-orange;
456 |     border: 1px solid yellow;
457 |     padding: 1.2rem 2rem;
458 |     cursor: pointer;
459 |     transition: all 0.2s;
460 | 
461 |     &:hover {
462 |       background-color: #fe3516;
463 |     }
464 |   }
465 | }
466 | 
467 | .dates-div {
468 |   display: flex;
469 |   flex-direction: column;
470 |   gap: 3.2rem;
471 | }
472 | 


--------------------------------------------------------------------------------
/src/Pages/Models.jsx:
--------------------------------------------------------------------------------
  1 | import Footer from "../components/Footer";
  2 | import HeroPages from "../components/HeroPages";
  3 | import CarImg1 from "../images/cars-big/audi-box.png";
  4 | import CarImg2 from "../images/cars-big/golf6-box.png";
  5 | import CarImg3 from "../images/cars-big/toyota-box.png";
  6 | import CarImg4 from "../images/cars-big/bmw-box.png";
  7 | import CarImg5 from "../images/cars-big/benz-box.png";
  8 | import CarImg6 from "../images/cars-big/passat-box.png";
  9 | import { Link } from "react-router-dom";
 10 | 
 11 | function Models() {
 12 |   return (
 13 |     <>
 14 |       <section className="models-section">
 15 |         <HeroPages name="Vehicle Models" />
 16 |         <div className="container">
 17 |           <div className="models-div">
 18 |             <div className="models-div__box">
 19 |               <div className="models-div__box__img">
 20 |                 <img src={CarImg1} alt="car_img" />
 21 |                 <div className="models-div__box__descr">
 22 |                   <div className="models-div__box__descr__name-price">
 23 |                     <div className="models-div__box__descr__name-price__name">
 24 |                       <p>Audi A1</p>
 25 |                       <span>
 26 |                         <i className="fa-solid fa-star"></i>
 27 |                         <i className="fa-solid fa-star"></i>
 28 |                         <i className="fa-solid fa-star"></i>
 29 |                         <i className="fa-solid fa-star"></i>
 30 |                         <i className="fa-solid fa-star"></i>
 31 |                       </span>
 32 |                     </div>
 33 |                     <div className="models-div__box__descr__name-price__price">
 34 |                       <h4>$45</h4>
 35 |                       <p>per day</p>
 36 |                     </div>
 37 |                   </div>
 38 |                   <div className="models-div__box__descr__name-price__details">
 39 |                     <span>
 40 |                       <i className="fa-solid fa-car-side"></i> &nbsp; Audi
 41 |                     </span>
 42 |                     <span style={{ textAlign: "right" }}>
 43 |                       4/5 &nbsp; <i className="fa-solid fa-car-side"></i>
 44 |                     </span>
 45 |                     <span>
 46 |                       <i className="fa-solid fa-car-side"></i> &nbsp; Manual
 47 |                     </span>
 48 |                     <span style={{ textAlign: "right" }}>
 49 |                       Diesel &nbsp; <i className="fa-solid fa-car-side"></i>
 50 |                     </span>
 51 |                   </div>
 52 |                   <div className="models-div__box__descr__name-price__btn">
 53 |                     <Link onClick={() => window.scrollTo(0, 0)} to="/">
 54 |                       Book Ride
 55 |                     </Link>
 56 |                   </div>
 57 |                 </div>
 58 |               </div>
 59 |             </div>
 60 | 
 61 |             <div className="models-div__box">
 62 |               <div className="models-div__box__img">
 63 |                 <img src={CarImg2} alt="car_img" />
 64 |                 <div className="models-div__box__descr">
 65 |                   <div className="models-div__box__descr__name-price">
 66 |                     <div className="models-div__box__descr__name-price__name">
 67 |                       <p>Golf 6</p>
 68 |                       <span>
 69 |                         <i className="fa-solid fa-star"></i>
 70 |                         <i className="fa-solid fa-star"></i>
 71 |                         <i className="fa-solid fa-star"></i>
 72 |                         <i className="fa-solid fa-star"></i>
 73 |                         <i className="fa-solid fa-star"></i>
 74 |                       </span>
 75 |                     </div>
 76 |                     <div className="models-div__box__descr__name-price__price">
 77 |                       <h4>$37</h4>
 78 |                       <p>per day</p>
 79 |                     </div>
 80 |                   </div>
 81 |                   <div className="models-div__box__descr__name-price__details">
 82 |                     <span>
 83 |                       <i className="fa-solid fa-car-side"></i> &nbsp; VW
 84 |                     </span>
 85 |                     <span style={{ textAlign: "right" }}>
 86 |                       4/5 &nbsp; <i className="fa-solid fa-car-side"></i>
 87 |                     </span>
 88 |                     <span>
 89 |                       <i className="fa-solid fa-car-side"></i> &nbsp; Manual
 90 |                     </span>
 91 |                     <span style={{ textAlign: "right" }}>
 92 |                       Diesel &nbsp; <i className="fa-solid fa-car-side"></i>
 93 |                     </span>
 94 |                   </div>
 95 |                   <div className="models-div__box__descr__name-price__btn">
 96 |                     <Link onClick={() => window.scrollTo(0, 0)} to="/">
 97 |                       Book Ride
 98 |                     </Link>
 99 |                   </div>
100 |                 </div>
101 |               </div>
102 |             </div>
103 | 
104 |             <div className="models-div__box">
105 |               <div className="models-div__box__img">
106 |                 <img src={CarImg3} alt="car_img" />
107 |                 <div className="models-div__box__descr">
108 |                   <div className="models-div__box__descr__name-price">
109 |                     <div className="models-div__box__descr__name-price__name">
110 |                       <p>Toyota</p>
111 |                       <span>
112 |                         <i className="fa-solid fa-star"></i>
113 |                         <i className="fa-solid fa-star"></i>
114 |                         <i className="fa-solid fa-star"></i>
115 |                         <i className="fa-solid fa-star"></i>
116 |                         <i className="fa-solid fa-star"></i>
117 |                       </span>
118 |                     </div>
119 |                     <div className="models-div__box__descr__name-price__price">
120 |                       <h4>$30</h4>
121 |                       <p>per day</p>
122 |                     </div>
123 |                   </div>
124 |                   <div className="models-div__box__descr__name-price__details">
125 |                     <span>
126 |                       <i className="fa-solid fa-car-side"></i> &nbsp; Camry
127 |                     </span>
128 |                     <span style={{ textAlign: "right" }}>
129 |                       4/5 &nbsp; <i className="fa-solid fa-car-side"></i>
130 |                     </span>
131 |                     <span>
132 |                       <i className="fa-solid fa-car-side"></i> &nbsp; Manual
133 |                     </span>
134 |                     <span style={{ textAlign: "right" }}>
135 |                       Diesel &nbsp; <i className="fa-solid fa-car-side"></i>
136 |                     </span>
137 |                   </div>
138 |                   <div className="models-div__box__descr__name-price__btn">
139 |                     <Link onClick={() => window.scrollTo(0, 0)} to="/">
140 |                       Book Ride
141 |                     </Link>
142 |                   </div>
143 |                 </div>
144 |               </div>
145 |             </div>
146 | 
147 |             <div className="models-div__box">
148 |               <div className="models-div__box__img">
149 |                 <img src={CarImg4} alt="car_img" />
150 |                 <div className="models-div__box__descr">
151 |                   <div className="models-div__box__descr__name-price">
152 |                     <div className="models-div__box__descr__name-price__name">
153 |                       <p>BMW 320</p>
154 |                       <span>
155 |                         <i className="fa-solid fa-star"></i>
156 |                         <i className="fa-solid fa-star"></i>
157 |                         <i className="fa-solid fa-star"></i>
158 |                         <i className="fa-solid fa-star"></i>
159 |                         <i className="fa-solid fa-star"></i>
160 |                       </span>
161 |                     </div>
162 |                     <div className="models-div__box__descr__name-price__price">
163 |                       <h4>$35</h4>
164 |                       <p>per day</p>
165 |                     </div>
166 |                   </div>
167 |                   <div className="models-div__box__descr__name-price__details">
168 |                     <span>
169 |                       <i className="fa-solid fa-car-side"></i> &nbsp; ModernLine
170 |                     </span>
171 |                     <span style={{ textAlign: "right" }}>
172 |                       4/5 &nbsp; <i className="fa-solid fa-car-side"></i>
173 |                     </span>
174 |                     <span>
175 |                       <i className="fa-solid fa-car-side"></i> &nbsp; Manual
176 |                     </span>
177 |                     <span style={{ textAlign: "right" }}>
178 |                       Diesel &nbsp; <i className="fa-solid fa-car-side"></i>
179 |                     </span>
180 |                   </div>
181 |                   <div className="models-div__box__descr__name-price__btn">
182 |                     <Link onClick={() => window.scrollTo(0, 0)} to="/">
183 |                       Book Ride
184 |                     </Link>
185 |                   </div>
186 |                 </div>
187 |               </div>
188 |             </div>
189 | 
190 |             <div className="models-div__box">
191 |               <div className="models-div__box__img">
192 |                 <img src={CarImg5} alt="car_img" />
193 |                 <div className="models-div__box__descr">
194 |                   <div className="models-div__box__descr__name-price">
195 |                     <div className="models-div__box__descr__name-price__name">
196 |                       <p>Mercedes</p>
197 |                       <span>
198 |                         <i className="fa-solid fa-star"></i>
199 |                         <i className="fa-solid fa-star"></i>
200 |                         <i className="fa-solid fa-star"></i>
201 |                         <i className="fa-solid fa-star"></i>
202 |                         <i className="fa-solid fa-star"></i>
203 |                       </span>
204 |                     </div>
205 |                     <div className="models-div__box__descr__name-price__price">
206 |                       <h4>$50</h4>
207 |                       <p>per day</p>
208 |                     </div>
209 |                   </div>
210 |                   <div className="models-div__box__descr__name-price__details">
211 |                     <span>
212 |                       <i className="fa-solid fa-car-side"></i> &nbsp; Benz GLK
213 |                     </span>
214 |                     <span style={{ textAlign: "right" }}>
215 |                       4/5 &nbsp; <i className="fa-solid fa-car-side"></i>
216 |                     </span>
217 |                     <span>
218 |                       <i className="fa-solid fa-car-side"></i> &nbsp; Manual
219 |                     </span>
220 |                     <span style={{ textAlign: "right" }}>
221 |                       Diesel &nbsp; <i className="fa-solid fa-car-side"></i>
222 |                     </span>
223 |                   </div>
224 |                   <div className="models-div__box__descr__name-price__btn">
225 |                     <Link onClick={() => window.scrollTo(0, 0)} to="/">
226 |                       Book Ride
227 |                     </Link>
228 |                   </div>
229 |                 </div>
230 |               </div>
231 |             </div>
232 | 
233 |             <div className="models-div__box">
234 |               <div className="models-div__box__img">
235 |                 <img src={CarImg6} alt="car_img" />
236 |                 <div className="models-div__box__descr">
237 |                   <div className="models-div__box__descr__name-price">
238 |                     <div className="models-div__box__descr__name-price__name">
239 |                       <p>VW Passat</p>
240 |                       <span>
241 |                         <i className="fa-solid fa-star"></i>
242 |                         <i className="fa-solid fa-star"></i>
243 |                         <i className="fa-solid fa-star"></i>
244 |                         <i className="fa-solid fa-star"></i>
245 |                         <i className="fa-solid fa-star"></i>
246 |                       </span>
247 |                     </div>
248 |                     <div className="models-div__box__descr__name-price__price">
249 |                       <h4>$25</h4>
250 |                       <p>per day</p>
251 |                     </div>
252 |                   </div>
253 |                   <div className="models-div__box__descr__name-price__details">
254 |                     <span>
255 |                       <i className="fa-solid fa-car-side"></i> &nbsp; CC
256 |                     </span>
257 |                     <span style={{ textAlign: "right" }}>
258 |                       4/5 &nbsp; <i className="fa-solid fa-car-side"></i>
259 |                     </span>
260 |                     <span>
261 |                       <i className="fa-solid fa-car-side"></i> &nbsp; Manual
262 |                     </span>
263 |                     <span style={{ textAlign: "right" }}>
264 |                       Diesel &nbsp; <i className="fa-solid fa-car-side"></i>
265 |                     </span>
266 |                   </div>
267 |                   <div className="models-div__box__descr__name-price__btn">
268 |                     <Link onClick={() => window.scrollTo(0, 0)} to="/">
269 |                       Book Ride
270 |                     </Link>
271 |                   </div>
272 |                 </div>
273 |               </div>
274 |             </div>
275 |           </div>
276 |         </div>
277 |         <div className="book-banner">
278 |           <div className="book-banner__overlay"></div>
279 |           <div className="container">
280 |             <div className="text-content">
281 |               <h2>Book a car by getting in touch with us</h2>
282 |               <span>
283 |                 <i className="fa-solid fa-phone"></i>
284 |                 <h3>(123) 456-7869</h3>
285 |               </span>
286 |             </div>
287 |           </div>
288 |         </div>
289 |         <Footer />
290 |       </section>
291 |     </>
292 |   );
293 | }
294 | 
295 | export default Models;
296 | 


--------------------------------------------------------------------------------
/src/components/BookCar.jsx:
--------------------------------------------------------------------------------
  1 | import { useEffect, useState } from "react";
  2 | import CarAudi from "../images/cars-big/audia1.jpg";
  3 | import CarGolf from "../images/cars-big/golf6.jpg";
  4 | import CarToyota from "../images/cars-big/toyotacamry.jpg";
  5 | import CarBmw from "../images/cars-big/bmw320.jpg";
  6 | import CarMercedes from "../images/cars-big/benz.jpg";
  7 | import CarPassat from "../images/cars-big/passatcc.jpg";
  8 | 
  9 | function BookCar() {
 10 |   const [modal, setModal] = useState(false); //  class - active-modal
 11 | 
 12 |   // booking car
 13 |   const [carType, setCarType] = useState("");
 14 |   const [pickUp, setPickUp] = useState("");
 15 |   const [dropOff, setDropOff] = useState("");
 16 |   const [pickTime, setPickTime] = useState("");
 17 |   const [dropTime, setDropTime] = useState("");
 18 |   const [carImg, setCarImg] = useState("");
 19 | 
 20 |   // modal infos
 21 |   const [name, setName] = useState("");
 22 |   const [lastName, setLastName] = useState("");
 23 |   const [phone, setPhone] = useState("");
 24 |   const [age, setAge] = useState("");
 25 |   const [email, setEmail] = useState("");
 26 |   const [address, setAddress] = useState("");
 27 |   const [city, setCity] = useState("");
 28 |   const [zipcode, setZipCode] = useState("");
 29 | 
 30 |   // taking value of modal inputs
 31 |   const handleName = (e) => {
 32 |     setName(e.target.value);
 33 |   };
 34 | 
 35 |   const handleLastName = (e) => {
 36 |     setLastName(e.target.value);
 37 |   };
 38 | 
 39 |   const handlePhone = (e) => {
 40 |     setPhone(e.target.value);
 41 |   };
 42 | 
 43 |   const handleAge = (e) => {
 44 |     setAge(e.target.value);
 45 |   };
 46 | 
 47 |   const handleEmail = (e) => {
 48 |     setEmail(e.target.value);
 49 |   };
 50 | 
 51 |   const handleAddress = (e) => {
 52 |     setAddress(e.target.value);
 53 |   };
 54 | 
 55 |   const handleCity = (e) => {
 56 |     setCity(e.target.value);
 57 |   };
 58 | 
 59 |   const handleZip = (e) => {
 60 |     setZipCode(e.target.value);
 61 |   };
 62 | 
 63 |   // open modal when all inputs are fulfilled
 64 |   const openModal = (e) => {
 65 |     e.preventDefault();
 66 |     const errorMsg = document.querySelector(".error-message");
 67 |     if (
 68 |       pickUp === "" ||
 69 |       dropOff === "" ||
 70 |       pickTime === "" ||
 71 |       dropTime === "" ||
 72 |       carType === ""
 73 |     ) {
 74 |       errorMsg.style.display = "flex";
 75 |     } else {
 76 |       setModal(!modal);
 77 |       const modalDiv = document.querySelector(".booking-modal");
 78 |       modalDiv.scroll(0, 0);
 79 |       errorMsg.style.display = "none";
 80 |     }
 81 |   };
 82 | 
 83 |   // disable page scroll when modal is displayed
 84 |   useEffect(() => {
 85 |     if (modal === true) {
 86 |       document.body.style.overflow = "hidden";
 87 |     } else {
 88 |       document.body.style.overflow = "auto";
 89 |     }
 90 |   }, [modal]);
 91 | 
 92 |   // confirm modal booking
 93 |   const confirmBooking = (e) => {
 94 |     e.preventDefault();
 95 |     setModal(!modal);
 96 |     const doneMsg = document.querySelector(".booking-done");
 97 |     doneMsg.style.display = "flex";
 98 |   };
 99 | 
100 |   // taking value of booking inputs
101 |   const handleCar = (e) => {
102 |     setCarType(e.target.value);
103 |     setCarImg(e.target.value);
104 |   };
105 | 
106 |   const handlePick = (e) => {
107 |     setPickUp(e.target.value);
108 |   };
109 | 
110 |   const handleDrop = (e) => {
111 |     setDropOff(e.target.value);
112 |   };
113 | 
114 |   const handlePickTime = (e) => {
115 |     setPickTime(e.target.value);
116 |   };
117 | 
118 |   const handleDropTime = (e) => {
119 |     setDropTime(e.target.value);
120 |   };
121 | 
122 |   // based on value name show car img
123 |   let imgUrl;
124 |   switch (carImg) {
125 |     case "Audi A1 S-Line":
126 |       imgUrl = CarAudi;
127 |       break;
128 |     case "VW Golf 6":
129 |       imgUrl = CarGolf;
130 |       break;
131 |     case "Toyota Camry":
132 |       imgUrl = CarToyota;
133 |       break;
134 |     case "BMW 320 ModernLine":
135 |       imgUrl = CarBmw;
136 |       break;
137 |     case "Mercedes-Benz GLK":
138 |       imgUrl = CarMercedes;
139 |       break;
140 |     case "VW Passat CC":
141 |       imgUrl = CarPassat;
142 |       break;
143 |     default:
144 |       imgUrl = "";
145 |   }
146 | 
147 |   // hide message
148 |   const hideMessage = () => {
149 |     const doneMsg = document.querySelector(".booking-done");
150 |     doneMsg.style.display = "none";
151 |   };
152 | 
153 |   return (
154 |     <>
155 |       <section id="booking-section" className="book-section">
156 |         {/* overlay */}
157 |         <div
158 |           onClick={openModal}
159 |           className={`modal-overlay ${modal ? "active-modal" : ""}`}
160 |         ></div>
161 | 
162 |         <div className="container">
163 |           <div className="book-content">
164 |             <div className="book-content__box">
165 |               <h2>Book a car</h2>
166 | 
167 |               <p className="error-message">
168 |                 All fields required! <i className="fa-solid fa-xmark"></i>
169 |               </p>
170 | 
171 |               <p className="booking-done">
172 |                 Check your email to confirm an order.{" "}
173 |                 <i onClick={hideMessage} className="fa-solid fa-xmark"></i>
174 |               </p>
175 | 
176 |               <form className="box-form">
177 |                 <div className="box-form__car-type">
178 |                   <label>
179 |                     <i className="fa-solid fa-car"></i> &nbsp; Select Your Car
180 |                     Type <b>*</b>
181 |                   </label>
182 |                   <select value={carType} onChange={handleCar}>
183 |                     <option>Select your car type</option>
184 |                     <option value="Audi A1 S-Line">Audi A1 S-Line</option>
185 |                     <option value="VW Golf 6">VW Golf 6</option>
186 |                     <option value="Toyota Camry">Toyota Camry</option>
187 |                     <option value="BMW 320 ModernLine">
188 |                       BMW 320 ModernLine
189 |                     </option>
190 |                     <option value="Mercedes-Benz GLK">Mercedes-Benz GLK</option>
191 |                     <option value="VW Passat CC">VW Passat CC</option>
192 |                   </select>
193 |                 </div>
194 | 
195 |                 <div className="box-form__car-type">
196 |                   <label>
197 |                     <i className="fa-solid fa-location-dot"></i> &nbsp; Pick-up{" "}
198 |                     <b>*</b>
199 |                   </label>
200 |                   <select value={pickUp} onChange={handlePick}>
201 |                     <option>Select pick up location</option>
202 |                     <option>Belgrade</option>
203 |                     <option>Novi Sad</option>
204 |                     <option>Nis</option>
205 |                     <option>Kragujevac</option>
206 |                     <option>Subotica</option>
207 |                   </select>
208 |                 </div>
209 | 
210 |                 <div className="box-form__car-type">
211 |                   <label>
212 |                     <i className="fa-solid fa-location-dot"></i> &nbsp; Drop-of{" "}
213 |                     <b>*</b>
214 |                   </label>
215 |                   <select value={dropOff} onChange={handleDrop}>
216 |                     <option>Select drop off location</option>
217 |                     <option>Novi Sad</option>
218 |                     <option>Belgrade</option>
219 |                     <option>Nis</option>
220 |                     <option>Kragujevac</option>
221 |                     <option>Subotica</option>
222 |                   </select>
223 |                 </div>
224 | 
225 |                 <div className="box-form__car-time">
226 |                   <label htmlFor="picktime">
227 |                     <i className="fa-regular fa-calendar-days "></i> &nbsp;
228 |                     Pick-up <b>*</b>
229 |                   </label>
230 |                   <input
231 |                     id="picktime"
232 |                     value={pickTime}
233 |                     onChange={handlePickTime}
234 |                     type="date"
235 |                   ></input>
236 |                 </div>
237 | 
238 |                 <div className="box-form__car-time">
239 |                   <label htmlFor="droptime">
240 |                     <i className="fa-regular fa-calendar-days "></i> &nbsp;
241 |                     Drop-of <b>*</b>
242 |                   </label>
243 |                   <input
244 |                     id="droptime"
245 |                     value={dropTime}
246 |                     onChange={handleDropTime}
247 |                     type="date"
248 |                   ></input>
249 |                 </div>
250 | 
251 |                 <button onClick={openModal} type="submit">
252 |                   Search
253 |                 </button>
254 |               </form>
255 |             </div>
256 |           </div>
257 |         </div>
258 |       </section>
259 | 
260 |       {/* modal ------------------------------------ */}
261 | 
262 |       <div className={`booking-modal ${modal ? "active-modal" : ""}`}>
263 |         {/* title */}
264 |         <div className="booking-modal__title">
265 |           <h2>Complete Reservation</h2>
266 |           <i onClick={openModal} className="fa-solid fa-xmark"></i>
267 |         </div>
268 |         {/* message */}
269 |         <div className="booking-modal__message">
270 |           <h4>
271 |             <i className="fa-solid fa-circle-info"></i> Upon completing this
272 |             reservation enquiry, you will receive:
273 |           </h4>
274 |           <p>
275 |             Your rental voucher to produce on arrival at the rental desk and a
276 |             toll-free customer support number.
277 |           </p>
278 |         </div>
279 |         {/* car info */}
280 |         <div className="booking-modal__car-info">
281 |           <div className="dates-div">
282 |             <div className="booking-modal__car-info__dates">
283 |               <h5>Location & Date</h5>
284 |               <span>
285 |                 <i className="fa-solid fa-location-dot"></i>
286 |                 <div>
287 |                   <h6>Pick-Up Date & Time</h6>
288 |                   <p>
289 |                     {pickTime} /{" "}
290 |                     <input type="time" className="input-time"></input>
291 |                   </p>
292 |                 </div>
293 |               </span>
294 |             </div>
295 | 
296 |             <div className="booking-modal__car-info__dates">
297 |               <span>
298 |                 <i className="fa-solid fa-location-dot"></i>
299 |                 <div>
300 |                   <h6>Drop-Off Date & Time</h6>
301 |                   <p>
302 |                     {dropTime} /{" "}
303 |                     <input type="time" className="input-time"></input>
304 |                   </p>
305 |                 </div>
306 |               </span>
307 |             </div>
308 | 
309 |             <div className="booking-modal__car-info__dates">
310 |               <span>
311 |                 <i className="fa-solid fa-calendar-days"></i>
312 |                 <div>
313 |                   <h6>Pick-Up Location</h6>
314 |                   <p>{pickUp}</p>
315 |                 </div>
316 |               </span>
317 |             </div>
318 | 
319 |             <div className="booking-modal__car-info__dates">
320 |               <span>
321 |                 <i className="fa-solid fa-calendar-days"></i>
322 |                 <div>
323 |                   <h6>Drop-Off Location</h6>
324 |                   <p>{dropOff}</p>
325 |                 </div>
326 |               </span>
327 |             </div>
328 |           </div>
329 |           <div className="booking-modal__car-info__model">
330 |             <h5>
331 |               <span>Car -</span> {carType}
332 |             </h5>
333 |             {imgUrl && <img src={imgUrl} alt="car_img" />}
334 |           </div>
335 |         </div>
336 |         {/* personal info */}
337 |         <div className="booking-modal__person-info">
338 |           <h4>Personal Information</h4>
339 |           <form className="info-form">
340 |             <div className="info-form__2col">
341 |               <span>
342 |                 <label>
343 |                   First Name <b>*</b>
344 |                 </label>
345 |                 <input
346 |                   value={name}
347 |                   onChange={handleName}
348 |                   type="text"
349 |                   placeholder="Enter your first name"
350 |                 ></input>
351 |                 <p className="error-modal">This field is required.</p>
352 |               </span>
353 | 
354 |               <span>
355 |                 <label>
356 |                   Last Name <b>*</b>
357 |                 </label>
358 |                 <input
359 |                   value={lastName}
360 |                   onChange={handleLastName}
361 |                   type="text"
362 |                   placeholder="Enter your last name"
363 |                 ></input>
364 |                 <p className="error-modal ">This field is required.</p>
365 |               </span>
366 | 
367 |               <span>
368 |                 <label>
369 |                   Phone Number <b>*</b>
370 |                 </label>
371 |                 <input
372 |                   value={phone}
373 |                   onChange={handlePhone}
374 |                   type="tel"
375 |                   placeholder="Enter your phone number"
376 |                 ></input>
377 |                 <p className="error-modal">This field is required.</p>
378 |               </span>
379 | 
380 |               <span>
381 |                 <label>
382 |                   Age <b>*</b>
383 |                 </label>
384 |                 <input
385 |                   value={age}
386 |                   onChange={handleAge}
387 |                   type="number"
388 |                   placeholder="18"
389 |                 ></input>
390 |                 <p className="error-modal ">This field is required.</p>
391 |               </span>
392 |             </div>
393 | 
394 |             <div className="info-form__1col">
395 |               <span>
396 |                 <label>
397 |                   Email <b>*</b>
398 |                 </label>
399 |                 <input
400 |                   value={email}
401 |                   onChange={handleEmail}
402 |                   type="email"
403 |                   placeholder="Enter your email address"
404 |                 ></input>
405 |                 <p className="error-modal">This field is required.</p>
406 |               </span>
407 | 
408 |               <span>
409 |                 <label>
410 |                   Address <b>*</b>
411 |                 </label>
412 |                 <input
413 |                   value={address}
414 |                   onChange={handleAddress}
415 |                   type="text"
416 |                   placeholder="Enter your street address"
417 |                 ></input>
418 |                 <p className="error-modal ">This field is required.</p>
419 |               </span>
420 |             </div>
421 | 
422 |             <div className="info-form__2col">
423 |               <span>
424 |                 <label>
425 |                   City <b>*</b>
426 |                 </label>
427 |                 <input
428 |                   value={city}
429 |                   onChange={handleCity}
430 |                   type="text"
431 |                   placeholder="Enter your city"
432 |                 ></input>
433 |                 <p className="error-modal">This field is required.</p>
434 |               </span>
435 | 
436 |               <span>
437 |                 <label>
438 |                   Zip Code <b>*</b>
439 |                 </label>
440 |                 <input
441 |                   value={zipcode}
442 |                   onChange={handleZip}
443 |                   type="text"
444 |                   placeholder="Enter your zip code"
445 |                 ></input>
446 |                 <p className="error-modal ">This field is required.</p>
447 |               </span>
448 |             </div>
449 | 
450 |             <span className="info-form__checkbox">
451 |               <input type="checkbox"></input>
452 |               <p>Please send me latest news and updates</p>
453 |             </span>
454 | 
455 |             <div className="reserve-button">
456 |               <button onClick={confirmBooking}>Reserve Now</button>
457 |             </div>
458 |           </form>
459 |         </div>
460 |       </div>
461 |     </>
462 |   );
463 | }
464 | 
465 | export default BookCar;
466 | 


--------------------------------------------------------------------------------
/src/dist/styles.css.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":["../styles/global/_boilerplate.scss","styles.css","../styles/global/_colors.scss","../styles/global/_typhography.scss","../styles/NavbarStyles/_navbar.scss","../styles/HeroStyles/_hero.scss","../styles/BookStyles/_book.scss","../styles/PlanTripStyles/_plan.scss","../styles/PickStyles/_pick.scss","../styles/BannerStyles/_banner.scss","../styles/ChooseStyles/_choose.scss","../styles/TestimonialsStyles/_testimonials.scss","../styles/FaqStyles/_faq.scss","../styles/DownloadStyles/_download.scss","../styles/FooterStyles/_footer.scss","../styles/AboutStyles/_about.scss","../styles/ModelsStyles/_models.scss","../styles/TeamStyles/_team.scss","../styles/ContactStyles/_contact.scss"],"names":[],"mappings":"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","file":"styles.css"}


--------------------------------------------------------------------------------
/src/dist/styles.css:
--------------------------------------------------------------------------------
   1 | * {
   2 |   box-sizing: border-box;
   3 |   margin: 0;
   4 |   padding: 0;
   5 | }
   6 | 
   7 | html {
   8 |   font-size: 62.5%;
   9 |   scroll-behavior: smooth;
  10 | }
  11 | 
  12 | body {
  13 |   background-color: #ffffff;
  14 |   font-family: "Poppins", sans-serif;
  15 |   position: relative;
  16 | }
  17 | 
  18 | .container {
  19 |   max-width: 133rem !important;
  20 |   margin: 0 auto !important;
  21 |   padding: 0 2.5rem !important;
  22 | }
  23 | 
  24 | /* Firefox */
  25 | * {
  26 |   scrollbar-width: thin;
  27 |   scrollbar-color: #ff4d30 #ffffff;
  28 | }
  29 | 
  30 | /* Chrome, Edge and Safari */
  31 | *::-webkit-scrollbar {
  32 |   width: 10px;
  33 |   width: 10px;
  34 | }
  35 | 
  36 | *::-webkit-scrollbar-track {
  37 |   border-radius: 5px;
  38 |   background-color: #ffffff;
  39 | }
  40 | 
  41 | *::-webkit-scrollbar-track:hover {
  42 |   background-color: #ffffff;
  43 | }
  44 | 
  45 | *::-webkit-scrollbar-track:active {
  46 |   background-color: #ffffff;
  47 | }
  48 | 
  49 | *::-webkit-scrollbar-thumb {
  50 |   border-radius: 20px;
  51 |   background-color: #ff4d30;
  52 | }
  53 | 
  54 | *::-webkit-scrollbar-thumb:hover {
  55 |   background-color: #ff4d30;
  56 | }
  57 | 
  58 | *::-webkit-scrollbar-thumb:active {
  59 |   background-color: #ff2525;
  60 | }
  61 | 
  62 | .navbar {
  63 |   max-width: 133rem;
  64 |   width: 100%;
  65 |   height: auto;
  66 |   display: flex;
  67 |   justify-content: space-between;
  68 |   align-items: center;
  69 |   padding: 2.7rem 2rem;
  70 |   position: absolute;
  71 |   top: 0;
  72 |   left: 0;
  73 |   right: 0;
  74 |   background-color: transparent;
  75 |   z-index: 99999;
  76 |   margin: 0 auto;
  77 | }
  78 | .navbar__img {
  79 |   width: 14.5rem;
  80 | }
  81 | .navbar__img img {
  82 |   width: 100%;
  83 |   height: 100%;
  84 | }
  85 | .navbar__links {
  86 |   display: flex;
  87 |   list-style: none;
  88 |   gap: 2.1rem;
  89 | }
  90 | .navbar__links a {
  91 |   font-size: 1.6rem;
  92 |   font-family: "Rubik", sans-serif;
  93 |   font-weight: 500;
  94 |   color: #010103;
  95 |   text-decoration: none;
  96 |   cursor: pointer;
  97 |   transition: all 0.3s;
  98 | }
  99 | .navbar__links a:hover {
 100 |   color: #ff4d30;
 101 | }
 102 | @media (max-width: 1000px) {
 103 |   .navbar__links {
 104 |     display: none;
 105 |   }
 106 | }
 107 | .navbar__buttons {
 108 |   display: flex;
 109 |   gap: 2.5rem;
 110 |   font-size: 1.6rem;
 111 |   font-family: "Rubik", sans-serif;
 112 |   font-weight: 500;
 113 |   align-items: center;
 114 | }
 115 | @media (max-width: 1000px) {
 116 |   .navbar__buttons {
 117 |     display: none;
 118 |   }
 119 | }
 120 | .navbar__buttons__sign-in {
 121 |   color: #010103;
 122 |   cursor: pointer;
 123 |   transition: all 0.3s;
 124 | }
 125 | .navbar__buttons__sign-in:hover {
 126 |   color: #ff4d30;
 127 | }
 128 | .navbar__buttons__register {
 129 |   background-color: #ff4d30;
 130 |   color: white;
 131 |   padding: 1.5rem 3rem;
 132 |   border-radius: 3px;
 133 |   box-shadow: 0 10px 15px 0 rgba(255, 83, 48, 0.35);
 134 |   transition: all 0.3s;
 135 | }
 136 | .navbar__buttons__register:hover {
 137 |   box-shadow: 0 10px 15px 0 rgba(255, 83, 48, 0.5);
 138 |   background-color: #fa4226;
 139 | }
 140 | .navbar__buttons a {
 141 |   text-decoration: none;
 142 | }
 143 | 
 144 | .mobile-hamb {
 145 |   font-size: 2.8rem;
 146 |   display: none;
 147 |   cursor: pointer;
 148 |   transition: all 0.3s;
 149 | }
 150 | .mobile-hamb:hover {
 151 |   color: #ff4d30;
 152 | }
 153 | @media (max-width: 1000px) {
 154 |   .mobile-hamb {
 155 |     display: flex;
 156 |   }
 157 | }
 158 | 
 159 | .mobile-navbar {
 160 |   display: flex;
 161 |   flex-direction: column;
 162 |   width: 100%;
 163 |   height: 100vh;
 164 |   position: fixed;
 165 |   top: 0;
 166 |   left: -100%;
 167 |   background-color: #ffffff;
 168 |   z-index: 999999;
 169 |   justify-content: center;
 170 |   align-items: center;
 171 |   transition: all 0.5s ease-in-out;
 172 | }
 173 | .mobile-navbar__close {
 174 |   font-size: 3rem;
 175 |   position: absolute;
 176 |   top: 3.5rem;
 177 |   right: 3.5rem;
 178 |   cursor: pointer;
 179 |   transition: all 0.3s;
 180 | }
 181 | .mobile-navbar__close:hover {
 182 |   color: #ff4d30;
 183 | }
 184 | .mobile-navbar__links {
 185 |   display: flex;
 186 |   flex-direction: column;
 187 |   list-style: none;
 188 |   font-size: 2.3rem;
 189 |   gap: 3rem;
 190 |   text-align: center;
 191 | }
 192 | .mobile-navbar__links li a {
 193 |   text-decoration: none;
 194 |   color: #010103;
 195 |   font-weight: 500;
 196 |   transition: all 0.3s;
 197 | }
 198 | .mobile-navbar__links li a:hover {
 199 |   color: #ff4d30;
 200 | }
 201 | 
 202 | .open-nav {
 203 |   left: 0;
 204 | }
 205 | 
 206 | .hero-section {
 207 |   width: 100%;
 208 |   height: 97vh;
 209 |   background-color: #f8f8f8;
 210 |   position: relative;
 211 | }
 212 | 
 213 | .bg-shape {
 214 |   position: absolute;
 215 |   top: 0;
 216 |   right: 0;
 217 |   z-index: 1;
 218 | }
 219 | @media (max-width: 800px) {
 220 |   .bg-shape {
 221 |     display: none;
 222 |   }
 223 | }
 224 | 
 225 | .hero-content {
 226 |   width: 100%;
 227 |   height: 100vh;
 228 |   display: flex;
 229 |   align-items: center;
 230 |   position: relative;
 231 | }
 232 | @media (max-width: 800px) {
 233 |   .hero-content {
 234 |     justify-content: center;
 235 |   }
 236 | }
 237 | .hero-content__text {
 238 |   display: flex;
 239 |   flex-direction: column;
 240 |   z-index: 3;
 241 |   max-width: 50rem;
 242 |   margin-top: 5rem;
 243 | }
 244 | @media (max-width: 800px) {
 245 |   .hero-content__text {
 246 |     text-align: center;
 247 |     align-items: center;
 248 |   }
 249 | }
 250 | .hero-content__text h4 {
 251 |   font-size: 2.2rem;
 252 |   font-family: "Rubik", sans-serif;
 253 |   color: #010103;
 254 | }
 255 | .hero-content__text h1 {
 256 |   font-size: 5.2rem;
 257 |   font-family: "Poppins", sans-serif;
 258 |   font-weight: 700;
 259 |   color: #010103;
 260 |   line-height: 1.2;
 261 |   margin-top: 1rem;
 262 |   margin-bottom: 2.3rem;
 263 | }
 264 | .hero-content__text h1 span {
 265 |   color: #ff4d30;
 266 | }
 267 | .hero-content__text p {
 268 |   font-size: 1.6rem;
 269 |   font-family: "Rubik", sans-serif;
 270 |   line-height: 1.6;
 271 |   color: #706f7b;
 272 |   margin-bottom: 4rem;
 273 | }
 274 | .hero-content__text__btns {
 275 |   display: flex;
 276 |   gap: 2rem;
 277 |   font-size: 1.6rem;
 278 |   font-family: "Rubik", sans-serif;
 279 | }
 280 | @media (max-width: 450px) {
 281 |   .hero-content__text__btns {
 282 |     flex-direction: column;
 283 |   }
 284 | }
 285 | .hero-content__text__btns a {
 286 |   text-decoration: none;
 287 |   color: white;
 288 |   font-weight: 700;
 289 | }
 290 | .hero-content__text__btns__book-ride {
 291 |   background-color: #ff4d30;
 292 |   padding: 1.8rem 3rem;
 293 |   border-radius: 0.3rem;
 294 |   box-shadow: 0 10px 15px 0 rgba(255, 83, 48, 0.35);
 295 |   transition: all 0.3s;
 296 |   border: 2px solid #ff4d30;
 297 | }
 298 | @media (max-width: 450px) {
 299 |   .hero-content__text__btns__book-ride {
 300 |     padding: 1.8rem 8rem;
 301 |   }
 302 | }
 303 | .hero-content__text__btns__book-ride:hover {
 304 |   box-shadow: 0 10px 15px 0 rgba(255, 83, 48, 0.6);
 305 |   background-color: #fa4226;
 306 | }
 307 | .hero-content__text__btns__learn-more {
 308 |   background-color: #010103;
 309 |   padding: 1.8rem 3rem;
 310 |   border-radius: 0.3rem;
 311 |   border: 2px solid #010103;
 312 |   transition: all 0.3s;
 313 | }
 314 | .hero-content__text__btns__learn-more:hover {
 315 |   background-color: transparent;
 316 |   color: #010103;
 317 | }
 318 | .hero-content__car-img {
 319 |   z-index: 2;
 320 |   position: absolute;
 321 |   right: 0;
 322 |   width: 65%;
 323 |   margin-top: 5rem;
 324 | }
 325 | @media (max-width: 800px) {
 326 |   .hero-content__car-img {
 327 |     display: none;
 328 |   }
 329 | }
 330 | 
 331 | .scroll-up {
 332 |   position: fixed;
 333 |   font-size: 2.5rem;
 334 |   color: white;
 335 |   background-color: #ff4d30;
 336 |   border: 3px solid white;
 337 |   width: 2rem;
 338 |   height: 2rem;
 339 |   bottom: 5rem;
 340 |   right: 5rem;
 341 |   z-index: 20;
 342 |   display: none;
 343 |   align-items: center;
 344 |   text-align: center;
 345 |   justify-content: center;
 346 |   padding: 2rem;
 347 |   cursor: pointer;
 348 | }
 349 | 
 350 | .show-scroll {
 351 |   display: flex;
 352 | }
 353 | 
 354 | .book-section {
 355 |   position: relative;
 356 |   background: linear-gradient(to bottom, #f8f8f8 20%, #ffffff 80%);
 357 | }
 358 | 
 359 | .book-content {
 360 |   margin: 0 auto;
 361 |   margin-bottom: 10rem;
 362 | }
 363 | .book-content__box {
 364 |   background-color: #ffffff;
 365 |   width: 100%;
 366 |   padding: 4rem 4.5rem 5rem 5.5rem;
 367 |   box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.1);
 368 |   height: auto;
 369 |   position: relative;
 370 |   z-index: 4;
 371 |   color: white;
 372 |   border-radius: 5px;
 373 |   background-image: url("/src/images/book-car/book-bg.png");
 374 |   background-position: center center;
 375 |   background-repeat: no-repeat;
 376 |   background-size: cover;
 377 |   display: flex;
 378 |   flex-direction: column;
 379 |   color: #010103;
 380 | }
 381 | @media (max-width: 400px) {
 382 |   .book-content__box {
 383 |     padding: 4rem 2.5rem 5rem 2.5rem;
 384 |   }
 385 | }
 386 | .book-content__box h2 {
 387 |   font-size: 2.4rem;
 388 |   font-weight: 700;
 389 |   margin-bottom: 2.7rem;
 390 | }
 391 | .book-content__box .box-form {
 392 |   display: grid;
 393 |   grid-template-columns: 1fr 1fr 1fr;
 394 |   grid-template-rows: auto auto auto;
 395 |   gap: 2rem;
 396 | }
 397 | .book-content__box .box-form b {
 398 |   color: #ff4d30;
 399 | }
 400 | @media (max-width: 1000px) {
 401 |   .book-content__box .box-form {
 402 |     grid-template-columns: 1fr 1fr;
 403 |   }
 404 | }
 405 | @media (max-width: 630px) {
 406 |   .book-content__box .box-form {
 407 |     grid-template-columns: 1fr;
 408 |   }
 409 | }
 410 | .book-content__box .box-form__car-type {
 411 |   display: flex;
 412 |   flex-direction: column;
 413 | }
 414 | .book-content__box .box-form__car-type label {
 415 |   font-size: 1.6rem;
 416 |   font-weight: 600;
 417 |   margin-bottom: 1.2rem;
 418 | }
 419 | .book-content__box .box-form__car-type label i {
 420 |   color: #ff4d30;
 421 | }
 422 | .book-content__box .box-form__car-type select {
 423 |   font-size: 1.5rem;
 424 |   color: #ababab;
 425 |   font-family: "Rubik", sans-serif;
 426 |   border: 1px solid #ccd7e6;
 427 |   border-radius: 3px;
 428 |   font-weight: 400;
 429 |   padding: 1.2rem 1.3rem;
 430 |   outline: none;
 431 | }
 432 | .book-content__box .box-form__car-time {
 433 |   display: flex;
 434 |   flex-direction: column;
 435 |   position: relative;
 436 | }
 437 | .book-content__box .box-form__car-time input {
 438 |   outline: none;
 439 |   color: #878585;
 440 |   padding-right: 3rem;
 441 |   border: 1px solid #ccd7e6;
 442 | }
 443 | .book-content__box .box-form__car-time label {
 444 |   font-size: 1.6rem;
 445 |   font-weight: 600;
 446 |   margin-bottom: 1.2rem;
 447 | }
 448 | .book-content__box .box-form__car-time label i {
 449 |   color: #ff4d30;
 450 | }
 451 | .book-content__box .box-form__car-time ::-webkit-datetime-edit {
 452 |   padding: 1.3rem 1.3rem;
 453 | }
 454 | .book-content__box .box-form__car-time ::-webkit-calendar-picker-indicator {
 455 |   cursor: pointer;
 456 |   font-size: 1.6rem;
 457 | }
 458 | .book-content__box button {
 459 |   padding: 1.3rem 1.3rem;
 460 |   height: -moz-fit-content;
 461 |   height: fit-content;
 462 |   align-self: self-end;
 463 |   border: none;
 464 |   font-family: "Rubik", sans-serif;
 465 |   font-size: 1.8rem;
 466 |   font-weight: 500;
 467 |   color: white;
 468 |   background-color: #ff4d30;
 469 |   box-shadow: 0 10px 15px rgba(255, 83, 48, 0.35);
 470 |   cursor: pointer;
 471 |   transition: all 0.3s;
 472 | }
 473 | .book-content__box button:hover {
 474 |   box-shadow: 0 10px 15px rgba(255, 83, 48, 0.55);
 475 | }
 476 | 
 477 | .error-message {
 478 |   color: #721c24;
 479 |   background-color: #f8d7da;
 480 |   border-color: #f5c6cb;
 481 |   padding: 1rem 1.4rem;
 482 |   margin-bottom: 1.8rem;
 483 |   margin-top: -1rem;
 484 |   border: 1px solid transparent;
 485 |   border-radius: 0.8rem;
 486 |   font-size: 1.6rem;
 487 |   font-weight: 500;
 488 |   display: none;
 489 |   justify-content: space-between;
 490 |   align-items: center;
 491 | }
 492 | .error-message i {
 493 |   cursor: pointer;
 494 | }
 495 | 
 496 | .booking-done {
 497 |   color: #2a6817;
 498 |   background-color: #c3fabe;
 499 |   border-color: #f5c6cb;
 500 |   padding: 1rem 1.4rem;
 501 |   margin-bottom: 1.8rem;
 502 |   margin-top: -1rem;
 503 |   border: 1px solid transparent;
 504 |   border-radius: 0.8rem;
 505 |   font-size: 1.6rem;
 506 |   font-weight: 500;
 507 |   display: none;
 508 |   justify-content: space-between;
 509 |   align-items: center;
 510 | }
 511 | .booking-done i {
 512 |   cursor: pointer;
 513 | }
 514 | 
 515 | .active-modal {
 516 |   opacity: 1 !important;
 517 |   display: flex !important;
 518 | }
 519 | 
 520 | .modal-overlay {
 521 |   opacity: 0;
 522 |   display: none;
 523 |   position: fixed;
 524 |   width: 100%;
 525 |   height: 100%;
 526 |   background-color: rgba(0, 0, 0, 0.3);
 527 |   z-index: 999999999;
 528 |   top: 0;
 529 |   right: 0;
 530 | }
 531 | 
 532 | .booking-modal {
 533 |   opacity: 0;
 534 |   display: none;
 535 |   flex-direction: column;
 536 |   position: fixed;
 537 |   overflow-x: hidden;
 538 |   overflow-y: scroll;
 539 |   z-index: 999999999999;
 540 |   top: 54%;
 541 |   left: 50%;
 542 |   transform: translate(-50%, -50%);
 543 |   width: 83rem;
 544 |   height: 100vh;
 545 |   border: 2px solid white;
 546 |   background-color: rgb(255, 255, 255);
 547 |   padding-right: 2px;
 548 |   color: #010103;
 549 | }
 550 | @media (max-width: 800px) {
 551 |   .booking-modal {
 552 |     width: 100%;
 553 |   }
 554 | }
 555 | @media (max-width: 600px) {
 556 |   .booking-modal {
 557 |     top: 50%;
 558 |   }
 559 | }
 560 | .booking-modal__title {
 561 |   display: flex;
 562 |   justify-content: space-between;
 563 |   padding: 1rem 1.5rem;
 564 |   background-color: #ff4d30;
 565 |   color: white;
 566 |   align-items: center;
 567 | }
 568 | .booking-modal__title h2 {
 569 |   font-size: 2.4rem;
 570 |   text-transform: uppercase;
 571 | }
 572 | .booking-modal__title i {
 573 |   font-size: 2.5rem;
 574 |   color: rgba(255, 255, 255, 0.919);
 575 |   cursor: pointer;
 576 |   transition: all 0.2;
 577 | }
 578 | .booking-modal__title i:hover {
 579 |   color: white;
 580 | }
 581 | .booking-modal__message {
 582 |   display: flex;
 583 |   flex-direction: column;
 584 |   gap: 1.5rem;
 585 |   padding: 2rem 3rem;
 586 |   background-color: #ffeae6;
 587 | }
 588 | .booking-modal__message h4 {
 589 |   font-size: 1.9rem;
 590 |   font-weight: 700;
 591 |   color: #ff4d30;
 592 | }
 593 | .booking-modal__message h4 i {
 594 |   font-size: 2.5rem;
 595 | }
 596 | .booking-modal__message p {
 597 |   font-size: 1.7rem;
 598 |   color: #777777;
 599 |   font-weight: 500;
 600 |   line-height: 1.6;
 601 | }
 602 | .booking-modal__car-info {
 603 |   background-color: white;
 604 |   padding: 3rem 3rem;
 605 |   display: grid;
 606 |   grid-template-columns: 1fr 1fr;
 607 |   border-bottom: 1px solid rgba(119, 119, 119, 0.6235294118);
 608 | }
 609 | @media (max-width: 650px) {
 610 |   .booking-modal__car-info {
 611 |     grid-template-columns: 1fr;
 612 |     text-align: center;
 613 |   }
 614 | }
 615 | .booking-modal__car-info__dates {
 616 |   display: flex;
 617 |   flex-direction: column;
 618 |   gap: 2rem;
 619 | }
 620 | .booking-modal__car-info__dates h5 {
 621 |   font-size: 1.8rem;
 622 |   color: #ff4d30;
 623 | }
 624 | .booking-modal__car-info__dates span {
 625 |   display: flex;
 626 |   gap: 1rem;
 627 | }
 628 | @media (max-width: 650px) {
 629 |   .booking-modal__car-info__dates span {
 630 |     grid-template-columns: 1fr;
 631 |     text-align: center;
 632 |     justify-content: center;
 633 |   }
 634 | }
 635 | .booking-modal__car-info__dates span i {
 636 |   font-size: 1.8rem;
 637 |   padding-top: 0.2rem;
 638 |   color: #777777;
 639 | }
 640 | @media (max-width: 650px) {
 641 |   .booking-modal__car-info__dates span i {
 642 |     display: none;
 643 |   }
 644 | }
 645 | .booking-modal__car-info__dates span h6 {
 646 |   font-size: 1.5rem;
 647 |   margin-bottom: 0.2rem;
 648 | }
 649 | .booking-modal__car-info__dates span p {
 650 |   font-size: 1.6rem;
 651 |   color: #777777;
 652 | }
 653 | .booking-modal__car-info__model {
 654 |   display: flex;
 655 |   flex-direction: column;
 656 |   gap: 3rem;
 657 | }
 658 | @media (max-width: 650px) {
 659 |   .booking-modal__car-info__model {
 660 |     margin-top: 3.5rem;
 661 |   }
 662 | }
 663 | .booking-modal__car-info__model h5 {
 664 |   font-size: 1.8rem;
 665 |   color: #ff4d30;
 666 | }
 667 | .booking-modal__car-info__model h5 span {
 668 |   color: #010103;
 669 | }
 670 | .booking-modal__car-info__model img {
 671 |   width: 100%;
 672 |   height: auto;
 673 | }
 674 | .booking-modal__person-info {
 675 |   padding: 3rem 3rem;
 676 |   background-color: white;
 677 |   display: flex;
 678 |   flex-direction: column;
 679 | }
 680 | .booking-modal__person-info h4 {
 681 |   font-size: 1.8rem;
 682 |   text-transform: uppercase;
 683 |   color: #ff4d30;
 684 |   margin-bottom: 2rem;
 685 | }
 686 | 
 687 | .input-time {
 688 |   text-align: center;
 689 |   width: 8rem;
 690 |   font-size: 14px;
 691 |   cursor: pointer;
 692 | }
 693 | 
 694 | .info-form {
 695 |   display: flex;
 696 |   flex-direction: column;
 697 | }
 698 | .info-form__checkbox {
 699 |   display: flex;
 700 |   gap: 1rem;
 701 |   align-items: center;
 702 |   font-size: 1.6rem;
 703 |   color: #565454;
 704 |   margin-top: 2rem;
 705 |   margin-bottom: 3rem;
 706 | }
 707 | .info-form__checkbox input {
 708 |   width: 1.6rem;
 709 |   height: 1.6rem;
 710 | }
 711 | .info-form__1col {
 712 |   grid-template-columns: 1fr !important;
 713 | }
 714 | .info-form__2col, .info-form__1col {
 715 |   display: grid;
 716 |   grid-template-columns: 1fr 1fr;
 717 |   gap: 2rem;
 718 |   padding: 1rem 0;
 719 | }
 720 | @media (max-width: 650px) {
 721 |   .info-form__2col, .info-form__1col {
 722 |     grid-template-columns: 1fr;
 723 |   }
 724 | }
 725 | .info-form__2col span, .info-form__1col span {
 726 |   display: flex;
 727 |   flex-direction: column;
 728 |   gap: 0.4rem;
 729 | }
 730 | .info-form__2col span label, .info-form__1col span label {
 731 |   font-size: 1.6rem;
 732 |   font-weight: 500;
 733 |   color: #777777;
 734 | }
 735 | .info-form__2col span label b, .info-form__1col span label b {
 736 |   color: #ff4d30;
 737 | }
 738 | .info-form__2col span input, .info-form__1col span input {
 739 |   padding: 14px 15px;
 740 |   background-color: #dbdbdb;
 741 |   color: #555;
 742 |   font-size: 1.5rem;
 743 |   font-weight: 500;
 744 |   outline: none;
 745 |   border: none;
 746 | }
 747 | 
 748 | .reserve-button {
 749 |   background-color: #dbdbdb;
 750 |   margin: 0 -3rem;
 751 |   padding: 3rem;
 752 |   text-align: right;
 753 | }
 754 | @media (max-width: 650px) {
 755 |   .reserve-button {
 756 |     text-align: center;
 757 |   }
 758 | }
 759 | .reserve-button button {
 760 |   font-size: 2.4rem;
 761 |   color: white;
 762 |   font-weight: 700;
 763 |   background-color: #ff4d30;
 764 |   border: 1px solid yellow;
 765 |   padding: 1.2rem 2rem;
 766 |   cursor: pointer;
 767 |   transition: all 0.2s;
 768 | }
 769 | .reserve-button button:hover {
 770 |   background-color: #fe3516;
 771 | }
 772 | 
 773 | .dates-div {
 774 |   display: flex;
 775 |   flex-direction: column;
 776 |   gap: 3.2rem;
 777 | }
 778 | 
 779 | .plan-section {
 780 |   background-color: #ffffff;
 781 |   padding: 5.3rem 0;
 782 | }
 783 | 
 784 | .plan-container {
 785 |   display: flex;
 786 |   flex-direction: column;
 787 | }
 788 | .plan-container__title {
 789 |   margin: 0 auto;
 790 |   text-align: center;
 791 |   color: #010103;
 792 | }
 793 | .plan-container__title h3 {
 794 |   font-size: 2.4rem;
 795 |   font-family: "Rubik", sans-serif;
 796 |   font-weight: 500;
 797 | }
 798 | .plan-container__title h2 {
 799 |   font-size: 4.2rem;
 800 |   font-family: "Poppins", sans-serif;
 801 |   margin: 1.3rem 0 3rem 0;
 802 | }
 803 | .plan-container__boxes {
 804 |   display: grid;
 805 |   grid-template-columns: 1fr 1fr 1fr;
 806 |   grid-template-rows: auto;
 807 |   margin-top: 3.7rem;
 808 |   padding: 0 3rem;
 809 | }
 810 | @media (max-width: 1021px) {
 811 |   .plan-container__boxes {
 812 |     grid-template-columns: 1fr 1fr;
 813 |     row-gap: 2rem;
 814 |   }
 815 | }
 816 | @media (max-width: 800px) {
 817 |   .plan-container__boxes {
 818 |     grid-template-columns: 1fr;
 819 |     margin-top: 1rem;
 820 |   }
 821 | }
 822 | .plan-container__boxes__box {
 823 |   text-align: center;
 824 |   padding: 1rem 6rem;
 825 | }
 826 | @media (max-width: 500px) {
 827 |   .plan-container__boxes__box {
 828 |     padding: 1rem 1rem;
 829 |   }
 830 | }
 831 | .plan-container__boxes__box img {
 832 |   width: 17rem;
 833 |   height: auto;
 834 | }
 835 | .plan-container__boxes__box h3 {
 836 |   font-size: 2.4rem;
 837 |   margin-bottom: 1rem;
 838 | }
 839 | .plan-container__boxes__box p {
 840 |   font-size: 1.6rem;
 841 |   font-family: "Rubik", sans-serif;
 842 |   color: #706f7b;
 843 |   line-height: 1.43;
 844 | }
 845 | 
 846 | .pick-section {
 847 |   padding: 10rem 0;
 848 | }
 849 | 
 850 | .pick-container {
 851 |   display: flex;
 852 |   flex-direction: column;
 853 | }
 854 | .pick-container__title {
 855 |   margin: 0 auto;
 856 |   text-align: center;
 857 |   color: #010103;
 858 |   max-width: 50rem;
 859 |   margin-bottom: 5rem;
 860 | }
 861 | .pick-container__title p {
 862 |   font-size: 1.6rem;
 863 |   font-family: "Rubik", sans-serif;
 864 |   color: #706f7b;
 865 |   line-height: 1.5;
 866 | }
 867 | .pick-container__title h3 {
 868 |   font-size: 2.4rem;
 869 |   font-family: "Rubik", sans-serif;
 870 |   font-weight: 500;
 871 | }
 872 | .pick-container__title h2 {
 873 |   font-size: 4.2rem;
 874 |   font-family: "Poppins", sans-serif;
 875 |   margin: 0.5rem 0 1rem 0;
 876 | }
 877 | .pick-container__car-content {
 878 |   display: flex;
 879 |   justify-content: space-between;
 880 |   gap: 1rem;
 881 | }
 882 | @media (max-width: 1050px) {
 883 |   .pick-container__car-content {
 884 |     flex-direction: column;
 885 |     gap: 5rem;
 886 |   }
 887 | }
 888 | 
 889 | .pick-box {
 890 |   display: flex;
 891 |   flex-direction: column;
 892 |   gap: 0.7rem;
 893 | }
 894 | .pick-box button {
 895 |   font-size: 2rem;
 896 |   font-family: "Poppins", sans-serif;
 897 |   font-weight: 600;
 898 |   border: none;
 899 |   cursor: pointer;
 900 |   padding: 1.5rem 2.5rem;
 901 |   background-color: #e9e9e9;
 902 |   transition: all 0.2s;
 903 |   text-align: left;
 904 | }
 905 | .pick-box button:hover {
 906 |   background-color: #ff4d30;
 907 |   color: white;
 908 | }
 909 | 
 910 | .pick-car {
 911 |   width: 50rem;
 912 |   position: relative;
 913 | }
 914 | @media (max-width: 700px) {
 915 |   .pick-car {
 916 |     width: 100%;
 917 |   }
 918 | }
 919 | .pick-car img {
 920 |   width: 100%;
 921 |   margin-top: 6rem;
 922 | }
 923 | 
 924 | .pick-description {
 925 |   width: 25rem;
 926 | }
 927 | .pick-description__price {
 928 |   width: 100%;
 929 |   background-color: #ff4d30;
 930 |   font-size: 1.8rem;
 931 |   display: flex;
 932 |   align-items: center;
 933 |   gap: 1.5rem;
 934 |   color: white;
 935 |   padding: 0.3rem 1.9rem;
 936 |   white-space: nowrap;
 937 | }
 938 | .pick-description__price span {
 939 |   font-size: 2.8rem;
 940 |   font-weight: 700;
 941 | }
 942 | .pick-description__table {
 943 |   display: grid;
 944 |   grid-template-columns: 1fr;
 945 |   grid-template-rows: auto;
 946 |   font-size: 1.4rem;
 947 | }
 948 | .pick-description__table__col {
 949 |   display: grid;
 950 |   grid-template-columns: 1fr 1fr;
 951 |   text-align: center;
 952 |   grid-template-rows: auto;
 953 |   padding: 0.9rem 0.5rem;
 954 |   border-bottom: 2px solid #706f7b;
 955 |   border-right: 2px solid #706f7b;
 956 |   border-left: 2px solid #706f7b;
 957 | }
 958 | .pick-description__table__col span:nth-child(1) {
 959 |   border-right: 2px solid #706f7b;
 960 | }
 961 | 
 962 | .cta-btn {
 963 |   font-size: 2rem;
 964 |   text-transform: uppercase;
 965 |   text-decoration: none;
 966 |   font-weight: 600;
 967 |   color: white;
 968 |   font-family: "Poppins", sans-serif;
 969 |   background-color: #ff4d30;
 970 |   padding: 1rem 1rem;
 971 |   display: flex;
 972 |   width: 100%;
 973 |   justify-content: center;
 974 |   margin-top: 1.4rem;
 975 |   transition: all 0.3s;
 976 |   box-shadow: 6px 6px 0 #efe9e9;
 977 | }
 978 | .cta-btn:hover {
 979 |   background-color: #e9381d;
 980 | }
 981 | 
 982 | .box-cars {
 983 |   gap: 11rem;
 984 |   display: flex;
 985 |   justify-content: space-between;
 986 | }
 987 | @media (max-width: 1200px) {
 988 |   .box-cars {
 989 |     gap: 2rem;
 990 |   }
 991 | }
 992 | @media (max-width: 700px) {
 993 |   .box-cars {
 994 |     flex-direction: column;
 995 |     align-items: center;
 996 |     justify-content: center;
 997 |     gap: 5rem;
 998 |   }
 999 | }
1000 | 
1001 | .colored-button {
1002 |   background-color: #ff4d30 !important;
1003 |   color: white;
1004 | }
1005 | 
1006 | .loader {
1007 |   width: 48px;
1008 |   height: 48px;
1009 |   border: 5px solid rgba(0, 0, 0, 0.2588235294);
1010 |   border-bottom-color: #ff3d00;
1011 |   border-radius: 50%;
1012 |   display: inline-block;
1013 |   box-sizing: border-box;
1014 |   animation: rotation 1s linear infinite;
1015 |   position: absolute;
1016 |   transform: translate(-50%, -50%);
1017 |   top: 40%;
1018 |   right: 43%;
1019 | }
1020 | 
1021 | @keyframes rotation {
1022 |   0% {
1023 |     transform: rotate(0deg);
1024 |   }
1025 |   100% {
1026 |     transform: rotate(360deg);
1027 |   }
1028 | }
1029 | .banner-section {
1030 |   width: 100%;
1031 |   height: auto;
1032 |   display: flex;
1033 |   background-color: #2d2d2d;
1034 |   margin: 8rem 0;
1035 |   padding: 6rem 0;
1036 |   text-align: center;
1037 | }
1038 | 
1039 | .banner-content {
1040 |   color: white;
1041 |   display: flex;
1042 |   justify-content: space-between;
1043 |   width: 100%;
1044 |   height: 100%;
1045 |   align-items: center;
1046 | }
1047 | .banner-content__text {
1048 |   display: flex;
1049 |   flex-direction: column;
1050 |   gap: 1.5rem;
1051 | }
1052 | .banner-content__text h2 {
1053 |   font-size: 5.2rem;
1054 |   line-height: 1.3;
1055 | }
1056 | @media (max-width: 550px) {
1057 |   .banner-content__text h2 {
1058 |     font-size: 4.2rem;
1059 |   }
1060 | }
1061 | .banner-content__text p {
1062 |   font-size: 2.4rem;
1063 | }
1064 | @media (max-width: 550px) {
1065 |   .banner-content__text p {
1066 |     font-size: 2rem;
1067 |   }
1068 | }
1069 | .banner-content__text span {
1070 |   color: #ff4d30;
1071 |   font-weight: 500;
1072 | }
1073 | 
1074 | .choose-section {
1075 |   background-color: white;
1076 |   padding: 2rem 0 10rem 0;
1077 |   background-image: url("/src/images/chooseUs/bg.png");
1078 |   background-position: -225px 255px;
1079 |   background-size: cover;
1080 |   background-repeat: no-repeat;
1081 | }
1082 | 
1083 | .choose-container {
1084 |   display: flex;
1085 |   flex-direction: column;
1086 | }
1087 | .choose-container__img {
1088 |   width: 90%;
1089 |   height: auto;
1090 |   margin: 0 auto;
1091 | }
1092 | @media (max-width: 550px) {
1093 |   .choose-container__img {
1094 |     width: 100%;
1095 |   }
1096 | }
1097 | 
1098 | .text-container {
1099 |   display: flex;
1100 |   justify-content: space-around;
1101 |   margin-top: 3rem;
1102 |   width: 100%;
1103 | }
1104 | @media (max-width: 1000px) {
1105 |   .text-container {
1106 |     flex-direction: column;
1107 |     align-items: center;
1108 |     text-align: center;
1109 |     gap: 5.5rem;
1110 |   }
1111 | }
1112 | .text-container__left {
1113 |   text-align: left;
1114 |   display: flex;
1115 |   flex-direction: column;
1116 |   max-width: 50rem;
1117 |   color: #010103;
1118 | }
1119 | @media (max-width: 1000px) {
1120 |   .text-container__left {
1121 |     align-items: center;
1122 |     text-align: center;
1123 |   }
1124 | }
1125 | .text-container__left h4 {
1126 |   font-size: 2.2rem;
1127 |   margin-bottom: 0.7rem;
1128 |   font-weight: 600;
1129 |   font-family: "Rubik", sans-serif;
1130 | }
1131 | .text-container__left h2 {
1132 |   font-size: 4.2rem;
1133 |   line-height: 1.2;
1134 |   margin-bottom: 2rem;
1135 | }
1136 | .text-container__left p {
1137 |   font-size: 1.6rem;
1138 |   font-family: "Rubik", sans-serif;
1139 |   line-height: 1.5;
1140 |   color: #706f7b;
1141 |   margin-bottom: 3.3rem;
1142 | }
1143 | .text-container__left a {
1144 |   text-decoration: none;
1145 |   color: white;
1146 |   font-weight: 700;
1147 |   background-color: #ff4d30;
1148 |   padding: 1.5rem 2.5rem;
1149 |   border-radius: 0.3rem;
1150 |   box-shadow: 0 10px 15px 0 rgba(255, 83, 48, 0.35);
1151 |   transition: all 0.3s;
1152 |   border: 2px solid #ff4d30;
1153 |   font-size: 1.6rem;
1154 |   width: -moz-fit-content;
1155 |   width: fit-content;
1156 | }
1157 | .text-container__left a:hover {
1158 |   box-shadow: 0 10px 15px 0 rgba(255, 83, 48, 0.6);
1159 |   background-color: #fa4226;
1160 | }
1161 | .text-container__right {
1162 |   display: flex;
1163 |   flex-direction: column;
1164 |   gap: 4.5rem;
1165 |   max-width: 44rem;
1166 | }
1167 | .text-container__right__box {
1168 |   display: flex;
1169 | }
1170 | @media (max-width: 550px) {
1171 |   .text-container__right__box {
1172 |     flex-direction: column;
1173 |     align-items: center;
1174 |   }
1175 | }
1176 | .text-container__right__box img {
1177 |   width: 11rem;
1178 |   height: 11rem;
1179 |   margin-right: 1.1rem;
1180 | }
1181 | .text-container__right__box__text {
1182 |   display: flex;
1183 |   flex-direction: column;
1184 |   gap: 1rem;
1185 |   justify-content: center;
1186 | }
1187 | .text-container__right__box__text h4 {
1188 |   font-size: 2.4rem;
1189 | }
1190 | .text-container__right__box__text p {
1191 |   font-size: 1.6rem;
1192 |   color: #706f7b;
1193 |   font-family: "Rubik", sans-serif;
1194 |   line-height: 1.3;
1195 | }
1196 | 
1197 | .testimonials-section {
1198 |   background-color: #f8f8f8;
1199 |   padding: 10rem 0;
1200 |   color: #010103;
1201 | }
1202 | 
1203 | .testimonials-content {
1204 |   display: flex;
1205 |   flex-direction: column;
1206 | }
1207 | .testimonials-content__title {
1208 |   display: flex;
1209 |   flex-direction: column;
1210 |   margin: 0 auto;
1211 |   text-align: center;
1212 |   max-width: 70rem;
1213 |   margin-bottom: 5rem;
1214 | }
1215 | .testimonials-content__title h4 {
1216 |   font-size: 2.2rem;
1217 |   font-family: "Rubik", sans-serif;
1218 |   font-weight: 500;
1219 | }
1220 | .testimonials-content__title h2 {
1221 |   font-size: 4.2rem;
1222 |   margin-bottom: 1.4rem;
1223 | }
1224 | .testimonials-content__title p {
1225 |   font-size: 1.6rem;
1226 |   font-family: "Rubik", sans-serif;
1227 |   color: #706f7b;
1228 |   line-height: 1.4;
1229 | }
1230 | 
1231 | .all-testimonials {
1232 |   display: flex;
1233 |   gap: 3rem;
1234 |   width: 100%;
1235 |   justify-content: center;
1236 |   padding: 3rem;
1237 | }
1238 | @media (max-width: 1000px) {
1239 |   .all-testimonials {
1240 |     padding: 0;
1241 |   }
1242 | }
1243 | .all-testimonials__box {
1244 |   background-color: white;
1245 |   box-shadow: 0 20px 40px 0 rgba(0, 0, 0, 0.08);
1246 |   width: 54rem;
1247 |   padding: 5.5rem;
1248 |   position: relative;
1249 | }
1250 | @media (max-width: 1000px) {
1251 |   .all-testimonials__box {
1252 |     padding: 5rem 3rem;
1253 |   }
1254 | }
1255 | .all-testimonials__box p {
1256 |   font-size: 2.2rem;
1257 |   font-weight: 500;
1258 | }
1259 | .all-testimonials__box__name {
1260 |   display: flex;
1261 | }
1262 | .all-testimonials__box__name__profile {
1263 |   display: flex;
1264 |   gap: 2rem;
1265 |   align-items: center;
1266 |   margin-top: 3rem;
1267 | }
1268 | .all-testimonials__box__name__profile img {
1269 |   width: 7rem;
1270 |   height: 7rem;
1271 |   border-radius: 50%;
1272 | }
1273 | .all-testimonials__box__name__profile h4 {
1274 |   font-size: 1.8rem;
1275 | }
1276 | .all-testimonials__box__name__profile p {
1277 |   font-size: 1.6rem;
1278 |   font-family: "Rubik", sans-serif;
1279 |   font-weight: 400;
1280 | }
1281 | 
1282 | .quotes-icon {
1283 |   font-size: 6.2rem;
1284 |   color: #ff4d30;
1285 |   position: absolute;
1286 |   bottom: 33px;
1287 |   right: 60px;
1288 | }
1289 | @media (max-width: 470px) {
1290 |   .quotes-icon {
1291 |     display: none;
1292 |   }
1293 | }
1294 | 
1295 | @media (max-width: 900px) {
1296 |   .box-2 {
1297 |     display: none;
1298 |   }
1299 | }
1300 | 
1301 | .faq-section {
1302 |   background-image: url("/src/images/faq/car.png");
1303 |   padding: 10rem 0;
1304 |   background-size: auto;
1305 |   background-repeat: no-repeat;
1306 |   background-position: 0 70%;
1307 | }
1308 | 
1309 | .faq-content {
1310 |   display: flex;
1311 |   flex-direction: column;
1312 |   color: #010103;
1313 | }
1314 | .faq-content__title {
1315 |   display: flex;
1316 |   flex-direction: column;
1317 |   margin: 0 auto;
1318 |   text-align: center;
1319 |   max-width: 80rem;
1320 |   line-height: 1.5;
1321 | }
1322 | .faq-content__title h5 {
1323 |   font-size: 2.2rem;
1324 | }
1325 | .faq-content__title h2 {
1326 |   font-size: 4.2rem;
1327 |   margin-bottom: 1.7rem;
1328 | }
1329 | .faq-content__title p {
1330 |   font-size: 1.6rem;
1331 |   color: #706f7b;
1332 | }
1333 | 
1334 | .all-questions {
1335 |   display: flex;
1336 |   flex-direction: column;
1337 |   align-items: center;
1338 |   margin-top: 7rem;
1339 | }
1340 | 
1341 | .faq-box {
1342 |   display: flex;
1343 |   flex-direction: column;
1344 |   color: #010103;
1345 |   background-color: white;
1346 |   box-shadow: 0 10px 15px 0 rgba(0, 0, 0, 0.1);
1347 |   width: 80rem;
1348 |   cursor: pointer;
1349 | }
1350 | @media (max-width: 850px) {
1351 |   .faq-box {
1352 |     width: 100%;
1353 |   }
1354 | }
1355 | .faq-box__question {
1356 |   display: flex;
1357 |   justify-content: space-between;
1358 |   align-items: center;
1359 |   box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1);
1360 |   padding: 1.8rem 4.5rem;
1361 |   transition: 0.15s ease;
1362 | }
1363 | .faq-box__question p {
1364 |   font-size: 1.8rem;
1365 |   font-weight: 500;
1366 | }
1367 | .faq-box__question i {
1368 |   font-size: 2rem;
1369 | }
1370 | .faq-box__answer {
1371 |   font-size: 1.6rem;
1372 |   font-family: "Rubik", sans-serif;
1373 |   color: #706f7b;
1374 |   line-height: 1.7;
1375 |   max-height: 0;
1376 |   overflow: hidden;
1377 |   transition: 0.4s ease;
1378 |   padding: 0 4.5rem;
1379 | }
1380 | 
1381 | .active-answer {
1382 |   max-height: 20rem;
1383 |   padding: 2.8rem 4.5rem;
1384 |   transition: 0.4s ease;
1385 | }
1386 | @media (max-width: 550px) {
1387 |   .active-answer {
1388 |     max-height: 30rem;
1389 |   }
1390 | }
1391 | @media (max-width: 420px) {
1392 |   .active-answer {
1393 |     max-height: 55rem;
1394 |   }
1395 | }
1396 | 
1397 | .active-question {
1398 |   background-color: #ff4d30;
1399 |   color: white;
1400 |   box-shadow: 0 10px 15px 0 rgba(255, 83, 48, 0.35);
1401 | }
1402 | 
1403 | .download-section {
1404 |   background-image: url("/src/images/banners/bg02.png");
1405 |   background-color: #f8f8f8;
1406 |   background-position: top center;
1407 |   background-repeat: no-repeat;
1408 |   background-size: cover;
1409 |   width: 100%;
1410 |   height: auto;
1411 |   padding: 10rem 0;
1412 | }
1413 | @media (max-width: 700px) {
1414 |   .download-section {
1415 |     background-image: none;
1416 |   }
1417 | }
1418 | 
1419 | .download-text {
1420 |   display: flex;
1421 |   flex-direction: column;
1422 |   gap: 2rem;
1423 |   max-width: 55rem;
1424 |   text-align: left;
1425 | }
1426 | @media (max-width: 700px) {
1427 |   .download-text {
1428 |     text-align: center;
1429 |     margin: 0 auto;
1430 |   }
1431 | }
1432 | .download-text h2 {
1433 |   font-size: 4.2rem;
1434 |   color: #010103;
1435 | }
1436 | .download-text p {
1437 |   font-size: 1.6rem;
1438 |   color: #706f7b;
1439 |   font-family: "Rubik", sans-serif;
1440 |   line-height: 1.5;
1441 | }
1442 | .download-text__btns {
1443 |   display: flex;
1444 |   gap: 3rem;
1445 |   margin-top: 2rem;
1446 | }
1447 | @media (max-width: 700px) {
1448 |   .download-text__btns {
1449 |     justify-content: center;
1450 |   }
1451 | }
1452 | @media (max-width: 550px) {
1453 |   .download-text__btns {
1454 |     flex-direction: column;
1455 |     align-items: center;
1456 |   }
1457 | }
1458 | .download-text__btns img {
1459 |   width: 40%;
1460 |   cursor: pointer;
1461 | }
1462 | @media (max-width: 550px) {
1463 |   .download-text__btns img {
1464 |     width: 22rem;
1465 |   }
1466 | }
1467 | 
1468 | footer {
1469 |   background-color: #ffffff;
1470 |   padding: 10rem 0;
1471 | }
1472 | 
1473 | .footer-content {
1474 |   display: grid;
1475 |   color: #010103;
1476 |   grid-template-columns: 27fr 21fr 21fr 21fr;
1477 |   gap: 8rem;
1478 |   justify-content: center;
1479 |   text-align: left;
1480 |   color: #010103;
1481 | }
1482 | @media (max-width: 1100px) {
1483 |   .footer-content {
1484 |     grid-template-columns: 1fr 1fr;
1485 |   }
1486 | }
1487 | @media (max-width: 650px) {
1488 |   .footer-content {
1489 |     grid-template-columns: 1fr;
1490 |   }
1491 | }
1492 | .footer-content__1 {
1493 |   list-style: none;
1494 | }
1495 | @media (max-width: 650px) {
1496 |   .footer-content__1 {
1497 |     text-align: center;
1498 |   }
1499 | }
1500 | .footer-content__1 li a {
1501 |   text-decoration: none;
1502 |   color: #010103;
1503 |   transition: all 0.2s;
1504 | }
1505 | .footer-content__1 li a:hover {
1506 |   color: #ff4d30;
1507 | }
1508 | .footer-content__1 li:nth-child(1) {
1509 |   font-size: 2.4rem;
1510 |   margin-bottom: 1.5rem;
1511 | }
1512 | .footer-content__1 li:nth-child(1) span {
1513 |   font-weight: 700;
1514 | }
1515 | .footer-content__1 li:nth-child(2) {
1516 |   font-size: 1.6rem;
1517 |   color: #706f7b;
1518 |   line-height: 1.7;
1519 |   margin-bottom: 3rem;
1520 | }
1521 | .footer-content__1 li:nth-child(3), .footer-content__1 li:nth-child(4) {
1522 |   font-size: 1.6rem;
1523 |   font-family: "Rubik", sans-serif;
1524 |   font-weight: 500;
1525 |   margin-bottom: 1rem;
1526 | }
1527 | .footer-content__2 {
1528 |   list-style: none;
1529 | }
1530 | @media (max-width: 650px) {
1531 |   .footer-content__2 {
1532 |     text-align: center;
1533 |   }
1534 | }
1535 | .footer-content__2 a {
1536 |   text-decoration: none;
1537 |   color: #010103;
1538 |   transition: all 0.2s;
1539 | }
1540 | .footer-content__2 a:hover {
1541 |   color: #ff4d30;
1542 | }
1543 | .footer-content__2 li {
1544 |   font-size: 1.6rem;
1545 |   margin-bottom: 1rem;
1546 | }
1547 | .footer-content__2 li:nth-child(1) {
1548 |   font-size: 2.4rem;
1549 |   font-weight: 700;
1550 |   text-transform: uppercase;
1551 |   font-family: "Poppins", sans-serif;
1552 |   cursor: auto;
1553 | }
1554 | .footer-content__2 input {
1555 |   font-family: "Rubik", sans-serif;
1556 |   font-size: 14px;
1557 |   font-weight: 400;
1558 |   line-height: 26px;
1559 |   background-color: #ececec;
1560 |   border-width: 1px;
1561 |   border-color: transparent;
1562 |   padding: 10px 60px;
1563 |   outline: none;
1564 |   margin-top: 1rem;
1565 | }
1566 | @media (max-width: 1100px) {
1567 |   .footer-content__2 input {
1568 |     width: 100%;
1569 |   }
1570 | }
1571 | 
1572 | .submit-email {
1573 |   text-decoration: none;
1574 |   color: white;
1575 |   font-weight: 700;
1576 |   background-color: #ff4d30;
1577 |   padding: 1.5rem 2.5rem;
1578 |   border-radius: 0.3rem;
1579 |   box-shadow: 0 10px 15px 0 rgba(255, 83, 48, 0.25);
1580 |   transition: all 0.3s;
1581 |   border: 2px solid #ff4d30;
1582 |   font-size: 1.6rem;
1583 |   width: -moz-fit-content;
1584 |   width: fit-content;
1585 |   cursor: pointer;
1586 |   width: 100%;
1587 | }
1588 | .submit-email:hover {
1589 |   box-shadow: 0 10px 15px 0 rgba(255, 83, 48, 0.4);
1590 |   background-color: #fa4226;
1591 | }
1592 | 
1593 | .hero-pages {
1594 |   width: 100%;
1595 |   height: 41rem;
1596 |   background-image: url("/src/images/hero/heroes-bg.png");
1597 |   background-position: center;
1598 |   background-repeat: no-repeat;
1599 |   background-size: cover;
1600 |   position: relative;
1601 | }
1602 | .hero-pages__overlay {
1603 |   width: 100%;
1604 |   height: 100%;
1605 |   position: absolute;
1606 |   top: 0;
1607 |   right: 0;
1608 |   background-color: rgba(255, 255, 255, 0.92);
1609 | }
1610 | .hero-pages__text {
1611 |   display: flex;
1612 |   flex-direction: column;
1613 |   z-index: 3;
1614 |   position: relative;
1615 |   width: 100%;
1616 |   height: 41rem;
1617 |   justify-content: center;
1618 |   color: #010103;
1619 | }
1620 | .hero-pages__text h3 {
1621 |   font-size: 3.6rem;
1622 |   margin-bottom: 0.5rem;
1623 | }
1624 | .hero-pages__text p {
1625 |   font-size: 1.6rem;
1626 |   font-weight: 600;
1627 | }
1628 | .hero-pages__text p a {
1629 |   color: #010103;
1630 |   text-decoration: none;
1631 |   transition: all 0.2s;
1632 | }
1633 | .hero-pages__text p a:hover {
1634 |   color: #ff4d30;
1635 | }
1636 | 
1637 | .about-main {
1638 |   margin: 10rem auto;
1639 |   display: flex;
1640 |   gap: 5rem;
1641 |   max-width: 90rem;
1642 |   align-items: center;
1643 | }
1644 | @media (max-width: 960px) {
1645 |   .about-main {
1646 |     display: grid;
1647 |     grid-template-columns: 1fr;
1648 |     text-align: center;
1649 |     max-width: 49rem;
1650 |   }
1651 | }
1652 | @media (max-width: 520px) {
1653 |   .about-main {
1654 |     max-width: 100%;
1655 |   }
1656 | }
1657 | .about-main__img {
1658 |   width: 43rem;
1659 |   height: 43rem;
1660 | }
1661 | @media (max-width: 960px) {
1662 |   .about-main__img {
1663 |     margin: 0 auto;
1664 |   }
1665 | }
1666 | @media (max-width: 520px) {
1667 |   .about-main__img {
1668 |     width: 100%;
1669 |     height: auto;
1670 |   }
1671 | }
1672 | .about-main__text {
1673 |   color: #010103;
1674 |   display: flex;
1675 |   flex-direction: column;
1676 | }
1677 | .about-main__text h3 {
1678 |   font-size: 2.2rem;
1679 |   font-family: "Rubik", sans-serif;
1680 |   font-weight: 500;
1681 |   margin-bottom: 1rem;
1682 | }
1683 | .about-main__text h2 {
1684 |   font-size: 4.2rem;
1685 |   line-height: 1.2;
1686 | }
1687 | .about-main__text p {
1688 |   font-size: 1.6rem;
1689 |   color: #706f7b;
1690 |   font-family: "Rubik", sans-serif;
1691 |   line-height: 1.5;
1692 |   margin-top: 2rem;
1693 |   margin-bottom: 4rem;
1694 | }
1695 | .about-main__text__icons {
1696 |   display: grid;
1697 |   grid-template-columns: 1fr 1fr 1fr;
1698 |   gap: 4rem;
1699 | }
1700 | @media (max-width: 520px) {
1701 |   .about-main__text__icons {
1702 |     grid-template-columns: 1fr;
1703 |     margin: 0 auto;
1704 |     gap: 0;
1705 |   }
1706 |   .about-main__text__icons p {
1707 |     margin-top: 0;
1708 |   }
1709 | }
1710 | .about-main__text__icons__box {
1711 |   display: flex;
1712 |   flex-direction: column;
1713 | }
1714 | @media (max-width: 520px) {
1715 |   .about-main__text__icons__box {
1716 |     align-items: center;
1717 |   }
1718 | }
1719 | .about-main__text__icons__box .last-fk {
1720 |   width: 5rem;
1721 | }
1722 | .about-main__text__icons__box img {
1723 |   width: 7rem;
1724 | }
1725 | .about-main__text__icons__box span {
1726 |   display: flex;
1727 |   align-items: center;
1728 |   gap: 1rem;
1729 | }
1730 | @media (max-width: 520px) {
1731 |   .about-main__text__icons__box span {
1732 |     text-align: center;
1733 |     flex-direction: column;
1734 |   }
1735 | }
1736 | .about-main__text__icons__box span h4 {
1737 |   font-size: 4.6rem;
1738 | }
1739 | 
1740 | .book-banner {
1741 |   display: flex;
1742 |   width: 100%;
1743 |   height: 20rem;
1744 |   background-image: url("/src/images/banners/book-banner.png");
1745 |   position: relative;
1746 |   margin-top: 7rem;
1747 | }
1748 | @media (max-width: 750px) {
1749 |   .book-banner {
1750 |     height: -moz-fit-content;
1751 |     height: fit-content;
1752 |     padding: 1rem 0;
1753 |   }
1754 | }
1755 | .book-banner__overlay {
1756 |   background-color: #2d2d2d;
1757 |   opacity: 0.89;
1758 |   width: 100%;
1759 |   height: 100%;
1760 |   position: absolute;
1761 |   top: 0;
1762 |   right: 0;
1763 | }
1764 | 
1765 | .text-content {
1766 |   color: white;
1767 |   z-index: 5;
1768 |   position: relative;
1769 |   width: 100%;
1770 |   height: 20rem;
1771 |   display: flex;
1772 |   align-items: center;
1773 |   gap: 5rem;
1774 | }
1775 | @media (max-width: 750px) {
1776 |   .text-content {
1777 |     flex-direction: column;
1778 |     justify-content: center;
1779 |     align-items: center;
1780 |     gap: 1rem;
1781 |     text-align: center;
1782 |   }
1783 | }
1784 | .text-content h2 {
1785 |   font-size: 3.2rem;
1786 | }
1787 | .text-content span {
1788 |   display: flex;
1789 |   font-size: 2.7rem;
1790 |   gap: 1rem;
1791 |   align-items: center;
1792 |   color: #ff4d30;
1793 |   white-space: nowrap;
1794 | }
1795 | 
1796 | .models-div {
1797 |   display: grid;
1798 |   grid-template-columns: 1fr 1fr 1fr;
1799 |   grid-template-rows: auto;
1800 |   gap: 3rem;
1801 |   align-items: center;
1802 |   text-align: center;
1803 |   padding: 10rem 0;
1804 |   width: 110rem;
1805 |   margin: 0 auto;
1806 | }
1807 | @media (max-width: 1150px) {
1808 |   .models-div {
1809 |     grid-template-columns: 1fr 1fr;
1810 |     width: -moz-fit-content;
1811 |     width: fit-content;
1812 |   }
1813 | }
1814 | @media (max-width: 800px) {
1815 |   .models-div {
1816 |     grid-template-columns: 1fr;
1817 |     width: -moz-fit-content;
1818 |     width: fit-content;
1819 |   }
1820 | }
1821 | .models-div__box {
1822 |   border: 1px solid #d5d5d5;
1823 |   border-radius: 0.3rem;
1824 |   display: flex;
1825 |   width: 35rem;
1826 |   flex-direction: column;
1827 | }
1828 | @media (max-width: 400px) {
1829 |   .models-div__box {
1830 |     grid-template-columns: 1fr;
1831 |     width: 100%;
1832 |   }
1833 | }
1834 | .models-div__box__img {
1835 |   width: 100%;
1836 |   height: auto;
1837 |   border-radius: 0.3rem;
1838 | }
1839 | .models-div__box__img img {
1840 |   width: 100%;
1841 |   height: 27rem;
1842 | }
1843 | .models-div__box__descr {
1844 |   padding: 2rem 3rem;
1845 |   display: flex;
1846 |   flex-direction: column;
1847 |   color: #010103;
1848 | }
1849 | .models-div__box__descr__name-price {
1850 |   display: flex;
1851 |   justify-content: space-between;
1852 |   align-items: center;
1853 | }
1854 | .models-div__box__descr__name-price__name {
1855 |   display: flex;
1856 |   flex-direction: column;
1857 |   text-align: left;
1858 |   gap: 0.5rem;
1859 | }
1860 | .models-div__box__descr__name-price__name p {
1861 |   font-size: 2.4rem;
1862 |   font-weight: 700;
1863 | }
1864 | .models-div__box__descr__name-price__name span {
1865 |   display: flex;
1866 |   gap: 0.4rem;
1867 | }
1868 | .models-div__box__descr__name-price__name span i {
1869 |   font-size: 1.4rem;
1870 |   color: #ffc933;
1871 | }
1872 | .models-div__box__descr__name-price__price {
1873 |   display: flex;
1874 |   flex-direction: column;
1875 |   text-align: right;
1876 | }
1877 | .models-div__box__descr__name-price__price h4 {
1878 |   font-size: 2.8rem;
1879 | }
1880 | .models-div__box__descr__name-price__price p {
1881 |   font-size: 1.6rem;
1882 | }
1883 | .models-div__box__descr__name-price__details {
1884 |   display: grid;
1885 |   grid-template-columns: 1fr 1fr;
1886 |   row-gap: 2rem;
1887 |   -moz-column-gap: 7rem;
1888 |        column-gap: 7rem;
1889 |   margin-top: 2.5rem;
1890 |   margin: 2rem auto;
1891 |   padding-bottom: 2.5rem;
1892 |   border-bottom: 1px solid #c6c6c6;
1893 | }
1894 | .models-div__box__descr__name-price__details span {
1895 |   font-size: 1.8rem;
1896 |   font-weight: 500;
1897 |   color: #777777;
1898 |   text-align: left;
1899 | }
1900 | .models-div__box__descr__name-price__details span i {
1901 |   color: #010103;
1902 | }
1903 | .models-div__box__descr__name-price__btn {
1904 |   background-color: #ff4d30;
1905 |   padding: 1.8rem 3rem;
1906 |   border-radius: 0.3rem;
1907 |   box-shadow: 0 10px 15px 0 rgba(255, 83, 48, 0.35);
1908 |   transition: all 0.3s;
1909 |   border: 2px solid #ff4d30;
1910 |   font-size: 1.8rem;
1911 |   cursor: pointer;
1912 | }
1913 | .models-div__box__descr__name-price__btn:hover {
1914 |   box-shadow: 0 10px 15px 0 rgba(255, 83, 48, 0.6);
1915 |   background-color: #fa4226;
1916 | }
1917 | .models-div__box__descr__name-price__btn a {
1918 |   text-decoration: none;
1919 |   color: white;
1920 |   font-weight: 700;
1921 | }
1922 | 
1923 | .team-container {
1924 |   display: grid;
1925 |   grid-template-columns: 1fr 1fr 1fr;
1926 |   grid-template-rows: auto;
1927 |   gap: 4rem;
1928 |   align-items: center;
1929 |   text-align: center;
1930 |   padding: 10rem 2rem;
1931 |   width: 110rem;
1932 |   margin: 0 auto;
1933 | }
1934 | @media (max-width: 1150px) {
1935 |   .team-container {
1936 |     grid-template-columns: 1fr 1fr;
1937 |     width: -moz-fit-content;
1938 |     width: fit-content;
1939 |   }
1940 | }
1941 | @media (max-width: 800px) {
1942 |   .team-container {
1943 |     grid-template-columns: 1fr;
1944 |     width: -moz-fit-content;
1945 |     width: fit-content;
1946 |   }
1947 | }
1948 | .team-container__box {
1949 |   width: 33rem;
1950 |   background-color: white;
1951 |   box-shadow: 0px 20px 10px 0px rgba(0, 0, 0, 0.08);
1952 | }
1953 | @media (max-width: 400px) {
1954 |   .team-container__box {
1955 |     width: 100%;
1956 |   }
1957 | }
1958 | .team-container__box__img-div {
1959 |   width: 100%;
1960 |   height: auto;
1961 |   background-color: #f6f6f6;
1962 | }
1963 | .team-container__box__img-div img {
1964 |   width: 100%;
1965 | }
1966 | .team-container__box__descr {
1967 |   color: #010103;
1968 |   padding: 3rem;
1969 | }
1970 | .team-container__box__descr h3 {
1971 |   font-size: 2.2rem;
1972 | }
1973 | .team-container__box__descr p {
1974 |   font-size: 1.6rem;
1975 |   font-weight: 500;
1976 |   color: #777777;
1977 | }
1978 | 
1979 | .contact-div {
1980 |   display: grid;
1981 |   grid-template-columns: 1fr 1fr;
1982 |   gap: 3rem;
1983 |   margin: 0 auto;
1984 |   color: #010103;
1985 |   padding: 10rem 2rem;
1986 |   background-image: url("/src/images/banners/bg-contact.png");
1987 |   background-size: auto;
1988 |   background-position: center center;
1989 |   background-repeat: no-repeat;
1990 | }
1991 | @media (max-width: 950px) {
1992 |   .contact-div {
1993 |     grid-template-columns: 1fr;
1994 |     text-align: center;
1995 |   }
1996 | }
1997 | .contact-div__text {
1998 |   display: flex;
1999 |   flex-direction: column;
2000 |   gap: 1rem;
2001 |   max-width: 41rem;
2002 | }
2003 | @media (max-width: 950px) {
2004 |   .contact-div__text {
2005 |     margin: 0 auto;
2006 |     margin-bottom: 2rem;
2007 |   }
2008 | }
2009 | .contact-div__text h2 {
2010 |   font-size: 4.2rem;
2011 |   line-height: 1.3;
2012 |   margin-bottom: 2rem;
2013 | }
2014 | .contact-div__text p {
2015 |   font-size: 1.6rem;
2016 |   font-family: "Rubik", sans-serif;
2017 |   color: #706f7b;
2018 |   line-height: 1.6;
2019 |   margin-bottom: 2rem;
2020 | }
2021 | .contact-div__text a {
2022 |   text-decoration: none;
2023 |   color: #010103;
2024 |   font-size: 1.6rem;
2025 |   font-weight: 500;
2026 |   transition: all 0.2s;
2027 |   margin-bottom: 0.5rem;
2028 | }
2029 | .contact-div__text a:hover {
2030 |   color: #ff4d30;
2031 | }
2032 | .contact-div__form {
2033 |   display: flex;
2034 |   flex-direction: column;
2035 | }
2036 | .contact-div__form form {
2037 |   display: flex;
2038 |   flex-direction: column;
2039 | }
2040 | .contact-div__form form label {
2041 |   font-size: 1.6rem;
2042 |   font-weight: 600;
2043 |   margin-bottom: 1rem;
2044 | }
2045 | .contact-div__form form label b {
2046 |   color: #ff4d30;
2047 | }
2048 | .contact-div__form form input {
2049 |   background-color: #f2f2f2;
2050 |   padding: 19px 30px 19px 30px;
2051 |   font-size: 1.6rem;
2052 |   border: none;
2053 |   outline: none;
2054 |   margin-bottom: 2.3rem;
2055 | }
2056 | .contact-div__form form textarea {
2057 |   background-color: #f2f2f2;
2058 |   height: 18rem;
2059 |   padding: 19px 30px 19px 30px;
2060 |   font-size: 1.6rem;
2061 |   border: none;
2062 |   outline: none;
2063 |   margin-bottom: 2.5rem;
2064 | }
2065 | .contact-div__form form button {
2066 |   background-color: #ff4d30;
2067 |   padding: 1.8rem 3rem;
2068 |   border-radius: 0.3rem;
2069 |   box-shadow: 0 10px 15px 0 rgba(255, 83, 48, 0.35);
2070 |   transition: all 0.3s;
2071 |   border: 2px solid #ff4d30;
2072 |   color: white;
2073 |   font-size: 1.8rem;
2074 |   font-weight: 600;
2075 |   cursor: pointer;
2076 | }
2077 | .contact-div__form form button:hover {
2078 |   box-shadow: 0 10px 15px 0 rgba(255, 83, 48, 0.6);
2079 |   background-color: #fa4226;
2080 | }/*# sourceMappingURL=styles.css.map */


--------------------------------------------------------------------------------