mirror
/
moonstream
kopia lustrzana https://github.com/bugout-dev/moonstream
1
0
Forkuj 0
Kod Zgłoszenia Projekty Wydania Wiki Aktywność

Tweaks to landing page based on feedback from product team.

pull/602/head
Kellan Wampler 2022-05-05 15:00:23 -04:00
rodzic d6419ef4ba
commit ba98f3651f
1 zmienionych plików z 149 dodań i 158 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

307
frontend/pages/index.js
Wyświetl plik

@ -4,11 +4,9 @@ import {
Flex, Flex,
Heading, Heading,
Box, Box,
Divider,
chakra, chakra,
Stack, Stack,
VStack, Link,
Spacer,
Center, Center,
useMediaQuery, useMediaQuery,
Grid, Grid,
@ -42,6 +40,7 @@ const assets = {
educativesessions: `${AWS_ASSETS_PATH}/featured_by/educative_logo.png`, educativesessions: `${AWS_ASSETS_PATH}/featured_by/educative_logo.png`,
cryptoinsiders: `${AWS_ASSETS_PATH}/featured_by/crypto_insiders.png`, cryptoinsiders: `${AWS_ASSETS_PATH}/featured_by/crypto_insiders.png`,
cryptoslate: `${AWS_ASSETS_PATH}/featured_by/cs-media-logo-light.png`, cryptoslate: `${AWS_ASSETS_PATH}/featured_by/cs-media-logo-light.png`,
cgcConference: `${AWS_ASSETS_PATH}/featured_by/cgc_conference_2022_logo.jpg`,
lender: `${AWS_ASSETS_PATH}/lender.png`, lender: `${AWS_ASSETS_PATH}/lender.png`,
DAO: `${AWS_ASSETS_PATH}/DAO .png`, DAO: `${AWS_ASSETS_PATH}/DAO .png`,
NFT: `${AWS_ASSETS_PATH}/NFT.png`, NFT: `${AWS_ASSETS_PATH}/NFT.png`,
@ -86,26 +85,6 @@ const Feature = ({ image, altText, heading, description }) => {
); );
}; };
const MilestoneBox = ({ headingText, description }) => {
return (
<Box
w={["150px", "180px", "300px", "300px", "400px", "500px"]}
// bg="gray.100"
py={5}
>
<Text
fontSize={"3xl"}
textAlign="center"
color="orange.500"
fontWeight="bold"
>
{headingText}
</Text>
<Text marginLeft={10}>{description}</Text>
</Box>
)
}
const Homepage = () => { const Homepage = () => {
const [background, setBackground] = useState("background720"); const [background, setBackground] = useState("background720");
const [backgroundLoaded720, setBackgroundLoaded720] = useState(false); const [backgroundLoaded720, setBackgroundLoaded720] = useState(false);
@ -203,6 +182,62 @@ const Homepage = () => {
setBackgroundLoaded3840(true); setBackgroundLoaded3840(true);
}; };
}, []); }, []);
const MilestoneBox = ({ headingText, description }) => {
return (
<Box
w={["150px", "180px", "300px", "300px", "400px", "500px"]}
// bg="gray.100"
py={5}
>
<Text
fontSize={"xl"}
ml={5}
color="orange.500"
fontWeight="bold"
textAlign="center"
>
{headingText}
</Text>
<Text textAlign="center">{description}</Text>
</Box>
);
};
const JoinDiscordButton = () => {
return (
<RouteButton
minW={["200px", "250px", "250px", "300px", "350px", "400px"]}
alignItems="center"
justifyContent="center"
border="solid transparent"
fontWeight="bold"
rounded={["lg", "xl", "2xl"]}
shadow="md"
variant="solid"
colorScheme="orange"
textColor="blue.1200"
fontSize={["lg", "xl", "2xl", "3xl", "4xl", "4xl"]}
py={[4, 6, 6, 8, 8]}
px={[4, 4, 4, 8, 8]}
onClick={() => {
if (mixpanel.get_distinct_id()) {
mixpanel.track(`${MIXPANEL_EVENTS.BUTTON_CLICKED}`, {
full_url: router.nextRouter.asPath,
buttonName: `Join our Discord`,
page: `landing`,
section: `bottom-line`,
});
}
}}
href={"/discordleed"}
isExternal
>
Join our Discord
</RouteButton>
);
};
return ( return (
<Suspense fallback=""> <Suspense fallback="">
<Fade in> <Fade in>
@ -278,44 +313,7 @@ const Homepage = () => {
allow you to integrate our game mechanics with zero allow you to integrate our game mechanics with zero
effort. effort.
</chakra.span> </chakra.span>
<RouteButton <JoinDiscordButton />
minW={[
"200px",
"250px",
"250px",
"300px",
"350px",
"400px",
]}
alignItems="center"
justifyContent="center"
border="solid transparent"
fontWeight="bold"
rounded={["lg", "xl", "2xl"]}
shadow="md"
variant="solid"
colorScheme="orange"
textColor="blue.1200"
fontSize={["md", "lg", "lg", "xl", "2xl", "3xl"]}
py={[4, 6, 6, 8, 8]}
px={[4, 4, 4, 8, 8]}
onClick={() => {
if (mixpanel.get_distinct_id()) {
mixpanel.track(
`${MIXPANEL_EVENTS.BUTTON_CLICKED}`,
{
full_url: router.nextRouter.asPath,
buttonName: `Join our Discord`,
page: `landing`,
section: `bottom-line`,
}
);
}
}}
href={"/discordleed"}
>
Join our Discord
</RouteButton>
</Stack> </Stack>
</Flex> </Flex>
</Box> </Box>
@ -332,25 +330,25 @@ const Homepage = () => {
<Heading {...HEADING_PROPS} textAlign="center" pb={5} pt={0}> <Heading {...HEADING_PROPS} textAlign="center" pb={5} pt={0}>
Major Milestones Major Milestones
</Heading> </Heading>
<Flex> <Flex wrap="wrap" direction="row" justifyContent="center">
<Spacer />\
<Spacer />
<MilestoneBox <MilestoneBox
headingText="$3 billion" headingText="$3B transaction volume"
description="transaction volume. And growing" description=""
/> />
<MilestoneBox <MilestoneBox
headingText="22,000" headingText="22,000 active users"
description="active user in game economies built with our engine" description=""
/> />
<Spacer />
<Spacer />
</Flex> </Flex>
<Text textAlign="center" fontSize="lg">
And growing...
</Text>
<chakra.h2 <chakra.h2
fontSize={{ base: "3xl", sm: "2xl" }} fontSize={{ base: "3xl", sm: "2xl" }}
textAlign="center" textAlign="center"
pb={4} pb={4}
pt={0} pt={16}
fontWeight="bold"
> >
Trusted by{" "} Trusted by{" "}
</chakra.h2> </chakra.h2>
@ -432,12 +430,15 @@ const Homepage = () => {
px={[4, 4, 4, 8, 8]} px={[4, 4, 4, 8, 8]}
onClick={() => { onClick={() => {
if (mixpanel.get_distinct_id()) { if (mixpanel.get_distinct_id()) {
mixpanel.track(`${MIXPANEL_EVENTS.BUTTON_CLICKED}`, { mixpanel.track(
full_url: router.nextRouter.asPath, `${MIXPANEL_EVENTS.BUTTON_CLICKED}`,
buttonName: `Explore the Use Cases`, {
page: `landing`, full_url: router.nextRouter.asPath,
section: `Dive into Engine Features`, buttonName: `Explore the Use Cases`,
}); page: `landing`,
section: `Dive into Engine Features`,
}
);
} }
}} }}
textColor="blue.900" textColor="blue.900"
@ -455,6 +456,7 @@ const Homepage = () => {
justifyContent="center" justifyContent="center"
w="100%" w="100%"
placeContent={"space-between"} placeContent={"space-between"}
mx={[0, -2, -4]}
> >
<Feature <Feature
image={assets["cryptoTraders"]} image={assets["cryptoTraders"]}
@ -467,19 +469,20 @@ const Homepage = () => {
heading="Crafting Recipes" heading="Crafting Recipes"
/> />
<Feature <Feature
image={assets["lender"]} image={assets["DAO"]}
altText="mined transactions" altText="mined transactions"
heading="Minigames" heading="Minigames"
/> />
<Feature <Feature
image={assets["DAO"]} image={assets["lender"]}
altText="mined transactions" altText="mined transactions"
heading="Airdrops" heading="Airdrops"
/> />
</SimpleGrid> </SimpleGrid>
</GridItem> </GridItem>
<GridItem <GridItem
px="7%" paddingLeft="15%"
paddingRight="20%"
// mt={["32px", "64px", null]} // mt={["32px", "64px", null]}
py={["98px", "128px", null]} py={["98px", "128px", null]}
colSpan="12" colSpan="12"
@ -488,15 +491,16 @@ const Homepage = () => {
<Heading {...HEADING_PROPS} textAlign="center" pb={14} pt={0}> <Heading {...HEADING_PROPS} textAlign="center" pb={14} pt={0}>
Our Workflow Our Workflow
</Heading> </Heading>
<HStack py={5}> <HStack alignItems="top" py={5}>
<Flex bgColor="grey.100" width="25%" height="100%"> <Flex height="100%" width="25%">
<chakra.h2 <chakra.h2
fontSize={["md", "xl", "2xl", "3xl", "3xl", "3xl"]} fontSize={["md", "xl", "2xl", "3xl", "3xl", "3xl"]}
display="inline-block"
> >
Step 1: Step 1:
</chakra.h2> </chakra.h2>
</Flex> </Flex>
<Flex width="75%"> <Flex height="100%" width="75%">
<chakra.span <chakra.span
fontSize={["md", "2xl", "3xl", "3xl", "3xl", "4xl"]} fontSize={["md", "2xl", "3xl", "3xl", "3xl", "4xl"]}
display="inline-block" display="inline-block"
@ -506,7 +510,7 @@ const Homepage = () => {
</chakra.span> </chakra.span>
</Flex> </Flex>
</HStack> </HStack>
<HStack py={5}> <HStack alignItems="top" py={5}>
<Flex bgColor="grey.100" width="25%" height="100%"> <Flex bgColor="grey.100" width="25%" height="100%">
<chakra.h2 <chakra.h2
fontSize={["md", "xl", "2xl", "3xl", "3xl", "3xl"]} fontSize={["md", "xl", "2xl", "3xl", "3xl", "3xl"]}
@ -519,13 +523,15 @@ const Homepage = () => {
fontSize={["md", "2xl", "3xl", "3xl", "3xl", "4xl"]} fontSize={["md", "2xl", "3xl", "3xl", "3xl", "4xl"]}
display="inline-block" display="inline-block"
> >
Join our Discord to get in touch with the team <Link href="/discordleed" isExternal>
(@zomglings). Tell us about your game and schedule a call Join our Discord
if needed. </Link>{" "}
to get in touch with the team (@zomglings). Tell us about
your game and schedule a call if needed.
</chakra.span> </chakra.span>
</Flex> </Flex>
</HStack> </HStack>
<HStack py={5}> <HStack alignItems="top" py={5}>
<Flex bgColor="grey.100" width="25%" height="100%"> <Flex bgColor="grey.100" width="25%" height="100%">
<chakra.h2 <chakra.h2
fontSize={["md", "xl", "2xl", "3xl", "3xl", "3xl"]} fontSize={["md", "xl", "2xl", "3xl", "3xl", "3xl"]}
@ -559,51 +565,64 @@ const Homepage = () => {
<Heading {...HEADING_PROPS} textAlign="center" pb={14} pt={0}> <Heading {...HEADING_PROPS} textAlign="center" pb={14} pt={0}>
Featured by{" "} Featured by{" "}
</Heading> </Heading>
<Flex wrap="wrap" direction="row" justifyContent="center" bgColor="white"> <Center>
<Suspense fallback={""}> <Flex
<TrustedBadge width="85%"
name="cointelegraph" wrap="wrap"
caseURL="" direction="row"
ImgURL={assets["cointelegraph"]} justifyContent="center"
boxURL="https://cointelegraph.com/news/17-of-addresses-snapped-up-80-of-all-ethereum-nfts-since-april" bgColor="white"
/> >
<TrustedBadge <Suspense fallback={""}>
name="CryptoInsiders" <TrustedBadge
ImgURL={assets["cryptoinsiders"]} name="cointelegraph"
boxURL="https://www.crypto-insiders.nl/nieuws/altcoin/17-van-ethereum-whales-bezitten-meer-dan-80-van-alle-nfts-op-de-blockchain/" caseURL=""
/> ImgURL={assets["cointelegraph"]}
<TrustedBadge boxURL="https://cointelegraph.com/news/17-of-addresses-snapped-up-80-of-all-ethereum-nfts-since-april"
name="cryptoslate" />
ImgURL={assets["cryptoslate"]} <TrustedBadge
boxURL="https://cryptoslate.com/should-investors-care-80-of-all-nfts-belong-to-17-of-addresses/" name="CryptoInsiders"
/> ImgURL={assets["cryptoinsiders"]}
<TrustedBadge boxURL="https://www.crypto-insiders.nl/nieuws/altcoin/17-van-ethereum-whales-bezitten-meer-dan-80-van-alle-nfts-op-de-blockchain/"
name="educative sessions" />
scale={1.5} <TrustedBadge
ImgURL={assets["educativesessions"]} name="cryptoslate"
boxURL="https://youtu.be/DN8zRzJuy0M" ImgURL={assets["cryptoslate"]}
/> boxURL="https://cryptoslate.com/should-investors-care-80-of-all-nfts-belong-to-17-of-addresses/"
<TrustedBadge />
scale={1.5} <TrustedBadge
name="bc101" name="educative sessions"
ImgURL={assets["bc101"]} scale={1.5}
boxURL="https://blockchain101.com/" ImgURL={assets["educativesessions"]}
/> boxURL="https://youtu.be/DN8zRzJuy0M"
<TrustedBadge />
scale={1.5} <TrustedBadge
name="bc101" scale={1.5}
ImgURL={assets["meetup"]} name="bc101"
boxURL="https://www.meetup.com/SF-Bay-Area-Data-Science-Initiative/events/283215538/" ImgURL={assets["bc101"]}
/> boxURL="https://blockchain101.com/"
</Suspense> />
</Flex> <TrustedBadge
scale={1.5}
name="bc101"
ImgURL={assets["meetup"]}
boxURL="https://www.meetup.com/SF-Bay-Area-Data-Science-Initiative/events/283215538/"
/>
<TrustedBadge
scale={1.5}
name="cgc2022"
ImgURL={assets["cgcConference"]}
boxURL="https://www.cgc.one/"
/>
</Suspense>
</Flex>
</Center>
</GridItem> </GridItem>
<GridItem <GridItem
px={["7%", null, "12%", "15%"]} px={["7%", null, "12%", "15%"]}
py={["98px", "128px", null]} py={["98px", "128px", null]}
colSpan="12" colSpan="12"
bgColor="blue.700" bgColor="white"
textColor="white"
> >
<Flex <Flex
p={50} p={50}
@ -625,40 +644,12 @@ const Homepage = () => {
display="block" display="block"
my={12} my={12}
fontSize={["md", "2xl", "3xl", "3xl", "3xl", "4xl"]} fontSize={["md", "2xl", "3xl", "3xl", "3xl", "4xl"]}
color="white"
> >
{`Contact us on Discord to discuss your project and keep up with the latest updates on the Moonstream Engine.`} {`Contact us on Discord to discuss your project and keep up with the latest updates on Moonstream Engine.`}
</chakra.span> </chakra.span>
</chakra.h2> </chakra.h2>
<RouteButton <JoinDiscordButton />
minW={["300px", "300px", "460px"]}
alignItems="center"
justifyContent="center"
border="solid transparent"
fontWeight="bold"
rounded="md"
shadow="md"
variant="solid"
colorScheme="orange"
textColor="blue.1200"
fontSize={["md", "md", "lg", "xl", "3xl"]}
py={[4, 6, 6, 8, 8]}
px={[4, 4, 4, 8, 8]}
onClick={() => {
if (mixpanel.get_distinct_id()) {
mixpanel.track(`${MIXPANEL_EVENTS.BUTTON_CLICKED}`, {
full_url: router.nextRouter.asPath,
buttonName: `Join our Discord`,
page: `landing`,
section: `bottom-line`,
});
}
}}
href={"/discordleed"}
>
Join the community on Discord
</RouteButton>
</Flex> </Flex>
</GridItem> </GridItem>
</Grid> </Grid>