107 lines
4.0 KiB
TypeScript
107 lines
4.0 KiB
TypeScript
import { BsApple, BsWindows } from "react-icons/bs";
|
||
import { FaPeopleCarry, FaRunning } from "react-icons/fa";
|
||
|
||
import Footer from "../components/footer";
|
||
import Header from "../components/header";
|
||
import { MdOutlineNaturePeople } from "react-icons/md";
|
||
import type { NextPage } from "next";
|
||
|
||
const Home: NextPage = () => {
|
||
return (
|
||
<>
|
||
{/* header */}
|
||
<Header />
|
||
|
||
{/* above fold experience */}
|
||
<div className="container mx-auto max-w-screen-xl px-10">
|
||
<div className="flex md:flex-row flex-col items-center my-10">
|
||
<div className="flex flex-col items-start">
|
||
<span className="text-white text-5xl md:text-6xl leading-[1.2] font-extrabold text-center md:text-left">
|
||
The <span className="text-nirvanaTeal">walkie-talkie</span> <br />{" "}
|
||
for remote startups.
|
||
</span>
|
||
|
||
<span className="text-zinc-400 text-lg md:text-xl mt-5 text-center md:text-left">
|
||
The <span className="text-nirvanaTeal">{"'less is more'"}</span>{" "}
|
||
approach. Skip zoom scheduling, <br></br> slack notifications, and
|
||
email threads. <br /> Just talk to your team.
|
||
</span>
|
||
|
||
{/* download */}
|
||
<div className="flex flex-col justify-start mt-20 text-center md:text-left w-full items-center md:items-start">
|
||
<span className="text-white text-md mb-2">
|
||
Download the desktop app <br></br> (coming soon)
|
||
</span>
|
||
|
||
<span className="flex flex-row space-x-2 justify-center">
|
||
<span className="p-2 rounded bg-zinc-500 cursor-pointer blur-[2px]">
|
||
<BsWindows className="text-white text-xl" />
|
||
</span>
|
||
|
||
<span className="p-2 rounded bg-zinc-500 cursor-pointer blur-[2px]">
|
||
<BsApple className="text-white text-xl" />
|
||
</span>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<img
|
||
src="/illustrations/undraw_co-working_re_w93t.svg"
|
||
className="h-[25em] ml-auto"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
{/* value points */}
|
||
<div className="flex flex-col md:flex-row w-full mx-auto px-20 py-10 bg-zinc-500 my-10 gap-5 justify-center">
|
||
<span className="p-5 bg-zinc-600 max-w-md flex flex-col items-start flex-1 shadow">
|
||
<span className="flex flex-row items-center space-x-2">
|
||
<FaRunning className="text-white text-xl" />
|
||
<span className="text-white font-semibold text-lg">
|
||
Move Faster
|
||
</span>
|
||
</span>
|
||
|
||
<span className="text-zinc-300 text-sm">
|
||
No more back and forth chatter. Push to talk. Resolve issues in
|
||
seconds with your voice as if your team was around the table.
|
||
</span>
|
||
</span>
|
||
|
||
<span className="p-5 bg-zinc-600 max-w-md flex flex-col items-start flex-1 shadow">
|
||
<span className="flex flex-row items-center space-x-2">
|
||
<MdOutlineNaturePeople className="text-white text-xl" />
|
||
<span className="text-white font-semibold text-lg">Minimal</span>
|
||
</span>
|
||
|
||
<span className="text-zinc-300 text-sm">
|
||
All of your team’s converstions in one place. Nirvana’s built for
|
||
flow state and clarity. Communication as natural and human as
|
||
possible.
|
||
</span>
|
||
</span>
|
||
|
||
<span className="p-5 bg-zinc-600 max-w-md flex flex-col items-start flex-1 shadow">
|
||
<span className="flex flex-row items-center space-x-2">
|
||
<FaPeopleCarry className="text-white text-lg" />
|
||
<span className="text-white font-semibold text-lg">
|
||
Build Culture
|
||
</span>
|
||
</span>
|
||
|
||
<span className="text-zinc-300 text-sm">
|
||
Close-knit culture and increased serendipity by knowing your team’s
|
||
right there with you.
|
||
</span>
|
||
</span>
|
||
</div>
|
||
|
||
{/* footer */}
|
||
|
||
<Footer />
|
||
</>
|
||
);
|
||
};
|
||
|
||
export default Home;
|