From 210e48b78d8243dd0c9a701198809922b6ba00d4 Mon Sep 17 00:00:00 2001 From: Angela Zheng <92692008+AngelaZQ1@users.noreply.github.com> Date: Fri, 1 Dec 2023 09:52:00 -0500 Subject: [PATCH] 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 --- .../components/Authentication/AuthForm.tsx | 4 +- .../components/Header/GraduateHeaders.tsx | 85 ++++++++- .../components/Header/HeaderContainer.tsx | 14 +- packages/frontend-v2/pages/_app.tsx | 5 +- packages/frontend-v2/pages/index.tsx | 169 ++++++++++++++---- .../frontend-v2/public/home_simplified.svg | 120 +++++++++++++ packages/frontend-v2/public/husky.svg | 40 ++--- packages/frontend-v2/utils/theme/index.ts | 1 + 8 files changed, 379 insertions(+), 59 deletions(-) create mode 100644 packages/frontend-v2/public/home_simplified.svg diff --git a/packages/frontend-v2/components/Authentication/AuthForm.tsx b/packages/frontend-v2/components/Authentication/AuthForm.tsx index f2195c562..65d1d44e7 100644 --- 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 = ({ height="100%" direction="column" rowGap="2xl" - mx="3xl" + mx="auto" + w="80%" + maxW="450px" > {headingText} diff --git a/packages/frontend-v2/components/Header/GraduateHeaders.tsx b/packages/frontend-v2/components/Header/GraduateHeaders.tsx index c38f5ef2c..cfd4838c3 100644 --- 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 ? ( + + ) : ( Log In @@ -47,6 +65,69 @@ const GraduateHeader: React.FC = ({ rightContent }) => { ); }; +const MobileHeader: React.FC = () => { + return ( +
+ + + + } + variant="ghost" + color="primary.blue.dark.main" + _hover={{ + backgroundColor: "neutral.100", + }} + _active={{ + backgroundColor: "neutral.200", + }} + /> + + } + as="a" + href="https://forms.gle/Tg9yuhR8inkrqHdN6" + target="_blank" + > + Feedback + + } + as="a" + href="https://forms.gle/Sxg3B9js8KQ2zfJS9" + target="_blank" + > + Bug/Feature + + + + + + + + Open our site on desktop to get started! + + +
+ ); +}; + const FeedbackIcon: React.FC = (props) => { return ( = ({ children }) => { +interface HeaderContainerProps { + fixed?: boolean; +} + +export const HeaderContainer: React.FC< + PropsWithChildren +> = ({ fixed, children }) => { return ( {children} diff --git a/packages/frontend-v2/pages/_app.tsx b/packages/frontend-v2/pages/_app.tsx index 73dc36dc3..60655f9ab 100644 --- 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 ( <> diff --git a/packages/frontend-v2/pages/index.tsx b/packages/frontend-v2/pages/index.tsx index 906462b17..66bd15c75 100644 --- a/packages/frontend-v2/pages/index.tsx +++ b/packages/frontend-v2/pages/index.tsx @@ -3,11 +3,12 @@ import { Box, Flex, Heading, - HStack, Image, SimpleGrid, Text, VStack, + Link, + useMediaQuery, } from "@chakra-ui/react"; import { GraduateButtonLink, GraduatePreAuthHeader } from "../components"; @@ -24,11 +25,15 @@ interface InfoTextProps { } const LandingPage: NextPage = () => { + const [isMobile] = useMediaQuery("(max-width: 640px)"); + return ( + {isMobile && } +