[FIX] Implemented Footer Section #74

src/App.css

@@ -1,18 +1,35 @@
 .App {
   width: 100%;
-  height: 100vh;
+  min-height: 100vh; 
   background: #121026;
   display: flex;
-  overflow: hidden;
+  flex-direction: column; 
+}
+
+.App-content {
+  display: flex;
+  flex: 1; 
+  overflow: auto;
+}
+
+.App-footer {
+  width: 100%;
+  height: 100px;
+  background: #19162c;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #ffffff;
+  font-size: 14px;
+  padding: 0 10px;
 }
 
 .App::-webkit-scrollbar {
   display: none;
 }
 
 @media only screen and (max-width: 525px) {
-  .App {
-    overflow-x: hidden;
-    overflow-y: scroll;
+  .App-content {
+    flex-direction: column;
   }
 }

src/App.js

@@ -1,15 +1,18 @@
-import logo from "./logo.svg";
 import "./App.css";
 import Menu from "./Components/Menu";
 import Container from "./Components/Container";
+import Footer from "./Components/Footer";
 
 function App() {
   return (
     <div className="App">
-      <Menu />
-      <Container />
+      <div className="App-content">
+        <Menu />
+        <Container />
+      </div>
+      <Footer />
     </div>
   );
 }
 
-export default App;
+export default App;

src/Components/Footer.css

@@ -0,0 +1,67 @@
+.footer {
+    background: #19162c;
+    color: #ffffff;
+    padding: 20px 0;
+    text-align: center;
+  }
+
+  .footer-content {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 20px;
+  }
+
+  .footer p {
+    margin: 0;
+  }
+
+  .footer-links {
+    list-style: none;
+    padding: 0;
+    margin: 10px 0 0;
+    display: flex;
+    justify-content: center;
+    gap: 15px;
+  }
+
+  .footer-links li {
+    display: inline;
+  }
+
+  .footer-links a {
+    color: #ffffff;
+    text-decoration: none;
+    transition: color 0.3s;
+  }
+
+  .footer-links a:hover {
+    color: #ff6347;
+  }
+
+  .footer-content {
+    position: relative;
+  }
+
+  .back-to-top {
+    margin-top: 40px;
+    position: absolute;
+    top: 0;
+    right: 0;
+    color: #ffffff;
+  }
+
+  .back-to-top {
+    text-decoration: none;
+    font-size: 14px;
+    font-weight: bold;
+    color: #d1d0d5;
+    border: 2px solid #443b78;
+    padding: 5px 15px;
+    border-radius: 10px;
+    margin: 0px 5px;
+    transition: background-color 0.3s ease; 
+  }
+
+  .back-to-top:hover {
+    background-color: #443b78; 
+  }

src/Components/Footer.js

@@ -0,0 +1,47 @@
+import React from "react";
+import "./Footer.css";
+
+const Footer = () => {
+  const scrollToTop = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: "smooth",
+    });
+  };
+
+  return (
+    <div className="footer">
+      <div className="footer-content">
+        <p>&copy; 2024 UniCollab. All rights reserved.</p>
+        <ul className="footer-links">
+          <li>
+            <a href="#home">Home</a>
+          </li>
+          <li>
+            <a href="#about">About Us</a>
+          </li>
+          <li>
+            <a href="#services">Services</a>
+          </li>
+          <li>
+            <a href="#contact">Contact</a>
+          </li>
+          <li>
+            <a href="#portfolio">Portfolio</a>
+          </li>
+          <li>
+            <a href="#blog">Blog</a>
+          </li>
+          <li>
+            <a href="#faq">FAQ</a>
+          </li>
+        </ul>
+        <a href="#" className="back-to-top" onClick={scrollToTop}>
+          Back to Top
+        </a>
+      </div>
+    </div>
+  );
+};
+
+export default Footer;

src/Components/Menu.css

@@ -1,13 +1,14 @@
 menu {
   width: 100px;
-  height: 100%;
+  height: auto;
   background: #19162c;
   display: flex;
   flex-direction: column;
   align-items: center;
   box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.4);
   position: sticky;
   top: 0;
+
 }
 
 menu img {

src/Components/TopContainer.js

@@ -8,10 +8,8 @@ function TopContainer() {
   const dropdownRef = useRef(null);
 
   useEffect(() => {
-    // Add event listener to detect clicks anywhere on the page
     window.addEventListener("click", handleOutsideClick);
 
-    // Cleanup function to remove the event listener
     return () => {
       window.removeEventListener("click", handleOutsideClick);
     };
@@ -22,7 +20,6 @@ function TopContainer() {
   };
 
   const handleOutsideClick = (event) => {
-    // Check if the clicked element is outside the dropdown content
     if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
       setIsDropdownOpen(false);
     }