From 69a97e7f8ff747f2356712d979c5c764be46d727 Mon Sep 17 00:00:00 2001
From: Navin  Karavade <navinkaravade@gmail.com>
Date: Fri, 6 Feb 2026 09:27:56 +0000
Subject: [PATCH 1/2] Improve footer alignment and spacing using responsive
 grid and consistent layout

---
 src/components/common/footer/index.tsx | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/components/common/footer/index.tsx b/src/components/common/footer/index.tsx
index 73d680f..ba2681d 100644
--- a/src/components/common/footer/index.tsx
+++ b/src/components/common/footer/index.tsx
@@ -41,10 +41,10 @@ const Footer = () => {
 
   return (
     <footer className="border-t border-white/5 bg-[#0B1220]">
-      <div className="mx-auto grid max-w-7xl gap-8 px-4 py-12 sm:px-6 md:grid-cols-3 lg:px-8">
-        <div>
+      <div className="mx-auto grid max-w-7xl grid-cols-1 items-start gap-10 px-4 py-12 sm:px-6 md:grid-cols-3 lg:px-8">
+        <div className="space-y-3">
           <Link href="/" className="flex items-center gap-1" aria-label="React Kolkata Home">
-            <div className="relative h-25 w-25">
+            <div className="relative h-16 w-16">
               <Image
                 alt="react kolkata brand logo"
                 src="/logo.svg"
@@ -57,7 +57,7 @@ const Footer = () => {
           <p className="text-sm text-slate-400">{t("description")}</p>
         </div>
 
-        <nav aria-label="Quick links">
+        <nav aria-label="Quick links" className="space-y-3">
           <h3 className="text-sm font-semibold text-slate-200">{t("quick_links_title")}</h3>
           <ul className="mt-3 space-y-2">
             {quickLinks.map((l) => (
@@ -81,7 +81,7 @@ const Footer = () => {
           </ul>
         </nav>
 
-        <div>
+        <div className="space-y-3">
           <h3 className="text-sm font-semibold text-slate-200">{t("contact_title")}</h3>
           <ul className="mt-3 space-y-2 text-sm text-slate-400">
             <li className="flex items-center gap-2">
@@ -90,7 +90,7 @@ const Footer = () => {
                 reactkolkata@gmail.com
               </a>
             </li>
-            <li className="mt-4 flex items-center gap-4">
+            <li className="mt-4 flex flex-wrap items-center gap-4">
               <a
                 className="hover:text-white"
                 aria-label={t("aria_labels.x")}
@@ -99,7 +99,7 @@ const Footer = () => {
                 rel="noreferrer"
                 onClick={() => handleSocialClick("X")}
               >
-                <XLogo className="h-5 w-5 text-slate-400 hover:text-white" />
+                <XLogo className="h-5 w-5 text-slate-400 transition hover:text-white" />
               </a>
               <a
                 className="hover:text-white"
@@ -109,7 +109,7 @@ const Footer = () => {
                 rel="noreferrer"
                 onClick={() => handleSocialClick("GitHub")}
               >
-                <Github className="h-5 w-5" />
+                <Github className="h-5 w-5 text-slate-400 transition hover:text-white" />
               </a>
               <a
                 className="hover:text-white"
@@ -119,7 +119,7 @@ const Footer = () => {
                 rel="noreferrer"
                 onClick={() => handleSocialClick("LinkedIn")}
               >
-                <Linkedin className="h-5 w-5" />
+                <Linkedin className="h-5 w-5 text-slate-400 transition hover:text-white" />
               </a>
               <a
                 className="hover:text-white"
@@ -129,7 +129,7 @@ const Footer = () => {
                 rel="noreferrer"
                 onClick={() => handleSocialClick("YouTube")}
               >
-                <Youtube className="h-5 w-5" />
+                <Youtube className="h-5 w-5 text-slate-400 transition hover:text-white" />
               </a>
               <a
                 className="hover:text-white"
@@ -139,14 +139,14 @@ const Footer = () => {
                 rel="noreferrer"
                 onClick={() => handleSocialClick("Discord")}
               >
-                <SiDiscord className="h-5 w-5" />
+                <SiDiscord className="h-5 w-5 text-slate-400 transition hover:text-white" />
               </a>
             </li>
           </ul>
         </div>
       </div>
       <div className="border-t border-white/5">
-        <div className="mx-auto flex max-w-7xl items-center justify-center px-4 py-6 text-xs text-slate-500 sm:px-6 lg:px-8">
+        <div className="mx-auto flex max-w-7xl items-center justify-center px-4 py-6 text-xs tracking-wide text-slate-400 sm:px-6 lg:px-8">
           <p>
             &copy; {new Date().getFullYear()} {t("rights_reserved")}
           </p>

From 116635bec6106eeb7dd0a862ad564c6b26fc31e9 Mon Sep 17 00:00:00 2001
From: Navin  Karavade <navinkaravade@gmail.com>
Date: Sat, 7 Feb 2026 11:12:26 +0530
Subject: [PATCH 2/2] Refactor footer component structure and styles

- Simplified footer component structure
- Improved responsive grid layout
- Cleaned Tailwind classes
- Unified link handling (internal/external)
- Added social icons with hover effects
- Enhanced accessibility and readability


Signed-off-by: Navin  Karavade <navinkaravade@gmail.com>
---
 src/components/common/footer/index.tsx | 205 ++++++++++++++-----------
 1 file changed, 115 insertions(+), 90 deletions(-)

diff --git a/src/components/common/footer/index.tsx b/src/components/common/footer/index.tsx
index ba2681d..b96e83a 100644
--- a/src/components/common/footer/index.tsx
+++ b/src/components/common/footer/index.tsx
@@ -2,13 +2,12 @@
 
 import Image from "next/image";
 import NextLink from "next/link";
-import { trackGAEvent } from "@/utils/analytics";
 import { Github, Linkedin, Mail, Youtube } from "lucide-react";
-import { useTranslations } from "next-intl";
 import { SiDiscord } from "react-icons/si";
+import { useTranslations } from "next-intl";
 
+import { trackGAEvent } from "@/utils/analytics";
 import { Link } from "@/config/i18n/navigation";
-
 import { XLogo } from "../icons/XLogo";
 
 const Footer = () => {
@@ -40,26 +39,44 @@ const Footer = () => {
   };
 
   return (
-    <footer className="border-t border-white/5 bg-[#0B1220]">
-      <div className="mx-auto grid max-w-7xl grid-cols-1 items-start gap-10 px-4 py-12 sm:px-6 md:grid-cols-3 lg:px-8">
-        <div className="space-y-3">
-          <Link href="/" className="flex items-center gap-1" aria-label="React Kolkata Home">
-            <div className="relative h-16 w-16">
-              <Image
-                alt="react kolkata brand logo"
-                src="/logo.svg"
-                fill
-                className="object-contain"
-                priority
-              />
-            </div>
+    <footer className="border-t border-white/5 bg-[#0B1220] text-slate-400">
+
+      {/* ===== MAIN GRID ===== */}
+      <div className="mx-auto grid max-w-7xl grid-cols-1 gap-10 px-6 py-14 md:grid-cols-3">
+
+        {/* LEFT — BRAND */}
+        <div className="space-y-4">
+          <Link
+            href="/"
+            className="flex items-center gap-3"
+            aria-label="React Kolkata Home"
+          >
+            <Image
+              src="/logo.svg"
+              alt="React Kolkata logo"
+              width={60}
+              height={60}
+              className="object-contain"
+              priority
+            />
+
+            <span className="text-lg font-semibold text-white">
+              React Kolkata
+            </span>
           </Link>
-          <p className="text-sm text-slate-400">{t("description")}</p>
+
+          <p className="text-sm leading-relaxed">
+            {t("description")}
+          </p>
         </div>
 
-        <nav aria-label="Quick links" className="space-y-3">
-          <h3 className="text-sm font-semibold text-slate-200">{t("quick_links_title")}</h3>
-          <ul className="mt-3 space-y-2">
+        {/* MIDDLE — QUICK LINKS */}
+        <nav aria-label="Quick links">
+          <h3 className="mb-4 text-sm font-semibold text-white">
+            {t("quick_links_title")}
+          </h3>
+
+          <ul className="space-y-3 text-sm">
             {quickLinks.map((l) => (
               <li key={l.href}>
                 {l.external ? (
@@ -67,12 +84,15 @@ const Footer = () => {
                     href={l.href}
                     target="_blank"
                     rel="noopener noreferrer"
-                    className="text-sm text-slate-400 hover:text-slate-200"
+                    className="hover:text-white transition"
                   >
                     {l.label}
                   </NextLink>
                 ) : (
-                  <Link href={l.href} className="text-sm text-slate-400 hover:text-slate-200">
+                  <Link
+                    href={l.href}
+                    className="hover:text-white transition"
+                  >
                     {l.label}
                   </Link>
                 )}
@@ -81,76 +101,81 @@ const Footer = () => {
           </ul>
         </nav>
 
-        <div className="space-y-3">
-          <h3 className="text-sm font-semibold text-slate-200">{t("contact_title")}</h3>
-          <ul className="mt-3 space-y-2 text-sm text-slate-400">
-            <li className="flex items-center gap-2">
-              <Mail className="h-4 w-4" aria-hidden />{" "}
-              <a href="mailto:reactkolkata@gmail.com" className="hover:text-slate-200">
-                reactkolkata@gmail.com
-              </a>
-            </li>
-            <li className="mt-4 flex flex-wrap items-center gap-4">
-              <a
-                className="hover:text-white"
-                aria-label={t("aria_labels.x")}
-                href="https://x.com/reactkolkata"
-                target="_blank"
-                rel="noreferrer"
-                onClick={() => handleSocialClick("X")}
-              >
-                <XLogo className="h-5 w-5 text-slate-400 transition hover:text-white" />
-              </a>
-              <a
-                className="hover:text-white"
-                aria-label={t("aria_labels.github")}
-                href="https://github.com/reactplay/react-kolkata"
-                target="_blank"
-                rel="noreferrer"
-                onClick={() => handleSocialClick("GitHub")}
-              >
-                <Github className="h-5 w-5 text-slate-400 transition hover:text-white" />
-              </a>
-              <a
-                className="hover:text-white"
-                aria-label={t("aria_labels.linkedin")}
-                href="https://www.linkedin.com/showcase/react-kolkata"
-                target="_blank"
-                rel="noreferrer"
-                onClick={() => handleSocialClick("LinkedIn")}
-              >
-                <Linkedin className="h-5 w-5 text-slate-400 transition hover:text-white" />
-              </a>
-              <a
-                className="hover:text-white"
-                aria-label={t("aria_labels.youtube")}
-                href="https://www.youtube.com/@ReactPlayIO"
-                target="_blank"
-                rel="noreferrer"
-                onClick={() => handleSocialClick("YouTube")}
-              >
-                <Youtube className="h-5 w-5 text-slate-400 transition hover:text-white" />
-              </a>
-              <a
-                className="hover:text-white"
-                aria-label={t("aria_labels.discord")}
-                href="https://discord.gg/VRVfn2Vss"
-                target="_blank"
-                rel="noreferrer"
-                onClick={() => handleSocialClick("Discord")}
-              >
-                <SiDiscord className="h-5 w-5 text-slate-400 transition hover:text-white" />
-              </a>
-            </li>
-          </ul>
+        {/* RIGHT — CONTACT */}
+        <div>
+          <h3 className="mb-4 text-sm font-semibold text-white">
+            {t("contact_title")}
+          </h3>
+
+          {/* Email */}
+          <div className="flex items-center gap-2 text-sm">
+            <Mail className="h-4 w-4" />
+            <a
+              href="mailto:reactkolkata@gmail.com"
+              className="hover:text-white transition"
+            >
+              reactkolkata@gmail.com
+            </a>
+          </div>
+
+          {/* Socials */}
+          <div className="mt-6 flex flex-wrap items-center gap-5">
+            <a
+              href="https://x.com/reactkolkata"
+              target="_blank"
+              rel="noreferrer"
+              onClick={() => handleSocialClick("X")}
+              className="text-slate-400 hover:text-white transition"
+            >
+              <XLogo className="h-5 w-5" />
+            </a>
+
+            <a
+              href="https://github.com/reactplay/react-kolkata"
+              target="_blank"
+              rel="noreferrer"
+              onClick={() => handleSocialClick("GitHub")}
+              className="text-slate-400 hover:text-white transition"
+            >
+              <Github className="h-5 w-5" />
+            </a>
+
+            <a
+              href="https://www.linkedin.com/showcase/react-kolkata"
+              target="_blank"
+              rel="noreferrer"
+              onClick={() => handleSocialClick("LinkedIn")}
+              className="text-slate-400 hover:text-white transition"
+            >
+              <Linkedin className="h-5 w-5" />
+            </a>
+
+            <a
+              href="https://www.youtube.com/@ReactPlayIO"
+              target="_blank"
+              rel="noreferrer"
+              onClick={() => handleSocialClick("YouTube")}
+              className="text-slate-400 hover:text-white transition"
+            >
+              <Youtube className="h-5 w-5" />
+            </a>
+
+            <a
+              href="https://discord.gg/VRVfn2Vss"
+              target="_blank"
+              rel="noreferrer"
+              onClick={() => handleSocialClick("Discord")}
+              className="text-slate-400 hover:text-white transition"
+            >
+              <SiDiscord className="h-5 w-5" />
+            </a>
+          </div>
         </div>
       </div>
-      <div className="border-t border-white/5">
-        <div className="mx-auto flex max-w-7xl items-center justify-center px-4 py-6 text-xs tracking-wide text-slate-400 sm:px-6 lg:px-8">
-          <p>
-            &copy; {new Date().getFullYear()} {t("rights_reserved")}
-          </p>
-        </div>
+
+      {/* ===== BOTTOM BAR ===== */}
+      <div className="border-t border-white/5 py-6 text-center text-xs">
+        © {new Date().getFullYear()} {t("rights_reserved")}
       </div>
     </footer>
   );