From be2e8325284eb46372163679854abed8b746d546 Mon Sep 17 00:00:00 2001
From: Shivam Verma <shivam.verma256@outlook.com>
Date: Mon, 8 Jul 2024 14:05:35 +0530
Subject: [PATCH] Added Footer

---
 {src/assets => public}/logo.webp | Bin
 src/components/shared/Footer.jsx |  74 +++++++++++++++++++++++++++----
 src/css/Footer.css               |  29 ++++++++++++
 src/css/Home.css                 |   2 +-
 4 files changed, 95 insertions(+), 10 deletions(-)
 rename {src/assets => public}/logo.webp (100%)
 create mode 100644 src/css/Footer.css

diff --git a/src/assets/logo.webp b/public/logo.webp
similarity index 100%
rename from src/assets/logo.webp
rename to public/logo.webp
diff --git a/src/components/shared/Footer.jsx b/src/components/shared/Footer.jsx
index 2e34713..b43ebba 100644
--- a/src/components/shared/Footer.jsx
+++ b/src/components/shared/Footer.jsx
@@ -1,13 +1,69 @@
-import React from 'react';
+import React from "react";
+import "../../css/Footer.css";
+import { Link, NavLink } from "react-router-dom";
 
-const Footer = () => {
-  return (
-    <footer className="footer">
-      <div className="mx-auto px-4 py-2">
-        <center><p>&copy; 2024 Chanakya Niti. All rights reserved.</p></center>
+const Footer = () => (
+  <footer className="page-footer font-small blue pt-4 mb-4">
+    <div className="container-fluid text-center text-md-left">
+      <div className="row">
+        <div className="col-md-6 mt-md-0 mt-3 flex flex-row">
+          <img
+            src="/logo.webp"
+            height="220"
+            alt="footer logo"
+            className="pt-4"
+          />
+          <h5 className="pt-5 m-0 mt-2 fw-bolder fs-1">चाणक्य नीति</h5>
+        </div>
+
+        <hr className="clearfix w-100 d-md-none pb-0" />
+
+        <div className="col-md-3 mb-md-0 mb-3 pt-4">
+          <h5 className="text-uppercase fw-bold">चाणक्य नीति</h5>
+          <ul className="list-unstyled">
+            <li>
+              <NavLink to="/">Home</NavLink>
+            </li>
+            <li>
+              <NavLink to="/about">About</NavLink>
+            </li>
+            <li>
+              <NavLink to="/contributor">Contributors</NavLink>
+            </li>
+            <li>
+              <NavLink to="/auth/SignIn">Sign-In</NavLink>
+            </li>
+          </ul>
+        </div>
+
+        <div className="col-md-3 mb-md-0 mb-3 pt-3">
+          <h5 className="text-uppercase fw-bold">Resources</h5>
+          <ul className="list-unstyled">
+            <li>
+              <NavLink to="/resources/audio">Audio</NavLink>
+            </li>
+            <li>
+              <NavLink to="/resources/video">Video</NavLink>
+            </li>
+            <li>
+              <NavLink to="/resources/book">Books</NavLink>
+            </li>
+            <li>
+              <NavLink to="/resources/news">News</NavLink>
+            </li>
+            <li>
+              <NavLink to="/resources/quiz">Quiz</NavLink>
+            </li>
+          </ul>
+        </div>
       </div>
-    </footer>
-  );
-};
+    </div>
+    <div className="footer-copyright text-center pt-2">
+      <center>
+        <p>&copy; 2024 Chanakya Niti. All rights reserved.</p>
+      </center>
+    </div>
+  </footer>
+);
 
 export default Footer;
diff --git a/src/css/Footer.css b/src/css/Footer.css
new file mode 100644
index 0000000..386b391
--- /dev/null
+++ b/src/css/Footer.css
@@ -0,0 +1,29 @@
+ul li a {
+  text-decoration: none;
+  color: black;
+  font-size: large;
+}
+ul li a:hover {
+  text-decoration: underline;
+}
+  
+  ul {
+    display: flex;
+    flex-direction: column;
+  }
+  
+  .page-footer {
+    width: 100%;
+    margin-top: 3rem;
+    background-color: rgba(223, 223, 176, 0.479);
+    color: black;
+    border-radius: 15px;
+  }
+  
+  .dark .page-footer {
+    background-color: #262626;
+    color: white;
+  }
+ .dark ul li a {
+    color: white;
+  }
\ No newline at end of file
diff --git a/src/css/Home.css b/src/css/Home.css
index 6d46474..f7ef432 100644
--- a/src/css/Home.css
+++ b/src/css/Home.css
@@ -183,7 +183,7 @@
   justify-content: center;
   gap: 20px;
   padding: 20px;
-  padding-bottom: 100px;
+  padding-bottom: 50px;
 }
 
 .feat-3 img{