done with simple landing page

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
-              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>
+            {getStartedButton}
           </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
-              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>
+            {getStartedButton}
           </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
-            productivity.
+            In today's distracted world, we mistake using 10 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.
+            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">
-          <span className="bg-clip-text text-transparent bg-gradient-to-r from-pink-500 to-violet-500">
-            Philosophy
+        {/*  voice line concept */}
+        <div className="mx-auto flex flex-row items-start justify-between mt-[15rem] pb-20">
+          <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>