Merge pull request #312 from bugout-dev/landing-improvements

Landing improvements

frontend/pages/index.js

@@ -1,26 +1,19 @@
-import React, {
+import React, { useState, Suspense, useEffect, useLayoutEffect } from "react";
-  useState,
-  useContext,
-  Suspense,
-  useEffect,
-  useLayoutEffect,
-} from "react";
 import {
   Fade,
   Flex,
   Heading,
   Box,
-  Image as ChakraImage,
-  Button,
   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";
@@ -30,56 +23,15 @@ 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";
-const SplitWithImage = dynamic(
+
-  () => import("../src/components/SplitWithImage"),
-  {
-    ssr: false,
-  }
-);
 const ConnectedButtons = dynamic(
   () => import("../src/components/ConnectedButtons"),
   {
     ssr: false,
   }
 );
-
-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 GiSuspicious = dynamic(() =>
-  import("react-icons/gi").then((mod) => mod.GiSuspicious)
-);
-
-const GiHook = dynamic(() =>
-  import("react-icons/gi").then((mod) => mod.GiHook)
-);
-
-const AiFillApi = dynamic(() =>
-  import("react-icons/ai").then((mod) => mod.AiFillApi)
-);
-
-const BiTransfer = dynamic(() =>
-  import("react-icons/bi").then((mod) => mod.BiTransfer)
-);
-
-const IoTelescopeSharp = dynamic(() =>
-  import("react-icons/io5").then((mod) => mod.IoTelescopeSharp)
-);
-
 const HEADING_PROPS = {
   fontWeight: "700",
   fontSize: ["4xl", "5xl", "4xl", "5xl", "6xl", "7xl"],
@@ -94,12 +46,11 @@ const assets = {
   pendingTransactions: `${AWS_ASSETS_PATH}/Ethereum+pending+transactions.png`,
   priceInformation: `${AWS_ASSETS_PATH}/Price+information.png`,
   socialMediaPosts: `${AWS_ASSETS_PATH}/Social+media+posts.png`,
-  algorithmicFunds: `${AWS_ASSETS_PATH}/algorithmic+funds.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);
   const [background, setBackground] = useState("background720");
   const [backgroundLoaded720, setBackgroundLoaded720] = useState(false);
   const [backgroundLoaded1920, setBackgroundLoaded1920] = useState(false);
@@ -254,7 +205,7 @@ const Homepage = () => {
                           fontWeight="semibold"
                           color="white"
                         >
-                          All the crypto data you care about in a single stream
+                          Open source blockchain analytics
                         </Heading>
                         <chakra.span
                           my={12}
@@ -262,17 +213,9 @@ const Homepage = () => {
                           display="inline-block"
                           color="blue.200"
                         >
-                          Get all the crypto data you need in a single stream.
+                          Product analytics for Web3. Moonstream helps you
-                          From pending transactions in the Ethereum transaction
+                          understand exactly how people are using your smart
-                          pool to Elon Musk’s latest tweets.
+                          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>
@@ -280,16 +223,8 @@ const Homepage = () => {
                 </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"
@@ -298,13 +233,17 @@ const Homepage = () => {
                 >
                   <Text
                     mb={18}
-                    // mb={[12, 12, 12, null, 48]}
                     fontSize={["md", "2xl", "3xl", "3xl", "3xl", "4xl"]}
                   >
-                    {` We believe in financial inclusion. Proprietary technologies
+                    We believe that the blockchain is for everyone. This
-                    are not financially inclusive. That's why all our software
+                    requires complete <b>transparency</b>. That’s why all our
-                    is `}
+                    software is{" "}
-                    <chakra.span display="inline-block" textColor="orange.900">
+                    <chakra.span
+                      display="inline-block"
+                      textColor="orange.900"
+                      as={Link}
+                      href="https://github.com/bugout-dev/moonstream"
+                    >
                       <i>open source</i>
                     </chakra.span>
                   </Text>
@@ -313,10 +252,10 @@ const Homepage = () => {
                 <Heading
                   {...HEADING_PROPS}
                   textAlign="center"
-                  mt={16}
+                  mt={48}
-                  pb={[12, 12, 12, null, 48]}
+                  pb={[12, 12, 12, null, 24]}
                 >
-                  Data you can add to your stream:
+                  See how your smart contracts are being used from:
                 </Heading>
                 <SimpleGrid columns={[1, 2, 2, 4, null, 4]}>
                   <Stack spacing={1} px={1} alignItems="center">
@@ -369,193 +308,53 @@ 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>
               </GridItem>
-              <GridItem
-                px="7%"
-                colSpan="12"
-                pt={["1rem", "1rem", "5.125rem", null, "5.125rem"]}
-                pb={["0", "66px", null, "66px"]}
-                id="cryptoTrader"
-                minH={ui.isMobileView ? "100vh" : null}
-              >
-                <SplitWithImage
-                  cta={{
-                    label: "I want early access!",
-                    onClick: () => {
-                      mixpanel.get_distinct_id() &&
-                        mixpanel.track(`${MIXPANEL_EVENTS.BUTTON_CLICKED}`, {
-                          [`${MIXPANEL_PROPS.BUTTON_NAME}`]: `Early access CTA: Crypto trader`,
-                        });
-                      toggleModal("hubspot-trader");
-                    },
-                  }}
-                  elementName={"element1"}
-                  colorScheme="green"
-                  badge={`For crypto traders`}
-                  title={``}
-                  body={``}
-                  bullets={[
-                    {
-                      text: `Subscribe to the defi contracts you care about`,
-                      icon: FaFileContract,
-                      color: "green.50",
-                      bgColor: "green.900",
-                    },
-                    {
-                      text: `Make sense of how others are calling these contracts using Moonstream dashboards.
-                      `,
-                      icon: RiDashboardFill,
-                      color: "green.50",
-                      bgColor: "green.900",
-                    },
-                    {
-                      text: `Get data directly from the transaction pool through our global network of Ethereum nodes`,
-                      icon: GiMeshBall,
-                      color: "green.50",
-                      bgColor: "green.900",
-                    },
-                  ]}
-                  imgURL={assets["cryptoTraders"]}
-                />
-              </GridItem>
-              <GridItem
-                px="7%"
-                colSpan="12"
-                pt={["1rem", "1rem", "5.125rem", null, "5.125rem"]}
-                pb={["0", "66px", null, "66px"]}
-                id="algoFund"
-                minH={ui.isMobileView ? "100vh" : null}
-              >
-                <SplitWithImage
-                  cta={{
-                    label: "I want early access!",
-                    onClick: () => {
-                      mixpanel.get_distinct_id() &&
-                        mixpanel.track(`${MIXPANEL_EVENTS.BUTTON_CLICKED}`, {
-                          [`${MIXPANEL_PROPS.BUTTON_NAME}`]: `Early access CTA: Algo fund`,
-                        });
-                      toggleModal("hubspot-fund");
-                    },
-                  }}
-                  elementName={"element2"}
-                  mirror={true}
-                  colorScheme="orange"
-                  badge={`For algorithmic funds`}
-                  bullets={[
-                    {
-                      text: `Get API access to your stream`,
-                      icon: AiFillApi,
-                      color: "orange.50",
-                      bgColor: "orange.900",
-                    },
-                    {
-                      text: `Set conditions that trigger predefined actions`,
-                      icon: GiLogicGateXor,
-                      color: "orange.50",
-                      bgColor: "orange.900",
-                    },
-                    {
-                      text: `Execute transactions directly on Moonstream nodes`,
-                      icon: BiTransfer,
-                      color: "orange.50",
-                      bgColor: "orange.900",
-                    },
-                  ]}
-                  imgURL={assets["algorithmicFunds"]}
-                />
-              </GridItem>
-              <GridItem
-                px="7%"
-                colSpan="12"
-                pt={["1rem", "1rem", "5.125rem", null, "5.125rem"]}
-                pb={["0", "66px", null, "66px"]}
-                id="smartDeveloper"
-                minH={ui.isMobileView ? "100vh" : null}
-              >
-                <SplitWithImage
-                  cta={{
-                    label: "I want early access!",
-                    onClick: () => {
-                      mixpanel.get_distinct_id() &&
-                        mixpanel.track(`${MIXPANEL_EVENTS.BUTTON_CLICKED}`, {
-                          [`${MIXPANEL_PROPS.BUTTON_NAME}`]: `Early access CTA: developer`,
-                        });
-                      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="blue"
-                  badge={`For smart contract developers`}
-                  bullets={[
-                    {
-                      text: `See how people use your smart contracts`,
-                      icon: IoTelescopeSharp,
-                      color: "blue.50",
-                      bgColor: "blue.900",
-                    },
-                    {
-                      text: `Set up alerts on suspicious activity`,
-                      icon: GiSuspicious,
-                      color: "blue.50",
-                      bgColor: "blue.900",
-                    },
-                    {
-                      text: `Register webhooks to connect your off-chain infrastructure`,
-                      icon: GiHook,
-                      color: "blue.50",
-                      bgColor: "blue.900",
-                    },
-                  ]}
-                  imgURL={assets["smartDevelopers"]}
-                />
-              </GridItem>
               <GridItem
                 placeItems="center"
                 w="100%"
@@ -564,24 +363,43 @@ const Homepage = () => {
                 pb="120px"
               >
                 <Center>
-                  <Button
+                  <Stack placeContent="center">
-                    as={Link}
+                    <Text fontWeight="500" fontSize="24px">
-                    isExternal
+                      Want to find out more? Reach out to us on{" "}
-                    href={"https://discord.gg/K56VNUQGvA"}
+                      <Link
-                    size="lg"
+                        color="orange.900"
-                    variant="solid"
-                    colorScheme="green"
-                    id="test"
                         onClick={() => {
                           mixpanel.get_distinct_id() &&
-                        mixpanel.track(`${MIXPANEL_EVENTS.BUTTON_CLICKED}`, {
+                            mixpanel.track(
+                              `${MIXPANEL_EVENTS.BUTTON_CLICKED}`,
+                              {
                                 [`${MIXPANEL_PROPS.BUTTON_NAME}`]: `Join our discord`,
-                        });
+                              }
-                      toggleModal("hubspot");
+                            );
+                        }}
+                        isExternal
+                        href={"https://discord.gg/K56VNUQGvA"}
+                      >
+                        Discord
+                      </Link>{" "}
+                      or{" "}
+                      <Link
+                        color="orange.900"
+                        onClick={() => {
+                          mixpanel.get_distinct_id() &&
+                            mixpanel.track(
+                              `${MIXPANEL_EVENTS.BUTTON_CLICKED}`,
+                              {
+                                [`${MIXPANEL_PROPS.BUTTON_NAME}`]: `Early access CTA: developer want to find more button`,
+                              }
+                            );
+                          toggleModal("hubspot-developer");
                         }}
                       >
-                    Join our discord
+                        request early access
-                  </Button>
+                      </Link>
+                    </Text>
+                  </Stack>
                 </Center>
               </GridItem>
             </Grid>

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 = () => {
@@ -131,72 +135,115 @@ const Product = () => {
       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"]}
+          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/pages/welcome.js

@@ -8,8 +8,6 @@ import {
   Stack,
   ButtonGroup,
   Spacer,
-  Radio,
-  RadioGroup,
   UnorderedList,
   ListItem,
   Fade,
@@ -28,7 +26,6 @@ import {
 import StepProgress from "../src/components/StepProgress";
 import { ArrowLeftIcon, ArrowRightIcon } from "@chakra-ui/icons";
 import Scrollable from "../src/components/Scrollable";
-import AnalyticsContext from "../src/core/providers/AnalyticsProvider/context";
 import NewSubscription from "../src/components/NewSubscription";
 import StreamEntry from "../src/components/StreamEntry";
 import SubscriptionsList from "../src/components/SubscriptionsList";
@@ -39,8 +36,6 @@ import { FaFilter } from "react-icons/fa";
 const Welcome = () => {
   const { subscriptionsCache } = useSubscriptions();
   const ui = useContext(UIContext);
-  const { mixpanel, isLoaded, MIXPANEL_PROPS } = useContext(AnalyticsContext);
-  const [profile, setProfile] = React.useState();
   const [showSubscriptionForm, setShowSubscriptionForm] = useBoolean(true);
 
   useEffect(() => {
@@ -53,14 +48,6 @@ const Welcome = () => {
     ui.setOnboardingStep(index);
   };
 
-  useEffect(() => {
-    if (profile && isLoaded) {
-      mixpanel.people.set({
-        [`${MIXPANEL_PROPS.USER_SPECIALITY}`]: profile,
-      });
-    }
-  }, [profile, MIXPANEL_PROPS, isLoaded, mixpanel]);
-
   const SubscriptonCreatedCallback = () => {
     setShowSubscriptionForm.off();
   };
@@ -250,48 +237,6 @@ const Welcome = () => {
                   </AccordionItem>
                 </Accordion>
               </Stack>
-
-              <Stack
-                px={12}
-                // mt={24}
-                bgColor="gray.50"
-                borderRadius="xl"
-                boxShadow="xl"
-                py={4}
-              >
-                <Heading as="h4" size="md">
-                  Tell us more about your needs
-                </Heading>
-                <Text fontWeight="semibold" pl={2}>
-                  In order to create the best possible experience, we would love
-                  to find out some more about you.
-                </Text>
-                <Text fontWeight="semibold" pl={2}>
-                  Please tell us what profile describes you best.{" "}
-                  <i>
-                    This is purely analytical data, you can change it anytime
-                    later.
-                  </i>
-                </Text>
-                <RadioGroup
-                  position="relative"
-                  onChange={setProfile}
-                  value={profile}
-                  // fontWeight="bold"
-                  colorScheme="orange"
-                  // py={0}
-                  // my={0}
-                >
-                  <Stack
-                    direction={["column", "row", null]}
-                    justifyContent="space-evenly"
-                  >
-                    <Radio value="trader">I am trading crypto currency</Radio>
-                    <Radio value="fund">I represent investment fund</Radio>
-                    <Radio value="developer">I am developer</Radio>
-                  </Stack>
-                </RadioGroup>
-              </Stack>
             </Stack>
           </Fade>
         )}

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,34 @@ 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"}
                 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 +178,7 @@ const SplitWithImage = ({
               flexWrap="nowrap"
               display={["column", "column", null, "row"]}
             >
+              {cta && (
                 <Button
                   colorScheme={colorScheme}
                   w={["100%", "100%", "fit-content", null]}
@@ -174,6 +190,7 @@ const SplitWithImage = ({
                 >
                   {cta.label}
                 </Button>
+              )}
 
               {socialButton && (
                 <RouteButton
@@ -184,7 +201,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 +211,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