good progress with the layout for the landing page
This commit is contained in:
Arjun Patel
@@ -54,7 +54,7 @@ export default function ShortcutHelpModal() {
|
||||
{/* fixed help on bottom left */}
|
||||
<span
|
||||
onClick={handleShowModal}
|
||||
className="hover:cursor-pointer fixed bottom-10 right-10 bg-gray-200 bg-opacity-80 py-2 px-3 rounded text-gray-500 flex flex-row items-center space-x-2"
|
||||
className="hover:cursor-pointer z-50 backdrop-blur-md fixed bottom-10 right-10 bg-gray-200 bg-opacity-80 py-2 px-3 rounded text-gray-500 flex flex-row items-center space-x-2"
|
||||
>
|
||||
<span>Help</span>
|
||||
|
||||
|
||||
+170
-44
@@ -6,6 +6,9 @@ import {
|
||||
FaCalendarAlt,
|
||||
FaRocketchat,
|
||||
FaAngleRight,
|
||||
FaCheck,
|
||||
FaInfo,
|
||||
FaInfoCircle,
|
||||
} from "react-icons/fa";
|
||||
import TeamVoiceLine from "../components/demo/TeamVoiceLine";
|
||||
import Announcements from "../components/demo/Announcements";
|
||||
@@ -13,7 +16,7 @@ import Rooms from "../components/demo/Rooms";
|
||||
import VoiceLineConceptDemo from "../components/demo/VoiceLineConceptDemo";
|
||||
|
||||
import MainLogo from "../components/MainLogo";
|
||||
import { Divider } from "antd";
|
||||
import { Divider, Tooltip } from "antd";
|
||||
import { useRouter } from "next/router";
|
||||
import { useState } from "react";
|
||||
import SkeletonLoader from "../components/Loading/skeletonLoader";
|
||||
@@ -96,63 +99,186 @@ export default function Home() {
|
||||
</div>
|
||||
|
||||
{/* above fold main */}
|
||||
<div className="flex flex-row flex-wrap md:flex-nowrap md:mt-20 space-x-10">
|
||||
<span className="flex flex-col max-w-screen-sm justify-start items-baseline backdrop-blur-xl rounded-lg p-5">
|
||||
<span className="flex flex-row text-left md:text-6xl text-5xl space-x-5 h-[5rem] overflow-hidden">
|
||||
<span className="font-semibold text-black py-4">No</span>
|
||||
<span className="md:hidden flex flex-row space-x-2 py-4 text-red-600">
|
||||
<span className="flex flex-col justify-evenly items-center backdrop-blur-xl rounded-lg p-5">
|
||||
<span className="flex flex-row text-left md:text-6xl text-5xl space-x-5 h-[5rem] overflow-hidden">
|
||||
<span className="font-semibold text-black py-4">No</span>
|
||||
<span className="md:hidden flex flex-row space-x-2 py-4 text-red-600">
|
||||
<FaSlackHash /> <span>slacking</span>
|
||||
</span>
|
||||
<span className="hidden flippingWords md:visible md:flex flex-col space-y-5 text-red-600 ">
|
||||
<span className="flex flex-row space-x-2">
|
||||
<FaRocketchat /> <span>threads</span>
|
||||
</span>
|
||||
<span className="flex flex-row space-x-2">
|
||||
<FaSlackHash /> <span>slacking</span>
|
||||
</span>
|
||||
<span className="hidden flippingWords md:visible md:flex flex-col space-y-5 text-red-600 ">
|
||||
<span className="flex flex-row space-x-2">
|
||||
<FaRocketchat /> <span>threads</span>
|
||||
</span>
|
||||
<span className="flex flex-row space-x-2">
|
||||
<FaSlackHash /> <span>slacking</span>
|
||||
</span>
|
||||
<span className="flex flex-row space-x-2">
|
||||
<FaCalendarAlt /> <span>calendars</span>
|
||||
</span>
|
||||
<span className="flex flex-row space-x-2">
|
||||
<FaNewspaper /> <span>files</span>
|
||||
</span>
|
||||
<span className="flex flex-row space-x-2">
|
||||
<FaRocketchat /> <span>threads</span>
|
||||
</span>
|
||||
<span className="flex flex-row space-x-2">
|
||||
<FaCalendarAlt /> <span>calendars</span>
|
||||
</span>
|
||||
<span className="flex flex-row space-x-2">
|
||||
<FaNewspaper /> <span>files</span>
|
||||
</span>
|
||||
<span className="flex flex-row space-x-2">
|
||||
<FaRocketchat /> <span>threads</span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className="flex flex-row text-left md:text-6xl text-5xl space-x-5">
|
||||
<span className="font-semibold text-black">More</span>
|
||||
<span className="text-sky-600 font-bold">focus.</span>
|
||||
</span>
|
||||
|
||||
<span className="my-10 text-xl text-center text-gray-600 w-max">
|
||||
Minimal, voice-only collaboration tool for scrum/agile teams.
|
||||
<br></br>
|
||||
Skip slack and email, just talk to your team.
|
||||
</span>
|
||||
|
||||
<span className="flex flex-row space-x-2">
|
||||
<button
|
||||
onClick={() =>
|
||||
window.open(
|
||||
"mailto:usenirvana@gmail.com?subject=Interested in Nirvana for Startups",
|
||||
"_blank"
|
||||
)
|
||||
}
|
||||
className="rounded text-teal-600 p-2 shadow-l flex flex-row items-center space-x-2"
|
||||
>
|
||||
Email Us
|
||||
</button>
|
||||
{getStartedButton}
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className="flex w-full justify-evenly">
|
||||
<img
|
||||
src="/screenshots/frame_safari_dark.png"
|
||||
className="h-[80rem] w-[85rem]"
|
||||
/>
|
||||
</span>
|
||||
|
||||
<span className="flex flex-row py-32">
|
||||
<span className="flex flex-col grow max-w-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">
|
||||
VOICE LINE
|
||||
</span>
|
||||
|
||||
<span className="text-left text-3xl text-gray-700 font-bold">
|
||||
Move 10x faster.
|
||||
</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 text-left md:text-6xl text-5xl space-x-5">
|
||||
<span className="font-semibold text-black">More</span>
|
||||
<span className="text-sky-600 font-bold">focus.</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">
|
||||
{"Clearer communication."}{" "}
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className="my-10 text-md text-xl max-w-xl text-gray-600 w-max">
|
||||
Voice-only collaboration tool for scrum/agile teams.
|
||||
<br></br>
|
||||
Skip slack and email, just talk to your team.
|
||||
</span>
|
||||
<Divider />
|
||||
|
||||
<span className="flex flex-row space-x-2">
|
||||
<button
|
||||
onClick={() =>
|
||||
window.open(
|
||||
"mailto:usenirvana@gmail.com?subject=Interested in Nirvana for Startups",
|
||||
"_blank"
|
||||
)
|
||||
}
|
||||
className="rounded text-teal-600 p-2 shadow-l flex flex-row items-center space-x-2"
|
||||
>
|
||||
Email Us
|
||||
</button>
|
||||
{getStartedButton}
|
||||
<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 flex-row justify-end relative items-baseline flex-1 md:flex hidden">
|
||||
<VoiceLineConceptDemo />
|
||||
</span>
|
||||
</div>
|
||||
</span>
|
||||
|
||||
<span className="flex flex-row py-20">
|
||||
<span className="text-left flex flex-col grow max-w-md 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">
|
||||
TEAM
|
||||
</span>
|
||||
|
||||
<span className="text-3xl text-gray-700 font-bold">
|
||||
Bond & Collaborate Better.
|
||||
</span>
|
||||
|
||||
<span className="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-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-lg text-gray-600">
|
||||
{"NO low-quality chatter."}
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className="flex flex-row items-center space-x-2">
|
||||
<FaCheck className="text-teal-500" />
|
||||
<span className="text-lg text-gray-600">
|
||||
{"Clearer communication."}{" "}
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<Divider />
|
||||
|
||||
<span className="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-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>
|
||||
|
||||
{/* 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 md:mt-[40rem] mt-[5rem] p-10">
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 669 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 808 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.2 MiB |
Reference in New Issue
Block a user