Adds homepage bottom banner.

src/homePage/HomePage.jsx

@@ -1,6 +1,7 @@
 import React, { useContext } from "react";
 
 import Banner from "./banner/Banner";
+import Banner2 from "./banner/Banner2";
 import UploadImage from "./uploadImage/UploadImage";
 
 import "./HomePage.css";
@@ -19,6 +20,7 @@ export default function HomePage() {
       <div className="home-container">
         <Banner />
         <UploadImage />
+        <Banner2 />
       </div>
     </section>
   );

src/homePage/banner/Banner.css

@@ -1,4 +1,5 @@
-#banner * {
+#banner *,
+#banner2 * {
   border: none;
   border-radius: 0;
 }
@@ -22,6 +23,13 @@
   margin: auto;
   width: 100%;
 }
+
+#banner2 .text-content2 {
+  padding-left: 5vw;
+  display: flex;
+  align-items: center;
+}
+
 #banner .display-1 {
   font-size: 2.1rem !important;
 }
@@ -32,10 +40,18 @@
     font-size: 3.2rem !important;
     line-height: 1.3;
   }
+  #banner2 .text-content2 h1 {
+    font-size: 2rem !important;
+  }
 }
 @media (min-width: 768px) {
   /*  Medium devices (tablets, 768px and up) */
   #banner .display-1 {
     font-size: calc(4rem + 1vw) !important;
   }
 }
+@media (min-width: 1200px) {
+  #banner2 .text-content2 h1 {
+    font-size: calc(3rem + 1vw) !important;
+  }
+}

src/homePage/banner/Banner2.jsx

@@ -0,0 +1,71 @@
+import React, { useState, useEffect } from "react";
+
+import Container from "react-bootstrap/Container";
+import Card from "react-bootstrap/Card";
+
+import "./Banner.css";
+import banner2BgDesktop from "../../assets/images/banner2BgDesktop.png";
+import banner2BgMobile from "../../assets/images/banner2BgMobile.png";
+
+const Banner2 = () => {
+  const [screenSize, setScreenSize] = useState(window.innerWidth);
+  const [imgSrc, setImgSrc] = useState(banner2BgDesktop);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setScreenSize(window.innerWidth);
+    };
+    window.addEventListener("resize", handleResize);
+
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (screenSize < 576) {
+      setImgSrc(banner2BgMobile);
+    } else {
+      setImgSrc(banner2BgDesktop);
+    }
+  }, [screenSize]);
+
+  return (
+    <Container fluid id="banner2" className="px-0 mb-5">
+      <Card className="my-auto text-white">
+        <Card.Img
+          src={imgSrc}
+          alt="Card image"
+          className=""
+          style={{
+            minHeight: "200px",
+            width: "100%",
+            height: "100%",
+            objectFit: "cover",
+            objectPosition: "center",
+          }}
+        />
+        <Card.ImgOverlay className="bg-dark bg-opacity-75 d-flex">
+          <div className="text-content2">
+            <Card.Title className="">
+              <h1 className="fw-bold text-start  display-77 mb-0">
+                Explore Resources and
+              </h1>
+              <h1 className="fw-bold text-start display-47 mb-0">
+                Initiatives to Improve
+              </h1>
+              <h1 className="fw-bold text-start display-47 mb-0">
+                Agricultural Practices
+              </h1>
+              <h1 className="fw-bold text-start display-47 mb-0">
+                Through GIS Technology
+              </h1>
+            </Card.Title>
+          </div>
+        </Card.ImgOverlay>
+      </Card>
+    </Container>
+  );
+};
+
+export default Banner2;