RocketChat · Sing-Li · Mar 30, 2022 · Mar 23, 2022 · Mar 23, 2022 · Mar 24, 2022
diff --git a/app/components/infotiles.js b/app/components/infotiles.js
@@ -13,13 +13,14 @@ export default function Infotiles({ data }) {
           {obj.imageUrl && (
             <Image
               src={obj.imageUrl}
-              width={271}
-              height={174}
-              objectFit="cover"
+              width={288}
+              height={288}
+              objectFit="contain"
             />
           )}
           <div className={Styles.card_content}>
             <h5 className={Styles.card_heading}>{obj.name}</h5>
+            {obj.bio && <p className="fs-light">{obj.bio}</p>}
             <p className={Styles.card_body}>{obj.content}</p>
             {obj.live && <Link href={obj.confHref}><button className={Styles.actionBtn}>Live</button></Link>}
           </div>

diff --git a/app/next.config.js b/app/next.config.js
@@ -6,7 +6,7 @@ module.exports = {
     includePaths: [path.join(__dirname, 'styles')],
   },
   images: {
-    domains: ['global-uploads.webflow.com', 'avatars.githubusercontent.com']
+    domains: ['global-uploads.webflow.com', 'avatars.githubusercontent.com', 'open.rocket.chat']
   },
   webpack: (config, { isServer }) => {
     // Fixes npm packages that depend on `fs` module

diff --git a/app/pages/virtualconf/mainstage/index.js b/app/pages/virtualconf/mainstage/index.js
@@ -3,15 +3,37 @@ 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 ArrowSVG from "/public/svg/arrow.js";
 import styles from "../../../styles/Mainstage.module.css";
 import { Container, Row, Col } from "react-bootstrap";
 import Infotiles from "../../../components/infotiles";
 import { fetchAPI } from "../../../lib/api";
+import { useEffect, useState } from "react";
+
+const countdown = new Date("04/06/2022 10:00:00 AM UTC");
 
 const Mainstage = ({ speakers }) => {
+  const [timer, setTimer] = useState();
+
+  useEffect(() => {
+    setInterval(() => {
+      const distance = countdown.getTime() - new Date().getTime();
+      const days = Math.floor(distance / (1000 * 60 * 60 * 24));
+      const hours = Math.floor(
+        (distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
+      );
+      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 ⏳`);
+      if (distance < 0) {
+        clearInterval(x);
+        setTimer("We are now live! ✨");
+      }
+    }, 1000);
+  }, [timer]);
+
   return (
     <>
       <Head>
@@ -34,9 +56,15 @@ const Mainstage = ({ speakers }) => {
           <Container>
             <Row>
               <Col md={6} xs={12}>
-                <h2>Rocket.Chat GSoC 2022 Alumni Summit</h2>
-                <span className={styles.thinText}>about the summit</span>
-                <p>Event Live Now ✨</p>
+                <h2>Rocket.Chat's GSOC Alumni Summit 2022</h2>
+                <span className={styles.thinText}>
+                  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>{timer}</p>
               </Col>
               <Col md={6} xs={12} className={styles.imageHolders}>
                 <Image className={styles.rcgsoclogo} src={RCPlusGSocLogo} />
@@ -47,20 +75,35 @@ const Mainstage = ({ speakers }) => {
         <Container>
           <Row className={styles.liveNow}>
             <Col md={6} xs={12} className={styles.liveNowInnerCol}>
-              <h5>We are now live</h5>
-              <p className={styles.thinText}>Click to attend the event</p>
-              <button className={styles.btnColor}>
-                Join now <ArrowSVG />
-              </button>
+              {new Date().getTime() - countdown.getTime() < 0 ? <p className={styles.liveNowHeading}>
+                The date of the summit will be{" "}
+                <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">
+                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>
           </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}>
-            A Heading that indicates/says about speakers
+            Speakers
           </h2>
           <div className={styles.speakersContainer}>
             <Infotiles data={speakers} />
@@ -74,7 +117,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
@@ -0,0 +1,32 @@
+export default function bookmark() {
+  return (
+    <svg
+      width="35"
+      height="36"
+      viewBox="0 0 35 36"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M24.0709 12.0939C24.0146 12.0376 23.9584 11.9814 23.9584 11.9251C23.7334 11.5877 23.8459 11.0815 24.2396 10.8566C28.064 8.66318 28.8513 6.80725 29.6387 5.17628C30.2573 3.77027 30.876 2.47674 33.1256 1.52065C33.5193 1.35193 33.9692 1.52065 34.1379 1.91434C34.3066 2.30802 34.1379 2.75794 33.7442 2.92666C32.057 3.60155 31.6633 4.5014 31.1009 5.79492C30.3136 7.53838 29.3012 9.73175 25.0832 12.1501C24.6895 12.3751 24.2958 12.3188 24.0709 12.0939Z"
+        fill="#D19500"
+      />
+      <path
+        d="M23.6209 11.5315L23.5647 11.4752C23.2834 11.1378 23.3959 10.6316 23.7334 10.4067C27.2765 7.70711 27.8389 5.79494 28.3451 4.16397C28.795 2.70171 29.1887 1.35194 31.3258 0.114656C31.6633 -0.110306 32.1132 0.00217493 32.3382 0.395858C32.5631 0.789541 32.3944 1.23946 32.057 1.46443C30.426 2.36427 30.201 3.26412 29.8073 4.61389C29.2449 6.41358 28.57 8.6632 24.6332 11.6439C24.352 11.8689 23.9021 11.8127 23.6209 11.5315Z"
+        fill="#FFBF1F"
+      />
+      <path
+        d="M11.0794 35.9961V24.9167H0L19.2342 5.62625C20.2465 4.61392 21.9338 4.61392 22.9461 5.62625L30.3698 13.05C31.3821 14.0623 31.3821 15.7495 30.3698 16.7619L11.0794 35.9961Z"
+        fill="#ED4C5C"
+      />
+      <path
+        d="M23.0585 15.6933C24.5805 15.6933 25.8143 14.4595 25.8143 12.9375C25.8143 11.4155 24.5805 10.1817 23.0585 10.1817C21.5365 10.1817 20.3027 11.4155 20.3027 12.9375C20.3027 14.4595 21.5365 15.6933 23.0585 15.6933Z"
+        fill="white"
+      />
+      <path
+        d="M26.8828 7.25724C26.0954 6.91979 25.5893 6.69483 24.8581 6.91979C23.7896 7.25724 22.8897 8.26956 22.2711 9.90053C22.1586 10.1817 22.2148 10.5192 22.4398 10.7441C22.496 10.8004 22.6085 10.8566 22.6648 10.9129C23.0585 11.0816 23.5084 10.8566 23.6771 10.5192C24.2957 9.00069 24.9144 8.55076 25.3643 8.38204C25.5893 8.3258 25.5893 8.49452 25.8705 8.49452C26.4891 7.87588 26.8828 7.25724 26.8828 7.25724ZM29.0199 11.1378C29.2449 10.5192 29.0762 9.95677 28.8512 9.28189C28.8512 9.28189 28.4013 9.73181 27.6702 10.3505C27.6702 10.4629 27.6702 10.5754 27.6139 10.6317C27.4452 11.0816 26.9953 11.7002 25.4768 12.3189C25.0831 12.4876 24.9144 12.9375 25.0831 13.3312C25.1393 13.4437 25.1956 13.4999 25.2518 13.5562C25.4768 13.7811 25.8142 13.8374 26.0954 13.7249C27.6702 13.05 28.6825 12.1502 29.0199 11.1378Z"
+        fill="#F2B200"
+      />
+    </svg>
+  );
+}
diff --git a/app/styles/Infotiles.module.css b/app/styles/Infotiles.module.css
@@ -11,7 +11,7 @@
 }
 
 .cardWithImage {
-  width: 17rem;
+  width: 18rem;
   background-color: #f7f8fa;
   border-radius: 6px;
   margin: clamp(0.4rem, 2vw, 1rem);

diff --git a/app/styles/Mainstage.module.css b/app/styles/Mainstage.module.css
@@ -52,6 +52,14 @@
   background-color: white;
 }
 
+.liveNowHeading {
+  font-size: 1.13rem;
+}
+
+.liveNowDate {
+  color: #F8445F;
+}
+
 .heading {
   text-align: center;
   background: -webkit-linear-gradient(#041631, #003990);
@@ -61,6 +69,21 @@
   margin-bottom: 2.2rem;
 }
 
+.announcement {
+  background-color: #030C1A;
+  border: 0.5px solid #B1B1B1;
+  color: whitesmoke;
+  text-align: center;
+  padding: 1.3rem 0;
+  position: sticky;
+  bottom: 0;
+}
+
+.announcement span {
+  font-weight: bold;
+  font-size: 1.1rem;
+}
+
 .rcgsoccompactlogo {
   display: none !important;
 }

diff --git a/cms/api/speakers/models/speaker.settings.json b/cms/api/speakers/models/speaker.settings.json
@@ -16,6 +16,9 @@
     "content": {
       "type": "string"
     },
+    "bio": {
+      "type": "string"
+    },
     "imageUrl": {
       "type": "string"
     },