kopia lustrzana https://github.com/bugout-dev/moonstream
Updates to landing page for mobile.
Kellan Wampler
rodzic
8b03477763
commit
4fbcdf0422
|
|
@ -35,10 +35,10 @@ export default class MyDocument extends Document {
|
|||
<link
|
||||
rel="preload"
|
||||
as="style"
|
||||
href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;600;700;800;900&display=swap"
|
||||
href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700;800;900&display=swap"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;600;700;800;900&display=swap"
|
||||
href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700;800;900&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link rel="preconnect" href="https://s3.amazonaws.com" />
|
||||
|
|
|
|||
|
|
@ -17,7 +17,10 @@ import {
|
|||
HStack,
|
||||
VStack,
|
||||
Accordion,
|
||||
Icon,
|
||||
Spacer,
|
||||
} from "@chakra-ui/react";
|
||||
import { HiOutlineChatAlt2 } from "react-icons/hi";
|
||||
import useUser from "../src/core/hooks/useUser";
|
||||
import useRouter from "../src/core/hooks/useRouter";
|
||||
import {
|
||||
|
|
@ -30,7 +33,6 @@ import RouteButton from "../src/components/RouteButton";
|
|||
import AnalyticsContext from "../src/core/providers/AnalyticsProvider/context";
|
||||
import RouterLink from "next/link";
|
||||
import FAQCard from "../src/components/FAQCard";
|
||||
import EngineOverviewDiagram from "../src/components/EngineOverviewDiagram";
|
||||
|
||||
const HEADING_PROPS = {
|
||||
fontWeight: "700",
|
||||
|
|
@ -44,24 +46,24 @@ const assets = {
|
|||
background1920: `${AWS_ASSETS_PATH}/background720.png`,
|
||||
background2880: `${AWS_ASSETS_PATH}/background720.png`,
|
||||
background3840: `${AWS_ASSETS_PATH}/background720.png`,
|
||||
bc101: `${AWS_ASSETS_PATH}/featured_by/blockchain101_logo.png`,
|
||||
bc101: `${AWS_ASSETS_PATH}/featured_by/blockchain-101-white.png`,
|
||||
bulliverse: `${AWS_ASSETS_PATH}/bullieverse_logo.png`,
|
||||
cgcConference: `${AWS_ASSETS_PATH}/featured_by/cgc_conference_2022_logo.jpg`,
|
||||
championsAscension: `${AWS_ASSETS_PATH}/featured_by/champions.png`,
|
||||
cointelegraph: `${AWS_ASSETS_PATH}/featured_by/Cointelegraph_logo.png`,
|
||||
cointelegraph: `${AWS_ASSETS_PATH}/featured_by/cointelegraph-white.png`,
|
||||
craftingRecipe: `${AWS_ASSETS_PATH}/crafting-recipe.png`,
|
||||
cryptoGuilds: `${AWS_ASSETS_PATH}/crypto_guilds_logo.png`,
|
||||
cryptoinsiders: `${AWS_ASSETS_PATH}/featured_by/crypto_insiders.png`,
|
||||
cryptoslate: `${AWS_ASSETS_PATH}/featured_by/cs-media-logo-light.png`,
|
||||
cryptoinsiders: `${AWS_ASSETS_PATH}/featured_by/crypto-insiders-white.png`,
|
||||
cryptoslate: `${AWS_ASSETS_PATH}/featured_by/cryptoslate-white.png`,
|
||||
cryptoUnicorns: `${AWS_ASSETS_PATH}/crypto_unicorns_logo.png`,
|
||||
educativesessions: `${AWS_ASSETS_PATH}/featured_by/educative_logo.png`,
|
||||
educativesessions: `${AWS_ASSETS_PATH}/featured_by/educative-white.png`,
|
||||
ethereum_blockchain: `${AWS_ASSETS_PATH}/ethereum_blockchain_logo.png`,
|
||||
evmos: `${AWS_ASSETS_PATH}/evmos_logo.png`,
|
||||
forte: `${AWS_ASSETS_PATH}/forte_logo.png`,
|
||||
game7io: `${AWS_ASSETS_PATH}/featured_by/game7io_logo.png`,
|
||||
gnosis: `${AWS_ASSETS_PATH}/gnosis_chain_logo.png`,
|
||||
laguna: `${AWS_ASSETS_PATH}/featured_by/laguna_logo.svg`,
|
||||
meetup: `${AWS_ASSETS_PATH}/featured_by/meetup_logo.png`,
|
||||
meetup: `${AWS_ASSETS_PATH}/featured_by/meetup-white.png`,
|
||||
minigame: `${AWS_ASSETS_PATH}/minigame.png`,
|
||||
openLootbox: `${AWS_ASSETS_PATH}/open-lootbox.png`,
|
||||
optimism: `${AWS_ASSETS_PATH}/optimism_logo.png`,
|
||||
|
|
@ -170,7 +172,7 @@ const Homepage = () => {
|
|||
// }, []);
|
||||
|
||||
const blueBackgroundColor = "#212698";
|
||||
const lightOrangeColor = "#FF9473";
|
||||
const lightOrangeColor = "#F56646";
|
||||
const cardBackgroundColor = "#353535";
|
||||
|
||||
const Feature = ({ title, altText, image, ...props }) => {
|
||||
|
|
@ -180,7 +182,8 @@ const Homepage = () => {
|
|||
<Stack
|
||||
transition={"1s"}
|
||||
spacing={1}
|
||||
px={1}
|
||||
px={2}
|
||||
py={4}
|
||||
alignItems="center"
|
||||
borderRadius="12px"
|
||||
borderColor="white"
|
||||
|
|
@ -189,13 +192,11 @@ const Homepage = () => {
|
|||
_hover={{ transform: "scale(1.05)", transition: "0.42s" }}
|
||||
cursor="pointer"
|
||||
m={[2, 3, 3, 4, 8, 12]}
|
||||
pb={2}
|
||||
py={4}
|
||||
w="240px"
|
||||
h="300px"
|
||||
w={["155px", "240px"]}
|
||||
h={["200px", "300px"]}
|
||||
>
|
||||
<ChakraImage
|
||||
boxSize={["150px", "220px", "200px", null]}
|
||||
boxSize={["120px", "200px", null]}
|
||||
objectFit="contain"
|
||||
src={image}
|
||||
alt={altText}
|
||||
|
|
@ -223,6 +224,7 @@ const Homepage = () => {
|
|||
bgSize="cover"
|
||||
id="page:landing"
|
||||
bgColor={BACKGROUND_COLOR}
|
||||
textColor="white"
|
||||
>
|
||||
<Flex
|
||||
direction="column"
|
||||
|
|
@ -302,14 +304,10 @@ const Homepage = () => {
|
|||
<Center>
|
||||
<RouteButton
|
||||
variant="whiteOnOrange"
|
||||
minW={[
|
||||
"220px",
|
||||
"250px",
|
||||
"250px",
|
||||
"300px",
|
||||
"350px",
|
||||
"400px",
|
||||
]}
|
||||
bg={
|
||||
"linear-gradient(92.26deg, #F56646 8.41%, #FFFFFF 255.37%);"
|
||||
}
|
||||
minW={["150px", null]}
|
||||
onClick={() => {
|
||||
buttonReport(
|
||||
"Boost",
|
||||
|
|
@ -319,7 +317,7 @@ const Homepage = () => {
|
|||
}}
|
||||
href={"/contact"}
|
||||
>
|
||||
Boost my game economy
|
||||
Get Started
|
||||
</RouteButton>
|
||||
</Center>
|
||||
<Center>
|
||||
|
|
@ -329,14 +327,7 @@ const Homepage = () => {
|
|||
borderWidth="2px"
|
||||
borderColor="white"
|
||||
textColor="white"
|
||||
minW={[
|
||||
"220px",
|
||||
"250px",
|
||||
"250px",
|
||||
"300px",
|
||||
"350px",
|
||||
"400px",
|
||||
]}
|
||||
minW={["200px", null]}
|
||||
onClick={() => {
|
||||
buttonReport(
|
||||
"Discord",
|
||||
|
|
@ -358,18 +349,19 @@ const Homepage = () => {
|
|||
// rounded={["lg", "xl", "2xl"]}
|
||||
>
|
||||
<HStack h="100%">
|
||||
<Center w={[null, null, "43%"]} h="100%">
|
||||
<Center w={["50%", "43%"]} h={["auto", "100%"]}>
|
||||
<Flex w="100%">
|
||||
<HStack>
|
||||
<Stack direction={["column", "row"]}>
|
||||
<Text
|
||||
fontSize={[
|
||||
"md",
|
||||
"xl",
|
||||
"xl",
|
||||
"2xl",
|
||||
"5xl",
|
||||
"5xl",
|
||||
"5xl",
|
||||
]}
|
||||
fontWeight="medium"
|
||||
pr={4}
|
||||
>
|
||||
>$4b
|
||||
|
|
@ -379,31 +371,32 @@ const Homepage = () => {
|
|||
<br />
|
||||
And growing
|
||||
</Text>
|
||||
</HStack>
|
||||
</Stack>
|
||||
</Flex>
|
||||
</Center>
|
||||
<Center w={[null, null, "57%"]} h="100%">
|
||||
<Center w={["50%", "57%"]} h="100%">
|
||||
<Flex w="100%" justifyContent="right">
|
||||
<HStack>
|
||||
<Stack direction={["column", "row"]}>
|
||||
<Text
|
||||
fontSize={[
|
||||
"md",
|
||||
"xl",
|
||||
"xl",
|
||||
"2xl",
|
||||
"5xl",
|
||||
"5xl",
|
||||
"5xl",
|
||||
]}
|
||||
fontWeight="medium"
|
||||
pr={4}
|
||||
>
|
||||
>44k
|
||||
</Text>
|
||||
<Text w="100%">
|
||||
<Text w="100%" alignSelf="center">
|
||||
active users in game economies
|
||||
<br />
|
||||
built with our engine
|
||||
</Text>
|
||||
</HStack>
|
||||
</Stack>
|
||||
</Flex>
|
||||
</Center>
|
||||
</HStack>
|
||||
|
|
@ -413,7 +406,12 @@ const Homepage = () => {
|
|||
</chakra.header>
|
||||
</GridItem>
|
||||
|
||||
<GridItem px="7%" py={10} colSpan="12" bgColor={BACKGROUND_COLOR}>
|
||||
<GridItem
|
||||
px={["5%", null, "12%", "15%"]}
|
||||
py={10}
|
||||
colSpan="12"
|
||||
bgColor={BACKGROUND_COLOR}
|
||||
>
|
||||
<VStack
|
||||
bgColor="white"
|
||||
rounded="3xl"
|
||||
|
|
@ -443,31 +441,31 @@ const Homepage = () => {
|
|||
boxURL="https://bullieverisland.com/"
|
||||
/> */}
|
||||
<TrustedBadge
|
||||
scaling={1.5}
|
||||
scaling={0.8}
|
||||
name="Champions Ascension"
|
||||
ImgURL={assets["championsAscension"]}
|
||||
boxURL="https://www.champions.io/"
|
||||
/>
|
||||
<TrustedBadge
|
||||
scaling={[1.5]}
|
||||
scaling={0.8}
|
||||
name="Crypto Guilds"
|
||||
ImgURL={assets["cryptoGuilds"]}
|
||||
boxURL="https://crypto-guilds.com/"
|
||||
/>
|
||||
<TrustedBadge
|
||||
scaling={[1.5]}
|
||||
scaling={0.8}
|
||||
name="Crypto Unicorns"
|
||||
ImgURL={assets["cryptoUnicorns"]}
|
||||
boxURL="https://www.cryptounicorns.fun/"
|
||||
/>
|
||||
<TrustedBadge
|
||||
scaling={[1.5]}
|
||||
scaling={0.8}
|
||||
name="game7io"
|
||||
ImgURL={assets["game7io"]}
|
||||
boxURL="https://game7.io/"
|
||||
/>
|
||||
<TrustedBadge
|
||||
scaling={1.5}
|
||||
scaling={0.8}
|
||||
name="orangedao"
|
||||
ImgURL={assets["orangedao"]}
|
||||
boxURL="https://lfg.orangedao.xyz/"
|
||||
|
|
@ -491,23 +489,25 @@ const Homepage = () => {
|
|||
>
|
||||
<Suspense fallback={""}>
|
||||
<TrustedBadge
|
||||
scaling={1.5}
|
||||
scaling={0.5}
|
||||
pt="10px"
|
||||
name="polygon"
|
||||
ImgURL={assets["polygon"]}
|
||||
boxURL="https://polygon.technology/"
|
||||
/>
|
||||
<TrustedBadge
|
||||
scaling={0.8}
|
||||
name="ethereum"
|
||||
ImgURL={assets["ethereum_blockchain"]}
|
||||
boxURL="https://ethereum.org/"
|
||||
/>
|
||||
<TrustedBadge
|
||||
scaling={1.3}
|
||||
scaling={0.6}
|
||||
pt="8px"
|
||||
name="gnosis"
|
||||
ImgURL={assets["gnosis"]}
|
||||
boxURL="https://gnosis.io/"
|
||||
/>
|
||||
<TrustedBadge
|
||||
scaling={1.1}
|
||||
name="polygon"
|
||||
ImgURL={assets["polygon"]}
|
||||
boxURL="https://polygon.technology/"
|
||||
/>
|
||||
</Suspense>
|
||||
</Flex>
|
||||
<Heading
|
||||
|
|
@ -522,35 +522,35 @@ const Homepage = () => {
|
|||
<Flex wrap="wrap" direction="row" justifyContent="center">
|
||||
<Suspense fallback={""}>
|
||||
<TrustedBadge
|
||||
scaling={1.2}
|
||||
name="arbitrum"
|
||||
ImgURL={assets["arbitrum"]}
|
||||
boxURL="https://bridge.arbitrum.io/"
|
||||
/>
|
||||
<TrustedBadge
|
||||
scaling={1.2}
|
||||
name="evmos"
|
||||
ImgURL={assets["evmos"]}
|
||||
boxURL="https://evmos.org/"
|
||||
/>
|
||||
<TrustedBadge
|
||||
scaling={1.2}
|
||||
scaling={0.6}
|
||||
name="forte"
|
||||
ImgURL={assets["forte"]}
|
||||
boxURL="https://www.forte.io/"
|
||||
/>
|
||||
<TrustedBadge
|
||||
scaling={1.2}
|
||||
scaling={0.6}
|
||||
name="optimism"
|
||||
ImgURL={assets["optimism"]}
|
||||
boxURL="https://www.optimism.io/"
|
||||
/>
|
||||
<TrustedBadge
|
||||
scaling={0.6}
|
||||
name="evmos"
|
||||
ImgURL={assets["evmos"]}
|
||||
boxURL="https://evmos.org/"
|
||||
/>
|
||||
<TrustedBadge
|
||||
scaling={0.6}
|
||||
name="arbitrum"
|
||||
ImgURL={assets["arbitrum"]}
|
||||
boxURL="https://bridge.arbitrum.io/"
|
||||
/>
|
||||
</Suspense>
|
||||
</Flex>
|
||||
</VStack>
|
||||
</GridItem>
|
||||
<GridItem
|
||||
px={["7%", null, "12%", "15%"]}
|
||||
px={["3%", null, "12%", "15%"]}
|
||||
colSpan="12"
|
||||
pt={12}
|
||||
bgColor={BACKGROUND_COLOR}
|
||||
|
|
@ -566,10 +566,10 @@ const Homepage = () => {
|
|||
</chakra.span>
|
||||
</Center>
|
||||
<SimpleGrid
|
||||
columns={[2, 2, 2, 4, 4, 4]}
|
||||
justifyContent="center"
|
||||
columns={[2, 2, 4, null]}
|
||||
justifyContent={["flex-end", "center"]}
|
||||
w="100%"
|
||||
placeContent={"space-between"}
|
||||
spacing={["0px", "40px"]}
|
||||
mx={[0, -2, -4]}
|
||||
paddingTop="20px"
|
||||
>
|
||||
|
|
@ -668,6 +668,131 @@ const Homepage = () => {
|
|||
</Stack>
|
||||
</Center>
|
||||
</GridItem>
|
||||
<GridItem
|
||||
px={["7%", null, "12%", "15%"]}
|
||||
py={10}
|
||||
colSpan="12"
|
||||
bgColor={BACKGROUND_COLOR}
|
||||
>
|
||||
<Heading
|
||||
{...HEADING_PROPS}
|
||||
textAlign="center"
|
||||
pb={[4, 14]}
|
||||
as="h2"
|
||||
>
|
||||
Our Workflow
|
||||
</Heading>
|
||||
<Stack textAlign="center" direction={["column", "row"]}>
|
||||
<VStack alignItems="center" px={4} py={4}>
|
||||
<Flex mb={5}>
|
||||
<Heading
|
||||
as="h3"
|
||||
fontSize={["md", "md", "lg", "lg"]}
|
||||
display="inline-block"
|
||||
fontWeight="semibold"
|
||||
>
|
||||
Step 1
|
||||
</Heading>
|
||||
</Flex>
|
||||
<Flex>
|
||||
<chakra.span
|
||||
fontSize={["sm", "sm", "md", "md"]}
|
||||
display="inline-block"
|
||||
>
|
||||
So you decided to build a healthy economy on the
|
||||
blockchain. You are on the right path, traveler!
|
||||
</chakra.span>
|
||||
</Flex>
|
||||
</VStack>
|
||||
<VStack alignItems="center" px={4} py={4}>
|
||||
<Flex mb={5}>
|
||||
<Heading
|
||||
as="h3"
|
||||
fontSize={["md", "md", "lg", "lg"]}
|
||||
display="inline-block"
|
||||
fontWeight="semibold"
|
||||
>
|
||||
Step 2
|
||||
</Heading>
|
||||
</Flex>
|
||||
<Flex>
|
||||
<chakra.span
|
||||
fontSize={["sm", "sm", "md", "md"]}
|
||||
display="inline-block"
|
||||
>
|
||||
Sign up to get whitelisted. We'll reach out to you
|
||||
within 3 days to schedule a call or make a partnership
|
||||
proposal.
|
||||
</chakra.span>
|
||||
</Flex>
|
||||
</VStack>
|
||||
<VStack alignItems="center" px={4} py={4}>
|
||||
<Flex mb={5}>
|
||||
<Heading
|
||||
as="h3"
|
||||
fontSize={["md", "md", "lg", "lg"]}
|
||||
display="inline-block"
|
||||
fontWeight="semibold"
|
||||
>
|
||||
Step 3
|
||||
</Heading>
|
||||
</Flex>
|
||||
<Flex mb={5}>
|
||||
<chakra.span
|
||||
fontSize={["sm", "sm", "md", "md"]}
|
||||
display="inline-block"
|
||||
>
|
||||
During onboarding pick game mechanics that you'd
|
||||
like to deploy. Moonstream Engine provides you with
|
||||
back-end tools to put them on the blockchain.
|
||||
</chakra.span>
|
||||
</Flex>
|
||||
</VStack>
|
||||
<VStack alignItems="center" px={4} py={4}>
|
||||
<Center
|
||||
mb={5}
|
||||
w="100%"
|
||||
bg="linear-gradient(92.04deg, #FFD337 36.28%, rgba(48, 222, 76, 0.871875) 43.18%, rgba(114, 162, 255, 0.91) 50.43%, rgba(255, 160, 245, 0.86) 55.02%, rgba(255, 101, 157, 0.71) 60.64%, rgba(255, 97, 154, 0.59) 64.7%), #1A1D22;"
|
||||
backgroundClip="text"
|
||||
>
|
||||
<Heading
|
||||
as="h3"
|
||||
fontSize={["md", "md", "lg", "lg"]}
|
||||
display="inline-block"
|
||||
fontWeight="semibold"
|
||||
>
|
||||
Enjoy
|
||||
</Heading>
|
||||
</Center>
|
||||
<Flex>
|
||||
<chakra.span
|
||||
fontSize={["sm", "sm", "md", "md"]}
|
||||
display="inline-block"
|
||||
>
|
||||
You're at the end of your blockchain development
|
||||
journey now, traveler. Time to watch your game economy
|
||||
grow!
|
||||
</chakra.span>
|
||||
</Flex>
|
||||
</VStack>
|
||||
</Stack>
|
||||
<Center pt={14}>
|
||||
<Icon as={HiOutlineChatAlt2} mr={2}></Icon>
|
||||
<Text>
|
||||
Have something to discuss before signing up?{" "}
|
||||
<Link
|
||||
href="/discordleed"
|
||||
onClick={() => {
|
||||
buttonReport("Discord", "workflow", "landing");
|
||||
}}
|
||||
isExternal
|
||||
>
|
||||
<u>Join our Discord</u>{" "}
|
||||
</Link>
|
||||
to get in touch with the team (@zomglings).
|
||||
</Text>
|
||||
</Center>
|
||||
</GridItem>
|
||||
<GridItem
|
||||
px={["7%", null, "12%", "15%"]}
|
||||
py={10}
|
||||
|
|
@ -871,115 +996,20 @@ const Homepage = () => {
|
|||
</Accordion>
|
||||
</GridItem>
|
||||
<GridItem
|
||||
px={["7%", "7%", "7%", "15%"]}
|
||||
px={["5%", null, "12%", "15%"]}
|
||||
py={10}
|
||||
colSpan="12"
|
||||
bgColor={BACKGROUND_COLOR}
|
||||
minH="100vh"
|
||||
>
|
||||
<Heading {...HEADING_PROPS} textAlign="center" as="h2" pb={10}>
|
||||
Engine Overview
|
||||
</Heading>
|
||||
<Center>
|
||||
<EngineOverviewDiagram buttonReport={buttonReport} />
|
||||
</Center>
|
||||
</GridItem>
|
||||
<GridItem
|
||||
px={["7%", null, "12%", "15%"]}
|
||||
py={10}
|
||||
colSpan="12"
|
||||
bgColor={BACKGROUND_COLOR}
|
||||
>
|
||||
<Heading {...HEADING_PROPS} textAlign="center" pb={14} as="h2">
|
||||
Our Workflow
|
||||
</Heading>
|
||||
<HStack alignItems="top" py={5}>
|
||||
<Flex height="100%" width="20%">
|
||||
<Heading
|
||||
as="h3"
|
||||
fontSize={["md", "xl", "4xl", "4xl", "4xl", "5xl"]}
|
||||
display="inline-block"
|
||||
fontWeight="semibold"
|
||||
>
|
||||
Step 1:
|
||||
</Heading>
|
||||
</Flex>
|
||||
<Flex height="100%" width="80%">
|
||||
<chakra.span
|
||||
fontSize={["sm", "lg", "3xl", "3xl", "3xl", "4xl"]}
|
||||
display="inline-block"
|
||||
>
|
||||
So you decided to build a healthy economy on the
|
||||
blockchain. You are on the right path, traveler!
|
||||
</chakra.span>
|
||||
</Flex>
|
||||
</HStack>
|
||||
<HStack alignItems="top" py={5}>
|
||||
<Flex bgColor="grey.100" width="20%" height="100%">
|
||||
<Heading
|
||||
as="h3"
|
||||
fontSize={["md", "xl", "4xl", "4xl", "4xl", "5xl"]}
|
||||
display="inline-block"
|
||||
fontWeight="semibold"
|
||||
>
|
||||
Step 2:
|
||||
</Heading>
|
||||
</Flex>
|
||||
<Flex width="80%">
|
||||
<chakra.span
|
||||
fontSize={["sm", "lg", "3xl", "3xl", "3xl", "4xl"]}
|
||||
display="inline-block"
|
||||
>
|
||||
<Link
|
||||
href="/discordleed"
|
||||
onClick={() => {
|
||||
buttonReport("Discord", "workflow", "landing");
|
||||
}}
|
||||
isExternal
|
||||
>
|
||||
<u>Join our Discord</u>{" "}
|
||||
</Link>{" "}
|
||||
to get in touch with the team (@zomglings). Tell us about
|
||||
your game and schedule a call if needed.
|
||||
</chakra.span>
|
||||
</Flex>
|
||||
</HStack>
|
||||
<HStack alignItems="top" py={5}>
|
||||
<Flex bgColor="grey.100" width="20%" height="100%">
|
||||
<Heading
|
||||
as="h3"
|
||||
fontSize={["md", "xl", "4xl", "4xl", "4xl", "5xl"]}
|
||||
display="inline-block"
|
||||
fontWeight="semibold"
|
||||
>
|
||||
Step 3:
|
||||
</Heading>
|
||||
</Flex>
|
||||
<Flex width="80%">
|
||||
<chakra.span
|
||||
fontSize={["sm", "lg", "3xl", "3xl", "3xl", "4xl"]}
|
||||
display="inline-block"
|
||||
>
|
||||
Pick game mechanics that you'd like to deploy.
|
||||
Moonstream Engine provides you with back-end tools to put
|
||||
them on the blockchain.
|
||||
<br />
|
||||
<br />
|
||||
You're at the end of your development journey now,
|
||||
traveler. Time to watch your game economy grow!
|
||||
</chakra.span>
|
||||
</Flex>
|
||||
</HStack>
|
||||
</GridItem>
|
||||
<GridItem
|
||||
px="7%"
|
||||
py={12}
|
||||
colSpan="12"
|
||||
bgColor={BACKGROUND_COLOR}
|
||||
textColor="white"
|
||||
minH="40vh"
|
||||
>
|
||||
<Heading as="h2" {...HEADING_PROPS} textAlign="center" pb={10}>
|
||||
<Heading
|
||||
as="h2"
|
||||
{...HEADING_PROPS}
|
||||
textAlign="center"
|
||||
pb={10}
|
||||
fontWeight="semibold"
|
||||
>
|
||||
Featured by{" "}
|
||||
</Heading>
|
||||
<Center>
|
||||
|
|
@ -987,50 +1017,48 @@ const Homepage = () => {
|
|||
width="81%"
|
||||
wrap="wrap"
|
||||
direction="row"
|
||||
justifyContent="center"
|
||||
bgColor="white"
|
||||
rounded={["lg", "xl", "2xl", "3xl", "4xl", "4xl"]}
|
||||
>
|
||||
<Suspense fallback={""}>
|
||||
<TrustedBadge
|
||||
scaling={0.9}
|
||||
scaling={0.5}
|
||||
name="cointelegraph"
|
||||
caseURL=""
|
||||
ImgURL={assets["cointelegraph"]}
|
||||
boxURL="https://cointelegraph.com/news/17-of-addresses-snapped-up-80-of-all-ethereum-nfts-since-april"
|
||||
/>
|
||||
<TrustedBadge
|
||||
scaling={0.9}
|
||||
scaling={0.5}
|
||||
name="CryptoInsiders"
|
||||
ImgURL={assets["cryptoinsiders"]}
|
||||
boxURL="https://www.crypto-insiders.nl/nieuws/altcoin/17-van-ethereum-whales-bezitten-meer-dan-80-van-alle-nfts-op-de-blockchain/"
|
||||
/>
|
||||
<TrustedBadge
|
||||
scaling={0.8}
|
||||
scaling={0.5}
|
||||
name="cryptoslate"
|
||||
ImgURL={assets["cryptoslate"]}
|
||||
boxURL="https://cryptoslate.com/should-investors-care-80-of-all-nfts-belong-to-17-of-addresses/"
|
||||
/>
|
||||
<TrustedBadge
|
||||
scaling={1.2}
|
||||
scaling={0.5}
|
||||
name="bc101"
|
||||
ImgURL={assets["meetup"]}
|
||||
boxURL="https://www.meetup.com/SF-Bay-Area-Data-Science-Initiative/events/283215538/"
|
||||
/>
|
||||
<TrustedBadge
|
||||
name="educative sessions"
|
||||
scaling={1.5}
|
||||
scaling={0.5}
|
||||
ImgURL={assets["educativesessions"]}
|
||||
boxURL="https://youtu.be/DN8zRzJuy0M"
|
||||
/>
|
||||
<TrustedBadge
|
||||
scaling={1.5}
|
||||
scaling={0.5}
|
||||
name="bc101"
|
||||
ImgURL={assets["bc101"]}
|
||||
boxURL="https://blockchain101.com/"
|
||||
/>
|
||||
<TrustedBadge
|
||||
scaling={1.2}
|
||||
scaling={0.5}
|
||||
name="cgc2022"
|
||||
ImgURL={assets["cgcConference"]}
|
||||
boxURL="https://www.cgc.one/"
|
||||
|
|
@ -1046,81 +1074,78 @@ const Homepage = () => {
|
|||
bgColor={BACKGROUND_COLOR}
|
||||
minH="50vh"
|
||||
>
|
||||
<VStack
|
||||
bgColor="blue.900"
|
||||
rounded={["lg", "xl", "2xl"]}
|
||||
<Stack
|
||||
direction={["column", "row"]}
|
||||
bgColor={lightOrangeColor}
|
||||
borderWidth="2px"
|
||||
borderColor="white"
|
||||
borderRadius="30px"
|
||||
textColor="white"
|
||||
px={10}
|
||||
py={8}
|
||||
mb={8}
|
||||
>
|
||||
<Heading
|
||||
as="h2"
|
||||
fontSize={["md", "xl", "3xl", "4xl", "4xl", "5xl"]}
|
||||
letterSpacing="wide"
|
||||
textAlign="center"
|
||||
>
|
||||
Sign up to grow your economy
|
||||
</Heading>
|
||||
<chakra.span
|
||||
fontSize={["xs", "xs", "sm", "md", "lg", "lg"]}
|
||||
py={4}
|
||||
>
|
||||
{`Answer 5 questions about your project to get whitelisted.`}
|
||||
</chakra.span>
|
||||
<Box>
|
||||
<Heading
|
||||
as="h2"
|
||||
fontSize={["lg", "xl", null]}
|
||||
letterSpacing="wide"
|
||||
pb={4}
|
||||
textAlign={["center", "left"]}
|
||||
>
|
||||
Sign up to grow your economy
|
||||
</Heading>
|
||||
<Text
|
||||
fontSize={["sm", "sm", "md", "md", null]}
|
||||
py={4}
|
||||
textAlign={["center", "left"]}
|
||||
>
|
||||
{`Answer 5 questions about your project to get whitelisted.`}
|
||||
</Text>
|
||||
</Box>
|
||||
<Spacer />
|
||||
<RouteButton
|
||||
variant="orangeAndBlue"
|
||||
minW={[
|
||||
"200px",
|
||||
"250px",
|
||||
"250px",
|
||||
"300px",
|
||||
"350px",
|
||||
"400px",
|
||||
]}
|
||||
bg="white"
|
||||
minW={["250px", "250px", null]}
|
||||
onClick={() => {
|
||||
buttonReport("Boost", "page-bottom", "landing");
|
||||
}}
|
||||
href={"/contact"}
|
||||
>
|
||||
Boost my game
|
||||
Boost my game economy
|
||||
</RouteButton>
|
||||
</VStack>
|
||||
</Stack>
|
||||
<Flex
|
||||
w="100%"
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
direction={["column", "column", "row"]}
|
||||
border="2px"
|
||||
color="blue.900"
|
||||
rounded={["lg", "xl", "2xl"]}
|
||||
borderWidth="2px"
|
||||
borderColor={lightOrangeColor}
|
||||
borderRadius="30px"
|
||||
bgColor="white"
|
||||
textColor="black"
|
||||
px={10}
|
||||
pb={[8, 8, 0]}
|
||||
py={6}
|
||||
>
|
||||
<chakra.span
|
||||
<Text
|
||||
display="block"
|
||||
py={[6, 6, 12]}
|
||||
fontSize={["sm", "sm", "md", "lg", "xl", "xl"]}
|
||||
textAlign={["justify", "justify", "left", null]}
|
||||
fontSize={["sm", "sm", "md", "md", null]}
|
||||
textAlign={["center", "left"]}
|
||||
mr={[0, 0, 14]}
|
||||
pb={[4, 0]}
|
||||
letterSpacing="tight"
|
||||
>
|
||||
{`Learn more about crypto, NFT and DAOs, find links to educational resources, discuss gaming projects, and laugh at memes.`}
|
||||
</chakra.span>
|
||||
</Text>
|
||||
|
||||
<RouteButton
|
||||
variant="orangeAndBlue"
|
||||
bg="white"
|
||||
borderColor={lightOrangeColor}
|
||||
textColor="blue.900"
|
||||
minW={[
|
||||
"200px",
|
||||
"250px",
|
||||
"250px",
|
||||
"300px",
|
||||
"350px",
|
||||
"400px",
|
||||
]}
|
||||
textColor={lightOrangeColor}
|
||||
minW={["200px", "250px", "250px", "250px", null]}
|
||||
onClick={() => {
|
||||
buttonReport("Discord", "page-bottom", "landing");
|
||||
}}
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@ const theme = extendTheme({
|
|||
styles: {
|
||||
global: {
|
||||
body: {
|
||||
color: "white",
|
||||
color: "blue.1200",
|
||||
},
|
||||
},
|
||||
},
|
||||
|
|
@ -62,9 +62,9 @@ const theme = extendTheme({
|
|||
},
|
||||
|
||||
fonts: {
|
||||
heading: '"Work Sans", sans-serif',
|
||||
body: '"Work Sans", sans-serif',
|
||||
mono: '"Work Sans", monospace',
|
||||
heading: '"Space Grotesk", sans-serif',
|
||||
body: '"Space Grotesk", sans-serif',
|
||||
mono: '"Space Grotesk", monospace',
|
||||
},
|
||||
fontSizes: {
|
||||
xs: "0.625rem", //10px
|
||||
|
|
|
|||
|
|
@ -8,18 +8,13 @@ import {
|
|||
VStack,
|
||||
Text,
|
||||
Icon,
|
||||
Popover,
|
||||
PopoverTrigger,
|
||||
PopoverBody,
|
||||
PopoverContent,
|
||||
useBreakpointValue,
|
||||
} from "@chakra-ui/react";
|
||||
import CloudSVG from "./SVGGraphics/Cloud";
|
||||
import RectangleSVG from "./SVGGraphics/Rectangle";
|
||||
import RoundedRectSVG from "./SVGGraphics/RoundedRect";
|
||||
import { BsFillPersonFill, BsFillFileEarmarkCodeFill } from "react-icons/bs";
|
||||
import { BsFillPersonFill } from "react-icons/bs";
|
||||
import Xarrow from "react-xarrows";
|
||||
import ExampleCode from "./ExampleCode";
|
||||
|
||||
const _EngineOverviewDiagram = (props) => {
|
||||
const smartContract = useRef(null);
|
||||
|
|
@ -50,6 +45,7 @@ const _EngineOverviewDiagram = (props) => {
|
|||
templateColumns={["repeat(1, 1fr)", "repeat(1, 1fr)", "repeat(3, 1fr)"]}
|
||||
rowGap={[10, 10, 20]}
|
||||
columnGap={4}
|
||||
textColor="black"
|
||||
>
|
||||
<GridItem
|
||||
h={["80px", "80px", "auto"]}
|
||||
|
|
@ -164,7 +160,7 @@ const _EngineOverviewDiagram = (props) => {
|
|||
justifyContent="center"
|
||||
position="relative"
|
||||
>
|
||||
<Popover>
|
||||
{/* <Popover>
|
||||
<PopoverTrigger placement="top">
|
||||
<Flex>
|
||||
<Icon
|
||||
|
|
@ -186,7 +182,7 @@ const _EngineOverviewDiagram = (props) => {
|
|||
<ExampleCode />
|
||||
</PopoverBody>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</Popover> */}
|
||||
</Flex>
|
||||
</Center>
|
||||
</GridItem>
|
||||
|
|
@ -233,8 +229,13 @@ const _EngineOverviewDiagram = (props) => {
|
|||
as={BsFillPersonFill}
|
||||
w={[120, 120, 160]}
|
||||
h={[120, 120, 160]}
|
||||
color="white"
|
||||
></Icon>
|
||||
<Text fontSize={["md", "md", "lg"]} fontWeight="semibold">
|
||||
<Text
|
||||
fontSize={["md", "md", "lg"]}
|
||||
fontWeight="semibold"
|
||||
textColor="white"
|
||||
>
|
||||
Game Designer
|
||||
</Text>
|
||||
</Center>
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ const _FAQCard = ({ heading, headingProps, panelContent }) => {
|
|||
const iconColor = "#F56646";
|
||||
|
||||
return (
|
||||
<AccordionItem>
|
||||
<AccordionItem borderWidth={0} borderBottomWidth="0!important">
|
||||
{({ isExpanded }) => (
|
||||
<>
|
||||
<AccordionButton>
|
||||
|
|
@ -21,7 +21,7 @@ const _FAQCard = ({ heading, headingProps, panelContent }) => {
|
|||
<Heading
|
||||
{...headingProps}
|
||||
as="h3"
|
||||
fontSize={["lg", "2xl", "3xl"]}
|
||||
fontSize={["md", "md", "lg", "lg", null]}
|
||||
>
|
||||
{heading}
|
||||
</Heading>
|
||||
|
|
@ -32,10 +32,7 @@ const _FAQCard = ({ heading, headingProps, panelContent }) => {
|
|||
<AddIcon color={iconColor} fontSize="12px" />
|
||||
)}
|
||||
</AccordionButton>
|
||||
<AccordionPanel
|
||||
pb={4}
|
||||
fontSize={["md", "lg", "xl", "2xl", "3xl", "3xl"]}
|
||||
>
|
||||
<AccordionPanel pb={4} fontSize={["sm", "sm", "md", "md", null]}>
|
||||
{panelContent}
|
||||
</AccordionPanel>
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -12,25 +12,22 @@ import {
|
|||
chakra,
|
||||
} from "@chakra-ui/react";
|
||||
import RouterLink from "next/link";
|
||||
import { PRIMARY_MOON_LOGO_URL, SITEMAP } from "../core/constants";
|
||||
import {
|
||||
PRIMARY_MOON_LOGO_URL,
|
||||
SITEMAP,
|
||||
BACKGROUND_COLOR,
|
||||
} from "../core/constants";
|
||||
import { FaGithub, FaTwitter, FaDiscord } from "react-icons/fa";
|
||||
import moment from "moment";
|
||||
|
||||
const LINKS_SIZES = {
|
||||
fontWeight: "300",
|
||||
fontSize: "lg",
|
||||
fontSize: "md",
|
||||
};
|
||||
|
||||
const ListHeader = ({ children }) => {
|
||||
return (
|
||||
<Text
|
||||
fontWeight={"500"}
|
||||
fontSize={"lg"}
|
||||
mb={2}
|
||||
borderBottom="1px"
|
||||
borderColor="blue.700"
|
||||
textColor="blue.500"
|
||||
>
|
||||
<Text fontWeight="semibold" fontSize={"md"} mb={2}>
|
||||
{children}
|
||||
</Text>
|
||||
);
|
||||
|
|
@ -62,12 +59,14 @@ const SocialButton = ({ children, label, href }) => {
|
|||
|
||||
const Footer = () => (
|
||||
<Box
|
||||
bg={useColorModeValue("blue.900", "gray.900")}
|
||||
color={useColorModeValue("gray.700", "gray.200")}
|
||||
bg={BACKGROUND_COLOR}
|
||||
textColor="white"
|
||||
borderTop="1px"
|
||||
borderColor="white"
|
||||
>
|
||||
<Container as={Stack} maxW={"8xl"} py={10}>
|
||||
<SimpleGrid
|
||||
templateColumns={{ sm: "1fr 1fr", md: "2fr 1fr 1fr 1fr 1fr" }}
|
||||
templateColumns={{ sm: "1fr 1fr", md: "2fr 1fr 1fr 1fr 1fr 1fr" }}
|
||||
spacing={8}
|
||||
>
|
||||
<Stack spacing={6}>
|
||||
|
|
@ -87,6 +86,9 @@ const Footer = () => (
|
|||
<Text fontSize={"sm"}>
|
||||
© {moment().year()} Moonstream.to All rights reserved
|
||||
</Text>
|
||||
</Stack>
|
||||
<Stack>
|
||||
<Text fontWeight="semibold">Follow Us</Text>
|
||||
<Stack direction={"row"} spacing={6}>
|
||||
<SocialButton
|
||||
label={"Twitter"}
|
||||
|
|
|
|||
|
|
@ -19,7 +19,12 @@ import useModals from "../core/hooks/useModals";
|
|||
import UIContext from "../core/providers/UIProvider/context";
|
||||
import ChakraAccountIconButton from "./AccountIconButton";
|
||||
import RouteButton from "./RouteButton";
|
||||
import { PAGETYPE, SITEMAP, PRIMARY_MOON_LOGO_URL } from "../core/constants";
|
||||
import {
|
||||
PAGETYPE,
|
||||
SITEMAP,
|
||||
PRIMARY_MOON_LOGO_URL,
|
||||
BACKGROUND_COLOR,
|
||||
} from "../core/constants";
|
||||
import router from "next/router";
|
||||
import { MODAL_TYPES } from "../core/providers/OverlayProvider/constants";
|
||||
|
||||
|
|
@ -32,7 +37,8 @@ const LandingNavbar = () => {
|
|||
<>
|
||||
<IconButton
|
||||
alignSelf="flex-start"
|
||||
colorScheme="blue"
|
||||
colorScheme="blackAlpha"
|
||||
bgColor={BACKGROUND_COLOR}
|
||||
variant="solid"
|
||||
onClick={() => ui.setSidebarToggled(!ui.sidebarToggled)}
|
||||
icon={<HamburgerIcon />}
|
||||
|
|
@ -80,7 +86,7 @@ const LandingNavbar = () => {
|
|||
</RouteButton>
|
||||
)}
|
||||
{item.type !== PAGETYPE.FOOTER_CATEGORY && item.children && (
|
||||
<Menu>
|
||||
<Menu colorScheme="blackAlpha">
|
||||
<MenuButton as={Button} rightIcon={<ChevronDownIcon />}>
|
||||
{item.title}
|
||||
</MenuButton>
|
||||
|
|
@ -123,12 +129,13 @@ const LandingNavbar = () => {
|
|||
)}
|
||||
{!ui.isLoggedIn && (
|
||||
<Button
|
||||
colorScheme="orange"
|
||||
bg="#F56646"
|
||||
variant="solid"
|
||||
onClick={() => toggleModal({ type: MODAL_TYPES.SIGNUP })}
|
||||
size="sm"
|
||||
fontWeight="400"
|
||||
borderRadius="2xl"
|
||||
textColor="white"
|
||||
>
|
||||
Sign Up
|
||||
</Button>
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ const _CloudSVG = (props) => {
|
|||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<defs>
|
||||
{/* <defs>
|
||||
<linearGradient
|
||||
id="paint0_linear_293_70"
|
||||
x1="203.5"
|
||||
|
|
@ -29,7 +29,7 @@ const _CloudSVG = (props) => {
|
|||
<stop stopColor="#212698" />
|
||||
<stop offset="0.932309" stopColor="#FF9473" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</defs> */}
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ const _RectangleSVG = (props) => {
|
|||
stroke="url(#paint0_linear_293_56)"
|
||||
strokeWidth="5"
|
||||
/>
|
||||
<defs>
|
||||
{/* <defs>
|
||||
<linearGradient
|
||||
id="paint0_linear_293_56"
|
||||
x1="242"
|
||||
|
|
@ -28,7 +28,7 @@ const _RectangleSVG = (props) => {
|
|||
<stop stopColor="#212698" />
|
||||
<stop offset="1" stopColor="#FF8B73" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</defs> */}
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ const _RoundedRectSVG = (props) => {
|
|||
stroke="url(#paint0_linear_291_337)"
|
||||
strokeWidth="5"
|
||||
/>
|
||||
<defs>
|
||||
{/* <defs>
|
||||
<linearGradient
|
||||
id="paint0_linear_291_337"
|
||||
x1="229.821"
|
||||
|
|
@ -28,7 +28,7 @@ const _RoundedRectSVG = (props) => {
|
|||
<stop stopColor="#212698" />
|
||||
<stop offset="1" stopColor="#FF8B73" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</defs> */}
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -25,7 +25,12 @@ import {
|
|||
LockIcon,
|
||||
} from "@chakra-ui/icons";
|
||||
import { MdSettings, MdDashboard, MdTimeline } from "react-icons/md";
|
||||
import { PRIMARY_MOON_LOGO_URL, SITEMAP, PAGETYPE } from "../core/constants";
|
||||
import {
|
||||
PRIMARY_MOON_LOGO_URL,
|
||||
SITEMAP,
|
||||
PAGETYPE,
|
||||
BACKGROUND_COLOR,
|
||||
} from "../core/constants";
|
||||
import useDashboard from "../core/hooks/useDashboard";
|
||||
import { MODAL_TYPES } from "../core/providers/OverlayProvider/constants";
|
||||
import OverlayContext from "../core/providers/OverlayProvider/context";
|
||||
|
|
@ -49,7 +54,8 @@ const Sidebar = () => {
|
|||
<IconButton
|
||||
ml={4}
|
||||
justifySelf="flex-start"
|
||||
colorScheme="blue"
|
||||
colorScheme="blackAlpha"
|
||||
bgColor={BACKGROUND_COLOR}
|
||||
aria-label="App navigation"
|
||||
icon={
|
||||
ui.isMobileView ? (
|
||||
|
|
@ -78,7 +84,7 @@ const Sidebar = () => {
|
|||
</Flex>
|
||||
</SidebarHeader>
|
||||
<SidebarContent>
|
||||
<Divider borderColor="blue.600" />
|
||||
<Divider borderColor={BACKGROUND_COLOR} />
|
||||
<Menu iconShape="square">
|
||||
{!ui.isLoggedIn && (
|
||||
<>
|
||||
|
|
|
|||
|
|
@ -31,19 +31,12 @@ const TrustedBadge = ({
|
|||
alignItems="center"
|
||||
alignSelf="center"
|
||||
wrap="nowrap"
|
||||
p={4}
|
||||
p={[2, 4]}
|
||||
direction="column"
|
||||
>
|
||||
<Image
|
||||
sx={{ filter: filterStr }}
|
||||
h={[
|
||||
`${1.75 * _scale}rem`,
|
||||
null,
|
||||
`${3 * _scale}rem`,
|
||||
`${3 * _scale}rem`,
|
||||
`${4 * _scale}rem`,
|
||||
`${6 * _scale}rem`,
|
||||
]}
|
||||
h={[`${2.25 * _scale}rem`, `${3 * _scale}rem`, null]}
|
||||
src={ImgURL}
|
||||
alt={name}
|
||||
></Image>
|
||||
|
|
|
|||
|
|
@ -11,9 +11,9 @@ export const BUGOUT_ENDPOINTS = {
|
|||
export const BACKGROUND_COLOR = "#1A1D22";
|
||||
|
||||
export const DEFAULT_METATAGS = {
|
||||
title: "Build, Scale, and Monitor Your Game on the Blockchain",
|
||||
title: "Build, Scale, and Monitor Your Game's Economy",
|
||||
description:
|
||||
"Moonstream is a web3 game engine. Use Moonstream’s technical blockchain infrastructure to add on-chain mechanics to your game. Watch your game economy flourish.",
|
||||
"Moonstream provides economic infrastructure for web3 games. Gather actionable data with our web3 data analytics. Act on it with our on-chain mechanics. Watch your economy flourish.",
|
||||
keywords:
|
||||
"analytics, blockchain analytics, protocol, protocols, blockchain, crypto, data, NFT gaming, smart contracts, web3, smart contract, ethereum, polygon, matic, transactions, defi, finance, decentralized, mempool, NFT, NFTs, DAO, DAOs, cryptocurrency, cryptocurrencies, bitcoin, blockchain economy, blockchain game, marketplace, blockchain security, loyalty program, Ethereum bridge, Ethereum bridges, NFT game, NFT games",
|
||||
url: "https://www.moonstream.to",
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue