adding in the landing page action bar

components/demo/LandingPageActionBar.tsx

@@ -0,0 +1,25 @@
+import Link from "next/link";
+import { FaAngleRight } from "react-icons/fa";
+
+export default function LandingPageActionBar() {
+  return (
+    <span className="flex my-20 mx-auto flex-row items-center max-w-screen-md p-10 backdrop-blur-md bg-gray-200 bg-opacity-40 rounded-lg">
+      <span className="flex flex-col items-start text-3xl font-bold">
+        <span>Ready to Focus?</span>
+        <span className="text-teal-600">{"It's now or never."}</span>
+      </span>
+
+      <span className="flex flex-row items-center space-x-5 ml-auto">
+        <Link href="/features">Features</Link>
+
+        <button
+          onClick={() => window.open("/teams/login", "_blank")}
+          className="rounded font-semibold bg-teal-600 p-2 text-white shadow-lg flex flex-row items-center space-x-2"
+        >
+          <span>Get Started</span>
+          <FaAngleRight />
+        </button>
+      </span>
+    </span>
+  );
+}

pages/features.tsx

@@ -8,6 +8,7 @@ import {
   FcOrgUnit,
   FcVideoCall,
 } from "react-icons/fc";
+import LandingPageActionBar from "../components/demo/LandingPageActionBar";
 
 export default function Features() {
   return (
@@ -93,6 +94,8 @@ export default function Features() {
           </span>
         </span>
       </span>
+
+      <LandingPageActionBar />
     </LangingPageLayout>
   );
 }

pages/index.js

@@ -27,6 +27,7 @@ import { useState } from "react";
 import SkeletonLoader from "../components/Loading/skeletonLoader";
 import { useAuth } from "../contexts/authContext";
 import LangingPageLayout from "../components/Layouts/LandingPageLayout";
+import LandingPageActionBar from "../components/demo/LandingPageActionBar";
 import Link from "next/link";
 
 export default function Home() {
@@ -55,7 +56,8 @@ export default function Home() {
           </span>
 
           <span className="text-5xl font-bold text-left">
-            <span className="text-red-800">Messy, Distracted</span> WFH Teams.
+            <span className="text-red-800">Messy, Distracted</span> Remote
+            Teams.
           </span>
         </span>
 
@@ -362,14 +364,7 @@ export default function Home() {
       </span>
 
       {/* action section to get started now */}
-      <span className="flex my-20 mx-auto flex-row items-center max-w-screen-md p-10 backdrop-blur-md bg-gray-200 bg-opacity-40 rounded-lg">
-        <span className="flex flex-col items-start text-3xl font-bold">
-          <span>Ready to Focus?</span>
-          <span className="text-teal-600">{"It's now or never."}</span>
-        </span>
-
-        <span className="ml-auto">{getStartedButton}</span>
-      </span>
+      <LandingPageActionBar />
 
       {/* customer testimonial section */}
       <span className="flex my-20 mx-auto flex-col items-center max-w-screen-lg p-10 backdrop-blur-md bg-gray-200 bg-opacity-40 rounded-lg">

pages/philosophy.tsx

@@ -2,6 +2,7 @@ import { Divider } from "antd";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { FaAngleRight } from "react-icons/fa";
+import LandingPageActionBar from "../components/demo/LandingPageActionBar";
 import Rooms from "../components/demo/Rooms";
 import LangingPageLayout from "../components/Layouts/LandingPageLayout";
 
@@ -21,6 +22,7 @@ export default function Philosophy() {
       <FaAngleRight />
     </button>
   );
+
   return (
     <LangingPageLayout>
       <span className="flex flex-col my-20 items-center">
@@ -60,23 +62,10 @@ export default function Philosophy() {
             focus, performance, and wellbeing.
           </span>
         </span>
-
-        <></>
       </div>
 
       {/* action section to get started now */}
-      <span className="flex my-20 mx-auto flex-row items-center max-w-screen-md p-10 backdrop-blur-md bg-gray-200 bg-opacity-40 rounded-lg">
-        <span className="flex flex-col items-start text-3xl font-bold">
-          <span>Ready to Focus?</span>
-          <span className="text-teal-600">{"It's now or never."}</span>
-        </span>
-
-        <span className="flex flex-row items-center space-x-5 ml-auto">
-          <Link href="/features">Features</Link>
-
-          {getStartedButton}
-        </span>
-      </span>
+      <LandingPageActionBar />
     </LangingPageLayout>
   );
 }

pages/pricing.tsx

@@ -6,6 +6,7 @@ import {
   FaMoneyBill,
   FaPhone,
 } from "react-icons/fa";
+import LandingPageActionBar from "../components/demo/LandingPageActionBar";
 import LandingPageLayout from "../components/Layouts/LandingPageLayout";
 
 export default function Pricing() {
@@ -118,6 +119,8 @@ export default function Pricing() {
           </span>
         </span>
       </span>
+
+      <LandingPageActionBar />
     </LandingPageLayout>
   );
 }