From 5625b6b19a4adaf5851a5f320af2c38068425145 Mon Sep 17 00:00:00 2001
From: Aarya Chaudhari <aaryachaudhari0508@gmail.com>
Date: Sat, 31 Jan 2026 17:41:34 +0530
Subject: [PATCH] feat: add responsive footer with structured grey design

---
 client/src/App.tsx               |  3 ++
 client/src/components/Footer.css | 88 ++++++++++++++++++++++++++++++++
 client/src/components/Footer.tsx | 56 ++++++++++++++++++++
 3 files changed, 147 insertions(+)
 create mode 100644 client/src/components/Footer.css
 create mode 100644 client/src/components/Footer.tsx

diff --git a/client/src/App.tsx b/client/src/App.tsx
index 762befb8..843e2282 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -4,6 +4,7 @@ import { AppUnProtectedRoutes } from './app/routes';
 import { AppProtectedRoutes } from './app/routes/auth-routes';
 import useScrollbar from './shared/components/atoms/scrollbar';
 import { useAuth } from './shared/hooks/use-auth';
+import Footer from './components/Footer';
 
 const App = memo(() => {
   const { GlobalScrollbar } = useScrollbar();
@@ -19,6 +20,7 @@ const App = memo(() => {
       <>
         <GlobalScrollbar />
         <AppUnProtectedRoutes />
+        <Footer />
       </>
     );
   }
@@ -27,6 +29,7 @@ const App = memo(() => {
     <>
       <GlobalScrollbar />
       <AppProtectedRoutes />
+      <Footer />
     </>
   );
 });
diff --git a/client/src/components/Footer.css b/client/src/components/Footer.css
new file mode 100644
index 00000000..aa85b47d
--- /dev/null
+++ b/client/src/components/Footer.css
@@ -0,0 +1,88 @@
+.footer {
+  width: 100%;
+  margin-top: 72px;
+  background-color: #e5e7eb; /* darker neutral grey */
+  border-top: 1px solid #d1d5db;
+  color: #374151;
+  font-size: 14px;
+}
+
+.footer-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 36px 28px 28px;
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+  row-gap: 24px;
+}
+
+/* Left */
+.footer-copy {
+  font-weight: 600;
+  color: #111827;
+}
+
+/* Center links */
+.footer-links {
+  list-style: none;
+  display: flex;
+  gap: 22px;
+  padding: 0;
+  margin: 0;
+  justify-content: center;
+}
+
+.footer-links a {
+  color: #374151;
+  text-decoration: none;
+  font-weight: 500;
+}
+
+.footer-links a:hover {
+  color: #000000;
+  text-decoration: underline;
+}
+
+/* Right socials */
+.footer-socials {
+  display: flex;
+  gap: 18px;
+  justify-content: flex-end;
+}
+
+.footer-socials a {
+  color: #4b5563;
+  text-decoration: none;
+  font-weight: 500;
+}
+
+.footer-socials a:hover {
+  color: #000000;
+}
+
+/* Bottom credit */
+.footer-credit {
+  grid-column: 1 / -1;
+  text-align: center;
+  margin-top: 8px;
+  font-size: 13px;
+  color: #6b7280;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .footer-container {
+    grid-template-columns: 1fr;
+    text-align: center;
+  }
+
+  .footer-links {
+    flex-wrap: wrap;
+    gap: 14px;
+  }
+
+  .footer-socials {
+    justify-content: center;
+  }
+}
diff --git a/client/src/components/Footer.tsx b/client/src/components/Footer.tsx
new file mode 100644
index 00000000..2a725563
--- /dev/null
+++ b/client/src/components/Footer.tsx
@@ -0,0 +1,56 @@
+import "./Footer.css";
+
+export default function Footer() {
+  return (
+    <footer className="footer">
+      <div className="footer-container">
+        <p className="footer-copy">
+          © {new Date().getFullYear()} Code A2Z
+        </p>
+
+        <ul className="footer-links">
+          <li><a href="/about">About</a></li>
+          <li><a href="/blog">Blog</a></li>
+          <li>
+            <a
+              href="https://github.com/Code-A2Z"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              GitHub
+            </a>
+          </li>
+          <li><a href="/contact">Contact</a></li>
+        </ul>
+
+        <div className="footer-socials">
+          <a
+            href="https://github.com/Code-A2Z"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            GitHub
+          </a>
+          <a
+            href="https://www.linkedin.com"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            LinkedIn
+          </a>
+          <a
+            href="https://x.com"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            X
+          </a>
+        </div>
+
+        <p className="footer-credit">
+          Built with ❤️ by Code A2Z
+        </p>
+      </div>
+    </footer>
+  );
+}