Feat/landing (#1018)

* Create landing.tsx

testing

* feat:Intro section (initial)

* feat:Intro section (cleanup)

* feat:Intro section (initial)

* Landing: Added second section and necessary assets

* Landing: Added second section and necessary assets

* Landing: cleanup intro

* Landing: Build section done

* Landing: added revolution section. Apologies on naming 🚀

* Big commit: added multiple sections & some minor fixes

* small ui fixed

* Final push on last components next commit

* ui fix

* large commit: added most final sections, one more to go

* added all sections as per mockup.Up next: refactoring and cleanup

* testing

* Create landing.tsx

testing

* feat:Intro section (initial)

* feat:Intro section (cleanup)

* feat:Intro section (initial)

* Landing: Added second section and necessary assets

* Landing: Added second section and necessary assets

* Landing: cleanup intro

* Landing: Build section done

* Landing: added revolution section. Apologies on naming 🚀

* Big commit: added multiple sections & some minor fixes

* small ui fixed

* Final push on last components next commit

* ui fix

* large commit: added most final sections, one more to go

* added all sections as per mockup.Up next: refactoring and cleanup

* testing

* cleanup file structure

* feat: landing ( Improved file structure for landing page and tidied improrts

* fixed imports: importing from design system instead from chakra

* fixed ordered list

* cleanup

* fixed ordered list

* Update packages/web/pages/landing.tsx

Co-authored-by: vidvidvid <35112939+vidvidvid@users.noreply.github.com>

* prettier and cleanup folders

* testing type declaration

* big commit: fixed missing type errors and linting errors

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

* updated node modules

* updated imports

* mobile work: WIP

* more mobile work

* responsiveness changes for last components

* fix

* Trigger Build

* updated intro to fix overlap

* fixed height on sections to full height

* quickfix

* Trigger Build

* content change

* content changes

* fixed exports on components and imports as per linting guidelines )

* fixed px values to rem for responsiveness

Co-authored-by: vidvidvid <35112939+vidvidvid@users.noreply.github.com>

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

@@ -0,0 +1,50 @@
+import { Box, Container, Text } from '@metafam/ds';
+import BackgroundImage from 'assets/landing/build-background.png';
+
+export const Build: React.FC = () => (
+  <Box
+    width="100%"
+    minHeight="100%"
+    maxHeight="100%"
+    backgroundImage={`url(${BackgroundImage})`}
+    bgPosition="center"
+    bgSize="cover"
+  >
+    <Container
+      width="100%"
+      height="100vh"
+      display="flex"
+      flexDirection="column"
+      justifyContent="center"
+      maxWidth="100%"
+      pl={{ base: '0', md: '8.563rem' }}
+    >
+      <Text
+        fontSize="2.375rem"
+        lineHeight="3.5rem"
+        fontWeight="normal"
+        color="white"
+        display="flex"
+        flexDirection="column"
+        maxWidth="32.75rem"
+      >
+        Many have already woken up to the world-shaping potential of Web3
+        technologies.
+      </Text>
+
+      <Text
+        pt="3.5rem"
+        fontSize="2.375rem"
+        lineHeight="3.5rem"
+        fontWeight="normal"
+        color="white"
+        display="flex"
+        flexDirection="column"
+        maxWidth="32.75rem"
+      >
+        Some are grabbing the opportunity to build the future they want to live
+        in.
+      </Text>
+    </Container>
+  </Box>
+);

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

@@ -0,0 +1,134 @@
+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';
+
+export const Cards: React.FC = () => (
+  <Box
+    width="100%"
+    maxHeight="100%"
+    background="dark"
+    bgPosition="center"
+    bgSize="cover"
+  >
+    <Flex spacing={0} direction={{ base: 'column', md: 'row' }}>
+      <Box
+        backgroundImage={`url(${CardBackground})`}
+        bgPosition="center"
+        bgSize="cover"
+        width={{ base: '100%', md: '33%' }}
+        display="flex"
+        alignItems="center"
+        flexDirection="column"
+        pl="4.75rem"
+        pr="4.75rem"
+      >
+        <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="1.25rem" pb="2.5rem">
+            MetaGame is for those who want to play an active role in building
+            the future.
+          </Text>
+
+          <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="1.25rem">
+              Find cool projects, solve problems & get paid.
+            </ListItem>
+            <ListItem pb="1.25rem">Become a part of something bigger.</ListItem>
+          </OrderedList>
+        </Box>
+      </Box>
+      <Box
+        bgPosition="center"
+        bgSize="cover"
+        backgroundImage={`url(${CardBackground})`}
+        width={{ base: '100%', md: '33%' }}
+        display="flex"
+        alignItems="center"
+        flexDirection="column"
+        pl="4.75rem"
+        pr="4.75rem"
+      >
+        <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="1.25rem" pb="2.5rem">
+            It's also for groups of people, those building tools & services for
+            a decentralized future.
+          </Text>
+
+          <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="1.25rem">
+              Help getting value-aligned contributors & adopters
+            </ListItem>
+            <ListItem pb="1.25rem">
+              Become part of the "new world" puzzle.
+            </ListItem>
+          </OrderedList>
+        </Box>
+      </Box>
+      <Box
+        backgroundImage={`url(${CardBackground})`}
+        bgPosition="center"
+        bgSize="cover"
+        width={{ base: '100%', md: '33%' }}
+        display="flex"
+        alignItems="center"
+        flexDirection="column"
+        pl="4.75rem"
+        pr="4.75rem"
+      >
+        <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="1.25rem" pb="2.5rem">
+            Those who really want to see MetaGame succeed, but prefer to help
+            with funds.
+          </Text>
+
+          <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="1.25rem">
+              Membership and other things, all paid in Seeds.
+            </ListItem>
+            <ListItem pb="1.25rem">
+              Understanding MetaGame made them go: Fuck yeah!
+            </ListItem>
+          </OrderedList>
+        </Box>
+      </Box>
+    </Flex>
+  </Box>
+);

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

@@ -0,0 +1,49 @@
+import { Box, Container, Text } from '@metafam/ds';
+import BackgroundImage from 'assets/landing/frontier-background.png';
+
+export const Frontier: React.FC = () => (
+  <Box
+    width="100%"
+    minHeight="100%"
+    maxHeight="100%"
+    backgroundImage={`url(${BackgroundImage})`}
+    backgroundSize={['cover', 'cover']}
+  >
+    <Container
+      width="100%"
+      height="100vh"
+      display="flex"
+      flexDirection="column"
+      justifyContent="center"
+      maxWidth="100%"
+      pl={{ base: '0', md: '8.563rem' }}
+    >
+      <Text
+        fontSize="2.375rem"
+        lineHeight="3.5rem"
+        fontWeight="normal"
+        color="white"
+        display="flex"
+        flexDirection="column"
+        maxWidth="32.75rem"
+      >
+        Many have already woken up to the world-shaping potential of Web3
+        technologies.
+      </Text>
+
+      <Text
+        pt="3.5rem"
+        fontSize="2.375rem"
+        lineHeight="3.5rem"
+        fontWeight="normal"
+        color="white"
+        display="flex"
+        flexDirection="column"
+        maxWidth="32.75rem"
+      >
+        Some are grabbing the opportunity to build the future they want to live
+        in.
+      </Text>
+    </Container>
+  </Box>
+);

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

@@ -0,0 +1,50 @@
+import { Box, Container, Link, Text } from '@metafam/ds';
+import BackgroundImage from 'assets/landing/game-background.png';
+
+export const Game: React.FC = () => (
+  <Box
+    width="100%"
+    minHeight="100%"
+    maxHeight="100%"
+    backgroundImage={`url(${BackgroundImage})`}
+    bgPosition="center"
+    bgSize="cover"
+  >
+    <Container
+      width="100%"
+      height="100vh"
+      display="flex"
+      flexDirection="column"
+      justifyContent="center"
+      maxWidth="100%"
+      pl={{ base: '0', md: '8.563rem' }}
+    >
+      <Text
+        fontSize={{ base: '1.5rem', md: '2.375rem' }}
+        lineHeight="3.5rem"
+        fontWeight="normal"
+        color="white"
+        display="flex"
+        flexDirection="column"
+        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
+        game, or goes beyond the supposed limits or environment set by the
+        game.”
+        <Text textAlign="right">
+          - From{' '}
+          <Link
+            color="#79F8FB"
+            href="#"
+            fontSize="2.375rem"
+            lineHeight="3.5rem"
+            fontWeight="normal"
+          >
+            The Wiki
+          </Link>
+        </Text>
+      </Text>
+    </Container>
+  </Box>
+);

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

@@ -0,0 +1,60 @@
+import { Box, Button, Image, Text, VStack } from '@metafam/ds';
+import BackgroundImage from 'assets/landing/intro-background.png';
+import MetaGameLogo from 'assets/landing/synthlogo-2.svg';
+import { FaArrowDown } from 'react-icons/fa';
+
+export const Intro: React.FC = () => (
+  <Box
+    width="100%"
+    minHeight="100%"
+    maxHeight="100%"
+    backgroundImage={`url(${BackgroundImage})`}
+    bgPosition="center"
+    bgSize="cover"
+  >
+    <VStack
+      spacing="1.5rem"
+      flexDirection="column"
+      justifyContent="flex-end"
+      display="flex"
+      alignItems="center"
+      width="100%"
+      height="100vh"
+      pb="4.875rem"
+    >
+      <Image src={MetaGameLogo} />
+      <Text
+        fontSize="1rem"
+        fontWeight="normal"
+        color="white"
+        mt="0.625rem"
+        mb="2.188rem"
+      >
+        A Massive Online Coordination Game
+      </Text>
+      <Button
+        fontWeight="normal"
+        fontSize="1.125rem"
+        bg="#B40C85"
+        mb="1rem"
+        width="17.75rem"
+        textTransform="uppercase"
+      >
+        Join Nao
+      </Button>
+      <Button
+        fontWeight="normal"
+        fontSize="1.125rem"
+        bg="transparent"
+        border="1px"
+        borderColor="cyanText"
+        color="#79F8FB"
+        width="17.75rem"
+        textTransform="uppercase"
+        rightIcon={<FaArrowDown />}
+      >
+        Explore Moar
+      </Button>
+    </VStack>
+  </Box>
+);

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

@@ -0,0 +1,61 @@
+import { Box, Button, Container, Text } from '@metafam/ds';
+import BackgroundImage from 'assets/landing/just-watch-background.png';
+import { FaArrowDown } from 'react-icons/fa';
+
+export const JustWatch: React.FC = () => (
+  <Box
+    width="100%"
+    minHeight="100%"
+    maxHeight="100%"
+    backgroundImage={`url(${BackgroundImage})`}
+    bgPosition="center"
+    bgSize="cover"
+  >
+    <Container
+      flexDirection="column"
+      justifyContent="flex-end"
+      display="flex"
+      alignItems="center"
+      width="100%"
+      height="100vh"
+      pb="4.875rem"
+      maxWidth="75rem"
+      textAlign="center"
+    >
+      <Text
+        max-width="75rem"
+        fontSize="4.188rem"
+        lineHeight="5rem"
+        fontWeight="normal"
+        color="white"
+        mt="0.625rem"
+        mb="2.188rem"
+      >
+        The revolution will be televized, but don’t just watch.
+      </Text>
+      <Button
+        fontWeight="normal"
+        fontSize="1.125rem"
+        bg="#B40C85"
+        mb="1rem"
+        width="17.75rem"
+        textTransform="uppercase"
+      >
+        Join Nao
+      </Button>
+      <Button
+        fontWeight="normal"
+        fontSize="1.125rem"
+        bg="transparent"
+        border="1px"
+        borderColor="white"
+        color="white"
+        width="17.75rem"
+        textTransform="uppercase"
+        rightIcon={<FaArrowDown />}
+      >
+        Explore Moar
+      </Button>
+    </Container>
+  </Box>
+);

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

@@ -0,0 +1,60 @@
+import { Box, Container, Text } from '@metafam/ds';
+import BackgroundImage from 'assets/landing/optimal-background.png';
+
+export const Optimal: React.FC = () => (
+  <Box
+    width="100%"
+    minHeight="100%"
+    maxHeight="100%"
+    backgroundImage={`url(${BackgroundImage})`}
+    bgPosition="center"
+    bgSize="cover"
+  >
+    <Container
+      width="100%"
+      height="100vh"
+      display="flex"
+      flexDirection="column"
+      justifyContent="center"
+      maxWidth="100%"
+      alignItems="center"
+      textAlign="center"
+    >
+      <Box
+        fontSize={{ base: '2rem', md: '3rem' }}
+        lineHeight={{ base: '3rem', md: '4.5rem' }}
+        fontWeight="normal"
+        color="white"
+        maxWidth="75rem"
+      >
+        <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="2.188rem">
+          <Text>
+            By coordinating with others on building a better world; doing things
+            that create a{' '}
+            <Text as="span" fontWeight="bold" color="cyanText">
+              {' '}
+              a positive impact
+              <br />{' '}
+            </Text>{' '}
+            make
+            <Text as="span" fontWeight="bold" color="cyanText">
+              {' '}
+              you happy{' '}
+            </Text>
+            AND
+            <Text as="span" fontWeight="bold" color="cyanText">
+              {' '}
+              earn you money.
+            </Text>
+          </Text>
+        </Box>
+      </Box>
+    </Container>
+  </Box>
+);

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

@@ -0,0 +1,52 @@
+import { Box, Container, Link, Text } from '@metafam/ds';
+import BackgroundImage from 'assets/landing/revolution-background.png';
+
+export const Revolution: React.FC = () => (
+  <Box
+    width="100%"
+    minHeight="100%"
+    maxHeight="100%"
+    backgroundImage={`url(${BackgroundImage})`}
+    bgPosition="center"
+    bgSize="cover"
+  >
+    <Container
+      width="100%"
+      height="100vh"
+      display="flex"
+      flexDirection="column"
+      justifyContent={{ base: 'center', md: 'flex-end' }}
+      maxWidth="100%"
+      pl={{ base: '0', md: '8.563rem' }}
+      alignItems="flex-end"
+      pr={{ base: '0', md: '7.25rem' }}
+    >
+      <Text
+        fontSize={{ base: '3rem', md: '4.188rem' }}
+        lineHeight="5rem"
+        fontWeight="normal"
+        color="white"
+        display="flex"
+        flexDirection="column"
+        maxWidth="35.5rem"
+      >
+        A revolution is happening online;
+      </Text>
+
+      <Text
+        pt="1.5rem"
+        fontSize={{ base: '3rem', md: '4.188rem' }}
+        lineHeight="5rem"
+        fontWeight="normal"
+        color="white"
+        maxWidth="35.5rem"
+      >
+        will you{' '}
+        <Link color="#E839B7" href="#">
+          join
+        </Link>{' '}
+        or miss out?
+      </Text>
+    </Container>
+  </Box>
+);

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

@@ -0,0 +1,51 @@
+import { Box, Container, Text } from '@metafam/ds';
+import BackgroundImage from 'assets/landing/together-background.png';
+
+export const Together: React.FC = () => (
+  <Box
+    width="100%"
+    minHeight="100%"
+    maxHeight="100%"
+    backgroundImage={`url(${BackgroundImage})`}
+    bgPosition="center"
+    bgSize="cover"
+  >
+    <Container
+      width="100%"
+      height="100vh"
+      display="flex"
+      flexDirection="column"
+      justifyContent="center"
+      maxWidth="75rem"
+      alignItems="center"
+    >
+      <Box
+        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%);                    "
+        bgClip="text"
+        maxWidth="75rem"
+        display="inline"
+        pb="2.188rem"
+        pt="8.125rem"
+        textAlign="center"
+      >
+        <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: '1.188rem', md: '3.125rem' }}>
+          {' '}
+          One that is optimized for human wellbeing rather than profit.
+        </Text>
+        <Text pb={{ base: '1.188rem', md: '3.125rem' }}>
+          One that revolves around solving problems & living well, in balance
+          with nature.
+        </Text>
+      </Box>
+    </Container>
+  </Box>
+);

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

@@ -0,0 +1,38 @@
+import { Box, Container, Text } from '@metafam/ds';
+import BackgroundImage from 'assets/landing/unplug-background.png';
+
+export const Unplug: React.FC = () => (
+  <Box
+    width="100%"
+    minHeight="100%"
+    maxHeight="100%"
+    backgroundImage={`url(${BackgroundImage})`}
+    bgPosition="center"
+    bgSize="cover"
+  >
+    <Container
+      width="100%"
+      height="100vh"
+      display="flex"
+      flexDirection="column"
+      justifyContent="center"
+      maxWidth="100%"
+      alignItems="center"
+      textAlign="center"
+    >
+      <Box
+        fontSize={{ base: '1.5rem', md: '4.188rem' }}
+        lineHeight={{ base: '3rem', md: '5rem' }}
+        fontWeight="normal"
+        color="white"
+        maxWidth="75rem"
+      >
+        <Text pt="8.125rem" pb="2.188rem" textAlign="center">
+          So unplug yourself from the matrix & enter the future.
+        </Text>
+
+        <Text textAlign="center">earn, earn & make a difference.</Text>
+      </Box>
+    </Container>
+  </Box>
+);

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

@@ -0,0 +1,48 @@
+import { Box, Container, ListItem, OrderedList, Text } from '@metafam/ds';
+import BackgroundImage from 'assets/landing/whatWeDo-background.png';
+
+export const WhatWeDo: React.FC = () => (
+  <Box
+    width="100%"
+    minHeight="100%"
+    maxHeight="100%"
+    backgroundImage={`url(${BackgroundImage})`}
+    bgPosition="center"
+    bgSize="cover"
+  >
+    <Container
+      width="100%"
+      height="100vh"
+      display="flex"
+      flexDirection="column"
+      justifyContent="center"
+      maxWidth="100%"
+      alignItems="center"
+    >
+      <Box
+        fontSize={{ base: '1.5rem', md: '3rem' }}
+        lineHeight={{ base: '2.25rem', md: '4rem' }}
+        maxWidth="62.438rem"
+      >
+        <Text pt="8.125rem" pb="2.188rem" fontWeight="700">
+          What are we doing?
+        </Text>
+        <OrderedList pb="2.188rem" fontWeight="300" opacity="0.8">
+          <ListItem>Curating knowledge </ListItem>
+          <ListItem>Organizing events</ListItem>
+          <ListItem>Producing content</ListItem>
+          <ListItem>Building technologies</ListItem>
+          <ListItem>Uniting aligned people & communities </ListItem>
+          <ListItem>
+            Putting together the pieces of the New World puzzle
+          </ListItem>
+        </OrderedList>
+
+        <Text fontWeight="700" width="100%">
+          In short, anything & everything related to DAOs & helping people build
+          the future they want to live in
+        </Text>
+      </Box>
+    </Container>
+  </Box>
+);

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

@@ -0,0 +1,36 @@
+import { Box, Container, Text } from '@metafam/ds';
+import BackgroundImage from 'assets/landing/who-background.png';
+
+export const Who: React.FC = () => (
+  <Box
+    width="100%"
+    minHeight="100%"
+    maxHeight="100%"
+    backgroundImage={`url(${BackgroundImage})`}
+    bgPosition="center"
+    bgSize="cover"
+  >
+    <Container
+      width="100%"
+      height="100vh"
+      display="flex"
+      flexDirection="column"
+      justifyContent="flex-end"
+      maxWidth="100%"
+      alignItems="center"
+      textAlign="center"
+    >
+      <Box
+        fontSize="4.188rem"
+        lineHeight="5rem"
+        fontWeight="normal"
+        color="white"
+        maxWidth="75rem"
+      >
+        <Text pt="8.125rem" pb="2.188rem" textAlign="center">
+          So, whom is it for?
+        </Text>
+      </Box>
+    </Container>
+  </Box>
+);

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

@@ -0,0 +1,60 @@
+import { Box, Container, Text } from '@metafam/ds';
+import BackgroundImage from 'assets/landing/wildweb-background.png';
+
+export const WildWeb: React.FC = () => (
+  <Box
+    width="100%"
+    minHeight="100%"
+    maxHeight="100%"
+    backgroundImage={`url(${BackgroundImage})`}
+    bgSize="cover"
+  >
+    <Container
+      width="100%"
+      height="100vh"
+      display="flex"
+      flexDirection="column"
+      justifyContent="center"
+      maxWidth="100%"
+      alignItems="center"
+    >
+      <Box
+        fontSize={{ base: '1.5rem', md: '3rem' }}
+        lineHeight={{ base: '2.25rem', md: '4rem' }}
+        fontWeight="normal"
+        color="white"
+        maxWidth="61.125rem"
+      >
+        <Text
+          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="2.188remx">
+          A new world is being built but it’s{' '}
+          <Text fontWeight="bold">hard to navigate.</Text>
+        </Text>
+        <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="2.188rem">
+          There are pitfalls, gold rushing cowboys & snake oil salesmen at every
+          corner.
+        </Text>
+
+        <Text
+          pb="2.188rem"
+          maxWidth="61.125rem"
+          width="100%"
+          textTransform="uppercase"
+        >
+          It’s a Wild Web.
+        </Text>
+      </Box>
+    </Container>
+  </Box>
+);

packages/web/pages/landing.tsx

@@ -0,0 +1,38 @@
+import { Build } from 'components/Landing/sections/Build';
+import { Cards } from 'components/Landing/sections/Cards';
+import { Frontier } from 'components/Landing/sections/Frontier';
+import { Game } from 'components/Landing/sections/Game';
+import { Intro } from 'components/Landing/sections/Intro';
+import { JustWatch } from 'components/Landing/sections/JustWatch';
+import { Optimal } from 'components/Landing/sections/Optimal';
+import { Revolution } from 'components/Landing/sections/Revolution';
+import { Together } from 'components/Landing/sections/Together';
+import { Unplug } from 'components/Landing/sections/Unplug';
+import { WhatWeDo } from 'components/Landing/sections/WhatWeDo';
+import { Who } from 'components/Landing/sections/Who';
+import { WildWeb } from 'components/Landing/sections/WildWeb';
+import React from 'react';
+
+export const getStaticProps = async () => ({
+  props: {
+    hideTopMenu: true,
+  },
+});
+const Landing: React.FC = () => (
+  <div>
+    <Intro />
+    <Game />
+    <Build />
+    <Revolution />
+    <WildWeb />
+    <Frontier />
+    <Together />
+    <WhatWeDo />
+    <Optimal />
+    <Unplug />
+    <Who />
+    <Cards />
+    <JustWatch />
+  </div>
+);
+export default Landing;