diff --git a/frontend/pages/index.js b/frontend/pages/index.js index 46a117f4..2b93bdfa 100644 --- a/frontend/pages/index.js +++ b/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. - {/* - Access this data through the Moonstream dashboard or - API - */} - + { > We believe that the blockchain is for everyone. This @@ -334,7 +346,7 @@ const Homepage = () => { Social media posts - {/*
+
Moonstream is meant for you if @@ -343,49 +355,59 @@ const Homepage = () => { w="100%" direction={["column", "row", "column", null, "column"]} flexWrap={["nowrap", "nowrap", "nowrap", null, "nowrap"]} - pb="66px" + pb="32px" > { 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", - link: "/#algoFund", + label: "Exchange price stream", + 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`, }); }, }} /> - */} + - {/* { 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`} - title={``} - body={``} + badge={`Transaction pool data`} + title={`Get real-time access to transaction pool`} + 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"]} /> - */} - {/* + { 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"]} /> - */} + { 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`, - icon: IoTelescopeSharp, + text: `Use our AI to get semantics and find patterns`, + 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"]} + /> + + + { + 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"]} /> { [`${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"); diff --git a/frontend/pages/product/index.js b/frontend/pages/product/index.js index fa03ba4a..4df1e1ac 100644 --- a/frontend/pages/product/index.js +++ b/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"; -export async function getStaticProps() { - return { - props: { metaTags: { ...DEFAULT_METATAGS } }, - }; -} - +import { AWS_ASSETS_PATH } from "../../src/core/constants"; +import SplitWithImage from "../../src/components/SplitWithImage"; +import mixpanel from "mixpanel-browser"; +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} > - - - {`Why you'll love Moonstream`} - - - - We strive for financial inclusion. With cryptocurrencies becoming - mainstream, now is the time for anyone with a computer and access to - the Internet to utilize this opportunity to make passive income. - We’re here to make it easier. - - - Right now our source of data is Ethereum blockchain. Our goal is to - provide a live view of the transactions taking place on every public - blockchain - from the activity of specific accounts or smart - contracts to updates about general market movements. - - - This information comes from the blockchains themselves, from their - mempools/transaction pools, and from centralized exchanges, social - media, and the news. This forms a stream of information tailored to - your specific needs. - - - We’re giving you a macro view of the crypto market with direct - access from Moonstream dashboards to execute transactions. You can - also set up programs which execute (on- or off-chain) when your - stream meets certain conditions. - - - Moonstream is accessible through dashboard, API and webhooks. - - - Moonstream’s financial inclusion goes beyond providing access to - data. All of our work is open source as we do not believe that - proprietary technologies are financially inclusive. - - - You can read{" "} - - our code on GitHub. - {" "} - and keep track of our progress using{" "} - - the Moonstream milestones - - . - - + + + + + + +
+ + + To find out more, join us on{" "} + { + mixpanel.get_distinct_id() && + mixpanel.track(`${MIXPANEL_EVENTS.BUTTON_CLICKED}`, { + [`${MIXPANEL_PROPS.BUTTON_NAME}`]: `Join our discord`, + }); + }} + isExternal + href={"https://discord.gg/K56VNUQGvA"} + > + Discord + {" "} + + +
); }; + +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; diff --git a/frontend/src/components/ConnectedButtons.js b/frontend/src/components/ConnectedButtons.js index 990f1cc1..f04897d5 100644 --- a/frontend/src/components/ConnectedButtons.js +++ b/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 ( - + {props.title} @@ -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} @@ -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} + {props.button4 && ( + + )} + {props.button4 && ( + + )} ); }; diff --git a/frontend/src/components/Sidebar.js b/frontend/src/components/Sidebar.js index 36a1b48e..908c64e4 100644 --- a/frontend/src/components/Sidebar.js +++ b/frontend/src/components/Sidebar.js @@ -118,6 +118,14 @@ const Sidebar = () => { > Login + + {" "} + Product + + + {" "} + Team + )} diff --git a/frontend/src/components/SplitWithImage.js b/frontend/src/components/SplitWithImage.js index 5220d052..9fec3a1b 100644 --- a/frontend/src/components/SplitWithImage.js +++ b/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 ( @@ -109,31 +121,36 @@ const SplitWithImage = ({ alt={"feature image"} src={imgURL} objectFit={"contain"} + boxShadow={imgBoxShadow ?? "inherit"} /> )} - - - + {badge && ( + - {badge} - - - {title} - + + {badge} + + + )} + {title} + {body} - + {cta && ( + + )} {socialButton && ( } > git clone moonstream @@ -194,12 +213,14 @@ const SplitWithImage = ({ {(!mirror || ui.isMobileView) && ( - + {"feature )} diff --git a/frontend/src/core/hooks/hookCommon.js b/frontend/src/core/hooks/hookCommon.js index a3aeef16..72f85a30 100644 --- a/frontend/src/core/hooks/hookCommon.js +++ b/frontend/src/core/hooks/hookCommon.js @@ -11,3 +11,4 @@ export const queryCacheProps = { return status === 404 || status === 403 ? false : true; }, }; +export default queryCacheProps; diff --git a/frontend/src/layouts/RootLayout.js b/frontend/src/layouts/RootLayout.js index cd66abe9..d7afd5c9 100644 --- a/frontend/src/layouts/RootLayout.js +++ b/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 (