UTDNebula · TyHil · Jan 24, 2026 · Jan 23, 2026 · Jan 23, 2026 · Jan 23, 2026
diff --git a/package.json b/package.json
@@ -18,7 +18,6 @@
     "@next/third-parties": "^16.1.3",
     "@sentry/nextjs": "^10.34.0",
     "calendar-link": "^2.11.0",
-    "clsx": "^2.1.1",
     "google-auth-library": "^10.5.0",
     "next": "^16.1.3",
     "next-sitemap": "^4.2.3",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/about/mission/page.tsx b/src/app/about/mission/page.tsx
@@ -1,6 +1,7 @@
 import Footer from '@/components/Footer';
 import Header from '@/components/Header';
 import type { Metadata } from 'next';
+import Link from 'next/link';
 import React from 'react';
 
 export const metadata: Metadata = {
@@ -79,14 +80,13 @@ export default function Mission() {
       </div>
       <h3 className="px-8 lg:px-16 xl:px-32 py-24 text-3xl font-bold text-center">
         See{' '}
-        <a
+        <Link
           className="text-royal underline decoration-transparent hover:decoration-inherit transition"
           href="https://nebula-labs.atlassian.net/wiki/spaces/Officers/pages/8716405/Organization+Mission+Goals+and+Values+as+of+Founding"
           target="_blank"
-          rel="noreferrer"
         >
           our Confluence
-        </a>{' '}
+        </Link>{' '}
         for more
       </h3>
       <Footer />

diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
@@ -7,6 +7,7 @@ import Footer from '@/components/Footer';
 import Header from '@/components/Header';
 import type { Metadata } from 'next';
 import Image from 'next/image';
+import Link from 'next/link';
 import React from 'react';
 
 export const metadata: Metadata = {
@@ -27,50 +28,45 @@ export default function Contact() {
           <h2 className="text-2xl">
             Discord is the best place to stay up to date with our latest updates and events.
           </h2>
-          <a
+          <Link
             className="hover:scale-105 transition"
             href="https://discord.utdnebula.com/"
             target="_blank"
-            rel="noreferrer"
           >
             <Image src={Discord} alt="discord" width="200" height="60" />
-          </a>
+          </Link>
         </div>
         <div className="flex flex-col items-center gap-8">
           <h2 className="text-2xl">You can also find us on these platforms:</h2>
           <div className="flex flex-row items-center gap-12">
-            <a
+            <Link
               className={linkClasses + ' flex items-center gap-2'}
               href="https://instagram.com/utdnebula"
               target="_blank"
-              rel="noreferrer"
             >
               <Image src={Instagram} alt="Instagram logo" width="30" height="30" />
-            </a>
-            <a
+            </Link>
+            <Link
               className={linkClasses + ' flex items-center gap-2'}
               href="https://linkedin.com/company/utdnebula"
               target="_blank"
-              rel="noreferrer"
             >
               <Image src={LinkedIn} alt="LinkedIn logo" width="30" height="30" />
-            </a>
-            <a
+            </Link>
+            <Link
               className={linkClasses + ' flex items-center gap-2'}
               href="https://github.com/utdnebula"
               target="_blank"
-              rel="noreferrer"
             >
               <Image src={GitHub} alt="GitHub logo" width="30" height="30" />
-            </a>
-            <a
+            </Link>
+            <Link
               className={linkClasses + ' flex items-center gap-2'}
               href="mailto:leadership@utdnebula.com"
               target="_blank"
-              rel="noreferrer"
             >
               <Image src={Gmail} alt="GitHub logo" width="30" height="30" />
-            </a>
+            </Link>
           </div>
         </div>
       </div>

diff --git a/src/app/membership/page.tsx b/src/app/membership/page.tsx
@@ -1,6 +1,7 @@
 import Footer from '@/components/Footer';
 import Header from '@/components/Header';
 import type { Metadata } from 'next';
+import Link from 'next/link';
 import React from 'react';
 
 export const metadata: Metadata = {
@@ -37,14 +38,13 @@ export default function Membership() {
         <h2 className="text-5xl font-bold text-center">How to Become a Member</h2>
         <p className="text-3xl">
           Look out for announcements in{' '}
-          <a
+          <Link
             className="text-royal underline decoration-transparent hover:decoration-inherit transition"
             href="https://discord.utdnebula.com/"
             target="_blank"
-            rel="noreferrer"
           >
             our Discord
-          </a>
+          </Link>
           . The process generally involves active participation in a team for a semester and a brief
           membership form.
         </p>

diff --git a/src/app/projects/api/page.tsx b/src/app/projects/api/page.tsx
@@ -1,11 +1,8 @@
-import Gradient from '@/../public/images/gradient.png';
 import crowd from '@/../public/projects/api/icons8-crowd-100.png';
 import expand from '@/../public/projects/api/icons8-expand-100.png';
 import support from '@/../public/projects/api/icons8-support-100.png';
-import Footer from '@/components/Footer';
-import Navbar from '@/components/Navbar';
+import Project from '@/components/Project';
 import type { Metadata } from 'next';
-import Image from 'next/image';
 import React from 'react';
 
 export const metadata: Metadata = {
@@ -21,85 +18,48 @@ const features = [
   {
     title: 'Size',
     description: 'The largest dataset of university data on campus.',
-    img: expand,
-    alt: 'expanding icon',
+    img: {
+      src: expand,
+      alt: 'expanding icon',
+    },
   },
   {
     title: 'Public API',
     description:
       'A public API for Nebula products and external developers making data easily accessible.',
-    img: crowd,
-    alt: 'crowd',
+    img: {
+      src: crowd,
+      alt: 'crowd',
+    },
   },
   {
     title: 'Support',
     description:
       'Continuously improving and up-to-date data as well as personal support in the Nebula Discord.',
-    img: support,
-    alt: 'wrench',
+    img: {
+      src: support,
+      alt: 'wrench',
+    },
   },
 ];
 
 export default function API() {
   return (
-    <>
-      <Navbar royal={true} className="relative z-20" />
-      <div className="mx-8 lg:mx-16 xl:mx-32 pt-6 px-6 flex flex-col items-center gap-8 rounded-3xl text-white relative overflow-hidden">
-        <Image src={Gradient} alt="project background" fill className="-z-20" />
-        <p className="px-16 py-2 rounded-full border-2 border-white whitespace-nowrap font-display font-bold drop-shadow-sm">
-          API & PLATFORM
-        </p>
-        <h1 className="text-5xl md:text-6xl font-bold text-center text-shadow">
+    <Project
+      name="API & PLATFORM"
+      tagline={
+        <>
           The Backbone
           <br />
           of Nebula Labs
-        </h1>
-        <h2 className="text-3xl text-center text-shadow">
-          Providing reliable and feature-rich data infrastructure for all of Nebula’s projects, and
-          yours!
-        </h2>
-        <div className="h-10"></div>
-      </div>
-      <div className="relative -top-10 w-full flex justify-center">
-        <a
-          className="px-10 py-6 text-2xl text-white bg-royal rounded-full hover:bg-[#3634BB] transition-colors drop-shadow-sm"
-          href="https://api.utdnebula.com/swagger/index.html"
-          target="_blank"
-          rel="noreferrer"
-        >
-          Get Started
-        </a>
-      </div>
-      <div className="px-8 lg:px-16 xl:px-32 py-24 flex flex-col items-center gap-12">
-        <h2 className="text-5xl font-bold text-center">Features</h2>
-        <p className="text-3xl text-center">
-          Discover a realm of possibilities with Nebula API & Platform, where data integration meets
-          streamlined authentication.
-        </p>
-      </div>
-      <div className="mx-8 lg:mx-16 xl:mx-32 pt-6 px-6 grid grid-rows-3 grid-cols-1 md:grid-rows-1 md:grid-cols-3 gap-8">
-        {features.map((feature) => (
-          <div key={feature.title} className="flex flex-col items-center gap-4">
-            <div className="rounded-full bg-cornflower-50">
-              <Image src={feature.img} alt={feature.alt} className="h-10 w-10 m-7" />
-            </div>
-            <p className="text-2xl font-bold text-center">{feature.title}</p>
-            <p className="text-xl text-center">{feature.description}</p>
-          </div>
-        ))}
-      </div>
-      <div className="px-8 lg:px-16 xl:px-32 py-24 flex flex-col items-center gap-12">
-        <h2 className="text-5xl font-bold text-center">Interested? Learn more about our project</h2>
-        <a
-          className="px-6 py-3 text-white bg-royal rounded-full hover:bg-[#3634BB] transition-colors"
-          href="https://github.com/UTDNebula/nebula-api"
-          target="_blank"
-          rel="noreferrer"
-        >
-          Learn More
-        </a>
-      </div>
-      <Footer />
-    </>
+        </>
+      }
+      description="Providing reliable and feature-rich data infrastructure for all of Nebula’s projects, and yours!"
+      projectLink="https://api.utdnebula.com/swagger/index.html"
+      featuresDescription="Discover a realm of possibilities with Nebula API & Platform, where data integration meets streamlined authentication."
+      features={features}
+      learnMoreLink="https://github.com/UTDNebula/nebula-api"
+      repos={['nebula-api', 'api-tools']}
+    />
   );
 }
diff --git a/src/app/projects/clubs/page.tsx b/src/app/projects/clubs/page.tsx
@@ -1,12 +1,9 @@
-import Gradient from '@/../public/images/gradient.png';
 import Cover from '@/../public/projects/clubs/cover.png';
 import calendar from '@/../public/projects/clubs/icons8-calendar-100.png';
 import community from '@/../public/projects/clubs/icons8-community-100.png';
 import search from '@/../public/projects/clubs/icons8-search-100.png';
-import Footer from '@/components/Footer';
-import Navbar from '@/components/Navbar';
+import Project from '@/components/Project';
 import type { Metadata } from 'next';
-import Image from 'next/image';
 import React from 'react';
 
 export const metadata: Metadata = {
@@ -23,85 +20,52 @@ const features = [
     title: 'Browse our communities',
     description:
       'Simplify your search for a community by using our helpful filters. Keep an eye out for our featured organizations for exciting upcoming events.',
-    img: search,
-    alt: 'magnifying glass',
+    img: {
+      src: search,
+      alt: 'magnifying glass',
+    },
   },
   {
     title: 'Keep up to date',
     description:
       "Use our events calendar to find out what's going on around campus and register for events to show your interest.",
-    img: calendar,
-    alt: 'calendar',
+    img: {
+      src: calendar,
+      alt: 'calendar',
+    },
   },
   {
     title: 'Growing Community',
     description:
       'Interested in growing your own org, contact us to add you organization to our growing list of on campus communities.',
-    img: community,
-    alt: '3 people icon',
+    img: {
+      src: community,
+      alt: '3 people icon',
+    },
   },
 ];
 
 export default function Clubs() {
   return (
-    <>
-      <Navbar royal={true} className="relative z-20" />
-      <div className="mx-8 lg:mx-16 xl:mx-32 pt-6 px-6 flex flex-col items-center gap-8 rounded-3xl text-white relative overflow-hidden">
-        <Image src={Gradient} alt="project background" fill className="-z-20" />
-        <p className="px-16 py-2 rounded-full border-2 border-white whitespace-nowrap font-display font-bold drop-shadow-sm">
-          CLUBS
-        </p>
-        <h1 className="text-5xl md:text-6xl font-bold text-center text-shadow">
+    <Project
+      name="CLUBS"
+      tagline={
+        <>
           Find your community
           <br />
           on campus
-        </h1>
-        <h2 className="text-3xl text-center text-shadow">
-          Get connected with student organizations and browse events.
-        </h2>
-        <div className="md:mx-4 lg:mx-8 xl:mx-16 rounded-t-2xl overflow-hidden md:mb-[-4rem] lg:mb-[-8rem] xl:mb-[-16rem]">
-          <Image src={Cover} alt="Clubs screenshot" />
-        </div>
-      </div>
-      <div className="relative -top-10 w-full flex justify-center">
-        <a
-          className="px-10 py-6 text-2xl text-white bg-royal rounded-full hover:bg-[#3634BB] transition-colors drop-shadow-sm"
-          href="https://clubs.utdnebula.com"
-          target="_blank"
-          rel="noreferrer"
-        >
-          Get Started
-        </a>
-      </div>
-      <div className="px-8 lg:px-16 xl:px-32 py-24 flex flex-col items-center gap-12">
-        <h2 className="text-5xl font-bold text-center">Features</h2>
-        <p className="text-3xl text-center">
-          Navigate the hundreds of communities on campus all on one platform.
-        </p>
-      </div>
-      <div className="mx-8 lg:mx-16 xl:mx-32 pt-6 px-6 grid grid-rows-3 grid-cols-1 md:grid-rows-1 md:grid-cols-3 gap-8">
-        {features.map((feature) => (
-          <div key={feature.title} className="flex flex-col items-center gap-4">
-            <div className="rounded-full bg-cornflower-50">
-              <Image src={feature.img} alt={feature.alt} className="h-10 w-10 m-7" />
-            </div>
-            <p className="text-2xl font-bold text-center">{feature.title}</p>
-            <p className="text-xl text-center">{feature.description}</p>
-          </div>
-        ))}
-      </div>
-      <div className="px-8 lg:px-16 xl:px-32 py-24 flex flex-col items-center gap-12">
-        <h2 className="text-5xl font-bold text-center">Interested? Learn more about our project</h2>
-        <a
-          className="px-6 py-3 text-white bg-royal rounded-full hover:bg-[#3634BB] transition-colors"
-          href="https://github.com/UTDNebula/utd-clubs"
-          target="_blank"
-          rel="noreferrer"
-        >
-          Learn More
-        </a>
-      </div>
-      <Footer />
-    </>
+        </>
+      }
+      description="Get connected with student organizations and browse events."
+      cover={{
+        src: Cover,
+        alt: 'Clubs screenshot',
+      }}
+      projectLink="https://clubs.utdnebula.com"
+      featuresDescription="Navigate the hundreds of communities on campus all on one platform."
+      features={features}
+      learnMoreLink="https://github.com/UTDNebula/utd-clubs"
+      repos="utd-clubs"
+    />
   );
 }