From 26459586864790f6e4dbacb19a65381b36644e9c Mon Sep 17 00:00:00 2001
From: ankitkr104 <itx.ankit.kr@gmail.com>
Date: Thu, 26 Feb 2026 13:57:39 +0530
Subject: [PATCH] fix: resolve footer alignment issues (#31)

- Remove side gaps and ensure full-width coverage
- Fix uneven spacing between footer sections
- Align text and icons properly
- Reduce footer height for better proportions
- Add consistent padding and gap spacing
- Implement responsive layout for mobile devices
- Style social icons with glass effect matching navbar
- Ensure consistent layout across different screen sizes

Fixes #31
---
 src/App.css                            | 101 ++++++++++++++++++++++++-
 src/components/pages/footer/Footer.tsx |  26 ++++---
 2 files changed, 116 insertions(+), 11 deletions(-)

diff --git a/src/App.css b/src/App.css
index b55a7e5..6ac8bc9 100644
--- a/src/App.css
+++ b/src/App.css
@@ -400,4 +400,103 @@
   a:nth-of-type(2) .logo {
     animation: logo-spin infinite 20s linear;
   }
-}
\ No newline at end of file
+}
+
+/* Footer Styles */
+.footer-container {
+  width: 100%;
+  padding: 1.5rem 0;
+  margin-top: 4rem;
+  background: rgba(21, 21, 21, 0.5);
+  border-top: 1px solid rgba(243, 193, 129, 0.1);
+}
+
+.footer-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  max-width: 100%;
+  padding: 0 2rem;
+  gap: 2rem;
+}
+
+.footer-copyright {
+  font-family: 'Montserrat', sans-serif;
+  font-size: 14px;
+  color: #F9EBDB;
+  margin: 0;
+}
+
+.footer-brand {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.footer-brand img {
+  width: 32px;
+  height: auto;
+}
+
+.footer-title {
+  font-family: 'Space Mono', monospace;
+  font-size: 18px;
+  font-weight: 700;
+  color: #F9EBDB;
+  margin: 0;
+  white-space: nowrap;
+}
+
+.footer-social {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.footer-social a {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  padding: 0.5rem;
+  background: rgba(243, 193, 129, 0.1);
+  border: 1px solid rgba(243, 193, 129, 0.2);
+  border-radius: 50%;
+  transition: all 0.3s ease;
+}
+
+.footer-social a:hover {
+  background: rgba(243, 193, 129, 0.2);
+  border-color: rgba(243, 193, 129, 0.4);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(243, 193, 129, 0.3);
+}
+
+.footer-social img {
+  width: 20px;
+  height: 20px;
+  object-fit: contain;
+}
+
+/* Footer Mobile Responsive */
+@media screen and (max-width: 768px) {
+  .footer-content {
+    flex-direction: column;
+    text-align: center;
+    padding: 0 1rem;
+  }
+
+  .footer-copyright {
+    order: 3;
+    margin-top: 1rem;
+  }
+
+  .footer-brand {
+    order: 1;
+  }
+
+  .footer-social {
+    order: 2;
+  }
+}
diff --git a/src/components/pages/footer/Footer.tsx b/src/components/pages/footer/Footer.tsx
index da89b7f..bafdaca 100644
--- a/src/components/pages/footer/Footer.tsx
+++ b/src/components/pages/footer/Footer.tsx
@@ -5,17 +5,23 @@ import Twitter from '../../../assets/Twitter.png';
 
 const Footer = () => {
 	return (
-		<footer className='my-5'>
-			<div className='flex lg:flex-row flex-col lg:justify-evenly align-middle sm:justify-center md:justify-center'>
-				<p className='footerText lg:text-md sm:text-sm lg:mt-6 mb-3'>© Djed Alliance. All rights reserved.</p>
-				<div className='flex flex-row justify-center align-middle lg:my-0 my-3'>
-					<img src={Logo} className="mx-2 mb-1" alt="Djed Alliance logo" />
-					<p className='footerText lg:text-xl sm:text-sm mt-3 whitespace-pre'>Djed Alliance</p>
+		<footer className='footer-container'>
+			<div className='footer-content'>
+				<p className='footer-copyright'>© Djed Alliance. All rights reserved.</p>
+				<div className='footer-brand'>
+					<img src={Logo} alt="Djed Alliance logo" />
+					<p className='footer-title'>Djed Alliance</p>
 				</div>
-				<div className='flex flex-row mt-3 justify-center'>
-					<a href="https://discord.com/invite/5TWZwGXXym" target="_blank" rel="noreferrer" aria-label="Join Djed Alliance on Discord"><img className="socialImage mx-2 cursor-pointer" src={Discord} alt="Discord" /></a>
-					<a href="https://github.com/DjedAlliance" target="_blank" rel="noreferrer" aria-label="Djed Alliance GitHub"><img className="socialImage mx-2 cursor-pointer" src={GitHub} alt="GitHub" /></a>
-					<a href="https://twitter.com/DjedAlliance" target="_blank" rel="noreferrer" aria-label="Follow Djed Alliance on X (Twitter)"><img className="socialImage mx-2 cursor-pointer" src={Twitter} alt="X (Twitter)" /></a>
+				<div className='footer-social'>
+					<a href="https://discord.com/invite/5TWZwGXXym" target="_blank" rel="noreferrer" aria-label="Join Djed Alliance on Discord">
+						<img src={Discord} alt="Discord" />
+					</a>
+					<a href="https://github.com/DjedAlliance" target="_blank" rel="noreferrer" aria-label="Djed Alliance GitHub">
+						<img src={GitHub} alt="GitHub" />
+					</a>
+					<a href="https://twitter.com/DjedAlliance" target="_blank" rel="noreferrer" aria-label="Follow Djed Alliance on X (Twitter)">
+						<img src={Twitter} alt="X (Twitter)" />
+					</a>
 				</div>
 			</div>
 		</footer>