feat: added hero section to homepage

app/page.tsx

@@ -1,5 +1,6 @@
 import AboutSection from "@/components/AboutSection";
 import Footer from "@/components/Footer";
+import HeroSection from "@/components/HeroSection";
 import TeamSection from "@/components/TeamSection";
 
 export default function Home() {
@@ -8,8 +9,7 @@ export default function Home() {
       <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>
+          <HeroSection />
         </section>
 
         {/* START OF THE ABOUT SECTION */}

components/HeroSection.tsx

@@ -0,0 +1,56 @@
+import { FaInstagram, FaLinkedin, FaDiscord } from "react-icons/fa";
+
+export default function HeroSection() {
+  return (
+    <section className="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-36 items-center py-8 md:py-16 pr-8 md:pr-16 bg-page-background text-text-primary w-full flex-1">
+      {/* Left Column: Heading, Subheading, Button, and Icons */}
+      <div className="flex flex-col gap-8 max-w-3xl -ml-24 md:-ml-36">
+        <h1 className="text-6xl md:text-8xl font-extrabold tracking-tight">
+          Graphics Programming Knights
+        </h1>
+        <p className="text-2xl md:text-3xl text-text-secondary">
+          University of Central Florida&apos;s Computer Graphics RSO
+        </p>
+
+        {/* Button and Icons Row */}
+        <div className="flex flex-row items-center gap-6 mt-2">
+          <a
+            href="https://discord.gg/XwDHkT3fRa"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex items-center gap-2 bg-accent hover:bg-accent-light px-10 py-5 rounded-full text-text-primary text-xl font-medium transition-colors"
+          >
+            Join Us
+            <FaDiscord size={28} />
+          </a>
+
+          {/* Icons Row */}
+          <div className="flex flex-row items-center gap-5 text-text-secondary">
+            <a
+              href="https://www.instagram.com/gpknights_"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="hover:text-text-primary transition-colors"
+            >
+              <FaInstagram className="w-10 h-10" />
+            </a>
+            <a
+              href="https://www.linkedin.com/company/graphics-programming-knights/"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="hover:text-text-primary transition-colors"
+            >
+              <FaLinkedin className="w-10 h-10" />
+            </a>
+          </div>
+        </div>
+      </div>
+
+      {/* Right Column: Placeholder for ASCII render */}
+      <div className="flex justify-center items-center w-full h-full">
+        {/* ASCII render goes here -- see T6 */}
+        <span className="text-text-secondary italic text-2xl translate-x-8 md:translate-x-16">[ASCII Render Placeholder]</span>
+      </div>
+    </section>
+  );
+}

package.json

@@ -15,6 +15,7 @@
     "next": "^16.1.6",
     "react": "19.2.3",
     "react-dom": "19.2.3",
+    "react-icons": "^5.7.0",
     "three": "^0.184.0"
   },
   "devDependencies": {