Inital Commmit

src/Components/Footer/Footer.css

@@ -4,6 +4,8 @@
     padding: 20px 75px ;
 }
 
+/* section 1 */
+
 .section{
     width: 20%;
 }
@@ -35,6 +37,7 @@
     margin-bottom: 6px;
 }
 
+
 /* Section 2-3 */
 
 .section_content li:first-child {

src/Components/Home/Filterbox/Filterbox.jsx

@@ -1,9 +1,94 @@
-import React from 'react'
-
+import React from "react";
+import { AiFillCar } from "react-icons/ai";
+import { HiLocationMarker } from "react-icons/hi";
+import { BsFillCalendarWeekFill } from "react-icons/bs";
+import "./Filterbox.css";
 const Filterbox = () => {
   return (
-    <div>Filterbox</div>
-  )
-}
+    <section id="filterbox">
+      <div className="box">
+        <h2>Book a Car</h2>
+        <form>
+          <div className="filterbox_row">
+            <div className="form_label">
+              <label htmlFor="cartype">
+                <AiFillCar size={20} className="filerbox_icons"/>
+                Select you car type<span>*</span>
+              </label>
+              <select name="cartype" id="">
+                <option value="" disabled selected hidden>Select Your Car Type</option>
+                <option value="Audi">Audi</option>
+                <option value="BMW">BMW</option>
+                <option value="MG">MG</option>
+                <option value="Tata">Tata</option>
+                <option value="Suzuki">Suzuki</option>
+              </select>
+            </div>
+
+            {/* option-2 */}
+
+            <div className="form_label">
+              <label htmlFor="pickup">
+                <HiLocationMarker size={20} className="filerbox_icons"/>
+                Pick Up<span>*</span>
+              </label>
+              <select name="pickup" id="">
+                <option value="" disabled selected hidden>Select Pick Up Location</option>
+                <option value="Bhopal">Bhopal</option>
+                <option value="Mumbai">Mumbai</option>
+                <option value="Pune">Pune</option>
+                <option value="New Delhi">New Delhi</option>
+                <option value="Indore">Indore</option>
+              </select>
+            </div>
+
+            {/* Option-3 */}
+
+            <div className="form_label">
+              <label htmlFor="dropof">
+                <HiLocationMarker size={20} className="filerbox_icons"/>
+                Drop Off<span>*</span>
+              </label>
+              <select name="dropof" id="">
+                <option value="" disabled selected hidden>Select Drop of Location</option>
+                <option value="New Delhi">New Delhi</option>
+                <option value="Bhopal">Bhopal</option>
+                <option value="Pune">Pune</option>
+                <option value="Indore">Indore</option>
+                <option value="Mumbai">Mumbai</option>
+              </select>
+            </div>
+          </div>
+
+          {/* row-2 */}
+
+          <div className="filterbox_row">
+            <div className="form_label">
+              <label htmlFor="cardate">
+                <BsFillCalendarWeekFill size={20} className="filerbox_icons"/>
+                Pick-up<span>*</span>
+              </label>
+              <input type="date" name="cardate" />
+            </div>
+
+            {/* option-2 */}
+
+            <div className="form_label">
+              <label htmlFor="cardate">
+                <BsFillCalendarWeekFill size={20} className="filerbox_icons"/>
+                Drop-off<span>*</span>
+              </label>
+              <input type="date" name="cardate" />
+            </div>
+
+            {/* Option-3 */}
+
+            <input type="submit" value="Search" className="filterbox_button" />
+          </div>
+        </form>
+      </div>
+    </section>
+  );
+};
 
-export default Filterbox
+export default Filterbox;

src/Components/Home/Hero/Hero.css

@@ -0,0 +1,60 @@
+#hero{
+    display: flex;
+    padding: 120px 40px;
+    overflow: hidden;
+    justify-content: center;
+    align-items: center;
+    background-image: url(../../../Assets/herobg.png);
+    background-repeat: no-repeat;
+    background-position: right;
+    /* width: 100%; */
+    /* height: 90vh; */
+    /* gap: 50px; */
+}
+
+.left-content{
+    display: flex;
+    flex-direction: column;
+    width: 35%;
+    gap: 30px;
+}
+
+.left-content h4{
+    font-size: 22px;
+    font-weight: 600;
+}
+
+.left-content h1{
+    font-size: 50px;
+    line-height: 60px;
+}
+
+.left-content p{
+    color: var(--text-color);
+}
+
+.left-content span{
+    color: var(--main-color);
+}
+
+.right-content{
+    width: 60%;
+}
+
+.right-content img{
+    width: 100%;
+}
+
+.button_row{
+    display: flex;
+    gap: 18px;
+}
+
+.button_row button{
+    background-color: var(--main-color);
+    border: none;
+    padding: 15px 45px;
+    font-size: 17px;
+    font-weight: 700;
+    color: #fff;
+}

src/Components/Home/Hero/Hero.jsx

@@ -1,8 +1,23 @@
 import React from 'react'
+import './Hero.css'
+import heroimage from '../../../Assets/herocar.png'
 
 const Hero = () => {
   return (
-    <div>Hero</div>
+    <section id="hero">
+      <div className="left-content">
+        <h4>Plan your trip now</h4>
+        <h1>Save<span> big </span>with our car rental</h1>
+        <p>Rent the car of your dreams. Unbeatable prices, unlimited miles, flexible pick-up options and much more.</p>
+        <div className="button_row">
+          <button>Book Ride</button>
+          <button style={{backgroundColor:"black"}}>Learn More</button>
+        </div>
+      </div>
+      <div className="right-content">
+        <img src={heroimage} alt="" />
+      </div>
+    </section>
   )
 }