talksik/nirvana
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

pricing page decent

Browse Source
This commit is contained in:
Arjun Patel
2022-01-26 19:10:38 -08:00
parent dd46f21454
commit 9160c28ea2
3 changed files with 122 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/Layouts/LandingPageLayout.tsx
+7 -5
View File
@@ -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
+1 -1
View File
@@ -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
+114 -7
View File
@@ -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>
<div className="flex flex-row">
<span className="flex flex-col items-start">
<span>Your WFH Hub</span>
<span>Actively working on new and exciting features.</span>
<LandingPageLayout>
<div className="flex flex-col items-center backdrop-blur-md p-10 my-36">
<span>PRICING</span>
<span className="text-5xl font-bold">Get Started Now,</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>
);
}