Countdown

src/components/doe/timer/mainSectionDoe.tsx

@@ -0,0 +1,56 @@
+import WordCycle from '@/components/mainSection/wordCycle';
+import Clouds from '@/components/mainSection/clouds';
+import styles from '@/styles/doe/mainSection.module.scss';
+// import { faDiscord } from '@fortawesome/free-brands-svg-icons';
+// import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+const MainSectionDoe = () => (
+  <>
+    <Clouds />
+    <section style={{ paddingTop: 100 }} className={styles.wrapper}>
+      <div className={styles.mainAnimationSection}>
+        <div className={styles.landing}>
+          <div className={styles.mainSection}>
+            <h1 className={styles.tagline}>
+              <WordCycle />
+              <span className={styles.socialGood}> social good</span>
+            </h1>
+            <div className={styles.event}>
+              <h2 className={styles.hackdavis}>
+                Hack<b>Davis</b>{' '}
+              </h2>
+              <strong>May 20-21, 2023</strong>
+            </div>
+          </div>
+
+          {/* <div className={styles.buttons}>
+            <div>
+              <a
+                className={styles.yellowButton}
+                href="https://hackdavis2023.devpost.com/"
+                target="_blank"
+                rel="noreferrer"
+              >
+                Submit Project
+              </a>
+
+              <a
+                href="https://discord.gg/ytge6dTe4s"
+                target="_blank"
+                className={styles.sponsorButton}
+                rel="noreferrer"
+              >
+                <div className={styles.discordIcon}>
+                  <FontAwesomeIcon icon={faDiscord} color="#122f40" />
+                </div>
+                Get Help
+              </a>
+            </div>
+          </div> */}
+        </div>
+      </div>
+    </section>
+  </>
+);
+
+export default MainSectionDoe;

src/components/doe/timer/progressBarDoe.tsx

@@ -0,0 +1,40 @@
+import { Flag, FlagPole, MiniTruck } from '@/assets/doe';
+import styles from '@/styles/doe/timer/progressBarDOE.module.scss';
+import { useEffect, useState } from 'react';
+
+const ProgressBarDoe = () => {
+  const end = new Date('May 21, 2023, 11:00:00 GMT-0700').getTime();
+  const [progress, setProgress] = useState(
+    Math.max(0, (1 - (end - Date.now()) / (24 * 60 * 60000)) * 100)
+  );
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      const now = Date.now();
+      const percentDone = Math.max(
+        0,
+        (1 - (end - now) / (24 * 60 * 60000)) * 100
+      );
+
+      setProgress(percentDone);
+    }, 60000);
+
+    return () => clearInterval(interval);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <>
+      <div className={styles.container}>
+        <MiniTruck style={{ left: `calc(${progress}% - 26%)` }} />
+        <div className={styles.flag}>
+          <FlagPole />
+          <Flag style={{ bottom: `calc(${progress * 0.52}% + 13%)` }} />
+        </div>
+      </div>
+      <div className={styles.truck} />
+    </>
+  );
+};
+
+export default ProgressBarDoe;

src/components/doe/timer/timer.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import CountdownTimer, { CountdownRenderProps } from 'react-countdown';
+import styles from '@/styles/doe/timer/timer.module.scss';
+import ProgressBarDoe from './progressBarDoe';
+
+const padNumber = (num: number) => (num < 10 ? `0${num}` : num);
+
+export const CountdownFallback = () => (
+  <div className={styles.wrapper}>
+    <ProgressBarDoe />
+    <div className={styles.container}>
+      <div className={styles.clock}>
+        <div>
+          <span>24</span>
+          <strong>HOURS</strong>
+        </div>
+        <span>:</span>
+        <div>
+          <span>00</span>
+          <strong>MINUTES</strong>
+        </div>
+        <span>:</span>
+        <div>
+          <span>00</span>
+          <strong>SECONDS</strong>
+        </div>
+      </div>
+    </div>
+    <div className={styles.sticks}></div>
+  </div>
+);
+
+const Countdown = () => {
+  const start = new Date('May 20, 2023, 11:00:00 GMT-0700');
+  const end = new Date('May 21, 2023, 11:00:00 GMT-0700');
+  const ongoing = new Date() > start;
+
+  const Timer = ({ hours, minutes, seconds }: CountdownRenderProps) => (
+    <div className={styles.wrapper}>
+      <ProgressBarDoe />
+      <div className={styles.container}>
+        <div className={styles.clock}>
+          <div>
+            <span>{ongoing ? padNumber(hours) : '24'}</span>
+            <strong>HOURS</strong>
+          </div>
+          <span>:</span>
+          <div>
+            <span>{ongoing ? padNumber(minutes) : '00'}</span>
+            <strong>MINUTES</strong>
+          </div>
+          <span>:</span>
+          <div>
+            <span>{ongoing ? padNumber(seconds) : '00'}</span>
+            <strong>SECONDS</strong>
+          </div>
+        </div>
+      </div>
+      <div className={styles.sticks}></div>
+      <div className={styles.truck} />
+    </div>
+  );
+
+  return (
+    <CountdownTimer
+      date={end}
+      zeroPadTime={2}
+      intervalDelay={0}
+      precision={1}
+      renderer={Timer}
+    />
+  );
+};
+
+export default Countdown;

src/pages/timer.tsx

@@ -0,0 +1,19 @@
+import MainSectionDoe from '@/components/doe/timer/mainSectionDoe';
+import { CountdownFallback } from '@/components/doe/timer/timer';
+import dynamic from 'next/dynamic';
+
+const Countdown = dynamic(() => import('@/components/doe/timer/timer'), {
+  ssr: false,
+  loading: () => <CountdownFallback />,
+});
+
+const Timer = () => (
+  <>
+    <div style={{ backgroundColor: 'var(--color-teal-5)' }}>
+      <MainSectionDoe />
+      <Countdown />
+    </div>
+  </>
+);
+
+export default Timer;

src/styles/doe/timer/progressBarDOE.module.scss

@@ -0,0 +1,52 @@
+@use "/src/styles/mixins" as *;
+
+.container {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  padding: 0 15px;
+  position: relative;
+  z-index: 1;
+  max-width: 380px;
+  margin: auto;
+
+  > svg {
+    width: 80px;
+    height: auto;
+    position: relative;
+
+    // @include lg {
+    //   width: 121px;
+    // }
+  }
+
+//   @include lg {
+//     max-width: 1180px;
+//     padding: 0 30px;
+//   }
+}
+
+.flag {
+  position: relative;
+  height: 75px;
+
+//   @include lg {
+//     height: 114px;
+//   }
+
+  svg:first-child {
+    height: 100%;
+  }
+
+  svg:last-child {
+    position: absolute;
+    left: 21.5px;
+    width: 22.2px;
+    height: auto;
+
+    // @include lg {
+    //   left: 22px;
+    //   width: 33.76px;
+    // }
+  }
+}

src/styles/doe/timer/timer.module.scss

@@ -0,0 +1,89 @@
+@use "/src/styles/mixins" as *;
+
+.wrapper {
+  padding: 0 15px;
+  padding-bottom: 200px;
+  position: relative;
+  z-index: 1;
+
+//   @include lg {
+//     padding: 0 82.12px;
+//   }
+}
+
+.container {
+  width: 100%;
+  max-width: 380px;
+  background: var(--color-teal-3);
+  display: flex;
+  justify-content: center;
+  margin: auto;
+  border-radius: 10px;
+  padding: 18px;
+  border: 3px solid var(--color-teal-1);
+
+//   @include lg {
+//     max-width: 1180px;
+//     border-radius: 20px;
+//     border-width: 7px;
+//     padding: 40px;
+//   }
+}
+
+.clock {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
+  @include cgap(10px);
+
+//   @include lg {
+//     @include cgap(25px);
+//   }
+
+  > div {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  span {
+    @include fontFactory(var(--proxima-nova), 40px, 500, white, 0, 1);
+
+    // @include lg {
+    //   font-size: 90px;
+    // }
+  }
+
+  strong {
+    @include fontFactory(var(--proxima-nova), 12px, 400, var(--color-teal-1), 0.05rem, 1);
+    margin-top: 5px;
+
+    // @include lg {
+    //   font-size: 20px;
+    // }
+  }
+}
+
+.sticks {
+  width: 90%;
+  max-width: 320px;
+  height: 10px;
+  border-left: solid white 3px;
+  border-right: solid white 3px;
+  margin: auto;
+
+//   @include lg {
+//     height: 50px;
+//     max-width: 1060px;
+//   }
+}
+
+.truck {
+  background-color: white;
+  border-radius: 20px;
+  padding: 0 15px;
+  max-width: 380px;
+  height: 1000px;
+  width: 100%;
+  margin: auto;
+}