From 51892875f2e2daad12599ab27227121da10bef8c Mon Sep 17 00:00:00 2001
From: kevin li <kevin.lizz7673@gmail.com>
Date: Sat, 27 Jun 2026 18:34:59 -0400
Subject: [PATCH] feature/footer-section

---
 app/page.tsx              | 54 +++++++++++++-----------
 components/Footer.tsx     | 86 +++++++++++++++++++++++++++++++++++++++
 public/github-logo.svg    |  1 +
 public/instagram-logo.svg | 12 ++++++
 public/linkedin-logo.svg  |  1 +
 5 files changed, 130 insertions(+), 24 deletions(-)
 create mode 100644 components/Footer.tsx
 create mode 100644 public/github-logo.svg
 create mode 100644 public/instagram-logo.svg
 create mode 100644 public/linkedin-logo.svg

diff --git a/app/page.tsx b/app/page.tsx
index 92624f4..4e7afce 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,33 +1,39 @@
 import AboutSection from "@/components/AboutSection";
+import FooterSection from "../components/Footer";
 
 export default function Home() {
   return (
-    <main className="flex min-h-screen flex-col items-center justify-between px-24 pb-24 text-text-primary max-w-7xl w-full mx-auto">
-      {/* START OF THE HOME SECTION */}
-      <section id="home" className="min-h-screen w-full flex flex-col items-center">
-        {/* Home code goes here */}
-        <h2>Home</h2>
-      </section>
+    <>
+      <main className="flex min-h-screen flex-col items-center justify-between px-24 pb-24 text-text-primary max-w-7xl w-full mx-auto">
+        {/* START OF THE HOME SECTION */}
+        <section id="home" className="min-h-screen w-full flex flex-col items-center">
+          {/* Home code goes here */}
+          <h2>Home</h2>
+        </section>
 
-      {/* START OF THE ABOUT SECTION */}
-      <section id="about" className="min-h-screen w-full flex flex-col items-center">
-        <h2 className="text-4xl font-bold p-16 m-16 h-16 gap-16">
-          About Us
-        </h2>
-        <AboutSection />
-      </section>
+        {/* START OF THE ABOUT SECTION */}
+        <section id="about" className="min-h-screen w-full flex flex-col items-center">
+          <h2 className="text-4xl font-bold p-16 m-16 h-16 gap-16">
+            About Us
+          </h2>
+          <AboutSection />
+        </section>
 
-      {/* START OF THE CHALLENGES SECTION */}
-      <section id="challenges" className="min-h-screen w-full flex flex-col items-center">
-        {/* Challenges code goes here */}
-        <h2>Challenges</h2>
-      </section>
+        {/* START OF THE CHALLENGES SECTION */}
+        <section id="challenges" className="min-h-screen w-full flex flex-col items-center">
+          {/* Challenges code goes here */}
+          <h2>Challenges</h2>
+        </section>
 
-      {/* START OF THE TEAM SECTION */}
-      <section id="team" className="min-h-screen w-full flex flex-col items-center">
-        {/* Team code goes here */}
-        <h2>Team</h2>
-      </section>
-    </main>
+        {/* START OF THE TEAM SECTION */}
+        <section id="team" className="min-h-screen w-full flex flex-col items-center">
+          {/* Team code goes here */}
+          <h2>Team</h2>
+        </section>
+      </main>
+      <footer className="w-full">
+        <FooterSection/>
+      </footer>
+    </>
   );
 }
diff --git a/components/Footer.tsx b/components/Footer.tsx
new file mode 100644
index 0000000..2de7ed5
--- /dev/null
+++ b/components/Footer.tsx
@@ -0,0 +1,86 @@
+import Image from "next/image";
+import gpklogo from "@/public/gpk_logo_transparent.png";
+
+const links = [
+    {
+        title: "Club",
+        text: ["About Us", "Month Challenges", "Meet the Team", "Home"],
+        links: ["#about","#challenges", "#team", "#home"]
+    },
+    {
+        title: "Resources",
+        text: ["Workshop Slides", "Challenge Archive", "GitHub Repos", "LinkTree"],
+        links: ["https://github.com/GraphicsProgrammingKnights/Workshops","#challenges", "https://github.com/GraphicsProgrammingKnights/gpkweb", "https://linktr.ee/GPKnights"]
+    },
+    {
+        title: "Connect",
+        text: ["Discord Server", "Instagram", "Linkedin", "Youtube"],
+        links: ["https://discord.gg/h9VRpcQDV", "https://www.instagram.com/gpknights_?utm_source=ig_web_button_share_sheet&igsh=ZDNlZDc0MzIxNw==",
+                "https://www.linkedin.com/company/graphics-programming-knights/", "https://www.youtube.com/@GraphicProgrammingKnights"]
+    }
+]
+
+function FooterRow({name, option, links}: {name: string; option: string[]; links: string[]}) {
+    return (
+        <div className="flex flex-col items-start">
+            <span className="text-10 mb-6 uppercase font-bold">{name}</span>
+            {option.map((o, i) => (
+                <a className="text-text-secondary mb-4"
+                    key={o}
+                    href={links[i]}
+                    target={links[i].startsWith("#") ? "_self" : "_blank"}
+                    rel={links[i].startsWith("#") ? undefined : "noreferrer"}
+                >
+                    {o}
+                </a>
+            ))}
+        </div>
+    )
+}
+
+function Footer() {
+    return (
+    <>
+        <div className="flex flex-col w-full">
+            <hr className="border-card-border w-full" />
+            <div className="grid grid-cols-4 gap-10 w-full px-10 pt-16 pb-8 items-start">
+                <div className="flex flex-col gap-4">
+                    <Image src={gpklogo} alt="GPK Logo"
+                    className="w-20 h-auto" />
+                    <span className="uppercase font-bold">Graphics Programming <br/> Knights</span>
+                    <p className="text-text-secondary">
+                        UCF&apos;s Computer Graphics RSO. <br/>
+                        Building the next generation of <br/>
+                        graphics engineers. <br/>
+                    </p>
+                </div>
+                {links.map(s => <FooterRow key={s.title} name={s.title} option={s.text} links={s.links}/>)}
+            </div>
+            <hr className="border-card-border mx-10" />
+            <div className="flex justify-between mx-10 pt-8 pb-8 items-center">
+                <p className="-mt-2">
+                    © 2025 Graphics Programming Knights · UCF RSO
+                </p>
+                <ul className="flex flex-row gap-5">
+                    <li>
+                        <a href="https://github.com/GraphicsProgrammingKnights/gpkweb" target="_blank">
+                            <Image src="/github-logo.svg" alt="github link" className="object-cover w-6 h-auto" width={24} height={24} />
+                        </a>
+                    </li>
+                    <li>
+                        <a href="https://www.instagram.com/gpknights_?utm_source=ig_web_button_share_sheet&igsh=ZDNlZDc0MzIxNw==" target="_blank">
+                            <Image src="/instagram-logo.svg" alt="insta link" className="object-cover w-6 h-auto" width={24} height={24} />
+                        </a>
+                    </li>
+                    <li>
+                        <a href="https://www.linkedin.com/company/graphics-programming-knights/" target="_blank">
+                            <Image src="/linkedin-logo.svg" alt="linkedin link" className="object-cover w-6 h-auto" width={24} height={24} />
+                        </a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </>)
+}
+
+export default Footer
\ No newline at end of file
diff --git a/public/github-logo.svg b/public/github-logo.svg
new file mode 100644
index 0000000..309fecd
--- /dev/null
+++ b/public/github-logo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 512 499.368"><path fill="#fff" fill-rule="nonzero" d="M256.003 0C114.555 0 0 114.555 0 256.003c0 113.286 73.28 208.961 175.038 242.865 12.796 2.247 17.586-5.433 17.586-12.153 0-6.077-.309-26.225-.309-47.686-64.313 11.844-80.941-15.674-86.058-30.055-2.896-7.37-15.359-30.1-26.269-36.177-8.948-4.808-21.752-16.652-.31-16.961 20.168-.309 34.574 18.564 39.382 26.244 23.038 38.732 59.839 27.828 74.555 21.101 2.227-16.627 8.947-27.828 16.318-34.239-56.968-6.386-116.467-28.471-116.467-126.399 0-27.827 9.907-50.866 26.225-68.787-2.562-6.41-11.51-32.655 2.562-67.853 0 0 21.436-6.72 70.409 26.244 20.483-5.767 42.227-8.638 63.998-8.638 21.751 0 43.52 2.896 63.997 8.638 48.973-33.279 70.39-26.244 70.39-26.244 14.09 35.192 5.117 61.443 2.562 67.853 16.318 17.921 26.244 40.625 26.244 68.787 0 98.237-59.84 119.988-116.801 126.399 9.282 8.014 17.277 23.373 17.277 47.371 0 34.238-.309 61.751-.309 70.389 0 6.721 4.808 14.735 17.586 12.179C438.739 464.964 512 368.955 512 256.003 512 114.555 397.445 0 256.003 0z"/></svg>
\ No newline at end of file
diff --git a/public/instagram-logo.svg b/public/instagram-logo.svg
new file mode 100644
index 0000000..c77c98d
--- /dev/null
+++ b/public/instagram-logo.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+	<path
+		style="fill:#FFFFFF"
+		d="M256,49.471c67.266,0,75.233.257,101.8,1.469,24.562,1.121,37.9,5.224,46.778,8.674a78.052,78.052,0,0,1,28.966,18.845,78.052,78.052,0,0,1,18.845,28.966c3.45,8.877,7.554,22.216,8.674,46.778,1.212,26.565,1.469,34.532,1.469,101.8s-0.257,75.233-1.469,101.8c-1.121,24.562-5.225,37.9-8.674,46.778a83.427,83.427,0,0,1-47.811,47.811c-8.877,3.45-22.216,7.554-46.778,8.674-26.56,1.212-34.527,1.469-101.8,1.469s-75.237-.257-101.8-1.469c-24.562-1.121-37.9-5.225-46.778-8.674a78.051,78.051,0,0,1-28.966-18.845,78.053,78.053,0,0,1-18.845-28.966c-3.45-8.877-7.554-22.216-8.674-46.778-1.212-26.564-1.469-34.532-1.469-101.8s0.257-75.233,1.469-101.8c1.121-24.562,5.224-37.9,8.674-46.778A78.052,78.052,0,0,1,78.458,78.458a78.053,78.053,0,0,1,28.966-18.845c8.877-3.45,22.216-7.554,46.778-8.674,26.565-1.212,34.532-1.469,101.8-1.469m0-45.391c-68.418,0-77,.29-103.866,1.516-26.815,1.224-45.127,5.482-61.151,11.71a123.488,123.488,0,0,0-44.62,29.057A123.488,123.488,0,0,0,17.3,90.982C11.077,107.007,6.819,125.319,5.6,152.134,4.369,179,4.079,187.582,4.079,256S4.369,333,5.6,359.866c1.224,26.815,5.482,45.127,11.71,61.151a123.489,123.489,0,0,0,29.057,44.62,123.486,123.486,0,0,0,44.62,29.057c16.025,6.228,34.337,10.486,61.151,11.71,26.87,1.226,35.449,1.516,103.866,1.516s77-.29,103.866-1.516c26.815-1.224,45.127-5.482,61.151-11.71a128.817,128.817,0,0,0,73.677-73.677c6.228-16.025,10.486-34.337,11.71-61.151,1.226-26.87,1.516-35.449,1.516-103.866s-0.29-77-1.516-103.866c-1.224-26.815-5.482-45.127-11.71-61.151a123.486,123.486,0,0,0-29.057-44.62A123.487,123.487,0,0,0,421.018,17.3C404.993,11.077,386.681,6.819,359.866,5.6,333,4.369,324.418,4.079,256,4.079h0Z"/>
+	<path
+		style="fill:#FFFFFF"
+		d="M256,126.635A129.365,129.365,0,1,0,385.365,256,129.365,129.365,0,0,0,256,126.635Zm0,213.338A83.973,83.973,0,1,1,339.974,256,83.974,83.974,0,0,1,256,339.973Z"/>
+	<circle
+		style="fill:#FFFFFF"
+		cx="390.476" cy="121.524" r="30.23"/>
+</svg>
\ No newline at end of file
diff --git a/public/linkedin-logo.svg b/public/linkedin-logo.svg
new file mode 100644
index 0000000..831894b
--- /dev/null
+++ b/public/linkedin-logo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 512 512"><path fill="#fff" d="M474.919 0H38.592C17.72 0 0 16.504 0 36.841V475.14C0 495.496 11.629 512 32.492 512h436.327C489.718 512 512 495.496 512 475.14V36.841C512 16.504 495.809 0 474.919 0zM195.043 195.043h68.928v35.136h.755c10.505-18.945 41.541-38.177 79.921-38.177 73.655 0 94.214 39.108 94.214 111.538v135.321h-73.148V316.883c0-32.427-12.947-60.883-43.227-60.883-36.768 0-54.295 24.889-54.295 65.758v117.103h-73.148V195.043zM73.139 438.861h73.148V195.043H73.139v243.818zm82.289-329.148c0 25.258-20.457 45.715-45.715 45.715-25.258 0-45.715-20.457-45.715-45.715 0-25.258 20.457-45.715 45.715-45.715 25.258 0 45.715 20.457 45.715 45.715z"/></svg>
\ No newline at end of file