more adjustments all around

components/demo/Announcements.tsx

@@ -37,7 +37,7 @@ export default function Announcements(props: IVoiceDemoProps) {
 
   return (
     <section
-      className={`p-5 flex flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-md -translate-x-20 backdrop-blur-xl ${
+      className={`p-5 flex flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-md absolute right-0 backdrop-blur-xl ${
         isAnnouncementsTurn ? " z-20 " : "blur-sm"
       }`}
     >

components/demo/TeamVoiceLine.tsx

@@ -144,7 +144,7 @@ function TeamVoiceLine(props: IVoiceDemoProps) {
 
   return (
     <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 transition-all duration-300 ${
+      className={`p-5 flex w-80 flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-2xl absolute top-32 left-10 z-10 backdrop-blur-xl transition-all duration-300 ${
         !isVoiceLineTurn ? "blur-sm" : ""
       } ${props.demoStep == DemoStep.doneDemo ? "z-30" : ""}`}
     >

pages/index.js

@@ -15,6 +15,8 @@ import VoiceLineConceptDemo from "../components/demo/VoiceLineConceptDemo";
 import MainLogo from "../components/MainLogo";
 import { Divider } from "antd";
 import { useRouter } from "next/router";
+import { useState } from "react";
+import SkeletonLoader from "../components/Loading/skeletonLoader";
 
 export default function Home() {
   const handleGetDemo = () => {
@@ -23,6 +25,8 @@ export default function Home() {
 
   const router = useRouter();
 
+  const [loading, setLoading] = useState(false);
+
   const getStartedButton = (
     <button
       onClick={handleGetDemo}
@@ -33,6 +37,15 @@ export default function Home() {
     </button>
   );
 
+  if (loading) {
+    return <SkeletonLoader />;
+  }
+
+  function handleLogin() {
+    setLoading(true);
+    router.push("/teams");
+  }
+
   return (
     <div className="landing-page-bg bg-left-bottom bg-fixed bg-cover bg-no-repeat">
       <div className="container mx-auto md:pb-10 px-5">
@@ -47,8 +60,8 @@ export default function Home() {
               Philosophy
             </span> */}
             <button
-              onClick={() => router.push("/teams")}
+              onClick={handleLogin}
-              className="ml-auto text-gray-500 mr-2"
+              className="ml-auto text-gray-500 mr-2 hidden md:block"
             >
               Log In
             </button>
@@ -60,7 +73,7 @@ export default function Home() {
         {/* above fold main */}
         <div className="flex flex-row flex-wrap md:flex-nowrap 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="flex flex-row text-left md:text-6xl text-5xl 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>
@@ -84,29 +97,34 @@ export default function Home() {
               </span>
             </span>
 
-            <span className="flex flex-row text-left md:text-6xl text-3xl space-x-5">
+            <span className="flex flex-row text-left md:text-6xl text-5xl 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">
+            <span className="my-10 text-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
+              <button
-                href="mailto:[email protected]?subject=Interested in Nirvana for Startups"
+                onClick={() =>
+                  window.open(
+                    "mailto:[email protected]?subject=Interested in Nirvana for Startups",
+                    "_blank"
+                  )
+                }
                 className="rounded text-teal-600 p-2 shadow-l flex flex-row items-center space-x-2"
               >
                 Email Us
-              </a>
+              </button>
               {getStartedButton}
             </span>
           </span>
 
-          <span className="flex flex-row relative items-baseline">
+          <span className="flex flex-row relative items-baseline flex-1 md:block hidden">
             <VoiceLineConceptDemo />
           </span>
         </div>