a.dding layout and navigation good structure

2022-01-26 16:54:56 -08:00
parent 02b7dc64f9
commit d4212f98db
3 changed files with 429 additions and 343 deletions
@@ -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 = (
+    <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 (
+    <div className="landing-page-bg bg-left-bottom bg-fixed bg-cover bg-no-repeat min-h-screen">
+      <div className="container mx-auto md:pb-10 px-5 lg:px-20">
+        {/* header */}
+        <div className="flex flex-row py-5 px-5 items-center justify-start mx-auto">
+          <MainLogo className="mr-auto text-3xl" />
+          <span className="flex flex-row space-x-5 items-center">
+            <span
+              onClick={() => 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
+            </span>
+
+            <a
+              href="/features"
+              className={`text-gray-500 hover:text-teal-600 hover:cursor-pointer ${
+                currPage == LandingPageNavigation.features
+                  ? "text-teal-600 underline underline-offset-4"
+                  : ""
+              }`}
+            >
+              Features
+            </a>
+            <a
+              href="/usecases"
+              className={`text-gray-500 hover:text-teal-600 hover:cursor-pointer ${
+                currPage == LandingPageNavigation.useCases
+                  ? "text-teal-600 underline underline-offset-4"
+                  : ""
+              }`}
+            >
+              Use Cases
+            </a>
+
+            <a
+              href="/pricing"
+              className={`text-gray-500 hover:text-teal-600 hover:cursor-pointer ${
+                currPage == LandingPageNavigation.pricing
+                  ? "text-teal-600 underline underline-offset-4"
+                  : ""
+              }`}
+            >
+              Pricing
+            </a>
+            <a
+              href="/philosophy"
+              className={`text-gray-500 border-r-gray-400 border-r-2 pr-5 hover:text-teal-600 hover:cursor-pointer ${
+                currPage == LandingPageNavigation.philosophy
+                  ? "text-teal-600 underline underline-offset-4"
+                  : ""
+              }`}
+            >
+              Philosophy
+            </a>
+
+            {currUser ? (
+              <>
+                <span className="text-gray-500">Welcome back!</span>
+                <button
+                  onClick={() => window.open("/teams", "_self")}
+                  className="rounded font-semibold bg-gray-200 p-2 text-teal-600 shadow-lg flex flex-row items-center space-x-2"
+                >
+                  Continue
+                </button>
+              </>
+            ) : (
+              <>
+                <button
+                  onClick={handleLogin}
+                  className="ml-auto text-gray-500  hidden md:block"
+                >
+                  Log In
+                </button>
+
+                <button
+                  onClick={handleLogin}
+                  className="rounded font-semibold bg-gray-200 p-2 text-teal-600 shadow-lg flex flex-row items-center space-x-2"
+                >
+                  <span>Sign Up</span>
+                </button>
+              </>
+            )}
+
+            {getStartedButton}
+          </span>
+        </div>
+
+        {children}
+      </div>
+    </div>
+  );
+}