Add landing page and modify navbar

Author: jolynloh

frontend/public/collaborative_editor.png

@@ -14,18 +14,27 @@ import {
 } from "@mui/material";
 import { grey } from "@mui/material/colors";
 import AppMargin from "../AppMargin";
-import { useNavigate } from "react-router-dom";
+import { useNavigate, useLocation } from "react-router-dom";
 import { useAuth } from "../../contexts/AuthContext";
 import { useState } from "react";
 import { USE_AUTH_ERROR_MESSAGE } from "../../utils/constants";
 
-type NavbarItem = { label: string; link: string };
+type NavbarItem = { label: string; link: string; needsLogin: boolean };
 
 type NavbarProps = { navbarItems?: Array<NavbarItem> };
 
 const Navbar: React.FC<NavbarProps> = (props) => {
-  const { navbarItems = [{ label: "Questions", link: "/questions" }] } = props;
+  const {
+    navbarItems = [
+      { label: "Find Match", link: "/home", needsLogin: true },
+      { label: "Questions", link: "/questions", needsLogin: false },
+    ],
+  } = props;
+
   const navigate = useNavigate();
+  const location = useLocation();
+  const path = location.pathname;
+
   const auth = useAuth();
   const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
 
@@ -63,16 +72,18 @@ const Navbar: React.FC<NavbarProps> = (props) => {
             PeerPrep
           </Typography>
           <Stack direction={"row"} alignItems={"center"} spacing={2}>
-            {navbarItems.map((item) => (
-              <Link
-                key={item.label}
-                href={item.link}
-                underline="none"
-                sx={{ color: "common.black" }}
-              >
-                {item.label}
-              </Link>
-            ))}
+            {navbarItems
+              .filter((item) => !item.needsLogin || (item.needsLogin && user))
+              .map((item) => (
+                <Link
+                  key={item.label}
+                  href={item.link}
+                  underline="none"
+                  sx={{ color: "common.black" }}
+                >
+                  {path == item.link ? <b>{item.label}</b> : item.label}
+                </Link>
+              ))}
             {user ? (
               <>
                 <Tooltip title={"Account settings"}>

frontend/public/find_match_form.png

@@ -10,6 +10,6 @@
 }
 
 .margins {
-  margin-top: 25px;
-  margin-bottom: 25px;
+  margin-top: 50px;
+  margin-bottom: 50px;
 }

frontend/public/match_found.png

@@ -50,7 +50,7 @@ const Home: React.FC = () => {
           marginBottom: theme.spacing(4),
         })}
       >
-        Level up in your technical interviews!
+        Start an interactive practice session today!
       </Typography>
 
       <Typography
@@ -62,8 +62,7 @@ const Home: React.FC = () => {
           maxWidth: "80%",
         })}
       >
-        Your ultimate technical interview preparation platform to practice
-        whiteboard style interview questions with a peer.
+        Specify your question preferences and sit back as we find you the best match.
       </Typography>
       {/* <Box
         component="img"

frontend/public/questions_list.png

@@ -10,6 +10,6 @@
 }
 
 .margins {
-  margin-top: 25px;
-  margin-bottom: 25px;
+  margin-top: 50px;
+  margin-bottom: 50px;
 }

frontend/src/components/Navbar/index.tsx

@@ -1,9 +1,36 @@
 import { Typography } from "@mui/material";
+import Carousel from "react-material-ui-carousel";
+import { Paper } from "@mui/material";
 
 import classes from "./index.module.css";
 import AppMargin from "../../components/AppMargin";
+import {
+  COLLABORATIVE_EDITOR_PATH,
+  FIND_MATCH_FORM_PATH,
+  MATCH_FOUND_PATH,
+  QUESTIONS_LIST_PATH,
+} from "../../utils/constants";
 
 const Landing: React.FC = () => {
+  const images = [
+    {
+      name: "Questions list",
+      path: QUESTIONS_LIST_PATH,
+    },
+    {
+      name: "Find match form",
+      path: FIND_MATCH_FORM_PATH,
+    },
+    {
+      name: "Match found",
+      path: MATCH_FOUND_PATH,
+    },
+    {
+      name: "Collaborative editor",
+      path: COLLABORATIVE_EDITOR_PATH,
+    },
+  ];
+
   return (
     <AppMargin
       classname={`${classes.fullheight} ${classes.center} ${classes.margins}`}
@@ -33,6 +60,19 @@ const Landing: React.FC = () => {
         Your ultimate technical interview preparation platform to practice
         whiteboard style interview questions with a peer.
       </Typography>
+
+      <Carousel
+        sx={{ width: "600px" }}
+        height={400}
+        navButtonsAlwaysInvisible
+        stopAutoPlayOnHover={false}
+      >
+        {images.map((image, i) => (
+          <Paper key={i} elevation={2}>
+            <img src={image.path} alt={image.name} />
+          </Paper>
+        ))}
+      </Carousel>
     </AppMargin>
   );
 };

frontend/src/pages/Home/index.module.css

@@ -71,3 +71,9 @@ export const SUCCESS_PW_UPDATE_MESSAGE = "Password updated successfully";
 export const FAILED_PW_UPDATE_MESSAGE = "Failed to update password";
 export const SUCCESS_PROFILE_UPDATE_MESSAGE = "Profile updated successfully";
 export const FAILED_PROFILE_UPDATE_MESSAGE = "Failed to update profile";
+
+// Image paths
+export const FIND_MATCH_FORM_PATH = "/find_match_form.png";
+export const MATCH_FOUND_PATH = "/match_found.png";
+export const QUESTIONS_LIST_PATH = "/questions_list.png";
+export const COLLABORATIVE_EDITOR_PATH = "/collaborative_editor.png";