Skip to content

Commit 81bdd82

Browse files
arghyaxcodesarghyaxcodes
committed
feat(footer): implement footer component with navigation links and social icons
1 parent 2f7f393 commit 81bdd82

File tree

1 file changed

+141
-0
lines changed

1 file changed

+141
-0
lines changed

‎src/components/footer.tsx‎

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
import Logo from "@/components/logo";
2+
import Link from "next/link";
3+
import {
4+
DiscordIcon,
5+
GitHubIcon,
6+
OpenCollectiveIcon,
7+
TwitterIcon,
8+
} from "@/components/icons";
9+
10+
const footerNav = {
11+
"Getting Started": [
12+
{ title: "Home", href: "/" },
13+
{ title: "Docs", href: "/docs" },
14+
{ title: "Programs", href: "/programs" },
15+
{ title: "Roadmap", href: "/roadmap" },
16+
],
17+
Javaistic: [
18+
{ title: "About", href: "/about" },
19+
{ title: "Team", href: "/team" },
20+
{ title: "Blog", href: "/blog" },
21+
{ title: "Sponsors", href: "/sponsors" },
22+
],
23+
Resources: [
24+
{ title: "Changelog", href: "/changelog" },
25+
{ title: "Open Source", href: "/open-source" },
26+
{ title: "Contact Us", href: "/contact" },
27+
],
28+
Legal: [
29+
{ title: "Privacy Policy", href: "/privacy" },
30+
{ title: "Terms of Service", href: "/terms" },
31+
{ title: "License", href: "/license" },
32+
{ title: "Security", href: "/security" },
33+
],
34+
};
35+
36+
export function Footer() {
37+
return (
38+
<footer className="bg-neutral-100 dark:bg-neutral-900 pt-16 pb-10 sm:pt-20 md:pt-24 xl:pt-28">
39+
<div className="mx-auto max-w-screen-xl px-4 sm:px-6 md:px-8">
40+
{/* Navigation Links */}
41+
<div className="grid grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-8 pb-14 sm:pb-20 text-sm font-medium">
42+
<div className="flex flex-col items-start col-span-2 sm:col-span-2 gap-y-6">
43+
<Logo className="h-8 w-auto" />
44+
<p className="text-muted-foreground">
45+
High quality Java coding education maintained by an open source
46+
community.
47+
</p>
48+
<div className="flex items-center space-x-6">
49+
<Link
50+
href="https://github.com/javaistic/javaistic"
51+
aria-label="GitHub"
52+
className="transition-colors duration-200 ease-in-out text-muted-foreground hover:text-[#181717] dark:hover:text-white"
53+
>
54+
<GitHubIcon className="h-5 w-5" />
55+
</Link>
56+
<Link
57+
href="/discord"
58+
aria-label="Discord"
59+
className="transition-colors duration-200 ease-in-out text-muted-foreground hover:text-[#5865F2]"
60+
>
61+
<DiscordIcon className="h-5 w-5" />
62+
</Link>
63+
<Link
64+
href="https://x.com/javaistic"
65+
aria-label="X (formerly Twitter)"
66+
className="transition-colors duration-200 ease-in-out text-muted-foreground hover:text-foreground"
67+
>
68+
<TwitterIcon className="h-5 w-5" />
69+
</Link>
70+
<Link
71+
href="https://opencollective.com/javaistic"
72+
aria-label="Open Collective"
73+
className="transition-colors duration-200 ease-in-out text-muted-foreground hover:text-[#7FADF2]"
74+
>
75+
<OpenCollectiveIcon className="h-5 w-5" />
76+
</Link>
77+
</div>
78+
79+
<div className="text-sm text-neutral-500 flex items-center space-x-1">
80+
<span>Made by</span>
81+
<Link
82+
href="https://arghya.dev?ref=javaistic"
83+
target="_blank"
84+
rel="noopener noreferrer"
85+
className="font-bold text-neutral-800 dark:text-white"
86+
>
87+
@uiuxarghya
88+
</Link>
89+
</div>
90+
</div>
91+
{Object.entries(footerNav).map(([section, items]) => (
92+
<div key={section}>
93+
<h2 className="text-lg font-bold text-foreground mb-4">
94+
{section}
95+
</h2>
96+
<ul className="space-y-3">
97+
{items.map((item) => (
98+
<li key={item.title}>
99+
<Link
100+
href={item.href}
101+
className="transition-colors duration-200 ease-in-out text-muted-foreground hover:text-foreground"
102+
>
103+
{item.title}
104+
</Link>
105+
</li>
106+
))}
107+
</ul>
108+
</div>
109+
))}
110+
</div>
111+
112+
{/* Legal and Badge */}
113+
<div className="flex flex-col gap-y-2 sm:flex-row items-center justify-between text-sm text-neutral-500">
114+
<h4>
115+
&copy; 2021 - {new Date().getFullYear()} Javaistic. All rights
116+
reserved.
117+
</h4>
118+
119+
<div>
120+
<div className="flex items-center space-x-1 text-sm text-neutral-500">
121+
<span>Made with</span>
122+
<span role="img" aria-label="love" className="text-red-500">
123+
❤️
124+
</span>
125+
<span className="flex items-center gap-x-1.5">
126+
in
127+
<img
128+
src="https://flagapi.vercel.app/S/IND"
129+
alt="India"
130+
className="h-3 rounded-xs"
131+
/>
132+
<span className="sr-only">India</span>
133+
IND
134+
</span>
135+
</div>
136+
</div>
137+
</div>
138+
</div>
139+
</footer>
140+
);
141+
}

0 commit comments

Comments
 (0)