improvements

frontend/pages/_app.js

@@ -8,6 +8,7 @@ import "slick-carousel/slick/slick.css";
 import "slick-carousel/slick/slick-theme.css";
 import dynamic from "next/dynamic";
 import { QueryClient, QueryClientProvider } from "react-query";
+import { ReactQueryDevtools } from "react-query/devtools";
 import HeadLinks from "../src/components/HeadLinks";
 import HeadSEO from "../src/components/HeadSEO";
 const AppContext = dynamic(() => import("../src/AppContext"), {

frontend/src/components/ConnectedButtons.js

@@ -19,8 +19,6 @@ const ArrowCTA = (props) => {
   const box3Ref = useRef(null);
   const box4Ref = useRef(null);
 
-  // const gridRow = props.button4 ? [5, 4, 2, null, 2] : [4, 3, 2, null, 2];
-
   const updateXarrow = useXarrow();
 
   useEffect(() => {
@@ -54,8 +52,6 @@ const ArrowCTA = (props) => {
     null,
   ];
 
-  const speedConst = -0.05;
-
   return (
     <SimpleGrid
       columns={props.button4 ? [1, 2, 4, null, 4] : [1, 2, 3, null, 3]}

frontend/src/components/DragOnGrid.js

@@ -1,14 +1,29 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import Draggable from "react-draggable";
 import { useXarrow } from "react-xarrows";
 const DragOnGrid = React.forwardRef((props, ref) => {
   const updateXarrow = useXarrow();
 
-  const handleDrag = (e) => {
-    console.log(e);
+  const [position, setPosition] = useState({
+    x: props.defaultPosition.x * props.gridStep,
+    y: props.defaultPosition.y * props.gridStep,
+  });
+  const [cellSize, setCellSize] = useState(props.gridStep);
+
+  useEffect(() => {
+    setPosition({
+      x: (position.x * props.gridStep) / cellSize,
+      y: (position.y * props.gridStep) / cellSize,
+    });
+    setCellSize(props.gridStep);
+    //eslint-disable-next-line
+  }, [props.gridStep]);
+
+  const handleDrag = (e, eData) => {
     setTimeout(() => {
       updateXarrow();
     }, 50);
+    setPosition({ x: position.x + eData.deltaX, y: position.y + eData.deltaY });
   };
 
   return (
@@ -16,12 +31,10 @@ const DragOnGrid = React.forwardRef((props, ref) => {
       nodeRef={ref}
       axis="both"
       handle=".handle"
-      {...props}
-      position={null}
-      grid={[60, 60]}
+      position={{ ...position }}
+      grid={[props.gridStep, props.gridStep]}
       scale={1}
       onDrag={handleDrag}
-      onStop={updateXarrow}
     >
       {props.children}
     </Draggable>

frontend/src/components/Footer.js

@@ -1,133 +1,189 @@
 import React from "react";
-import { Flex, Text, Link, Heading } from "@chakra-ui/react";
-import CustomIcon from "../components/CustomIcon";
+import {
+  Text,
+  Link,
+  Box,
+  Container,
+  SimpleGrid,
+  Stack,
+  Image as ChakraImage,
+  useColorModeValue,
+  VisuallyHidden,
+  chakra,
+} from "@chakra-ui/react";
 import RouterLink from "next/link";
-
-const ICONS = [
-  {
-    social: "discord",
-    link: "https://discord.gg/K56VNUQGvA",
-  },
-
-  { social: "twit", link: "https://twitter.com/moonstreamto" },
-];
-
-const SITEMAP_FLEX_PROPS = {
-  px: 2,
-  alignItems: "flex-start",
-  flexGrow: 1,
-  pb: 4,
-  color: "white.300",
-  fontWeight: "600",
-  direction: "column",
-  mr: 12,
-};
+import {
+  WHITE_LOGO_W_TEXT_URL,
+  ALL_NAV_PATHES,
+  FOOTER_COLUMNS,
+} from "../core/constants";
+import { FaGithub, FaTwitter, FaDiscord } from "react-icons/fa";
+import { v4 } from "uuid";
 
 const LINKS_SIZES = {
   fontWeight: "300",
   fontSize: "lg",
 };
 
-const Footer = () => (
-  <Flex
-    bg="brand.200"
-    flexGrow="1"
-    px="7%"
-    width="100%"
-    align="center"
-    alignItems="self-end"
-    justify={["center", "center", null, "space-between"]}
-    direction={["column", "column", "row", null, "row"]}
-    py="2.5rem"
-  >
-    <Flex
-      p={0}
-      direction={["column", "row", null, "row"]}
-      flexGrow="2"
-      flexWrap="wrap"
-      maxW="40rem"
-    >
-      <Flex {...SITEMAP_FLEX_PROPS}>
-        <Heading pb={8} size="md">
-          About
-        </Heading>{" "}
-        <RouterLink passHref href="/team">
-          <Link {...LINKS_SIZES}>Team</Link>
-        </RouterLink>
-        <RouterLink passHref href="/product">
-          <Link {...LINKS_SIZES}>Product</Link>
-        </RouterLink>
-      </Flex>
+const ListHeader = ({ children }) => {
+  return (
+    <Text fontWeight={"500"} fontSize={"lg"} mb={2}>
+      {children}
+    </Text>
+  );
+};
 
-      <Flex {...SITEMAP_FLEX_PROPS}>
-        <Heading pb={8} size="md">
-          News
-        </Heading>
-        <RouterLink passHref href="http://blog.moonstream.to">
-          <Link {...LINKS_SIZES}>Blog</Link>
-        </RouterLink>
-        {/* <RouterLink passHref href="/privacy-policy">
-          <Link {...LINKS_SIZES}>Privacy policy</Link>
-        </RouterLink> */}
-      </Flex>
-      {/* <Flex {...SITEMAP_FLEX_PROPS}>
-        <Heading pb={8} size="md">
-          Product
-        </Heading>
-        <RouterLink href="/pricing" passHref>
-          <Link {...LINKS_SIZES}>Pricing</Link>
-        </RouterLink>
-        <RouterLink passHref href={"/case-studies/activeloop"}>
-          <Link {...LINKS_SIZES}>Case studies</Link>
-        </RouterLink>
-      </Flex> */}
-    </Flex>
-    <Flex
-      direction="column"
-      flexGrow="1"
-      w="100%"
-      maxW="40rem"
-      alignItems={["flex-end", "flex-end", null, "flex-end"]}
-      pr={[0, null, 8]}
+const SocialButton = ({ children, label, href }) => {
+  return (
+    <chakra.button
+      bg={useColorModeValue("blackAlpha.100", "whiteAlpha.100")}
+      rounded={"full"}
+      w={8}
+      h={8}
+      cursor={"pointer"}
+      as={"a"}
+      href={href}
+      display={"inline-flex"}
+      alignItems={"center"}
+      justifyContent={"center"}
+      transition={"background 0.3s ease"}
+      _hover={{
+        bg: useColorModeValue("blackAlpha.200", "whiteAlpha.200"),
+      }}
     >
-      <Text
-        color="white"
-        pt={[24, 24, null, 0]}
-        pb={8}
-        fontSize="xl"
-        fontWeight="500"
+      <VisuallyHidden>{label}</VisuallyHidden>
+      {children}
+    </chakra.button>
+  );
+};
+
+const Footer = () => (
+  <Box
+    bg={useColorModeValue("blue.900", "gray.900")}
+    color={useColorModeValue("gray.700", "gray.200")}
+  >
+    <Container as={Stack} maxW={"6xl"} py={10}>
+      <SimpleGrid
+        templateColumns={{ sm: "1fr 1fr", md: "2fr 1fr 1fr 2fr" }}
+        spacing={8}
       >
-        All the crypto data you care about{` `}
-        <span role="img" aria-label="heart">
-          💙
-        </span>
-      </Text>
-      <Flex px={2} width="100%" maxW="30rem" justifyContent="flex-end">
-        {ICONS.map((icon, index) => (
-          <Link
-            key={`social-footer-icons-${index}`}
-            display="flex"
-            mx={2}
-            mb={2}
-            borderRadius="13px"
-            bg="blue.800"
-            boxSize={["3rem", "4rem", "6rem", null, "6rem"]}
-            _hover={{ bg: "blue.600" }}
-            alignItems="center"
-            justifyContent="center"
-            href={icon.link}
-            isExternal
-            p={4}
-          >
-            <CustomIcon icon={icon.social} />
-          </Link>
-        ))}
-      </Flex>
-      <Text pt={24} alignSelf="flex-end" textColor="blue.500">
-        All rights reserved.2021
-      </Text>
-    </Flex>
-  </Flex>
+        <Stack spacing={6}>
+          <Box>
+            <Link href="/" alignSelf="center">
+              <ChakraImage
+                alignSelf="center"
+                // as={Link}
+                // to="/"
+                h="2.5rem"
+                minW="2.5rem"
+                src={WHITE_LOGO_W_TEXT_URL}
+                alt="Go to app root"
+              />
+            </Link>
+          </Box>
+          <Text fontSize={"sm"}>© 2021 Moonstream.to All rights reserved</Text>
+          <Stack direction={"row"} spacing={6}>
+            <SocialButton
+              label={"Twitter"}
+              href={"https://twitter.com/moonstreamto"}
+            >
+              <FaTwitter />
+            </SocialButton>
+            <SocialButton
+              label={"Github"}
+              href={"https://github.com/bugout-dev/moonstream"}
+            >
+              <FaGithub />
+            </SocialButton>
+            <SocialButton
+              label={"Discord"}
+              href={"https://discord.gg/K56VNUQGvA"}
+            >
+              <FaDiscord />
+            </SocialButton>
+          </Stack>
+        </Stack>
+        {Object.values(FOOTER_COLUMNS).map((columnEnum) => {
+          console.log("colenum", columnEnum);
+          return (
+            <Stack align={"flex-start"} key={v4()}>
+              {ALL_NAV_PATHES.filter(
+                (navPath) => navPath.footerCategory === columnEnum
+              ).length > 0 && (
+                <>
+                  <ListHeader>{columnEnum}</ListHeader>
+                  {ALL_NAV_PATHES.filter(
+                    (navPath) => navPath.footerCategory === columnEnum
+                  ).map((linkItem) => {
+                    return (
+                      <RouterLink passHref href={linkItem.path} key={v4()}>
+                        <Link {...LINKS_SIZES}>{linkItem.title}</Link>
+                      </RouterLink>
+                    );
+                  })}
+                </>
+              )}
+            </Stack>
+          );
+        })}
+        {/* <Stack align={"flex-start"}>
+          {ALL_NAV_PATHES.filter(
+            (navPath) => navPath.footerCategory === FOOTER_COLUMNS.COMPANY
+          ).length > 0 && (
+            <>
+              <ListHeader>Company</ListHeader>
+              {ALL_NAV_PATHES.filter(
+                (navPath) => navPath.footerCategory === FOOTER_COLUMNS.COMPANY
+              ).map((linkItem) => {
+                return (
+                  <RouterLink passHref href={linkItem.path} key={v4()}>
+                    <Link {...LINKS_SIZES}>{linkItem.title}</Link>
+                  </RouterLink>
+                );
+              })}
+            </>
+          )}
+        </Stack> */}
+        {/* <Stack align={"flex-start"}>
+          {ALL_NAV_PATHES.filter(
+            (navPath) => navPath.footerCategory === FOOTER_COLUMNS.NEWS
+          ).length > 0 && (
+            <>
+              <ListHeader>Company</ListHeader>
+              {ALL_NAV_PATHES.filter(
+                (navPath) => navPath.footerCategory === FOOTER_COLUMNS.NEWS
+              ).map((linkItem) => {
+                return (
+                  <RouterLink passHref href={linkItem.path} key={v4()}>
+                    <Link {...LINKS_SIZES}>{linkItem.title}</Link>
+                  </RouterLink>
+                );
+              })}
+            </>
+          )}
+        </Stack> */}
+
+        {/* <Stack align={"flex-start"}>
+          {ALL_NAV_PATHES.filter(
+            (navPath) => navPath.footerCategory === FOOTER_COLUMNS.PRODUCT
+          ).length > 0 && (
+            <>
+              <ListHeader>Company</ListHeader>
+              {ALL_NAV_PATHES.filter(
+                (navPath) => navPath.footerCategory === FOOTER_COLUMNS.PRODUCT
+              ).map((linkItem) => {
+                return (
+                  <RouterLink passHref href={linkItem.path} key={v4()}>
+                    <Link {...LINKS_SIZES}>{linkItem.title}</Link>
+                  </RouterLink>
+                );
+              })}
+            </>
+          )}
+        </Stack> */}
+      </SimpleGrid>
+    </Container>
+  </Box>
 );
 
 export default Footer;

frontend/src/components/SchematicPlayground.js

@@ -0,0 +1,323 @@
+import React, { useRef } from "react";
+import { Box, Button, useBreakpointValue } from "@chakra-ui/react";
+import DragOnGrid from "./DragOnGrid";
+import Xarrow from "react-xarrows";
+
+const SchematicPlayground = () => {
+  const gridCellSize = useBreakpointValue({
+    base: 24,
+    sm: 32,
+    md: 64,
+    lg: 64,
+    xl: 64,
+    "2xl": 64,
+  });
+  const ref1 = useRef(null);
+  const ref2 = useRef(null);
+  const ref3 = useRef(null);
+  const ref4 = useRef(null);
+  const ref5 = useRef(null);
+  const ref6 = useRef(null);
+  const ref7 = useRef(null);
+  const ref8 = useRef(null);
+  if (!gridCellSize) return "";
+  return (
+    <>
+      <Box
+        h={`${(gridCellSize * 5 + 1).toString()}` + `px`}
+        // h={`301px`}
+        w="100%"
+        bgColor="white"
+        bgSize={`${(gridCellSize / 6).toString() + "px"}  ${
+          (gridCellSize / 6).toString() + "px"
+        }, ${gridCellSize.toString() + "px"} ${gridCellSize.toString() + "px"}`}
+        bgImage={`linear-gradient(to bottom, transparent ${
+          (gridCellSize / 10).toString() + "px"
+        }, white ${(gridCellSize / 10).toString() + "px"}),
+          linear-gradient(to right, #dee3ea 1px, transparent 1px),
+          linear-gradient(to right, transparent ${
+            (gridCellSize / 10).toString() + "px"
+          }, white ${(gridCellSize / 10).toString() + "px"}),
+          linear-gradient(to bottom, #dee3ea 1px, transparent 1px)`}
+        maxW={`${(gridCellSize * 11 + 1).toString()}` + `px`}
+        placeSelf="center"
+      >
+        <DragOnGrid
+          ref={ref4}
+          gridStep={gridCellSize}
+          defaultPosition={{ x: 5, y: 2 }}
+        >
+          <Button
+            m={0}
+            p={0}
+            borderRadius="sm"
+            ref={ref4}
+            className="handle"
+            minW={`${gridCellSize.toString}` + `px`}
+            fontSize={(gridCellSize / 4).toString() + `px`}
+            boxSize={`${gridCellSize.toString()}` + "px"}
+            borderStyle="inset"
+            bg="green.900"
+            color="white"
+            textAlign="center"
+            zIndex={10}
+          >
+            MSTR
+          </Button>
+        </DragOnGrid>
+        <DragOnGrid
+          ref={ref2}
+          gridStep={gridCellSize}
+          defaultPosition={{ x: 4, y: 0 }}
+        >
+          <Button
+            m={0}
+            ref={ref2}
+            p={0}
+            borderRadius="sm"
+            className="handle"
+            minW={`${gridCellSize.toString}` + `px`}
+            minH={`${gridCellSize.toString}` + `px`}
+            fontSize={(gridCellSize / 4).toString() + `px`}
+            boxSize={`${gridCellSize.toString()}` + "px"}
+            bg="blue.900"
+            color="white"
+            textAlign="center"
+            zIndex={10}
+          >
+            DEX
+          </Button>
+        </DragOnGrid>
+        <DragOnGrid
+          ref={ref3}
+          gridStep={gridCellSize}
+          defaultPosition={{ x: 3, y: 4 }}
+        >
+          <Button
+            m={0}
+            ref={ref3}
+            p={0}
+            borderRadius="sm"
+            className="handle"
+            minW={`${gridCellSize.toString}` + `px`}
+            fontSize={(gridCellSize / 4).toString() + `px`}
+            boxSize={`${gridCellSize.toString()}` + "px"}
+            bg="orange.900"
+            color="white"
+            textAlign="center"
+            zIndex={10}
+          >
+            NFT
+          </Button>
+        </DragOnGrid>
+        <DragOnGrid
+          ref={ref1}
+          gridStep={gridCellSize}
+          defaultPosition={{ x: -2, y: 1 }}
+        >
+          <Button
+            m={0}
+            ref={ref1}
+            p={0}
+            borderRadius="sm"
+            className="handle"
+            minW={`${gridCellSize.toString}` + `px`}
+            fontSize={(gridCellSize / 4).toString() + `px`}
+            boxSize={`${gridCellSize.toString()}` + "px"}
+            bg="red.900"
+            color="white"
+            textAlign="center"
+            zIndex={10}
+          >
+            MSTR
+          </Button>
+        </DragOnGrid>
+        <DragOnGrid
+          ref={ref4}
+          gridStep={gridCellSize}
+          defaultPosition={{ x: -3, y: 4 }}
+        >
+          <Button
+            m={0}
+            ref={ref5}
+            p={0}
+            borderRadius="sm"
+            className="handle"
+            minW={`${gridCellSize.toString}` + `px`}
+            fontSize={(gridCellSize / 4).toString() + `px`}
+            boxSize={`${gridCellSize.toString()}` + "px"}
+            bg="red.900"
+            color="white"
+            textAlign="center"
+            zIndex={10}
+          >
+            EIP1155
+          </Button>
+        </DragOnGrid>
+        <DragOnGrid
+          ref={ref4}
+          gridStep={gridCellSize}
+          defaultPosition={{ x: 3, y: 3 }}
+        >
+          <Button
+            m={0}
+            ref={ref6}
+            p={0}
+            borderRadius="sm"
+            className="handle"
+            minW={`${gridCellSize.toString}` + `px`}
+            fontSize={(gridCellSize / 4).toString() + `px`}
+            boxSize={`${gridCellSize.toString()}` + "px"}
+            bg="blue.900"
+            color="white"
+            textAlign="center"
+            zIndex={10}
+          >
+            ERC721
+          </Button>
+        </DragOnGrid>
+        <DragOnGrid
+          ref={ref4}
+          gridStep={gridCellSize}
+          defaultPosition={{ x: 4, y: 4 }}
+        >
+          <Button
+            m={0}
+            ref={ref7}
+            p={0}
+            borderRadius="sm"
+            className="handle"
+            minW={`${gridCellSize.toString}` + `px`}
+            fontSize={(gridCellSize / 4).toString() + `px`}
+            boxSize={`${gridCellSize.toString()}` + "px"}
+            bg="green.900"
+            color="white"
+            textAlign="center"
+            zIndex={10}
+          >
+            DAO
+          </Button>
+        </DragOnGrid>
+        <DragOnGrid
+          ref={ref4}
+          gridStep={gridCellSize}
+          defaultPosition={{ x: 2, y: 0 }}
+        >
+          <Button
+            m={0}
+            ref={ref8}
+            p={0}
+            borderRadius="sm"
+            className="handle"
+            minW={`${gridCellSize.toString}` + `px`}
+            fontSize={(gridCellSize / 4).toString() + `px`}
+            boxSize={`${gridCellSize.toString()}` + "px"}
+            bg="orange.900"
+            color="white"
+            textAlign="center"
+            zIndex={10}
+          >
+            ORACLE
+          </Button>
+        </DragOnGrid>
+      </Box>
+      <Xarrow
+        dashness={{
+          strokeLen: 10,
+          nonStrokeLen: 15,
+          animation: 1 * 1,
+        }}
+        color="#920050"
+        path="grid"
+        gridBreak={(gridCellSize * 0.5).toString() + "px"}
+        //   startAnchor={"top"}
+        showHead={false}
+        start={ref3} //can be react ref
+        end={ref4} //or an id
+      />
+      <Xarrow
+        dashness={{
+          strokeLen: 10,
+          nonStrokeLen: 15,
+          animation: 1 * 1,
+        }}
+        color="#113350"
+        path="grid"
+        gridBreak={(gridCellSize * 0.5).toString() + "px"}
+        showHead={false}
+        start={ref2} //can be react ref
+        end={ref4} //or an id
+      />
+      <Xarrow
+        dashness={{
+          strokeLen: 10,
+          nonStrokeLen: 15,
+          animation: 1 * 1,
+        }}
+        color="#92D0F0"
+        gridBreak={(gridCellSize * 0.5).toString() + "px"}
+        path="grid"
+        //   startAnchor={"top"}
+        showHead={false}
+        start={ref1} //can be react ref
+        end={ref4} //or an id
+      />
+      <Xarrow
+        dashness={{
+          strokeLen: 10,
+          nonStrokeLen: 15,
+          animation: 1 * 1,
+        }}
+        color="#92D0F0"
+        gridBreak={(gridCellSize * 0.5).toString() + "px"}
+        path="grid"
+        //   startAnchor={"top"}
+        showHead={false}
+        start={ref5} //can be react ref
+        end={ref4} //or an id
+      />
+      <Xarrow
+        dashness={{
+          strokeLen: 10,
+          nonStrokeLen: 15,
+          animation: 1 * 1,
+        }}
+        color="#92D0F0"
+        gridBreak={(gridCellSize * 0.5).toString() + "px"}
+        path="grid"
+        //   startAnchor={"top"}
+        showHead={false}
+        start={ref6} //can be react ref
+        end={ref4} //or an id
+      />
+      <Xarrow
+        dashness={{
+          strokeLen: 10,
+          nonStrokeLen: 15,
+          animation: 1 * 1,
+        }}
+        color="#92D0F0"
+        gridBreak={(gridCellSize * 0.5).toString() + "px"}
+        path="grid"
+        showHead={false}
+        start={ref7} //can be react ref
+        end={ref4} //or an id
+      />
+      <Xarrow
+        dashness={{
+          strokeLen: 10,
+          nonStrokeLen: 15,
+          animation: 1 * 1,
+        }}
+        color="#92D0F0"
+        gridBreak={(gridCellSize * 0.5).toString() + "px"}
+        path="grid"
+        showHead={false}
+        start={ref8} //can be react ref
+        end={ref4} //or an id
+      />
+    </>
+  );
+};
+
+export default SchematicPlayground;

frontend/src/components/Sidebar.js

@@ -20,7 +20,8 @@ import {
 import { MdTimeline, MdSettings } from "react-icons/md";
 import { ImStatsBars } from "react-icons/im";
 import { HiAcademicCap } from "react-icons/hi";
-import { WHITE_LOGO_W_TEXT_URL } from "../core/constants";
+import { WHITE_LOGO_W_TEXT_URL, ALL_NAV_PATHES } from "../core/constants";
+import { v4 } from "uuid";
 
 const Sidebar = () => {
   const ui = useContext(UIContext);
@@ -93,6 +94,16 @@ const Sidebar = () => {
                   Learn how to use Moonstream
                 </RouterLink>
               </MenuItem>
+              {ALL_NAV_PATHES.map((pathToLink) => {
+                return (
+                  <MenuItem key={v4()}>
+                    {" "}
+                    <RouterLink href={pathToLink.path}>
+                      {pathToLink.title}
+                    </RouterLink>
+                  </MenuItem>
+                );
+              })}
             </Menu>
           )}
         </SidebarContent>
@@ -118,14 +129,16 @@ const Sidebar = () => {
             >
               Login
             </MenuItem>
-            <MenuItem>
-              {" "}
-              <RouterLink href="/product">Product </RouterLink>
-            </MenuItem>
-            <MenuItem>
-              {" "}
-              <RouterLink href="/team">Team </RouterLink>
-            </MenuItem>
+            {ALL_NAV_PATHES.map((pathToLink) => {
+              return (
+                <MenuItem key={v4()}>
+                  {" "}
+                  <RouterLink href={pathToLink.path}>
+                    {pathToLink.title}
+                  </RouterLink>
+                </MenuItem>
+              );
+            })}
           </Menu>
         </SidebarContent>
       )}

frontend/src/core/constants.js

@@ -15,14 +15,37 @@ export const DEFAULT_METATAGS = {
   image: `https://s3.amazonaws.com/static.simiotics.com/moonstream/assets/crypto+traders.png`,
 };
 
+export const FOOTER_COLUMNS = {
+  NEWS: "News",
+  COMPANY: "Company",
+  PRODUCT: "Product",
+};
+
 export const ALL_NAV_PATHES = [
   {
     title: "Product",
     path: "/product",
+    footerCategory: FOOTER_COLUMNS.PRODUCT,
   },
   {
     title: "Team",
     path: "/team",
+    footerCategory: FOOTER_COLUMNS.COMPANY,
+  },
+  {
+    title: "API",
+    path: "https://api.moonstream.to/docs",
+    footerCategory: FOOTER_COLUMNS.PRODUCT,
+  },
+  {
+    title: "Whitepapers",
+    path: "https://github.com/bugout-dev/papers",
+    footerCategory: FOOTER_COLUMNS.PRODUCT,
+  },
+  {
+    title: "Blog",
+    path: "https://blog.moonstream.to",
+    footerCategory: FOOTER_COLUMNS.NEWS,
   },
 ];
 

frontend/styles/styles.css

@@ -242,6 +242,8 @@ code {
 .prev {
   left: 0%;
   top: 50%;
+}
+
 .bgGrid {
   background-color: white;
   background-size: 10px 10px, 60px 60px;