Skip to content

Commit e92359a

Browse files
priyankarpalpriyankarpal
authored
Merge branch 'main' into main
2 parents d2004d8 + 57ddf80 commit e92359a

File tree

1 file changed

+90
-86
lines changed

1 file changed

+90
-86
lines changed

‎src/components/common/footer/index.tsx‎

Lines changed: 90 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -40,39 +40,43 @@ const Footer = () => {
4040
};
4141

4242
return (
43-
<footer className="border-t border-white/5 bg-[#0B1220]">
44-
<div className="mx-auto grid max-w-7xl gap-8 px-4 py-12 sm:px-6 md:grid-cols-3 lg:px-8">
45-
<div>
46-
<Link href="/" className="flex items-center gap-1" aria-label="React Kolkata Home">
47-
<div className="relative h-25 w-25">
48-
<Image
49-
alt="react kolkata brand logo"
50-
src="/logo.svg"
51-
fill
52-
className="object-contain"
53-
priority
54-
/>
55-
</div>
43+
<footer className="border-t border-white/5 bg-[#0B1220] text-slate-400">
44+
{/* ===== MAIN GRID ===== */}
45+
<div className="mx-auto grid max-w-7xl grid-cols-1 gap-10 px-6 py-14 md:grid-cols-3">
46+
{/* LEFT — BRAND */}
47+
<div className="space-y-4">
48+
<Link href="/" className="flex items-center gap-3" aria-label="React Kolkata Home">
49+
<Image
50+
src="/logo.svg"
51+
alt="React Kolkata logo"
52+
width={60}
53+
height={60}
54+
className="object-contain"
55+
priority
56+
/>
5657
</Link>
57-
<p className="text-sm text-slate-400">{t("description")}</p>
58+
59+
<p className="text-sm leading-relaxed">{t("description")}</p>
5860
</div>
5961

60-
<nav aria-label="Quick links">
61-
<h3 className="text-sm font-semibold text-slate-200">{t("quick_links_title")}</h3>
62-
<ul className="mt-3 space-y-2">
62+
{/* MIDDLE — QUICK LINKS (Centered) */}
63+
<nav aria-label="Quick links" className="flex flex-col items-center text-center">
64+
<h3 className="mb-4 text-sm font-semibold text-white">{t("quick_links_title")}</h3>
65+
66+
<ul className="space-y-3 text-sm">
6367
{quickLinks.map((l) => (
6468
<li key={l.href}>
6569
{l.external ? (
6670
<NextLink
6771
href={l.href}
6872
target="_blank"
6973
rel="noopener noreferrer"
70-
className="text-sm text-slate-400 hover:text-slate-200"
74+
className="transition hover:text-white"
7175
>
7276
{l.label}
7377
</NextLink>
7478
) : (
75-
<Link href={l.href} className="text-sm text-slate-400 hover:text-slate-200">
79+
<Link href={l.href} className="transition hover:text-white">
7680
{l.label}
7781
</Link>
7882
)}
@@ -81,76 +85,76 @@ const Footer = () => {
8185
</ul>
8286
</nav>
8387

88+
{/* RIGHT — CONTACT */}
8489
<div>
85-
<h3 className="text-sm font-semibold text-slate-200">{t("contact_title")}</h3>
86-
<ul className="mt-3 space-y-2 text-sm text-slate-400">
87-
<li className="flex items-center gap-2">
88-
<Mail className="h-4 w-4" aria-hidden />{" "}
89-
<a href="mailto:reactkolkata@gmail.com" className="hover:text-slate-200">
90-
reactkolkata@gmail.com
91-
</a>
92-
</li>
93-
<li className="mt-4 flex items-center gap-4">
94-
<a
95-
className="hover:text-white"
96-
aria-label={t("aria_labels.x")}
97-
href="https://x.com/reactkolkata"
98-
target="_blank"
99-
rel="noreferrer"
100-
onClick={() => handleSocialClick("X")}
101-
>
102-
<XLogo className="h-5 w-5 text-slate-400 hover:text-white" />
103-
</a>
104-
<a
105-
className="hover:text-white"
106-
aria-label={t("aria_labels.github")}
107-
href="https://github.com/reactplay/react-kolkata"
108-
target="_blank"
109-
rel="noreferrer"
110-
onClick={() => handleSocialClick("GitHub")}
111-
>
112-
<Github className="h-5 w-5" />
113-
</a>
114-
<a
115-
className="hover:text-white"
116-
aria-label={t("aria_labels.linkedin")}
117-
href="https://www.linkedin.com/showcase/react-kolkata"
118-
target="_blank"
119-
rel="noreferrer"
120-
onClick={() => handleSocialClick("LinkedIn")}
121-
>
122-
<Linkedin className="h-5 w-5" />
123-
</a>
124-
<a
125-
className="hover:text-white"
126-
aria-label={t("aria_labels.youtube")}
127-
href="https://www.youtube.com/@ReactPlayIO"
128-
target="_blank"
129-
rel="noreferrer"
130-
onClick={() => handleSocialClick("YouTube")}
131-
>
132-
<Youtube className="h-5 w-5" />
133-
</a>
134-
<a
135-
className="hover:text-white"
136-
aria-label={t("aria_labels.discord")}
137-
href="https://discord.gg/VRVfn2Vss"
138-
target="_blank"
139-
rel="noreferrer"
140-
onClick={() => handleSocialClick("Discord")}
141-
>
142-
<SiDiscord className="h-5 w-5" />
143-
</a>
144-
</li>
145-
</ul>
90+
<h3 className="mb-4 text-sm font-semibold text-white">{t("contact_title")}</h3>
91+
92+
{/* Email */}
93+
<div className="flex items-center gap-2 text-sm">
94+
<Mail className="h-4 w-4" />
95+
<a href="mailto:reactkolkata@gmail.com" className="transition hover:text-white">
96+
reactkolkata@gmail.com
97+
</a>
98+
</div>
99+
100+
{/* Socials */}
101+
<div className="mt-6 flex flex-wrap items-center gap-5">
102+
<a
103+
href="https://x.com/reactkolkata"
104+
target="_blank"
105+
rel="noreferrer"
106+
onClick={() => handleSocialClick("X")}
107+
className="text-slate-400 transition hover:text-white"
108+
>
109+
<XLogo className="h-5 w-5" />
110+
</a>
111+
112+
<a
113+
href="https://github.com/reactplay/react-kolkata"
114+
target="_blank"
115+
rel="noreferrer"
116+
onClick={() => handleSocialClick("GitHub")}
117+
className="text-slate-400 transition hover:text-white"
118+
>
119+
<Github className="h-5 w-5" />
120+
</a>
121+
122+
<a
123+
href="https://www.linkedin.com/showcase/react-kolkata"
124+
target="_blank"
125+
rel="noreferrer"
126+
onClick={() => handleSocialClick("LinkedIn")}
127+
className="text-slate-400 transition hover:text-white"
128+
>
129+
<Linkedin className="h-5 w-5" />
130+
</a>
131+
132+
<a
133+
href="https://www.youtube.com/@ReactPlayIO"
134+
target="_blank"
135+
rel="noreferrer"
136+
onClick={() => handleSocialClick("YouTube")}
137+
className="text-slate-400 transition hover:text-white"
138+
>
139+
<Youtube className="h-5 w-5" />
140+
</a>
141+
142+
<a
143+
href="https://discord.gg/VRVfn2Vss"
144+
target="_blank"
145+
rel="noreferrer"
146+
onClick={() => handleSocialClick("Discord")}
147+
className="text-slate-400 transition hover:text-white"
148+
>
149+
<SiDiscord className="h-5 w-5" />
150+
</a>
151+
</div>
146152
</div>
147153
</div>
148-
<div className="border-t border-white/5">
149-
<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">
150-
<p>
151-
&copy; {new Date().getFullYear()} {t("rights_reserved")}
152-
</p>
153-
</div>
154+
155+
{/* ===== BOTTOM BAR ===== */}
156+
<div className="border-t border-white/5 py-6 text-center text-xs">
157+
© {new Date().getFullYear()} {t("rights_reserved")}
154158
</div>
155159
</footer>
156160
);

0 commit comments

Comments
 (0)