Merge pull request #678 from bugout-dev/landing-page-redesign

Landing Page redesign

frontend/pages/_document.js

@@ -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" />

frontend/pages/contact/index.js

@@ -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&apos;ll reach out
+              We&apos;ll reach out directly within 3 business days after you
-              directly within 3 days. You will not receive any marketing emails
+              submit this form. You won&apos;t be receiving any spam emails from
-              from us.
+              us, only the most important technical updates.
             </i>
           </Text>
         </Center>

frontend/src/Theme/Button/index.js

@@ -122,10 +122,26 @@ const variantOrangeAndBlue = () => {
     borderRadius: "70px",
     shadow: "md",
     variant: "solid",
-    fontSize: ["sm", "md", "lg", "lg", "xl", "xl"],
+    fontSize: ["md", "md", "lg", "lg", "xl", "xl"],
-    textColor: "blue.1200",
+    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;

frontend/src/Theme/theme.js

@@ -62,9 +62,9 @@ const theme = extendTheme({
   },
 
   fonts: {
-    heading: '"Work Sans", sans-serif',
+    heading: '"Space Grotesk", sans-serif',
-    body: '"Work Sans", sans-serif',
+    body: '"Space Grotesk", sans-serif',
-    mono: '"Work Sans", monospace',
+    mono: '"Space Grotesk", monospace',
   },
   fontSizes: {
     xs: "0.625rem", //10px

frontend/src/components/EngineOverviewDiagram.js

@@ -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;

frontend/src/components/FAQCard.js

@@ -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>
+          <AccordionButton px={0}>
-            <Box flex="1" textAlign="left" pr="10px">
+            <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>

frontend/src/components/Footer.js

@@ -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
+    <Text fontWeight="semibold" fontSize={"md"} mb={2}>
-      fontWeight={"500"}
-      fontSize={"lg"}
-      mb={2}
-      borderBottom="1px"
-      borderColor="blue.700"
-      textColor="blue.500"
-    >
       {children}
     </Text>
   );
@@ -62,12 +59,14 @@ const SocialButton = ({ children, label, href }) => {
 
 const Footer = () => (
   <Box
-    bg={useColorModeValue("blue.900", "gray.900")}
+    bg={BACKGROUND_COLOR}
-    color={useColorModeValue("gray.700", "gray.200")}
+    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}
+                w="160px"
-                // to="/"
-                h="2.5rem"
-                minW="2.5rem"
                 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"}

frontend/src/components/LandingNavbar.js

@@ -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"
+            w={"160px"}
-            h={["70%", "85%"]}
             justifyContent="left"
             src={PRIMARY_MOON_LOGO_URL}
             alt="Moonstream logo"
@@ -63,8 +68,7 @@ const LandingNavbar = () => {
 
       {!ui.isMobileView && (
         <>
-          <Spacer />
+          <ButtonGroup variant="link" spacing={4} pr={16} flexGrow={0.5}>
-          <ButtonGroup variant="link" colorScheme="orange" spacing={4} pr={16}>
             {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 && (

frontend/src/components/Navbar.js

@@ -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"

frontend/src/components/SVGGraphics/Cloud.js

@@ -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>
   );
 };

frontend/src/components/SVGGraphics/Rectangle.js

@@ -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>
   );
 };

frontend/src/components/SVGGraphics/RoundedRect.js

@@ -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>
   );
 };

frontend/src/components/Sidebar.js

@@ -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"
+            color="white"
-            borderColor="blue.700"
+            borderColor="white"
           />
         </Menu>
       </SidebarContent>

frontend/src/components/TrustedBadge.js

@@ -31,19 +31,12 @@ const TrustedBadge = ({
           alignItems="center"
           alignSelf="center"
           wrap="nowrap"
-          p={4}
+          p={[2, 4]}
           direction="column"
         >
           <Image
             sx={{ filter: filterStr }}
-            h={[
+            h={[`${2.25 * _scale}rem`, `${3 * _scale}rem`, null]}
-              `${1.75 * _scale}rem`,
-              null,
-              `${3 * _scale}rem`,
-              `${3 * _scale}rem`,
-              `${4 * _scale}rem`,
-              `${6 * _scale}rem`,
-            ]}
             src={ImgURL}
             alt={name}
           ></Image>

frontend/src/core/constants.js

@@ -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",

frontend/styles/sidebar.css

@@ -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;