Merge pull request smaranjitghose#732 from ashuvssut/sass-home3

css->scss: contact form + map + footer

src/components/Footer/Footer.js

@@ -3,8 +3,7 @@ import { Fade } from "react-reveal";
 import emoji from "react-easy-emoji";
 import { Form } from "react-bootstrap";
 import {FaEnvelope} from "react-icons/fa";
-import styles from "./Footer.module.css";
-/* eslint-disable jsx-a11y/accessible-emoji */
+import styles from "./footer.module.scss";
 
 export default function Footer(props) {
   return (
@@ -28,7 +27,7 @@ export default function Footer(props) {
                 <FaEnvelope className={styles.icon} size={48} />
                 <input type="email" placeholder="Enter your email" required />
               </div>
-              <button className={styles.bsClass}>SUBSCRIBE</button>{" "}
+              <button className={styles.bsClass}>SUBSCRIBE</button>
             </div>
             <Form.Text className={styles.textMuted}>We'll never share your email with anyone else.</Form.Text>
           </Form.Group>

src/components/Footer/footer.module.scss

@@ -0,0 +1,137 @@
+@use './../../scss/colors';
+
+.footerDiv {
+  position: relative;
+  margin-top: 2rem;
+  background-image: url("./../../assets/images/footer/origami.webp");
+  background-position: center;
+  background-size: cover;
+  background-repeat: no-repeat;
+
+  .topShape {
+    overflow: hidden;
+    position: relative;
+    top: 0;
+    left: 0;
+    z-index: 1;
+    width: 100%;
+    line-height: 0;
+    direction: ltr;
+
+    svg {
+      display: block;
+      width: calc(100% + 1.3px);
+      position: relative;
+      left: 50%;
+      -webkit-transform: translateX(-50%) rotateY(180deg);
+      -ms-transform: translateX(-50%) rotateY(180deg);
+      transform: translateX(-50%) rotateY(180deg);
+      overflow: hidden;
+
+      .svgPath {
+        fill: colors.$white;
+        -webkit-transform-origin: center;
+        -ms-transform-origin: center;
+        transform-origin: center;
+        -webkit-transform: rotateY(0deg);
+        transform: rotateY(0deg);
+      }
+    }
+  }
+  .tint {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    background: colors.$black-dark-tint;
+  }
+
+  .newsletter {
+    position: relative;
+    color: colors.$white;
+    text-align: center;
+    padding: 50px 0 70px 0;
+
+    .heading {
+      h5 {
+        font-size: 2.5rem;
+        font-weight: 300;
+        margin-bottom: 3rem;
+      }
+      h6 {
+        font-weight: 300;
+        margin-bottom: 0;
+      }
+    }
+
+    .emailField {
+      min-width: 320px;
+      text-align: center;
+      margin: 0 5px;
+
+      .form {
+        display: inline-block;
+        display: flex;
+        align-items: stretch;
+        justify-content: center;
+
+        .box {
+          height: 40px;
+          background-color: colors.$white;
+          border-radius: 30px 0 0 30px;
+          display: flex;
+          align-items: center;
+          padding: 15px;
+          min-width: 220px;
+
+          .icon {
+            padding: 10px;
+            color: colors.$royal-blue;
+            min-width: 40px;
+          }
+          input {
+            flex: 1;
+            height: 30px;
+            border: none;
+            outline: none;
+            font-size: 16px;
+          }
+        }
+        .bsClass {
+          border-radius: 0 30px 30px 0;
+          padding: 6px 15px;
+          background-color: colors.$royal-blue;
+          border: 2px solid colors.$royal-blue;
+          color: colors.$white;
+
+          &:hover {
+            background-color: colors.$navy-blue;
+            border: 2px solid colors.$navy-blue;
+          }
+        }
+      }
+      .textMuted {
+        padding-top: 11px;
+        font-size: 13px;
+      }
+      @media screen and (max-width: 474px) {
+        .form {
+          margin-left: 0px;
+        }
+        .textMuted {
+          text-align: center;
+        }
+      }
+    }
+  }
+
+  .footerText {
+    text-align: center;
+    color: colors.$white;
+    font-weight: 400;
+    font-size: 1.2rem;
+    padding: 30px;
+    padding-top: 0;
+  }
+}

src/components/ScrollToTopButton/scroll-to-top.module.scss

@@ -9,13 +9,13 @@
   font-size: 23px;
   width: 49px;
   transition: all 300ms ease-in-out;
-  background-color: colors.$blue1 !important;
+  background-color: colors.$royal-blue !important;
   color: colors.$white !important;
   box-shadow: 2px 2px 3px colors.$grey;
   border: none !important;
 
   &:hover {
-    background-color: colors.$blue1 !important;
+    background-color: colors.$royal-blue !important;
     transition: all 300ms ease-in-out;
   }
 

src/pages/Home/sections/Contact/ContactUs.jsx

@@ -3,7 +3,7 @@ import ExperienceForm from "./components/ExperienceForm/ExperienceForm";
 import Map from "./components/Map/Map";
 
 
-import styles from "./ContactUs.module.css";
+import styles from "./contact-us.module.scss";
 
 function ContactUs() {
   const mapRef = useRef()

src/pages/Home/sections/Contact/components/EmojiRating/EmojiRating.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import styles from "./EmojiRating.module.css";
+import styles from "./emoji-rating.module.scss";
 
 function EmojiRating() {
   return (