features done

components/Layouts/LandingPageLayout.tsx

@@ -8,7 +8,6 @@ import MainLogo from "../MainLogo";
 enum LandingPageNavigation {
   home = "/",
   features = "/features",
-  useCases = "/usecases",
   pricing = "/pricing",
   philosophy = "/philosophy",
 }
@@ -48,7 +47,7 @@ export default function LangingPageLayout({ children }) {
           <MainLogo className="mr-auto text-3xl" />
           <span className="flex flex-row space-x-5 items-center">
             <span
-              onClick={() => window.open("/", "_self")}
+              onClick={() => window.open(LandingPageNavigation.home, "_self")}
               className={`text-gray-500 hover:text-teal-600 hover:cursor-pointer ${
                 currPage == LandingPageNavigation.home
                   ? "text-teal-600 underline underline-offset-4"
@@ -59,7 +58,7 @@ export default function LangingPageLayout({ children }) {
             </span>
 
             <a
-              href="/features"
+              href={LandingPageNavigation.features}
               className={`text-gray-500 hover:text-teal-600 hover:cursor-pointer ${
                 currPage == LandingPageNavigation.features
                   ? "text-teal-600 underline underline-offset-4"
@@ -68,19 +67,9 @@ export default function LangingPageLayout({ children }) {
             >
               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"
+              href={LandingPageNavigation.pricing}
               className={`text-gray-500 hover:text-teal-600 hover:cursor-pointer ${
                 currPage == LandingPageNavigation.pricing
                   ? "text-teal-600 underline underline-offset-4"
@@ -90,7 +79,7 @@ export default function LangingPageLayout({ children }) {
               Pricing
             </a>
             <a
-              href="/philosophy"
+              href={LandingPageNavigation.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"

pages/features.tsx

@@ -0,0 +1,98 @@
+import LangingPageLayout from "../components/Layouts/LandingPageLayout";
+import {
+  FcAssistant,
+  FcCollaboration,
+  FcFilingCabinet,
+  FcGoogle,
+  FcLandscape,
+  FcOrgUnit,
+  FcVideoCall,
+} from "react-icons/fc";
+
+export default function Features() {
+  return (
+    <LangingPageLayout>
+      <span className="flex flex-col my-20 items-center">
+        <span className="text-5xl font-bold">
+          Your WFH <span className="text-teal-600">Hub</span>
+        </span>
+        <span className="text-gray-500 text-lg">
+          Come to work with clarity of mind.
+        </span>
+      </span>
+
+      <span className="flex flex-col items-center">
+        <span className="flex flex-row space-x-2 mb-2">
+          <span className="flex flex-col items-start bg-white bg-opacity-40 p-10 max-w-sm rounded backdrop-blur-md">
+            <FcAssistant className="text-5xl -ml-2" />
+            <span className="text-teal-600">async</span>
+            <span className="text-lg font-semibold">Voice Conversations.</span>
+
+            <span className="text-md text-gray-500">
+              Listen to your teammate talk to you realtime if you are online.
+            </span>
+          </span>
+
+          <span className="flex flex-col items-start bg-white bg-opacity-40 p-10 max-w-sm rounded backdrop-blur-md">
+            <FcCollaboration className="text-5xl" />
+            <span className="text-teal-600">informal</span>
+            <span className="text-lg font-semibold">Office Rooms.</span>
+
+            <span className="text-md text-gray-500">
+              Nirvana voice-only rooms to collaborate and work with your closest
+              teammates throughout the day.
+            </span>
+          </span>
+        </span>
+
+        <span className="flex flex-row space-x-2 mb-2">
+          <span className="flex flex-col items-start bg-white bg-opacity-40 p-10 max-w-sm rounded backdrop-blur-md">
+            <FcVideoCall className="text-5xl" />
+            <span className="text-teal-600">formal</span>
+            <span className="text-lg font-semibold">Meeting Rooms.</span>
+
+            <span className="text-md text-gray-500">
+              Spontaneous, scheduled, or recurring{" "}
+              <FcGoogle className="inline" /> Meet meetings. All conversations
+              transparent for the team to see.
+            </span>
+          </span>
+
+          <span className="flex flex-col items-start bg-white bg-opacity-40 p-10 max-w-sm rounded backdrop-blur-md">
+            <FcFilingCabinet className="text-5xl -ml-2" />
+            <span className="text-teal-600">desk</span>
+            <span className="text-lg font-semibold">Drawer.</span>
+
+            <span className="text-md text-gray-500">
+              Personal and team drawer of links: Jira, Drive, Dropbox, Github,
+              screenshots, code snippets.
+            </span>
+          </span>
+        </span>
+
+        <span className="flex flex-row space-x-2">
+          <span className="flex flex-col items-start bg-white bg-opacity-40 p-10 max-w-sm rounded backdrop-blur-md">
+            <FcOrgUnit className="text-5xl -ml-2" />
+            <span className="text-teal-600">team</span>
+            <span className="text-lg font-semibold">Announcements.</span>
+
+            <span className="text-md text-gray-500">
+              Keep your team focused. Mention blockers, priorities, updates...
+            </span>
+          </span>
+
+          <span className="flex flex-col items-start bg-white bg-opacity-40 p-10 max-w-sm rounded backdrop-blur-md">
+            <FcLandscape className="text-5xl" />
+            <span className="text-teal-600">ephemeral</span>
+            <span className="text-lg font-semibold">Inbox Zero.</span>
+
+            <span className="text-md text-gray-500">
+              Links, conversations, rooms...They all disappear from your main
+              view to keep you and your team focused.
+            </span>
+          </span>
+        </span>
+      </span>
+    </LangingPageLayout>
+  );
+}

pages/pricing.tsx

@@ -1,3 +1,14 @@
+import LangingPageLayout from "../components/Layouts/LandingPageLayout";
+
 export default function Pricing() {
-  return <div>this is the pricing page</div>;
+  return (
+    <LangingPageLayout>
+      <div className="flex flex-row">
+        <span className="flex flex-col items-start">
+          <span>Your WFH Hub</span>
+          <span>Actively working on new and exciting features.</span>
+        </span>
+      </div>
+    </LangingPageLayout>
+  );
 }