Toby/countdown

src/components/countdown/index.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import styles from "./style.module.scss";
+
+type CountdownProps = {
+  className?: string;
+};
+
+const Countdown = ({ className = "" }: CountdownProps) => {
+  const [days, setDays] = useState(0);
+  const [hours, setHours] = useState(0);
+  const [minutes, setMinutes] = useState(0);
+  const [seconds, setSeconds] = useState(0);
+  let countdownComponents : number[] = [days, hours, minutes, seconds];
+
+  useEffect(() => {
+    const target = new Date("10/02/2026 23:59:59");
+
+    const interval = setInterval(() => {
+      const now = new Date();
+      const difference = target.getTime() - now.getTime();
+
+      if (difference <= 0) {
+        setDays(0);
+        setHours(0);
+        setMinutes(0);
+        setSeconds(0);
+        countdownComponents = [days, hours, minutes, seconds];
+        clearInterval(interval);
+      } else {
+        setDays(Math.floor(difference / (1000 * 60 * 60 * 24)));
+        setHours(
+          Math.floor(
+            (difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
+          )
+        );
+        setMinutes(
+          Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60))
+        );
+        setSeconds(Math.floor((difference % (1000 * 60)) / 1000));
+        countdownComponents = [days, hours, minutes, seconds];
+      }
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <div className={`${styles.date} ${className}`}>
+      {countdownComponents.map((comp, key) => {
+        const digits = String(comp).padStart(2, '0').split('');
+
+        return (
+          <span key={key}>
+            <span className={styles.digit}>{digits[0]}</span>
+            <span className={styles.digit}>{digits[1]}</span>
+            {key < 3 ? <span>:</span> : null}
+          </span>
+        );
+      })}
+    </div>
+  );
+};
+
+export default Countdown;

src/components/countdown/style.module.scss

@@ -0,0 +1,13 @@
+@use "../../styles/vars.scss" as v; // allows you to use pre-defined colors
+
+.date {
+  color: black;
+  font-size: 1.25rem;
+  font-weight: 700;
+
+  .digit {
+    display: inline-block;
+    width: 1ch;
+    text-align: center;
+  }
+}

src/components/footer/styles.module.scss

@@ -8,7 +8,7 @@ $mmmw: 375px; // medium mobile max width
 .footer {
   width: 100%;
   height: 100%;
-  background-color: vars.$footer-blue;
+  background-color: vars.$proj-blue;
   color: vars.$white;
   z-index: 0;
   position: relative;
@@ -224,4 +224,4 @@ $mmmw: 375px; // medium mobile max width
       }
     }
   }
-}
+}

src/components/navbar/Navbar.module.scss

@@ -66,7 +66,7 @@ $stmw: 956px; // small tablet max width
       .logoText {
         font-size: 1.375rem;
         font-weight: 700;
-        color: vars.$proj-blue;
+        color: vars.$proj-blue-2;
         margin: 0;
         margin-left: 0.5rem;
       }
@@ -146,7 +146,7 @@ $stmw: 956px; // small tablet max width
     // mobile menu is hidden by positioning under fixed navbar by moving the top margin up; we open it by sliding it out w/ transition and changing margin-top to 0
     margin-top:
       -1 * $num-navItems * ($mobileNav-line-height + $navItem-margin-bottom);
-    border-bottom: $bottom-border-width solid vars.$proj-blue;
+    border-bottom: $bottom-border-width solid vars.$proj-blue-2;
     transition: margin-top 0.3s ease-in-out;
 
     a {
@@ -192,4 +192,4 @@ $stmw: 956px; // small tablet max width
       }
     }
   }
-}
+}

src/components/navbar/index.tsx

@@ -5,7 +5,7 @@ import { useEffect, useState } from "react";
 import s from "./Navbar.module.scss";
 import { Size, useWindowSize } from "../../utils/general";
 
-const ProjLogo = "/assets/proj_logo.svg";
+const ProjLogo = "/assets/navbar_proj_logo.svg";
 
 // Nav link properties
 const navLinks = [
@@ -78,4 +78,4 @@ const NavigationBar: React.FC = () => {
   );
 };
 
-export default NavigationBar;
+export default NavigationBar;