feat: initial design of footer(have issues)

src/App.jsx

@@ -4,6 +4,7 @@ import { HashRouter as Router, Routes, Route } from "react-router-dom";
 import { ToastContainer } from "react-toastify";
 import routes from "@/routes/index";
 import Navbar from "@/components/Navbar/index";
+import Footer from "@/components/Footer/index";
 import Cursor from "./components/Cursor";
 import CursorVariantProvider from "@/context/CursorVariantProvider";
 import Loader from "@/components/Loader";
@@ -44,7 +45,8 @@ function App() {
                   key={route.label}
                 />
               ))}
-            </Routes>
+              </Routes>
+              <Footer/>
           </Router>
         )}
       </AnimatePresence>

src/components/Footer/index.jsx

@@ -0,0 +1,132 @@
+import React from "react";
+import { Link, useLocation } from "react-router-dom";
+import Logo from "@/assets/images/logo.svg";
+import SitLogo from "@/assets/images/Teams/sitlogo.svg";
+
+const Footer = () => {
+  const location = useLocation();
+
+  const handleLinkClick = () => {
+    window.scrollTo({ top: 0, behavior: "smooth" });
+  };
+
+  return (
+    <footer className="min-h-screen bg-secondary-dark text-text-light flex flex-col">
+      {/* Orange Banner */}
+      <div className="bg-primary relative flex justify-center items-center py-12 flex-1">
+        <div className="relative text-center font-black uppercase tracking-tighter">
+          <div className="text-2xl xs:text-4xl sm:text-6xl lg:text-8xl text-outlined text-transparent">
+            MADE WITH LOVE BY
+          </div>
+          <div className="text-text-light text-xl xs:text-2xl sm:text-4xl lg:text-6xl absolute w-full leading-none bottom-[-10%]">
+            TEAM CODEX
+          </div>
+        </div>
+      </div>
+
+      <div className="max-w-7xl mx-auto px-4 py-12 sm:py-16">
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-8 sm:gap-12 md:gap-20 text-center sm:text-left">
+          <div className="space-y-6 flex flex-col justify-between items-center sm:items-start">
+            <p className="text-secondary-light leading-relaxed">
+              Our club is committed to creating an engaging environment where
+              members can learn, collaborate, and grow their coding expertise
+              through a variety of activities and events.
+            </p>
+            <div className="flex flex-col sm:flex-row items-center sm:items-start gap-4 sm:gap-4 md:w-full">
+              <img
+                src={SitLogo}
+                alt="Symbiosis Logo"
+                className="h-10 md:h-12"
+              />
+              <div className="hidden sm:block w-px h-10 bg-secondary-light"></div>
+              <img src={Logo} alt="CodeX Logo" className="h-10 md:h-12" />
+            </div>
+          </div>
+
+          <div className="flex flex-row  gap-8 text-center justify-center  sm:text-left ">
+            {/* Quick Links */}
+            <div className="flex-1">
+              <h4 className="text-lg font-medium mb-4 text-secondary-light relative inline-block sm:block">
+                QUICK LINKS
+                <span className="absolute bottom-0 left-0 w-full h-[2px] bg-secondary-light"></span>
+              </h4>
+              <ul className="space-y-2 text-text-light text-sm sm:text-base">
+                {[
+                  { name: "Home", path: "/" },
+                  { name: "About Us", path: "/about-us" },
+                  { name: "Our Team", path: "/teams" },
+                  { name: "Gallery", path: "/gallery" },
+                  { name: "Events", path: "/events" },
+                  { name: "Contact", path: "/contact" },
+                ].map((link) => (
+                  <li
+                    key={link.name}
+                    className={`cursor-pointer ${
+                      location.pathname === link.path
+                        ? "text-secondary-light"
+                        : ""
+                    }`}
+                  >
+                    <Link to={link.path} onClick={handleLinkClick}>
+                      {link.name}
+                    </Link>
+                  </li>
+                ))}
+              </ul>
+            </div>
+            <div className="flex flex-col flex-1 md:flex-[2] md:flex-row gap-4">
+              {/* Social Links */}
+              <div className="flex-1">
+                <h4 className="text-lg font-medium mb-4 text-secondary-light relative inline-block sm:block ">
+                  SOCIAL
+                  <span className="absolute bottom-0 left-0 w-full h-[2px] bg-secondary-light"></span>
+                </h4>
+                <ul className="space-y-2 text-text-light text-sm sm:text-base">
+                  <li className="cursor-pointer">
+                    <a href="https://www.instagram.com/codex_sit/">Instagram</a>
+                  </li>
+                  <li className="cursor-pointer">
+                    <a href="https://www.linkedin.com/company/codex-sit-pune/">
+                      LinkedIn
+                    </a>
+                  </li>
+                  <li className="cursor-pointer">
+                    <a href="https://github.com/codeXsit">Github</a>
+                  </li>
+                </ul>
+              </div>
+
+              {/* Contact Section */}
+              <div className="col-span-2 sm:col-span-1 flex flex-col flex-1 items-center sm:items-start text-center sm:text-left">
+                <div className="relative bottom-0 left-0 w-full">
+                  <h4 className="text-lg font-medium mb-4 text-secondary-light relative inline-block sm:block">
+                    CONTACT
+                    <span className="absolute bottom-0 left-0 w-full h-[2px] bg-secondary-light"></span>
+                  </h4>
+                </div>
+                <ul className="space-y-2 text-text-light text-sm sm:text-base">
+                  <li>
+                    <a href="mailto:codexsit@gmail.com" className="underline">
+                      Drop us a Message
+                    </a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Copyright */}
+      <div className="border-t border-secondary-light">
+        <div className="max-w-6xl mx-auto px-4 py-4">
+          <p className="text-center text-sm sm:text-base text-secondary-light">
+            © 2024 CodeX | All rights reserved
+          </p>
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;

src/pages/Contact/index.jsx

@@ -54,9 +54,6 @@ function Contact() {
           <span className="text-outlined uppercase text-8xl font-black text-transparent whitespace-nowrap">
             Contact Us
           </span>
-          <span className="text-text-light uppercase text-8xl font-black">
-            Events
-          </span>
         </div>
         <div className="mx-10 mt-16">
           <form onSubmit={onSubmit}>