a.dding layout and navigation good structure

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 = (
+    <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>
+  );
+}

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,60 +51,8 @@ export default function Home() {
     return <SkeletonLoader />;
   }
 
-  function handleLogin() {
-    setLoading(true);
-    router.push("/teams");
-  }
-
   return (
-    <div className="landing-page-bg bg-left-bottom bg-fixed bg-cover bg-no-repeat">
-      <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 className="text-gray-700 underline underline-offset-4">
-              Home
-            </span>
-            <a
-              href="/philosophy"
-              className="text-gray-500  border-r-gray-400 border-r-2 pr-5"
-            >
-              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>
-
+    <LangingPageLayout>
       {/* above fold main */}
       <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">
@@ -221,8 +168,8 @@ export default function Home() {
           <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 className="text-orange-500">back and forth texting</span> for
+            complex, technical issues.
           </span>
         </span>
 
@@ -370,9 +317,9 @@ export default function Home() {
           <Divider />
 
           <span className="text-md text-gray-600">
-              Your <span className="text-orange-500">current tools</span>{" "}
-              bombard you with files, notifications, scrolling, clicking,
-              emojis, threads...
+            Your <span className="text-orange-500">current tools</span> bombard
+            you with files, notifications, scrolling, clicking, emojis,
+            threads...
           </span>
 
           <br></br>
@@ -428,7 +375,6 @@ export default function Home() {
           </span>
         </span>
       </span>
-      </div>
-    </div>
+    </LangingPageLayout>
   );
 }

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() {
     </button>
   );
   return (
-    <>
+    <LangingPageLayout>
       {/* 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-[15rem] mt-[5rem] p-10">
         <span className="bg-clip-text text-transparent bg-gradient-to-r from-pink-500 to-violet-500">
@@ -50,6 +51,6 @@ export default function Philosophy() {
 
         <span className="ml-auto">{getStartedButton}</span>
       </span>
-    </>
+    </LangingPageLayout>
   );
 }