diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index f85a5f8..e3b6090 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -4,16 +4,17 @@ 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';
import TrendingUp from '@/../public/trending-up.svg';
import Pencil from '@/../public/pencil.svg';
-import Map from '@/../public/map.svg';
import Star from '@/../public/star.svg';
type BaseItem = { name: string };
@@ -52,42 +53,39 @@ const parentItems: Array = [
{
name: 'Our Projects',
children: [
- {
- name: 'Overview',
- link: '/projects',
- description: 'Get a rundown on all our projects',
- iconSrc: Map,
- },
- {
- name: 'Planner',
- link: 'https://planner.utdnebula.com/',
- description: 'Help plan degree and course requirements',
- iconSrc: Pencil,
- },
{
name: 'Jupiter',
- link: 'https://jupiter.utdnebula.com/',
+ link: '/projects/jupiter',
description: 'Find and connect with student organizations',
iconSrc: Users,
},
{
name: 'Trends',
- link: 'https://trends.utdnebula.com/',
+ link: '/projects/trends',
description: 'Help plan coursework through grade and professor stats',
iconSrc: TrendingUp,
},
{
name: 'Skedge',
- link: 'https://chromewebstore.google.com/detail/skedge/ghipfanpcodcmkjacmmfjdmccdiaahab',
+ link: '/projects/skedge',
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',
+ link: '/projects/api',
+ description:
+ 'Integrate ' +
+ (new Date().getFullYear() - 2017) +
+ '+ years of historical UTD data into your applications',
iconSrc: Puzzle,
},
+ {
+ name: 'Planner',
+ link: '/projects/planner',
+ description: 'Help plan degree and course requirements',
+ iconSrc: Pencil,
+ },
],
},
];
@@ -116,6 +114,7 @@ const transitionProps: TransitionRootProps = {
interface Props {
className?: string;
shadow?: boolean;
+ royal?: boolean;
}
const Navbar = (props: Props) => {
@@ -146,8 +145,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 dropShadow = props.shadow ? 'drop-shadow' : '';
+ const textShadow = props.shadow ? 'text-shadow' : '';
return (
{
/>
{
/>
-
+ {
'w-full flex gap-1 items-center',
)}
>
-
{item.name}
+
+ {item.name}
+
{
className={clsx(
displayMobileMenu && 'flex place-content-between w-full',
textShadow,
+ props.royal && !displayMobileMenu && 'text-royal',
)}
>
{item.name}
@@ -312,6 +327,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
diff --git a/src/components/Projects.tsx b/src/components/Projects.tsx
index 9b47616..540fded 100644
--- a/src/components/Projects.tsx
+++ b/src/components/Projects.tsx
@@ -1,6 +1,7 @@
import ArrowButton from '@/../public/testimonials/arrow-button.svg';
import { createRef, useEffect, useState } from 'react';
-import Image, { StaticImageData } from 'next/image';
+import Image from 'next/image';
+import type { StaticImageData } from 'next/image';
import Carousel from './Carousel';
import Planner from '@/../public/projects/planner.png';
import Skedge from '@/../public/projects/skedge.png';
@@ -21,21 +22,21 @@ type Project = {
const PROJECTS_INFO: Project[] = [
{
- title: 'Planner',
- shortName: 'Planner',
+ title: 'Jupiter',
+ shortName: 'Jupiter',
description:
- 'Planner is a student-focused tool for creating and tracking degree plans, offering a user-friendly interface to simplify course mapping and progress tracking.',
- url: 'https://planner.utdnebula.com/',
- image: Planner,
- alt: "A laptop displaying Planner's dashboard, showing a list of degree plan cards",
- color: '#523DFF',
+ '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.',
+ url: '/projects/jupiter',
+ image: Jupiter,
+ alt: "A laptop displaying Jupiter's dashboard, with a list of clubs and organizations.",
+ color: '#926FDB',
},
{
title: 'Sk.edge/Trends',
shortName: 'Sk.edge/Trends',
description:
'Sk.edge and Trends are tools designed to simplify the course selection and registration process by providing students with valuable data, all in one place.',
- url: 'https://trends.utdnebula.com/',
+ url: '/projects/skedge',
image: Skedge,
alt: "A mockup of Sk.edge's dashboard, displaying statistics for a professor",
color: '#6366F1',
@@ -45,20 +46,20 @@ const PROJECTS_INFO: Project[] = [
shortName: 'API',
description:
'The Nebula API serves as the authoritative data source for UTD information such as courses, student organizations, and more.',
- url: 'https://github.com/UTDNebula/nebula-api',
+ url: '/projects/api',
// image: API,
alt: '',
color: '#FF6B4A',
},
{
- title: 'Jupiter',
- shortName: 'Jupiter',
+ title: 'Planner',
+ shortName: 'Planner',
description:
- '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.',
- url: 'https://jupiter.utdnebula.com/',
- image: Jupiter,
- alt: "A laptop displaying Jupiter's dashboard, with a list of clubs and organizations.",
- color: '#926FDB',
+ 'Planner is a student-focused tool for creating and tracking degree plans, offering a user-friendly interface to simplify course mapping and progress tracking.',
+ url: '/projects/planner',
+ image: Planner,
+ alt: "A laptop displaying Planner's dashboard, showing a list of degree plan cards",
+ color: '#523DFF',
},
];
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
index b91ec26..45f4e67 100644
--- a/src/pages/_document.tsx
+++ b/src/pages/_document.tsx
@@ -25,7 +25,7 @@ export default function Document() {
-
+
diff --git a/src/pages/projects/api.tsx b/src/pages/projects/api.tsx
index 0c00356..1f52afc 100644
--- a/src/pages/projects/api.tsx
+++ b/src/pages/projects/api.tsx
@@ -1,6 +1,35 @@
-import Header from '@/components/Header';
+import Navbar from '@/components/Navbar';
import Footer from '@/components/Footer';
import Head from 'next/head';
+import Rectangle from '@/../public/rectangle.png';
+import Image from 'next/image';
+
+import expand from '@/../public/api/icons8-expand-100.png';
+import crowd from '@/../public/api/icons8-crowd-100.png';
+import support from '@/../public/api/icons8-support-100.png';
+
+const features = [
+ {
+ title: 'Size',
+ description: 'The largest dataset of university data on campus.',
+ img: 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',
+ },
+ {
+ title: 'Support',
+ description:
+ 'Continuously improving and up-to-date data as well as personal support in the Nebula Discord.',
+ img: support,
+ alt: 'wrench',
+ },
+];
const API = () => (
<>
@@ -9,7 +38,59 @@ const API = () => (
-
+
+
+
+
+ API & Platform
+
+
+ The Backbone
+
+ of Nebula Labs
+
+
+ Providing reliable and feature-rich data infrastructure for all of Nebula’s projects.
+
- Planner is a student-focused tool for creating and tracking degree plans, offering a
- user-friendly interface to simplify course mapping and progress tracking.
-
- 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.
-
- A browser extension that hooks into course planner to give you grade and RateMyProfessor
- data while picking courses, easing your course selection experience.{' '}
-
- The Nebula API serves as the authoritative data source for UTD information such as
- courses, student organizations, and more.
-
-
-
-
-
-);
-
-export default Projects;
diff --git a/src/pages/projects/jupiter.tsx b/src/pages/projects/jupiter.tsx
index 68b457b..0911401 100644
--- a/src/pages/projects/jupiter.tsx
+++ b/src/pages/projects/jupiter.tsx
@@ -1,6 +1,37 @@
-import Header from '@/components/Header';
+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/jupiter/cover.png';
+import Image from 'next/image';
+
+import search from '@/../public/jupiter/icons8-search-100.png';
+import calendar from '@/../public/jupiter/icons8-calendar-100.png';
+import community from '@/../public/jupiter/icons8-community-100.png';
+
+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',
+ },
+ {
+ 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',
+ },
+ {
+ 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',
+ },
+];
const Jupiter = () => (
<>
@@ -9,7 +40,60 @@ const Jupiter = () => (
-
+
+
+
+
+ JUPITER
+
+
+ Find your community
+
+ on campus
+
+
+ Get connected with student organizations and browse events.
+
);
diff --git a/src/pages/projects/planner.tsx b/src/pages/projects/planner.tsx
index b6189e7..b59c678 100644
--- a/src/pages/projects/planner.tsx
+++ b/src/pages/projects/planner.tsx
@@ -1,6 +1,37 @@
-import Header from '@/components/Header';
+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 browser from '@/../public/planner/icons8-browser-100.png';
+import sword from '@/../public/planner/icons8-sword-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: browser,
+ alt: 'browser',
+ },
+ {
+ 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: sword,
+ alt: 'sword',
+ },
+ {
+ 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',
+ },
+];
const Planner = () => (
<>
@@ -9,7 +40,62 @@ const Planner = () => (
-
+
+
+
+
+ PLANNER
+
+
+ Plan your degree
+
+ with ease
+
+
+ Blast off your academic journey with Planner - the ultimate tool for customizing your
+ four-year degree.
+
);
diff --git a/src/pages/projects/skedge.tsx b/src/pages/projects/skedge.tsx
index 53e7359..f7ac791 100644
--- a/src/pages/projects/skedge.tsx
+++ b/src/pages/projects/skedge.tsx
@@ -1,6 +1,39 @@
-import Header from '@/components/Header';
+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/skedge/cover.png';
+import Image from 'next/image';
+
+import Chrome from '@/../public/skedge/chrome.png';
+import Firefox from '@/../public/skedge/firefox.png';
+
+import input from '@/../public/trends/icons8-input-100.png';
+import aggregate from '@/../public/trends/icons8-aggregate-100.png';
+import calendar from '@/../public/skedge/icons8-calendar-100.png';
+
+const features = [
+ {
+ title: 'Multiple Sources',
+ description: 'Find grade distributions and Rate My Professors scores for any given class.',
+ img: input,
+ alt: 'input',
+ },
+ {
+ title: 'Aggregate',
+ description:
+ 'Powerful query abilities that aggregate grade and Rate My Professors data across several years to give you a more wholistic view.',
+ img: aggregate,
+ alt: 'aggregate',
+ },
+ {
+ title: 'Schedule Planner Integration',
+ description:
+ 'Direct integration means getting the exact information you need, right when you need it.',
+ img: calendar,
+ alt: 'calendar',
+ },
+];
const Skedge = () => (
<>
@@ -9,7 +42,73 @@ const Skedge = () => (
-
+
+
+
+
+ SKEDGE
+
+
+ Choose the perfect
+
+ classes for you
+
+
+ Easy access to all the information you need to plan your schedule.
+
);
diff --git a/src/pages/projects/trends.tsx b/src/pages/projects/trends.tsx
index 3062052..ab2e704 100644
--- a/src/pages/projects/trends.tsx
+++ b/src/pages/projects/trends.tsx
@@ -1,6 +1,36 @@
-import Header from '@/components/Header';
+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/trends/cover.png';
+import Image from 'next/image';
+
+import input from '@/../public/trends/icons8-input-100.png';
+import aggregate from '@/../public/trends/icons8-aggregate-100.png';
+import scale from '@/../public/trends/icons8-scale-100.png';
+
+const features = [
+ {
+ title: 'Multiple Sources',
+ description: 'Find grade distributions and Rate My Professors scores for any given class.',
+ img: input,
+ alt: 'input',
+ },
+ {
+ title: 'Aggregate',
+ description:
+ 'Powerful query abilities that aggregate grade and Rate My Professors data across several years to give you a more wholistic view.',
+ img: aggregate,
+ alt: 'aggregate',
+ },
+ {
+ title: 'Compare',
+ description:
+ 'See data for multiple courses, professors, and categories on a single graph without switching tabs.',
+ img: scale,
+ alt: 'scale',
+ },
+];
const Trends = () => (
<>
@@ -9,7 +39,60 @@ const Trends = () => (
-
+
+
+
+
+ TRENDS
+
+
+ Choose the perfect
+
+ classes for you
+
+
+ Easy access to all the information you need to plan your schedule.
+