Skip to content

Commit 81bdd82

Browse files
uiuxarghyauiuxarghya
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)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy