starting the demo but shortcuts and all taking time

components/demo/Announcements.tsx

@@ -2,44 +2,55 @@ import { FaAngleDown, FaCheck, FaMicrophoneAlt, FaPlay } from "react-icons/fa";
 import { UserStatus } from "../../models/user";
 
 import Image from "next/image";
+import { Tooltip } from "antd";
+import { DemoStep, IVoiceDemoProps } from "./VoiceLineConceptDemo";
+
+export default function Announcements(props: IVoiceDemoProps) {
+  const isAnnouncementsTurn =
+    props.demoStep == DemoStep.playAnnouncement ||
+    props.demoStep == DemoStep.resolveAnnouncement;
 
-export default function Announcements() {
   return (
-    <section className="p-5 flex flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-md -translate-x-20 backdrop-blur-xl">
+    <section
+      className={`p-5 flex flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-md -translate-x-20 backdrop-blur-xl ${
+        !isAnnouncementsTurn ? "blur-sm" : ""
+      }`}
+    >
       <span className="flex flex-row justify-start items-center pb-5">
         <span className="flex flex-col mr-20">
           <span className="bg-clip-text text-transparent bg-gradient-to-r from-pink-500 to-violet-500">
             ANNOUNCEMENTS
-            <button
+            {/* <button
               className="right-1 rounded-lg py-1 px-2 ml-1 
                             shadow-md text-center text-gray-400 text-sm font-bold"
             >
               CTRL + A
-            </button>
+            </button> */}
+          </span>
+
+          <span className="text-gray-400 text-xs">
+            updates, pep talks, blockers, reminders
           </span>
         </span>
 
         {/* tab pane */}
         <span className="ml-auto flex flex-row space-x-5 uppercase mr-5">
-          <span className="underline underline-offset-8 decoration-gray-500 text-gray-500 hover:text-white hover:cursor-pointer">
+          <span className="underline underline-offset-8 decoration-gray-500 text-gray-500 hover:cursor-pointer">
             Active
           </span>
 
-          <span className="text-gray-400 hover:text-white hover:cursor-pointer">
-            Resolved
-          </span>
+          <span className="text-gray-400 hover:cursor-pointer">Resolved</span>
         </span>
 
         <span className="text-sm text-gray-400 flex flex-row items-center">
           TODAY <FaAngleDown />
         </span>
 
-        <button className="bg-gray-400 bg-opacity-25 p-2 ml-2 rounded hover:bg-opacity-40">
-          <FaMicrophoneAlt className="text-lg text-gray-500" />
-        </button>
-        <button className="bg-gray-400 bg-opacity-25 p-2 ml-2 rounded hover:bg-opacity-40">
-          <FaPlay className="text-lg text-gray-500" />
-        </button>
+        <Tooltip title={"You can create announcements in the future."}>
+          <button className="bg-gray-400 bg-opacity-25 p-2 ml-2 rounded hover:bg-opacity-40">
+            <FaMicrophoneAlt className="text-lg text-gray-500" />
+          </button>
+        </Tooltip>
       </span>
 
       <div className="flex flex-row overflow-auto whitespace-nowrap space-x-5 items-center">
@@ -86,9 +97,17 @@ export default function Announcements() {
             </span>
           </span>
 
-          <button className="bg-gray-500 bg-opacity-25 p-2 ml-2 rounded hover:bg-opacity-40">
-            <FaCheck className="text-lg text-gray-500" />
-          </button>
+          <Tooltip title={"Resolve"}>
+            <button className="bg-gray-400 bg-opacity-25 p-2 ml-2 rounded hover:bg-opacity-40">
+              <FaCheck className="text-lg text-gray-500" />
+            </button>
+          </Tooltip>
+
+          <Tooltip title={"Play"}>
+            <button className="bg-gray-400 bg-opacity-25 p-2 ml-2 rounded hover:bg-opacity-40">
+              <FaPlay className="text-lg text-gray-500" />
+            </button>
+          </Tooltip>
         </span>
       </div>
     </section>

components/demo/TeamVoiceLine.tsx

@@ -1,8 +1,13 @@
-import { FaPlus } from "react-icons/fa";
+import { FaArrowCircleDown, FaPlus } from "react-icons/fa";
 import { UserStatus } from "../../models/user";
 
 import Image from "next/image";
 import { IoPulseOutline, IoRemoveOutline } from "react-icons/io5";
+import { DemoStep, IVoiceDemoProps } from "./VoiceLineConceptDemo";
+import { Popover, Tooltip } from "antd";
+import { useCallback, useEffect, useState } from "react";
+import { KeyCode } from "../../globals/keycode";
+import toast from "react-hot-toast";
 
 let testFriends = [
   {
@@ -25,15 +30,13 @@ let testFriends = [
   },
   {
     name: "Mark",
-    role: "engineer",
+    role: "designer",
     systemAvatar: "04",
     status: UserStatus.busy,
   },
 ];
 
 function statusBubble(status: UserStatus) {
-  console.log(status);
-
   switch (status) {
     case UserStatus.online:
       return (
@@ -75,9 +78,79 @@ function renderPulse(status: UserStatus) {
   }
 }
 
-export default function TeamVoiceLine() {
+export default function TeamVoiceLine(props: IVoiceDemoProps) {
+  const isVoiceLineTurn =
+    props.demoStep == DemoStep.playIncomingMessage ||
+    props.demoStep == DemoStep.hearReply ||
+    props.demoStep == DemoStep.sendReply;
+
+  useEffect(() => {
+    if (props.demoStep == DemoStep.playIncomingMessage) {
+      // play audio of paul talking
+
+      var audio = new Audio(
+        "https://firebasestorage.googleapis.com/v0/b/nirvana-for-business.appspot.com/o/messages%2F62ca7369-7c0c-4b3e-a382-12d4a237d1af.mp3?alt=media&token=b6d4acb0-afc9-4a9f-8c58-cf60a6079003"
+      );
+      audio.play();
+
+      setTimeout(function () {
+        props.handleChangeDemoStep(DemoStep.sendReply);
+      }, 10000);
+    } else if (props.demoStep == DemoStep.sendReply) {
+    } else if (props.demoStep == DemoStep.hearReply) {
+      toast.success("Paul heard it live!");
+    }
+  }, [props.demoStep]);
+
+  const [isRecording, setIsRecording] = useState<boolean>(false);
+
+  const handleKeyUp = useCallback(
+    (event) => {
+      if (event.repeat) {
+        return;
+      }
+      console.log("on key up");
+      console.log(event.keyCode);
+
+      if (isRecording && event.keyCode == KeyCode.R) {
+        setIsRecording(false);
+      }
+    },
+    [isRecording]
+  );
+
+  const handleKeyDown = useCallback(
+    (event) => {
+      if (event.repeat) {
+        return;
+      }
+      console.log(event.keyCode);
+
+      if (event.keyCode == KeyCode.R) {
+        setIsRecording(true);
+      }
+    },
+    [isRecording]
+  );
+
+  useEffect(() => {
+    document.addEventListener("keydown", handleKeyDown);
+    document.addEventListener("keyup", handleKeyUp);
+
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+      document.removeEventListener("keyup", handleKeyUp);
+    };
+  }, [handleKeyDown, handleKeyUp]);
+
   return (
-    <section className="p-5 flex flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-2xl translate-x-32 translate-y-20 z-10 backdrop-blur-xl">
+    <section
+      className={`p-5 flex w-80 flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-2xl translate-x-32 translate-y-20 z-10 backdrop-blur-xl ${
+        !isVoiceLineTurn ? "blur-sm" : ""
+      }`}
+      tabIndex={10}
+      onKeyDown={(e) => console.log("yayayayay")}
+    >
       <span className="flex flex-row justify-start items-center pb-5">
         <span className="flex flex-col">
           <span className="bg-clip-text text-transparent bg-gradient-to-r from-pink-500 to-violet-500">
@@ -85,9 +158,11 @@ export default function TeamVoiceLine() {
           </span>
         </span>
 
-        <button className="bg-gray-400 bg-opacity-50 p-2 ml-auto rounded hover:bg-opacity-40">
-          <FaPlus className="text-lg text-gray-500" />
-        </button>
+        <Tooltip title="You will be able to add team members to your voice line.">
+          <button className="bg-gray-400 bg-opacity-25 p-2 ml-auto rounded hover:bg-opacity-40">
+            <FaPlus className="text-lg text-gray-500" />
+          </button>
+        </Tooltip>
       </span>
 
       {/* list of team members */}
@@ -95,11 +170,18 @@ export default function TeamVoiceLine() {
         return (
           <span
             key={i}
-            className={
-              "flex w-52 flex-row items-center py-2 px-2 justify-items-start ease-in-out duration-300"
-            }
+            className={`flex flex-row items-center py-2 px-2 justify-items-start ease-in-out duration-300 rounded-lg ${
+              friend.name == "Paul" ? "bg-orange-500 bg-opacity-20" : ""
+            }`}
           >
-            <span className="relative flex mr-2 shrink-0">
+            <span
+              className={`relative flex mr-2 shrink-0 ${
+                friend.name == "Paul" &&
+                props.demoStep == DemoStep.playIncomingMessage
+                  ? "animate-pulse"
+                  : ""
+              }`}
+            >
               <span className="bg-gray-200 bg-opacity-30 rounded-full shadow-md absolute w-full h-full"></span>
 
               {statusBubble(friend.status)}
@@ -121,12 +203,45 @@ export default function TeamVoiceLine() {
                 <span className="text-sm text-gray-600 font-semibold">
                   {friend.name}{" "}
                 </span>
-                <button
-                  className="rounded-lg py-1 px-2 shadow-lg 
-                                text-center text-gray-200 text-sm font-bold"
-                >
-                  {i}
-                </button>
+
+                {friend.name == "Paul" &&
+                props.demoStep == DemoStep.playIncomingMessage ? (
+                  <FaArrowCircleDown className="text-orange-500 text-xl animate-bounce" />
+                ) : (
+                  <></>
+                )}
+
+                {friend.name == "Paul" &&
+                props.demoStep == DemoStep.sendReply ? (
+                  <Tooltip
+                    title={
+                      "PRESS AND HOLD R (on your keyboard) to record a message and send"
+                    }
+                    defaultVisible={true}
+                  >
+                    <button
+                      className={`rounded-lg py-1 px-2 shadow-lg 
+                                text-center text-sm font-bold ranimate-bounce ${
+                                  isRecording
+                                    ? "bg-orange-500 text-white"
+                                    : "text-orange-500"
+                                }`}
+                    >
+                      R
+                    </button>
+                  </Tooltip>
+                ) : (
+                  <button
+                    className={`rounded-lg py-1 px-2 shadow-lg 
+                                text-center text-sm font-bold ${
+                                  friend.name == "Paul"
+                                    ? "text-orange-500"
+                                    : "text-gray-200 "
+                                }`}
+                  >
+                    {i}
+                  </button>
+                )}
               </span>
 
               <span className={"text-xs span-sans text-gray-400"}>

components/demo/VoiceLineConceptDemo.tsx

@@ -0,0 +1,64 @@
+import { Tooltip } from "antd";
+import { useState } from "react";
+import { FaPlay } from "react-icons/fa";
+import Announcements from "./Announcements";
+import TeamVoiceLine from "./TeamVoiceLine";
+
+export enum DemoStep {
+  playDemo = "play demo",
+  playIncomingMessage = "play incoming message",
+  sendReply = "send reply",
+  hearReply = "hear reply",
+  playAnnouncement = "play announcement",
+  resolveAnnouncement = "resolve announcement",
+}
+
+export interface IVoiceDemoProps {
+  demoStep: DemoStep;
+
+  handleChangeDemoStep: Function;
+}
+
+export default function VoiceLineConceptDemo() {
+  const [demoStep, setDemoStep] = useState<DemoStep>(DemoStep.playDemo);
+
+  function handleChangeStep(newStep: DemoStep) {
+    setDemoStep(newStep);
+  }
+
+  return (
+    <>
+      <TeamVoiceLine
+        demoStep={demoStep}
+        handleChangeDemoStep={handleChangeStep}
+      />
+
+      <Announcements
+        demoStep={demoStep}
+        handleChangeDemoStep={handleChangeStep}
+      />
+
+      {demoStep == DemoStep.playDemo ? (
+        <Tooltip title={"Make sure to have your speakers on!"}>
+          <button
+            onClick={() => setDemoStep(DemoStep.playIncomingMessage)}
+            className="absolute mx-auto my-auto left-1/2 top-1/2 
+      bg-gray-200 py-2 px-2 rounded font-semibold inline-flex items-center text-teal-600
+      space-x-2 animate-bounce"
+          >
+            <FaPlay /> <span>Play Demo</span>
+          </button>
+        </Tooltip>
+      ) : (
+        <button
+          onClick={() => setDemoStep(DemoStep.playDemo)}
+          className="absolute right-0 bottom-0
+      bg-gray-200 bg-opacity-30 py-2 px-2 rounded font-semibold inline-flex items-center text-teal-600
+      space-x-2"
+        >
+          <span>Reset Demo</span>
+        </button>
+      )}
+    </>
+  );
+}

pages/index.js

@@ -10,6 +10,7 @@ import {
 import TeamVoiceLine from "../components/demo/TeamVoiceLine";
 import Announcements from "../components/demo/Announcements";
 import Rooms from "../components/demo/Rooms";
+import VoiceLineConceptDemo from "../components/demo/VoiceLineConceptDemo";
 
 import MainLogo from "../components/MainLogo";
 import { Divider } from "antd";
@@ -56,55 +57,61 @@ export default function Home() {
           </span>
         </div>
 
-        <div className="flex flex-col justify-start items-baseline max-w-screen-sm md:mt-20 backdrop-blur-xl rounded-lg">
-          <span className="flex flex-row text-left md:text-6xl text-3xl space-x-5 h-[5rem] overflow-hidden">
-            <span className="font-semibold text-black py-4">No</span>
-            <span className="md:hidden flex flex-row space-x-2 py-4 text-red-600">
-              <FaSlackHash /> <span>slacking</span>
-            </span>
-            <span className="hidden flippingWords md:visible md:flex flex-col space-y-5 text-red-600 ">
-              <span className="flex flex-row space-x-2">
-                <FaRocketchat /> <span>threads</span>
-              </span>
-              <span className="flex flex-row space-x-2">
+        <div className="flex flex-row md:mt-20">
+          <span className="flex flex-col max-w-screen-sm justify-start items-baseline backdrop-blur-xl rounded-lg">
+            <span className="flex flex-row text-left md:text-6xl text-3xl space-x-5 h-[5rem] overflow-hidden">
+              <span className="font-semibold text-black py-4">No</span>
+              <span className="md:hidden flex flex-row space-x-2 py-4 text-red-600">
                 <FaSlackHash /> <span>slacking</span>
               </span>
-              <span className="flex flex-row space-x-2">
-                <FaCalendarAlt /> <span>calendars</span>
-              </span>
-              <span className="flex flex-row space-x-2">
-                <FaNewspaper /> <span>files</span>
-              </span>
-              <span className="flex flex-row space-x-2">
-                <FaRocketchat /> <span>threads</span>
+              <span className="hidden flippingWords md:visible md:flex flex-col space-y-5 text-red-600 ">
+                <span className="flex flex-row space-x-2">
+                  <FaRocketchat /> <span>threads</span>
+                </span>
+                <span className="flex flex-row space-x-2">
+                  <FaSlackHash /> <span>slacking</span>
+                </span>
+                <span className="flex flex-row space-x-2">
+                  <FaCalendarAlt /> <span>calendars</span>
+                </span>
+                <span className="flex flex-row space-x-2">
+                  <FaNewspaper /> <span>files</span>
+                </span>
+                <span className="flex flex-row space-x-2">
+                  <FaRocketchat /> <span>threads</span>
+                </span>
               </span>
             </span>
+
+            <span className="flex flex-row text-left md:text-6xl text-3xl space-x-5">
+              <span className="font-semibold text-black">More</span>
+              <span className="text-sky-600 font-bold">focus.</span>
+            </span>
+
+            <span className="my-10 text-md  md:text-xl max-w-xl text-gray-600">
+              Voice-first collaboration tool for scrum/agile teams.
+              <br></br>
+              Skip slack and email, just talk to your team.
+            </span>
+
+            <span className="flex flex-row space-x-2">
+              <a
+                href="mailto:usenirvana@gmail.com?subject=Interested in Nirvana for Startups"
+                className="rounded text-teal-600 p-2 shadow-l flex flex-row items-center space-x-2"
+              >
+                Email Us
+              </a>
+              {getStartedButton}
+            </span>
           </span>
 
-          <span className="flex flex-row text-left md:text-6xl text-3xl space-x-5">
-            <span className="font-semibold text-black">More</span>
-            <span className="text-sky-600 font-bold">focus.</span>
-          </span>
-
-          <span className="my-10 text-md  md:text-xl max-w-xl text-gray-600">
-            Voice-first collaboration tool for scrum/agile teams.
-            <br></br>
-            Skip slack and email, just talk to your team.
-          </span>
-
-          <span className="flex flex-row space-x-2">
-            <a
-              href="mailto:usenirvana@gmail.com?subject=Interested in Nirvana for Startups"
-              className="rounded text-teal-600 p-2 shadow-l flex flex-row items-center space-x-2"
-            >
-              Email Us
-            </a>
-            {getStartedButton}
+          <span className="flex flex-row relative items-baseline">
+            <VoiceLineConceptDemo />
           </span>
         </div>
 
         {/* main mission */}
-        <div className="mx-auto flex flex-col items-start max-w-screen-sm rounded-lg bg-gray-200 bg-opacity-25 backdrop-blur-xl md:mt-[15rem] mt-[5rem] p-10">
+        <div className="mx-auto flex flex-col items-start max-w-screen-sm rounded-lg bg-gray-200 bg-opacity-25 backdrop-blur-xl md:mt-[40rem] mt-[5rem] p-10">
           <span className="bg-clip-text text-transparent bg-gradient-to-r from-pink-500 to-violet-500">
             Philosophy
           </span>

pages/philosophy.tsx

@@ -0,0 +1,86 @@
+import { Divider } from "antd";
+import { useRouter } from "next/router";
+import { FaAngleRight } from "react-icons/fa";
+import Rooms from "../components/demo/Rooms";
+
+export default function Philosophy() {
+  const handleGetDemo = () => {
+    window.open("https://calendly.com/usenirvana/30min", "_blank");
+  };
+
+  const router = useRouter();
+
+  const getStartedButton = (
+    <button
+      onClick={handleGetDemo}
+      className="rounded font-semibold bg-teal-600 p-2 text-white shadow-lg flex flex-row items-center space-x-2"
+    >
+      <span>Get Demo</span>
+      <FaAngleRight />
+    </button>
+  );
+  return (
+    <>
+      {/* main mission */}
+      <div className="mx-auto flex flex-col items-start max-w-screen-sm rounded-lg bg-gray-200 bg-opacity-25 backdrop-blur-xl md:mt-[15rem] mt-[5rem] p-10">
+        <span className="bg-clip-text text-transparent bg-gradient-to-r from-pink-500 to-violet-500">
+          Philosophy
+        </span>
+
+        <span className="text-left text-lg mb-5 text-gray-700">
+          In today&apos;s distracted world, we mistake adding software and tools
+          for productivity.
+        </span>
+
+        <span className="text-left text-lg text-gray-700">
+          At Nirvana, we are bringing work back to the basics. Voice first
+          communication because voice makes us human and less is more. An
+          experience as if your team was right next to you.
+        </span>
+
+        <></>
+      </div>
+
+      {/* rooms concept */}
+      <div className="mx-auto flex flex-row flex-wrap items-start justify-between md:mt-[15rem] mt-[5rem]">
+        <Rooms />
+
+        <span className="flex flex-col grow max-w-sm rounded-lg bg-gray-200 bg-opacity-25 backdrop-blur-xl p-10">
+          <span className="bg-clip-text text-transparent bg-gradient-to-r from-pink-500 to-violet-500">
+            Rooms
+          </span>
+
+          <span className="text-left text-lg text-gray-700">
+            See what&apos;s going on across the hall at a glance.
+          </span>
+
+          <Divider />
+
+          <span className="text-left text-md text-gray-600">
+            Join Ben and Cathy&apos;s conversation to review design mockups or
+            jump into another room for wine Wednesdays!
+          </span>
+
+          <Divider />
+
+          <span className="text-left text-md text-gray-600 mt-5">
+            Why go back and forth through chat 100 times or schedule a meeting
+            tomorrow at 2pm?
+          </span>
+
+          <span className="text-left text-md text-gray-600 mt-5">
+            Jump into rooms and resolve issues quicker.
+          </span>
+        </span>
+      </div>
+
+      {/* action section */}
+      <div className="flex flex-col items-center mx-auto max-w-screen-sm backdrop-blur-xl rounded-lg p-10">
+        <span className="text-xl mb-10 font-semibold text-gray-500">
+          Ready to start working?
+        </span>
+        {getStartedButton}
+      </div>
+    </>
+  );
+}