From 628d95d2b48689891d3d0c6e15ce9e615b034971 Mon Sep 17 00:00:00 2001
From: amiragucher <amiragucher@gmail.com>
Date: Mon, 1 Aug 2022 11:45:18 +0100
Subject: [PATCH 1/3] Carousel displaying and working, images added

---
 .../components/ImageGallery/ImageGallery.jsx  | 28 +++++++++++++++++++
 project-app/package-lock.json                 | 18 ++++++++++++
 project-app/package.json                      |  1 +
 project-app/pages/index.js                    |  2 ++
 4 files changed, 49 insertions(+)

diff --git a/project-app/components/ImageGallery/ImageGallery.jsx b/project-app/components/ImageGallery/ImageGallery.jsx
index e69de29..a9ac564 100644
--- a/project-app/components/ImageGallery/ImageGallery.jsx
+++ b/project-app/components/ImageGallery/ImageGallery.jsx
@@ -0,0 +1,28 @@
+import { Carousel } from 'antd';
+import React from 'react';
+const contentStyle = {
+  height: '160px',
+  color: '#fff',
+  lineHeight: '160px',
+  textAlign: 'center',
+  background: '#364d79',
+};
+
+const ImageGallery = () => (
+  <Carousel autoplay>
+    <div>
+      <img style={contentStyle} src="https://i2-prod.manchestereveningnews.co.uk/incoming/article591425.ece/ALTERNATES/s810/C_71_article_1314725_image_list_image_list_item_0_image.jpg"/>
+    </div>
+    <div>
+      <img style={contentStyle} src="https://www.belvederecl.com/wp-content/uploads/2019/05/Community-cleanup-picture.jpg"/>
+    </div>
+    <div>
+    <img style={contentStyle} src="https://www.belvederecl.com/wp-content/uploads/2019/05/Community-cleanup-picture.jpg"/>
+    </div>
+    <div>
+    <img style={contentStyle} src="https://www.belvederecl.com/wp-content/uploads/2019/05/Community-cleanup-picture.jpg"/>
+    </div>
+  </Carousel>
+);
+
+export default ImageGallery;
\ No newline at end of file
diff --git a/project-app/package-lock.json b/project-app/package-lock.json
index d16e39d..4fe73ee 100644
--- a/project-app/package-lock.json
+++ b/project-app/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.1.0",
       "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",
@@ -490,6 +491,17 @@
       "integrity": "sha512-LwzQKA4vzIct1zNZzBmRKI9QuNpLgTQMEjsQLf3BXuGYb3QPTP4Yjf6mkdX+X1mYttZ808QpOwAzZjv28kq7DA==",
       "dev": true
     },
+    "node_modules/@sefailyasoz/react-carousel": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@sefailyasoz/react-carousel/-/react-carousel-1.1.1.tgz",
+      "integrity": "sha512-cpwubrSfXReAPZjTBYDa1G2kDBql5HpksPq3hN+VnPAdlhIk+WDKdrPKktAhRQ4fsFKJIsqBgm+/nbKI+tLotw==",
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": ">=16"
+      }
+    },
     "node_modules/@swc/helpers": {
       "version": "0.4.3",
       "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.4.3.tgz",
@@ -6010,6 +6022,12 @@
       "integrity": "sha512-LwzQKA4vzIct1zNZzBmRKI9QuNpLgTQMEjsQLf3BXuGYb3QPTP4Yjf6mkdX+X1mYttZ808QpOwAzZjv28kq7DA==",
       "dev": true
     },
+    "@sefailyasoz/react-carousel": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@sefailyasoz/react-carousel/-/react-carousel-1.1.1.tgz",
+      "integrity": "sha512-cpwubrSfXReAPZjTBYDa1G2kDBql5HpksPq3hN+VnPAdlhIk+WDKdrPKktAhRQ4fsFKJIsqBgm+/nbKI+tLotw==",
+      "requires": {}
+    },
     "@swc/helpers": {
       "version": "0.4.3",
       "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.4.3.tgz",
diff --git a/project-app/package.json b/project-app/package.json
index 51576c8..c297a1a 100644
--- a/project-app/package.json
+++ b/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",
diff --git a/project-app/pages/index.js b/project-app/pages/index.js
index 218599f..5723485 100644
--- a/project-app/pages/index.js
+++ b/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 />

From ad83389dfc08910cf9abed239fac9db8fb9da84d Mon Sep 17 00:00:00 2001
From: edgarasmarkunas <markunas11@gmail.com>
Date: Mon, 1 Aug 2022 12:24:36 +0100
Subject: [PATCH 2/3] carousel component functioning, just needs a little bit
 more styling

---
 .../components/ImageGallery/ImageGallery.jsx  | 36 +++++++++----------
 .../ImageGallery/ImageGallery.module.css      | 15 ++++++++
 2 files changed, 31 insertions(+), 20 deletions(-)
 create mode 100644 project-app/components/ImageGallery/ImageGallery.module.css

diff --git a/project-app/components/ImageGallery/ImageGallery.jsx b/project-app/components/ImageGallery/ImageGallery.jsx
index a9ac564..79b30e6 100644
--- a/project-app/components/ImageGallery/ImageGallery.jsx
+++ b/project-app/components/ImageGallery/ImageGallery.jsx
@@ -1,28 +1,24 @@
 import { Carousel } from 'antd';
 import React from 'react';
-const contentStyle = {
-  height: '160px',
-  color: '#fff',
-  lineHeight: '160px',
-  textAlign: 'center',
-  background: '#364d79',
-};
+import Style from './ImageGallery.module.css'
 
 const ImageGallery = () => (
-  <Carousel autoplay>
-    <div>
-      <img style={contentStyle} src="https://i2-prod.manchestereveningnews.co.uk/incoming/article591425.ece/ALTERNATES/s810/C_71_article_1314725_image_list_image_list_item_0_image.jpg"/>
-    </div>
-    <div>
-      <img style={contentStyle} src="https://www.belvederecl.com/wp-content/uploads/2019/05/Community-cleanup-picture.jpg"/>
-    </div>
-    <div>
-    <img style={contentStyle} src="https://www.belvederecl.com/wp-content/uploads/2019/05/Community-cleanup-picture.jpg"/>
-    </div>
-    <div>
-    <img style={contentStyle} src="https://www.belvederecl.com/wp-content/uploads/2019/05/Community-cleanup-picture.jpg"/>
-    </div>
+<div className={Style.imageContainer}>
+  <Carousel className={Style.image} autoplay>
+        <div >
+            <img  src="https://i2-prod.manchestereveningnews.co.uk/incoming/article591425.ece/ALTERNATES/s810/C_71_article_1314725_image_list_image_list_item_0_image.jpg"/>
+        </div>
+        <div >
+            <img  src="https://www.belvederecl.com/wp-content/uploads/2019/05/Community-cleanup-picture.jpg"/>
+        </div>
+        <div >
+            <img  src="https://www.belvederecl.com/wp-content/uploads/2019/05/Community-cleanup-picture.jpg"/>
+        </div>
+        <div >
+            <img  src="https://www.belvederecl.com/wp-content/uploads/2019/05/Community-cleanup-picture.jpg"/>
+        </div>
   </Carousel>
+  </div>
 );
 
 export default ImageGallery;
\ No newline at end of file
diff --git a/project-app/components/ImageGallery/ImageGallery.module.css b/project-app/components/ImageGallery/ImageGallery.module.css
new file mode 100644
index 0000000..1ad8c2f
--- /dev/null
+++ b/project-app/components/ImageGallery/ImageGallery.module.css
@@ -0,0 +1,15 @@
+.image {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 300px;
+    width: 500px;
+    margin:50px 0px 100px 0px;
+}
+
+.imageContainer {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding-bottom: 20px;
+}
\ No newline at end of file

From 36df6e1c522b1a84c2d1cdc53d124598d21d9841 Mon Sep 17 00:00:00 2001
From: amiragucher <amiragucher@gmail.com>
Date: Mon, 1 Aug 2022 14:14:16 +0100
Subject: [PATCH 3/3] Buttons changed to white, background created for the
 images

---
 .../components/ImageGallery/ImageGallery.jsx  | 10 ++++-----
 .../ImageGallery/ImageGallery.module.css      | 22 ++++++++++++++-----
 .../Landing/NavButton/NavButton.jsx           |  2 +-
 project-app/styles/Home.module.css            |  2 +-
 project-app/styles/globals.css                |  2 ++
 5 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/project-app/components/ImageGallery/ImageGallery.jsx b/project-app/components/ImageGallery/ImageGallery.jsx
index 79b30e6..038c02d 100644
--- a/project-app/components/ImageGallery/ImageGallery.jsx
+++ b/project-app/components/ImageGallery/ImageGallery.jsx
@@ -4,18 +4,18 @@ import Style from './ImageGallery.module.css'
 
 const ImageGallery = () => (
 <div className={Style.imageContainer}>
-  <Carousel className={Style.image} autoplay>
+  <Carousel className={Style.Carousel} autoplay>
         <div >
-            <img  src="https://i2-prod.manchestereveningnews.co.uk/incoming/article591425.ece/ALTERNATES/s810/C_71_article_1314725_image_list_image_list_item_0_image.jpg"/>
+        <img className={Style.imageCSS} src="https://www.belvederecl.com/wp-content/uploads/2019/05/Community-cleanup-picture.jpg"/>
         </div>
         <div >
-            <img  src="https://www.belvederecl.com/wp-content/uploads/2019/05/Community-cleanup-picture.jpg"/>
+            <img className={Style.imageCSS} src="https://www.belvederecl.com/wp-content/uploads/2019/05/Community-cleanup-picture.jpg"/>
         </div>
         <div >
-            <img  src="https://www.belvederecl.com/wp-content/uploads/2019/05/Community-cleanup-picture.jpg"/>
+            <img className={Style.imageCSS} src="https://www.belvederecl.com/wp-content/uploads/2019/05/Community-cleanup-picture.jpg"/>
         </div>
         <div >
-            <img  src="https://www.belvederecl.com/wp-content/uploads/2019/05/Community-cleanup-picture.jpg"/>
+            <img className={Style.imageCSS} src="https://www.belvederecl.com/wp-content/uploads/2019/05/Community-cleanup-picture.jpg"/>
         </div>
   </Carousel>
   </div>
diff --git a/project-app/components/ImageGallery/ImageGallery.module.css b/project-app/components/ImageGallery/ImageGallery.module.css
index 1ad8c2f..b5d798f 100644
--- a/project-app/components/ImageGallery/ImageGallery.module.css
+++ b/project-app/components/ImageGallery/ImageGallery.module.css
@@ -1,15 +1,25 @@
-.image {
+.imageContainer {
     display: flex;
     justify-content: center;
     align-items: center;
-    height: 300px;
-    width: 500px;
-    margin:50px 0px 100px 0px;
+    padding-bottom: 20px;
+    background-color: #006C72;
+
 }
 
-.imageContainer {
+.Carousel {
     display: flex;
     justify-content: center;
     align-items: center;
-    padding-bottom: 20px;
+    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; 
+  
 }
\ No newline at end of file
diff --git a/project-app/components/Landing/NavButton/NavButton.jsx b/project-app/components/Landing/NavButton/NavButton.jsx
index 8364f6c..d92f46d 100644
--- a/project-app/components/Landing/NavButton/NavButton.jsx
+++ b/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>
     )
diff --git a/project-app/styles/Home.module.css b/project-app/styles/Home.module.css
index c551746..7981803 100644
--- a/project-app/styles/Home.module.css
+++ b/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;
diff --git a/project-app/styles/globals.css b/project-app/styles/globals.css
index 1b6229d..9f9f9b9 100644
--- a/project-app/styles/globals.css
+++ b/project-app/styles/globals.css
@@ -5,6 +5,8 @@
 body{
   overflow-x: hidden;
   width: 100vw;
+  background-color: #f15100;
+
 }
 
 img {