From d4212f98db387c95bea5df0d0eec2ee5834f93ed Mon Sep 17 00:00:00 2001 From: Arjun Patel Date: Wed, 26 Jan 2022 16:54:56 -0800 Subject: [PATCH] a.dding layout and navigation good structure --- components/Layouts/LandingPageLayout.tsx | 139 +++++ pages/index.js | 628 +++++++++++------------ pages/philosophy.tsx | 5 +- 3 files changed, 429 insertions(+), 343 deletions(-) create mode 100644 components/Layouts/LandingPageLayout.tsx diff --git a/components/Layouts/LandingPageLayout.tsx b/components/Layouts/LandingPageLayout.tsx new file mode 100644 index 0000000..82bb0c9 --- /dev/null +++ b/components/Layouts/LandingPageLayout.tsx @@ -0,0 +1,139 @@ +import Link from "next/link"; +import { useRouter } from "next/router"; +import { useState } from "react"; +import { FaAngleRight } from "react-icons/fa"; +import { useAuth } from "../../contexts/authContext"; +import MainLogo from "../MainLogo"; + +enum LandingPageNavigation { + home = "/", + features = "/features", + useCases = "/usecases", + pricing = "/pricing", + philosophy = "/philosophy", +} + +export default function LangingPageLayout({ children }) { + const { currUser } = useAuth(); + const router = useRouter(); + + const [loading, setLoading] = useState(false); + + const currPage = router.pathname; + console.log(currPage); + + function handleLogin() { + setLoading(true); + router.push("/teams"); + } + + const handleGetDemo = () => { + window.open("https://calendly.com/usenirvana/30min", "_blank"); + }; + const getStartedButton = ( + + ); + + return ( +
+
+ {/* header */} +
+ + + window.open("/", "_self")} + className={`text-gray-500 hover:text-teal-600 hover:cursor-pointer ${ + currPage == LandingPageNavigation.home + ? "text-teal-600 underline underline-offset-4" + : "" + }`} + > + Home + + + + Features + + + Use Cases + + + + Pricing + + + Philosophy + + + {currUser ? ( + <> + Welcome back! + + + ) : ( + <> + + + + + )} + + {getStartedButton} + +
+ + {children} +
+
+ ); +} diff --git a/pages/index.js b/pages/index.js index cb82c1f..04c2bd7 100644 --- a/pages/index.js +++ b/pages/index.js @@ -26,10 +26,9 @@ import { useRouter } from "next/router"; import { useState } from "react"; import SkeletonLoader from "../components/Loading/skeletonLoader"; import { useAuth } from "../contexts/authContext"; +import LangingPageLayout from "../components/Layouts/LandingPageLayout"; export default function Home() { - const { currUser } = useAuth(); - const handleGetDemo = () => { window.open("https://calendly.com/usenirvana/30min", "_blank"); }; @@ -52,383 +51,330 @@ export default function Home() { return ; } - function handleLogin() { - setLoading(true); - router.push("/teams"); - } - return ( -
-
- {/* header */} -
- - - - Home - - - Philosophy - - - {currUser ? ( - <> - Welcome back! - - - ) : ( - <> - - - - - )} - - {getStartedButton} + + {/* above fold main */} + + + No + + slacking -
- - {/* above fold main */} - - - No - + + + threads + + slacking - - - threads - - - slacking - - - calendars - - - files - - - threads - + + calendars + + + files + + + threads - - - - More - focus. - - - - Minimal, voice-only collaboration tool for scrum/agile teams. -

- Skip slack and email, just talk to your team. - - - - - {getStartedButton} - + + More + focus. + + + + Minimal, voice-only collaboration tool for scrum/agile teams. +

+ Skip slack and email, just talk to your team. + + + + + {getStartedButton} + + + + + + + + {/* voice line section */} + + + + VOICE LINE + + + + Move 10x Faster. + + + + + + + {/* checkmarks of value add */} + + + + {"Asynchronous."} + + + + + + + + + + {"NO low-quality chatter."} + + + + + + + {"Clearer communication."}{" "} + + + + + + + { + "An experience as if your team was across the table. And it's still" + } + asynchronous. + +

+ + No more days of{" "} + back and forth texting for + complex, technical issues. + + + + + + + + + {/* bond/team/collaborate section */} + + + {/* illustration of collaborating */} + {/* description text */} + + + TEAM + + + Bond & Collaborate{" "} + Seamlessly. + + + + {/* checkmarks of value add */} + + - {/* voice line section */} - - - - VOICE LINE - - - - Move 10x Faster. - - - - - - - {/* checkmarks of value add */} - - - - {"Asynchronous."} + + + + {"Spontaneous Conversations."} + - - - - - - - - - {"NO low-quality chatter."} + + {"No more 'let's find a time to discuss...'"} + - - - - {"Clearer communication."}{" "} + + + + + + + {"Cross Collaborate."} + + + + {"Glance all of the conversations going on in your team."} + - + - - { - "An experience as if your team was across the table. And it's still" + + Work in the{" "} + asynchronous. - -

- - No more days of{" "} - back and forth texting{" "} - for complex, technical issues. - - - - - - - - - {/* bond/team/collaborate section */} - - - {/* illustration of collaborating */} - - - {/* description text */} - - - TEAM - - - Bond & Collaborate{" "} - Seamlessly. - - - - {/* checkmarks of value add */} - - - - - - - {"Spontaneous Conversations."} - - - - {"No more 'let's find a time to discuss...'"} - - - - - - - - - - - {"Cross Collaborate."} - - - - {"Glance all of the conversations going on in your team."} - - - - - - - - Work in the{" "} - - - 'corner' office room - {" "} - - {" "} - with your closest teammates throughout the day. - - - Have lunch in the 'kitchen' with your team. - - - Connect in seconds, resolve matters in minutes. - - -

- or -

- - Create more formal meeting rooms ( - Meet). + > - {" "} - Spontaneous, scheduled, or recurring. + 'corner' office room {" "} - All within Nirvana. - + + {" "} + with your closest teammates throughout the day. + + + Have lunch in the 'kitchen' with your team. + + + Connect in seconds, resolve matters in minutes. + + +

+ or +

+ + Create more formal meeting rooms ( + Meet). + + {" "} + Spontaneous, scheduled, or recurring. + {" "} + All within Nirvana. + - {/* focus on today section */} - - {/* description card */} - - - CLARITY - - - Focus on Right Now. - - + {/* focus on today section */} + + {/* description card */} + + + CLARITY + + + Focus on Right Now. + + - + - {/* checkmarks of value add */} - - + {/* checkmarks of value add */} + + - - - - {"Clarity of Mind."} - - - - {"Come to work seeing only what's important today/this week."} + + + + {"Clarity of Mind."} - - - - - - - - - {"Inbox Zero."} - - - - { - "Conversations are ephemeral like in real life. We keep you at inbox zero." - } - + + {"Come to work seeing only what's important today/this week."} - - - - - Your current tools{" "} - bombard you with files, notifications, scrolling, clicking, - emojis, threads... - - -

- - - They are designed to{" "} - addict you, and keep you - distracted. - - - {/* illustration of collaborating */} + + + + + + + + {"Inbox Zero."} + + + + { + "Conversations are ephemeral like in real life. We keep you at inbox zero." + } + + + + + + + + Your current tools bombard + you with files, notifications, scrolling, clicking, emojis, + threads... + + +

+ + + They are designed to{" "} + addict you, and keep you + distracted. + + + + {/* illustration of collaborating */} + + + + + {/* action section to get started now */} + + + Ready to Focus? + {"It's now or never."} + + + {getStartedButton} + + + {/* customer testimonial section */} + + Our Customers + + Listen to what they have to + say. + + + {/* all voice testimonial cards */} + + - - - - {/* action section to get started now */} - - - Ready to Focus? - {"It's now or never."} - - - {getStartedButton} - - - {/* customer testimonial section */} - - Our Customers - - Listen to what they have to - say. - - - {/* all voice testimonial cards */} - - - - - Heran Patel - CEO of FinityOne - - - + + Heran Patel + CEO of FinityOne + + -
-
+ + ); } diff --git a/pages/philosophy.tsx b/pages/philosophy.tsx index 9708271..3d676fe 100644 --- a/pages/philosophy.tsx +++ b/pages/philosophy.tsx @@ -2,6 +2,7 @@ import { Divider } from "antd"; import { useRouter } from "next/router"; import { FaAngleRight } from "react-icons/fa"; import Rooms from "../components/demo/Rooms"; +import LangingPageLayout from "../components/Layouts/LandingPageLayout"; export default function Philosophy() { const handleGetDemo = () => { @@ -20,7 +21,7 @@ export default function Philosophy() { ); return ( - <> + {/* main mission */}
@@ -50,6 +51,6 @@ export default function Philosophy() { {getStartedButton} - + ); }