adding basics for the landing page

contexts/keyboardContext.tsx

@@ -227,6 +227,7 @@ export default function KeyboardContextProvider({ children }) {
 
   // first load just force check if permissions enabled
   // through fake stream
+  // todo: only call this when starting to record and do it with a usecallback
   useEffect(() => {
     try {
       // won't work in https!!!

pages/index.js

@@ -1,12 +1,18 @@
 import Head from "next/head";
 import Image from "next/image";
+import {
+  FaSlackHash,
+  FaNewspaper,
+  FaCalendarAlt,
+  FaThList,
+} from "react-icons/fa";
 
 import MainLogo from "../components/MainLogo";
 
 export default function Home() {
   return (
-    <div className="landing-page-bg h-screen w-screen bg-left bg-cover">
-      <div className="container mx-auto ">
+    <div className="landing-page-bg h-screen w-screen bg-left-bottom bg-fixed">
+      <div className="container mx-auto backdrop-blur-sm xl:px-52">
         {/* header */}
         <div className="flex flex-row py-5 px-5 items-center justify-start mx-auto">
           <MainLogo className="mr-auto text-3xl" />
@@ -23,9 +29,31 @@ export default function Home() {
           </span>
         </div>
 
-        <div className="flex flex-col justify-start p-10">
-          <span className="text-5xl text-slate-600 font-semibold">
-            No more slacking
+        <div className="flex flex-col justify-start items-baseline md:mt-20 container">
+          <span className="flex flex-row text-left text-6xl space-x-5 h-[5rem] overflow-hidden">
+            <span className="font-semibold text-black py-4">Less</span>
+            <span className="flippingWords flex flex-col space-y-5 text-red-600 ">
+              <span className="flex flex-row space-x-2">
+                <FaThList /> <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">
+                <FaThList /> <span>threads</span>
+              </span>
+            </span>
+          </span>
+
+          <span className="flex flex-row text-left text-6xl space-x-5">
+            <span className="font-semibold text-black">More</span>
+            <span className="text-sky-600 font-bold">work.</span>
           </span>
         </div>
       </div>

styles/globals.css

@@ -137,8 +137,40 @@ p {
 
 .landing-page-bg {
   background-image: url("/wallpapers/glassmorphic.jpg");
+  background-size: 150% 150%;
+  background-repeat: no-repeat;
 }
 
-/* body {
-  background-image: url("/wallpapers/glassmorphic.jpg");
-} */
+.flippingWords {
+  animation: spin_words 6s infinite;
+}
+.flippingWordsSecond {
+  /* animation: spin_words 6s infinite; */
+}
+
+@keyframes spin_words {
+  10% {
+    transform: translateY(-95%);
+  }
+  25% {
+    transform: translateY(-85%);
+  }
+  35% {
+    transform: translateY(-195%);
+  }
+  50% {
+    transform: translateY(-185%);
+  }
+  60% {
+    transform: translateY(-295%);
+  }
+  75% {
+    transform: translateY(-285%);
+  }
+  85% {
+    transform: translateY(-395%);
+  }
+  100% {
+    transform: translateY(-385%);
+  }
+}