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

Refactored Milestone Box on landing page. Created a button variant to make the landing page button style reusable. Added some font weights and made text color more consistent. Fixed some x-axis alignment issues between GridItems.

pull/602/head
Kellan Wampler 2022-05-06 12:32:01 -04:00
rodzic ba98f3651f
commit af09470e45
3 zmienionych plików z 153 dodań i 130 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

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

@ -15,12 +15,14 @@ import {
SimpleGrid, SimpleGrid,
Image as ChakraImage, Image as ChakraImage,
HStack, HStack,
VStack,
} from "@chakra-ui/react"; } from "@chakra-ui/react";
import useUser from "../src/core/hooks/useUser"; import useUser from "../src/core/hooks/useUser";
import useRouter from "../src/core/hooks/useRouter"; import useRouter from "../src/core/hooks/useRouter";
import { AWS_ASSETS_PATH, DEFAULT_METATAGS } from "../src/core/constants"; import { AWS_ASSETS_PATH, DEFAULT_METATAGS } from "../src/core/constants";
import TrustedBadge from "../src/components/TrustedBadge"; import TrustedBadge from "../src/components/TrustedBadge";
import RouteButton from "../src/components/RouteButton"; import RouteButton from "../src/components/RouteButton";
import MilestoneBox from "../src/components/MilestoneBox";
import mixpanel from "mixpanel-browser"; import mixpanel from "mixpanel-browser";
import { MIXPANEL_EVENTS } from "../src/core/providers/AnalyticsProvider/constants"; import { MIXPANEL_EVENTS } from "../src/core/providers/AnalyticsProvider/constants";
@ -183,43 +185,10 @@ const Homepage = () => {
}; };
}, []); }, []);
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 = () => { const JoinDiscordButton = () => {
return ( return (
<RouteButton <RouteButton
minW={["200px", "250px", "250px", "300px", "350px", "400px"]} variant="orangeAndBlue"
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={() => { onClick={() => {
if (mixpanel.get_distinct_id()) { if (mixpanel.get_distinct_id()) {
mixpanel.track(`${MIXPANEL_EVENTS.BUTTON_CLICKED}`, { mixpanel.track(`${MIXPANEL_EVENTS.BUTTON_CLICKED}`, {
@ -303,10 +272,12 @@ const Homepage = () => {
Build a Sustainable Game Economy in only a few clicks Build a Sustainable Game Economy in only a few clicks
</Heading> </Heading>
<chakra.span <chakra.span
pt={4}
pb={4}
my={12} my={12}
fontSize={["md", "xl", "2xl", "3xl", "4xl", "5xl"]} fontSize={["md", "lg", "xl", "2xl", "3xl", "3xl"]}
display="inline-block" display="inline-block"
color="blue.200" color="white"
> >
Moonstream Engine empowers web3 game designers to grow Moonstream Engine empowers web3 game designers to grow
healthy economies. Moonstream smart contracts and APIs healthy economies. Moonstream smart contracts and APIs
@ -326,67 +297,70 @@ const Homepage = () => {
py={["98px", "128px", null]} py={["98px", "128px", null]}
colSpan="12" colSpan="12"
bgColor="white.100" bgColor="white.100"
minH="100vh"
> >
<Heading {...HEADING_PROPS} textAlign="center" pb={5} pt={0}> <VStack align="center" justify="center" boxSize="full">
Major Milestones <Heading
</Heading> fontSize={["lg", "4xl", "5xl", "5xl", "5xl", "6xl"]}
<Flex wrap="wrap" direction="row" justifyContent="center"> fontWeight="semibold"
<MilestoneBox >
headingText="$3B transaction volume" Major Milestones
description="" </Heading>
/> <Flex wrap="wrap" direction="row" justifyContent="center">
<MilestoneBox <MilestoneBox headingText="$3B transaction volume" />
headingText="22,000 active users" <MilestoneBox headingText="22,000 active users" />
description="" </Flex>
/> <Text
</Flex> textAlign="center"
<Text textAlign="center" fontSize="lg"> fontSize={["md", "xl", "2xl", "3xl", "3xl", "3xl"]}
And growing... >
</Text> And growing...
<chakra.h2 </Text>
fontSize={{ base: "3xl", sm: "2xl" }} <chakra.h2
textAlign="center" fontSize={{ base: "3xl", sm: "2xl" }}
pb={4} textAlign="center"
pt={16} pb={4}
fontWeight="bold" pt={16}
> fontWeight="bold"
Trusted by{" "} >
</chakra.h2> Trusted by{" "}
<Flex wrap="wrap" direction="row" justifyContent="center"> </chakra.h2>
<Suspense fallback={""}> <Flex wrap="wrap" direction="row" justifyContent="center">
<TrustedBadge <Suspense fallback={""}>
scale={1.5} <TrustedBadge
name="Laguna games" scale={1.5}
caseURL="" name="Laguna games"
ImgURL={assets["laguna"]} caseURL=""
boxURL="https://laguna.games/" ImgURL={assets["laguna"]}
bgColor="blue.900" boxURL="https://laguna.games/"
/> bgColor="blue.900"
<TrustedBadge />
scale={1.5} <TrustedBadge
name="game7io" scale={1.5}
ImgURL={assets["game7io"]} name="game7io"
boxURL="https://game7.io/" ImgURL={assets["game7io"]}
bgColor="blue.900" boxURL="https://game7.io/"
/> bgColor="blue.900"
/>
<TrustedBadge <TrustedBadge
scale={1.5} scale={1.5}
name="orangedao" name="orangedao"
ImgURL={assets["orangedao"]} ImgURL={assets["orangedao"]}
boxURL="https://lfg.orangedao.xyz/" boxURL="https://lfg.orangedao.xyz/"
bgColor="blue.900" bgColor="blue.900"
/> />
<TrustedBadge <TrustedBadge
scale={1.5} scale={1.5}
name="forte" name="forte"
ImgURL={assets["forte"]} ImgURL={assets["forte"]}
boxURL="https://www.forte.io/" boxURL="https://www.forte.io/"
bgColor="blue.900" bgColor="blue.900"
invertColors={true} invertColors={true}
/> />
</Suspense> </Suspense>
</Flex> </Flex>
</VStack>
</GridItem> </GridItem>
<GridItem <GridItem
px={["7%", null, "12%", "15%"]} px={["7%", null, "12%", "15%"]}
@ -396,7 +370,12 @@ const Homepage = () => {
bgColor={"blue.900"} bgColor={"blue.900"}
textColor="white" textColor="white"
> >
<Heading {...HEADING_PROPS} textAlign="center" pb={5} pt={0}> <Heading
{...HEADING_PROPS}
textAlign="center"
pb={[3, 12, null]}
pt={0}
>
Features Features
</Heading> </Heading>
<Grid <Grid
@ -412,21 +391,21 @@ const Homepage = () => {
<chakra.span <chakra.span
fontSize={["md", "2xl", "3xl", "3xl", "3xl", "4xl"]} fontSize={["md", "2xl", "3xl", "3xl", "3xl", "4xl"]}
display="inline-block" display="inline-block"
color="blue.200" color="white"
> >
Lootboxes, crafting recipes, deck building, you name it! Lootboxes, crafting recipes, deck building, you name it!
<br />
With Moonstream Engine you can deploy on-chain mechanics With Moonstream Engine you can deploy on-chain mechanics
with one click. Read our Use Cases or explore the with one click.
features to know more. <br />
Read our Use Cases or explore the features to know more.
</chakra.span> </chakra.span>
</Flex> </Flex>
</GridItem> </GridItem>
<GridItem> <GridItem>
<Center w="100%" h="100%"> <Center w="100%" h="100%">
<RouteButton <RouteButton
colorScheme="orange" variant="orangeAndBlue"
fontSize={["md", "lg", "lg", "xl", "3xl"]}
py={[4, 4, 4, 8, 8]}
px={[4, 4, 4, 8, 8]} px={[4, 4, 4, 8, 8]}
onClick={() => { onClick={() => {
if (mixpanel.get_distinct_id()) { if (mixpanel.get_distinct_id()) {
@ -441,8 +420,6 @@ const Homepage = () => {
); );
} }
}} }}
textColor="blue.900"
alignSelf={["center", "center", "initial"]}
href="https://docs.google.com/document/d/1mjfF8SgRrAZvtCVVxB2qNSUcbbmrH6dTEYSMfHKdEgc/preview" href="https://docs.google.com/document/d/1mjfF8SgRrAZvtCVVxB2qNSUcbbmrH6dTEYSMfHKdEgc/preview"
isExternal isExternal
> >
@ -457,6 +434,7 @@ const Homepage = () => {
w="100%" w="100%"
placeContent={"space-between"} placeContent={"space-between"}
mx={[0, -2, -4]} mx={[0, -2, -4]}
paddingTop="20px"
> >
<Feature <Feature
image={assets["cryptoTraders"]} image={assets["cryptoTraders"]}
@ -481,24 +459,26 @@ const Homepage = () => {
</SimpleGrid> </SimpleGrid>
</GridItem> </GridItem>
<GridItem <GridItem
paddingLeft="15%" px={["7%", null, "12%", "15%"]}
paddingRight="20%"
// mt={["32px", "64px", null]} // mt={["32px", "64px", null]}
py={["98px", "128px", null]} py={["98px", "128px", null]}
colSpan="12" colSpan="12"
bgColor="white.100" bgColor="white.100"
minH="100vh"
> >
<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 alignItems="top" py={5}> <HStack alignItems="top" py={5}>
<Flex height="100%" width="25%"> <Flex height="100%" width="25%">
<chakra.h2 <Heading
fontSize={["md", "xl", "2xl", "3xl", "3xl", "3xl"]} as="h2"
fontSize={["lg", "3xl", "4xl", "4xl", "4xl", "5xl"]}
display="inline-block" display="inline-block"
fontWeight="semibold"
> >
Step 1: Step 1:
</chakra.h2> </Heading>
</Flex> </Flex>
<Flex height="100%" width="75%"> <Flex height="100%" width="75%">
<chakra.span <chakra.span
@ -512,11 +492,14 @@ const Homepage = () => {
</HStack> </HStack>
<HStack alignItems="top" 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 <Heading
fontSize={["md", "xl", "2xl", "3xl", "3xl", "3xl"]} as="h2"
fontSize={["lg", "3xl", "4xl", "4xl", "4xl", "5xl"]}
display="inline-block"
fontWeight="semibold"
> >
Step 2: Step 2:
</chakra.h2> </Heading>
</Flex> </Flex>
<Flex width="75%"> <Flex width="75%">
<chakra.span <chakra.span
@ -533,11 +516,14 @@ const Homepage = () => {
</HStack> </HStack>
<HStack alignItems="top" 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 <Heading
fontSize={["md", "xl", "2xl", "3xl", "3xl", "3xl"]} as="h2"
fontSize={["lg", "3xl", "4xl", "4xl", "4xl", "5xl"]}
display="inline-block"
fontWeight="semibold"
> >
Step 3: Step 3:
</chakra.h2> </Heading>
</Flex> </Flex>
<Flex width="75%"> <Flex width="75%">
<chakra.span <chakra.span
@ -548,6 +534,7 @@ const Homepage = () => {
Moonstream Engine provides you with back-end tools to put Moonstream Engine provides you with back-end tools to put
them on the blockchain. them on the blockchain.
<br /> <br />
<br />
You&apos;re at the end of your development journey now, You&apos;re at the end of your development journey now,
traveler. Time to watch your game economy grow! traveler. Time to watch your game economy grow!
</chakra.span> </chakra.span>
@ -561,13 +548,14 @@ const Homepage = () => {
colSpan="12" colSpan="12"
bgColor="blue.900" bgColor="blue.900"
textColor="white" textColor="white"
minH="100vh"
> >
<Heading {...HEADING_PROPS} textAlign="center" pb={14} pt={0}> <Heading {...HEADING_PROPS} textAlign="center" pb={14} pt={0}>
Featured by{" "} Featured by{" "}
</Heading> </Heading>
<Center> <Center>
<Flex <Flex
width="85%" width="81%"
wrap="wrap" wrap="wrap"
direction="row" direction="row"
justifyContent="center" justifyContent="center"
@ -623,31 +611,25 @@ const Homepage = () => {
py={["98px", "128px", null]} py={["98px", "128px", null]}
colSpan="12" colSpan="12"
bgColor="white" bgColor="white"
minH="100vh"
> >
<Flex <Flex
p={50}
w="100%" w="100%"
alignItems="center" alignItems="center"
justifyContent="center" justifyContent="center"
direction={["column", "column", "row"]} direction={["column", "column", "row"]}
maxW="1024px" maxW="1024px"
> >
<chakra.h2 <chakra.span
display="block"
my={12}
fontSize={["md", "2xl", "3xl", "3xl", "3xl", "4xl"]}
textAlign={["justify", "left", null]}
mr={[0, 12, 14]} mr={[0, 12, 14]}
fontSize={{ base: "2xl", sm: "xl" }}
// fontWeight="extrabold"
letterSpacing="tight" letterSpacing="tight"
// lineHeight="shorter"
// color={useColorModeValue("gray.900", "gray.100")}
> >
<chakra.span {`Contact us on Discord to discuss your project and keep up with the latest updates on Moonstream Engine.`}
display="block" </chakra.span>
my={12}
fontSize={["md", "2xl", "3xl", "3xl", "3xl", "4xl"]}
>
{`Contact us on Discord to discuss your project and keep up with the latest updates on Moonstream Engine.`}
</chakra.span>
</chakra.h2>
<JoinDiscordButton /> <JoinDiscordButton />
</Flex> </Flex>

19
frontend/src/Theme/Button/index.js
Wyświetl plik

@ -114,6 +114,24 @@ const variantGhost = (props) => {
}; };
}; };
const variantOrangeAndBlue = () => {
return {
minW: ["200px", "250px", "250px", "300px", "350px", "400px"],
alignItems: "center",
justifyContent: "center",
border: "solid transparent",
fontWeight: "bold",
rounded: ["lg", "xl", "2xl"],
shadow: "md",
variant: "solid",
textColor: "blue.1200",
bg: `orange.900`,
fontSize: ["lg", "xl", "2xl", "3xl", "4xl", "4xl"],
py: [4, 6, 6, 8, 8],
px: [4, 4, 4, 8, 8],
};
};
const Button = { const Button = {
// 1. We can update the base styles // 1. We can update the base styles
baseStyle: () => ({ baseStyle: () => ({
@ -151,6 +169,7 @@ const Button = {
ghost: variantGhost, ghost: variantGhost,
outline: variantOutline, outline: variantOutline,
link: variantLink, link: variantLink,
orangeAndBlue: variantOrangeAndBlue,
}, },
}; };
export default Button; export default Button;

22
frontend/src/components/MilestoneBox.js 100644
Wyświetl plik

@ -0,0 +1,22 @@
import { React } from "react";
import { chakra, Box, Text } from "@chakra-ui/react";
const _MilestoneBox = ({ headingText }) => {
return (
<Box minW={["150px", "180px", "300px", "300px", "400px", "500px"]} py={5}>
<Text
fontSize={["md", "2xl", "3xl", "4xl", "4xl", "4xl"]}
ml={5}
color="orange.500"
fontWeight="bold"
textAlign="center"
>
{headingText}
</Text>
</Box>
);
};
const MilestoneBox = chakra(_MilestoneBox);
export default MilestoneBox;