Add a projects page

src/components/Navbar.tsx

@@ -48,44 +48,13 @@ const parentItems: Array<ParentItem> = [
       },
     ],
   },
-  {
-    name: 'Our Projects',
-    children: [
-      {
-        name: 'Planner',
-        link: 'https://planner.utdnebula.com/',
-        description: 'Help plan degree and course requirements',
-        iconSrc: Pencil,
-      },
-      {
-        name: 'Jupiter',
-        link: 'https://jupiter.utdnebula.com/',
-        description: 'Find and connect with student organizations',
-        iconSrc: Users,
-      },
-      {
-        name: 'Trends',
-        link: 'https://trends.utdnebula.com/',
-        description: 'Help plan coursework through grade and professor stats',
-        iconSrc: TrendingUp,
-      },
-      {
-        name: 'Skedge',
-        link: 'https://chromewebstore.google.com/detail/skedge/ghipfanpcodcmkjacmmfjdmccdiaahab',
-        description: 'Integrate grade and professor stats into Schedule Planner',
-        iconSrc: TrendingUp,
-      },
-      {
-        name: 'API & Platform',
-        link: 'https://github.com/UTDNebula/nebula-api',
-        description: 'Integrate X+ years of historical UTD data into your applications',
-        iconSrc: Puzzle,
-      },
-    ],
-  },
 ];
 
 const childItems: Array<LinkItem> = [
+  {
+    name: 'Our Projects',
+    link: '/projects',
+  },
   {
     name: 'Membership',
     link: '/resources/roles',

src/pages/projects/index.tsx

@@ -1,6 +1,12 @@
 import Header from '@/components/Header';
 import Footer from '@/components/Footer';
 import Head from 'next/head';
+import Image from 'next/image';
+import Arrow from '@/../public/arrow-white.svg';
+
+const headerStyle =
+  'text-3xl md:text-5xl font-bold pb-4 text-left hover:text-royal transition-colors w-fit';
+const infoStyle = 'text-xl md:text-2xl text-left';
 
 const Projects = () => (
   <>
@@ -10,6 +16,53 @@ const Projects = () => (
       <meta property="og:url" content="https://www.utdnebula.com/projects" />
     </Head>
     <Header text="Projects" />
+    <section className="flex flex-col gap-y-20 md:px-40 px-5">
+      <section>
+        <a href="https://planner.utdnebula.com/" className="w-full">
+          <h2 className={headerStyle}>Planner</h2>
+        </a>
+        <p className={infoStyle}>
+          Planner is a student-focused tool for creating and tracking degree plans, offering a
+          user-friendly interface to simplify course mapping and progress tracking.
+        </p>
+      </section>
+      <section>
+        <a href="https://trends.utdnebula.com/">
+          <h2 className={headerStyle}>Trends</h2>
+        </a>
+        <p className={infoStyle}>
+          UTD Trends is a website that lets you visualize and compare grade distributions, and
+          RateMyProfessor data for professors and courses.
+        </p>
+      </section>
+      <section>
+        <a href="https://jupiter.utdnebula.com/">
+          <h2 className={headerStyle}>Jupiter</h2>
+        </a>
+        <p className={infoStyle}>
+          Jupiter is the best way to get involved on campus. It’s easy to discover new organizations
+          or exciting events to make the most of the on-campus experience.
+        </p>
+      </section>
+      <section>
+        <a href="https://chromewebstore.google.com/detail/skedge/ghipfanpcodcmkjacmmfjdmccdiaahab">
+          <h2 className={headerStyle}>Skedge</h2>
+        </a>
+        <p className={infoStyle}>
+          A browser extension that hooks into course planner to give you grade and RateMyProfessor
+          data while picking courses, easing your course selection experience.{' '}
+        </p>
+      </section>
+      <section>
+        <a href="https://github.com/UTDNebula/nebula-api">
+          <h2 className={headerStyle}>API & Platform</h2>
+        </a>
+        <p className={infoStyle}>
+          The Nebula API serves as the authoritative data source for UTD information such as
+          courses, student organizations, and more.
+        </p>
+      </section>
+    </section>
     <Footer royalBg={false} />
   </>
 );