Skip to content

Commit db24946

Browse files
asiansnoodleasiansnoodle
authored
Component/footer (#19)
* Created Footer compnent and components directory created footer.tsx * Feature Footer: added footer component with links Links Included: - About - Events - ACM Portal - Terms of Service - GitHub Repo - Socials (Instagram, LinkedIn) * feat layout: added Footer component into root layout.tsx * feat footer: fixing merge conflicts
1 parent 45d98da commit db24946

File tree

2 files changed

+124
-0
lines changed

2 files changed

+124
-0
lines changed

‎src/app/layout.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import type { Metadata } from "next";
22
import { Geist, Geist_Mono } from "next/font/google";
33
import "./globals.css";
4+
import Footer from "@/components/footer";
45

56
const geistSans = Geist({
67
variable: "--font-geist-sans",
@@ -28,6 +29,7 @@ export default function RootLayout({
2829
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
2930
>
3031
{children}
32+
<Footer />
3133
</body>
3234
</html>
3335
);

‎src/components/footer.tsx‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
import React from "react";
2+
import Link from "next/link";
3+
4+
export default function Footer() {
5+
const year = new Date().getFullYear();
6+
7+
return (
8+
<footer className="border-t bg-neutral-50 text-neutral-700 dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-300">
9+
<div className="mx-auto w-full max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
10+
<div className="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4">
11+
{/* About Section */}
12+
<nav className="space-y-4">
13+
<h3 className="text-xs font-semibold uppercase tracking-wider text-neutral-500 dark:text-neutral-400">About</h3>
14+
<ul className="space-y-2 text-sm">
15+
<li>
16+
<Link href="/home" className="hover:text-neutral-900 dark:hover:text-white">About Us</Link>
17+
</li>
18+
</ul>
19+
</nav>
20+
21+
{/* Events & Activities Section */}
22+
<nav className="space-y-4">
23+
<h3 className="text-xs font-semibold uppercase tracking-wider text-neutral-500 dark:text-neutral-400">Events & Activities</h3>
24+
<ul className="space-y-2 text-sm">
25+
<li>
26+
<Link href="https://portal.acmutsa.org/events" target="_blank" className="hover:text-neutral-900 dark:hover:text-white">Upcoming Events</Link>
27+
</li>
28+
</ul>
29+
</nav>
30+
31+
{/* Get Involved Section */}
32+
<nav className="space-y-4">
33+
<h3 className="text-xs font-semibold uppercase tracking-wider text-neutral-500 dark:text-neutral-400">Get Involved</h3>
34+
<ul className="space-y-2 text-sm">
35+
<li>
36+
<Link href="https://portal.acmutsa.org/" target="_blank" className="hover:text-neutral-900 dark:hover:text-white">Join ACM</Link>
37+
</li>
38+
</ul>
39+
</nav>
40+
41+
{/* Resources Section */}
42+
<nav className="space-y-4">
43+
<h3 className="text-xs font-semibold uppercase tracking-wider text-neutral-500 dark:text-neutral-400">Resources</h3>
44+
<ul className="space-y-2 text-sm">
45+
<li>
46+
<Link href="/home" className="hover:text-neutral-900 dark:hover:text-white">Terms of Service</Link>
47+
</li>
48+
</ul>
49+
</nav>
50+
</div>
51+
52+
{/* Divider */}
53+
<div className="mt-10 border-t border-neutral-200 dark:border-neutral-800"></div>
54+
55+
{/* Bottom Bar */}
56+
<div className="mt-6 flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
57+
<p className="text-sm text-neutral-600 dark:text-neutral-400">
58+
© {year} The University of Texas at San Antonio · Made by <span className="font-medium text-neutral-800 dark:text-neutral-200">ACM</span>
59+
{" "}x{" "}
60+
<span className="font-medium text-neutral-800 dark:text-neutral-200">Senior Design</span> Fall 2025
61+
</p>
62+
63+
{/* Social Links and Repo */}
64+
<div className="flex flex-wrap items-center gap-4 text-sm">
65+
<a
66+
href="https://github.com/acmutsa/cs-learn"
67+
target="_blank"
68+
rel="noopener noreferrer"
69+
className="inline-flex items-center gap-2 hover:text-neutral-900 dark:hover:text-white"
70+
>
71+
{/* svg for github logo */}
72+
<svg
73+
xmlns="http://www.w3.org/2000/svg"
74+
viewBox="0 0 24 24"
75+
fill="currentColor"
76+
className="h-4 w-4 opacity-80"
77+
aria-hidden="true"
78+
>
79+
<path
80+
fillRule="evenodd"
81+
d="M12 .5a11.5 11.5 0 0 0-3.637 22.41c.575.105.785-.25.785-.555 0-.274-.01-.999-.015-1.963-3.19.694-3.866-1.539-3.866-1.539-.523-1.327-1.277-1.681-1.277-1.681-1.043-.713.08-.699.08-.699 1.153.081 1.76 1.184 1.76 1.184 1.025 1.757 2.69 1.25 3.343.956.104-.742.4-1.25.727-1.538-2.548-.289-5.226-1.274-5.226-5.666 0-1.252.447-2.276 1.182-3.078-.119-.29-.512-1.454.112-3.03 0 0 .965-.309 3.164 1.176a10.96 10.96 0 0 1 2.881-.387c.978.004 1.964.132 2.882.387 2.198-1.485 3.162-1.176 3.162-1.176.625 1.576.232 2.74.114 3.03.737.802 1.18 1.826 1.18 3.078 0 4.402-2.683 5.374-5.24 5.66.41.353.775 1.05.775 2.116 0 1.527-.014 2.76-.014 3.134 0 .308.208.666.79.553A11.501 11.501 0 0 0 12 .5Z"
82+
clipRule="evenodd"
83+
/>
84+
</svg>
85+
<span>Repo</span>
86+
</a>
87+
88+
<a
89+
href="https://discord.com/invite/NvjUxmR"
90+
target="_blank"
91+
rel="noopener noreferrer"
92+
className="hover:text-neutral-900 dark:hover:text-white"
93+
>
94+
Discord
95+
</a>
96+
<a
97+
href="https://www.linkedin.com/company/acmutsa/"
98+
target="_blank"
99+
rel="noopener noreferrer"
100+
className="hover:text-neutral-900 dark:hover:text-white"
101+
>
102+
LinkedIn
103+
</a>
104+
<a
105+
href="https://www.instagram.com/acmutsa/"
106+
target="_blank"
107+
rel="noopener noreferrer"
108+
className="hover:text-neutral-900 dark:hover:text-white">
109+
Instagram
110+
</a>
111+
<a
112+
href="mailto:team@acmutsa.org"
113+
className="hover:text-neutral-900 dark:hover:text-white"
114+
>
115+
Email
116+
</a>
117+
</div>
118+
</div>
119+
</div>
120+
</footer>
121+
);
122+
}

0 commit comments

Comments
 (0)