Mobile Landing Page (#679)

* use mobile header for landing page mobile * add banner * top section * mobile info section * footer * set maxwidth * responsiveness * remove empty space in husky.svg * undo some changes
sandboxnu · Dec 1, 2023 · 210e48b · 210e48b
1 parent 8306ea4
commit 210e48b
Show file tree

Hide file tree

Showing 8 changed files with 379 additions and 59 deletions.
diff --git a/packages/frontend-v2/components/Authentication/AuthForm.tsx b/packages/frontend-v2/components/Authentication/AuthForm.tsx
@@ -24,7 +24,9 @@ export const AuthForm: React.FC<AuthFormProps> = ({
       height="100%"
       direction="column"
       rowGap="2xl"
-      mx="3xl"
+      mx="auto"
+      w="80%"
+      maxW="450px"
     >
       <Heading as="h1" size="xl">
         {headingText}

diff --git a/packages/frontend-v2/components/Header/GraduateHeaders.tsx b/packages/frontend-v2/components/Header/GraduateHeaders.tsx
@@ -2,11 +2,29 @@ import { HeaderContainer } from "./HeaderContainer";
 import { Logo } from "./Logo";
 import { GraduateButtonLink } from "../Link";
 import { UserDropdown } from "./UserDropdown";
-import { Flex, Icon, IconProps, Link as ChakraLink } from "@chakra-ui/react";
+import {
+  Flex,
+  Icon,
+  IconProps,
+  Link as ChakraLink,
+  Menu,
+  MenuButton,
+  MenuList,
+  MenuItem,
+  IconButton,
+  Text,
+  Box,
+  useMediaQuery,
+} from "@chakra-ui/react";
 import { MetaInfoWidget } from "../MetaInfo/MetaInfo";
+import { HamburgerIcon } from "@chakra-ui/icons";
 
 export const GraduatePreAuthHeader: React.FC = () => {
-  return (
+  const [isMobile] = useMediaQuery("(max-width: 640px)");
+
+  return isMobile ? (
+    <MobileHeader />
+  ) : (
     <GraduateHeader
       rightContent={
         <GraduateButtonLink href="/login">Log In</GraduateButtonLink>
@@ -47,6 +65,69 @@ const GraduateHeader: React.FC<GraduateHeaderProps> = ({ rightContent }) => {
   );
 };
 
+const MobileHeader: React.FC = () => {
+  return (
+    <div>
+      <HeaderContainer fixed>
+        <Logo />
+        <Menu>
+          <MenuButton
+            as={IconButton}
+            aria-label="Menu"
+            icon={<HamburgerIcon />}
+            variant="ghost"
+            color="primary.blue.dark.main"
+            _hover={{
+              backgroundColor: "neutral.100",
+            }}
+            _active={{
+              backgroundColor: "neutral.200",
+            }}
+          />
+          <MenuList>
+            <MenuItem
+              icon={<FeedbackIcon />}
+              as="a"
+              href="https://forms.gle/Tg9yuhR8inkrqHdN6"
+              target="_blank"
+            >
+              Feedback
+            </MenuItem>
+            <MenuItem
+              icon={<BugIcon />}
+              as="a"
+              href="https://forms.gle/Sxg3B9js8KQ2zfJS9"
+              target="_blank"
+            >
+              Bug/Feature
+            </MenuItem>
+          </MenuList>
+        </Menu>
+      </HeaderContainer>
+
+      <Box
+        display={{ tablet: "none", base: "flex" }}
+        top="57px"
+        w="100%"
+        position="fixed"
+        justifyContent="center"
+        alignItems="center"
+        bg="primary.blue.dark.main"
+        h="55px"
+      >
+        <Text
+          textColor="white"
+          textAlign="center"
+          fontSize="md"
+          fontWeight="bold"
+        >
+          Open our site on desktop to get started!
+        </Text>
+      </Box>
+    </div>
+  );
+};
+
 const FeedbackIcon: React.FC<IconProps> = (props) => {
   return (
     <Icon

diff --git a/packages/frontend-v2/components/Header/HeaderContainer.tsx b/packages/frontend-v2/components/Header/HeaderContainer.tsx
@@ -1,15 +1,25 @@
 import { Flex } from "@chakra-ui/react";
 import React, { PropsWithChildren } from "react";
 
-export const HeaderContainer: React.FC<PropsWithChildren> = ({ children }) => {
+interface HeaderContainerProps {
+  fixed?: boolean;
+}
+
+export const HeaderContainer: React.FC<
+  PropsWithChildren<HeaderContainerProps>
+> = ({ fixed, children }) => {
   return (
     <Flex
+      position={fixed ? "fixed" : "static"}
+      top="0"
       flexDirection="row"
       alignItems="center"
       justifyContent="space-between"
       p="1% 1.5% 1% 1.5%"
-      boxShadow="0px 4px 7px lightgrey"
+      boxShadow={fixed ? "" : "0px 4px 7px lightgrey"}
       zIndex={1}
+      backgroundColor="white"
+      w="100%"
     >
       {children}
     </Flex>

diff --git a/packages/frontend-v2/pages/_app.tsx b/packages/frontend-v2/pages/_app.tsx
@@ -1,5 +1,6 @@
 import Head from "next/head";
 import type { AppProps } from "next/app";
+import { useRouter } from "next/router";
 import { ChakraProvider, Flex, Heading, Text, Image } from "@chakra-ui/react";
 import { theme } from "../utils";
 import "react-toastify/dist/ReactToastify.min.css";
@@ -9,9 +10,11 @@ import "@fontsource/montserrat-alternates";
 import { useWindowSize } from "../hooks";
 
 function MyApp({ Component, pageProps }: AppProps) {
+  const router = useRouter();
   const { width } = useWindowSize();
 
-  const disableApp = width && width <= 1100;
+  const isLandingPage = router.asPath === "/";
+  const disableApp = !isLandingPage && width && width <= 1100;
 
   return (
     <>