UoaWDCC · elayildiz · May 12, 2026 · May 12, 2026 · May 17, 2026 · May 17, 2026
diff --git a/package.json b/package.json
@@ -28,11 +28,12 @@
     "radix-ui": "^1.4.3",
     "react": "19.2.3",
     "react-dom": "19.2.3",
+    "react-icons": "^5.6.0",
     "shadcn": "^4.6.0",
     "sharp": "^0.34.5",
+    "stripe": "^22.1.0",
     "tailwind-merge": "^3.5.0",
-    "tw-animate-css": "^1.4.0",
-    "stripe": "^22.1.0"
+    "tw-animate-css": "^1.4.0"
   },
   "devDependencies": {
     "@biomejs/biome": "2.2.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/(frontend)/globals.css b/src/app/(frontend)/globals.css
@@ -33,6 +33,37 @@
   --color-popover-foreground: var(--popover-foreground);
 }
 
+/* Custom animation */
+@keyframes wiggle {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  20% {
+    transform: rotate(-5deg);
+  }
+
+  40% {
+    transform: rotate(5deg);
+  }
+
+  60% {
+    transform: rotate(-4deg);
+  }
+
+  75% {
+    transform: rotate(4deg);
+  }
+
+  85% {
+    transform: rotate(-2deg);
+  }
+
+  100% {
+    transform: rotate(0deg);
+  }
+}
+
 :root {
   --radius: 9999px;
   --background: white;

diff --git a/src/app/(frontend)/layout.tsx b/src/app/(frontend)/layout.tsx
@@ -1,7 +1,7 @@
 import { Inter, Staatliches } from "next/font/google"
 import type React from "react"
-import { Navbar } from "@/components"
 import "./globals.css"
+import { Footer, Navbar } from "@/components"
 
 const staatliches = Staatliches({
   subsets: ["latin"],
@@ -26,9 +26,10 @@ export default async function RootLayout(props: { children: React.ReactNode }) {
 
   return (
     <html className={`${staatliches.variable} ${inter.variable} antialiased`} lang="en">
-      <body className="font-body">
+      <body className="flex min-h-screen flex-col font-body">
         <Navbar />
-        <main>{children}</main>
+        <main className="flex-1">{children}</main>
+        <Footer />
       </body>
     </html>
   )

diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
@@ -0,0 +1,147 @@
+import Link from "next/link"
+import { FaDiscord, FaInstagram, FaTiktok } from "react-icons/fa"
+import { Logo } from "@/components/Logo/Logo"
+
+export function Footer() {
+  return (
+    <footer className="bg-brand-primary text-brand-light-grey">
+      <div className="mx-auto px-20 py-10">
+        {/* Main Section */}
+        <div className="flex flex-col gap-12 md:flex-row md:justify-between">
+          {/* Title */}
+          <div className="max-w-md">
+            <h3 className="inline-block origin-center font-heading text-[2.5rem] uppercase tracking-tight hover:animate-[wiggle_1500ms_ease-out]">
+              Contact Us!
+            </h3>
+            <a
+              className="mt-10 block text-brand-light-grey/90 text-xl"
+              href="mailto:uoavolleyball+secretary@gmail.com"
+            >
+              uoavolleyball+secretary@gmail.com
+            </a>
+            {/* Socials */}
+            <div className="mt-6 flex gap-8">
+              <a
+                className="group flex h-13 w-13 items-center justify-center rounded-full border-2 border-brand-light-grey transition duration-300 ease-in-out hover:bg-white"
+                href="https://www.instagram.com/uoavc/?hl=en"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                <FaInstagram
+                  className="text-brand-light-grey transition duration-300 ease-in-out group-hover:text-brand-primary"
+                  size={32}
+                />
+              </a>
+
+              <a
+                className="group flex h-13 w-13 items-center justify-center rounded-full border-2 border-brand-light-grey transition duration-300 ease-in-out hover:bg-white"
+                href="https://www.tiktok.com/@uoavc"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                <FaTiktok
+                  className="text-brand-light-grey transition duration-300 ease-in-out group-hover:text-brand-primary"
+                  size={32}
+                />
+              </a>
+
+              <a
+                className="group flex h-13 w-13 items-center justify-center rounded-full border-2 border-brand-light-grey transition duration-300 ease-in-out hover:bg-white"
+                href="https://discord.com/invite/aMDKvsWcyz"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                <FaDiscord
+                  className="text-brand-light-grey transition duration-300 ease-in-out group-hover:text-brand-primary"
+                  size={32}
+                />
+              </a>
+            </div>
+          </div>
+
+          {/* Page Links */}
+          <div className="flex items-start gap-16 lg:gap-24">
+            {/* Events */}
+            <div className="pt-10">
+              <h4 className="mb-4 font-semibold text-xl">Events</h4>
+
+              <ul className="space-y-2 text-brand-light-grey/90 text-xl">
+                <li>
+                  <Link className="transition hover:underline" href="/events/upcoming">
+                    Upcoming Events
+                  </Link>
+                </li>
+
+                <li>
+                  <Link className="transition hover:underline" href="/events/past">
+                    Past Events
+                  </Link>
+                </li>
+              </ul>
+            </div>
+
+            {/* About */}
+            <div className="pt-10">
+              <h4 className="mb-4 font-semibold text-xl">About</h4>
+
+              <ul className="space-y-2 text-brand-light-grey/90 text-xl">
+                <li>
+                  <Link className="transition hover:underline" href="/events/executives">
+                    Executives
+                  </Link>
+                </li>
+
+                <li>
+                  <Link className="transition hover:underline" href="/events/comp-team">
+                    Comp Team
+                  </Link>
+                </li>
+              </ul>
+            </div>
+
+            {/* FAQ */}
+            <div className="pt-10">
+              <h4 className="mb-4 font-semibold text-xl">FAQ</h4>
+
+              <ul className="space-y-2 text-brand-light-grey/90 text-xl">
+                <li>
+                  <Link className="transition hover:underline" href="/events/faq">
+                    FAQ
+                  </Link>
+                </li>
+              </ul>
+            </div>
+
+            {/* Login */}
+            <div className="pt-10">
+              <h4 className="mb-4 font-semibold text-xl">Login</h4>
+
+              <ul className="space-y-2 text-brand-light-grey/90 text-xl">
+                <li>
+                  <Link className="transition hover:underline" href="/events/signup">
+                    Sign Up
+                  </Link>
+                </li>
+                <li>
+                  <Link className="transition hover:underline" href="/events/login">
+                    Login
+                  </Link>
+                </li>
+              </ul>
+            </div>
+
+            {/* Logo */}
+            <div className="pt-15">
+              <Logo />
+            </div>
+          </div>
+        </div>
+
+        {/* Bottom Bar */}
+        <div className="mt-10 border-brand-light-grey/70 border-t pt-4">
+          <p className="text-brand-light-grey text-xl">&copy;2026 UOAVC + WDCC</p>
+        </div>
+      </div>
+    </footer>
+  )
+}
diff --git a/src/components/Logo/Logo.tsx b/src/components/Logo/Logo.tsx
@@ -0,0 +1,20 @@
+import Image from "next/image"
+import Link from "next/link"
+
+const FOCUS_RING =
+  "rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+
+export function Logo() {
+  return (
+    <Link aria-label="UOAVC home" className={FOCUS_RING} href="/">
+      <Image
+        alt="UOAVC logo"
+        className="transition-transform duration-300 ease-out hover:rotate-20 hover:scale-110"
+        height={64}
+        priority
+        src="/logo.svg"
+        width={64}
+      />
+    </Link>
+  )
+}
diff --git a/src/components/index.ts b/src/components/index.ts
@@ -1 +1,3 @@
+export { Footer } from "./Footer/Footer"
+export { Logo } from "./Logo/Logo"
 export { Navbar } from "./Navbar/Navbar"