layout

Author: Anton-Mushnin

frontend/pages/index.js

@@ -138,13 +138,15 @@ const Homepage = () => {
           id="page:landing"
           bgColor={BACKGROUND_COLOR}
           textColor="white"
+          px="7%"
         >
           <Flex
             direction="column"
             h="auto"
             position="relative"
-            w="100%"
+            maxW="1238px"
             overflow="initial"
+            mx="auto"
             pt={0}
           >
             <Suspense fallback={""}></Suspense>
@@ -166,17 +168,12 @@ const Homepage = () => {
                       align="center"
                       justify="center"
                       boxSize="full"
-                      pt={["90px", "142px"]}
+                      pt={["130px", "152px"]}
                       pb={10}
                       px="5%"
                       flexDir="column"
                     >
-                      <Stack
-                        textAlign="center"
-                        alignItems="center"
-                        maxW={["1620px", null, null, null, "1620px", "2222px"]}
-                        w="100%"
-                      >
+                      <Stack textAlign="center" alignItems="center" w="100%">
                         <Link
                           mb="60px"
                           isExternal
@@ -222,6 +219,7 @@ const Homepage = () => {
                             "row",
                           ]}
                           pb={10}
+                          fontSize={["16px", "16px", "20px"]}
                         >
                           <Center>
                             <Button
@@ -336,12 +334,7 @@ const Homepage = () => {
                 </chakra.header>
               </GridItem>
 
-              <GridItem
-                px={["5%", null, "12%", "15%"]}
-                py={(4, 8)}
-                colSpan="12"
-                bgColor={BACKGROUND_COLOR}
-              >
+              <GridItem py={(4, 8)} colSpan="12" bgColor={BACKGROUND_COLOR}>
                 <VStack
                   bgColor="white"
                   rounded="3xl"
@@ -478,7 +471,6 @@ const Homepage = () => {
                 </VStack>
               </GridItem>
               <GridItem
-                px={["5%", null, "12%", "15%"]}
                 colSpan="12"
                 pt={12}
                 bgColor={BACKGROUND_COLOR}
@@ -581,12 +573,7 @@ const Homepage = () => {
                   </Stack>
                 </Center>
               </GridItem>
-              <GridItem
-                px={["7%", null, "12%", "15%"]}
-                py={[4, 10]}
-                colSpan="12"
-                bgColor={BACKGROUND_COLOR}
-              >
+              <GridItem py={[4, 10]} colSpan="12" bgColor={BACKGROUND_COLOR}>
                 <Heading
                   {...HEADING_PROPS}
                   textAlign="center"
@@ -599,7 +586,7 @@ const Homepage = () => {
                   textAlign="center"
                   direction={["column", "column", "row"]}
                 >
-                  <VStack alignItems="center" px={4} py={4}>
+                  <VStack alignItems="center" pr={4} py={4}>
                     <Flex mb={5}>
                       <Heading
                         as="h3"
@@ -664,7 +651,7 @@ const Homepage = () => {
                       </chakra.span>
                     </Flex>
                   </VStack>
-                  <VStack alignItems="center" px={4} py={4}>
+                  <VStack alignItems="center" pl={4} py={4}>
                     <Center
                       mb={5}
                       w="100%"
@@ -709,12 +696,7 @@ const Homepage = () => {
                   </Text>
                 </Center>
               </GridItem>
-              <GridItem
-                px={["5%", null, "12%", "15%"]}
-                py={[4, 10]}
-                colSpan="12"
-                bgColor={BACKGROUND_COLOR}
-              >
+              <GridItem py={[4, 10]} colSpan="12" bgColor={BACKGROUND_COLOR}>
                 <Heading {...HEADING_PROPS} textAlign="center" as="h2" pb={10}>
                   FAQ
                 </Heading>
@@ -911,7 +893,6 @@ const Homepage = () => {
                 </Accordion>
               </GridItem>
               <GridItem
-                px="7%"
                 py={10}
                 colSpan="12"
                 bgColor={BACKGROUND_COLOR}
@@ -981,13 +962,7 @@ const Homepage = () => {
                   </Flex>
                 </Center>
               </GridItem>
-              <GridItem
-                px="7%"
-                pt={10}
-                pb={20}
-                colSpan="12"
-                bgColor={BACKGROUND_COLOR}
-              >
+              <GridItem pt={10} pb={20} colSpan="12" bgColor={BACKGROUND_COLOR}>
                 <Stack
                   direction={["column", "column", "row"]}
                   alignItems="center"

frontend/src/components/Footer.js

@@ -66,8 +66,10 @@ const Footer = () => {
       borderTop="1px"
       borderColor="white"
       px="7%"
+      // maxW="1238px"
+      mx="auto"
     >
-      <Container as={Stack} maxW={"8xl"} py={10}>
+      <Container as={Stack} py={10} px="0px" maxW="1238px">
         <Flex direction={["column", "column", "row"]}>
           <Stack spacing={6}>
             <Box pb={ui.isMobileView ? "40px" : "0px"}>
@@ -95,7 +97,11 @@ const Footer = () => {
             )}
           </Stack>
           <Spacer />
-          <Flex direction="column" pb={ui.isMobileView ? "40px" : "0px"}>
+          <Flex
+            direction="column"
+            pb={ui.isMobileView ? "40px" : "0px"}
+            ml={["0px", "0px", "5vw", "100px"]}
+          >
             <Text fontWeight="semibold" mb="20px">
               Follow Us
             </Text>
@@ -143,7 +149,7 @@ const Footer = () => {
             {Object.values(SITEMAP).map((category, colIndex) => {
               return (
                 <Stack
-                  ml={["0px", "0px", "100px"]}
+                  ml={["0px", "0px", "5vw", "100px"]}
                   align={"flex-start"}
                   key={`footer-list-column-${colIndex}`}
                 >

frontend/src/components/LandingNavbar.js

@@ -31,14 +31,10 @@ const LandingNavbar = () => {
     <>
       {ui.isMobileView && <LandingBarMobile />}
       {!ui.isMobileView && (
-        <>
+        <Flex px="7%" w="100%" justifyContent="space-between">
           <Flex
-            pl={ui.isMobileView ? 2 : "60px"}
             justifySelf="flex-start"
-            h={ui.isMobileView && !ui.isAppView ? "89px" : "72px"}
             py={1}
-            flexBasis="200px"
-            flexGrow={0.6}
             id="Logo Container"
             alignItems="center"
           >
@@ -52,7 +48,7 @@ const LandingNavbar = () => {
               />
             </RouterLink>
           </Flex>
-          <ButtonGroup variant="link" spacing={4} pr={16} flexGrow={0.5}>
+          <ButtonGroup variant="link" spacing={4}>
             {SITEMAP.map((item, idx) => {
               return (
                 <React.Fragment key={`Fragment-${idx}`}>
@@ -128,7 +124,7 @@ const LandingNavbar = () => {
               );
             })}
           </ButtonGroup>
-          <ButtonGroup variant="link" spacing={4} pr={16}>
+          <ButtonGroup variant="link" spacing={4} minW="160px">
             {ui.isLoggedIn && (
               <RouterLink href="/welcome" passHref>
                 <Box
@@ -180,7 +176,7 @@ const LandingNavbar = () => {
               <ChakraAccountIconButton variant="link" colorScheme="orange" />
             )}
           </ButtonGroup>
-        </>
+        </Flex>
       )}
     </>
   );