From ffbb759013cf86a46fa4859c349a60946590a1c3 Mon Sep 17 00:00:00 2001
From: ali <159713281+cunkin375@users.noreply.github.com>
Date: Sat, 13 Jun 2026 12:55:16 -0400
Subject: [PATCH 1/2] feat: add about section

chore: edit about us heading to fit figma styling

minor

chore: structure AboutSection.tsx
---
 app/page.tsx                |  8 ++++++--
 components/AboutSection.tsx | 39 +++++++++++++++++++++++++++++++++++++
 2 files changed, 45 insertions(+), 2 deletions(-)
 create mode 100644 components/AboutSection.tsx

diff --git a/app/page.tsx b/app/page.tsx
index 3428c6c..c1e934a 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,3 +1,5 @@
+import AboutSection from "@/components/AboutSection";
+
 export default function Home() {
   return (
     <main className="flex min-h-screen flex-col items-center justify-between p-24 text-text-primary max-w-7xl w-full mx-auto">
@@ -9,8 +11,10 @@ export default function Home() {
 
       {/* START OF THE ABOUT SECTION */}
       <section id="about" className="min-h-screen w-full flex flex-col items-center">
-        {/* About code goes here */}
-        <h2>About</h2>
+        <h2 className="text-4xl font-bold p-16 m-16 h-16 gap-16">
+          About Us
+        </h2>
+        <AboutSection />
       </section>
 
       {/* START OF THE CHALLENGES SECTION */}
diff --git a/components/AboutSection.tsx b/components/AboutSection.tsx
new file mode 100644
index 0000000..486658d
--- /dev/null
+++ b/components/AboutSection.tsx
@@ -0,0 +1,39 @@
+export default function AboutSection() {
+  return (
+    <section className="grid grid-cols-2 gap-8">
+      <AboutContent />
+      <AboutCarousel />
+    </section>
+  )
+}
+
+function AboutContent() {
+  return (
+    <section className="flex flex-col gap-8">
+      <div className="flex flex-col gap-4">
+        <p>
+          Graphics Programming Knights (GPK) is a UCF Registered Student Organization dedicated to bringing together students passionate about graphics programming, shaders, game development, and real-time rendereing.
+        </p>
+        <p>
+          We host hands-on workshops, exciting monthly coding challenges, inspiring speaker events from industry professionals, and fun socials that bring our commnunity together.
+        </p>
+      </div>
+
+      {/* Buttons Section */}
+      <div className="grid grid-cols-2 gap-4">
+        <button>Workshops</button>
+        <button>Monthly Challenges</button>
+        <button>Speaker Events</button>
+        <button>Socials</button>
+      </div>
+    </section>
+  );
+}
+
+function AboutCarousel() {
+  return (
+    <section className="text-center">
+      Carousel goes here
+    </section>
+  );
+}

From a1829b46d677f0a878ed05bb7b70680de09a95a9 Mon Sep 17 00:00:00 2001
From: ali <159713281+cunkin375@users.noreply.github.com>
Date: Sat, 13 Jun 2026 15:31:31 -0400
Subject: [PATCH 2/2] style: add global styling and href linking to
 AboutSection component

---
 components/AboutSection.tsx | 29 +++++++++++++++++++++++------
 1 file changed, 23 insertions(+), 6 deletions(-)

diff --git a/components/AboutSection.tsx b/components/AboutSection.tsx
index 486658d..b3ebcbd 100644
--- a/components/AboutSection.tsx
+++ b/components/AboutSection.tsx
@@ -12,19 +12,36 @@ function AboutContent() {
     <section className="flex flex-col gap-8">
       <div className="flex flex-col gap-4">
         <p>
-          Graphics Programming Knights (GPK) is a UCF Registered Student Organization dedicated to bringing together students passionate about graphics programming, shaders, game development, and real-time rendereing.
+          Graphics Programming Knights (GPK) is a{" "}
+          <a
+            href="https://knightconnect.campuslabs.com/engage/organization/graphicsprogrammingknights"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-accent-light hover:text-accent font-semibold underline underline-offset-4 transition-colors"
+          >
+            UCF Registered Student Organization
+          </a>{" "}
+          dedicated to bringing together students passionate about graphics programming, shaders, game development, and real-time rendering.
         </p>
         <p>
-          We host hands-on workshops, exciting monthly coding challenges, inspiring speaker events from industry professionals, and fun socials that bring our commnunity together.
+          We host hands-on workshops, exciting monthly coding challenges, inspiring speaker events from industry professionals, and fun socials that bring our community together.
         </p>
       </div>
 
       {/* Buttons Section */}
       <div className="grid grid-cols-2 gap-4">
-        <button>Workshops</button>
-        <button>Monthly Challenges</button>
-        <button>Speaker Events</button>
-        <button>Socials</button>
+        <button className="px-4 py-3 bg-accent border-2 border-accent-light text-primary rounded-md hover:bg-accent-light hover:text-page-background hover:border-accent transition-all active:scale-[0.98] cursor-pointer">
+          Workshops
+        </button>
+        <button className="px-4 py-3 bg-accent border-2 border-accent-light text-primary rounded-md hover:bg-accent-light hover:text-page-background hover:border-accent transition-all active:scale-[0.98] cursor-pointer">
+          Monthly Challenges
+        </button>
+        <button className="px-4 py-3 bg-accent border-2 border-accent-light text-primary rounded-md hover:bg-accent-light hover:text-page-background hover:border-accent transition-all active:scale-[0.98] cursor-pointer">
+          Speaker Events
+        </button>
+        <button className="px-4 py-3 bg-accent border-2 border-accent-light text-primary rounded-md hover:bg-accent-light hover:text-page-background hover:border-accent transition-all active:scale-[0.98] cursor-pointer">
+          Socials
+        </button>
       </div>
     </section>
   );