Split into different pages (#17)

* Split into different pages

No longer a vertical page. Split into
- "/" which contains home and apply
- "/about" which contains about pages
- "/gallery" which contains photos page
- "archive" which contains past projects

Plus there are some minor CSS changes to accommodate

* Navbar fixes and headers for pages

- combined home and apply pages
- fixed dates and links for home page
- added appropriate headers and styles

* Text updates and fixed navbar rainbow

app/about/page.tsx

@@ -0,0 +1,18 @@
+"use client"
+import type { NextPage } from 'next';
+import '@/src/styles/reset.scss';
+
+import About from '@/src/sections/About-Projects';
+import NavigationBar from '@/src/components/navbar';
+// here we will compile all the sections of the website together
+
+const AboutPage: NextPage = () => {
+  return (
+    <main>
+      <NavigationBar />
+      <About />
+    </main>
+  );
+};
+
+export default AboutPage;

app/archive/page.tsx

@@ -0,0 +1,18 @@
+"use client"
+import type { NextPage } from 'next';
+import '@/src/styles/reset.scss';
+
+import NavigationBar from '@/src/components/navbar';
+import Archive from '@/src/sections/Archive';
+// here we will compile all the sections of the website together
+
+const ArchivePage: NextPage = () => {
+  return (
+    <main>
+      <NavigationBar />
+      <Archive />
+    </main>
+  );
+};
+
+export default ArchivePage;

app/gallery/page.tsx

@@ -0,0 +1,18 @@
+"use client"
+import type { NextPage } from 'next';
+import '@/src/styles/reset.scss';
+
+import PhotoGallery from '@/src/sections/Photo-Gallery';
+import NavigationBar from '@/src/components/navbar';
+// here we will compile all the sections of the website together
+
+const GalleryPage: NextPage = () => {
+  return (
+    <main>
+      <NavigationBar />
+      <PhotoGallery />
+    </main>
+  );
+};
+
+export default GalleryPage;

app/page.tsx

@@ -13,9 +13,9 @@ const Home: NextPage = () => {
     <main>
       <NavigationBar />
       <TimerHero />
-      <About />
+      {/* <About />
       <Archive/>
-      <PhotoGallery />
+      <PhotoGallery /> */}
     </main>
   );
 };

src/components/navbar/Navbar.module.scss

@@ -186,7 +186,8 @@
     line-height: 300%;
     transition: 0.3s ease-in-out;
     // mobile menu is hidden by positioning under fixed navbar, we open it by sliding it out
-    margin-top: -22rem;
+    // if you want to add or remove nav options, change this
+    margin-top: -17.5rem;
     &.open {
       margin-top: 0;
     }

src/components/navbar/index.tsx

@@ -8,11 +8,11 @@ import { Size, useWindowSize } from "../../utils/general";
 
 
 const navLinks = [
-  { href: "/#home", label: "Home" },
-  { href: "/#apply", label: "Apply" },
-  { href: "/#about", label: "About" },
-  { href: "/#archive", label: "Archive" },
-  { href: "/#gallery", label: "Gallery" },
+  { href: "/", label: "Home" },
+  // { href: "/", label: "Apply" },
+  { href: "/about", label: "About" },
+  { href: "/archive", label: "Archive" },
+  { href: "/gallery", label: "Gallery" },
 ];
 
 const NavigationBar: React.FC = () => {

src/sections/Archive/style.module.scss

@@ -5,4 +5,5 @@
     flex-direction: column;
     align-items: center;
     margin-top: 2rem;
+    padding-top: 3rem;
 }

src/sections/Photo-Gallery/index.tsx

@@ -100,7 +100,7 @@ const PhotoGallery: React.FC = () => {
                         { viewport: "(max-width: 1199px)", size: "calc(90vw - 30px)" },
                     ],
                 }}
-            /> 
+            />
         </>
     );
 }

src/sections/Photo-Gallery/style.module.scss

@@ -5,6 +5,8 @@
     flex-direction: column;
     justify-content: center;
     align-items: center;
+    padding-top: 5rem;
+    padding-bottom: 1.5rem;
 
     select {
         border-radius: 0.25rem;

src/sections/Timer/index.tsx

@@ -4,7 +4,7 @@ import { useState, useEffect } from "react";
 import s from "../Timer/style.module.scss";
 import ACMLogo from "../../../public/assets/acm_logo.png"
 
-const projects_app = "https://acmurl.com/fall-project-apps";
+const projects_app = "https://acmurl.com/winter-project-apps";
 
 
 const TimerHero: React.FC = () => {
@@ -17,7 +17,7 @@ const TimerHero: React.FC = () => {
 
   useEffect(() => {
 
-    const target = new Date("9/25/2023 08:00:00")
+    const target = new Date("01/21/2024 23:59:59")
 
     const interval = setInterval(() =>{
       const now = new Date()
@@ -60,7 +60,7 @@ const TimerHero: React.FC = () => {
         <div className={s.hero__timer__header}>
           <div className={s.hero__timer__header}>
             {/* <p>Countdown To</p> */}
-            <h1>Fall 2023 Project Application Closed</h1>          
+            <h1>Winter 2023 Project Application Closes In</h1>          
           </div>
 
           <div className={s.hero__timer__time}>
@@ -93,9 +93,9 @@ const TimerHero: React.FC = () => {
       <div className={s.description} id="apply">
         <div className={s.description__info}>
           <a href={projects_app} target="_blank"><button>
-          Closed
+          Open
           </button></a>
-          <p>The application for ACM Projects is now closed. Applications will reopen in Fall 2023.</p>
+          {/* <p>The application for ACM Projects is now closed. Applications will reopen in Spring 2024.</p> */}
           <div className={s.description__info__logo}>
             <img src={ACMLogo.src} alt="ACM Logo" />
 

src/sections/Timer/style.module.scss

@@ -151,7 +151,7 @@
       font-size: 32px;
       color: v.$darker-white;
       // background-color: v.$blue-ap; for when it is open
-      background-color: v.$red-warning;
+      background-color: v.$green-success;
       cursor: pointer;
     }
     button:hover {