responsiveness changes for last components

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

@@ -7,8 +7,6 @@ const Frontier: React.FC = () => (
     minHeight="100%"
     maxHeight="65rem"
     backgroundImage={`url(${BackgroundImage})`}
-    bgPosition="center"
-    bgSize="cover"
   >
     <Container
       width="100%"

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

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

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

@@ -4,7 +4,8 @@ import BackgroundImage from 'assets/landing/optimal-background.png';
 const Optimal: React.FC = () => (
   <Box
     width="100%"
-    minHeight="65rem"
+    minHeight="100%"
+    maxHeight="65rem"
     backgroundImage={`url(${BackgroundImage})`}
     bgPosition="center"
     bgSize="cover"
@@ -20,8 +21,8 @@ const Optimal: React.FC = () => (
       textAlign="center"
     >
       <Box
-        fontSize="3rem"
-        lineHeight="72px"
+        fontSize={{ base: '2rem', md: '3rem' }}
+        lineHeight={{ base: '3rem', md: '4.5rem' }}
         fontWeight="normal"
         color="white"
         maxWidth="75rem"

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

@@ -20,8 +20,8 @@ const Together: React.FC = () => (
       alignItems="center"
     >
       <Box
-        fontSize="3rem"
-        lineHeight="64px"
+        fontSize={{ base: '1.5rem', md: '3rem' }}
+        lineHeight={{ base: '2.25rem', md: '4rem' }}
         fontWeight="normal"
         color="white"
         bgGradient=" linear-gradient(180deg, #FFFFFF 15.3%, #FD208A 85.41%);                    "

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

@@ -4,7 +4,8 @@ import BackgroundImage from 'assets/landing/unplug-background.png';
 const Unplug: React.FC = () => (
   <Box
     width="100%"
-    minHeight="65rem"
+    minHeight="100%"
+    maxHeight="65rem"
     backgroundImage={`url(${BackgroundImage})`}
     bgPosition="center"
     bgSize="cover"
@@ -20,8 +21,8 @@ const Unplug: React.FC = () => (
       textAlign="center"
     >
       <Box
-        fontSize="4.188rem"
-        lineHeight="5rem"
+        fontSize={{ base: '1.5rem', md: '4.188rem' }}
+        lineHeight={{ base: '3rem', md: '5rem' }}
         fontWeight="normal"
         color="white"
         maxWidth="75rem"

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

@@ -4,7 +4,8 @@ import BackgroundImage from 'assets/landing/whatWeDo-background.png';
 const WhatWeDo: React.FC = () => (
   <Box
     width="100%"
-    minHeight="65rem"
+    minHeight="100%"
+    maxHeight="65rem"
     backgroundImage={`url(${BackgroundImage})`}
     bgPosition="center"
     bgSize="cover"
@@ -18,7 +19,11 @@ const WhatWeDo: React.FC = () => (
       maxWidth="100%"
       alignItems="center"
     >
-      <Box fontSize="40px" lineHeight="64px" maxWidth="999px">
+      <Box
+        fontSize={{ base: '1.5rem', md: '3rem' }}
+        lineHeight={{ base: '2.25rem', md: '4rem' }}
+        maxWidth="999px"
+      >
         <Text pt="130px" pb="35px" fontWeight="700">
           What are we doing?
         </Text>

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

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

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

@@ -19,8 +19,8 @@ const WildWeb: React.FC = () => (
       alignItems="center"
     >
       <Box
-        fontSize={{ base: '2rem', md: '3rem' }}
-        lineHeight="64px"
+        fontSize={{ base: '1.5rem', md: '3rem' }}
+        lineHeight={{ base: '2.25rem', md: '4rem' }}
         fontWeight="normal"
         color="white"
         maxWidth="61.125rem"