kopia lustrzana https://github.com/bugout-dev/moonstream
kellan-simiotics
GitHub
commit
1e87b36e13
|
|
@ -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" />
|
||||
|
|
|
|||
|
|
@ -29,7 +29,14 @@ const Contact = () => {
|
|||
|
||||
return (
|
||||
<Box>
|
||||
<Box px="1.5rem" py={10} m="auto" mb={8} minHeight="100vh">
|
||||
<Box
|
||||
px="1.5rem"
|
||||
py={10}
|
||||
m="auto"
|
||||
mb={8}
|
||||
minHeight="100vh"
|
||||
textColor="black"
|
||||
>
|
||||
<Icon
|
||||
as={BiArrowBack}
|
||||
w={["30px", "40px", "50px"]}
|
||||
|
|
@ -63,9 +70,9 @@ const Contact = () => {
|
|||
<Center>
|
||||
<Text my={5} fontSize={["md", "lg"]} textAlign="center" width="60%">
|
||||
<i>
|
||||
Click the button to submit your answers. We'll reach out
|
||||
directly within 3 days. You will not receive any marketing emails
|
||||
from us.
|
||||
We'll reach out directly within 3 business days after you
|
||||
submit this form. You won't be receiving any spam emails from
|
||||
us, only the most important technical updates.
|
||||
</i>
|
||||
</Text>
|
||||
</Center>
|
||||
|
|
|
|||
Plik diff jest za duży
Load Diff
|
|
@ -122,10 +122,26 @@ const variantOrangeAndBlue = () => {
|
|||
borderRadius: "70px",
|
||||
shadow: "md",
|
||||
variant: "solid",
|
||||
fontSize: ["sm", "md", "lg", "lg", "xl", "xl"],
|
||||
textColor: "blue.1200",
|
||||
fontSize: ["md", "md", "lg", "lg", "xl", "xl"],
|
||||
textColor: "white",
|
||||
bg: "#FF8B73",
|
||||
py: 5,
|
||||
py: 3,
|
||||
px: 5,
|
||||
};
|
||||
};
|
||||
|
||||
const variantWhiteOnOrange = () => {
|
||||
return {
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
border: "solid transparent",
|
||||
borderRadius: "70px",
|
||||
shadow: "md",
|
||||
variant: "solid",
|
||||
fontSize: ["md", "md", "lg", "lg", "xl", "xl"],
|
||||
textColor: "white",
|
||||
bg: "#FF8B73",
|
||||
py: 3,
|
||||
px: 5,
|
||||
};
|
||||
};
|
||||
|
|
@ -168,6 +184,7 @@ const Button = {
|
|||
outline: variantOutline,
|
||||
link: variantLink,
|
||||
orangeAndBlue: variantOrangeAndBlue,
|
||||
whiteOnOrange: variantWhiteOnOrange,
|
||||
},
|
||||
};
|
||||
export default Button;
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -1,327 +0,0 @@
|
|||
import { React, useRef } from "react";
|
||||
import {
|
||||
chakra,
|
||||
Grid,
|
||||
GridItem,
|
||||
Flex,
|
||||
Center,
|
||||
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 Xarrow from "react-xarrows";
|
||||
import ExampleCode from "./ExampleCode";
|
||||
|
||||
const _EngineOverviewDiagram = (props) => {
|
||||
const smartContract = useRef(null);
|
||||
const gameClient = useRef(null);
|
||||
const adminDashboard = useRef(null);
|
||||
const gameServer = useRef(null);
|
||||
const user = useRef(null);
|
||||
|
||||
const xarrowStyle = {
|
||||
color: "#FF8B73",
|
||||
showHead: true,
|
||||
headSize: 6,
|
||||
};
|
||||
|
||||
const smallDiagram = useBreakpointValue({
|
||||
base: true,
|
||||
sm: true,
|
||||
md: false,
|
||||
lg: false,
|
||||
xl: false,
|
||||
"2xl": false,
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<Grid
|
||||
templateRows={["repeat(7)", "repeat(7)", "repeat(2, 1fr)"]}
|
||||
templateColumns={["repeat(1, 1fr)", "repeat(1, 1fr)", "repeat(3, 1fr)"]}
|
||||
rowGap={[10, 10, 20]}
|
||||
columnGap={4}
|
||||
>
|
||||
<GridItem
|
||||
h={["80px", "80px", "auto"]}
|
||||
order={[2, 2, 0]}
|
||||
display="inline-grid"
|
||||
justifyItems="center"
|
||||
alignItems="center"
|
||||
>
|
||||
<Flex
|
||||
ref={smartContract}
|
||||
w={["260px", "260px", "400px"]}
|
||||
h={["73", "73", "130px"]}
|
||||
position="relative"
|
||||
>
|
||||
<RoundedRectSVG scaling={1.0} />
|
||||
<Center
|
||||
position="absolute"
|
||||
left="0"
|
||||
top="0"
|
||||
w={["260px", "260px", "400px"]}
|
||||
h="130px"
|
||||
>
|
||||
<VStack justifyContent="center" py="10px">
|
||||
<Text fontSize={["md", "md", "xl"]} fontWeight="semibold">
|
||||
Moonstream Smart Contracts
|
||||
</Text>
|
||||
{!smallDiagram && (
|
||||
<Text pl={[0, 0, "30px"]} fontSize="md">
|
||||
Your backend for lootboxes, crafting recipes, items,
|
||||
minigames
|
||||
</Text>
|
||||
)}
|
||||
</VStack>
|
||||
</Center>
|
||||
</Flex>
|
||||
</GridItem>
|
||||
<GridItem h={0} order={[6, 6, 4]}></GridItem>
|
||||
<GridItem
|
||||
h={["160px", "160px", "auto"]}
|
||||
order={[4, 4, 2]}
|
||||
display="inline-grid"
|
||||
justifyItems="center"
|
||||
alignItems="center"
|
||||
>
|
||||
<Flex
|
||||
ref={gameClient}
|
||||
w={["155px", "155px", "189px"]}
|
||||
h={["160px", "160px", "205px"]}
|
||||
position="relative"
|
||||
>
|
||||
<RectangleSVG></RectangleSVG>
|
||||
<Center
|
||||
position="absolute"
|
||||
left="0"
|
||||
top={["50px", "50px", "30px", null]}
|
||||
w={["155px", "155px", "189px"]}
|
||||
h={["160px", "160px", "205px"]}
|
||||
>
|
||||
<Text fontSize={["md", "md", "xl"]} fontWeight="semibold">
|
||||
Game Client
|
||||
</Text>
|
||||
</Center>
|
||||
</Flex>
|
||||
</GridItem>
|
||||
<GridItem
|
||||
h={["160px", "160px", "auto"]}
|
||||
order={[1, 1, 3]}
|
||||
display="inline-grid"
|
||||
justifyItems="center"
|
||||
alignItems="center"
|
||||
>
|
||||
<Center
|
||||
ref={adminDashboard}
|
||||
w={["155px", "155px", "220px"]}
|
||||
h={["160px", "160px", "240px"]}
|
||||
position="relative"
|
||||
>
|
||||
<RectangleSVG scaling={1.2}></RectangleSVG>
|
||||
<Center
|
||||
position="absolute"
|
||||
w={["155px", "155px", "220px"]}
|
||||
h={["160px", "160px", "240px"]}
|
||||
>
|
||||
<VStack
|
||||
w={["155px", "155px", "220px"]}
|
||||
h={["160px", "160px", "240px"]}
|
||||
justifyContent="center"
|
||||
>
|
||||
<Text fontSize={["md", "md", "lg"]} fontWeight="semibold">
|
||||
Admin Dashboard
|
||||
</Text>
|
||||
{!smallDiagram && (
|
||||
<Text pt="10px" pl={[0, 0, "20px"]} fontSize="md">
|
||||
Choose mechanics at engine.moonstream.to
|
||||
</Text>
|
||||
)}
|
||||
</VStack>
|
||||
</Center>
|
||||
</Center>
|
||||
</GridItem>
|
||||
<GridItem
|
||||
order={[3, 3, 1]}
|
||||
display="inline-grid"
|
||||
justifyItems="center"
|
||||
alignItems="center"
|
||||
marginTop={10}
|
||||
>
|
||||
<Center>
|
||||
<Flex
|
||||
w={["155px", "155px", "189px"]}
|
||||
h={[null, null, "205px"]}
|
||||
justifyContent="center"
|
||||
position="relative"
|
||||
>
|
||||
<Popover>
|
||||
<PopoverTrigger placement="top">
|
||||
<Flex>
|
||||
<Icon
|
||||
as={BsFillFileEarmarkCodeFill}
|
||||
w={50}
|
||||
h={50}
|
||||
onClick={() => {
|
||||
props.buttonReport(
|
||||
"Example Code",
|
||||
"engine-overview-diagram",
|
||||
"landing"
|
||||
);
|
||||
}}
|
||||
></Icon>{" "}
|
||||
</Flex>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent w={["300px", "400px", "850px"]}>
|
||||
<PopoverBody>
|
||||
<ExampleCode />
|
||||
</PopoverBody>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</Flex>
|
||||
</Center>
|
||||
</GridItem>
|
||||
<GridItem
|
||||
h={["120px", "120px", "auto"]}
|
||||
order={[5, 5, 5]}
|
||||
display="inline-grid"
|
||||
justifyItems="center"
|
||||
alignItems="center"
|
||||
>
|
||||
<Flex
|
||||
ref={gameServer}
|
||||
w={["200px", "200px", "305px"]}
|
||||
h={["120px", "120px", "188px"]}
|
||||
position="relative"
|
||||
>
|
||||
<CloudSVG scaling={0.8}></CloudSVG>
|
||||
<Center
|
||||
position="absolute"
|
||||
pt={["80px", "80px", "30px", null]}
|
||||
w={["200px", "200px", "305px"]}
|
||||
h={["120px", "120px", "188px"]}
|
||||
>
|
||||
<Text fontSize={["md", "md", "lg"]} fontWeight="semibold">
|
||||
Game Server
|
||||
</Text>
|
||||
</Center>
|
||||
</Flex>
|
||||
</GridItem>
|
||||
<GridItem
|
||||
order={[0, 0, 6]}
|
||||
display="inline-grid"
|
||||
justifyItems="center"
|
||||
alignItems="center"
|
||||
>
|
||||
<Center
|
||||
ref={user}
|
||||
w={[160, 200, 200]}
|
||||
h={[160, 200, 200]}
|
||||
flexDir="column"
|
||||
position="relative"
|
||||
>
|
||||
<Icon
|
||||
as={BsFillPersonFill}
|
||||
w={[120, 120, 160]}
|
||||
h={[120, 120, 160]}
|
||||
></Icon>
|
||||
<Text fontSize={["md", "md", "lg"]} fontWeight="semibold">
|
||||
Game Designer
|
||||
</Text>
|
||||
</Center>
|
||||
</GridItem>
|
||||
</Grid>
|
||||
{!smallDiagram && (
|
||||
<>
|
||||
<Xarrow
|
||||
start={smartContract}
|
||||
end={gameClient}
|
||||
startAnchor="right"
|
||||
endAnchor="left"
|
||||
path="straight"
|
||||
gridBreak="50%"
|
||||
dashness={true}
|
||||
{...xarrowStyle}
|
||||
/>
|
||||
<Xarrow
|
||||
start={smartContract}
|
||||
end={adminDashboard}
|
||||
startAnchor="bottom"
|
||||
endAnchor="top"
|
||||
path="straight"
|
||||
{...xarrowStyle}
|
||||
/>
|
||||
<Xarrow
|
||||
start={smartContract}
|
||||
end={gameServer}
|
||||
startAnchor={{ position: "bottom", offset: { x: 150 } }}
|
||||
endAnchor={{ position: "left", offset: { y: 40 } }}
|
||||
path="straight"
|
||||
{...xarrowStyle}
|
||||
/>
|
||||
<Xarrow
|
||||
start={adminDashboard}
|
||||
end={user}
|
||||
startAnchor="bottom"
|
||||
endAnchor="top"
|
||||
path="straight"
|
||||
{...xarrowStyle}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
{smallDiagram && (
|
||||
<>
|
||||
<Xarrow
|
||||
start={smartContract}
|
||||
end={gameClient}
|
||||
startAnchor={{ position: "right", offset: { y: 10 } }}
|
||||
endAnchor="right"
|
||||
path="grid"
|
||||
gridBreak="0%"
|
||||
dashness={true}
|
||||
{...xarrowStyle}
|
||||
/>
|
||||
<Xarrow
|
||||
start={smartContract}
|
||||
end={gameServer}
|
||||
startAnchor="left"
|
||||
endAnchor={{ position: "left", offset: { y: 10 } }}
|
||||
path="grid"
|
||||
gridBreak="0%"
|
||||
{...xarrowStyle}
|
||||
/>
|
||||
<Xarrow
|
||||
start={smartContract}
|
||||
end={adminDashboard}
|
||||
startAnchor={{ position: "right", offset: { y: -10 } }}
|
||||
endAnchor="right"
|
||||
path="grid"
|
||||
gridBreak="0%"
|
||||
{...xarrowStyle}
|
||||
/>
|
||||
<Xarrow
|
||||
start={adminDashboard}
|
||||
end={user}
|
||||
startAnchor="top"
|
||||
endAnchor="bottom"
|
||||
path="straight"
|
||||
{...xarrowStyle}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const EngineOverviewDiagram = chakra(_EngineOverviewDiagram);
|
||||
|
||||
export default EngineOverviewDiagram;
|
||||
|
|
@ -10,29 +10,32 @@ import {
|
|||
import { AddIcon, MinusIcon } from "@chakra-ui/icons";
|
||||
|
||||
const _FAQCard = ({ heading, headingProps, panelContent }) => {
|
||||
const iconColor = "#F56646";
|
||||
|
||||
return (
|
||||
<AccordionItem>
|
||||
<AccordionItem borderWidth={0} borderBottomWidth="0!important" px={0}>
|
||||
{({ isExpanded }) => (
|
||||
<>
|
||||
<AccordionButton>
|
||||
<Box flex="1" textAlign="left" pr="10px">
|
||||
<AccordionButton px={0}>
|
||||
<Box flex="1" textAlign="left">
|
||||
<Heading
|
||||
{...headingProps}
|
||||
as="h3"
|
||||
fontSize={["lg", "2xl", "3xl"]}
|
||||
fontSize={["md", "md", "lg", "lg", null]}
|
||||
>
|
||||
{heading}
|
||||
</Heading>
|
||||
</Box>
|
||||
{isExpanded ? (
|
||||
<MinusIcon fontSize="12px" />
|
||||
<MinusIcon color={iconColor} fontSize="12px" />
|
||||
) : (
|
||||
<AddIcon fontSize="12px" />
|
||||
<AddIcon color={iconColor} fontSize="12px" />
|
||||
)}
|
||||
</AccordionButton>
|
||||
<AccordionPanel
|
||||
px={0}
|
||||
pb={4}
|
||||
fontSize={["md", "lg", "xl", "2xl", "3xl", "3xl"]}
|
||||
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}>
|
||||
|
|
@ -75,10 +74,7 @@ const Footer = () => (
|
|||
<Link href="/" alignSelf="center">
|
||||
<ChakraImage
|
||||
alignSelf="center"
|
||||
// as={Link}
|
||||
// to="/"
|
||||
h="2.5rem"
|
||||
minW="2.5rem"
|
||||
w="160px"
|
||||
src={PRIMARY_MOON_LOGO_URL}
|
||||
alt="Go to app root"
|
||||
/>
|
||||
|
|
@ -87,6 +83,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 />}
|
||||
|
|
@ -40,20 +46,19 @@ const LandingNavbar = () => {
|
|||
</>
|
||||
)}
|
||||
<Flex
|
||||
pl={ui.isMobileView ? 2 : 16}
|
||||
pl={ui.isMobileView ? 2 : "60px"}
|
||||
justifySelf="flex-start"
|
||||
h="48px"
|
||||
py={1}
|
||||
flexBasis="200px"
|
||||
flexGrow={1}
|
||||
flexGrow={0.6}
|
||||
id="Logo Container"
|
||||
alignItems="center"
|
||||
>
|
||||
<RouterLink href="/" passHref>
|
||||
<Link
|
||||
as={Image}
|
||||
w="auto"
|
||||
h={["70%", "85%"]}
|
||||
w={"160px"}
|
||||
justifyContent="left"
|
||||
src={PRIMARY_MOON_LOGO_URL}
|
||||
alt="Moonstream logo"
|
||||
|
|
@ -63,8 +68,7 @@ const LandingNavbar = () => {
|
|||
|
||||
{!ui.isMobileView && (
|
||||
<>
|
||||
<Spacer />
|
||||
<ButtonGroup variant="link" colorScheme="orange" spacing={4} pr={16}>
|
||||
<ButtonGroup variant="link" spacing={4} pr={16} flexGrow={0.5}>
|
||||
{SITEMAP.map((item, idx) => {
|
||||
return (
|
||||
<React.Fragment key={`Fragment-${idx}`}>
|
||||
|
|
@ -80,7 +84,7 @@ const LandingNavbar = () => {
|
|||
</RouteButton>
|
||||
)}
|
||||
{item.type !== PAGETYPE.FOOTER_CATEGORY && item.children && (
|
||||
<Menu>
|
||||
<Menu colorScheme="blackAlpha">
|
||||
<MenuButton as={Button} rightIcon={<ChevronDownIcon />}>
|
||||
{item.title}
|
||||
</MenuButton>
|
||||
|
|
@ -105,7 +109,8 @@ const LandingNavbar = () => {
|
|||
</React.Fragment>
|
||||
);
|
||||
})}
|
||||
|
||||
</ButtonGroup>
|
||||
<ButtonGroup variant="link" spacing={4} pr={16}>
|
||||
{ui.isLoggedIn && (
|
||||
<RouterLink href="/welcome" passHref>
|
||||
<Button
|
||||
|
|
@ -123,14 +128,15 @@ const LandingNavbar = () => {
|
|||
)}
|
||||
{!ui.isLoggedIn && (
|
||||
<Button
|
||||
colorScheme="orange"
|
||||
bg="#F56646"
|
||||
variant="solid"
|
||||
onClick={() => toggleModal({ type: MODAL_TYPES.SIGNUP })}
|
||||
size="sm"
|
||||
fontWeight="400"
|
||||
fontWeight="bold"
|
||||
borderRadius="2xl"
|
||||
textColor="white"
|
||||
>
|
||||
Sign Up
|
||||
Sign up
|
||||
</Button>
|
||||
)}
|
||||
{!ui.isLoggedIn && (
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import React, { Suspense, useContext } from "react";
|
||||
import { Flex } from "@chakra-ui/react";
|
||||
import UIContext from "../core/providers/UIProvider/context";
|
||||
import { BACKGROUND_COLOR } from "../core/constants";
|
||||
|
||||
import LandingNavbar from "./LandingNavbar";
|
||||
const AppNavbar = React.lazy(() => import("./AppNavbar"));
|
||||
|
|
@ -16,7 +17,8 @@ const Navbar = () => {
|
|||
id="Navbar"
|
||||
minH="3rem"
|
||||
maxH="3rem"
|
||||
bgColor="blue.1200"
|
||||
bgColor={BACKGROUND_COLOR}
|
||||
borderBottom="1px solid white"
|
||||
direction="row"
|
||||
w="100%"
|
||||
overflow="hidden"
|
||||
|
|
|
|||
|
|
@ -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 ? (
|
||||
|
|
@ -68,7 +74,7 @@ const Sidebar = () => {
|
|||
/>
|
||||
<RouterLink href="/" passHref>
|
||||
<Image
|
||||
maxW="155px"
|
||||
w="160px"
|
||||
py="0.75rem"
|
||||
pl={1}
|
||||
src={PRIMARY_MOON_LOGO_URL}
|
||||
|
|
@ -78,7 +84,7 @@ const Sidebar = () => {
|
|||
</Flex>
|
||||
</SidebarHeader>
|
||||
<SidebarContent>
|
||||
<Divider borderColor="blue.600" />
|
||||
<Divider borderColor={BACKGROUND_COLOR} />
|
||||
<Menu iconShape="square">
|
||||
{!ui.isLoggedIn && (
|
||||
<>
|
||||
|
|
@ -178,10 +184,10 @@ const Sidebar = () => {
|
|||
</>
|
||||
)}
|
||||
<Divider
|
||||
colorScheme="blue"
|
||||
colorScheme="white"
|
||||
bgColor="gray.300"
|
||||
color="blue.700"
|
||||
borderColor="blue.700"
|
||||
color="white"
|
||||
borderColor="white"
|
||||
/>
|
||||
</Menu>
|
||||
</SidebarContent>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -8,10 +8,12 @@ export const BUGOUT_ENDPOINTS = {
|
|||
Web: "parasite",
|
||||
};
|
||||
|
||||
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",
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@
|
|||
z-index: 1009;
|
||||
}
|
||||
.pro-sidebar > .pro-sidebar-inner {
|
||||
background: #212990;
|
||||
background: #1A1D22;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
z-index: 101;
|
||||
|
|
@ -65,13 +65,13 @@
|
|||
z-index: 101;
|
||||
}
|
||||
.pro-sidebar > .pro-sidebar-inner > .pro-sidebar-layout .pro-sidebar-header {
|
||||
border-bottom: 1px solid #212990;
|
||||
border-bottom: 1px solid gray;
|
||||
}
|
||||
.pro-sidebar > .pro-sidebar-inner > .pro-sidebar-layout .pro-sidebar-content {
|
||||
flex-grow: 1;
|
||||
}
|
||||
.pro-sidebar > .pro-sidebar-inner > .pro-sidebar-layout .pro-sidebar-footer {
|
||||
border-top: 1px solid #212990;
|
||||
border-top: 1px solid gray;
|
||||
}
|
||||
.pro-sidebar > .pro-sidebar-inner > .pro-sidebar-layout ul {
|
||||
list-style-type: none;
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue