frontpage rewrite intitial

app/about/page.tsx

@@ -1,10 +1,10 @@
-"use client"
-import type { NextPage } from 'next';
-import '@/src/styles/reset.scss';
+"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';
-import Footer from '@/src/components/footer'
+import About from "@/src/sections/About-Projects";
+import NavigationBar from "@/src/components/navbar";
+import Footer from "@/src/components/footer";
 // here we will compile all the sections of the website together
 
 const AboutPage: NextPage = () => {
@@ -17,4 +17,4 @@ const AboutPage: NextPage = () => {
   );
 };
 
-export default AboutPage;
+export default AboutPage;

app/page.tsx

@@ -7,13 +7,16 @@ import Archive from "../src/sections/Archive";
 import NavigationBar from "@/src/components/navbar";
 import TimerHero from "@/src/sections/Timer";
 import Footer from "@/src/components/footer";
-import PhotoGallery from "@/src/sections/Photo-Gallery";
+import Description from "@/src/sections/description";
+import Hero from "@/src/sections/Hero";
 // here we will compile all the sections of the website together
 const Home: NextPage = () => {
   return (
     <main>
       <NavigationBar />
-      <TimerHero />
+      <Hero />
+      {/* <TimerHero /> */}
+      <Description />
       <Footer />
     </main>
   );

src/components/banner/index.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import styles from "./style.module.scss";
+
+const Banner = () => {
+  const [days, setDays] = useState(0);
+  const [hours, setHours] = useState(0);
+  const [minutes, setMinutes] = useState(0);
+  const [seconds, setSeconds] = useState(0);
+
+  useEffect(() => {
+    const target = new Date("04/02/2024 23:59:59");
+
+    const interval = setInterval(() => {
+      const now = new Date();
+      const difference = target.getTime() - now.getTime();
+
+      if (difference <= 0) {
+        // The target date has passed, set all values to zero
+        setDays(0);
+        setHours(0);
+        setMinutes(0);
+        setSeconds(0);
+        clearInterval(interval);
+      } else {
+        const d = Math.floor(difference / (1000 * 60 * 60 * 24));
+        setDays(d);
+
+        const h = Math.floor(
+          (difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
+        );
+        setHours(h);
+
+        const m = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
+        setMinutes(m);
+
+        const s = Math.floor((difference % (1000 * 60)) / 1000);
+        setSeconds(s);
+      }
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <div>
+      <div className={styles.bannerbg}>
+        Projects applications close in{" "}
+        <text className={styles.date}>
+          {days} days {hours} hours {minutes} minutes {seconds} seconds
+        </text>
+      </div>
+    </div>
+  );
+};
+
+export default Banner;

src/components/banner/style.module.scss

@@ -0,0 +1,11 @@
+@use "../../styles/vars.scss" as v; // allows you to use pre-defined colors
+
+.bannerbg {
+  background-color: v.$acm-blue-30 !important;
+  text-align: center;
+  padding: 0.3rem;
+}
+
+.date {
+  font-weight: 700;
+}

src/components/navbar/index.tsx

@@ -1,11 +1,11 @@
-'use client'
+"use client";
 
 import Link from "next/link";
 import { useEffect, useState } from "react";
 import ProjLogo from "../../../public/assets/proj_logo.png";
 import s from "./Navbar.module.scss";
 import { Size, useWindowSize } from "../../utils/general";
-
+import Banner from "../banner";
 
 const navLinks = [
   { href: "/", label: "Home" },
@@ -32,46 +32,50 @@ const NavigationBar: React.FC = () => {
 
   return (
     <div className={s.navbarWrapper}>
+      <Banner />
       <div className={s.navbar}>
         {/* Navbar ACM Logo */}
         <div className={`${s.left}`}>
-            <Link href={"/"}>
-              <img src={ProjLogo.src} alt="ACM Logo" />
-              <p>ACM Projects</p>
-            </Link>
-            <div className={s.divider}>
-              <span>|</span>
-            </div>
-            <div className={`${s.navLinks} ${mobile && s.hidden}`}>
-              {navLinks.map((link, key) => (
-                <Link key={key} href={link.href}>
-                  <p>{link.label}</p>
-                </Link>
-              ))}
-            </div>
+          <Link href={"/"}>
+            <img src={ProjLogo.src} alt="ACM Logo" />
+            <p>ACM Projects</p>
+          </Link>
+          <div className={s.divider}>
+            <span>|</span>
+          </div>
+          <div className={`${s.navLinks} ${mobile && s.hidden}`}>
+            {navLinks.map((link, key) => (
+              <Link key={key} href={link.href}>
+                <p>{link.label}</p>
+              </Link>
+            ))}
+          </div>
         </div>
 
-            {/* Mobile Navbar Toggle */}
-          <button className={`${s.toggleIcon} ${!mobile && s.hidden}`} onClick={toggleMenu}>
-            <div className={`${s.bar1} ${menuOpen && s.open}`} />
-            <div className={`${s.bar2} ${menuOpen && s.open}`} />
-          </button>   
-        </div>
+        {/* Mobile Navbar Toggle */}
+        <button
+          className={`${s.toggleIcon} ${!mobile && s.hidden}`}
+          onClick={toggleMenu}
+        >
+          <div className={`${s.bar1} ${menuOpen && s.open}`} />
+          <div className={`${s.bar2} ${menuOpen && s.open}`} />
+        </button>
+      </div>
 
-        {/* Mobile Menu Dropdown */}
-        <div className={`${s.mobileNav} ${menuOpen && s.open}`}>
-          {navLinks.map((link, key) => (
-            <Link key={key} href={link.href}>
-              <p className={`${s.navItem}`} onClick={() => setMenuOpen(false)}>
-                {link.label}
-              </p>
-            </Link>
-          ))}
-        </div>
+      {/* Mobile Menu Dropdown */}
+      <div className={`${s.mobileNav} ${menuOpen && s.open}`}>
+        {navLinks.map((link, key) => (
+          <Link key={key} href={link.href}>
+            <p className={`${s.navItem}`} onClick={() => setMenuOpen(false)}>
+              {link.label}
+            </p>
+          </Link>
+        ))}
+      </div>
       {/* Bottom Rainbow */}
       <div className={s.rainbow} />
     </div>
   );
 };
 
-export default NavigationBar;
+export default NavigationBar;

src/components/navbar/style.module.scss

@@ -1 +1 @@
-@use "..\styles\vars.scss" as v; // allows you to use pre-defined colors
+@use "..\styles\vars.scss"as v; // allows you to use pre-defined colors

src/sections/Hero/index.tsx

@@ -0,0 +1,45 @@
+"use client";
+import Image from "next/image";
+import styles from "./style.module.scss";
+import Description from "../description";
+
+const Hero = () => {
+  const projects_app = "https://acmurl.com/projects-app";
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.pageContent}>
+        <div className={styles.hero}>
+          <div className={styles.hero_left}>
+            <h1 className={styles.title}>ACM Projects</h1>
+            <p className={styles.description}>
+              ACM Projects is our quarterly projects program where students work
+              in a tight knit team. The program gives students the opportunity
+              to be hands-on outside of courses in fields such as AI, design,
+              and software engineering. The program culminates in a projects
+              showcase and the finished product looks great on resumes. We
+              welcome all skill levels to apply!
+            </p>
+            <div className={styles.application}>
+              <a href={projects_app} target="_blank">
+                <button className={styles.button}>
+                  Apply Now!
+                  {/* Close */}
+                </button>
+              </a>
+              <div>
+                Applications Due <text>April 4th, 11:59PM!</text>
+              </div>
+            </div>
+          </div>
+          <img
+            className={styles.image}
+            src="/assets/nicole_team.jpg"
+            alt="ACM Projects"
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+export default Hero;

src/sections/Hero/style.module.scss

@@ -0,0 +1,46 @@
+@use "../../styles/vars.scss" as v; // allows you to use pre-defined colors
+
+.container {
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  justify-self: start;
+  flex-direction: column;
+
+  @media screen and (max-width: 768px) {
+    align-items: flex-start;
+  }
+}
+
+.hero {
+  margin: 0rem 10rem;
+  font-size: 20px;
+  word-wrap: normal;
+  display: flex;
+  justify-content: center;
+}
+
+.title {
+  font-size: 64px;
+  font-weight: 200;
+}
+
+.hero_left {
+  padding-right: 100px;
+}
+
+.image {
+  width: 50%;
+  border-radius: 10px;
+}
+
+.button {
+  background-color: v.$acm-blue;
+  color: v.$white;
+  padding: 12px 30px;
+  border-radius: 10px;
+  font-size: 16px;
+  cursor: pointer;
+  border-width: 0;
+}

src/sections/Timer/style.module.scss

@@ -143,7 +143,7 @@
 
 .projecttypes {
   display: flex;
-  justify-content: space-between;
+  justify-content: space-evenly;
   flex-flow: row wrap;
   text-align: left;
   padding-left: 2rem;

src/sections/description/index.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import s from "./style.module.scss";
+
+const Description = () => {
+  return (
+    <div className={s.projecttypes}>
+      <div className={s.projectdescription}>
+        <text className={s.ai}>AI</text> projects focus on building a project
+        related to all things AI, from natural language processing to computer
+        vision and more!{" "}
+      </div>
+      <div className={s.projectdescription}>
+        <text className={s.hack}>Hack</text> projects works to build a full MERN
+        stack website, emulating a software engineering team working on the
+        Agile process!
+      </div>
+
+      <div className={s.projectdescription}>
+        <text className={s.design}>Design</text> projects work on creating or
+        redesigning a platform, working through the design process from research
+        to prototyping and more!
+      </div>
+    </div>
+  );
+};
+
+export default Description;

src/sections/description/style.module.scss

@@ -0,0 +1,29 @@
+@use "../../styles/vars.scss" as v; // allows you to use pre-defined colors
+
+.hack {
+  font-weight: bold;
+  color: #f9a857;
+}
+
+.ai {
+  font-weight: bold;
+  color: #ff6f6f;
+}
+
+.design {
+  font-weight: bold;
+  color: #ff94b4;
+}
+
+.projecttypes {
+  display: flex;
+  justify-content: space-between;
+  text-align: left;
+  flex-flow: row wrap;
+  margin: 0rem 10rem;
+  padding-top: 5rem;
+}
+
+.projectdescription {
+  max-width: 33%;
+}