fixed px values to rem for responsiveness

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

@@ -17,7 +17,7 @@ export const Build: React.FC = () => (
       flexDirection="column"
       justifyContent="center"
       maxWidth="100%"
-      pl={{ base: '0', md: '137px' }}
+      pl={{ base: '0', md: '8.563rem' }}
     >
       <Text
         fontSize="2.375rem"
@@ -33,7 +33,7 @@ export const Build: React.FC = () => (
       </Text>
 
       <Text
-        pt="56px"
+        pt="3.5rem"
         fontSize="2.375rem"
         lineHeight="3.5rem"
         fontWeight="normal"

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

@@ -19,28 +19,33 @@ export const Cards: React.FC = () => (
         display="flex"
         alignItems="center"
         flexDirection="column"
-        pl="76px"
-        pr="76px"
+        pl="4.75rem"
+        pr="4.75rem"
       >
-        <Image maxWidth="220px" pt="153px" pb="40px" src={CardImage} />
-        <Box max-width="327px">
-          <Text pb="40px" fontSize="37px" lineHeight="40px" textAlign="center">
+        <Image maxWidth="13.75rem" pt="9.563rem" pb="2.5rem" src={CardImage} />
+        <Box max-width="20.438rem">
+          <Text
+            pb="2.5rem"
+            fontSize="2.5rem"
+            lineHeight="2.5rem"
+            textAlign="center"
+          >
             PLAYERS
           </Text>
-          <Text fontSize="20px" pb="40px">
+          <Text fontSize="1.25rem" pb="2.5rem">
             MetaGame is for those who want to play an active role in building
             the future.
           </Text>
 
-          <Text pb="20px">For those who want to:</Text>
-          <OrderedList pb="153px" fontSize="20px" lineHeight="32px">
-            <ListItem pb="20px">
+          <Text pb="1.25rem">For those who want to:</Text>
+          <OrderedList pb="9.563rem" fontSize="1.25rem" lineHeight="2rem">
+            <ListItem pb="1.25rem">
               Build their knowledge, get experience & level up.
             </ListItem>
-            <ListItem pb="20px">
+            <ListItem pb="1.25rem">
               Find cool projects, solve problems & get paid.
             </ListItem>
-            <ListItem pb="20px">Become a part of something bigger.</ListItem>
+            <ListItem pb="1.25rem">Become a part of something bigger.</ListItem>
           </OrderedList>
         </Box>
       </Box>
@@ -52,28 +57,33 @@ export const Cards: React.FC = () => (
         display="flex"
         alignItems="center"
         flexDirection="column"
-        pl="76px"
-        pr="76px"
+        pl="4.75rem"
+        pr="4.75rem"
       >
-        <Image maxWidth="220px" pt="153px" pb="40px" src={CardImage} />
-        <Box max-width="327px">
-          <Text pb="40px" fontSize="37px" lineHeight="40px" textAlign="center">
+        <Image maxWidth="13.75rem" pt="9.563rem" pb="2.5rem" src={CardImage} />
+        <Box max-width="20.438rem">
+          <Text
+            pb="2.5rem"
+            fontSize="2.313rem"
+            lineHeight="2.5rem"
+            textAlign="center"
+          >
             GUILDS
           </Text>
-          <Text fontSize="20px" pb="40px">
+          <Text fontSize="1.25rem" pb="2.5rem">
             It's also for groups of people, those building tools & services for
             a decentralized future.
           </Text>
 
-          <Text pb="20px">For those who want</Text>
-          <OrderedList pb="153px" fontSize="20px" lineHeight="32px">
-            <ListItem pb="20px">
+          <Text pb="1.25rem">For those who want</Text>
+          <OrderedList pb="9.563rem" fontSize="1.25rem" lineHeight="2rem">
+            <ListItem pb="1.25rem">
               Help finding tools, frameworks & accessible funds.
             </ListItem>
-            <ListItem pb="20px">
+            <ListItem pb="1.25rem">
               Help getting value-aligned contributors & adopters
             </ListItem>
-            <ListItem pb="20px">
+            <ListItem pb="1.25rem">
               Become part of the "new world" puzzle.
             </ListItem>
           </OrderedList>
@@ -87,28 +97,33 @@ export const Cards: React.FC = () => (
         display="flex"
         alignItems="center"
         flexDirection="column"
-        pl="76px"
-        pr="76px"
+        pl="4.75rem"
+        pr="4.75rem"
       >
-        <Image maxWidth="220px" pt="153px" pb="40px" src={CardImage} />
-        <Box max-width="327px">
-          <Text pb="40px" fontSize="37px" lineHeight="40px" textAlign="center">
+        <Image maxWidth="13.75rem" pt="9.563rem" pb="2.5rem" src={CardImage} />
+        <Box max-width="20.438rem">
+          <Text
+            pb="2.5rem"
+            fontSize="2.313rem"
+            lineHeight="2.5rem"
+            textAlign="center"
+          >
             PATRONS
           </Text>
-          <Text fontSize="20px" pb="40px">
+          <Text fontSize="1.25rem" pb="2.5rem">
             Those who really want to see MetaGame succeed, but prefer to help
             with funds.
           </Text>
 
-          <Text pb="20px">Why?</Text>
-          <OrderedList pb="153px" fontSize="20px" lineHeight="32px">
-            <ListItem pb="20px">
+          <Text pb="1.25rem">Why?</Text>
+          <OrderedList pb="9.563rem" fontSize="1.25rem" lineHeight="2rem">
+            <ListItem pb="1.25rem">
               They love builder onboarding & support systems.
             </ListItem>
-            <ListItem pb="20px">
+            <ListItem pb="1.25rem">
               Membership and other things, all paid in Seeds.
             </ListItem>
-            <ListItem pb="20px">
+            <ListItem pb="1.25rem">
               Understanding MetaGame made them go: Fuck yeah!
             </ListItem>
           </OrderedList>

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

@@ -16,7 +16,7 @@ export const Frontier: React.FC = () => (
       flexDirection="column"
       justifyContent="center"
       maxWidth="100%"
-      pl={{ base: '0', md: '137px' }}
+      pl={{ base: '0', md: '8.563rem' }}
     >
       <Text
         fontSize="2.375rem"
@@ -32,7 +32,7 @@ export const Frontier: React.FC = () => (
       </Text>
 
       <Text
-        pt="56px"
+        pt="3.5rem"
         fontSize="2.375rem"
         lineHeight="3.5rem"
         fontWeight="normal"

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

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

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

@@ -13,7 +13,7 @@ export const Intro: React.FC = () => (
     bgSize="cover"
   >
     <VStack
-      spacing="24px"
+      spacing="1.5rem"
       flexDirection="column"
       justifyContent="flex-end"
       display="flex"
@@ -27,7 +27,7 @@ export const Intro: React.FC = () => (
         fontSize="1rem"
         fontWeight="normal"
         color="white"
-        mt="10px"
+        mt="0.625rem"
         mb="2.188rem"
       >
         A Massive Online Coordination Game

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

@@ -18,7 +18,7 @@ export const JustWatch: React.FC = () => (
       alignItems="center"
       width="100%"
       height="100vh"
-      pb="78px"
+      pb="4.875rem"
       maxWidth="75rem"
       textAlign="center"
     >
@@ -28,8 +28,8 @@ export const JustWatch: React.FC = () => (
         lineHeight="5rem"
         fontWeight="normal"
         color="white"
-        mt="10px"
-        mb="35px"
+        mt="0.625rem"
+        mb="2.188rem"
       >
         The revolution will be televized, but don’t just watch.
       </Text>
@@ -37,7 +37,7 @@ export const JustWatch: React.FC = () => (
         fontWeight="normal"
         fontSize="1.125rem"
         bg="#B40C85"
-        mb="16px"
+        mb="1rem"
         width="17.75rem"
         textTransform="uppercase"
       >

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

@@ -27,13 +27,13 @@ export const Optimal: React.FC = () => (
         color="white"
         maxWidth="75rem"
       >
-        <Text pt="130px" pb="35px" textAlign="center">
+        <Text pt="8.125rem" pb="2.188rem" textAlign="center">
           To find your metagame means to{' '}
           <Text fontWeight="bold" color="cyanText">
             play life in the optimal way.
           </Text>
         </Text>
-        <Box pb="35px">
+        <Box pb="2.188rem">
           <Text>
             By coordinating with others on building a better world; doing things
             that create a{' '}

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

@@ -17,9 +17,9 @@ export const Revolution: React.FC = () => (
       flexDirection="column"
       justifyContent={{ base: 'center', md: 'flex-end' }}
       maxWidth="100%"
-      pl={{ base: '0', md: '137px' }}
+      pl={{ base: '0', md: '8.563rem' }}
       alignItems="flex-end"
-      pr={{ base: '0', md: '116px' }}
+      pr={{ base: '0', md: '7.25rem' }}
     >
       <Text
         fontSize={{ base: '3rem', md: '4.188rem' }}
@@ -28,18 +28,18 @@ export const Revolution: React.FC = () => (
         color="white"
         display="flex"
         flexDirection="column"
-        maxWidth="568px"
+        maxWidth="35.5rem"
       >
         A revolution is happening online;
       </Text>
 
       <Text
-        pt="24px"
+        pt="1.5rem"
         fontSize={{ base: '3rem', md: '4.188rem' }}
         lineHeight="5rem"
         fontWeight="normal"
         color="white"
-        maxWidth="568px"
+        maxWidth="35.5rem"
       >
         will you{' '}
         <Link color="#E839B7" href="#">

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

@@ -28,20 +28,20 @@ export const Together: React.FC = () => (
         bgClip="text"
         maxWidth="75rem"
         display="inline"
-        pb="35px"
-        pt="130px"
+        pb="2.188rem"
+        pt="8.125rem"
         textAlign="center"
       >
-        <Text pb={{ base: '19px', md: '50px' }}>
+        <Text pb={{ base: '1.188rem', md: '3.125rem' }}>
           {' '}
           We are bringing together the people & building blocks aligned on the
           idea of creating a new kind of society.
         </Text>
-        <Text pb={{ base: '19px', md: '50px' }}>
+        <Text pb={{ base: '1.188rem', md: '3.125rem' }}>
           {' '}
           One that is optimized for human wellbeing rather than profit.
         </Text>
-        <Text pb={{ base: '19px', md: '50px' }}>
+        <Text pb={{ base: '1.188rem', md: '3.125rem' }}>
           One that revolves around solving problems & living well, in balance
           with nature.
         </Text>

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

@@ -27,7 +27,7 @@ export const Unplug: React.FC = () => (
         color="white"
         maxWidth="75rem"
       >
-        <Text pt="130px" pb="35px" textAlign="center">
+        <Text pt="8.125rem" pb="2.188rem" textAlign="center">
           So unplug yourself from the matrix & enter the future.
         </Text>
 

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

@@ -22,12 +22,12 @@ export const WhatWeDo: React.FC = () => (
       <Box
         fontSize={{ base: '1.5rem', md: '3rem' }}
         lineHeight={{ base: '2.25rem', md: '4rem' }}
-        maxWidth="999px"
+        maxWidth="62.438rem"
       >
-        <Text pt="130px" pb="35px" fontWeight="700">
+        <Text pt="8.125rem" pb="2.188rem" fontWeight="700">
           What are we doing?
         </Text>
-        <OrderedList pb="35px" fontWeight="300" opacity="0.8">
+        <OrderedList pb="2.188rem" fontWeight="300" opacity="0.8">
           <ListItem>Curating knowledge </ListItem>
           <ListItem>Organizing events</ListItem>
           <ListItem>Producing content</ListItem>

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

@@ -21,13 +21,13 @@ export const Who: React.FC = () => (
       textAlign="center"
     >
       <Box
-        fontSize="67px"
+        fontSize="4.188rem"
         lineHeight="5rem"
         fontWeight="normal"
         color="white"
         maxWidth="75rem"
       >
-        <Text pt="130px" pb="35px" textAlign="center">
+        <Text pt="8.125rem" pb="2.188rem" textAlign="center">
           So, whom is it for?
         </Text>
       </Box>

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

@@ -26,28 +26,28 @@ export const WildWeb: React.FC = () => (
         maxWidth="61.125rem"
       >
         <Text
-          pt={{ base: '16px', md: '130px' }}
-          pb={{ base: '19px', md: '35px' }}
+          pt={{ base: '1rem', md: '8.125rem' }}
+          pb={{ base: '1.188rem', md: '2.188rem' }}
         >
           Web3 technologies are allowing us to{' '}
           <Text fontWeight="bold">reimagine socioeconomic systems</Text> from
           ground up.
         </Text>
-        <Text pb="35px">
+        <Text pb="2.188remx">
           A new world is being built but it’s{' '}
           <Text fontWeight="bold">hard to navigate.</Text>
         </Text>
-        <Text pb="35px">
+        <Text pb="2.188rem">
           The resources, building blocks & tools are all over the place{' '}
           <Text fontWeight="bold">but the maps are inexistent.</Text>
         </Text>
-        <Text pb="35px">
+        <Text pb="2.188rem">
           There are pitfalls, gold rushing cowboys & snake oil salesmen at every
           corner.
         </Text>
 
         <Text
-          pb="35px"
+          pb="2.188rem"
           maxWidth="61.125rem"
           width="100%"
           textTransform="uppercase"