pricing page decent

components/Layouts/LandingPageLayout.tsx

@@ -6,7 +6,7 @@ import { useAuth } from "../../contexts/authContext";
 import MainLogo from "../MainLogo";
 
 enum LandingPageNavigation {
-  home = "/",
+  product = "/",
   features = "/features",
   pricing = "/pricing",
   philosophy = "/philosophy",
@@ -41,20 +41,22 @@ export default function LangingPageLayout({ children }) {
 
   return (
     <div className="landing-page-bg bg-left-bottom bg-fixed bg-cover bg-no-repeat min-h-screen">
-      <div className="container mx-auto md:pb-10 px-5 lg:px-20">
+      <div className="container mx-auto px-5 lg:px-20 ">
         {/* header */}
         <div className="flex flex-row py-5 px-5 items-center justify-start mx-auto">
           <MainLogo className="mr-auto text-3xl" />
           <span className="flex flex-row space-x-5 items-center">
             <span
-              onClick={() => window.open(LandingPageNavigation.home, "_self")}
+              onClick={() =>
+                window.open(LandingPageNavigation.product, "_self")
+              }
               className={`text-gray-500 hover:text-teal-600 hover:cursor-pointer ${
-                currPage == LandingPageNavigation.home
+                currPage == LandingPageNavigation.product
                   ? "text-teal-600 underline underline-offset-4"
                   : ""
               }`}
             >
-              Home
+              Product
             </span>
 
             <a

pages/index.js

@@ -109,7 +109,7 @@ export default function Home() {
       <span className="flex w-full justify-evenly">
         <img
           src="/screenshots/frame_safari_dark.png"
-          className="h-[80rem] w-[85rem]"
+          className="h-[80rem] w-[85rem] shrink-0"
         />
       </span>
 

pages/pricing.tsx

@@ -1,14 +1,121 @@
-import LangingPageLayout from "../components/Layouts/LandingPageLayout";
+import { Divider } from "antd";
+import Link from "next/link";
+import {
+  FaAngleRight,
+  FaArrowRight,
+  FaMoneyBill,
+  FaPhone,
+} from "react-icons/fa";
+import LandingPageLayout from "../components/Layouts/LandingPageLayout";
 
 export default function Pricing() {
   return (
-    <LangingPageLayout>
+    <LandingPageLayout>
-      <div className="flex flex-row">
+      <div className="flex flex-col items-center backdrop-blur-md p-10 my-36">
-        <span className="flex flex-col items-start">
+        <span>PRICING</span>
-          <span>Your WFH Hub</span>
+        <span className="text-5xl font-bold">Get Started Now,</span>
-          <span>Actively working on new and exciting features.</span>
+        <span className="text-5xl font-bold text-left text-teal-600 mb-2">
+          Pay for Spots Later.
+        </span>
+        <span className="text-gray-500 mb-2">
+          Hit the ground running with{" "}
+          <span className="text-teal-600">2 free spots</span> on sign up.
+        </span>
+
+        <span className="p-2 rounded-lg font-bold text-left text-sm bg-purple-200 text-purple-700">
+          No credit card required
+        </span>
+
+        <span className="flex flex-row items-center space-x-2 mt-10">
+          <Link href="/features">Features</Link>
+
+          <button
+            onClick={() => window.open("/teams/login", "_self")}
+            className="rounded font-semibold bg-teal-600 p-2 text-white shadow-lg flex flex-row items-center justify-evenly space-x-2"
+          >
+            <span>Get Started</span>
+            <FaAngleRight />
+          </button>
         </span>
       </div>
-    </LangingPageLayout>
+
+      <span className="flex flex-row justify-center space-x-5">
+        {/* lite pricing */}
+        <span className="flex flex-col items-start bg-white bg-opacity-40 p-10 max-w-sm rounded backdrop-blur-md w-[22rem] shadow-lg">
+          <span className="flex flex-row items-center justify-between w-full">
+            <span className="text-3xl font-bold">Lite</span>
+            <span className="p-2 rounded-lg font-bold text-left text-sm bg-green-200 text-green-700">
+              FREE
+            </span>
+          </span>
+
+          <span className="text-gray-500">Hit the ground running.</span>
+
+          <button
+            onClick={() => window.open("/teams/login", "_self")}
+            className="mt-10 mx-auto rounded font-semibold my-2 p-2 bg-gray-200 text-teal-600 shadow-lg flex flex-row items-center justify-evenly space-x-2"
+          >
+            <span>Get Started</span>
+            <FaAngleRight />
+          </button>
+          <span className="text-gray-500 text-sm text-center w-full">
+            Valid for 30 days.
+          </span>
+        </span>
+
+        {/* startups pricing */}
+        <span className="z-10 flex flex-col items-start bg-white bg-opacity-60 p-10 max-w-sm rounded backdrop-blur-md w-[22rem] scale-125 shadow-lg">
+          <span className="flex flex-row items-center justify-between w-full">
+            <span className="text-3xl font-bold">Startups</span>
+            <span className="p-2 rounded-lg font-bold text-left text-sm bg-sky-200 text-sky-700">
+              POPULAR
+            </span>
+          </span>
+
+          <span className="text-gray-500">
+            Pay per spot per month based on your needs.
+          </span>
+
+          <button
+            onClick={() =>
+              window.open("https://calendly.com/usenirvana/30min", "_blank")
+            }
+            className="mx-auto mt-10 rounded font-semibold my-2 bg-teal-600 p-2 text-white shadow-lg flex flex-row items-center justify-evenly space-x-2"
+          >
+            <FaPhone />
+            <span>Contact Sales</span>
+          </button>
+          <span className="text-gray-500 text-sm text-center w-full mx-auto">
+            <FaMoneyBill className="inline text-xl text-emerald-500" /> 30 day
+            money back guarantee.
+          </span>
+        </span>
+
+        {/* business pricing */}
+        <span className="flex flex-col items-start bg-white bg-opacity-40 p-10 max-w-sm rounded backdrop-blur-md w-[22rem] shadow-lg">
+          <span className="flex flex-row items-center justify-between w-full">
+            <span className="text-3xl font-bold">Business</span>
+          </span>
+
+          <span className="text-gray-500">
+            Pay for enterprise-level features for your large-scale organization.
+          </span>
+
+          <button
+            onClick={() =>
+              window.open("https://calendly.com/usenirvana/30min", "_blank")
+            }
+            className="mx-auto mt-10 rounded font-semibold my-2 p-2 bg-gray-200 text-teal-600 shadow-lg flex flex-row items-center justify-evenly space-x-2"
+          >
+            <FaPhone />
+            <span>Contact Sales</span>
+          </button>
+          <span className="text-gray-500 text-sm text-center w-full mx-auto">
+            <FaMoneyBill className="inline text-xl text-emerald-500" /> 30 day
+            money back guarantee.
+          </span>
+        </span>
+      </span>
+    </LandingPageLayout>
   );
 }