Development

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/Landing.jsx

@@ -9,7 +9,7 @@ const LandingBanner = () => {
       <div className="relative container mx-auto p-4 flex items-center justify-center z-10 h-48 w-2/4 mt-[10rem]">
         <div>
           <div className="flex flex-col justify-center items-center lg:items-start text-center">
-            <h1 className="text-6xl font-semibold text-gray-900 leading-none align-center">
+            <h1 className="text-6xl font-semibold text-gray-900 leading-none align-center mt-[5em]">
               Project Clean-Up
             </h1>
             <div className="flex flex-row items-center justify-between space-x-8 md:ml-24">

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

@@ -4,7 +4,8 @@ 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/components/Navbar/Navbar.jsx

@@ -27,7 +27,7 @@ const Navbar = () => {
             <a
               target="_blank"
               rel="noopener noreferrer"
-              href="https://www.antgroup.com"
+              href="/about"
             >
               About Us
             </a>

project-app/components/OurMission/OurMission.jsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import Style from './OurMission.module.css'
+
+const OurMission = () => {
+  return (
+    <div className={Style.missionContainer}>
+            <div className={Style.textContainer}>
+                <h2 className={Style.missionTitle}>Our Mission</h2>
+                <p className={Style.missionParagraph}>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+                Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
+                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
+                Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
+            </div>
+        <img className={Style.imageStyling} src="https://www.countrywidegrounds.com/wp-content/uploads/jch-optimize/ng/wp-content_uploads_2020_02_Litter-picking-and-fly-tipping-300x200.webp"/>
+    </div>
+  )
+}
+
+export default OurMission

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

@@ -0,0 +1,28 @@
+.missionTitle {
+    font-size: 50px;
+    color: #004F54;
+}
+
+.missionParagraph {
+    font-size: 20px;
+    margin-top: 15px;
+    color: #004F54;
+
+}
+
+.missionContainer {
+    margin: 2em 2em 5em 2em;
+    display: flex;
+}
+
+.textContainer {
+    display: flex;
+    flex-direction: column;
+}
+
+.imageStyling {
+    height: 300px;
+    width: 300px;
+    border-radius: 50%;
+    filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.25));
+}

project-app/next.config.js

@@ -2,7 +2,7 @@
 const nextConfig = {
   reactStrictMode: true,
   swcMinify: true,
-  optimizeFonts: false,
+
 };
 
 module.exports = nextConfig;

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/_documents.js

@@ -1,6 +1,11 @@
 import { Html, Head, Main, NextScript } from "next/document";
 
-export default function Document() {
+class MyDocument extends Document {
+  static async getInitialProps(ctx) {
+    const initialProps = await Document.getInitialProps(ctx)
+    return { ...initialProps }
+  }
+render() {
   return (
     <Html>
       <Head>
@@ -14,7 +19,11 @@ export default function Document() {
       <body>
         <Main />
         <NextScript />
+
       </body>
     </Html>
-  );
+  )
+}
 }
+
+export default MyDocument;

project-app/pages/about.js

@@ -0,0 +1,5 @@
+export default function AboutUs(){
+    return (
+        <h1>Hello</h1>
+    )
+}

project-app/pages/index.js

@@ -1,10 +1,13 @@
 import Head from "next/head";
 import Image from "next/image";
-import styles from "../styles/Home.module.css";
 import Navbar from "../components/Navbar/Navbar";
 import dynamic from "next/dynamic";
 import LandingBanner from "../components/Landing/Landing";
 import Weather from "../components/Weather/Weather";
+import OurMission from "../components/OurMission/OurMission.jsx"
+
+import ImageGallery from "../components/ImageGallery/ImageGallery";
+
 
 import Footer from "../components/Footer/Footer";
 
@@ -16,18 +19,23 @@ const MapWithNoSSR = dynamic(() => import("../components/Map/Map.jsx"), {
 
 export default function Home() {
   return (
-    <>
+    <div className="bg-[#E6E5E4]">
       <Head>
-        <title>Project Clean-Up|Home</title>
+        <title>Project Clean-Up | Home</title>
       </Head>
       <div className="overflow-hidden font-sans">
         <Navbar />
         <LandingBanner />
         <Stats />
+
+        <OurMission/>
+
+        <ImageGallery/>
+
         <MapWithNoSSR />
         <Weather />
         <Footer />
       </div>
-    </>
+    </div>
   );
 }

project-app/styles/Home.module.css

@@ -5,7 +5,6 @@
 .main {
   min-height: 100vh;
   padding: 4rem 0;
-
   display: flex;
   flex-direction: column;
   justify-content: center;

project-app/styles/globals.css

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