From 82590e54c6fbf113017540b0e8cf33ce1952df7d Mon Sep 17 00:00:00 2001
From: ethanfu868-creator <ethanfu868@gmail.com>
Date: Sun, 14 Jun 2026 18:53:18 -0400
Subject: [PATCH 1/2] feat: added hero section to homepage

---
 app/page.tsx               |  2 ++
 components/HeroSection.tsx | 42 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 44 insertions(+)
 create mode 100644 components/HeroSection.tsx

diff --git a/app/page.tsx b/app/page.tsx
index 05af1c5..c3a004e 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,6 +1,8 @@
+ import HeroSection from "@/components/HeroSection";
 export default function Home() {
   return (
     <main className="flex min-h-screen flex-col items-center justify-between p-24 text-text-primary">
+      <HeroSection />
       {/* START OF THE HOME SECTION */}
       <section id="home" className="min-h-screen w-full flex flex-col items-center">
         {/* Home code goes here */}
diff --git a/components/HeroSection.tsx b/components/HeroSection.tsx
new file mode 100644
index 0000000..a4d0588
--- /dev/null
+++ b/components/HeroSection.tsx
@@ -0,0 +1,42 @@
+export default function HeroSection() {
+  return (
+    <>
+    <div className="flex flex-col md:flex-row justify-between items-start md:items-center p-8 bg-black text-white w-full min-h-[screen]">
+  
+  {/* Left Column: Heading, Subheading, Button, and Icons */}
+  <div className="flex flex-col gap-4">
+  <h1>Graphic Design Knights</h1>
+  <p>University of Central Florida&apos;s Computer Graphics RSO</p>
+
+  {/* Button and Icons Row */}
+  <div className="flex flex-row items-center gap-5">
+    <button className="bg-purple-600 px-6 py-3 rounded-full text-white">
+      Join Us
+      <a href="https://discord.gg/XwDHkT3fRa" target="_blank" rel="noopener noreferrer">
+      {/* eslint-disable-next-line @next/next/no-img-element */}
+        <img src="https://cdn-icons-png.flaticon.com/512/2111/2111370.png" alt="Discord Icon" className="w-5 h-5 ml-2 inline-block" />
+      </a>
+    </button>
+
+    {/* Icons Row */}
+    <div className="flex flex-row items-center gap-3">
+      <a href="https://www.instagram.com/gpknights_" target="_blank" rel="noopener noreferrer">
+      {/* eslint-disable-next-line @next/next/no-img-element */}
+        <img src="https://cdn-icons-png.flaticon.com/512/174/174855.png" alt="Instagram" className="w-5 h-5" />
+      </a>
+      <a href="https://www.linkedin.com/company/graphic-programming-knights/" target="_blank" rel="noopener noreferrer">
+      {/* eslint-disable-next-line @next/next/no-img-element */}
+        <img src="https://upload.wikimedia.org/wikipedia/commons/c/ca/LinkedIn_logo_initials.png" alt="LinkedIn" className="w-5 h-5" />
+      </a>
+    </div>
+  </div>
+</div>
+</div>
+  {/* Right Column: Image */}
+<div className="shrink-0">
+ {/* ASCII render goes here -- see T6 */}
+</div>
+</>
+
+  );
+}

From c8061fe128d59382ae1af10c29c081b8292d1f17 Mon Sep 17 00:00:00 2001
From: ethanfu868-creator <ethanfu868@gmail.com>
Date: Wed, 17 Jun 2026 17:46:13 -0400
Subject: [PATCH 2/2] feat: add fixed hero section to homepage

---
 app/page.tsx               |  3 +-
 components/HeroSection.tsx | 88 ++++++++++++++++++++++----------------
 2 files changed, 54 insertions(+), 37 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index c3a004e..a1521dc 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -2,11 +2,12 @@
 export default function Home() {
   return (
     <main className="flex min-h-screen flex-col items-center justify-between p-24 text-text-primary">
-      <HeroSection />
       {/* 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>
+        <HeroSection />
+        {/* HeroSection code goes here */}
       </section>
 
       {/* START OF THE ABOUT SECTION */}
diff --git a/components/HeroSection.tsx b/components/HeroSection.tsx
index a4d0588..e9e7a10 100644
--- a/components/HeroSection.tsx
+++ b/components/HeroSection.tsx
@@ -1,42 +1,58 @@
+import { FaInstagram, FaLinkedin, FaDiscord } from "react-icons/fa";
+
 export default function HeroSection() {
   return (
-    <>
-    <div className="flex flex-col md:flex-row justify-between items-start md:items-center p-8 bg-black text-white w-full min-h-[screen]">
-  
-  {/* Left Column: Heading, Subheading, Button, and Icons */}
-  <div className="flex flex-col gap-4">
-  <h1>Graphic Design Knights</h1>
-  <p>University of Central Florida&apos;s Computer Graphics RSO</p>
+    <div className="grid grid-cols-1 md:grid-cols-2 gap-8 items-center p-8 md:p-16 bg-black text-white w-full min-h-screen">
+      
+      {/* Left Column: Heading, Subheading, Button, and Icons */}
+      <div className="flex flex-col gap-6 max-w-xl">
+        <h1 className="text-4xl md:text-6xl font-extrabold tracking-tight">
+          Graphics Programming Knights
+        </h1>
+        <p className="text-lg md:text-xl text-gray-400">
+          University of Central Florida&apos;s Computer Graphics RSO
+        </p>
 
-  {/* Button and Icons Row */}
-  <div className="flex flex-row items-center gap-5">
-    <button className="bg-purple-600 px-6 py-3 rounded-full text-white">
-      Join Us
-      <a href="https://discord.gg/XwDHkT3fRa" target="_blank" rel="noopener noreferrer">
-      {/* eslint-disable-next-line @next/next/no-img-element */}
-        <img src="https://cdn-icons-png.flaticon.com/512/2111/2111370.png" alt="Discord Icon" className="w-5 h-5 ml-2 inline-block" />
-      </a>
-    </button>
+        {/* Button and Icons Row */}
+        <div className="flex flex-row items-center gap-5 mt-2">
+          <a 
+            href="https://discord.gg/XwDHkT3fRa" 
+            target="_blank" 
+            rel="noopener noreferrer"
+            className="flex items-center gap-2 bg-purple-600 hover:bg-purple-700 px-6 py-3 rounded-full text-white font-medium transition-colors"
+          >
+            Join Us
+            <FaDiscord size={20} />
+          </a>
 
-    {/* Icons Row */}
-    <div className="flex flex-row items-center gap-3">
-      <a href="https://www.instagram.com/gpknights_" target="_blank" rel="noopener noreferrer">
-      {/* eslint-disable-next-line @next/next/no-img-element */}
-        <img src="https://cdn-icons-png.flaticon.com/512/174/174855.png" alt="Instagram" className="w-5 h-5" />
-      </a>
-      <a href="https://www.linkedin.com/company/graphic-programming-knights/" target="_blank" rel="noopener noreferrer">
-      {/* eslint-disable-next-line @next/next/no-img-element */}
-        <img src="https://upload.wikimedia.org/wikipedia/commons/c/ca/LinkedIn_logo_initials.png" alt="LinkedIn" className="w-5 h-5" />
-      </a>
-    </div>
-  </div>
-</div>
-</div>
-  {/* Right Column: Image */}
-<div className="shrink-0">
- {/* ASCII render goes here -- see T6 */}
-</div>
-</>
+          {/* Icons Row */}
+          <div className="flex flex-row items-center gap-4 text-gray-400">
+            <a 
+              href="https://www.instagram.com/gpknights_" 
+              target="_blank" 
+              rel="noopener noreferrer"
+              className="hover:text-white transition-colors"
+            >
+              <FaInstagram className="w-6 h-6" />
+            </a>
+            <a 
+              href="https://www.linkedin.com/company/graphic-programming-knights/" 
+              target="_blank" 
+              rel="noopener noreferrer"
+              className="hover:text-white transition-colors"
+            >
+              <FaLinkedin className="w-6 h-6" />
+            </a>
+          </div>
+        </div>
+      </div>
 
+      {/* Right Column: Placeholder for ASCII render */}
+      <div className="flex justify-center items-center w-full h-full min-h-[screen-size]">
+        {/* ASCII render goes here -- see T6 */}
+        <span className="text-gray-600 italic">[ASCII Render Placeholder]</span>
+      </div>
+
+    </div>
   );
-}
+}
\ No newline at end of file