mirror of
https://github.com/MetaFam/TheGame.git
synced 2026-04-24 03:00:09 -04:00
Made the basic page skeleton and containers
This commit is contained in:
HHH-GH
@@ -1,20 +1,30 @@
|
||||
import {
|
||||
ArrowUpIcon,
|
||||
Box,
|
||||
Flex,
|
||||
Button,
|
||||
// Center,
|
||||
Container,
|
||||
// Flex,
|
||||
Heading,
|
||||
Image,
|
||||
ListItem,
|
||||
MetaButton,
|
||||
MetaHeading,
|
||||
LoadingState,
|
||||
// MetaButton,
|
||||
// MetaHeading,
|
||||
Text,
|
||||
UnorderedList,
|
||||
VStack,
|
||||
} from '@metafam/ds';
|
||||
import { Constants, generateUUID } from '@metafam/utils';
|
||||
import { FlexContainer } from 'components/Container';
|
||||
import { MetaLink } from 'components/Link';
|
||||
import Octopus from 'assets/octopus.png';
|
||||
import { HeadComponent } from 'components/Seo';
|
||||
// import { FlexContainer } from 'components/Container';
|
||||
// import { MetaLink } from 'components/Link';
|
||||
import { CONFIG } from 'config';
|
||||
import { useUser } from 'lib/hooks';
|
||||
import { get, set } from 'lib/store';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { useRouter } from 'next/router';
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
|
||||
export const discordAuthStateGuidKey = 'metagame-add-guild';
|
||||
|
||||
@@ -47,298 +57,219 @@ export const GuildJoin: React.FC = () => {
|
||||
CONFIG.discordApiBaseUrl
|
||||
}/oauth2/authorize?${discordAuthParams.toString()}`;
|
||||
|
||||
return (
|
||||
<FlexContainer flex="1" justify="start" mt={5}>
|
||||
<MetaHeading textAlign="center" mb={10}>
|
||||
Join MetaGame as Guild
|
||||
</MetaHeading>
|
||||
<Box
|
||||
bg="whiteAlpha.200"
|
||||
style={{ backdropFilter: 'blur(7px)' }}
|
||||
rounded="lg"
|
||||
p="6"
|
||||
my="6"
|
||||
w="100%"
|
||||
maxW={['100%', '60rem']}
|
||||
>
|
||||
<Image
|
||||
src="/assets/guilds.png"
|
||||
alt="Guild"
|
||||
maxW={['14rem', '20rem']}
|
||||
p={4}
|
||||
float={['none', 'none', 'right']}
|
||||
/>
|
||||
<Box>
|
||||
<JoinCopy />
|
||||
<Text pt={8}>
|
||||
To apply, your guild must have a{' '}
|
||||
<MetaLink isExternal href="https://discord.com/">
|
||||
Discord
|
||||
</MetaLink>{' '}
|
||||
server.
|
||||
</Text>
|
||||
{stateGuid?.length && user ? (
|
||||
<>
|
||||
<Text pt={4}>
|
||||
Clicking the link below will redirect to a Discord page asking
|
||||
for your permission to collect certain relevant information
|
||||
about your guild:
|
||||
<UnorderedList>
|
||||
<ListItem fontSize="small">
|
||||
Read messages / history. Optional, but this allows us to
|
||||
display announcements from your Discord announcements
|
||||
channel(s) to display on your guild's page.
|
||||
</ListItem>
|
||||
</UnorderedList>
|
||||
</Text>
|
||||
<MetaButton
|
||||
size="lg"
|
||||
maxW="15rem"
|
||||
mt={6}
|
||||
as="a"
|
||||
href={discordAuthURL}
|
||||
>
|
||||
Apply to Join
|
||||
</MetaButton>
|
||||
</>
|
||||
) : (
|
||||
<Flex fontStyle="italic" mt={4}>
|
||||
Please log in or create a player profile by pressing the "Connect"
|
||||
button to start the guild setup process.
|
||||
</Flex>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
</FlexContainer>
|
||||
);
|
||||
};
|
||||
// The back to top link at the bottom of the page
|
||||
const router = useRouter();
|
||||
const topRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
export const JoinCopy: React.FC = () => {
|
||||
function handleBackClick() {
|
||||
topRef?.current?.scrollIntoView({ behavior: 'smooth' });
|
||||
}
|
||||
|
||||
if (router.isFallback) {
|
||||
return <LoadingState />;
|
||||
}
|
||||
|
||||
/*
|
||||
Some styles that are reused
|
||||
.mg-section The page sections
|
||||
.mg-section--title The main title of each section
|
||||
*/
|
||||
const css = {
|
||||
'.header': {
|
||||
marginTop: 5,
|
||||
marginBottom: 1,
|
||||
fontSize: 'xl',
|
||||
color: 'blueLight',
|
||||
},
|
||||
'& br': {
|
||||
marginBottom: 2,
|
||||
},
|
||||
p: {
|
||||
lineHeight: '1.4em',
|
||||
},
|
||||
div: {
|
||||
marginTop: 2,
|
||||
marginBottom: 2,
|
||||
},
|
||||
ul: {
|
||||
marginBottom: 3,
|
||||
marginTop: 1,
|
||||
li: {
|
||||
fontSize: 'sm',
|
||||
ul: {
|
||||
marginBottom: 1,
|
||||
},
|
||||
},
|
||||
'.mg-section': {
|
||||
w: '100%',
|
||||
maxW: '6xl',
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
<Box sx={css}>
|
||||
<Text mt={{ xs: 8, sm: 0 }}>
|
||||
Hello Guilder!
|
||||
<br />
|
||||
Thinking maybe your project should join MetaGame but aren't sure?
|
||||
</Text>
|
||||
<Text className="header">Introduction</Text>
|
||||
<Box>
|
||||
At MetaGame, we believe Ethereum is a core technology for building
|
||||
socioeconomic systems of the future & DAOs are how we get there. We
|
||||
are building an Onboarding Machine & A Decentralized Factory for
|
||||
this fledgling Ethereum DAO ecosystem & the people that want to take
|
||||
part in building the future.
|
||||
<br />
|
||||
Our first goal is to build a place for people to learn what these
|
||||
technologies mean for them & how they can start contributing, then
|
||||
support the people & projects that are building different pieces of
|
||||
this “decentralized society” puzzle in any way we can.
|
||||
<br />
|
||||
We are looking for projects that are either building pieces of the
|
||||
infrastructure for the society of the future, offering tools &
|
||||
services to those that are, or just doing something cool.
|
||||
<Box fontStyle="italic">
|
||||
Please have a clear vision of how you fit in as a piece of this puzzle
|
||||
& ethos before trying to join.
|
||||
</Box>
|
||||
<Box fontWeight="bold">Think:</Box>
|
||||
</Box>
|
||||
<UnorderedList>
|
||||
<ListItem>
|
||||
How does my DAO fit into this “Decentralized Factory”?
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
If it doesn't, does it at least fit as a part of this “building a new
|
||||
world” narrative? (We'll be accepting DAOs ranging from artist or
|
||||
gamer collectives to activist groups.)
|
||||
</ListItem>
|
||||
</UnorderedList>
|
||||
<Text fontWeight="bold">Read more about MetaGame:</Text>
|
||||
<UnorderedList>
|
||||
<ListItem>
|
||||
<MetaLink href="/">MetaGame</MetaLink>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<MetaLink href="/learn/wiki">WTF Is MetaGame</MetaLink>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<MetaLink
|
||||
isExternal
|
||||
href="https://wiki.metagame.wtf/docs/wtf-is-metagame/narrative-1-a-decentralized-factory"
|
||||
>
|
||||
A Decentralized Factory
|
||||
</MetaLink>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<MetaLink
|
||||
isExternal
|
||||
href="https://wiki.metagame.wtf/docs/how-does-it-work/phases-of-metagame"
|
||||
>
|
||||
Phases of MetaGame
|
||||
</MetaLink>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<MetaLink
|
||||
isExternal
|
||||
href="https://wiki.metagame.wtf/docs/wtf-is-metagame/metafam-way"
|
||||
>
|
||||
The MetaManifesto
|
||||
</MetaLink>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<MetaLink
|
||||
isExternal
|
||||
href="https://wiki.metagame.wtf/docs/enter-metagame/why-patron"
|
||||
>
|
||||
Why Become a Patron
|
||||
</MetaLink>
|
||||
</ListItem>
|
||||
</UnorderedList>
|
||||
<Text className="header">Why join?</Text>
|
||||
<Text>A few reasons, actually!</Text>
|
||||
<UnorderedList>
|
||||
<ListItem>
|
||||
Because you feel aligned with the vision & want to be a piece of
|
||||
this “new world” puzzle
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
You want access to a network of pioneers, helpers, stress testers
|
||||
& early adopters
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
You need access or connections to all knowledge & other resources
|
||||
you need for realizing your project. Eventually, a nice interface for
|
||||
accessing all of the above & more:
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
Eg. service offering, role opening & quest requesting boards on{' '}
|
||||
<MetaLink href="/">MetaGame</MetaLink> to help guilds exchange what
|
||||
they need amongst each other.
|
||||
</ListItem>
|
||||
</UnorderedList>
|
||||
<Text className="header">Requirements</Text>
|
||||
<Text>
|
||||
Before wasting your time applying, please have a read through what makes
|
||||
a good fit:
|
||||
</Text>
|
||||
<UnorderedList>
|
||||
<ListItem>
|
||||
At least one of your members is already a{' '}
|
||||
<MetaLink
|
||||
isExternal
|
||||
href="https://wiki.metagame.wtf/docs/enter-metagame/join-metagame"
|
||||
>
|
||||
player or patron of MetaGame
|
||||
</MetaLink>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
You're doing something useful in the Ethereum DAO ecosystem, such as:
|
||||
<UnorderedList>
|
||||
<ListItem>Building a DAO, a dApp, a protocol or a tool</ListItem>
|
||||
<ListItem>Providing a service for other DAOs or guilders</ListItem>
|
||||
</UnorderedList>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
Doing something good for the world, outside or vaguely related to
|
||||
crypto
|
||||
</ListItem>
|
||||
<ListItem>Doing all of the above</ListItem>
|
||||
</UnorderedList>
|
||||
<VStack maxW="6xl" w="100%" spacing={{ base: 16, md: 24 }} sx={css}>
|
||||
<HeadComponent
|
||||
title="Join MetaGame as a Guild"
|
||||
description="We are looking for projects that are either building pieces of the infrastructure for the society of the future, offering tools & services to those that are, or just doing something cool."
|
||||
url="https://my.metagame.wtf/join/guild"
|
||||
/>
|
||||
|
||||
<Text>
|
||||
After convincing us you're doing something useful & passing the
|
||||
initial alignment check, there is essentially one requirement:
|
||||
</Text>
|
||||
<UnorderedList>
|
||||
<ListItem>
|
||||
Signal your alignment with the{' '}
|
||||
<MetaLink
|
||||
isExternal
|
||||
href="https://wiki.metagame.wtf/docs/wtf-is-metagame/metafam-way"
|
||||
>
|
||||
The MetaManifesto
|
||||
</MetaLink>
|
||||
<UnorderedList>
|
||||
<ListItem>
|
||||
By putting your money where your mouth is; donate to a
|
||||
philanthropic or ecological initiative of your choosing through
|
||||
Giveth or another organization of your choosing.
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
By buying a{' '}
|
||||
<MetaLink
|
||||
isExternal
|
||||
href="https://meta-game.notion.site/MetaManifesto-047636a7ecc549b69005e41d272ce7ed"
|
||||
>
|
||||
MetaManifesto NFT
|
||||
</MetaLink>{' '}
|
||||
and/or some Seeds.
|
||||
</ListItem>
|
||||
</UnorderedList>
|
||||
</ListItem>
|
||||
</UnorderedList>
|
||||
<Container w="100%" maxW="6xl">
|
||||
{/* Needs to be a <Heading> instead of <MetaHeading> or ref won't work for the scroll to top */}
|
||||
<Heading
|
||||
as="h1"
|
||||
color="white"
|
||||
fontFamily="mono"
|
||||
fontSize="6xl"
|
||||
fontWeight={700}
|
||||
mb={[4, 4, 4, 12]}
|
||||
textAlign="center"
|
||||
ref={topRef}
|
||||
>
|
||||
Join as a Guild!
|
||||
</Heading>
|
||||
</Container>
|
||||
|
||||
<Text className="header">Then What?</Text>
|
||||
<Box>
|
||||
Then its onto making it known, finding more points of alignment and
|
||||
collaborating!
|
||||
{/* Section: What are Guilds */}
|
||||
<Container as="section" className="mg-section">
|
||||
<Heading
|
||||
as="h2"
|
||||
color="white"
|
||||
fontFamily="mono"
|
||||
fontWeight={700}
|
||||
mb={[4, 4, 4, 12]}
|
||||
>
|
||||
What are Guilds?
|
||||
</Heading>
|
||||
|
||||
<Container bg="whiteAlpha.50" maxW="lg" centerContent>
|
||||
<VStack spacing={8} py={8} px={4}>
|
||||
<Box bg="tomato">picture</Box>
|
||||
<Box>
|
||||
<Text as="h3" fontWeight={700} mb={4}>
|
||||
Guilds make up the Decentralized Factory
|
||||
</Text>
|
||||
<Text mb={4}>
|
||||
Guilds are simply groups of players & patrons doing
|
||||
something useful in our or one of the adjacent ecosystems.
|
||||
</Text>
|
||||
<Text>
|
||||
Guilds of MetaGame aka the MetaAlliance are a network of service
|
||||
& project DAOs, making up The Decentralized Factory.
|
||||
</Text>
|
||||
</Box>
|
||||
</VStack>
|
||||
</Container>
|
||||
</Container>
|
||||
|
||||
{/* Section: Decentralized Factory */}
|
||||
<Container as="section" className="mg-section">
|
||||
<Heading
|
||||
as="h2"
|
||||
color="white"
|
||||
fontFamily="mono"
|
||||
fontWeight={700}
|
||||
mb={[4, 4, 4, 12]}
|
||||
>
|
||||
A Decentralized Factory
|
||||
</Heading>
|
||||
|
||||
<Container centerContent>
|
||||
<Text>(factory image here)</Text>
|
||||
</Container>
|
||||
</Container>
|
||||
|
||||
{/* Section: Why Join */}
|
||||
<Container as="section" className="mg-section">
|
||||
<Heading
|
||||
as="h2"
|
||||
color="white"
|
||||
fontFamily="mono"
|
||||
fontWeight={700}
|
||||
mb={[4, 4, 4, 12]}
|
||||
>
|
||||
Why have your Guild join MetaGame?
|
||||
</Heading>
|
||||
|
||||
<Container bg="whiteAlpha.50" maxW="2xl" p={8}>
|
||||
<Text>A few reasons</Text>
|
||||
<Text>Firstly</Text>
|
||||
<Text>You may also</Text>
|
||||
<UnorderedList>
|
||||
<ListItem>One</ListItem>
|
||||
<ListItem>Two</ListItem>
|
||||
<ListItem>Three</ListItem>
|
||||
</UnorderedList>
|
||||
</Container>
|
||||
</Container>
|
||||
|
||||
{/* Section: Requirements */}
|
||||
<Container as="section" className="mg-section">
|
||||
<Heading
|
||||
as="h2"
|
||||
color="white"
|
||||
fontFamily="mono"
|
||||
fontWeight={700}
|
||||
mb={[4, 4, 4, 12]}
|
||||
>
|
||||
Requirements
|
||||
</Heading>
|
||||
|
||||
<Container>
|
||||
<Text>Before trying to join</Text>
|
||||
<Text>Cards HStack</Text>
|
||||
<Text>Then think</Text>
|
||||
<Text>Flag type component with the smiley</Text>
|
||||
<Text>Finally</Text>
|
||||
<Text>Regular box with text</Text>
|
||||
</Container>
|
||||
</Container>
|
||||
|
||||
{/* Section: Tiers and Perks */}
|
||||
<Container as="section" className="mg-section">
|
||||
<Heading
|
||||
as="h2"
|
||||
color="white"
|
||||
fontFamily="mono"
|
||||
fontWeight={700}
|
||||
mb={[4, 4, 4, 12]}
|
||||
>
|
||||
Tiers & Perks
|
||||
</Heading>
|
||||
|
||||
<Container>
|
||||
<Text>Cards HStack that goes from 3 wide to stacked</Text>
|
||||
<Text>Higher tiers ...</Text>
|
||||
</Container>
|
||||
</Container>
|
||||
|
||||
{/* Section: Other Guilds */}
|
||||
<Container as="section" className="mg-section">
|
||||
<Heading
|
||||
as="h2"
|
||||
color="white"
|
||||
fontFamily="mono"
|
||||
fontWeight={700}
|
||||
mb={[4, 4, 4, 12]}
|
||||
>
|
||||
Other guilds include …
|
||||
</Heading>
|
||||
|
||||
<Container>
|
||||
<Text>Guild component from the other page</Text>
|
||||
<Text>LOAD MORE or VIEW MORE button</Text>
|
||||
</Container>
|
||||
</Container>
|
||||
|
||||
{/* Section: Decided to join */}
|
||||
<Container as="section" className="mg-section">
|
||||
<Heading
|
||||
as="h2"
|
||||
color="white"
|
||||
fontFamily="mono"
|
||||
fontWeight={700}
|
||||
mb={[4, 4, 4, 12]}
|
||||
>
|
||||
Decided to join?
|
||||
</Heading>
|
||||
|
||||
<Container bg="whiteAlpha.50" maxW="2xl" p={8}>
|
||||
<Text>
|
||||
Flag type component that stacks, with the button and conditional
|
||||
text depending on if logged in or not
|
||||
</Text>
|
||||
</Container>
|
||||
</Container>
|
||||
|
||||
<Image src={Octopus} pt={8} />
|
||||
<Box pb={4}>
|
||||
<Button
|
||||
leftIcon={<ArrowUpIcon />}
|
||||
variant="ghost"
|
||||
color="whiteAlpha.700"
|
||||
bgColor="whiteAlpha.50"
|
||||
_hover={{ bg: 'whiteAlpha.200' }}
|
||||
_active={{ bg: 'whiteAlpha.200' }}
|
||||
onClick={handleBackClick}
|
||||
>
|
||||
Back to top
|
||||
</Button>
|
||||
</Box>
|
||||
<Box>Here's what we usually do:</Box>
|
||||
<UnorderedList>
|
||||
<ListItem>
|
||||
You join as a patron & subscribe to our announcement channel, we do
|
||||
the same
|
||||
</ListItem>
|
||||
<ListItem>We announce the new guild onboarding</ListItem>
|
||||
<ListItem>
|
||||
We record a podcast episode with one of the founders
|
||||
</ListItem>
|
||||
<ListItem>We organize a guild2guild meetup</ListItem>
|
||||
<ListItem>
|
||||
You join the group of representatives of all the guilds
|
||||
</ListItem>
|
||||
<ListItem>We do whatever else you suggest</ListItem>
|
||||
<ListItem>
|
||||
All the while, we discuss things we could collaborate on or help each
|
||||
other with
|
||||
</ListItem>
|
||||
</UnorderedList>
|
||||
<Text>
|
||||
Any questions? Ask in{' '}
|
||||
<MetaLink isExternal href="https://discord.gg/6JFXC9T">
|
||||
⁉-ask-anything
|
||||
</MetaLink>{' '}
|
||||
or get in touch with @petheth.
|
||||
</Text>
|
||||
</Box>
|
||||
</VStack>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user