Carousel component

project-app/components/ImageGallery/ImageGallery.jsx

@@ -0,0 +1,24 @@
+import { Carousel } from 'antd';
+import React from 'react';
+import Style from './ImageGallery.module.css'
+
+const ImageGallery = () => (
+<div className={Style.imageContainer}>
+  <Carousel className={Style.Carousel} autoplay>
+        <div >
+        <img className={Style.imageCSS} src="https://www.belvederecl.com/wp-content/uploads/2019/05/Community-cleanup-picture.jpg"/>
+        </div>
+        <div >
+            <img className={Style.imageCSS} src="https://www.belvederecl.com/wp-content/uploads/2019/05/Community-cleanup-picture.jpg"/>
+        </div>
+        <div >
+            <img className={Style.imageCSS} src="https://www.belvederecl.com/wp-content/uploads/2019/05/Community-cleanup-picture.jpg"/>
+        </div>
+        <div >
+            <img className={Style.imageCSS} src="https://www.belvederecl.com/wp-content/uploads/2019/05/Community-cleanup-picture.jpg"/>
+        </div>
+  </Carousel>
+  </div>
+);
+
+export default ImageGallery;

project-app/components/ImageGallery/ImageGallery.module.css

@@ -0,0 +1,25 @@
+.imageContainer {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding-bottom: 20px;
+    background-color: #006C72;
+
+}
+
+.Carousel {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 350px;
+    width: 500px;
+    margin:50px 0px 100px 0px;
+    filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.25));
+}
+
+.imageCSS {
+    border-radius: 25px;
+    height: 350px;
+    width: 500px; 
+
+}

project-app/components/Landing/NavButton/NavButton.jsx

@@ -4,7 +4,7 @@ import React from "react";
 
 function NavButton( {buttonText}) {
     return (
-        <button className = "bg-orange-500 hover:bg-orange-700 text-black font-bold py-2 px-4 rounded">
+        <button className = "bg-[#FF9505] hover:bg-orange-700 text-white font-bold py-2 px-4 rounded shadow-2xl	">
         {buttonText}
         </button>
     )

project-app/package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@fontsource/montserrat": "^4.5.11",
+    "@sefailyasoz/react-carousel": "^1.1.1",
     "antd": "^4.22.1",
     "esri-leaflet-geocoder": "^3.1.3",
     "leaflet": "^1.8.0",

project-app/pages/index.js

@@ -5,6 +5,7 @@ import Navbar from "../components/Navbar/Navbar";
 import dynamic from "next/dynamic";
 import LandingBanner from "../components/Landing/Landing";
 import Weather from "../components/Weather/Weather";
+import ImageGallery from "../components/ImageGallery/ImageGallery";
 
 import Footer from "../components/Footer/Footer";
 
@@ -24,6 +25,7 @@ export default function Home() {
         <Navbar />
         <LandingBanner />
         <Stats />
+        <ImageGallery/>
         <MapWithNoSSR />
         <Weather />
         <Footer />

project-app/styles/Home.module.css

@@ -1,11 +1,11 @@
 .container {
   overflow: hidden;
+
 }
 
 .main {
   min-height: 100vh;
   padding: 4rem 0;
-
   display: flex;
   flex-direction: column;
   justify-content: center;

project-app/styles/globals.css

@@ -5,6 +5,8 @@
 body{
   overflow-x: hidden;
   width: 100vw;
+  background-color: #f15100;
+
 }
 
 img {