done with simple landing page

components/demo/Announcements.tsx

@@ -0,0 +1,96 @@
+import { FaAngleDown, FaCheck, FaMicrophoneAlt, FaPlay } from "react-icons/fa";
+import { UserStatus } from "../../models/user";
+
+import Image from "next/image";
+
+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">
+      <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
+              className="right-1 rounded-lg py-1 px-2 ml-1 
+                            shadow-md text-center text-gray-200 text-sm font-bold"
+            >
+              CTRL + A
+            </button>
+          </span>
+        </span>
+
+        {/* tab pane */}
+        <span className="ml-auto flex flex-row space-x-5 uppercase mr-5">
+          <span className="underline underline-offset-8 decoration-white text-gray-200 hover:text-white hover:cursor-pointer">
+            Active
+          </span>
+
+          <span className="text-gray-300 hover:text-white hover:cursor-pointer">
+            Resolved
+          </span>
+        </span>
+
+        <span className="text-sm text-gray-300 flex flex-row items-center">
+          TODAY <FaAngleDown />
+        </span>
+
+        <button className="bg-gray-300 bg-opacity-25 p-2 ml-2 rounded hover:bg-opacity-40">
+          <FaMicrophoneAlt className="text-lg text-white" />
+        </button>
+        <button className="bg-gray-300 bg-opacity-25 p-2 ml-2 rounded hover:bg-opacity-40">
+          <FaPlay className="text-lg text-white" />
+        </button>
+      </span>
+
+      <div className="flex flex-row overflow-auto whitespace-nowrap space-x-5 items-center">
+        {/* adriana's announcement */}
+        <span className="flex flex-row p-3 bg-gray-300 bg-opacity-25 rounded-lg items-center">
+          <span className="relative mr-2 grid items-center justify-items-center">
+            <span className="bg-gray-200 bg-opacity-20 rounded-full shadow-md absolute w-full h-full"></span>
+
+            <Image
+              src={"/avatars/svg/Artboards_Diversity_Avatars_by_Netguru-06.svg"}
+              alt="profile"
+              width={50}
+              height={50}
+            />
+          </span>
+
+          <span className="flex flex-col items-baseline">
+            <span className="text-md font-bold text-white">Adriana</span>
+            <span className="text-xs text-gray-200">5 minutes ago</span>
+            <span className="text-xs text-white bg-red-400 p-1 rounded-md font-semibold flex flex-row items-center">
+              <span>blockers</span>
+            </span>
+          </span>
+        </span>
+
+        {/* arjun's announcement */}
+        <span className="flex flex-row p-3 bg-gray-300 bg-opacity-25 rounded-lg items-center">
+          <span className="relative mr-2 grid items-center justify-items-center">
+            <span className="bg-gray-200 bg-opacity-20 rounded-full shadow-md absolute w-full h-full"></span>
+
+            <Image
+              src={"/avatars/svg/Artboards_Diversity_Avatars_by_Netguru-22.svg"}
+              alt="profile"
+              width={50}
+              height={50}
+            />
+          </span>
+
+          <span className="flex flex-col items-baseline mr-5">
+            <span className="text-md font-semibold text-gray-600">Arjun</span>
+            <span className="text-xs text-gray-400">30 minutes ago</span>
+            <span className="text-xs text-white bg-indigo-400 p-1 rounded-md font-semibold flex flex-row items-center">
+              <span>engineering</span>
+            </span>
+          </span>
+
+          <button className="bg-gray-300 bg-opacity-25 p-2 ml-2 rounded hover:bg-opacity-40">
+            <FaCheck className="text-lg text-white" />
+          </button>
+        </span>
+      </div>
+    </section>
+  );
+}

components/demo/Rooms.tsx

@@ -0,0 +1,260 @@
+import { BsThreeDots } from "react-icons/bs";
+import { FaAngleDown, FaBell, FaClock, FaLink, FaPlus } from "react-icons/fa";
+import { IoTimer } from "react-icons/io5";
+import Image from "next/image";
+
+export default function Rooms() {
+  return (
+    <div className="flex flex-col">
+      {/* spontaneous bugs room */}
+      <span className="shrink-0 h-[15rem] backdrop-blur-xl flex flex-col bg-white bg-opacity-80 rounded-lg justify-between w-96 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>
+
+            {/* 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>
+
+      {/* live room - design meeting */}
+      <span className="shrink-0 h-[15rem] backdrop-blur-xl translate-x-32 -translate-y-32 flex flex-col bg-gray-300 bg-opacity-25 rounded-lg justify-between w-96 max-w-screen-sm m-2 overflow-clip">
+        {/* header */}
+        <span className="flex flex-row justify-between items-baseline space-x-1 p-5">
+          {/* meeting details */}
+          <span className="flex flex-col items-baseline max-w-xs pr-20">
+            <span className="text-gray-500 font-semibold mr-auto">
+              Shopping Cart Experience
+            </span>
+            <span className="text-xs text-gray-400 overflow-wrap">
+              lets finish the mockups @josh, @mark, and @arjun please step in
+              for feedback
+            </span>
+
+            {/* badges and tags */}
+            <span className="flex flex-row flex-wrap space-x-2">
+              <span className="text-xs my-3 text-white bg-purple-400 p-1 rounded-md font-bold flex flex-row space-x-2 items-center">
+                <span>design</span>
+              </span>
+            </span>
+          </span>
+
+          {/* room status */}
+          <span className="flex flex-col items-end justify-between h-full">
+            <span className="text-blue-700 bg-blue-200 p-1 rounded-md text-xs font-bold flex flex-row items-center space-x-1">
+              <FaClock />
+              <span>scheduled</span>
+            </span>
+            <span className="text-gray-400 text-xs text-right mb-auto">
+              afternoon
+            </span>
+
+            {/* room attachments */}
+            <span className="flex flex-row space-x-2">
+              <button className="bg-gray-400 bg-opacity-25 p-2 rounded hover:bg-opacity-40">
+                <FaLink className="text-sm text-gray-400" />
+              </button>
+
+              <button className="bg-gray-400 bg-opacity-25 p-2 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-06.svg"
+                }
+                alt="profile"
+                width={30}
+                height={30}
+              />
+            </span>
+          </span>
+
+          <span className="text-xs text-white">Adriana</span>
+
+          <button className="ml-auto text-sm font-semibold py-1 px-4 rounded bg-gray-300 text-green-500">
+            Join
+          </button>
+
+          <BsThreeDots className="text-white ml-2 hover:cursor-pointer" />
+        </span>
+      </span>
+
+      {/* recurring  room - demo */}
+      <span className="shrink-0 h-[15rem] backdrop-blur-xl translate-x-30 -translate-y-60 flex flex-col  bg-gray-300 bg-opacity-25 rounded-lg justify-between w-96 max-w-screen-sm m-2 overflow-clip">
+        {/* header */}
+        <span className="flex flex-row justify-between items-baseline space-x-1 p-5">
+          {/* meeting details */}
+          <span className="flex flex-col items-baseline max-w-xs pr-20">
+            <span className="text-gray-500 font-semibold mr-auto">
+              Sprint Demo
+            </span>
+            <span className="text-xs text-gray-400 overflow-wrap">
+              All hands on deck...lets have fun :)
+            </span>
+
+            {/* badges and tags */}
+            <span className="flex flex-row flex-wrap space-x-2">
+              <span className="text-xs my-3 text-white bg-cyan-400 p-1 rounded-md font-bold flex flex-row space-x-2 items-center">
+                <span>scrum</span>
+              </span>
+            </span>
+          </span>
+
+          {/* room status */}
+          <span className="flex flex-col items-center justify-start">
+            <span className="text-yellow-700 bg-yellow-200 p-1 rounded-md text-xs font-bold flex flex-row items-center space-x-1">
+              <IoTimer />
+              <span>recurring</span>
+            </span>
+
+            <span className="text-gray-400 text-xs text-center">
+              biweekly fridays!
+            </span>
+          </span>
+        </span>
+
+        {/* footer */}
+        <span className="flex flex-row items-center bg-gray-400 bg-opacity-30 p-3">
+          <button className="ml-auto text-sm font-semibold py-1 px-4 rounded bg-gray-300 text-green-500">
+            Join
+          </button>
+          <button className="bg-orange-300 bg-opacity-25 p-2 ml-2 rounded hover:bg-opacity-40">
+            <FaBell className="text-sm text-orange-500" />
+          </button>
+          <BsThreeDots className="text-white ml-2 hover:cursor-pointer" />{" "}
+        </span>
+      </span>
+
+      {/* recurring room - wine wednesdays */}
+      <span className=" shrink-0 h-[15rem] backdrop-blur-xl translate-x-32 -translate-y-96 flex flex-col bg-gray-300 bg-opacity-25 rounded-lg justify-between w-96 max-w-screen-sm m-2 overflow-clip">
+        {/* header */}
+        <span className="flex flex-row justify-between items-baseline space-x-1 p-5">
+          {/* meeting details */}
+          <span className="flex flex-col items-baseline max-w-xs pr-20">
+            <span className="text-gray-500 font-semibold mr-auto">
+              Wine Wednesdays
+            </span>
+            <span className="text-xs text-gray-400 overflow-wrap">
+              @JOSH YOU BETTER COME
+            </span>
+
+            {/* badges and tags */}
+            <span className="flex flex-row flex-wrap space-x-2">
+              <span className="text-xs my-3 text-white bg-lime-400 p-1 rounded-md font-bold flex flex-row space-x-2 items-center">
+                <span>party 🎉</span>
+              </span>
+            </span>
+          </span>
+
+          {/* room status */}
+          <span className="flex flex-col items-end">
+            <span className="text-yellow-700 bg-yellow-200 p-1 rounded-md text-xs font-bold flex flex-row items-center space-x-1">
+              <IoTimer />
+              <span>recurring</span>
+            </span>
+
+            <span className="text-gray-400 text-xs text-center">
+              Wedn. 7-9pm
+            </span>
+          </span>
+        </span>
+
+        {/* footer */}
+        <span className="flex flex-row items-center bg-gray-400 bg-opacity-30 p-3">
+          <button className="ml-auto text-sm font-semibold py-1 px-4 rounded bg-gray-300 text-green-500">
+            Join
+          </button>
+
+          <button className="bg-orange-300 bg-opacity-25 p-2 ml-2 rounded hover:bg-opacity-40">
+            <FaBell className="text-sm text-orange-500" />
+          </button>
+
+          <BsThreeDots className="text-white ml-2 hover:cursor-pointer" />
+        </span>
+      </span>
+    </div>
+  );
+}

components/demo/TeamVoiceLine.tsx

@@ -0,0 +1,143 @@
+import { FaPlus } from "react-icons/fa";
+import { UserStatus } from "../../models/user";
+
+import Image from "next/image";
+import { IoPulseOutline, IoRemoveOutline } from "react-icons/io5";
+
+let testFriends = [
+  {
+    name: "Liam",
+    role: "engineer",
+    systemAvatar: "29",
+    status: UserStatus.online,
+  },
+  {
+    name: "Emily",
+    role: "engineer",
+    systemAvatar: "02",
+    status: UserStatus.online,
+  },
+  {
+    name: "Paul",
+    role: "architect",
+    systemAvatar: "43",
+    status: UserStatus.online,
+  },
+  {
+    name: "Mark",
+    role: "engineer",
+    systemAvatar: "04",
+    status: UserStatus.busy,
+  },
+];
+
+function statusBubble(status: UserStatus) {
+  console.log(status);
+
+  switch (status) {
+    case UserStatus.online:
+      return (
+        <span className="absolute top-0 right-0 w-3 h-3 bg-green-400 rounded-full"></span>
+      );
+    case UserStatus.busy:
+      return (
+        <span className="absolute top-0 right-0 w-3 h-3 bg-orange-400 rounded-full"></span>
+      );
+    case UserStatus.offline:
+      return (
+        <span className="absolute top-0 right-0 w-3 h-3 bg-gray-400 rounded-full"></span>
+      );
+    default:
+      return (
+        <span className="absolute top-0 right-0 w-3 h-3 bg-green-400 rounded-full"></span>
+      );
+  }
+}
+
+function renderPulse(status: UserStatus) {
+  switch (status) {
+    case UserStatus.online:
+      return (
+        <IoPulseOutline className="text-green-500 text-2xl animate-pulse mx-2 ml-auto" />
+      );
+    case UserStatus.busy:
+      return (
+        <IoPulseOutline className="text-orange-400 text-2xl animate-pulse mx-2 ml-auto" />
+      );
+    case UserStatus.offline:
+      return (
+        <IoRemoveOutline className="text-gray-400 text-2xl mx-2 ml-auto" />
+      );
+    default:
+      return (
+        <IoPulseOutline className="text-green-400 text-2xl animate-pulse mx-2 ml-auto" />
+      );
+  }
+}
+
+export default function TeamVoiceLine() {
+  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">
+      <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">
+            TEAM
+          </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>
+      </span>
+
+      {/* list of team members */}
+      {testFriends.map((friend, i) => {
+        return (
+          <span
+            key={i}
+            className={
+              "flex w-52 flex-row items-center py-2 px-2 justify-items-start ease-in-out duration-300"
+            }
+          >
+            <span className="relative flex mr-2 shrink-0">
+              <span className="bg-gray-200 bg-opacity-30 rounded-full shadow-md absolute w-full h-full"></span>
+
+              {statusBubble(friend.status)}
+
+              <Image
+                src={
+                  "/avatars/svg/Artboards_Diversity_Avatars_by_Netguru-" +
+                  friend.systemAvatar +
+                  ".svg"
+                }
+                alt="profile"
+                width={50}
+                height={50}
+              />
+            </span>
+
+            <span className="flex flex-col mr-10">
+              <span className="flex flex-row items-center space-x-2">
+                <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>
+              </span>
+
+              <span className={"text-xs span-sans text-gray-400"}>
+                {friend.role}
+              </span>
+            </span>
+
+            {renderPulse(friend.status)}
+          </span>
+        );
+      })}
+    </section>
+  );
+}

pages/index.js

@@ -7,17 +7,31 @@ import {
   FaRocketchat,
   FaAngleRight,
 } from "react-icons/fa";
+import TeamVoiceLine from "../components/demo/TeamVoiceLine";
+import Announcements from "../components/demo/Announcements";
+import Rooms from "../components/demo/Rooms";
 
 import MainLogo from "../components/MainLogo";
+import { Divider } from "antd";
 
 export default function Home() {
   const handleGetDemo = () => {
     window.open("https://calendly.com/usenirvana/30min", "_blank");
   };
 
+  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 (
     <div className="landing-page-bg bg-left-bottom bg-fixed bg-cover bg-no-repeat">
-      <div className="container mx-auto xl:px-52 pb-10">
+      <div className="container mx-auto pb-10">
         {/* header */}
         <div className="flex flex-row py-5 px-5 items-center justify-start mx-auto">
           <MainLogo className="mr-auto text-3xl" />
@@ -28,13 +42,7 @@ export default function Home() {
             <span className="text-gray-500">Features</span>
             <span className="text-gray-500 border-r-2 pr-5">Pricing</span>
             <span className="ml-auto text-gray-500 mr-5">Log In</span>
-            <button
+            {getStartedButton}
-              onClick={handleGetDemo}
-              className="rounded bg-teal-600 p-2 text-white shadow-l flex flex-row items-center space-x-2"
-            >
-              <span>Get Demo</span>
-              <FaAngleRight />
-            </button>
           </span>
         </div>
 
@@ -75,40 +83,90 @@ export default function Home() {
             <button className="rounded text-teal-600 p-2 shadow-l flex flex-row items-center space-x-2">
               <span>Features</span>
             </button>
-            <button
+            {getStartedButton}
-              onClick={handleGetDemo}
-              className="rounded bg-teal-600 p-2 text-white shadow-l flex flex-row items-center space-x-2"
-            >
-              <span>Get Demo</span>
-              <FaAngleRight />
-            </button>
           </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-[20rem] 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-[15rem] 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's distracted world, we mistake software and tools for
+            In today's distracted world, we mistake using 10 software and tools
-            productivity.
+            for productivity.
           </span>
 
           <span className="text-left text-lg text-gray-700">
             At Nirvana, are bringing remote work back to the basics. Voice first
             communication because voice makes us human and less is more. An
-            experience as if your team is right next to me.
+            experience as if your team was right next to you.
           </span>
 
           <></>
         </div>
 
-        <div className="mx-auto flex flex-row items-center max-w-screen-sm rounded-lg bg-gray-200 bg-opacity-25 backdrop-blur-xl mt-[10rem] p-10 pb-20">
+        {/*  voice line concept */}
-          <span className="bg-clip-text text-transparent bg-gradient-to-r from-pink-500 to-violet-500">
+        <div className="mx-auto flex flex-row items-start justify-between mt-[15rem] pb-20">
-            Philosophy
+          <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">
+              Voice Line
+            </span>
+
+            <span className="text-left text-lg text-gray-700">
+              More clear and efficient communication.
+            </span>
+
+            <Divider />
+
+            <span className="text-left text-md text-gray-600 mt-5">
+              No more notifications, clicking, scrolling.
+            </span>
+
+            <span className="text-left text-md text-gray-600 mt-5">
+              Listen to your engineer voice their problem realtime or have an
+              asynchronous conversation.
+            </span>
           </span>
+
+          <TeamVoiceLine />
+
+          <Announcements />
+        </div>
+
+        {/* explaining rooms */}
+        <div className="mx-auto flex flex-row flex-wrap items-start justify-between mt-[15rem]">
+          <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 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">
+            Ready to start working?
+          </span>
+          {getStartedButton}
         </div>
       </div>
     </div>