add event info and refactor countdown

ethereumjp · Mar 20, 2024 · 9cbb7f2 · 9cbb7f2
1 parent a92bfd9
commit 9cbb7f2
Show file tree

Hide file tree

Showing 4 changed files with 157 additions and 93 deletions.
diff --git a/src/components/organisms/Countdown.tsx b/src/components/organisms/Countdown.tsx
@@ -0,0 +1,85 @@
+import { mq } from "@/themes/settings/breakpoints";
+import { brand, neutral } from "@/themes/settings/color";
+import { css } from "@emotion/react";
+import { useEffect, useState } from "react";
+
+const countDown = (target: number, now: number) => {
+  const diffTime = target - now;
+
+  const days = Math.floor(diffTime / (1000 * 60 * 60 * 24));
+  const hours = Math.floor(
+    (diffTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60),
+  );
+  const minutes = Math.floor((diffTime % (1000 * 60 * 60)) / (1000 * 60));
+  const seconds = Math.floor((diffTime % (1000 * 60)) / 1000);
+
+  return [days, hours, minutes, seconds];
+};
+
+const NumberPanel = (props: { no: number; text: string }) => {
+  const numberPanelStyle = css`
+    background-color: ${brand.Miyabi};
+    background-color: #552266BF;
+    border-radius: 1rem;
+    color: ${neutral.White};
+    font-size: 2rem;
+    font-weight: 600;
+    margin: 0 0.25rem;
+    padding: 0 0.75rem;
+
+    ${mq.laptop}{
+      font-size: 8rem;
+      margin: 0;
+      padding: 0 2rem;
+    }
+  `;
+
+  return (
+    <div css={numberPanelStyle}>
+      {props.no.toLocaleString(undefined, { minimumIntegerDigits: 2 })}
+      <hr
+        css={css`border: 0; border-bottom: 1px solid white; height: 1px; margin:0;`}
+      />
+      <p
+        css={css`font-size: 0.75rem; font-weight: 400; margin: 0; ${mq.laptop}{font-size: 2rem; margin:1rem;}`}
+      >
+        {props.text}
+      </p>
+    </div>
+  );
+};
+
+export const CountdownPanel = () => {
+  const countdownContainerStyle = css`
+    display: flex;
+    justify-content: center;
+    padding: 1rem;
+    text-align: center;
+
+    ${mq.laptop}{
+      justify-content: space-evenly;
+      padding: 4rem;
+    }
+  `;
+
+  const [now, setNow] = useState(new Date().getTime());
+  useEffect(() => {
+    const secTimer = setInterval(() => {
+      setNow(new Date().getTime());
+    }, 1000);
+
+    return () => clearInterval(secTimer);
+  }, []);
+
+  const eventDate = new Date("Aug 23, 2024").getTime();
+  const [days, hrs, mins, secs] = countDown(eventDate, now);
+
+  return (
+    <div css={countdownContainerStyle}>
+      <NumberPanel no={days} text="days" />
+      <NumberPanel no={hrs} text="hours" />
+      <NumberPanel no={mins} text="minutes" />
+      <NumberPanel no={secs} text="seconds" />
+    </div>
+  );
+};
diff --git a/src/components/organisms/Schedule.tsx b/src/components/organisms/Schedule.tsx
@@ -4,8 +4,73 @@ import { css } from "@emotion/react";
 import Image from "next/image";
 import seikaiha from "public/images/seikaiha.png";
 import EJLogoFace from "public/logo/EJLogoFace.png";
+import { GoInfo } from "react-icons/go";
+import { HiCalendarDays, HiOutlineMapPin } from "react-icons/hi2";
 import { Socials } from "./Socials";
 
+const Info = () => {
+  return (
+    <div
+      css={css`
+        display:flex;
+        flex-direction:column;
+        justify-content: center;
+        padding: 4rem;
+        text-align: center;
+
+        ${mq.laptop} {
+          flex-direction:row;
+          text-align: start;
+        }
+      `}
+    >
+      <div css={css`align-self:center;`}>
+        <HiCalendarDays size={60} />
+      </div>
+      <div css={css`padding: 0 1rem;`}>
+        <h2 css={css`margin:0;`}>Hackathon</h2>
+        <p css={css`font-size: 1rem; margin:0;`}>23-25 August 2024</p>
+      </div>
+      <div css={css`padding: 0 1rem;`}>
+        <h2 css={css`margin:0;`}>Conference</h2>
+        <p css={css`font-size: 1rem; margin:0;`}>26 August 2024</p>
+      </div>
+      <div css={css`height:2rem; ${mq.laptop}{width: 2rem;}`} />
+      <div css={css`align-self:center;`}>
+        <HiOutlineMapPin size={60} />
+      </div>
+      <div css={css`padding: 0 1rem;`}>
+        <h2 css={css`margin:0;`}>Digital Garage</h2>
+        <a
+          css={css`text-decoration: none; :hover {text-decoration: underline;} ;`}
+          href="https://maps.app.goo.gl/aCRdR2pX4qRaUz6MA"
+          target="_blank"
+          rel="noreferrer"
+        >
+          <p css={css`font-size: 1rem; margin:0;`}>
+            15-1 Udagawacho, Shibuya City, Tokyo
+          </p>
+        </a>
+      </div>
+      {/* <div css={css`height:2rem; ${mq.laptop}{width: 2rem;}`} />
+      <div css={css`align-self:center;`}>
+        <GoInfo size={60} />
+      </div>
+      <div css={css`padding: 0 1rem;`}>
+        <h2 css={css`margin:0;`}>Side Events</h2>
+        <a
+          css={css`text-decoration: none; :hover {text-decoration: underline;} ;`}
+          href="/"
+        > // link to side event spreadsheet
+          <p css={css`font-size: 1rem; margin:0;`}>Click to see 10+ events</p>
+        </a>
+      </div>
+      // create link to submit side event too maybe
+      */}
+    </div>
+  );
+};
+
 const ScheduleSection = () => {
   return (
     <section
@@ -21,8 +86,7 @@ const ScheduleSection = () => {
         width: 100%;
       `}
     >
-      <p>Save the date!</p>
-      <h2>Aug 23-26, 2024</h2>
+      <Info />
 
       <Image
         src={EJLogoFace}
@@ -36,10 +100,7 @@ const ScheduleSection = () => {
           }
         `}
       />
-
-      <p>Follow us for updates</p>
       <Socials />
-
       <div css={css`margin-top: 2rem;`}>
         <p css={css`font-size: 1rem;`}>
           Looking to sponsor or partner with us?{" "}

diff --git a/src/components/organisms/Statement.tsx b/src/components/organisms/Statement.tsx
@@ -47,6 +47,8 @@ const StatementSection = () => {
           foster the creation of amazing new innovations for the future. Join us
           and be a part of shaping what's next in the Ethereum universe!
         </p>
+
+        {/* Apply button here */}
       </div>
     </section>
   );

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -1,7 +1,9 @@
 import Layout from "@/components/layouts/base";
+import { CountdownPanel } from "@/components/organisms/Countdown";
 import ScheduleSection from "@/components/organisms/Schedule";
 import StatementSection from "@/components/organisms/Statement";
-import { brand, neutral } from "@/themes/settings/color";
+import SupportersSection from "@/components/organisms/Supporters";
+import { brand } from "@/themes/settings/color";
 import type { PageProps } from "@/types";
 import type { ComponentProps } from "@/types";
 import { css } from "@emotion/react";
@@ -11,8 +13,6 @@ import topHero from "public/images/hero_top.jpg";
 import seikaiha from "public/images/seikaiha.png";
 import ETHTokyoLogo from "public/logo/ETHTokyoLogo.png";
 
-import { useEffect, useState } from "react";
-
 const Page: NextPage<PageProps> = ({ params, searchParams }) => {
   const TriangleJpWaveBackground = ({ children }: ComponentProps) => {
     const jpWaveBackgroundStyle = css`
@@ -67,91 +67,6 @@ const Page: NextPage<PageProps> = ({ params, searchParams }) => {
       z-index: -1;
     `;
 
-    const CountdownPanel = () => {
-      const panelWrapperStyle = css`
-        display: flex;
-        justify-content: space-evenly;
-        padding: 4rem;
-        text-align: center;
-      `;
-
-      const numberPanelStyle = css`
-        background-color: ${brand.Miyabi};
-        background-color: #552266BF;
-        border-radius: 1rem;
-        color: ${neutral.White};
-        font-size: 8rem;
-        font-weight: 600;
-        padding: 0 1rem;
-      `;
-
-      const countDown = (target: number, now: number) => {
-        const diffTime = target - now;
-
-        const days = Math.floor(diffTime / (1000 * 60 * 60 * 24));
-        const hours = Math.floor(
-          (diffTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60),
-        );
-        const minutes = Math.floor((diffTime % (1000 * 60 * 60)) / (1000 * 60));
-        const seconds = Math.floor((diffTime % (1000 * 60)) / 1000);
-
-        return [days, hours, minutes, seconds];
-      };
-
-      const [now, setNow] = useState(new Date().getTime());
-      useEffect(() => {
-        const secTimer = setInterval(() => {
-          setNow(new Date().getTime());
-        }, 1000);
-
-        return () => clearInterval(secTimer);
-      }, []);
-
-      const eventDate = new Date("Aug 23, 2024").getTime();
-      const [days, hrs, mins, secs] = countDown(eventDate, now);
-
-      return (
-        <div css={panelWrapperStyle}>
-          <div css={numberPanelStyle}>
-            {days.toLocaleString(undefined, { minimumIntegerDigits: 2 })}
-            <hr
-              css={css`border: 0; border-bottom: 1px solid white; height: 1px; margin:0;`}
-            />
-            <p css={css`font-size: 2rem; font-weight: 400; margin:1rem;`}>
-              days
-            </p>
-          </div>
-          <div css={numberPanelStyle}>
-            {hrs.toLocaleString(undefined, { minimumIntegerDigits: 2 })}
-            <hr
-              css={css`border: 0; border-bottom: 1px solid white; height: 1px; margin:0;`}
-            />
-            <p css={css`font-size: 2rem; font-weight: 400; margin:1rem;`}>
-              hours
-            </p>
-          </div>
-          <div css={numberPanelStyle}>
-            {mins.toLocaleString(undefined, { minimumIntegerDigits: 2 })}
-            <hr
-              css={css`border: 0; border-bottom: 1px solid white; height: 1px; margin:0;`}
-            />
-            <p css={css`font-size: 2rem; font-weight: 400; margin:1rem;`}>
-              minutes
-            </p>
-          </div>
-          <div css={numberPanelStyle}>
-            {secs.toLocaleString(undefined, { minimumIntegerDigits: 2 })}
-            <hr
-              css={css`border: 0; border-bottom: 1px solid white; height: 1px; margin:0;`}
-            />
-            <p css={css`font-size: 2rem; font-weight: 400; margin:1rem;`}>
-              seconds
-            </p>
-          </div>
-        </div>
-      );
-    };
-
     return (
       <section id="top" css={topBackgroundStyle}>
         <TriangleJpWaveBackground>
@@ -175,6 +90,7 @@ const Page: NextPage<PageProps> = ({ params, searchParams }) => {
       <div>
         <TopSection />
         <StatementSection />
+        <SupportersSection />
         <ScheduleSection />
       </div>
     </Layout>