Skip to content

Improve footer alignment and spacing using responsive grid and consis… #142

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
navin-oss wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Improve footer alignment and spacing using responsive grid and consis… #142

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
69a97e7
Improve footer alignment and spacing using responsive grid and consis…
navin-oss Feb 6, 2026
116635b
Refactor footer component structure and styles
navin-oss Feb 7, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
201 changes: 113 additions & 88 deletions src/components/common/footer/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = () => {
Expand Down Expand Up @@ -40,39 +39,60 @@ 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>
<Link href="/" className="flex items-center gap-1" aria-label="React Kolkata Home">
<div className="relative h-25 w-25">
<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>
Comment on lines +63 to +65
Copy link
Member

@priyankarpal priyankarpal Feb 9, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

remove this one cause we already added logo there.

</Link>
<p className="text-sm text-slate-400">{t("description")}</p>

<p className="text-sm leading-relaxed">
{t("description")}
</p>
</div>

{/* MIDDLE — QUICK LINKS */}
<nav aria-label="Quick links">
<h3 className="text-sm font-semibold text-slate-200">{t("quick_links_title")}</h3>
<ul className="mt-3 space-y-2">
<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 ? (
<NextLink
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>
)}
Expand All @@ -81,76 +101,81 @@ const Footer = () => {
</ul>
</nav>

{/* RIGHT — CONTACT */}
<div>
<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 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 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" />
</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" />
</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" />
</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" />
</a>
</li>
</ul>
<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 text-slate-500 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>
);
Expand Down