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

packages/web/components/Landing/Cards.tsx

@@ -0,0 +1,114 @@
+import {
+    Box,
+    Text,
+    Image,
+    HStack,
+    ListItem,
+    UnorderedList,
+} from "@chakra-ui/react"
+import CardBackground from 'assets/landing/card-background.png'
+import CardImage from 'assets/landing/card-image.png'
+
+
+function Intro() {
+    return (
+        <Box
+            width="100%"
+            minHeight="1040px"
+            background="#1B0D2A"
+            bgPosition="center"
+            bgSize="cover"
+        >
+
+            <HStack spacing={0}>
+                <Box
+                    backgroundImage={`url(${CardBackground})`}
+                    bgPosition="center"
+                    bgSize="cover"
+                    width="33%"
+                    display="flex"
+                    alignItems="center"
+                    flexDirection="column"
+                    pl="76px"
+                    pr="76px"
+                >
+                    <Image maxWidth="220px" pt="153px" pb="40px"
+                        src={CardImage} />
+                    <Box max-width="327px">
+                        <Text pb="40px" fontSize="37px" lineHeight="40px" textAlign="center">PLAYERS</Text>
+                        <Text fontSize="20px" pb="40px">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>
+                        <UnorderedList pb="153px" fontSize="20px" lineHeight="32px">
+                            <ListItem pb="20px" >Build their knowledge, get experience & level up.</ListItem>
+                            <ListItem pb="20px" >Find cool projects, solve problems & get paid.</ListItem>
+                            <ListItem pb="20px" >Become a part of something bigger.</ListItem>
+
+                        </UnorderedList>
+                    </Box>
+                </Box>
+                <Box
+                      bgPosition="center"
+                      bgSize="cover"
+                    backgroundImage={`url(${CardBackground})`}
+                    bgPosition="center"
+                    bgSize="cover"
+                    width="33%"
+                    display="flex"
+                    alignItems="center"
+                    flexDirection="column"
+                    pl="76px"
+                    pr="76px"
+                >
+                    <Image maxWidth="220px" pt="153px" pb="40px"
+                        src={CardImage} />
+                    <Box max-width="327px">
+                        <Text pb="40px" fontSize="37px" lineHeight="40px" textAlign="center">GUILDS</Text>
+                        <Text fontSize="20px" pb="40px">It's also for groups of people, those building tools & services for a decentralized future.</Text>
+
+                        <Text pb="20px">For those who want to:</Text>
+                        <UnorderedList pb="153px" fontSize="20px" lineHeight="32px">
+                            <ListItem pb="20px" >Help finding tools, frameworks & funds accessible.</ListItem>
+                            <ListItem pb="20px" >Help getting value-aligned contributors & adopters</ListItem>
+                            <ListItem pb="20px" >Become a part of the "new world" puzzle.</ListItem>
+
+                        </UnorderedList>
+                    </Box>
+                </Box>
+                <Box
+                      bgPosition="center"
+                      bgSize="cover"
+                    backgroundImage={`url(${CardBackground})`}
+                    bgPosition="center"
+                    bgSize="cover"
+                    width="33%"
+                    display="flex"
+                    alignItems="center"
+                    flexDirection="column"
+                    pl="76px"
+                    pr="76px"
+                >
+                    <Image maxWidth="220px" pt="153px" pb="40px"
+                        src={CardImage} />
+                    <Box max-width="327px">
+                        <Text pb="40px" fontSize="37px" lineHeight="40px" textAlign="center">PATRONS</Text>
+                        <Text fontSize="20px" pb="40px">Those who really want to see MetaGame succeed, but prefer to help with funds.</Text>
+
+                        <Text pb="20px">Why?</Text>
+                        <UnorderedList pb="153px" fontSize="20px" lineHeight="32px">
+                            <ListItem pb="20px" >They love builder onboarding & support systems.</ListItem>
+                            <ListItem pb="20px" >Membership and other things, all paid in Seeds.</ListItem>
+                            <ListItem pb="20px" >Understanding MetaGame made them go: Fuck yeah!</ListItem>
+
+                        </UnorderedList>
+                    </Box>
+                </Box>
+
+            </HStack>
+
+
+        </Box>
+    );
+}
+
+export default Intro;

packages/web/components/Landing/Intro.tsx

@@ -30,7 +30,7 @@ function Intro() {
         <Image
           src={MetaGameLogo} />
         <Text
-         fontSize="16px" s
+         fontSize="16px" 
          fontWeight="normal"
           color="white"
            mt="10px"

packages/web/pages/landing.tsx

@@ -11,6 +11,7 @@ import Optimal from '../components/Landing/Optimal';
 import Unplug from '../components/Landing/Unplug';
 import Who from '../components/Landing/Who';
 import JustWatch from '../components/Landing/JustWatch';
+import Cards from '../components/Landing/Cards';
 
 function Landing(): JSX.Element {
   return <div>
@@ -25,7 +26,9 @@ function Landing(): JSX.Element {
     <Optimal />#
     <Unplug />
     <Who />
+    <Cards /> 
     <JustWatch />
+
   </div>;
 }