footer added

src/components/Footer/Footer.jsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import './footer.css'
+import { Logo } from "../../reusableComponents";
+import { Link } from "react-router-dom";
+import ContributorsIcon from "@mui/icons-material/Diversity3";
+import FeedbackIcon from "@mui/icons-material/Feedback";
+import GitHubIcon from "@mui/icons-material/GitHub";
+import GuidelinesIcon from "@mui/icons-material/LibraryBooks";
+import HelpIcon from "@mui/icons-material/Help";
+import InfoIcon from "@mui/icons-material/Info";
+
+function Footer() {
+  return (
+    <div className='footer'>
+      <Logo />
+      <div className='quicklinks'>
+      <ul>
+        <li>
+          <Link to="/dummygram/about" className="footer-link">
+            <span style={{ display: "flex", gap: "6px" }}>
+              <InfoIcon className="footer-icons" fontSize="small" />
+              About
+            </span>
+          </Link>
+        </li>
+        <li>
+          <Link
+            style={{ display: "flex" }}
+            to="/dummygram/feedback"
+            className="footer-link"
+          >
+            <span style={{ display: "flex", gap: "6px" }}>
+              <FeedbackIcon className="footer-icons" fontSize="small" />
+              Feedback
+            </span>
+          </Link>
+        </li>
+        <li>
+          <Link to="/dummygram/contributors" className="footer-link">
+            <span style={{ display: "flex", gap: "6px" }}>
+              <ContributorsIcon className="footer-icons" fontSize="small" />
+              Contributors
+            </span>
+          </Link>
+        </li>
+        <li>
+          <Link to="/dummygram/help-center" className="footer-link">
+            <span style={{ display: "flex", gap: "6px" }}>
+              <HelpIcon className="footer-icons" fontSize="small" />
+              Help-center
+            </span>
+          </Link>
+        </li>
+        <li>
+          <Link to="/dummygram/guidelines" className="footer-link">
+            <span style={{ display: "flex", gap: "6px" }}>
+              <GuidelinesIcon className="footer-icons" fontSize="small" />
+              Guidelines
+            </span>
+          </Link>
+        </li>
+      </ul>
+      </div>
+      <div className="copyright">
+        <p>Copyright &copy; 2023 <span style={{ color: 'red' }}>&#x2764;</span> by NARAYAN SONI | All Rights Reserved</p>
+      </div>
+    </div>
+  )
+}
+
+export default Footer

src/components/Footer/footer.css

@@ -0,0 +1,19 @@
+.footer{
+    background-color: black;
+    width: 100vw;
+    height: 20vh;
+    padding: 1rem;
+    text-align: center;
+}
+ul{
+   display: flex;
+   justify-content: center;
+}
+ul li{
+    list-style: none;
+    padding: 1rem;
+}
+.copyright p{
+    text-align: center;
+    color: grey;
+}

src/components/SideBar/index.css

@@ -198,7 +198,7 @@ footer {
 }
 
 .footer-link:hover {
-  color: var(--color);
+  color: #5f85db;
 }
 
 .copyright {

src/pages/FooterPages/About/index.jsx

@@ -4,6 +4,10 @@ import "../design.css";
 import { useEffect, useState } from "react";
 
 import KeyboardBackspaceIcon from "@mui/icons-material/KeyboardBackspace";
+import { VscChromeClose } from "react-icons/vsc";
+import about from "../../../assets/about-us.png";
+import logo from "../../../assets/logo.webp";
+import Footer from "../../../components/Footer/Footer";
 import about from "../../../assets/about-us.webp";
 import { useNavigate } from "react-router-dom";
 
@@ -164,7 +168,9 @@ const About = () => {
           </div>
         </div>
       </div>
+      <Footer/>
     </div>
+
   );
 };
 

src/pages/FooterPages/ContributorPage/index.jsx

@@ -8,6 +8,7 @@ import ContributorCard from "./ContributorCard";
 import KeyboardBackspaceIcon from "@mui/icons-material/KeyboardBackspace";
 import backgroundimg from "../../../assets/contributors.webp";
 import { useNavigate } from "react-router-dom";
+import Footer from "../../../components/Footer/Footer";
 
 function Contributor() {
   const [currentPage, setCurrentPage] = useState(1);
@@ -129,6 +130,7 @@ function Contributor() {
           <h1 className="no-result">Sorry no result matches your query</h1>
         )}
       </div>
+      <Footer/>
     </div>
   );
 }

src/pages/FooterPages/Feedback/index.jsx

@@ -3,10 +3,13 @@ import "../design.css";
 
 import React, { useRef } from "react";
 
+import KeyboardBackspaceIcon from "@mui/icons-material/KeyboardBackspace";
 import { SideBar } from "../../../components";
 import emailjs from "@emailjs/browser";
 import { playSuccessSound } from "../../../js/sounds";
 import { useSnackbar } from "notistack";
+import Footer from "../../../components/Footer/Footer";
+import Scroll from "../../../reusableComponents";
 
 export const Feedback = () => {
   const form = useRef(null);
@@ -36,7 +39,14 @@ export const Feedback = () => {
 
   return (
     <>
-      <SideBar />
+       <div
+        className="back-icon"
+        style={{ height: "90px", cursor: "pointer", marginTop:'35px' }}
+        onClick={() => navigate("/dummygram/")}
+      >
+        <KeyboardBackspaceIcon className="icon" /> 
+      </div>
+      <h1 style={{textAlign:'center', color:'#5f85db'}}>Your opinion matters to us !</h1>
       <div className="feedback-form-container footer-page-para-color">
         <span className="grad3 grad"></span>
         <span className="grad4 grad"></span>
@@ -75,6 +85,8 @@ export const Feedback = () => {
           </button>
         </form>
       </div>
+      <Scroll/>
+      <Footer/>
     </>
   );
 };

src/pages/FooterPages/Guidelines/index.jsx

@@ -4,6 +4,9 @@ import "../design.css";
 import { Link, useNavigate } from "react-router-dom";
 
 import KeyboardBackspaceIcon from "@mui/icons-material/KeyboardBackspace";
+import { VscChromeClose } from "react-icons/vsc";
+import background from "../../../assets/guidelines.png";
+import Footer from "../../../components/Footer/Footer";
 import background from "../../../assets/guidelines.webp";
 
 const Guidelines = () => {
@@ -177,6 +180,7 @@ const Guidelines = () => {
           </ul>
         </div>
       </div>
+      <Footer/>
     </div>
   );
 };