initial onboarding modal all fulfilled

components/Modals/ShortcutHelpModal.tsx

@@ -2,8 +2,19 @@ import { Carousel, Divider, Drawer, Modal } from "antd";
 import { CarouselRef } from "antd/lib/carousel";
 import { useRef, useState } from "react";
 import { GlobalHotKeys, KeyMap } from "react-hotkeys";
-import { FaArrowLeft, FaArrowRight, FaUserCheck } from "react-icons/fa";
+import { BsThreeDots } from "react-icons/bs";
+import {
+  FaArrowLeft,
+  FaArrowRight,
+  FaClock,
+  FaLink,
+  FaPlus,
+  FaUserCheck,
+} from "react-icons/fa";
+import { FcGoogle } from "react-icons/fc";
 import { useKeyboardContext } from "../../contexts/keyboardContext";
+import Rooms from "../demo/Rooms";
+import Image from "next/image";
 
 export default function ShortcutHelpModal() {
   const [visible, setVisible] = useState<boolean>(false);
@@ -61,7 +72,7 @@ export default function ShortcutHelpModal() {
         visible={visible}
         footer={<></>}
         zIndex={5}
-        width={700}
+        width={750}
       >
         <Carousel ref={carouselRef} dotPosition="top" className="pt-5">
           <div>
@@ -111,9 +122,10 @@ export default function ShortcutHelpModal() {
                     <span className="text-gray-300">...</span>
                   </span>
                 </span>
+
                 <img
-                  src="/illustrations/undraw_takeout_boxes_ap54.svg"
+                  src="/screenshots/teamvoiceline.png"
-                  className="h-[10rem]"
+                  className="h-[10rem] w-[22rem]"
                 />
               </span>
 
@@ -212,7 +224,18 @@ export default function ShortcutHelpModal() {
                   className="hover:cursor-pointer bg-teal-600 text-white p-1 rounded-full text-xl"
                 />
 
-                <span className="text-xl">Audio Messages</span>
+                <span className="flex flex-col items-center">
+                  <span className="text-xl">Live Collaboration</span>
+                  <span className="text-md text-gray-300 text-center">
+                    Building the habit of{" "}
+                    <span className="text-teal-600">
+                      {" "}
+                      resolving issues on the spot
+                    </span>{" "}
+                    <br></br>
+                    through seamless communication.
+                  </span>
+                </span>
 
                 <FaArrowRight
                   onClick={() => carouselRef.current.next()}
@@ -221,125 +244,170 @@ export default function ShortcutHelpModal() {
               </span>
 
               <span className="flex flex-row justify-between items-center">
-                <span className="flex flex-col ml-2 items-center">
+                <span className="flex flex-col ml-2 items-start justify-start">
-                  <span className="text-lg text-gray-500">
+                  <span className="text-lg text-gray-500 text-left">
-                    Select a Teammate
+                    Hop into Office Rooms
                   </span>
-                  <span className="text-md text-gray-300 text-center">
+                  <span className="text-md text-gray-300 text-left">
-                    Type numbers on your keyboard.
+                    Work with your closest teammates in the{" "}
-                  </span>
+                    <span className="text-teal-600"> hallway or corner </span>
-
+                    throughout the day.
-                  <span className="flex flex-row space-x-2">
+                    <br></br> Have lunch and take breaks in the{" "}
-                    <button
+                    <span className="text-teal-600">kitchen.</span>
-                      className={`right-1 rounded-lg py-1 px-2 ml-1 
-                            shadow-md text-center text-gray-300 text-sm font-bold`}
-                    >
-                      1
-                    </button>
-                    <button
-                      className={`right-1 rounded-lg py-1 px-2 ml-1 
-                            shadow-md text-center text-gray-300 text-sm font-bold`}
-                    >
-                      2
-                    </button>
-                    <button
-                      className={`right-1 rounded-lg py-1 px-2 ml-1 
-                            shadow-md text-center text-gray-300 text-sm font-bold`}
-                    >
-                      3
-                    </button>
-                    <span className="text-gray-300">...</span>
                   </span>
                 </span>
                 <img
-                  src="/illustrations/undraw_takeout_boxes_ap54.svg"
+                  src="/screenshots/officerooms.png"
-                  className="h-[10rem]"
+                  className="h-[15rem] rounded-lg"
                 />
               </span>
 
               <Divider />
 
               <span className="flex flex-row justify-between items-center">
-                <img
+                {/* spontaneous bug room */}
-                  src="/illustrations/undraw_conference_speaker_re_1rna.svg"
+                <span
-                  className="h-[10rem]"
+                  className="shrink-0 h-[15rem] backdrop-blur-xl flex flex-col bg-white bg-opacity-80
-                />
+                 rounded-lg justify-between w-80 max-w-screen-sm m-2 overflow-clip"
+                >
+                  {/* header */}
+                  <span className="flex flex-1 flex-row justify-between items-baseline space-x-1 p-5">
+                    {/* meeting details */}
+                    <span className="flex flex-col items-baseline justify-start max-w-xs pr-10">
+                      <span className="text-gray-500 font-semibold mr-auto">
+                        bug fixing
+                      </span>
+                      <span className="text-xs text-gray-400 overflow-wrap mb-auto h-full">
+                        were just fixing that jsx bug thats a paiiinnnn
+                      </span>
 
-                <span className="flex flex-col ml-2 items-center">
+                      {/* badges and tags */}
+                      <span className="flex flex-row flex-wrap mt-auto">
+                        <span className="text-xs m-1 text-white bg-red-400 p-1 rounded-md font-bold flex flex-row items-center">
+                          <span>blockers</span>
+                        </span>
+
+                        <span className="text-xs m-1 text-white bg-indigo-400 p-1 rounded-md font-bold flex flex-row items-center">
+                          <span>engineering</span>
+                        </span>
+                      </span>
+                    </span>
+
+                    {/* room status */}
+                    <span className="flex flex-col items-end space-y-1 justify-between h-full">
+                      <span
+                        className="text-xs bg-red-500
+                    text-white font-bold p-1 rounded-md flex flex-row space-x-2 items-center"
+                      >
+                        <FaClock />
+                        <span>live</span>
+                      </span>
+
+                      {/* room attachments */}
+                      <span className="flex flex-row space-x-2">
+                        <button className="bg-gray-400 bg-opacity-25 p-2 ml-auto rounded hover:bg-opacity-40">
+                          <FaLink className="text-sm text-gray-400" />
+                        </button>
+
+                        <button className="bg-gray-400 bg-opacity-25 p-2 ml-auto rounded hover:bg-opacity-40">
+                          <FaLink className="text-sm text-gray-400" />
+                        </button>
+                      </span>
+                    </span>
+                  </span>
+
+                  {/* footer */}
+                  <span className="flex flex-row items-center bg-gray-400 bg-opacity-30 p-3">
+                    <span className="inline-flex flex-row-reverse items-center shrink-0 mr-1">
+                      <span className="relative flex">
+                        <span className="bg-gray-200 rounded-full shadow-md absolute w-full h-full"></span>
+                        <Image
+                          className=""
+                          src={
+                            "/avatars/svg/Artboards_Diversity_Avatars_by_Netguru-20.svg"
+                          }
+                          alt="profile"
+                          width={30}
+                          height={30}
+                        />
+                      </span>
+                      <span className="-mr-4 relative flex">
+                        <span className="bg-gray-200 rounded-full shadow-md absolute w-full h-full"></span>
+                        <Image
+                          className=""
+                          src={
+                            "/avatars/svg/Artboards_Diversity_Avatars_by_Netguru-22.svg"
+                          }
+                          alt="profile"
+                          width={30}
+                          height={30}
+                        />
+                      </span>
+                    </span>
+                    <span className="text-xs text-gray-400">
+                      Arjun and Liam
+                    </span>
+                    <button className="ml-auto text-sm text-orange-500 font-semibold py-1 px-4 bg-gray-200 rounded">
+                      👋 Leave
+                    </button>
+                    <BsThreeDots className="text-white ml-2 hover:cursor-pointer" />{" "}
+                  </span>
+                </span>
+
+                <span className="flex flex-col ml-2 items-end">
                   <span className="text-lg text-gray-500">
-                    Send an Audio Message
+                    Join an Official Room
                   </span>
-                  <span className={`text-md text-gray-300`}>
+                  <span className={`text-md text-gray-300 text-right`}>
-                    Press and hold R. Your teammate will hear you instantly if
+                    Click on the{" "}
-                    they are logged in.
+                    <button className="inline bg-gray-300 bg-opacity-25 p-1 rounded hover:bg-opacity-40">
+                      <FaPlus className="text-md text-white" />
+                    </button>{" "}
+                    to create a <br></br>
+                    <FcGoogle className="inline text-lg" /> Meet (if your team
+                    has GSuite).
                   </span>
-                  <span className={`text-md text-gray-300`}>
+                  <span className={`text-md text-teal-600 text-right`}>
-                    As if you were speaking over your shoulder. No
+                    Spontaneous, scheduled, or recurring rooms.
-                    notifications. No scrolling. No reading.
                   </span>
 
-                  <button
+                  <span className="flex flex-row items-center space-x-2">
-                    className={`right-1 rounded-lg py-1 px-2 ml-1 
+                    <button className="inline bg-gray-300 bg-opacity-25 p-2 rounded hover:bg-opacity-40">
-                            shadow-md text-center text-gray-300 text-sm font-bold 
+                      <FaPlus className="text-md text-white" />
-                            ${isRecording ? "bg-orange-500 text-white" : ""}`}
+                    </button>
-                  >
+
-                    R
+                    <span>or</span>
-                  </button>
+                    <button
+                      className={`right-1 rounded-lg py-1 px-2 ml-1 
+                            shadow-md text-center text-gray-300 text-sm font-bold`}
+                    >
+                      Q
+                    </button>
+                  </span>
                 </span>
               </span>
 
               <Divider />
 
               <span className="flex flex-row justify-between items-center">
-                <span className="flex flex-col ml-2 items-center">
+                <span className="flex flex-col ml-2 items-start">
                   <span className="text-lg text-gray-500">
-                    Play Incoming Message
+                    {"Cross Collaborate"}
                   </span>
-                  <span className={`text-md text-gray-300 text-center`}>
+                  <span className={`text-md text-gray-300 text-left`}>
-                    Select teammate and then press SPACE <br></br> to listen to
+                    Walk into the office with clarity of team<br></br>
-                    the last conversation.
+                    <span className="text-teal-600">
+                      conversations are going on{" "}
+                    </span>{" "}
+                    across the hall.
                   </span>
-                  {/* <span className={`text-md text-gray-300 text-center`}>
-                    Deselect teammate by pressing <br></br> ESC.
-                  </span> */}
-
-                  <button
-                    className={`right-1 rounded-lg py-1 px-2 ml-1 
-                            shadow-md text-center text-gray-300 text-sm font-bold`}
-                  >
-                    SPACE
-                  </button>
                 </span>
 
                 <img
-                  src="/illustrations/undraw_tutorial_video_vtd1.svg"
+                  src="/illustrations/undraw_team_collaboration_re_ow29.svg"
                   className="h-[10rem]"
                 />
               </span>
-
-              <Divider />
-
-              <span className="flex flex-row justify-between items-center">
-                <img
-                  src="/illustrations/undraw_back_home_nl-5-c.svg"
-                  className="h-[10rem]"
-                />
-
-                <span className="flex flex-col ml-2 items-center">
-                  <span className="text-lg text-gray-500">Clear Your View</span>
-                  <span className={`text-md text-gray-300 text-center`}>
-                    Deselect teammate and <br></br> stop playing audio by
-                    pressing ESC.
-                  </span>
-
-                  <button
-                    className={`right-1 rounded-lg py-1 px-2 ml-1 
-                            shadow-md text-center text-gray-300 text-sm font-bold`}
-                  >
-                    ESC
-                  </button>
-                </span>
-              </span>
             </span>
           </div>
           <div>
@@ -350,16 +418,38 @@ export default function ShortcutHelpModal() {
                   className="hover:cursor-pointer bg-teal-600 text-white p-1 rounded-full text-xl shrink-0"
                 />
 
-                <span className="flex flex-col ml-2 items-center">
+                <span className="flex flex-col items-center">
-                  <span className="text-lg text-gray-500">
+                  <span className="text-xl">Drawer</span>
-                    Manage Your Drawer
+                  <span className="text-md text-gray-300 text-center">
-                  </span>
+                    Organize your desk and{" "}
-                  <span className={`text-md text-gray-300 text-center`}>
+                    <span className="text-teal-600">
-                    Paste important links: Jira tickets, ppts, drive files,
+                      focus on today&apos;s priorities.
-                    github, code snippets.
+                    </span>
                   </span>
 
-                  <span className="flex flex-row items-center">
+                  <img
+                    src="/screenshots/drawer.png"
+                    className="rounded-lg mt-5"
+                  />
+                </span>
+
+                <FaArrowRight
+                  onClick={() => carouselRef.current.next()}
+                  className="hover:cursor-pointer bg-teal-600 text-white p-1 rounded-full text-xl shrink-0"
+                />
+              </span>
+
+              <span className="flex flex-row justify-between items-center">
+                <span className="flex flex-col ml-2 items-start">
+                  <span className="text-lg text-gray-500">Add Your Drawer</span>
+                  <span className={`text-md text-gray-300 text-left max-w-xs`}>
+                    Paste{" "}
+                    <span className={`text-teal-600`}>important links:</span>{" "}
+                    Jira tickets, ppts, drive files/folders, github, code
+                    snippets.
+                  </span>
+
+                  <span className="flex flex-row items-left">
                     {" "}
                     <button
                       className={`right-1 rounded-lg py-1 px-2 ml-1 
@@ -377,16 +467,67 @@ export default function ShortcutHelpModal() {
                   </span>
                 </span>
 
-                <FaArrowRight
+                <img
-                  onClick={() => carouselRef.current.next()}
+                  src="/illustrations/undraw_memory_storage_reh0.svg"
-                  className="hover:cursor-pointer bg-teal-600 text-white p-1 rounded-full text-xl shrink-0"
+                  className="h-[12rem]"
                 />
               </span>
 
-              <img
+              <Divider />
-                src="/illustrations/undraw_conference_speaker_re_1rna.svg"
+
-                className="h-[10rem]"
+              <span className="flex flex-row justify-between items-center">
-              />
+                <img
+                  src="/illustrations/undraw_team_spirit_re_yl1v.svg"
+                  className="h-[12rem]"
+                />
+
+                <span className="flex flex-col ml-2 items-end max-w-xs">
+                  <span className="text-lg text-gray-500">Team Drawer</span>
+                  <span className={`text-md text-gray-300 text-right`}>
+                    Make sure your team has <br></br> what they need from you.
+                  </span>
+                  <span className={`text-md text-teal-600 text-right`}>
+                    Keep this clean to stay focused.
+                  </span>
+                </span>
+              </span>
+
+              <Divider />
+
+              <span className="flex flex-row justify-between items-center">
+                <span className="flex flex-col ml-2 items-start">
+                  <span className="text-lg text-gray-500">
+                    {"You Decide What You Keep"}
+                  </span>
+                  <span className={`text-md text-gray-300 text-left`}>
+                    Last month&apos;s mess is weighing you down.
+                  </span>
+
+                  <span className={`text-md text-gray-300 text-left`}>
+                    Only see{" "}
+                    <span className="text-teal-600">
+                      this week&apos;s files/links
+                    </span>{" "}
+                    to keep <br></br> your head clear.
+                  </span>
+                </span>
+
+                <img
+                  src="/illustrations/undraw_my_files_swob.svg"
+                  className="h-[10rem]"
+                />
+              </span>
+
+              <Divider />
+
+              <span className={`text-md text-gray-300 text-center`}>
+                NOTE: this is{" "}
+                <span className="text-orange-500">NOT file storage.</span>
+              </span>
+              <span className={`text-md text-gray-300 text-center`}>
+                They are merely bookmarked links <br></br> to your source of
+                truth (Google Drive, Github...).
+              </span>
             </span>
           </div>
         </Carousel>