adding philosophy and stuff

pages/index.js

@@ -4,15 +4,20 @@ import {
   FaSlackHash,
   FaNewspaper,
   FaCalendarAlt,
-  FaThList,
+  FaRocketchat,
+  FaAngleRight,
 } from "react-icons/fa";
 
 import MainLogo from "../components/MainLogo";
 
 export default function Home() {
+  const handleGetDemo = () => {
+    window.open("https://calendly.com/usenirvana/30min", "_blank");
+  };
+
   return (
-    <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">
+    <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">
         {/* header */}
         <div className="flex flex-row py-5 px-5 items-center justify-start mx-auto">
           <MainLogo className="mr-auto text-3xl" />
@@ -20,21 +25,25 @@ export default function Home() {
             <span className="font-bold underline decoration-slate-400 underline-offset-4">
               Home
             </span>
-            <span className="text-gray-300">Features</span>
-            <span className="text-gray-300 border-r-2 pr-5">Pricing</span>
-            <span className="ml-auto text-gray-300 mr-5">Log In</span>
-            <button className="rounded bg-teal-600 p-2 text-white shadow-lg">
-              Get Demo
+            <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
+              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>
 
-        <div className="flex flex-col justify-start items-baseline md:mt-20 container">
+        <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 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>
+                <FaRocketchat /> <span>threads</span>
               </span>
               <span className="flex flex-row space-x-2">
                 <FaSlackHash /> <span>slacking</span>
@@ -46,7 +55,7 @@ export default function Home() {
                 <FaNewspaper /> <span>files</span>
               </span>
               <span className="flex flex-row space-x-2">
-                <FaThList /> <span>threads</span>
+                <FaRocketchat /> <span>threads</span>
               </span>
             </span>
           </span>
@@ -55,6 +64,51 @@ export default function Home() {
             <span className="font-semibold text-black">More</span>
             <span className="text-sky-600 font-bold">work.</span>
           </span>
+
+          <span className="my-10 text-xl max-w-xl text-gray-600">
+            Minimal collaboration tool for scrum/agile teams. Wasting 80% of
+            your work day on slack, teams, gmail, calendars, chats, emojis,
+            notifications?
+          </span>
+
+          <span className="flex flex-row space-x-2">
+            <button className="rounded text-teal-600 p-2 shadow-l flex flex-row items-center space-x-2">
+              <span>Features</span>
+            </button>
+            <button
+              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">
+          <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
+            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.
+          </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">
+          <span className="bg-clip-text text-transparent bg-gradient-to-r from-pink-500 to-violet-500">
+            Philosophy
+          </span>
         </div>
       </div>
     </div>

styles/globals.css

@@ -137,16 +137,13 @@ p {
 
 .landing-page-bg {
   background-image: url("/wallpapers/glassmorphic.jpg");
-  background-size: 150% 150%;
-  background-repeat: no-repeat;
+  /* background-size: 150% 150%;
+  background-repeat: no-repeat; */
 }
 
 .flippingWords {
   animation: spin_words 6s infinite;
 }
-.flippingWordsSecond {
-  /* animation: spin_words 6s infinite; */
-}
 
 @keyframes spin_words {
   10% {