github/TheGame
1
1
Fork 0
mirror of https://github.com/MetaFam/TheGame.git synced 2026-04-24 03:00:09 -04:00
Code Issues Packages Projects Releases Wiki Activity

Add the Perks and Tiers section

Browse Source
This commit is contained in:
HHH-GH
2022-10-01 17:10:08 +08:00
committed by Alec LaLonde
parent 3e9a1db2a2
commit 2b1a7e56c2
1 changed files with 144 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

146
packages/web/components/Guild/GuildJoin.tsx
View File

@@ -13,6 +13,8 @@ import {
LoadingState,
MetaButton,
// MetaHeading,
// Stack,
SimpleGrid,
Text,
UnorderedList,
VStack,
@@ -20,6 +22,9 @@ import {
import { Constants, generateUUID } from '@metafam/utils';
import DecentralizedFactoryImg from 'assets/decentralized-factory_1105x1098.png';
import GuildsSunlessImg from 'assets/guilds-sunless_384x449.png';
import CommonTierNFTImg from 'assets/nft-common-tier_600x600.jpg';
import EpicTierNFTImg from 'assets/nft-epic-tier_600x600.jpg';
import RareTierNFTImg from 'assets/nft-rare-tier_600x600.jpg';
// Images to use in the page
import Octopus from 'assets/octopus.png'; // in the footer
import PatronsImg from 'assets/patrons-sun_800x820.png';
@@ -454,9 +459,146 @@ export const GuildJoin: React.FC = () => {
Tiers & Perks
</Heading>
{/*
The three items in SimpleGrid are stacked cards until the md breakpoint, then go to rows at md, then to proper cards in 3 columns at lg
*/}
<SimpleGrid
columns={{ base: 1, md: 1, lg: 3 }}
spacing={8}
mb={6}
width="100%"
>
<Box
bg="whiteAlpha.50"
borderRadius={8}
maxWidth={{ base: 'md', md: '100%' }}
mx="auto"
width="100%"
>
<Flex direction={{ base: 'column', md: 'row', lg: 'column' }}>
<Image
alt="The MetaManifesto on a pedestal, illuminated by pink light"
borderTopLeftRadius={8}
borderTopRightRadius={{ base: 8, md: 0, lg: 8 }}
borderBottomLeftRadius={{ base: 0, md: 8, lg: 0 }}
src={CommonTierNFTImg}
width={{ base: 'md', md: '16rem', lg: '100%' }}
/>
<Box flex="auto">
<Text
bg="#168c72"
borderTopRightRadius={{ base: 0, md: 8, lg: 0 }}
color="white"
fontFamily="mono"
fontSize="lg"
fontWeight={200}
textAlign="center"
>
Common
</Text>
<UnorderedList mx={12} my={6}>
<ListItem>Your guild page in MetaGame</ListItem>
<ListItem>A guild2guild meetup</ListItem>
<ListItem>Collaboration opportunities</ListItem>
<ListItem>Discord bot (optional)</ListItem>
</UnorderedList>
</Box>
</Flex>
</Box>
<Box
bg="whiteAlpha.50"
borderRadius={8}
maxWidth={{ base: 'md', md: '100%' }}
mx="auto"
width="100%"
>
<Flex direction={{ base: 'column', md: 'row', lg: 'column' }}>
<Image
alt="The MetaManifesto on a glowing pedestal"
borderTopLeftRadius={8}
borderTopRightRadius={{ base: 8, md: 0, lg: 8 }}
borderBottomLeftRadius={{ base: 0, md: 8, lg: 0 }}
src={RareTierNFTImg}
width={{ base: 'md', md: '16rem', lg: '100%' }}
/>
<Box flex="auto">
<Text
bg="#2a4c98"
borderTopRightRadius={{ base: 0, md: 8, lg: 0 }}
color="white"
fontFamily="mono"
fontSize="lg"
fontWeight={200}
textAlign="center"
>
Rare
</Text>
<UnorderedList mx={12} my={6}>
<ListItem>A Twitter thread about you</ListItem>
<ListItem>Added to the follow list on Twitter</ListItem>
<ListItem>Your news in our newsletter</ListItem>
<ListItem>Your announcements inside MetaGame</ListItem>
<ListItem>Among the Founding Guilds of MetaGame</ListItem>
</UnorderedList>
</Box>
</Flex>
</Box>
<Box
bg="whiteAlpha.50"
borderRadius={8}
maxWidth={{ base: 'md', md: '100%' }}
mx="auto"
width="100%"
>
<Flex direction={{ base: 'column', md: 'row', lg: 'column' }}>
<Image
alt="The MetaManifesto on a pedestal that is glowing with a pink light"
borderTopLeftRadius={8}
borderTopRightRadius={{ base: 8, md: 0, lg: 8 }}
borderBottomLeftRadius={{ base: 0, md: 8, lg: 0 }}
src={EpicTierNFTImg}
width={{ base: 'md', md: '16rem', lg: '100%' }}
/>
<Box flex="auto">
<Text
bg="#402594"
borderTopRightRadius={{ base: 0, md: 8, lg: 0 }}
color="white"
fontFamily="mono"
fontSize="lg"
fontWeight={200}
textAlign="center"
>
Epic
</Text>
<UnorderedList mx={12} my={6}>
<ListItem>A member of MetaAlliance</ListItem>
<ListItem>Cryptovoxels placement</ListItem>
<ListItem>Special newsletter</ListItem>
<ListItem>Your promo in MetaGame shillpack</ListItem>
<ListItem>Branch in The Onboarding Game</ListItem>
<ListItem>Support for your instance of MetaOS</ListItem>
</UnorderedList>
</Box>
</Flex>
</Box>
</SimpleGrid>
<Container>
<Text>Cards HStack that goes from 3 wide to stacked</Text>
<Text>Higher tiers ...</Text>
<Box
as="p"
bg="whiteAlpha.50"
borderRadius={8}
maxW="md"
mx="auto"
p={2}
textAlign="center"
>
Note: Higher tiers include previous tiers’ perks!
</Box>
</Container>
</Container>