mobile work: WIP

packages/web/components/Landing/sections/Build.tsx

@@ -4,7 +4,8 @@ import BackgroundImage from 'assets/landing/build-background.png';
 const Build: React.FC = () => (
   <Box
     width="100%"
-    minHeight="65rem"
+    minHeight="100%"
+    maxHeight="65rem"
     backgroundImage={`url(${BackgroundImage})`}
     bgPosition="center"
     bgSize="cover"
@@ -16,7 +17,7 @@ const Build: React.FC = () => (
       flexDirection="column"
       justifyContent="center"
       maxWidth="100%"
-      pl="137px"
+      pl={{ base: '0', md: '137px' }}
     >
       <Text
         fontSize="2.375rem"

packages/web/components/Landing/sections/Cards.tsx

@@ -1,4 +1,4 @@
-import { Box, HStack, Image, ListItem, OrderedList, Text } from '@metafam/ds';
+import { Box, Flex, Image, ListItem, OrderedList, Text } from '@metafam/ds';
 import CardBackground from 'assets/landing/card-background.png';
 import CardImage from 'assets/landing/card-image.png';
 
@@ -10,12 +10,12 @@ const Cards: React.FC = () => (
     bgPosition="center"
     bgSize="cover"
   >
-    <HStack spacing={0}>
+    <Flex spacing={0} direction={{ base: 'column', md: 'row' }}>
       <Box
         backgroundImage={`url(${CardBackground})`}
         bgPosition="center"
         bgSize="cover"
-        width="33%"
+        width={{ base: '100%', md: '33%' }}
         display="flex"
         alignItems="center"
         flexDirection="column"
@@ -48,7 +48,7 @@ const Cards: React.FC = () => (
         bgPosition="center"
         bgSize="cover"
         backgroundImage={`url(${CardBackground})`}
-        width="33%"
+        width={{ base: '100%', md: '33%' }}
         display="flex"
         alignItems="center"
         flexDirection="column"
@@ -83,7 +83,7 @@ const Cards: React.FC = () => (
         backgroundImage={`url(${CardBackground})`}
         bgPosition="center"
         bgSize="cover"
-        width="33%"
+        width={{ base: '100%', md: '33%' }}
         display="flex"
         alignItems="center"
         flexDirection="column"
@@ -114,7 +114,7 @@ const Cards: React.FC = () => (
           </OrderedList>
         </Box>
       </Box>
-    </HStack>
+    </Flex>
   </Box>
 );
 

packages/web/components/Landing/sections/Frontier.tsx

@@ -16,7 +16,7 @@ const Frontier: React.FC = () => (
       flexDirection="column"
       justifyContent="center"
       maxWidth="100%"
-      pl="137px"
+      pl={{ base: '0', md: '137px' }}
     >
       <Text
         fontSize="2.375rem"

packages/web/components/Landing/sections/Game.tsx

@@ -4,7 +4,8 @@ import BackgroundImage from 'assets/landing/game-background.png';
 const Game: React.FC = () => (
   <Box
     width="100%"
-    minHeight="65rem"
+    minHeight="100%"
+    maxHeight="65rem"
     backgroundImage={`url(${BackgroundImage})`}
     bgPosition="center"
     bgSize="cover"
@@ -16,10 +17,10 @@ const Game: React.FC = () => (
       flexDirection="column"
       justifyContent="center"
       maxWidth="100%"
-      pl="137px"
+      pl={{ base: '0', md: '137px' }}
     >
       <Text
-        fontSize="2.375rem"
+        fontSize={{ base: '1.5rem', md: '2.375rem' }}
         lineHeight="3.5rem"
         fontWeight="normal"
         color="white"

packages/web/components/Landing/sections/Intro.tsx

@@ -6,7 +6,8 @@ import { FaArrowDown } from 'react-icons/fa';
 const Intro: React.FC = () => (
   <Box
     width="100%"
-    minHeight="65rem"
+    minHeight="100%"
+    maxHeight="65rem"
     backgroundImage={`url(${BackgroundImage})`}
     bgPosition="center"
     bgSize="cover"

packages/web/components/Landing/sections/Revolution.tsx

@@ -4,7 +4,8 @@ import BackgroundImage from 'assets/landing/revolution-background.png';
 const Build: React.FC = () => (
   <Box
     width="100%"
-    minHeight="65rem"
+    minHeight="100%"
+    maxHeight="65rem"
     backgroundImage={`url(${BackgroundImage})`}
     bgPosition="center"
     bgSize="cover"
@@ -14,14 +15,14 @@ const Build: React.FC = () => (
       height="100vh"
       display="flex"
       flexDirection="column"
-      justifyContent="flex-end"
+      justifyContent={{ base: 'center', md: 'flex-end' }}
       maxWidth="100%"
-      pl="137px"
+      pl={{ base: '0', md: '137px' }}
       alignItems="flex-end"
-      pr="116px"
+      pr={{ base: '0', md: '116px' }}
     >
       <Text
-        fontSize="4.188rem"
+        fontSize={{ base: '3rem', md: '4.188rem' }}
         lineHeight="5rem"
         fontWeight="normal"
         color="white"
@@ -34,7 +35,7 @@ const Build: React.FC = () => (
 
       <Text
         pt="24px"
-        fontSize="4.188rem"
+        fontSize={{ base: '3rem', md: '4.188rem' }}
         lineHeight="5rem"
         fontWeight="normal"
         color="white"

packages/web/components/Landing/sections/WildWeb.tsx

@@ -4,9 +4,9 @@ import BackgroundImage from 'assets/landing/wildweb-background.png';
 const WildWeb: React.FC = () => (
   <Box
     width="100%"
-    minHeight="65rem"
+    minHeight="100%"
+    maxHeight="65rem"
     backgroundImage={`url(${BackgroundImage})`}
-    bgPosition="center"
     bgSize="cover"
   >
     <Container
@@ -19,7 +19,7 @@ const WildWeb: React.FC = () => (
       alignItems="center"
     >
       <Box
-        fontSize="3rem"
+        fontSize={{ base: '2rem', md: '3rem' }}
         lineHeight="64px"
         fontWeight="normal"
         color="white"