Merge pull request #317 from bugout-dev/landing-improvements-alpha

Landing improvements alpha

frontend/pages/index.js

@@ -10,16 +10,16 @@ import {
   Flex,
   Heading,
   Box,
-  Image as ChakraImage,
   Center,
   chakra,
   Stack,
   Link,
-  SimpleGrid,
   useMediaQuery,
   Grid,
   Text,
   GridItem,
+  SimpleGrid,
+  Image as ChakraImage,
 } from "@chakra-ui/react";
 import dynamic from "next/dynamic";
 import useUser from "../src/core/hooks/useUser";
@@ -29,9 +29,9 @@ import {
   MIXPANEL_PROPS,
   MIXPANEL_EVENTS,
 } from "../src/core/providers/AnalyticsProvider/constants";
-import UIContext from "../src/core/providers/UIProvider/context";
 import { AWS_ASSETS_PATH } from "../src/core/constants";
 import mixpanel from "mixpanel-browser";
+import UIContext from "../src/core/providers/UIProvider/context";
 const SplitWithImage = dynamic(
   () => import("../src/components/SplitWithImage"),
   {
@@ -50,6 +50,34 @@ const IoTelescopeSharp = dynamic(() =>
   import("react-icons/io5").then((mod) => mod.IoTelescopeSharp)
 );
 
+const AiFillApi = dynamic(() =>
+  import("react-icons/ai").then((mod) => mod.AiFillApi)
+);
+
+const BiTransfer = dynamic(() =>
+  import("react-icons/bi").then((mod) => mod.BiTransfer)
+);
+
+const RiDashboardFill = dynamic(() =>
+  import("react-icons/ri").then((mod) => mod.RiDashboardFill)
+);
+const FaFileContract = dynamic(() =>
+  import("react-icons/fa").then((mod) => mod.FaFileContract)
+);
+const GiMeshBall = dynamic(() =>
+  import("react-icons/gi").then((mod) => mod.GiMeshBall)
+);
+
+const GiLogicGateXor = dynamic(() =>
+  import("react-icons/gi").then((mod) => mod.GiLogicGateXor)
+);
+
+const ConnectedButtons = dynamic(
+  () => import("../src/components/ConnectedButtons"),
+  {
+    ssr: false,
+  }
+);
 const HEADING_PROPS = {
   fontWeight: "700",
   fontSize: ["4xl", "5xl", "4xl", "5xl", "6xl", "7xl"],
@@ -66,6 +94,7 @@ const assets = {
   socialMediaPosts: `${AWS_ASSETS_PATH}/Social+media+posts.png`,
   cryptoTraders: `${AWS_ASSETS_PATH}/crypto+traders.png`,
   comicWhite: `${AWS_ASSETS_PATH}/moonstream-comic-white.png`,
+  smartDevelopers: `${AWS_ASSETS_PATH}/smart+contract+developers.png`,
 };
 const Homepage = () => {
   const ui = useContext(UIContext);
@@ -235,30 +264,14 @@ const Homepage = () => {
                           understand exactly how people are using your smart
                           contracts.
                         </chakra.span>
-                        {/* <chakra.span
-                          fontSize={["md", "2xl", "3xl", "3xl", "3xl", "4xl"]}
-                          display="inline-block"
-                          color="blue.300"
-                        >
-                          Access this data through the Moonstream dashboard or
-                          API
-                        </chakra.span> */}
                       </Stack>
                     </Flex>
                   </Box>
                 </chakra.header>
               </GridItem>
 
-              <GridItem
+              <GridItem px="7%" colSpan="12" pt={0} minH="100vh">
-                px="7%"
-                colSpan="12"
-                // pt={["20px", "20px", "100px", null, "120px"]}
-                pt={0}
-                // pb={["20px", "56px", null, "184px"]}
-                minH="100vh"
-              >
                 <chakra.span
-                  // {...HEADING_PROPS}
                   textAlign="center"
                   fontWeight="600"
                   fontSize="lg"
@@ -267,7 +280,6 @@ const Homepage = () => {
                 >
                   <Text
                     mb={18}
-                    // mb={[12, 12, 12, null, 48]}
                     fontSize={["md", "2xl", "3xl", "3xl", "3xl", "4xl"]}
                   >
                     We believe that the blockchain is for everyone. This
@@ -334,7 +346,7 @@ const Homepage = () => {
                     <Heading textAlign="center ">Social media posts</Heading>
                   </Stack>
                 </SimpleGrid>
-                {/* <Center>
+                <Center>
                   <Heading pt="160px" pb="60px">
                     Moonstream is meant for you if
                   </Heading>
@@ -343,49 +355,59 @@ const Homepage = () => {
                   w="100%"
                   direction={["column", "row", "column", null, "column"]}
                   flexWrap={["nowrap", "nowrap", "nowrap", null, "nowrap"]}
-                  pb="66px"
+                  pb="32px"
                 >
                   <ConnectedButtons
-                    title={"You are..."}
+                    title={"You need a fusion of..."}
-                    button1={{
+                    button4={{
-                      label: "Crypto trader",
+                      label: "Blockchain analytics",
-                      link: "/#cryptoTrader",
+                      link: "/#analytics",
                       onClick: () => {
                         mixpanel.get_distinct_id() &&
                           mixpanel.track(`${MIXPANEL_EVENTS.BUTTON_CLICKED}`, {
-                            [`${MIXPANEL_PROPS.BUTTON_NAME}`]: `scroll to CryptoTrader`,
+                            [`${MIXPANEL_PROPS.BUTTON_NAME}`]: `Connected buttons: scroll to analytics`,
+                          });
+                      },
+                    }}
+                    button1={{
+                      label: "TX pool real time data",
+                      link: "/#txpool",
+                      onClick: () => {
+                        mixpanel.get_distinct_id() &&
+                          mixpanel.track(`${MIXPANEL_EVENTS.BUTTON_CLICKED}`, {
+                            [`${MIXPANEL_PROPS.BUTTON_NAME}`]: `Connected buttons: scroll to txpool`,
                           });
                       },
                     }}
                     button2={{
-                      label: "Algorithmic Fund",
+                      label: "Exchange price stream",
-                      link: "/#algoFund",
+                      link: "/#exchanges",
                       onClick: () => {
                         mixpanel.get_distinct_id() &&
                           mixpanel.track(`${MIXPANEL_EVENTS.BUTTON_CLICKED}`, {
-                            [`${MIXPANEL_PROPS.BUTTON_NAME}`]: `scroll to AlgoFund`,
+                            [`${MIXPANEL_PROPS.BUTTON_NAME}`]: `Connected buttons: scroll to exchanges`,
                           });
                       },
                     }}
                     button3={{
-                      label: "Developer",
+                      label: "Social media posts",
                       link: "/#smartDeveloper",
                       onClick: () => {
                         mixpanel.get_distinct_id() &&
                           mixpanel.track(`${MIXPANEL_EVENTS.BUTTON_CLICKED}`, {
-                            [`${MIXPANEL_PROPS.BUTTON_NAME}`]: `scroll to Developer`,
+                            [`${MIXPANEL_PROPS.BUTTON_NAME}`]: `Connected buttons: scroll to developer`,
                           });
                       },
                     }}
                   />
-                </Flex> */}
+                </Flex>
               </GridItem>
-              {/* <GridItem
+              <GridItem
                 px="7%"
                 colSpan="12"
                 pt={["1rem", "1rem", "5.125rem", null, "5.125rem"]}
                 pb={["0", "66px", null, "66px"]}
-                id="cryptoTrader"
+                id="txpool"
                 minH={ui.isMobileView ? "100vh" : null}
               >
                 <SplitWithImage
@@ -394,16 +416,18 @@ const Homepage = () => {
                     onClick: () => {
                       mixpanel.get_distinct_id() &&
                         mixpanel.track(`${MIXPANEL_EVENTS.BUTTON_CLICKED}`, {
-                          [`${MIXPANEL_PROPS.BUTTON_NAME}`]: `Early access CTA: Crypto trader`,
+                          [`${MIXPANEL_PROPS.BUTTON_NAME}`]: `Early access CTA: developer txpool button`,
                         });
-                      toggleModal("hubspot-trader");
+                      toggleModal("hubspot-developer");
                     },
                   }}
                   elementName={"element1"}
                   colorScheme="green"
-                  badge={`For crypto traders`}
+                  badge={`Transaction pool data`}
-                  title={``}
+                  title={`Get real-time access to transaction pool`}
-                  body={``}
+                  body={`In blockchains, transaction pool is place where future blocks are being forged.
+                  Having insight in to this dynamic, always changing data means to be in the present moment
+                  `}
                   bullets={[
                     {
                       text: `Subscribe to the defi contracts you care about`,
@@ -412,28 +436,28 @@ const Homepage = () => {
                       bgColor: "green.900",
                     },
                     {
-                      text: `Make sense of how others are calling these contracts using Moonstream dashboards.
+                      text: `Get data directly from the transaction pool through our global network of Ethereum nodes
                       `,
                       icon: RiDashboardFill,
                       color: "green.50",
                       bgColor: "green.900",
                     },
                     {
-                      text: `Get data directly from the transaction pool through our global network of Ethereum nodes`,
+                      text: `Setup notifications to be first to know when and how your contract is being interacted`,
                       icon: GiMeshBall,
                       color: "green.50",
                       bgColor: "green.900",
                     },
                   ]}
-                  imgURL={assets["cryptoTraders"]}
+                  imgURL={assets["pendingTransactions"]}
                 />
-              </GridItem> */}
+              </GridItem>
-              {/* <GridItem
+              <GridItem
                 px="7%"
                 colSpan="12"
                 pt={["1rem", "1rem", "5.125rem", null, "5.125rem"]}
                 pb={["0", "66px", null, "66px"]}
-                id="algoFund"
+                id="exchanges"
                 minH={ui.isMobileView ? "100vh" : null}
               >
                 <SplitWithImage
@@ -442,15 +466,17 @@ const Homepage = () => {
                     onClick: () => {
                       mixpanel.get_distinct_id() &&
                         mixpanel.track(`${MIXPANEL_EVENTS.BUTTON_CLICKED}`, {
-                          [`${MIXPANEL_PROPS.BUTTON_NAME}`]: `Early access CTA: Algo fund`,
+                          [`${MIXPANEL_PROPS.BUTTON_NAME}`]: `Early access CTA: developer exchanges button`,
                         });
-                      toggleModal("hubspot-fund");
+                      toggleModal("hubspot-developer");
                     },
                   }}
                   elementName={"element2"}
                   mirror={true}
                   colorScheme="orange"
-                  badge={`For algorithmic funds`}
+                  badge={`Centralized exchange prices`}
+                  title={`Market data - just in time! `}
+                  body={`Moonstream is your tool of choice to built algorithms and tools which need to source data from exchange services. Whether it is on-chian automatic market maker, or centralized exchange - get numbers in one dashboard`}
                   bullets={[
                     {
                       text: `Get API access to your stream`,
@@ -471,9 +497,9 @@ const Homepage = () => {
                       bgColor: "orange.900",
                     },
                   ]}
-                  imgURL={assets["algorithmicFunds"]}
+                  imgURL={assets["priceInformation"]}
                 />
-              </GridItem> */}
+              </GridItem>
               <GridItem
                 px="7%"
                 colSpan="12"
@@ -488,7 +514,7 @@ const Homepage = () => {
                     onClick: () => {
                       mixpanel.get_distinct_id() &&
                         mixpanel.track(`${MIXPANEL_EVENTS.BUTTON_CLICKED}`, {
-                          [`${MIXPANEL_PROPS.BUTTON_NAME}`]: `Early access CTA: developer`,
+                          [`${MIXPANEL_PROPS.BUTTON_NAME}`]: `Early access CTA: developer smartDeveloper button`,
                         });
                       toggleModal("hubspot-developer");
                     },
@@ -506,28 +532,87 @@ const Homepage = () => {
                   }}
                   elementName={"element3"}
                   colorScheme="blue"
-                  badge={`For smart contract developers`}
+                  title={`What really matters - is people`}
+                  badge={`stay social`}
+                  body={`It's all about the community. Stay informed about what happens in social networks, news portals and rss feeds`}
                   bullets={[
                     {
-                      text: `Monitor blockchain data in real time`,
+                      text: `Use our AI to get semantics and find patterns`,
-                      icon: IoTelescopeSharp,
+                      icon: GiMeshBall,
                       color: "blue.50",
                       bgColor: "blue.900",
                     },
                     {
-                      text: `Set up alerts on suspicious activity`,
+                      text: `Secure your community wellbeing by automatically detecting social scam`,
                       icon: GiSuspicious,
                       color: "blue.50",
                       bgColor: "blue.900",
                     },
                     {
-                      text: `Register webhooks to connect your off-chain infrastructure`,
+                      text: `Register on-chain webhooks to take action`,
                       icon: GiHook,
                       color: "blue.50",
                       bgColor: "blue.900",
                     },
                   ]}
-                  imgURL={assets["cryptoTraders"]}
+                  imgURL={assets["socialMediaPosts"]}
+                />
+              </GridItem>
+              <GridItem
+                px="7%"
+                colSpan="12"
+                pt={["1rem", "1rem", "1.125rem", null, "5.125rem"]}
+                pb={["0", "66px", null, "66px"]}
+                id="analytics"
+                minH={ui.isMobileView ? "100vh" : null}
+              >
+                <SplitWithImage
+                  mirror
+                  cta={{
+                    label: "Want to find out more?",
+                    onClick: () => {
+                      mixpanel.get_distinct_id() &&
+                        mixpanel.track(`${MIXPANEL_EVENTS.BUTTON_CLICKED}`, {
+                          [`${MIXPANEL_PROPS.BUTTON_NAME}`]: `Early access CTA: developer analytics button`,
+                        });
+                      toggleModal("hubspot-developer");
+                    },
+                  }}
+                  socialButton={{
+                    url: "https://github.com/bugout-dev/moonstream/",
+                    network: "github",
+                    label: "See our github",
+                    onClick: () => {
+                      mixpanel.get_distinct_id() &&
+                        mixpanel.track(`${MIXPANEL_EVENTS.BUTTON_CLICKED}`, {
+                          [`${MIXPANEL_PROPS.BUTTON_NAME}`]: `Github link in landing page`,
+                        });
+                    },
+                  }}
+                  elementName={"element3"}
+                  colorScheme="red"
+                  badge={`Analyse blockchain activity`}
+                  bullets={[
+                    {
+                      text: `Monitor blockchain data in real time`,
+                      icon: IoTelescopeSharp,
+                      color: "red.50",
+                      bgColor: "red.900",
+                    },
+                    {
+                      text: `Set up alerts on suspicious activity`,
+                      icon: GiSuspicious,
+                      color: "red.50",
+                      bgColor: "red.900",
+                    },
+                    {
+                      text: `Register webhooks to connect your off-chain infrastructure`,
+                      icon: GiHook,
+                      color: "red.50",
+                      bgColor: "red.900",
+                    },
+                  ]}
+                  imgURL={assets["smartDevelopers"]}
                 />
               </GridItem>
               <GridItem
@@ -551,7 +636,6 @@ const Homepage = () => {
                                 [`${MIXPANEL_PROPS.BUTTON_NAME}`]: `Join our discord`,
                               }
                             );
-                          toggleModal("hubspot");
                         }}
                         isExternal
                         href={"https://discord.gg/K56VNUQGvA"}
@@ -566,7 +650,7 @@ const Homepage = () => {
                             mixpanel.track(
                               `${MIXPANEL_EVENTS.BUTTON_CLICKED}`,
                               {
-                                [`${MIXPANEL_PROPS.BUTTON_NAME}`]: `Early access CTA: developer`,
+                                [`${MIXPANEL_PROPS.BUTTON_NAME}`]: `Early access CTA: developer want to find more button`,
                               }
                             );
                           toggleModal("hubspot-developer");

frontend/pages/product/index.js

@@ -1,26 +1,30 @@
 import React, { useEffect, useState, useLayoutEffect } from "react";
 import {
-  Heading,
   Text,
   Flex,
   Link,
   Stack,
-  chakra,
   useMediaQuery,
   useBreakpointValue,
+  Center,
 } from "@chakra-ui/react";
-import { DEFAULT_METATAGS, AWS_ASSETS_PATH } from "../../src/core/constants";
+import { AWS_ASSETS_PATH } from "../../src/core/constants";
-export async function getStaticProps() {
+import SplitWithImage from "../../src/components/SplitWithImage";
-  return {
+import mixpanel from "mixpanel-browser";
-    props: { metaTags: { ...DEFAULT_METATAGS } },
+import {
-  };
+  MIXPANEL_PROPS,
-}
+  MIXPANEL_EVENTS,
-
+} from "../../src/core/providers/AnalyticsProvider/constants";
 const assets = {
   background720: `${AWS_ASSETS_PATH}/product-background-720x405.png`,
   background1920: `${AWS_ASSETS_PATH}/product-background-720x405.png`,
   background2880: `${AWS_ASSETS_PATH}/product-background-720x405.png`,
   background3840: `${AWS_ASSETS_PATH}/product-background-720x405.png`,
+  environment: `${AWS_ASSETS_PATH}/product_comic/environment.png`,
+  developers: `${AWS_ASSETS_PATH}/product_comic/developers.png`,
+  meanwhile: `${AWS_ASSETS_PATH}/product_comic/meanwhile.png`,
+  struggle: `${AWS_ASSETS_PATH}/product_comic/struggle.png`,
+  solution: `${AWS_ASSETS_PATH}/product_comic/solution.png`,
 };
 
 const Product = () => {
@@ -125,78 +129,121 @@ const Product = () => {
       bgColor="transparent"
       backgroundImage={`url(${assets[`${background}`]})`}
       bgSize="cover"
-      // boxSize="full"
       minH="100vh"
       direction="column"
       alignItems="center"
       pb={24}
     >
-      <Stack mx={margin} my={12} maxW="1700px" textAlign="justify">
+      <Stack mx={margin} my={[4, 6, 12]} maxW="1700px" textAlign="justify">
-        <Heading
+        <SplitWithImage
-          as="h2"
+          py={["12px", "24px", "48px"]}
-          size="md"
+          title={`Smart contracts are starting to dominate blockchain activity`}
-          placeSelf="center"
+          elementName={"element1"}
-          px={12}
+          colorScheme="blue"
-          py={2}
+          body={`web3 stands for decentralized automation through smart contracts.
-          borderTopRadius="xl"
+          Smart contract developers are building the future of the decentralized web.
-        >
+          `}
-          {`Why you'll love Moonstream`}
+          imgURL={assets["environment"]}
-        </Heading>
+          imgBoxShadow="lg"
-        <chakra.span pl={2} px={12} py={2}>
+        />
-          <Text mb={3}>
+        <SplitWithImage
-            We strive for financial inclusion. With cryptocurrencies becoming
+          mirror
-            mainstream, now is the time for anyone with a computer and access to
+          py={["12px", "24px", "48px"]}
-            the Internet to utilize this opportunity to make passive income.
+          elementName={"element1"}
-            We’re here to make it easier.
+          colorScheme="blue"
-          </Text>
+          title={`But smart contract activity can be opaque`}
-          <Text mb={3}>
+          body={`Even smart contract developers have a difficult time finding out who is using their smart contracts and how.
-            Right now our source of data is Ethereum blockchain. Our goal is to
+          This makes it difficult for them to improve their users’ experience and to secure their decentralized applications.`}
-            provide a live view of the transactions taking place on every public
+          imgURL={assets["developers"]}
-            blockchain - from the activity of specific accounts or smart
+          imgBoxShadow="lg"
-            contracts to updates about general market movements.
+        />
-          </Text>
+        <SplitWithImage
-          <Text mb={3}>
+          elementName={"element1"}
-            This information comes from the blockchains themselves, from their
+          colorScheme="blue"
-            mempools/transaction pools, and from centralized exchanges, social
+          py={["12px", "24px", "48px"]}
-            media, and the news. This forms a stream of information tailored to
+          title={`Blockchain explorers are not enough`}
-            your specific needs.
+          body={`Today, analyzing smart contract activity involves viewing data in or crawling data from blockchain explorers.
-          </Text>
+          The process is tedious and unreliable, and the data is difficult to interpret.
-          <Text mb={3}>
+          `}
-            We’re giving you a macro view of the crypto market with direct
+          imgURL={assets["struggle"]}
-            access from Moonstream dashboards to execute transactions. You can
+          imgBoxShadow="lg"
-            also set up programs which execute (on- or off-chain) when your
+        />
-            stream meets certain conditions.
+        <SplitWithImage
-          </Text>
+          mirror
-          <Text mb={3}>
+          elementName={"element1"}
-            Moonstream is accessible through dashboard, API and webhooks.
+          py={["12px", "24px", "48px"]}
-          </Text>
+          colorScheme="blue"
-          <Text mb={3}>
+          title={`Meanwhile, on Web 2.0`}
-            Moonstream’s financial inclusion goes beyond providing access to
+          body={`Developers on the centralized web have access to tools like Google Analytics and Mixpanel.
-            data. All of our work is open source as we do not believe that
+          They can instantly build dashboards to understand their user journeys and identify any issues that their users may be experiencing.
-            proprietary technologies are financially inclusive.
+          Nothing like this exists for the decentralized web… until now.
-          </Text>
+          `}
-          <Text mb={3}>
+          imgURL={assets["meanwhile"]}
-            You can read{" "}
+          imgBoxShadow="lg"
+        />
+        <SplitWithImage
+          elementName={"element1"}
+          colorScheme="blue"
+          py={["12px", "24px", "48px"]}
+          // badge={`Here to help you`}
+          title={`Meet Moonstream!`}
+          body={`Moonstream brings product analytics to web3.
+          Instantly get analytics for any smart contract you write.
+          We don’t care which EIPs you implement and which ones you don’t, or how custom your code is. Moonstream will immediately start giving you insights into what your users are doing with your contracts.
+          `}
+          imgURL={assets["solution"]}
+          imgBoxShadow="lg"
+        />
+        <Center>
+          <Stack placeContent="center">
+            <Text fontWeight="500" fontSize="24px">
+              To find out more, join us on{" "}
               <Link
-              textColor="orange.900"
+                color="orange.900"
+                onClick={() => {
+                  mixpanel.get_distinct_id() &&
+                    mixpanel.track(`${MIXPANEL_EVENTS.BUTTON_CLICKED}`, {
+                      [`${MIXPANEL_PROPS.BUTTON_NAME}`]: `Join our discord`,
+                    });
+                }}
                 isExternal
-              href="https://github.com/bugout-dev/moonstream"
+                href={"https://discord.gg/K56VNUQGvA"}
               >
-              our code on GitHub.
+                Discord
               </Link>{" "}
-            and keep track of our progress using{" "}
-            <Link
-              textColor="orange.900"
-              isExternal
-              href="https://github.com/bugout-dev/moonstream/milestones"
-            >
-              the Moonstream milestones
-            </Link>
-            .
             </Text>
-        </chakra.span>
+          </Stack>
+        </Center>
       </Stack>
     </Flex>
   );
 };
+
+export async function getStaticProps() {
+  const metaTags = {
+    title: "Moonstream.to: web3 analytics",
+    description:
+      "Moonstream brings product analytics to web3. Instantly get analytics for any smart contract you write.",
+    keywords:
+      "blockchain, crypto, data, trading, smart contracts, ethereum, solana, transactions, defi, finance, decentralized, analytics, product",
+    url: "https://www.moonstream.to/product",
+    image: `${AWS_ASSETS_PATH}/product_comic/solution.png`,
+  };
+
+  const assetPreload = Object.keys(assets).map((key) => {
+    return {
+      rel: "preload",
+      href: assets[key],
+      as: "image",
+    };
+  });
+  const preconnects = [{ rel: "preconnect", href: "https://s3.amazonaws.com" }];
+
+  const preloads = assetPreload.concat(preconnects);
+
+  return {
+    props: { metaTags, preloads },
+  };
+}
+
 export default Product;

frontend/src/components/ConnectedButtons.js

@@ -1,5 +1,13 @@
 import React, { useEffect, useRef, useContext } from "react";
-import { Flex, Heading, Button, Link, SimpleGrid } from "@chakra-ui/react";
+import {
+  Flex,
+  Heading,
+  Button,
+  Link,
+  SimpleGrid,
+  useBreakpointValue,
+  useMediaQuery,
+} from "@chakra-ui/react";
 import Xarrow, { useXarrow } from "react-xarrows";
 import UIContext from "../core/providers/UIProvider/context";
 
@@ -9,6 +17,9 @@ const ArrowCTA = (props) => {
   const box1Ref = useRef(null);
   const box2Ref = useRef(null);
   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();
 
@@ -17,24 +28,65 @@ const ArrowCTA = (props) => {
     // eslint-disable-next-line
   }, [ui.isMobileView]);
 
+  const xarrowEntrySide = useBreakpointValue({
+    base: "top",
+    sm: "left",
+    md: "top",
+    lg: "top",
+    xl: "top",
+    "2xl": "top",
+  });
+
+  const [isLargerThan580px] = useMediaQuery(["(min-width: 580px)"]);
+
+  const buttonWidth = [
+    "190px",
+    isLargerThan580px ? "200px" : "140px",
+    "230px",
+    null,
+    "280px",
+  ];
+
+  const fontSize = [
+    undefined,
+    isLargerThan580px ? undefined : "12px",
+    undefined,
+    null,
+  ];
+
+  const speedConst = -0.05;
+
   return (
     <SimpleGrid
-      columns={[1, 2, 3, null, 3]}
+      columns={props.button4 ? [1, 2, 4, null, 4] : [1, 2, 3, null, 3]}
       spacing={[10, 0, 10, null, 10]}
       placeItems="center"
       w="100%"
       _after={{}}
     >
       <Flex
-        gridColumn={[1, 1, 2, null, 2]}
+        gridColumn={
-        gridRow={[1, 2, 1, null, 1]}
+          props.button4
+            ? [1, 1, `2 / span 2`, null, "2 / span 2"]
+            : [1, 1, 2, null, 2]
+        }
+        // gridColumnStart={props.button4 ? [1, 2] : [0, 1]}
+        // gridColumnEnd={props.button4 ? [1, 4] : [0, 3]}
+        gridRow={
+          props.button4 ? [1, `2 / span 2`, 1, null, 1] : [1, 2, 1, null, 1]
+        }
         // mb={14}
-        w={["180px", "180px", "250px", null, "250px"]}
+        // w={["180px", "180px", "250px", null, "250px"]}
+        w="100%"
         // ml="16px"
         placeSelf="center"
         placeContent="center"
       >
-        <Heading m={0} ref={box0Ref} fontSize={["lg", "lg", "lg", null, "lg"]}>
+        <Heading
+          m={0}
+          ref={box0Ref}
+          fontSize={["lg", isLargerThan580px ? "lg" : "sm", "lg", null, "lg"]}
+        >
           {props.title}
         </Heading>
       </Flex>
@@ -50,8 +102,9 @@ const ArrowCTA = (props) => {
         variant="solid"
         colorScheme="green"
         className="MoonStockSpeciality element1"
-        w={["180px", "180px", "250px", null, "250px"]}
+        w={buttonWidth}
         onClick={props.button1.onClick}
+        fontSize={fontSize}
       >
         {props.button1.label}
       </Button>
@@ -67,7 +120,8 @@ const ArrowCTA = (props) => {
         variant="solid"
         colorScheme="orange"
         className="MoonStockSpeciality element2"
-        w={["180px", "180px", "250px", null, "250px"]}
+        w={buttonWidth}
+        fontSize={fontSize}
         onClick={props.button2.onClick}
       >
         {props.button2.label}
@@ -83,46 +137,82 @@ const ArrowCTA = (props) => {
         boxShadow="md"
         variant="solid"
         colorScheme="blue"
-        w={["180px", "180px", "250px", null, "250px"]}
+        w={buttonWidth}
+        fontSize={fontSize}
         onClick={props.button3.onClick}
       >
         {props.button3.label}
       </Button>
+      {props.button4 && (
+        <Button
+          as={props.button4.link && Link}
+          href={props.button4.link ?? null}
+          gridColumn={[1, 2, 4, null, 4]}
+          gridRow={[5, 4, 2, null, 2]}
+          zIndex={10}
+          ref={box4Ref}
+          boxShadow="md"
+          variant="solid"
+          colorScheme="red"
+          w={buttonWidth}
+          fontSize={fontSize}
+          onClick={props.button4.onClick}
+        >
+          {props.button4.label}
+        </Button>
+      )}
       <Xarrow
         // showXarrow={!!box0Ref.current && !!box1Ref.current}
         dashness={{
           strokeLen: 10,
           nonStrokeLen: 15,
-          animation: -2,
+          animation: speedConst,
         }}
         // animateDrawing={true}
         color="#92D050"
+        startAnchor={xarrowEntrySide ?? "top"}
         showHead={false}
-        start={box0Ref} //can be react ref
+        start={box1Ref} //can be react ref
-        end={box1Ref} //or an id
+        end={box0Ref} //or an id
       />
       <Xarrow
         dashness={{
           strokeLen: 10,
           nonStrokeLen: 15,
-          animation: -1,
+          animation: speedConst * 9,
         }}
         color="#FD5602"
+        startAnchor={xarrowEntrySide ?? "top"}
         showHead={false}
-        start={box0Ref} //can be react ref
+        start={box2Ref} //can be react ref
-        end={box2Ref} //or an id
+        end={box0Ref} //or an id
       />
       <Xarrow
         dashness={{
           strokeLen: 10,
           nonStrokeLen: 15,
-          animation: -4,
+          animation: speedConst * 6,
         }}
         color="#212990"
+        startAnchor={xarrowEntrySide ?? "top"}
         showHead={false}
-        start={box0Ref} //can be react ref
+        start={box3Ref} //can be react ref
-        end={box3Ref} //or an id
+        end={box0Ref} //or an id
       />
+      {props.button4 && (
+        <Xarrow
+          dashness={{
+            strokeLen: 10,
+            nonStrokeLen: 15,
+            animation: speedConst * 3,
+          }}
+          color="#C53030"
+          startAnchor={xarrowEntrySide ?? "top"}
+          showHead={false}
+          start={box4Ref} //can be react ref
+          end={box0Ref} //or an id
+        />
+      )}
     </SimpleGrid>
   );
 };

frontend/src/components/Sidebar.js

@@ -118,6 +118,14 @@ const Sidebar = () => {
             >
               Login
             </MenuItem>
+            <MenuItem>
+              {" "}
+              <RouterLink href="/product">Product </RouterLink>
+            </MenuItem>
+            <MenuItem>
+              {" "}
+              <RouterLink href="/team">Team </RouterLink>
+            </MenuItem>
           </Menu>
         </SidebarContent>
       )}

frontend/src/components/SplitWithImage.js

@@ -68,6 +68,8 @@ const SplitWithImage = ({
   elementName,
   cta,
   socialButton,
+  imgBoxShadow,
+  py,
 }) => {
   var buttonSize = useBreakpointValue({
     base: { single: "sm", double: "xs" },
@@ -94,10 +96,20 @@ const SplitWithImage = ({
     return () => observer.unobserve(current);
   }, []);
 
+  const themeColor = useColorModeValue(
+    `${colorScheme}.50`,
+    `${colorScheme}.900`
+  );
+
+  const bgThemeColor = useColorModeValue(
+    `${colorScheme}.900`,
+    `${colorScheme}.50`
+  );
+
   return (
     <Container
-      maxW={"7xl"}
+      maxW={"100%"}
-      py={0}
+      py={py}
       className={`fade-in-section ${isVisible ? "is-visible" : ""}`}
       ref={domRef}
     >
@@ -109,31 +121,36 @@ const SplitWithImage = ({
               alt={"feature image"}
               src={imgURL}
               objectFit={"contain"}
+              boxShadow={imgBoxShadow ?? "inherit"}
             />
           </Flex>
         )}
-        <Stack spacing={4} justifyContent="center">
+        <Stack spacing={[2, 4]} justifyContent="center">
-          <Stack direction="row">
+          {badge && (
+            <Stack
+              direction="row"
+              placeContent={
+                mirror && !ui.isMobileView ? "flex-end" : "flex-start"
+              }
+            >
               <Text
                 id={`MoonBadge ${elementName}`}
                 // id={`MoonBadge${elementName}`}
                 textTransform={"uppercase"}
-              color={useColorModeValue(
+                color={themeColor}
-                `${colorScheme}.50`,
-                `${colorScheme}.900`
-              )}
                 fontWeight={600}
-              fontSize={"sm"}
+                fontSize={["xs", "sm"]}
-              bg={useColorModeValue(`${colorScheme}.900`, `${colorScheme}.50`)}
+                bg={bgThemeColor}
-              p={2}
+                p={[1, 2]}
-              alignSelf={mirror && !ui.isMobileView ? "flex-end" : "flex-start"}
+                // alignSelf={mirror && !ui.isMobileView ? "flex-end" : "flex-start"}
                 rounded={"md"}
               >
                 {badge}
               </Text>
             </Stack>
-          <Heading>{title}</Heading>
+          )}
-          <Text color={`blue.500`} fontSize={"lg"}>
+          <Heading size="md">{title}</Heading>
+          <Text color={`blue.500`} fontSize={["sm", "md", "lg"]}>
             {body}
           </Text>
           <Stack
@@ -163,6 +180,7 @@ const SplitWithImage = ({
               flexWrap="nowrap"
               display={["column", "column", null, "row"]}
             >
+              {cta && (
                 <Button
                   colorScheme={colorScheme}
                   w={["100%", "100%", "fit-content", null]}
@@ -174,6 +192,7 @@ const SplitWithImage = ({
                 >
                   {cta.label}
                 </Button>
+              )}
 
               {socialButton && (
                 <RouteButton
@@ -184,7 +203,7 @@ const SplitWithImage = ({
                   mt={[0, 0, null, 16]}
                   size={socialButton ? buttonSize.double : buttonSize.single}
                   variant="outline"
-                  colorScheme="blue"
+                  colorScheme={colorScheme}
                   leftIcon={<FaGithubSquare />}
                 >
                   git clone moonstream
@@ -194,12 +213,14 @@ const SplitWithImage = ({
           </Stack>
         </Stack>
         {(!mirror || ui.isMobileView) && (
-          <Flex justifyContent="center">
+          <Flex justifyContent="center" alignItems="center">
             <Image
               rounded={"md"}
               alt={"feature image"}
               src={imgURL}
               objectFit={"contain"}
+              h="fit-content"
+              boxShadow={imgBoxShadow ?? "inherit"}
             />
           </Flex>
         )}

frontend/src/core/hooks/hookCommon.js

@@ -11,3 +11,4 @@ export const queryCacheProps = {
     return status === 404 || status === 403 ? false : true;
   },
 };
+export default queryCacheProps;

frontend/src/layouts/RootLayout.js

@@ -7,7 +7,7 @@ const Navbar = React.lazy(() => import("../components/Navbar"));
 
 const RootLayout = (props) => {
   const ui = useContext(UIContext);
-  const [showBanner, setShowBanner] = useState(true);
+  const [showBanner, setShowBanner] = useState(false);
 
   return (
     <Flex