Fix fonts and layout

Fix fonts.
RocketChat · Apr 5, 2022 · 8780fb3 · 8780fb3
1 parent f205791
commit 8780fb3
Show file tree

Hide file tree

Showing 7 changed files with 380 additions and 193 deletions.
diff --git a/app/components/animation.js b/app/components/animation.js
@@ -0,0 +1,41 @@
+import React from 'react';
+import styles from '../styles/Mainstage.module.css';
+
+function getRandomInt(max) {
+  return Math.floor(Math.random() * Math.floor(max));
+}
+
+const Animation = React.memo(() => {
+  console.log('animation rerendered');
+  return (
+    <span className={styles.track}>
+      {Array.apply(null, { length: 4 }).map(() => (
+        <p
+          className={styles.emojiAnimationContainer}
+          style={{
+            color: 'red',
+            overflow: 'hidden',
+            animationDelay: `${getRandomInt(2000)}ms`,
+            transform: `translate(${getRandomInt(40)}px, ${getRandomInt(0)}px)`,
+          }}
+        >
+          ❤
+        </p>
+      ))}
+      {Array.apply(null, { length: 4 }).map(() => (
+        <p
+          className={styles.emojiAnimationContainer}
+          style={{
+            overflow: 'hidden',
+            animationDelay: `${getRandomInt(2000)}ms`,
+            transform: `translate(${getRandomInt(40)}px, ${getRandomInt(0)}px)`,
+          }}
+        >
+          👍
+        </p>
+      ))}
+    </span>
+  );
+});
+
+export default Animation;
diff --git a/app/components/layout.js b/app/components/layout.js
@@ -1,17 +1,29 @@
-import '../styles/Layout.module.css'
-import Footer from './footer'
-import Menubar from './menubar'
-
+import '../styles/Layout.module.css';
+import Footer from './footer';
+import Menubar from './menubar';
+import BookmarkSVG from '/public/svg/bookmark.js';
+import styles from '../styles/Mainstage.module.css';
+import { useRouter } from 'next/router';
 
 function Layout(props) {
-
-    return (
-        <>
-       <Menubar menu={props.menu.topNavItems} />
-          {props.children}
-        <Footer></Footer>
-        </>
-    )
+  const { pathname } = useRouter();
+  return (
+    <>
+      <Menubar menu={props.menu.topNavItems} />
+      {props.children}
+      <Footer></Footer>
+      {pathname === '/virtualconf/mainstage' && (
+        <p className={styles.announcement}>
+          <span className={styles.announcement__svg}>
+            <BookmarkSVG />
+          </span>{' '}
+          Bookmark this page and come back on{' '}
+          <span className={styles.announcement__text}>April 6</span> for the
+          LIVE conference
+        </p>
+      )}
+    </>
+  );
 }
 
 export default Layout;
diff --git a/app/pages/virtualconf/mainstage/index.js b/app/pages/virtualconf/mainstage/index.js
@@ -1,22 +1,21 @@
-import Image from "next/image";
-import Link from "next/link";
-import Head from "next/head";
-import RCPlusGSocLogo from "/public/rcandgsoclogo.png";
-import CirclesSVG from "/public/svg/circles.js";
-import BookmarkSVG from "/public/svg/bookmark.js";
-import RCPlusGSocCompactLogo from "/public/rcandgsoclogocompact.png";
-import NowLive from "/public/now-live.png";
-import styles from "../../../styles/Mainstage.module.css";
-import { Container, Row, Col } from "react-bootstrap";
-import SpeakerInfotiles from "../../../components/speakerinfotile";
-import { fetchAPI } from "../../../lib/api";
-import { useEffect, useState } from "react";
+import Image from 'next/image';
+import Link from 'next/link';
+import Head from 'next/head';
+import RCPlusGSocLogo from '/public/rcandgsoclogo.png';
+import CirclesSVG from '/public/svg/circles.js';
+import RCPlusGSocCompactLogo from '/public/rcandgsoclogocompact.png';
+import styles from '../../../styles/Mainstage.module.css';
+import { Container, Row, Col } from 'react-bootstrap';
+import SpeakerInfotiles from '../../../components/speakerinfotile';
+import { fetchAPI } from '../../../lib/api';
+import { useEffect, useState } from 'react';
+import Animation from '../../../components/animation';
 
-const countdown = new Date("04/06/2022 10:00:00 AM UTC");
+const countdown = new Date('04/06/2022 10:00:00 AM UTC');
 
 const Mainstage = ({ speakers }) => {
-  const [timer, setTimer] = useState();
-  
+  const [timer, setTimer] = useState([0, 0, 0, 0]);
+
   useEffect(() => {
     setInterval(() => {
       const distance = countdown.getTime() - new Date().getTime();
@@ -26,10 +25,10 @@ const Mainstage = ({ speakers }) => {
       );
       const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
       const seconds = Math.floor((distance % (1000 * 60)) / 1000);
-      setTimer(`${days}d ${hours}h ${minutes}m ${seconds}s left ⏳`);
+      setTimer([days, hours, minutes, seconds]);
       if (distance < 0) {
         clearInterval(x);
-        setTimer("We are now live! ✨");
+        setTimer('We are now live! ✨');
       }
     }, 1000);
   }, [timer]);
@@ -40,75 +39,105 @@ const Mainstage = ({ speakers }) => {
         <title>Conference Mainstage</title>
       </Head>
       <main className={styles.main}>
-        <div className={styles.container}>
-          <CirclesSVG />
-          <div className={styles.topNav}>
-            <Link href="/">
-              <h3 as="h3" className={styles.headerTitle}>
-                Rocket.Chat
-              </h3>
+        <div className={styles.hero}>
+          <div className={styles.hero__SVG}>
+            <CirclesSVG />
+          </div>
+          <div className={styles.hero__topNav}>
+            <Link href='/'>
+              <h3 as='h3'>Rocket.Chat</h3>
             </Link>
             <Image
               src={RCPlusGSocCompactLogo}
-              className={styles.rcgsoccompactlogo}
+              className={styles.hero__topNav__image}
             />
           </div>
-          <Container>
-            <Row>
-              <Col md={6} xs={12}>
-                <h2>Rocket.Chat's GSOC Alumni Summit 2022</h2>
-                <span className={styles.thinText}>
+          <Container className={styles.hero__body}>
+            <Row className='d-flex align-items-center '>
+              <Col lg={6} md={12} xs={12}>
+                <h2 className={styles.hero__body__heading}>
+                  Rocket.Chat's GSOC Alumni Summit 2022
+                </h2>
+                <p className={styles.hero__body__text}>
                   We are pleased to announce our Google Summer of Code Alumni
                   Summit 2022. Our goal is to bring former and new contributors
                   together, among other interested parties to share experiences,
                   insights, and tips on how to get the most out of this amazing
                   program.
-                </span>
-                <p className={styles.timerText}>{timer}</p>
+                </p>
+                <p className={styles.hero__body__time}>
+                  <span className={styles.hero__body__timer}>Live In - </span>
+                  <span className={styles.hero__body__timer}>{timer[0]}</span>d
+                  <span className={styles.hero__body__timer_separation}>
+                    {' '}
+                    |{' '}
+                  </span>
+                  <span className={styles.hero__body__timer}>
+                    {timer[1]}
+                  </span>h{' '}
+                  <span className={styles.hero__body__timer_separation}>
+                    {' '}
+                    |{' '}
+                  </span>
+                  <span className={styles.hero__body__timer}>
+                    {timer[2]}
+                  </span>m{' '}
+                  <span className={styles.hero__body__timer_separation}>
+                    |{' '}
+                  </span>
+                  <span className={styles.hero__body__timer}>{timer[3]}</span>s{' '}
+                </p>
               </Col>
-              <Col md={6} xs={12} className={styles.imageHolders}>
-                <Image className={styles.rcgsoclogo} src={RCPlusGSocLogo} />
+              <Col lg={6} md={0} xs={12} className={styles.hero__body__image}>
+                <Image src={RCPlusGSocLogo} />
               </Col>
             </Row>
           </Container>
         </div>
         <Container>
-          <Row className={styles.liveNow}>
-            <Col md={6} xs={12} className={styles.liveNowInnerCol}>
-              {new Date().getTime() - countdown.getTime() < 0 ? <p className={styles.liveNowHeading}>
-                Save the Date ! {" "}
-                <span className={styles.liveNowDate}>
-                  April {countdown.getDate()}th starting at{" "}
-                  {countdown.toLocaleString("en-US", {
-                    hour: "numeric",
-                    minute: 'numeric',
-                    hour12: true,
-                  })}{" "}
-                  {Intl.DateTimeFormat().resolvedOptions().timeZone}
-                </span>
-              </p>: <p className={styles.liveNowHeading}>Event is live now! <span role="img" aria-label="sparkles">✨</span></p>}
-              <p className="fw-light">
+          <Row className={styles.hero__liveNow}>
+            <Col md={8} xs={12} className={styles.hero__liveNow__col}>
+              {new Date().getTime() - countdown.getTime() < 0 ? (
+                <p className={styles.hero__liveNow__col__heading}>
+                  Save the Date !{' '}
+                  <span className={styles.liveNowDate}>
+                    April {countdown.getDate()}th starting at{' '}
+                    {countdown.toLocaleString('en-US', {
+                      hour: 'numeric',
+                      minute: 'numeric',
+                      hour12: true,
+                    })}{' '}
+                    {Intl.DateTimeFormat().resolvedOptions().timeZone}
+                  </span>
+                </p>
+              ) : (
+                <p className={styles.hero__liveNow__col__heading}>
+                  Event is live now!{' '}
+                  <span role='img' aria-label='sparkles'>
+                    ✨
+                  </span>
+                </p>
+              )}
+              <p className={styles.hero__liveNow__col_text}>
                 Open Source is not only about technology. It's about people too!
                 Human connections that will expand your network and enable you
                 to both learn and teach along the way.
               </p>
             </Col>
-            <Col md={6} xs={12} className={styles.imageHolders}>
-              <Image src={NowLive} />
+            <Col md={4} xs={12} className={styles.hero__liveNow__col__image}>
+              <span className={styles.hero__liveNow__col__box}>
+                <span className={styles.arrow__left}></span>
+              </span>
+              <Animation />
             </Col>
           </Row>
         </Container>
-        <p className={styles.announcement}>
-          <BookmarkSVG /> Bookmark this page and come back on <span>April 6</span> for the LIVE conference - {timer}
-        </p>
         <Container>
-          <h2 className={styles.heading}>
-            Speakers
-          </h2>
+          <h2 className={styles.heading}>Speakers</h2>
           <div className={styles.speakersContainer}>
             <SpeakerInfotiles data={speakers} />
           </div>
-        </Container>
+        </Container>{' '}
       </main>
     </>
   );
@@ -117,7 +146,7 @@ const Mainstage = ({ speakers }) => {
 export default Mainstage;
 
 export async function getStaticProps({ params }) {
-  const speakers = await fetchAPI("/speakers");
+  const speakers = await fetchAPI('/speakers');
   return {
     props: { speakers },
     revalidate: 1,

diff --git a/app/public/svg/bookmark.js b/app/public/svg/bookmark.js
@@ -1,8 +1,6 @@
 export default function bookmark() {
   return (
     <svg
-      width="35"
-      height="36"
       viewBox="0 0 35 36"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"

diff --git a/app/public/svg/circles.js b/app/public/svg/circles.js
@@ -1,8 +1,6 @@
 export default function Circles() {
   return (
     <svg
-      width="375"
-      height="324"
       viewBox="0 0 375 324"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"