Planner page initial

There's a photo missing that was designed, not sure what to put for it
Should learn more go to github or confluence?

src/components/Navbar.tsx

@@ -4,10 +4,12 @@ import type { StaticImageData } from 'next/image';
 import Link from 'next/link';
 import { Disclosure, Transition, TransitionRootProps } from '@headlessui/react';
 import { Fragment, useCallback, useEffect, useRef, useState } from 'react';
-import FilledChevronUp from '@/../public/filled-chevron-up-white.svg';
+import FilledChevronUpWhite from '@/../public/filled-chevron-up-white.svg';
+import FilledChevronUpRoyal from '@/../public/filled-chevron-up-royal.svg';
 import Arrow from '@/../public/arrow-white.svg';
 import X from '@/../public/x.svg';
-import Hamburger from '@/../public/menu-alt-3.svg';
+import HamburgerWhite from '@/../public/menu-white.svg';
+import HamburgerRoyal from '@/../public/menu-royal.svg';
 import Puzzle from '@/../public/puzzle.svg';
 import Users from '@/../public/users.svg';
 import UserGroup from '@/../public/user-group.svg';
@@ -116,6 +118,7 @@ const transitionProps: TransitionRootProps<typeof Fragment> = {
 interface Props {
   className?: string;
   shadow?: boolean;
+  royal?: boolean;
 }
 
 const Navbar = (props: Props) => {
@@ -146,8 +149,8 @@ const Navbar = (props: Props) => {
     };
   }, [ref]);
 
-  const textShadow = props.shadow === true ? '[text-shadow:_0_0_4px_rgb(0_0_0_/_0.4)]' : '';
-  const dropShadow = props.shadow === true ? '[filter:_drop-shadow(0_0_4px_rgb(0_0_0_/_0.4))]' : '';
+  const textShadow = props.shadow ? '[text-shadow:_0_0_4px_rgb(0_0_0_/_0.4)]' : '';
+  const dropShadow = props.shadow ? '[filter:_drop-shadow(0_0_4px_rgb(0_0_0_/_0.4))]' : '';
 
   return (
     <Disclosure
@@ -168,7 +171,7 @@ const Navbar = (props: Props) => {
           />
           <Link className="flex items-center" href="/">
             <Image
-              src={'/icon-white.svg'}
+              src={props.royal ? '/icon-royal.svg' : '/icon-white.svg'}
               alt={'logo'}
               width={90}
               height={70}
@@ -177,7 +180,11 @@ const Navbar = (props: Props) => {
             />
           </Link>
           <Disclosure.Button className="lg:hidden">
-            <Image src={Hamburger} alt="" className={clsx('w-8', dropShadow)} />
+            <Image
+              src={props.royal ? HamburgerRoyal : HamburgerWhite}
+              alt=""
+              className={clsx('w-8', dropShadow)}
+            />
           </Disclosure.Button>
           <Transition {...transitionProps} show={shouldDisplayDesktopMenu || displayMobileMenu}>
             <Disclosure.Panel
@@ -243,9 +250,20 @@ const Navbar = (props: Props) => {
                               'w-full flex gap-1 items-center',
                             )}
                           >
-                            <p className={textShadow}>{item.name}</p>
+                            <p
+                              className={clsx(
+                                textShadow,
+                                props.royal && !displayMobileMenu && 'text-royal',
+                              )}
+                            >
+                              {item.name}
+                            </p>
                             <Image
-                              src={FilledChevronUp}
+                              src={
+                                props.royal && !displayMobileMenu
+                                  ? FilledChevronUpRoyal
+                                  : FilledChevronUpWhite
+                              }
                               alt=""
                               className={clsx(
                                 submenuOpen ? 'rotate-0' : 'rotate-180',
@@ -300,6 +318,7 @@ const Navbar = (props: Props) => {
                       className={clsx(
                         displayMobileMenu && 'flex place-content-between w-full',
                         textShadow,
+                        props.royal && !displayMobileMenu && 'text-royal',
                       )}
                     >
                       {item.name}
@@ -312,6 +331,7 @@ const Navbar = (props: Props) => {
                 className={clsx(
                   'justify-self-end w-max px-4 py-2 rounded-full border whitespace-nowrap',
                   textShadow,
+                  props.royal && !displayMobileMenu ? 'text-royal border-royal' : 'border-white',
                 )}
               >
                 Get Involved

src/pages/projects/planner.tsx

@@ -1,6 +1,41 @@
-import Header from '@/components/Header';
+import clsx from 'clsx';
+import Navbar from '@/components/Navbar';
 import Footer from '@/components/Footer';
 import Head from 'next/head';
+import Rectangle from '@/../public/rectangle.png';
+import Cover from '@/../public/planner/cover.png';
+import Image from 'next/image';
+
+import medal from '@/../public/planner/icons8-gold-medal-100.png';
+import test_tube from '@/../public/planner/icons8-test-tube-100.png';
+import stopwatch from '@/../public/planner/icons8-stopwatch-100.png';
+
+const features = [
+  {
+    title: 'Spreadsheet where?',
+    description:
+      "Bye-bye clunky spreadsheets, hello easy-peasy degree planning with simple click-and-drag action. You're welcome!",
+    img: medal,
+    alt: 'medal',
+    imgOffset: '',
+  },
+  {
+    title: 'Slay your progress!',
+    description:
+      "Not sure where you are in your degree plan? That's ok. Tracking your degree plan is now a piece of cake with our degree tracker.",
+    img: test_tube,
+    alt: 'test tube',
+    imgOffset: 'pb-5 pt-3',
+  },
+  {
+    title: 'Save Time',
+    description:
+      'Planner streamlines academic planning, enabling you to map out your course requirements, track your progress, and adjust your plan as needed so you can focus on what you do best.',
+    img: stopwatch,
+    alt: 'stopwatch',
+    imgOffset: 'pb-5 pt-3',
+  },
+];
 
 const Planner = () => (
   <>
@@ -9,7 +44,68 @@ const Planner = () => (
       <link rel="canonical" href="https://www.utdnebula.com/projects/planner" key="canonical" />
       <meta property="og:url" content="https://www.utdnebula.com/projects/planner" />
     </Head>
-    <Header text="Planner" />
+    <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={Rectangle} alt="project background" fill className="-z-20" />
+      <a
+        className="justify-self-end w-max px-16 py-2 rounded-full border-2 border-white whitespace-nowrap font-kallisto"
+        href="https://planner.utdnebula.com/"
+        target="_blank"
+      >
+        PLANNER
+      </a>
+      <h1 className="text-6xl font-bold text-center">
+        Plan your degree
+        <br />
+        with ease
+      </h1>
+      <h2 className="text-3xl text-center">
+        Blast off your academic journey with Planner - the ultimate tool for customizing your
+        four-year degree.
+      </h2>
+      <a
+        className="px-6 py-3 text-white bg-royal rounded-full hover:bg-[#3634BB] transition-colors"
+        href="https://planner.utdnebula.com/auth/login"
+        target="_blank"
+      >
+        Get Started
+      </a>
+      <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="Planner screenshot" className="" />
+      </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">Features</h2>
+      <p className="text-3xl text-center">
+        Say goodbye to the stress and hassle of degree planning and hello to a smooth, organized
+        path towards graduation with Nebula Planner.
+      </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={clsx('h-24 w-24 p-4', feature.imgOffset)}
+            />
+          </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/planner"
+        target="_blank"
+      >
+        Learn More
+      </a>
+    </div>
     <Footer />
   </>
 );