Files
nirvana-v3/packages/web/pages/index.tsx
T
2022-03-31 13:58:52 -04:00

79 lines
2.8 KiB
TypeScript

import { BsApple, BsWindows } from "react-icons/bs";
import FullMottoLogo from "../../components/logo/fullMotto";
import Head from "next/head";
import HorizontalLogo from "../../components/logo/horizontal";
import Image from "next/image";
import { LogoType } from "../../components/logo/full";
import type { NextPage } from "next";
import styles from "../styles/Home.module.css";
const Home: NextPage = () => {
return (
<>
<Head>
<title>Nirvana - virtual office</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/logos/1024x1024.ico" />
</Head>
<main className="min-h-screen min-w-screen bg-zinc-700 flex flex-col">
{/* header */}
<div className="container mx-auto p-0 flex flex-row justify-start">
{/* <img className="text-md" src={"/logos/horizontal.svg"} /> */}
<HorizontalLogo className="scale-[0.5]" />
</div>
<div className="container mx-auto px-20">
{/* above fold experience */}
<div className="flex flex-row items-center space-x-10 mt-10">
<div className="flex flex-col items-start">
<span className="text-white text-6xl leading-[1.2] font-extrabold">
The <span className="text-nirvanaTeal">walkie-talkie</span>{" "}
<br /> for remote teams.
</span>
<span className="text-zinc-400 text-xl mt-5">
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 */}
<span className="flex flex-col justify-start mt-20">
<span className="text-white font-bold text-md mb-2">
Download the desktop app
</span>
<span className="flex flex-row space-x-2">
<span className="p-2 rounded bg-zinc-500 cursor-pointer">
<BsWindows className="text-white text-xl" />
</span>
<span className="p-2 rounded bg-zinc-500 cursor-pointer">
<BsApple className="text-white text-xl" />
</span>
</span>
</span>
</div>
<img
src="/illustrations/undraw_co-working_re_w93t.svg"
className="h-[30em]"
/>
</div>
{/* value points */}
</div>
{/* footer */}
<div className="container mx-auto flex justify-center mt-auto">
<FullMottoLogo className="mx-auto text-center scale-50" />
</div>
</main>
</>
);
};
export default Home;