adding new landing page blank starting clean
This commit is contained in:
talksik
@@ -0,0 +1,95 @@
|
||||
import LangingPageLayout from "../../components/Layouts/LandingPageLayout";
|
||||
import {
|
||||
FcAssistant,
|
||||
FcCollaboration,
|
||||
FcFilingCabinet,
|
||||
FcGoogle,
|
||||
FcLandscape,
|
||||
FcOrgUnit,
|
||||
FcVideoCall,
|
||||
} from "react-icons/fc";
|
||||
import LandingPageActionBar from "../../components/demo/LandingPageActionBar";
|
||||
|
||||
export default function Features() {
|
||||
return (
|
||||
<LangingPageLayout>
|
||||
<span className="flex flex-col my-20 items-center text-center">
|
||||
<span>FEATURES</span>
|
||||
<span className="text-5xl font-bold">
|
||||
Your WFH <span className="text-teal-600">Hub</span>
|
||||
</span>
|
||||
<span className="text-gray-500 text-lg">
|
||||
Come to work with clarity of mind.
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className="flex flex-row mb-2 flex-wrap gap-2 justify-center">
|
||||
<span className="flex flex-col items-start bg-white bg-opacity-40 p-10 max-w-sm rounded backdrop-blur-md">
|
||||
<FcAssistant className="text-5xl -ml-2" />
|
||||
<span className="text-teal-600">async</span>
|
||||
<span className="text-lg font-semibold">Voice Conversations.</span>
|
||||
|
||||
<span className="text-md text-gray-500">
|
||||
Listen to your teammate talk to you realtime if you are online.
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className="flex flex-col items-start bg-white bg-opacity-40 p-10 max-w-sm rounded backdrop-blur-md">
|
||||
<FcCollaboration className="text-5xl" />
|
||||
<span className="text-teal-600">informal</span>
|
||||
<span className="text-lg font-semibold">Office Rooms.</span>
|
||||
|
||||
<span className="text-md text-gray-500">
|
||||
Nirvana voice-only rooms to collaborate and work with your closest
|
||||
teammates throughout the day.
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className="flex flex-col items-start bg-white bg-opacity-40 p-10 max-w-sm rounded backdrop-blur-md">
|
||||
<FcVideoCall className="text-5xl" />
|
||||
<span className="text-teal-600">formal</span>
|
||||
<span className="text-lg font-semibold">Meeting Rooms.</span>
|
||||
|
||||
<span className="text-md text-gray-500">
|
||||
Spontaneous, scheduled, or recurring <FcGoogle className="inline" />{" "}
|
||||
Meet meetings. All conversations transparent for the team to see.
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className="flex flex-col items-start bg-white bg-opacity-40 p-10 max-w-sm rounded backdrop-blur-md">
|
||||
<FcFilingCabinet className="text-5xl -ml-2" />
|
||||
<span className="text-teal-600">desk</span>
|
||||
<span className="text-lg font-semibold">Drawer.</span>
|
||||
|
||||
<span className="text-md text-gray-500">
|
||||
Personal and team drawer of links: Jira, Drive, Dropbox, Github,
|
||||
screenshots, code snippets.
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className="flex flex-col items-start bg-white bg-opacity-40 p-10 max-w-sm rounded backdrop-blur-md">
|
||||
<FcOrgUnit className="text-5xl -ml-2" />
|
||||
<span className="text-teal-600">team</span>
|
||||
<span className="text-lg font-semibold">Announcements.</span>
|
||||
|
||||
<span className="text-md text-gray-500">
|
||||
Keep your team focused. Mention blockers, priorities, updates...
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className="flex flex-col items-start bg-white bg-opacity-40 p-10 max-w-sm rounded backdrop-blur-md">
|
||||
<FcLandscape className="text-5xl" />
|
||||
<span className="text-teal-600">ephemeral</span>
|
||||
<span className="text-lg font-semibold">Inbox Zero.</span>
|
||||
|
||||
<span className="text-md text-gray-500">
|
||||
Links, conversations, rooms...They all disappear from your main view
|
||||
to keep you and your team focused.
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<LandingPageActionBar />
|
||||
</LangingPageLayout>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,399 @@
|
||||
import Head from "next/head";
|
||||
import {
|
||||
FaSlackHash,
|
||||
FaNewspaper,
|
||||
FaCalendarAlt,
|
||||
FaRocketchat,
|
||||
FaAngleRight,
|
||||
FaCheck,
|
||||
FaInfo,
|
||||
FaInfoCircle,
|
||||
FaClock,
|
||||
FaLink,
|
||||
FaPlay,
|
||||
} from "react-icons/fa";
|
||||
import { FcGoogle } from "react-icons/fc";
|
||||
import { BsThreeDots } from "react-icons/bs";
|
||||
import TeamVoiceLine from "../../components/demo/TeamVoiceLine";
|
||||
import Announcements from "../../components/demo/Announcements";
|
||||
import Rooms from "../../components/demo/Rooms";
|
||||
import VoiceLineConceptDemo from "../../components/demo/VoiceLineConceptDemo";
|
||||
|
||||
import MainLogo from "../../components/Logo/MainLogo";
|
||||
import { Divider, Tooltip, Image as AntDImage } from "antd";
|
||||
import LangingPageLayout from "../../components/Layouts/LandingPageLayout";
|
||||
import LandingPageActionBar from "../../components/demo/LandingPageActionBar";
|
||||
import Link from "next/link";
|
||||
|
||||
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 (
|
||||
<LangingPageLayout>
|
||||
{/* header text */}
|
||||
<div className="flex flex-col items-center backdrop-blur-lg p-10">
|
||||
<span className="flex flex-col items-center text-center text-3xl md:text-5xl font-bold ">
|
||||
<span>
|
||||
<span className="text-teal-800">Minimal </span>
|
||||
Communication Tool for
|
||||
</span>
|
||||
|
||||
<span className="">
|
||||
<span className="text-red-800">Messy, Distracted</span> Remote
|
||||
Teams.
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className="my-5 text-lg md:text-xl text-center text-black font-semibold w-max">
|
||||
A <span className="text-teal-600">'less is more'</span>{" "}
|
||||
approach.
|
||||
<br></br>
|
||||
Skip{" "}
|
||||
<img
|
||||
src="/icons/zoom-logo.svg"
|
||||
className="w-[4rem] inline-block h-[2rem] px-1"
|
||||
/>{" "}
|
||||
scheduling, <br className="md:hidden"></br>
|
||||
<img
|
||||
src="/icons/slack-logo.svg"
|
||||
className="inline-block w-[5rem] h-[2rem] px-1"
|
||||
/>{" "}
|
||||
notifications, <br className="md:hidden"></br> and{" "}
|
||||
<img
|
||||
src="/icons/gmail-logo.svg"
|
||||
className="inline-block w-[2rem] h-[1rem]"
|
||||
/>{" "}
|
||||
threads,
|
||||
<br></br>
|
||||
and just talk to your team.
|
||||
<br></br>
|
||||
{/* Improve team focus, performance, and wellbeing. */}
|
||||
</span>
|
||||
|
||||
<span className="flex flex-row items-center space-x-5 my-5">
|
||||
<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>
|
||||
|
||||
<span className="text-center text-xs text-gray-500">
|
||||
Try Nirvana for 2 people for 30 days. <br></br>No credit card
|
||||
required.
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* main above fold product image */}
|
||||
<span className="md:flex w-full justify-evenly hidden">
|
||||
<img
|
||||
onClick={() => window.open("/teams/demo", "_blank")}
|
||||
src="/screenshots/frame_safari_dark.png"
|
||||
className="flex-1 min-h-[20rem] min-w-[30rem]"
|
||||
/>
|
||||
</span>
|
||||
{/* image for mobile, just barely see it kind of thing */}
|
||||
<span className="md:hidden">
|
||||
<AntDImage width={800} src="/screenshots/frame_safari_dark.png" />
|
||||
</span>
|
||||
|
||||
{/* voice line section */}
|
||||
<span className="flex flex-row md:py-32 py-10 flex-wrap">
|
||||
<span className="mx-auto flex flex-col grow max-w-sm rounded-lg shadow-lg bg-gray-200 bg-opacity-40 backdrop-blur-xl p-10">
|
||||
<span className="bg-clip-text font-bold text-transparent bg-gradient-to-r from-pink-500 to-violet-500">
|
||||
VOICE ONLY
|
||||
</span>
|
||||
|
||||
<span className="text-left text-3xl text-gray-700 font-bold">
|
||||
Move 10x <span className="text-teal-600">Faster.</span>
|
||||
</span>
|
||||
<span className="text-sm text-gray-500">
|
||||
{"Resolve issues faster, and improve performance."}
|
||||
</span>
|
||||
|
||||
<span className="text-left text-lg text-gray-700"></span>
|
||||
|
||||
<Divider />
|
||||
|
||||
{/* checkmarks of value add */}
|
||||
<span className="flex flex-row items-center space-x-2">
|
||||
<FaCheck className="text-teal-500" />
|
||||
<span className="text-left text-lg text-gray-600">
|
||||
{"Asynchronous."}
|
||||
</span>
|
||||
<Tooltip
|
||||
title={
|
||||
"If you send a voice clip to someone, and they are online, they hear you instantly without changing tabs/windows."
|
||||
}
|
||||
>
|
||||
<FaInfoCircle className="text-lg text-teal-500 animate-bounce" />
|
||||
</Tooltip>
|
||||
</span>
|
||||
|
||||
<span className="flex flex-row items-center space-x-2">
|
||||
<FaCheck className="text-teal-500" />
|
||||
<span className="text-left text-lg text-gray-600">
|
||||
{"NO low-quality chatter."}
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className="flex flex-row items-baseline space-x-2">
|
||||
<FaCheck className="text-teal-500 text-md shrink-0" />
|
||||
|
||||
<span className="flex flex-col">
|
||||
<span className="flex flex-row items-center space-x-2">
|
||||
<span className="text-left text-lg text-gray-600">
|
||||
{"Clear Communication."}
|
||||
</span>
|
||||
</span>
|
||||
<span className="text-sm text-gray-500">
|
||||
{/* {"Resolve issues faster, and improve performance."} */}
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<Divider />
|
||||
|
||||
<span className="text-left text-md text-gray-600">
|
||||
{
|
||||
"An experience as if your team was across the table. And it's still"
|
||||
}
|
||||
<span className="text-teal-600"> asynchronous.</span>
|
||||
</span>
|
||||
<br></br>
|
||||
<span className="text-left text-md text-gray-600">
|
||||
No more days of{" "}
|
||||
<span className="text-orange-500">back and forth texting</span> for
|
||||
complex, technical issues.
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className="flex-row justify-end relative items-baseline flex-1 md:flex hidden">
|
||||
<VoiceLineConceptDemo />
|
||||
</span>
|
||||
</span>
|
||||
|
||||
{/* bond/team/collaborate section */}
|
||||
<span className="flex flex-row items-center md:py-20 flex-wrap">
|
||||
<span className="flex-1 flex flex-row flex-wrap backdrop-blur-md p-10 rounded">
|
||||
{/* illustration of collaborating */}
|
||||
<img
|
||||
src="/illustrations/undraw_team_collaboration_re_ow29.svg"
|
||||
className="min-h-[20rem] min-w-[20rem] shrink-0"
|
||||
/>
|
||||
</span>
|
||||
|
||||
{/* description text */}
|
||||
<span className="mx-auto text-left flex flex-col grow max-w-lg shadow-lg rounded-lg bg-gray-200 bg-opacity-40 backdrop-blur-xl p-10">
|
||||
<span className="bg-clip-text font-bold text-transparent bg-gradient-to-r from-pink-500 to-violet-500">
|
||||
TEAM
|
||||
</span>
|
||||
<span className="text-3xl text-gray-700 font-bold">
|
||||
Bond & Collaborate{" "}
|
||||
<span className="text-teal-600">Seamlessly.</span>
|
||||
</span>
|
||||
<span className="text-lg text-gray-700"></span>
|
||||
<Divider />
|
||||
{/* checkmarks of value add */}
|
||||
<span className="flex flex-row items-baseline space-x-2">
|
||||
<FaCheck className="text-teal-500 text-md shrink-0" />
|
||||
|
||||
<span className="flex flex-col">
|
||||
<span className="flex flex-row items-center space-x-2">
|
||||
<span className="text-left text-lg text-gray-600">
|
||||
{"Spontaneous Conversations."}
|
||||
</span>
|
||||
</span>
|
||||
<span className="text-sm text-gray-500">
|
||||
{"No more 'let's find a time to discuss...'"}
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className="flex flex-row items-baseline space-x-2">
|
||||
<FaCheck className="text-teal-500 text-md shrink-0" />
|
||||
|
||||
<span className="flex flex-col">
|
||||
<span className="flex flex-row items-center space-x-2">
|
||||
<span className="text-left text-lg text-gray-600">
|
||||
{"Cross Collaborate."}
|
||||
</span>
|
||||
</span>
|
||||
<span className="text-sm text-gray-500">
|
||||
{"Glance all of the conversations going on in your team."}
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<Divider />
|
||||
|
||||
<span className="text-md text-gray-600">
|
||||
Work in the{" "}
|
||||
<Tooltip
|
||||
title={
|
||||
"Nirvana voice-only rooms to hang out and code, create, ideate..."
|
||||
}
|
||||
>
|
||||
<span className="text-teal-600">
|
||||
'corner' office room
|
||||
</span>{" "}
|
||||
<FaInfoCircle className="text-sm text-teal-500 inline animate-bounce" />
|
||||
</Tooltip>{" "}
|
||||
with your closest teammates throughout the day.
|
||||
</span>
|
||||
<span className="text-md text-gray-600">
|
||||
Have lunch in the 'kitchen' with your team.
|
||||
</span>
|
||||
<span className="text-md text-gray-600">
|
||||
Connect in seconds, resolve matters in minutes.
|
||||
</span>
|
||||
|
||||
<br></br>
|
||||
<span className="text-center">or</span>
|
||||
<br></br>
|
||||
<span className="text-md text-gray-600">
|
||||
Create more formal meeting rooms (
|
||||
<FcGoogle className="inline" /> Meet).
|
||||
<span className="text-teal-600">
|
||||
{" "}
|
||||
Spontaneous, scheduled, or recurring.
|
||||
</span>{" "}
|
||||
All within Nirvana.
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
{/* focus on today section */}
|
||||
<span className="flex flex-row items-center md:py-20 py-10 flex-wrap">
|
||||
{/* description card */}
|
||||
<span className="mx-auto text-left flex flex-col grow max-w-lg shadow-lg rounded-lg bg-gray-200 bg-opacity-40 backdrop-blur-xl p-10">
|
||||
<span className="bg-clip-text font-bold text-transparent bg-gradient-to-r from-pink-500 to-violet-500">
|
||||
CLARITY
|
||||
</span>
|
||||
<span className="text-3xl text-gray-700 font-bold">
|
||||
Focus on <span className="text-teal-600">Right Now.</span>
|
||||
</span>
|
||||
<span className="text-lg text-gray-700"></span>
|
||||
|
||||
<Divider />
|
||||
|
||||
{/* checkmarks of value add */}
|
||||
|
||||
<span className="flex flex-row items-baseline space-x-2">
|
||||
<FaCheck className="text-teal-500 text-md shrink-0" />
|
||||
|
||||
<span className="flex flex-col">
|
||||
<span className="flex flex-row items-center space-x-2">
|
||||
<span className="text-left text-lg text-gray-600">
|
||||
{"Overall Wellbeing."}
|
||||
</span>
|
||||
</span>
|
||||
<span className="text-sm text-gray-500"></span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className="flex flex-row items-baseline space-x-2">
|
||||
<FaCheck className="text-teal-500 text-md shrink-0" />
|
||||
|
||||
<span className="flex flex-col">
|
||||
<span className="flex flex-row items-center space-x-2">
|
||||
<span className="text-left text-lg text-gray-600">
|
||||
{"Clarity of Mind."}
|
||||
</span>
|
||||
</span>
|
||||
<span className="text-sm text-gray-500">
|
||||
{"Come to work seeing only what's important today/this week."}
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className="flex flex-row items-baseline space-x-2">
|
||||
<FaCheck className="text-teal-500 text-md shrink-0" />
|
||||
|
||||
<span className="flex flex-col">
|
||||
<span className="flex flex-row items-center space-x-2">
|
||||
<span className="text-left text-lg text-gray-600">
|
||||
{"Inbox Zero."}
|
||||
</span>
|
||||
</span>
|
||||
<span className="text-sm text-gray-500">
|
||||
{
|
||||
"Conversations are ephemeral like in real life. We keep you at inbox zero."
|
||||
}
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<Divider />
|
||||
|
||||
<span className="text-md text-gray-600">
|
||||
Your <span className="text-orange-500">current tools</span> bombard
|
||||
you with files, notifications, scrolling, clicking, emojis,
|
||||
threads...
|
||||
</span>
|
||||
|
||||
<br></br>
|
||||
|
||||
<span className="text-md text-gray-600">
|
||||
They are designed to{" "}
|
||||
<span className="text-orange-500"> addict you, </span>and keep you
|
||||
<span className="text-orange-500"> distracted.</span>
|
||||
</span>
|
||||
</span>
|
||||
<span className="flex-1 justify-evenly flex flex-row flex-wrap backdrop-blur-md p-10 rounded">
|
||||
{/* illustration of collaborating */}
|
||||
<img
|
||||
src="/illustrations/undraw_freelancer_re_irh4.svg"
|
||||
className="min-h-[20rem] min-w-[20rem] shrink-0"
|
||||
/>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
{/* action section to get started now */}
|
||||
<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">
|
||||
<span className="text-3xl font-bold">Our Customers</span>
|
||||
<span>
|
||||
<span className="text-teal-600">Listen</span> to what they have to
|
||||
say.
|
||||
</span>
|
||||
|
||||
{/* all voice testimonial cards */}
|
||||
<span className="flex flex-row items-center justify-evenly mt-5">
|
||||
<span className="p-5 flex flex-row items-center bg-white bg-opacity-20 rounded shadow-md">
|
||||
<img
|
||||
src="https://lh3.googleusercontent.com/a-/AOh14GhTB6LbOqohOA3csckho3OA976yp3lMEtl2MDzbgX0=s96-c"
|
||||
className="rounded-full shadow-md h-[3rem]"
|
||||
/>
|
||||
<span className="flex flex-col ml-2 mr-10">
|
||||
<span className="text-lg">Heran Patel</span>
|
||||
<span className="text-gray-400">CEO of FinityOne</span>
|
||||
</span>
|
||||
|
||||
<button className="bg-gray-500 bg-opacity-25 p-2 ml-2 rounded hover:bg-opacity-40">
|
||||
<FaPlay className="text-lg text-gray-500" />
|
||||
</button>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</LangingPageLayout>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,72 @@
|
||||
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";
|
||||
|
||||
export default function Philosophy() {
|
||||
const handleGetDemo = () => {
|
||||
window.open("https://calendly.com/usenirvana/30min", "_blank");
|
||||
};
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
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 (
|
||||
<LangingPageLayout>
|
||||
<span className="flex flex-col my-20 items-center">
|
||||
<span>PHILOSOPHY</span>
|
||||
<span className="text-5xl font-bold text-center">
|
||||
We live in a <span className="text-red-800"> distracted world.</span>{" "}
|
||||
<br></br>
|
||||
<span className="text-teal-600">{"Let's fix it."}</span>
|
||||
</span>
|
||||
<span className="text-gray-500 text-lg">
|
||||
Everything starts with the philosophy.
|
||||
</span>
|
||||
</span>
|
||||
|
||||
{/* 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 p-10">
|
||||
<span className="bg-clip-text text-transparent bg-gradient-to-r from-pink-500 to-violet-500">
|
||||
Productivity is a Myth
|
||||
</span>
|
||||
|
||||
<span className="text-left text-lg mb-5 text-gray-700">
|
||||
In today's world, we{" "}
|
||||
<span className="text-red-600"> mistake</span> adding software and
|
||||
tools for <span className="text-red-600">productivity.</span>
|
||||
</span>
|
||||
|
||||
<span className="text-left text-lg text-gray-700 mb-5">
|
||||
At Nirvana, we are bringing work back to the basics.{" "}
|
||||
<span className="text-teal-600">Voice-only communication </span>{" "}
|
||||
because voice makes us human and less is more. An experience as if
|
||||
your team was{" "}
|
||||
<span className="text-teal-600">right next to you.</span>
|
||||
</span>
|
||||
|
||||
<span className="text-left text-lg text-gray-700">
|
||||
Improve team{" "}
|
||||
<span className="text-teal-600">
|
||||
focus, performance, and wellbeing.
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* action section to get started now */}
|
||||
<LandingPageActionBar />
|
||||
</LangingPageLayout>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,126 @@
|
||||
import { Divider } from "antd";
|
||||
import Link from "next/link";
|
||||
import {
|
||||
FaAngleRight,
|
||||
FaArrowRight,
|
||||
FaMoneyBill,
|
||||
FaPhone,
|
||||
} from "react-icons/fa";
|
||||
import LandingPageActionBar from "../../components/demo/LandingPageActionBar";
|
||||
import LandingPageLayout from "../../components/Layouts/LandingPageLayout";
|
||||
|
||||
export default function Pricing() {
|
||||
return (
|
||||
<LandingPageLayout>
|
||||
<div className="flex flex-col items-center text-center backdrop-blur-md p-10 lg:my-20 mb-20">
|
||||
<span>PRICING</span>
|
||||
<span className="text-5xl font-bold">Get Started Now,</span>
|
||||
<span className="text-5xl font-bold 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-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>
|
||||
|
||||
<span className="flex flex-row justify-center space-x-5 mb-32 flex-wrap">
|
||||
{/* 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 with 2 free spots.
|
||||
</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>
|
||||
|
||||
<LandingPageActionBar />
|
||||
</LandingPageLayout>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user