Merge pull request #203 from shivamm-verma/chanakya-niti-footer-shiva…

…mm-verma Added Footer
Avdhesh-Varshney · Jul 9, 2024 · 589f356 · 589f356
2 parents 8e2f066 + be2e832
commit 589f356
Show file tree

Hide file tree

Showing 4 changed files with 95 additions and 10 deletions.
diff --git a/src/assets/logo.webp → public/logo.webp b/src/assets/logo.webp → public/logo.webp
diff --git 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
@@ -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;
+  }
diff --git 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{