removed px values + rem (used colors as per design system )

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

@@ -4,7 +4,7 @@ import BackgroundImage from 'assets/landing/build-background.png';
 const Build: React.FC = () => (
   <Box
     width="100%"
-    minHeight="1040px"
+    minHeight="65rem"
     backgroundImage={`url(${BackgroundImage})`}
     bgPosition="center"
     bgSize="cover"
@@ -19,13 +19,13 @@ const Build: React.FC = () => (
       pl="137px"
     >
       <Text
-        fontSize="38px"
-        lineHeight="56px"
+        fontSize="2.375rem"
+        lineHeight="3.5rem"
         fontWeight="normal"
         color="white"
         display="flex"
         flexDirection="column"
-        maxWidth="524px"
+        maxWidth="32.75rem"
       >
         Many have already woken up to the world-shaping potential of Web3
         technologies.
@@ -33,13 +33,13 @@ const Build: React.FC = () => (
 
       <Text
         pt="56px"
-        fontSize="38px"
-        lineHeight="56px"
+        fontSize="2.375rem"
+        lineHeight="3.5rem"
         fontWeight="normal"
         color="white"
         display="flex"
         flexDirection="column"
-        maxWidth="524px"
+        maxWidth="32.75rem"
       >
         Some are grabbing the opportunity to build the future they want to live
         in.

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

@@ -5,7 +5,7 @@ import CardImage from 'assets/landing/card-image.png';
 const Cards: React.FC = () => (
   <Box
     width="100%"
-    minHeight="1040px"
+    minHeight="65rem"
     background="dark"
     bgPosition="center"
     bgSize="cover"

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

@@ -4,7 +4,7 @@ import BackgroundImage from 'assets/landing/frontier-background.png';
 const Frontier: React.FC = () => (
   <Box
     width="100%"
-    minHeight="1040px"
+    minHeight="65rem"
     backgroundImage={`url(${BackgroundImage})`}
     bgPosition="center"
     bgSize="cover"
@@ -19,13 +19,13 @@ const Frontier: React.FC = () => (
       pl="137px"
     >
       <Text
-        fontSize="38px"
-        lineHeight="56px"
+        fontSize="2.375rem"
+        lineHeight="3.5rem"
         fontWeight="normal"
         color="white"
         display="flex"
         flexDirection="column"
-        maxWidth="524px"
+        maxWidth="32.75rem"
       >
         Many have already woken up to the world-shaping potential of Web3
         technologies.
@@ -33,13 +33,13 @@ const Frontier: React.FC = () => (
 
       <Text
         pt="56px"
-        fontSize="38px"
-        lineHeight="56px"
+        fontSize="2.375rem"
+        lineHeight="3.5rem"
         fontWeight="normal"
         color="white"
         display="flex"
         flexDirection="column"
-        maxWidth="524px"
+        maxWidth="32.75rem"
       >
         Some are grabbing the opportunity to build the future they want to live
         in.

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

@@ -4,7 +4,7 @@ import BackgroundImage from 'assets/landing/game-background.png';
 const Game: React.FC = () => (
   <Box
     width="100%"
-    minHeight="1040px"
+    minHeight="65rem"
     backgroundImage={`url(${BackgroundImage})`}
     bgPosition="center"
     bgSize="cover"
@@ -19,13 +19,13 @@ const Game: React.FC = () => (
       pl="137px"
     >
       <Text
-        fontSize="38px"
-        lineHeight="56px"
+        fontSize="2.375rem"
+        lineHeight="3.5rem"
         fontWeight="normal"
         color="white"
         display="flex"
         flexDirection="column"
-        maxWidth="524px"
+        maxWidth="32.75rem"
       >
         “Metagame is any approach to a game that transcends or operates outside
         of the prescribed rules of the game, uses external factors to affect the
@@ -36,8 +36,8 @@ const Game: React.FC = () => (
           <Link
             color="#79F8FB"
             href="#"
-            fontSize="38px"
-            lineHeight="56px"
+            fontSize="2.375rem"
+            lineHeight="3.5rem"
             fontWeight="normal"
           >
             The Wiki

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

@@ -6,7 +6,7 @@ import { FaArrowDown } from 'react-icons/fa';
 const Intro: React.FC = () => (
   <Box
     width="100%"
-    minHeight="1040px"
+    minHeight="65rem"
     backgroundImage={`url(${BackgroundImage})`}
     bgPosition="center"
     bgSize="cover"
@@ -18,7 +18,7 @@ const Intro: React.FC = () => (
       alignItems="center"
       width="100%"
       height="100vh"
-      pb="78px"
+      pb="4.875rem"
     >
       <Image src={MetaGameLogo} />
       <Text
@@ -26,28 +26,28 @@ const Intro: React.FC = () => (
         fontWeight="normal"
         color="white"
         mt="10px"
-        mb="35px"
+        mb="2.188rem"
       >
         A Massive Online Coordination Game
       </Text>
       <Button
         fontWeight="normal"
-        fontSize="18px"
+        fontSize="1.125rem"
         bg="#B40C85"
         mb="16px"
-        width="284px"
+        width="17.75rem"
         textTransform="uppercase"
       >
         Join Nao
       </Button>
       <Button
         fontWeight="normal"
-        fontSize="18px"
+        fontSize="1.125rem"
         bg="transparent"
         border="1px"
-        borderColor="#79F8FB"
+        borderColor="cyanText"
         color="#79F8FB"
-        width="284px"
+        width="17.75rem"
         textTransform="uppercase"
         rightIcon={<FaArrowDown />}
       >

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

@@ -5,7 +5,7 @@ import { FaArrowDown } from 'react-icons/fa';
 const JustWatch: React.FC = () => (
   <Box
     width="100%"
-    minHeight="1040px"
+    minHeight="65rem"
     backgroundImage={`url(${BackgroundImage})`}
     bgPosition="center"
     bgSize="cover"
@@ -18,13 +18,13 @@ const JustWatch: React.FC = () => (
       width="100%"
       height="100vh"
       pb="78px"
-      maxWidth="1200px"
+      maxWidth="75rem"
       textAlign="center"
     >
       <Text
-        max-width="1200px"
-        fontSize="76px"
-        lineHeight="80px"
+        max-width="75rem"
+        fontSize="4.188rem"
+        lineHeight="5rem"
         fontWeight="normal"
         color="white"
         mt="10px"
@@ -34,22 +34,22 @@ const JustWatch: React.FC = () => (
       </Text>
       <Button
         fontWeight="normal"
-        fontSize="18px"
+        fontSize="1.125rem"
         bg="#B40C85"
         mb="16px"
-        width="284px"
+        width="17.75rem"
         textTransform="uppercase"
       >
         Join Nao
       </Button>
       <Button
         fontWeight="normal"
-        fontSize="18px"
+        fontSize="1.125rem"
         bg="transparent"
         border="1px"
         borderColor="white"
         color="white"
-        width="284px"
+        width="17.75rem"
         textTransform="uppercase"
         rightIcon={<FaArrowDown />}
       >

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

@@ -4,7 +4,7 @@ import BackgroundImage from 'assets/landing/optimal-background.png';
 const Optimal: React.FC = () => (
   <Box
     width="100%"
-    minHeight="1040px"
+    minHeight="65rem"
     backgroundImage={`url(${BackgroundImage})`}
     bgPosition="center"
     bgSize="cover"
@@ -20,15 +20,15 @@ const Optimal: React.FC = () => (
       textAlign="center"
     >
       <Box
-        fontSize="48px"
+        fontSize="3rem"
         lineHeight="72px"
         fontWeight="normal"
         color="white"
-        maxWidth="1200px"
+        maxWidth="75rem"
       >
         <Text pt="130px" pb="35px" textAlign="center">
           To find your metagame means to{' '}
-          <Text fontWeight="bold" color="#79F8FB">
+          <Text fontWeight="bold" color="cyanText">
             play life in the optimal way.
           </Text>
         </Text>
@@ -36,18 +36,18 @@ const Optimal: React.FC = () => (
           <Text>
             By coordinating with others on building a better world; doing things
             that create a{' '}
-            <Text as="span" fontWeight="bold" color="#79F8FB">
+            <Text as="span" fontWeight="bold" color="cyanText">
               {' '}
               a positive impact
               <br />{' '}
             </Text>{' '}
             make
-            <Text as="span" fontWeight="bold" color="#79F8FB">
+            <Text as="span" fontWeight="bold" color="cyanText">
               {' '}
               you happy{' '}
             </Text>
             AND
-            <Text as="span" fontWeight="bold" color="#79F8FB">
+            <Text as="span" fontWeight="bold" color="cyanText">
               {' '}
               earn you money.
             </Text>

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

@@ -4,7 +4,7 @@ import BackgroundImage from 'assets/landing/revolution-background.png';
 const Build: React.FC = () => (
   <Box
     width="100%"
-    minHeight="1040px"
+    minHeight="65rem"
     backgroundImage={`url(${BackgroundImage})`}
     bgPosition="center"
     bgSize="cover"
@@ -21,8 +21,8 @@ const Build: React.FC = () => (
       pr="116px"
     >
       <Text
-        fontSize="67px"
-        lineHeight="80px"
+        fontSize="4.188rem"
+        lineHeight="5rem"
         fontWeight="normal"
         color="white"
         display="flex"
@@ -34,8 +34,8 @@ const Build: React.FC = () => (
 
       <Text
         pt="24px"
-        fontSize="67px"
-        lineHeight="80px"
+        fontSize="4.188rem"
+        lineHeight="5rem"
         fontWeight="normal"
         color="white"
         maxWidth="568px"

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

@@ -4,7 +4,7 @@ import BackgroundImage from 'assets/landing/together-background.png';
 const Together: React.FC = () => (
   <Box
     width="100%"
-    minHeight="1040px"
+    minHeight="65rem"
     backgroundImage={`url(${BackgroundImage})`}
     bgPosition="center"
     bgSize="cover"
@@ -15,17 +15,17 @@ const Together: React.FC = () => (
       display="flex"
       flexDirection="column"
       justifyContent="center"
-      maxWidth="1200px"
+      maxWidth="75rem"
       alignItems="center"
     >
       <Box
-        fontSize="48px"
+        fontSize="3rem"
         lineHeight="64px"
         fontWeight="normal"
         color="white"
         bgGradient=" linear-gradient(180deg, #FFFFFF 15.3%, #FD208A 85.41%);                    "
         bgClip="text"
-        maxWidth="1200px"
+        maxWidth="75rem"
         display="inline"
         pb="35px"
         pt="130px"

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

@@ -4,7 +4,7 @@ import BackgroundImage from 'assets/landing/unplug-background.png';
 const Unplug: React.FC = () => (
   <Box
     width="100%"
-    minHeight="1040px"
+    minHeight="65rem"
     backgroundImage={`url(${BackgroundImage})`}
     bgPosition="center"
     bgSize="cover"
@@ -20,11 +20,11 @@ const Unplug: React.FC = () => (
       textAlign="center"
     >
       <Box
-        fontSize="67px"
-        lineHeight="80px"
+        fontSize="4.188rem"
+        lineHeight="5rem"
         fontWeight="normal"
         color="white"
-        maxWidth="1200px"
+        maxWidth="75rem"
       >
         <Text pt="130px" pb="35px" textAlign="center">
           So unplug yourself from the matrix & enter the future.

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

@@ -4,7 +4,7 @@ import BackgroundImage from 'assets/landing/whatWeDo-background.png';
 const WhatWeDo: React.FC = () => (
   <Box
     width="100%"
-    minHeight="1040px"
+    minHeight="65rem"
     backgroundImage={`url(${BackgroundImage})`}
     bgPosition="center"
     bgSize="cover"

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

@@ -4,7 +4,7 @@ import BackgroundImage from 'assets/landing/who-background.png';
 const Who: React.FC = () => (
   <Box
     width="100%"
-    minHeight="1040px"
+    minHeight="65rem"
     backgroundImage={`url(${BackgroundImage})`}
     bgPosition="center"
     bgSize="cover"
@@ -21,10 +21,10 @@ const Who: React.FC = () => (
     >
       <Box
         fontSize="67px"
-        lineHeight="80px"
+        lineHeight="5rem"
         fontWeight="normal"
         color="white"
-        maxWidth="1200px"
+        maxWidth="75rem"
       >
         <Text pt="130px" pb="35px" textAlign="center">
           So, whom is it for?

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

@@ -4,7 +4,7 @@ import BackgroundImage from 'assets/landing/wildweb-background.png';
 const WildWeb: React.FC = () => (
   <Box
     width="100%"
-    minHeight="1040px"
+    minHeight="65rem"
     backgroundImage={`url(${BackgroundImage})`}
     bgPosition="center"
     bgSize="cover"
@@ -19,11 +19,11 @@ const WildWeb: React.FC = () => (
       alignItems="center"
     >
       <Box
-        fontSize="48px"
+        fontSize="3rem"
         lineHeight="64px"
         fontWeight="normal"
         color="white"
-        maxWidth="978px"
+        maxWidth="61.125rem"
       >
         <Text pt="130px" pb="35px">
           Web3 technologies are allowing us to{' '}
@@ -43,7 +43,12 @@ const WildWeb: React.FC = () => (
           corner.
         </Text>
 
-        <Text pb="35px" maxWidth="978px" width="100%" textTransform="uppercase">
+        <Text
+          pb="35px"
+          maxWidth="61.125rem"
+          width="100%"
+          textTransform="uppercase"
+        >
           It’s a Wild Web.
         </Text>
       </Box>