mirror of
https://github.com/MetaFam/TheGame.git
synced 2026-04-24 03:00:09 -04:00
big commit: fixed missing type errors and linting errors
This commit is contained in:
Tommy
@@ -1,7 +1,7 @@
|
||||
import { Box, Container, Text } from '@metafam/ds';
|
||||
import BackgroundImage from 'assets/landing/build-background.png';
|
||||
|
||||
export const Build: React.FC = () => (
|
||||
const Build: React.FC = () => (
|
||||
<Box
|
||||
width="100%"
|
||||
minHeight="1040px"
|
||||
@@ -20,7 +20,7 @@ export const Build: React.FC = () => (
|
||||
>
|
||||
<Text
|
||||
fontSize="38px"
|
||||
LineHeight="56px"
|
||||
lineHeight="56px"
|
||||
fontWeight="normal"
|
||||
color="white"
|
||||
display="flex"
|
||||
@@ -34,7 +34,7 @@ export const Build: React.FC = () => (
|
||||
<Text
|
||||
pt="56px"
|
||||
fontSize="38px"
|
||||
LineHeight="56px"
|
||||
lineHeight="56px"
|
||||
fontWeight="normal"
|
||||
color="white"
|
||||
display="flex"
|
||||
|
||||
@@ -2,137 +2,120 @@ import { Box, HStack, Image, ListItem, OrderedList, Text } from '@metafam/ds';
|
||||
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>
|
||||
const Cards: React.FC = () => (
|
||||
<Box
|
||||
width="100%"
|
||||
minHeight="1040px"
|
||||
background="dark"
|
||||
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>
|
||||
<OrderedList 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>
|
||||
</OrderedList>
|
||||
</Box>
|
||||
<Text pb="20px">For those who want to:</Text>
|
||||
<OrderedList 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>
|
||||
</OrderedList>
|
||||
</Box>
|
||||
<Box
|
||||
bgPosition="center"
|
||||
bgSize="cover"
|
||||
backgroundImage={`url(${CardBackground})`}
|
||||
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>
|
||||
</Box>
|
||||
<Box
|
||||
bgPosition="center"
|
||||
bgSize="cover"
|
||||
backgroundImage={`url(${CardBackground})`}
|
||||
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>
|
||||
<OrderedList 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>
|
||||
</OrderedList>
|
||||
</Box>
|
||||
<Text pb="20px">For those who want to:</Text>
|
||||
<OrderedList 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>
|
||||
</OrderedList>
|
||||
</Box>
|
||||
<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"
|
||||
>
|
||||
PATRONS
|
||||
</Text>
|
||||
<Text fontSize="20px" pb="40px">
|
||||
Those who really want to see MetaGame succeed, but prefer to help
|
||||
with funds.
|
||||
</Text>
|
||||
</Box>
|
||||
<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">
|
||||
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>
|
||||
<OrderedList 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>
|
||||
</OrderedList>
|
||||
</Box>
|
||||
<Text pb="20px">Why?</Text>
|
||||
<OrderedList 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>
|
||||
</OrderedList>
|
||||
</Box>
|
||||
</HStack>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
</Box>
|
||||
</HStack>
|
||||
</Box>
|
||||
);
|
||||
|
||||
export default Intro;
|
||||
export default Cards;
|
||||
|
||||
@@ -1,52 +1,51 @@
|
||||
import { Box, Container, Text } from '@metafam/ds';
|
||||
import BackgroundImage from 'assets/landing/frontier-background.png';
|
||||
|
||||
function Frontier() {
|
||||
return (
|
||||
<Box
|
||||
const Frontier: React.FC = () => (
|
||||
<Box
|
||||
width="100%"
|
||||
minHeight="1040px"
|
||||
backgroundImage={`url(${BackgroundImage})`}
|
||||
bgPosition="center"
|
||||
bgSize="cover"
|
||||
>
|
||||
<Container
|
||||
width="100%"
|
||||
minHeight="1040px"
|
||||
backgroundImage={`url(${BackgroundImage})`}
|
||||
bgPosition="center"
|
||||
bgSize="cover"
|
||||
height="100vh"
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
justifyContent="center"
|
||||
maxWidth="100%"
|
||||
pl="137px"
|
||||
>
|
||||
<Container
|
||||
width="100%"
|
||||
height="100vh"
|
||||
<Text
|
||||
fontSize="38px"
|
||||
lineHeight="56px"
|
||||
fontWeight="normal"
|
||||
color="white"
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
justifyContent="center"
|
||||
maxWidth="100%"
|
||||
pl="137px"
|
||||
maxWidth="524px"
|
||||
>
|
||||
<Text
|
||||
fontSize="38px"
|
||||
LineHeight="56px"
|
||||
fontWeight="normal"
|
||||
color="white"
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
maxWidth="524px"
|
||||
>
|
||||
Many have already woken up to the world-shaping potential of Web3
|
||||
technologies.
|
||||
</Text>
|
||||
Many have already woken up to the world-shaping potential of Web3
|
||||
technologies.
|
||||
</Text>
|
||||
|
||||
<Text
|
||||
pt="56px"
|
||||
fontSize="38px"
|
||||
lineHeight="56px"
|
||||
fontWeight="normal"
|
||||
color="white"
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
maxWidth="524px"
|
||||
>
|
||||
Some are grabbing the opportunity to build the future they want to live
|
||||
in.
|
||||
</Text>
|
||||
</Container>
|
||||
</Box>
|
||||
);
|
||||
|
||||
<Text
|
||||
pt="56px"
|
||||
fontSize="38px"
|
||||
LineHeight="56px"
|
||||
fontWeight="normal"
|
||||
color="white"
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
maxWidth="524px"
|
||||
>
|
||||
Some are grabbing the opportunity to build the future they want to
|
||||
live in.
|
||||
</Text>
|
||||
</Container>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
export default Frontier;
|
||||
|
||||
@@ -1,53 +1,51 @@
|
||||
import { Box, Container, Link, Text } from '@metafam/ds';
|
||||
import BackgroundImage from 'assets/landing/game-background.png';
|
||||
|
||||
function Game() {
|
||||
return (
|
||||
<Box
|
||||
const Game: React.FC = () => (
|
||||
<Box
|
||||
width="100%"
|
||||
minHeight="1040px"
|
||||
backgroundImage={`url(${BackgroundImage})`}
|
||||
bgPosition="center"
|
||||
bgSize="cover"
|
||||
>
|
||||
<Container
|
||||
width="100%"
|
||||
minHeight="1040px"
|
||||
backgroundImage={`url(${BackgroundImage})`}
|
||||
bgPosition="center"
|
||||
bgSize="cover"
|
||||
height="100vh"
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
justifyContent="center"
|
||||
maxWidth="100%"
|
||||
pl="137px"
|
||||
>
|
||||
<Container
|
||||
width="100%"
|
||||
height="100vh"
|
||||
<Text
|
||||
fontSize="38px"
|
||||
lineHeight="56px"
|
||||
fontWeight="normal"
|
||||
color="white"
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
justifyContent="center"
|
||||
maxWidth="100%"
|
||||
pl="137px"
|
||||
maxWidth="524px"
|
||||
>
|
||||
<Text
|
||||
fontSize="38px"
|
||||
LineHeight="56px"
|
||||
fontWeight="normal"
|
||||
color="white"
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
maxWidth="524px"
|
||||
>
|
||||
“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="38px"
|
||||
LineHeight="56px"
|
||||
fontWeight="normal"
|
||||
>
|
||||
The Wiki
|
||||
</Link>
|
||||
</Text>
|
||||
“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="38px"
|
||||
lineHeight="56px"
|
||||
fontWeight="normal"
|
||||
>
|
||||
The Wiki
|
||||
</Link>
|
||||
</Text>
|
||||
</Container>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
</Text>
|
||||
</Container>
|
||||
</Box>
|
||||
);
|
||||
|
||||
export default Game;
|
||||
|
||||
@@ -3,60 +3,58 @@ import BackgroundImage from 'assets/landing/intro-background.png';
|
||||
import MetaGameLogo from 'assets/landing/synthlogo-2.svg';
|
||||
import { FaArrowDown } from 'react-icons/fa';
|
||||
|
||||
function Intro() {
|
||||
return (
|
||||
<Box
|
||||
const Intro: React.FC = () => (
|
||||
<Box
|
||||
width="100%"
|
||||
minHeight="1040px"
|
||||
backgroundImage={`url(${BackgroundImage})`}
|
||||
bgPosition="center"
|
||||
bgSize="cover"
|
||||
>
|
||||
<Container
|
||||
flexDirection="column"
|
||||
justifyContent="flex-end"
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
width="100%"
|
||||
minHeight="1040px"
|
||||
backgroundImage={`url(${BackgroundImage})`}
|
||||
bgPosition="center"
|
||||
bgSize="cover"
|
||||
height="100vh"
|
||||
pb="78px"
|
||||
>
|
||||
<Container
|
||||
flexDirection="column"
|
||||
justifyContent="flex-end"
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
width="100%"
|
||||
height="100vh"
|
||||
pb="78px"
|
||||
<Image src={MetaGameLogo} />
|
||||
<Text
|
||||
fontSize="16px"
|
||||
fontWeight="normal"
|
||||
color="white"
|
||||
mt="10px"
|
||||
mb="35px"
|
||||
>
|
||||
<Image src={MetaGameLogo} />
|
||||
<Text
|
||||
fontSize="16px"
|
||||
fontWeight="normal"
|
||||
color="white"
|
||||
mt="10px"
|
||||
mb="35px"
|
||||
>
|
||||
A Massive Online Coordination Game
|
||||
</Text>
|
||||
<Button
|
||||
fontWeight="normal"
|
||||
fontSize="18px"
|
||||
bg="#B40C85"
|
||||
mb="16px"
|
||||
width="284px"
|
||||
textTransform="uppercase"
|
||||
>
|
||||
Join Nao
|
||||
</Button>
|
||||
<Button
|
||||
fontWeight="normal"
|
||||
fontSize="18px"
|
||||
bg="transparent"
|
||||
border="1px"
|
||||
borderColor="#79F8FB"
|
||||
color="#79F8FB"
|
||||
width="284px"
|
||||
textTransform="uppercase"
|
||||
rightIcon={<FaArrowDown />}
|
||||
>
|
||||
Explore Moar
|
||||
</Button>
|
||||
</Container>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
A Massive Online Coordination Game
|
||||
</Text>
|
||||
<Button
|
||||
fontWeight="normal"
|
||||
fontSize="18px"
|
||||
bg="#B40C85"
|
||||
mb="16px"
|
||||
width="284px"
|
||||
textTransform="uppercase"
|
||||
>
|
||||
Join Nao
|
||||
</Button>
|
||||
<Button
|
||||
fontWeight="normal"
|
||||
fontSize="18px"
|
||||
bg="transparent"
|
||||
border="1px"
|
||||
borderColor="#79F8FB"
|
||||
color="#79F8FB"
|
||||
width="284px"
|
||||
textTransform="uppercase"
|
||||
rightIcon={<FaArrowDown />}
|
||||
>
|
||||
Explore Moar
|
||||
</Button>
|
||||
</Container>
|
||||
</Box>
|
||||
);
|
||||
|
||||
export default Intro;
|
||||
|
||||
@@ -2,63 +2,61 @@ import { Box, Button, Container, Text } from '@metafam/ds';
|
||||
import BackgroundImage from 'assets/landing/just-watch-background.png';
|
||||
import { FaArrowDown } from 'react-icons/fa';
|
||||
|
||||
function Intro() {
|
||||
return (
|
||||
<Box
|
||||
const JustWatch: React.FC = () => (
|
||||
<Box
|
||||
width="100%"
|
||||
minHeight="1040px"
|
||||
backgroundImage={`url(${BackgroundImage})`}
|
||||
bgPosition="center"
|
||||
bgSize="cover"
|
||||
>
|
||||
<Container
|
||||
flexDirection="column"
|
||||
justifyContent="flex-end"
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
width="100%"
|
||||
minHeight="1040px"
|
||||
backgroundImage={`url(${BackgroundImage})`}
|
||||
bgPosition="center"
|
||||
bgSize="cover"
|
||||
height="100vh"
|
||||
pb="78px"
|
||||
maxWidth="1200px"
|
||||
textAlign="center"
|
||||
>
|
||||
<Container
|
||||
flexDirection="column"
|
||||
justifyContent="flex-end"
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
width="100%"
|
||||
height="100vh"
|
||||
pb="78px"
|
||||
maxWidth="1200px"
|
||||
textAlign="center"
|
||||
<Text
|
||||
max-width="1200px"
|
||||
fontSize="76px"
|
||||
lineHeight="80px"
|
||||
fontWeight="normal"
|
||||
color="white"
|
||||
mt="10px"
|
||||
mb="35px"
|
||||
>
|
||||
<Text
|
||||
max-width="1200px"
|
||||
fontSize="76px"
|
||||
lineHeight="80px"
|
||||
fontWeight="normal"
|
||||
color="white"
|
||||
mt="10px"
|
||||
mb="35px"
|
||||
>
|
||||
The revolution will be televized, but don’t just watch.
|
||||
</Text>
|
||||
<Button
|
||||
fontWeight="normal"
|
||||
fontSize="18px"
|
||||
bg="#B40C85"
|
||||
mb="16px"
|
||||
width="284px"
|
||||
textTransform="uppercase"
|
||||
>
|
||||
Join Nao
|
||||
</Button>
|
||||
<Button
|
||||
fontWeight="normal"
|
||||
fontSize="18px"
|
||||
bg="transparent"
|
||||
border="1px"
|
||||
borderColor="white"
|
||||
color="white"
|
||||
width="284px"
|
||||
textTransform="uppercase"
|
||||
rightIcon={<FaArrowDown />}
|
||||
>
|
||||
Explore Moar
|
||||
</Button>
|
||||
</Container>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
The revolution will be televized, but don’t just watch.
|
||||
</Text>
|
||||
<Button
|
||||
fontWeight="normal"
|
||||
fontSize="18px"
|
||||
bg="#B40C85"
|
||||
mb="16px"
|
||||
width="284px"
|
||||
textTransform="uppercase"
|
||||
>
|
||||
Join Nao
|
||||
</Button>
|
||||
<Button
|
||||
fontWeight="normal"
|
||||
fontSize="18px"
|
||||
bg="transparent"
|
||||
border="1px"
|
||||
borderColor="white"
|
||||
color="white"
|
||||
width="284px"
|
||||
textTransform="uppercase"
|
||||
rightIcon={<FaArrowDown />}
|
||||
>
|
||||
Explore Moar
|
||||
</Button>
|
||||
</Container>
|
||||
</Box>
|
||||
);
|
||||
|
||||
export default Intro;
|
||||
export default JustWatch;
|
||||
|
||||
@@ -1,63 +1,61 @@
|
||||
import { Box, Container, Text } from '@metafam/ds';
|
||||
import BackgroundImage from 'assets/landing/optimal-background.png';
|
||||
|
||||
function Optimal() {
|
||||
return (
|
||||
<Box
|
||||
const Optimal: React.FC = () => (
|
||||
<Box
|
||||
width="100%"
|
||||
minHeight="1040px"
|
||||
backgroundImage={`url(${BackgroundImage})`}
|
||||
bgPosition="center"
|
||||
bgSize="cover"
|
||||
>
|
||||
<Container
|
||||
width="100%"
|
||||
minHeight="1040px"
|
||||
backgroundImage={`url(${BackgroundImage})`}
|
||||
bgPosition="center"
|
||||
bgSize="cover"
|
||||
height="100vh"
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
justifyContent="center"
|
||||
maxWidth="100%"
|
||||
alignItems="center"
|
||||
textAlign="center"
|
||||
>
|
||||
<Container
|
||||
width="100%"
|
||||
height="100vh"
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
justifyContent="center"
|
||||
maxWidth="100%"
|
||||
alignItems="center"
|
||||
textAlign="center"
|
||||
<Box
|
||||
fontSize="48px"
|
||||
lineHeight="72px"
|
||||
fontWeight="normal"
|
||||
color="white"
|
||||
maxWidth="1200px"
|
||||
>
|
||||
<Box
|
||||
fontSize="48px"
|
||||
LineHeight="72px"
|
||||
fontWeight="normal"
|
||||
color="white"
|
||||
maxWidth="1200px"
|
||||
>
|
||||
<Text pt="130px" pb="35px" textAlign="center">
|
||||
To find your metagame means to{' '}
|
||||
<Text fontWeight="bold" color="#79F8FB">
|
||||
play life in the optimal way.
|
||||
<Text pt="130px" pb="35px" textAlign="center">
|
||||
To find your metagame means to{' '}
|
||||
<Text fontWeight="bold" color="#79F8FB">
|
||||
play life in the optimal way.
|
||||
</Text>
|
||||
</Text>
|
||||
<Box pb="35px">
|
||||
<Text>
|
||||
By coordinating with others on building a better world; doing things
|
||||
that create a{' '}
|
||||
<Text as="span" fontWeight="bold" color="#79F8FB">
|
||||
{' '}
|
||||
a positive impact
|
||||
<br />{' '}
|
||||
</Text>{' '}
|
||||
make
|
||||
<Text as="span" fontWeight="bold" color="#79F8FB">
|
||||
{' '}
|
||||
you happy{' '}
|
||||
</Text>
|
||||
AND
|
||||
<Text as="span" fontWeight="bold" color="#79F8FB">
|
||||
{' '}
|
||||
earn you money.
|
||||
</Text>
|
||||
</Text>
|
||||
<Box pb="35px">
|
||||
<Text>
|
||||
By coordinating with others on building a better world; doing
|
||||
things that create a{' '}
|
||||
<Text as="span" fontWeight="bold" color="#79F8FB">
|
||||
{' '}
|
||||
a positive impact
|
||||
<br />{' '}
|
||||
</Text>{' '}
|
||||
make
|
||||
<Text as="span" fontWeight="bold" color="#79F8FB">
|
||||
{' '}
|
||||
you happy{' '}
|
||||
</Text>
|
||||
AND
|
||||
<Text as="span" fontWeight="bold" color="#79F8FB">
|
||||
{' '}
|
||||
earn you money.
|
||||
</Text>
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
</Container>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
</Box>
|
||||
</Container>
|
||||
</Box>
|
||||
);
|
||||
|
||||
export default Optimal;
|
||||
|
||||
@@ -1,55 +1,53 @@
|
||||
import { Box, Container, Link, Text } from '@metafam/ds';
|
||||
import BackgroundImage from 'assets/landing/revolution-background.png';
|
||||
|
||||
function Build() {
|
||||
return (
|
||||
<Box
|
||||
const Build: React.FC = () => (
|
||||
<Box
|
||||
width="100%"
|
||||
minHeight="1040px"
|
||||
backgroundImage={`url(${BackgroundImage})`}
|
||||
bgPosition="center"
|
||||
bgSize="cover"
|
||||
>
|
||||
<Container
|
||||
width="100%"
|
||||
minHeight="1040px"
|
||||
backgroundImage={`url(${BackgroundImage})`}
|
||||
bgPosition="center"
|
||||
bgSize="cover"
|
||||
height="100vh"
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
justifyContent="flex-end"
|
||||
maxWidth="100%"
|
||||
pl="137px"
|
||||
alignItems="flex-end"
|
||||
pr="116px"
|
||||
>
|
||||
<Container
|
||||
width="100%"
|
||||
height="100vh"
|
||||
<Text
|
||||
fontSize="67px"
|
||||
lineHeight="80px"
|
||||
fontWeight="normal"
|
||||
color="white"
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
justifyContent="flex-end"
|
||||
maxWidth="100%"
|
||||
pl="137px"
|
||||
alignItems="flex-end"
|
||||
pr="116px"
|
||||
maxWidth="568px"
|
||||
>
|
||||
<Text
|
||||
fontSize="67px"
|
||||
LineHeight="80px"
|
||||
fontWeight="normal"
|
||||
color="white"
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
maxWidth="568px"
|
||||
>
|
||||
A revolution is happening online;
|
||||
</Text>
|
||||
A revolution is happening online;
|
||||
</Text>
|
||||
|
||||
<Text
|
||||
pt="24px"
|
||||
fontSize="67px"
|
||||
LineHeight="80px"
|
||||
fontWeight="normal"
|
||||
color="white"
|
||||
maxWidth="568px"
|
||||
>
|
||||
will you{' '}
|
||||
<Link color="#E839B7" href="#">
|
||||
join
|
||||
</Link>{' '}
|
||||
or miss out?
|
||||
</Text>
|
||||
</Container>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
<Text
|
||||
pt="24px"
|
||||
fontSize="67px"
|
||||
lineHeight="80px"
|
||||
fontWeight="normal"
|
||||
color="white"
|
||||
maxWidth="568px"
|
||||
>
|
||||
will you{' '}
|
||||
<Link color="#E839B7" href="#">
|
||||
join
|
||||
</Link>{' '}
|
||||
or miss out?
|
||||
</Text>
|
||||
</Container>
|
||||
</Box>
|
||||
);
|
||||
|
||||
export default Build;
|
||||
|
||||
@@ -1,54 +1,52 @@
|
||||
import { Box, Container, Text } from '@metafam/ds';
|
||||
import BackgroundImage from 'assets/landing/together-background.png';
|
||||
|
||||
function Together() {
|
||||
return (
|
||||
<Box
|
||||
const Together: React.FC = () => (
|
||||
<Box
|
||||
width="100%"
|
||||
minHeight="1040px"
|
||||
backgroundImage={`url(${BackgroundImage})`}
|
||||
bgPosition="center"
|
||||
bgSize="cover"
|
||||
>
|
||||
<Container
|
||||
width="100%"
|
||||
minHeight="1040px"
|
||||
backgroundImage={`url(${BackgroundImage})`}
|
||||
bgPosition="center"
|
||||
bgSize="cover"
|
||||
height="100vh"
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
justifyContent="center"
|
||||
maxWidth="1200px"
|
||||
alignItems="center"
|
||||
>
|
||||
<Container
|
||||
width="100%"
|
||||
height="100vh"
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
justifyContent="center"
|
||||
<Box
|
||||
fontSize="48px"
|
||||
lineHeight="64px"
|
||||
fontWeight="normal"
|
||||
color="white"
|
||||
bgGradient=" linear-gradient(180deg, #FFFFFF 15.3%, #FD208A 85.41%); "
|
||||
bgClip="text"
|
||||
maxWidth="1200px"
|
||||
alignItems="center"
|
||||
display="inline"
|
||||
pb="35px"
|
||||
pt="130px"
|
||||
textAlign="center"
|
||||
>
|
||||
<Box
|
||||
fontSize="48px"
|
||||
LineHeight="64px"
|
||||
fontWeight="normal"
|
||||
color="white"
|
||||
bgGradient=" linear-gradient(180deg, #FFFFFF 15.3%, #FD208A 85.41%); "
|
||||
bgClip="text"
|
||||
maxWidth="1200px"
|
||||
display="inline"
|
||||
pb="35px"
|
||||
pt="130px"
|
||||
textAlign="center"
|
||||
>
|
||||
<Text pb="50px">
|
||||
{' '}
|
||||
We are bringing together the people & building blocks aligned on the
|
||||
idea of creating a new kind of society.
|
||||
</Text>
|
||||
<Text pb="50px">
|
||||
{' '}
|
||||
One that is optimized for human wellbeing rather than profit.
|
||||
</Text>
|
||||
<Text pb="50px">
|
||||
One that revolves around solving problems & living well, in balance
|
||||
with nature.
|
||||
</Text>
|
||||
</Box>
|
||||
</Container>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
<Text pb="50px">
|
||||
{' '}
|
||||
We are bringing together the people & building blocks aligned on the
|
||||
idea of creating a new kind of society.
|
||||
</Text>
|
||||
<Text pb="50px">
|
||||
{' '}
|
||||
One that is optimized for human wellbeing rather than profit.
|
||||
</Text>
|
||||
<Text pb="50px">
|
||||
One that revolves around solving problems & living well, in balance
|
||||
with nature.
|
||||
</Text>
|
||||
</Box>
|
||||
</Container>
|
||||
</Box>
|
||||
);
|
||||
|
||||
export default Together;
|
||||
|
||||
@@ -1,41 +1,39 @@
|
||||
import { Box, Container, Text } from '@metafam/ds';
|
||||
import BackgroundImage from 'assets/landing/unplug-background.png';
|
||||
|
||||
function Unplug() {
|
||||
return (
|
||||
<Box
|
||||
const Unplug: React.FC = () => (
|
||||
<Box
|
||||
width="100%"
|
||||
minHeight="1040px"
|
||||
backgroundImage={`url(${BackgroundImage})`}
|
||||
bgPosition="center"
|
||||
bgSize="cover"
|
||||
>
|
||||
<Container
|
||||
width="100%"
|
||||
minHeight="1040px"
|
||||
backgroundImage={`url(${BackgroundImage})`}
|
||||
bgPosition="center"
|
||||
bgSize="cover"
|
||||
height="100vh"
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
justifyContent="center"
|
||||
maxWidth="100%"
|
||||
alignItems="center"
|
||||
textAlign="center"
|
||||
>
|
||||
<Container
|
||||
width="100%"
|
||||
height="100vh"
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
justifyContent="center"
|
||||
maxWidth="100%"
|
||||
alignItems="center"
|
||||
textAlign="center"
|
||||
<Box
|
||||
fontSize="67px"
|
||||
lineHeight="80px"
|
||||
fontWeight="normal"
|
||||
color="white"
|
||||
maxWidth="1200px"
|
||||
>
|
||||
<Box
|
||||
fontSize="67px"
|
||||
LineHeight="80px"
|
||||
fontWeight="normal"
|
||||
color="white"
|
||||
maxWidth="1200px"
|
||||
>
|
||||
<Text pt="130px" pb="35px" textAlign="center">
|
||||
So unplug yourself from the matrix & enter the future.
|
||||
</Text>
|
||||
<Text pt="130px" pb="35px" textAlign="center">
|
||||
So unplug yourself from the matrix & enter the future.
|
||||
</Text>
|
||||
|
||||
<Text textAlign="center">earn, earn & make a difference.</Text>
|
||||
</Box>
|
||||
</Container>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
<Text textAlign="center">earn, earn & make a difference.</Text>
|
||||
</Box>
|
||||
</Container>
|
||||
</Box>
|
||||
);
|
||||
|
||||
export default Unplug;
|
||||
|
||||
@@ -1,47 +1,45 @@
|
||||
import { Box, Container, ListItem, OrderedList, Text } from '@metafam/ds';
|
||||
import BackgroundImage from 'assets/landing/whatWeDo-background.png';
|
||||
|
||||
function WhatWeDo() {
|
||||
return (
|
||||
<Box
|
||||
const WhatWeDo: React.FC = () => (
|
||||
<Box
|
||||
width="100%"
|
||||
minHeight="1040px"
|
||||
backgroundImage={`url(${BackgroundImage})`}
|
||||
bgPosition="center"
|
||||
bgSize="cover"
|
||||
>
|
||||
<Container
|
||||
width="100%"
|
||||
minHeight="1040px"
|
||||
backgroundImage={`url(${BackgroundImage})`}
|
||||
bgPosition="center"
|
||||
bgSize="cover"
|
||||
height="100vh"
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
justifyContent="center"
|
||||
maxWidth="100%"
|
||||
alignItems="center"
|
||||
>
|
||||
<Container
|
||||
width="100%"
|
||||
height="100vh"
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
justifyContent="center"
|
||||
maxWidth="100%"
|
||||
alignItems="center"
|
||||
>
|
||||
<Box fontSize="40px" LineHeight="64px" maxWidth="999px">
|
||||
<Text pt="130px" pb="35px" fontWeight="700">
|
||||
What are we doing?
|
||||
</Text>
|
||||
<OrderedList pb="35px" 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>
|
||||
<Box fontSize="40px" lineHeight="64px" maxWidth="999px">
|
||||
<Text pt="130px" pb="35px" fontWeight="700">
|
||||
What are we doing?
|
||||
</Text>
|
||||
<OrderedList pb="35px" 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>
|
||||
);
|
||||
}
|
||||
<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>
|
||||
);
|
||||
|
||||
export default WhatWeDo;
|
||||
|
||||
@@ -1,39 +1,37 @@
|
||||
import { Box, Container, Text } from '@metafam/ds';
|
||||
import BackgroundImage from 'assets/landing/who-background.png';
|
||||
|
||||
function Who() {
|
||||
return (
|
||||
<Box
|
||||
const Who: React.FC = () => (
|
||||
<Box
|
||||
width="100%"
|
||||
minHeight="1040px"
|
||||
backgroundImage={`url(${BackgroundImage})`}
|
||||
bgPosition="center"
|
||||
bgSize="cover"
|
||||
>
|
||||
<Container
|
||||
width="100%"
|
||||
minHeight="1040px"
|
||||
backgroundImage={`url(${BackgroundImage})`}
|
||||
bgPosition="center"
|
||||
bgSize="cover"
|
||||
height="100vh"
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
justifyContent="flex-end"
|
||||
maxWidth="100%"
|
||||
alignItems="center"
|
||||
textAlign="center"
|
||||
>
|
||||
<Container
|
||||
width="100%"
|
||||
height="100vh"
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
justifyContent="flex-end"
|
||||
maxWidth="100%"
|
||||
alignItems="center"
|
||||
textAlign="center"
|
||||
<Box
|
||||
fontSize="67px"
|
||||
lineHeight="80px"
|
||||
fontWeight="normal"
|
||||
color="white"
|
||||
maxWidth="1200px"
|
||||
>
|
||||
<Box
|
||||
fontSize="67px"
|
||||
LineHeight="80px"
|
||||
fontWeight="normal"
|
||||
color="white"
|
||||
maxWidth="1200px"
|
||||
>
|
||||
<Text pt="130px" pb="35px" textAlign="center">
|
||||
So, whom is it for?
|
||||
</Text>
|
||||
</Box>
|
||||
</Container>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
<Text pt="130px" pb="35px" textAlign="center">
|
||||
So, whom is it for?
|
||||
</Text>
|
||||
</Box>
|
||||
</Container>
|
||||
</Box>
|
||||
);
|
||||
|
||||
export default Who;
|
||||
|
||||
@@ -1,61 +1,54 @@
|
||||
import { Box, Container, Text } from '@metafam/ds';
|
||||
import BackgroundImage from 'assets/landing/wildweb-background.png';
|
||||
|
||||
function WildWeb() {
|
||||
return (
|
||||
<Box
|
||||
const WildWeb: React.FC = () => (
|
||||
<Box
|
||||
width="100%"
|
||||
minHeight="1040px"
|
||||
backgroundImage={`url(${BackgroundImage})`}
|
||||
bgPosition="center"
|
||||
bgSize="cover"
|
||||
>
|
||||
<Container
|
||||
width="100%"
|
||||
minHeight="1040px"
|
||||
backgroundImage={`url(${BackgroundImage})`}
|
||||
bgPosition="center"
|
||||
bgSize="cover"
|
||||
height="100vh"
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
justifyContent="center"
|
||||
maxWidth="100%"
|
||||
alignItems="center"
|
||||
>
|
||||
<Container
|
||||
width="100%"
|
||||
height="100vh"
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
justifyContent="center"
|
||||
maxWidth="100%"
|
||||
alignItems="center"
|
||||
<Box
|
||||
fontSize="48px"
|
||||
lineHeight="64px"
|
||||
fontWeight="normal"
|
||||
color="white"
|
||||
maxWidth="978px"
|
||||
>
|
||||
<Box
|
||||
fontSize="48px"
|
||||
LineHeight="64px"
|
||||
fontWeight="normal"
|
||||
color="white"
|
||||
maxWidth="978px"
|
||||
>
|
||||
<Text pt="130px" pb="35px">
|
||||
Web3 technologies are allowing us to{' '}
|
||||
<Text fontWeight="bold">reimagine socioeconomic systems</Text> from
|
||||
ground up.
|
||||
</Text>
|
||||
<Text pb="35px">
|
||||
A new world is being built but it’s{' '}
|
||||
<Text fontWeight="bold">hard to navigate.</Text>
|
||||
</Text>
|
||||
<Text pb="35px">
|
||||
The resources, building blocks & tools are all over the place{' '}
|
||||
<Text fontWeight="bold">but the maps are inexistent.</Text>
|
||||
</Text>
|
||||
<Text pb="35px">
|
||||
There are pitfalls, gold rushing cowboys & snake oil salesmen at
|
||||
every corner.
|
||||
</Text>
|
||||
<Text pt="130px" pb="35px">
|
||||
Web3 technologies are allowing us to{' '}
|
||||
<Text fontWeight="bold">reimagine socioeconomic systems</Text> from
|
||||
ground up.
|
||||
</Text>
|
||||
<Text pb="35px">
|
||||
A new world is being built but it’s{' '}
|
||||
<Text fontWeight="bold">hard to navigate.</Text>
|
||||
</Text>
|
||||
<Text pb="35px">
|
||||
The resources, building blocks & tools are all over the place{' '}
|
||||
<Text fontWeight="bold">but the maps are inexistent.</Text>
|
||||
</Text>
|
||||
<Text pb="35px">
|
||||
There are pitfalls, gold rushing cowboys & snake oil salesmen at every
|
||||
corner.
|
||||
</Text>
|
||||
|
||||
<Text
|
||||
pb="35px"
|
||||
maxWidth="978px"
|
||||
width="100%"
|
||||
textTransform="uppercase"
|
||||
>
|
||||
It’s a Wild Web.
|
||||
</Text>
|
||||
</Box>
|
||||
</Container>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
<Text pb="35px" maxWidth="978px" width="100%" textTransform="uppercase">
|
||||
It’s a Wild Web.
|
||||
</Text>
|
||||
</Box>
|
||||
</Container>
|
||||
</Box>
|
||||
);
|
||||
|
||||
export default WildWeb;
|
||||
|
||||
@@ -1,18 +1,19 @@
|
||||
import React from 'react';
|
||||
|
||||
import Build from '../components/Landing/Build';
|
||||
import Cards from '../components/Landing/Cards';
|
||||
import Frontier from '../components/Landing/Frontier';
|
||||
import Game from '../components/Landing/Game';
|
||||
import Intro from '../components/Landing/Intro';
|
||||
import JustWatch from '../components/Landing/JustWatch';
|
||||
import Optimal from '../components/Landing/Optimal';
|
||||
import Revolution from '../components/Landing/Revolution';
|
||||
import Together from '../components/Landing/Together';
|
||||
import Unplug from '../components/Landing/Unplug';
|
||||
import WhatWeDo from '../components/Landing/WhatWeDo';
|
||||
import Who from '../components/Landing/Who';
|
||||
import WildWeb from '../components/Landing/WildWeb';
|
||||
// eslint-disable-next-line import/no-named-as-default
|
||||
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';
|
||||
|
||||
export const getStaticProps = async () => ({
|
||||
props: {
|
||||
|
||||
Reference in New Issue
Block a user