Initial Commits

src/Components/Home/Details/Details.css

@@ -0,0 +1,79 @@
+#Detail {
+  padding: 80px 10px;
+  background-image: url("../../../Assets/details_bg.png");
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+.details {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.detail_container {
+  display: flex;
+  justify-content: space-between;
+  gap: 100px;
+  padding: 10px 130px;
+}
+
+.detail_container_left {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  flex-basis: 50%;
+}
+
+.detail_container_left h4 {
+  font-size: 23px;
+  font-weight: 600;
+}
+
+.detail_container_left h2 {
+  font-size: 45px;
+  font-weight: 700;
+  line-height: 1.2;
+}
+
+.detail_container_left p {
+    color: var(--text-color);
+}
+
+.Details_button {
+  padding: 15px 10px;
+  width: 30%;
+  color: white;
+  background-color: var(--main-color);
+  border: none;
+  font-size: 17px;
+  font-weight: 700;
+  border-radius: 5px;
+}
+
+.detail_container_right {
+  flex-basis: 50%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.detail_container_right_box {
+  display: flex;
+  gap: 10px;
+}
+
+.detail_container_right_box img {
+  width: 100px;
+  height: 100px;
+}
+
+.detail_container_right_box_text h4{
+    font-size: 25px;
+}
+
+.detail_container_right_box_text p{
+    color: var(--text-color);
+}
+
+

src/Components/Home/Details/Details.jsx

@@ -0,0 +1,69 @@
+import React from "react";
+import "./Details.css";
+import detailimg from "../../../Assets/Details_img.png";
+import detail1 from "../../../Assets/Details_1.png";
+import detail2 from "../../../Assets/Details_2.png";
+import detail3 from "../../../Assets/Details_3.png";
+
+const Details = () => {
+  return (
+    <section id="Detail">
+      <div className="details">
+        <div className="details_img">
+          <img src={detailimg} alt="" />
+        </div>
+
+        <div className="detail_container">
+          <div className="detail_container_left">
+            <h4>Why Choose Us</h4>
+            <h2>Best valued deals you will ever find</h2>
+            <p>
+              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.
+            </p>
+            <button className="Details_button">Find Details</button>
+          </div>
+
+          <div className="detail_container_right">
+            <div className="detail_container_right_box">
+              <img src={detail1} alt="" />
+              <div className="detail_container_right_box_text">
+                <h4>Cross Country Drive</h4>
+                <p>
+                  Take your driving experience to the next level with our
+                  top-notch vehicles for your cross-country adventures.
+                </p>
+              </div>
+            </div>
+            <div className="detail_container_right_box">
+              <img src={detail2} alt="" />
+              <div className="detail_container_right_box_text">
+                <h4>All Inclusive Pricing</h4>
+                <p>
+                  Get everything you need in one convenient, transparent price
+                  with our all-inclusive pricing policy.
+                </p>
+              </div>
+            </div>
+            <div className="detail_container_right_box">
+              <img src={detail3} alt="" />
+              <div className="detail_container_right_box_text">
+                <h4>No Hidden Charges</h4>
+                <p>
+                  Enjoy peace of mind with our no hidden charges policy. We
+                  believe in transparent and honest pricing.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Details;

src/Pages/Home.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import Banner from '../Components/Home/Banner/Banner'
+import Details from '../Components/Home/Details/Details'
 import Filterbox from '../Components/Home/Filterbox/Filterbox'
 import Hero from '../Components/Home/Hero/Hero'
 import Service from '../Components/Home/Service/Service'
@@ -11,6 +12,7 @@ const Home = () => {
         <Filterbox/>
         <Service/>
         <Banner/>
+        <Details/>
     </div>
   )
 }