Initial Commit

src/Components/Home/Service/Service.css

@@ -0,0 +1,44 @@
+#service{
+    padding: 100px 80px;
+}
+
+.service_title{
+    text-align: center;
+}
+
+.service_title h3{
+    font-size: 23px;
+    font-weight: 500;
+}
+
+.service_title h2{
+    font-size: 45px;
+}
+
+.service_box{
+    display: flex;
+    padding: 80px 10px;
+}
+
+.service_boxes{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    padding: 10px 60px;   
+    gap: 7px;
+}
+
+.service_boxes h3{
+    font-size: 25px;
+}
+
+.service_boxes p{
+    color: var(--text-color);
+}
+
+.service_boxes img {
+    height: 150px;
+    width: 150px;
+  }

src/Components/Home/Service/Service.jsx

@@ -0,0 +1,53 @@
+import React from "react";
+import "./Service.css";
+import service1 from "../../../Assets/service1.png";
+import service2 from "../../../Assets/service2.png";
+import service3 from "../../../Assets/service3.png";
+
+const Service = () => {
+  return (
+    <section id="service">
+      <div className="service_title">
+        <h3>Plan your trip now</h3>
+        <h2>Quick & easy car rental</h2>
+      </div>
+
+      <div className="service_box">
+        {/* Service 1 */}
+
+        <div className="service_boxes">
+          <img src={service1} alt="" />
+          <h3>Select Car</h3>
+          <p>
+            We offers a big range of vehicles for all your driving needs. We
+            have the perfect car to meet your needs
+          </p>
+        </div>
+
+        {/* Service 2 */}
+
+        <div className="service_boxes">
+          <img src={service2} alt="" />
+          <h3>Contact Operator</h3>
+          <p>
+            Our knowledgeable and friendly operators are always ready to help
+            with any questions or concerns
+          </p>
+        </div>
+
+        {/* Service 3 */}
+
+        <div className="service_boxes">
+          <img src={service3} alt="" />
+          <h3>Let's Drive</h3>
+          <p>
+            Whether you're hitting the open road, we've got you covered with our
+            wide range of cars
+          </p>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Service;

src/Pages/Home.jsx

@@ -1,12 +1,14 @@
 import React from 'react'
 import Filterbox from '../Components/Home/Filterbox/Filterbox'
 import Hero from '../Components/Home/Hero/Hero'
+import Service from '../Components/Home/Service/Service'
 
 const Home = () => {
   return (
     <div>
         <Hero/>
         <Filterbox/>
+        <Service/>
     </div>
   )
 }