Arjun Patel
382 lines
14 KiB
JavaScript
382 lines
14 KiB
JavaScript
import { FaAngleRight, FaCheck, FaInfoCircle, FaPlay } from "react-icons/fa";
|
|
import { FcGoogle } from "react-icons/fc";
|
|
import VoiceLineConceptDemo from "../components/demo/VoiceLineConceptDemo";
|
|
|
|
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-slate-50 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-slate-50 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-slate-50 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-slate-50 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>
|
|
);
|
|
}
|