From fe57b4f336b8268b75282c9c3110de88dcd0f279 Mon Sep 17 00:00:00 2001 From: Tim Pechersky Date: Thu, 28 Apr 2022 19:05:13 +0100 Subject: [PATCH] Landing content and component update --- frontend/pages/features/index.js | 272 ---------- frontend/pages/index.js | 598 ++++++---------------- frontend/src/components/Footer.js | 5 +- frontend/src/components/SplitWithImage.js | 5 +- frontend/src/core/constants.js | 48 +- 5 files changed, 166 insertions(+), 762 deletions(-) delete mode 100644 frontend/pages/features/index.js diff --git a/frontend/pages/features/index.js b/frontend/pages/features/index.js deleted file mode 100644 index a76ada4b..00000000 --- a/frontend/pages/features/index.js +++ /dev/null @@ -1,272 +0,0 @@ -import React, { useEffect, useState, useLayoutEffect } from "react"; -import dynamic from "next/dynamic"; -import { getLayout } from "../../src/layouts/WideInfoPage"; -import { - Text, - Flex, - Stack, - useMediaQuery, - useBreakpointValue, - Center, -} from "@chakra-ui/react"; -import { AWS_ASSETS_PATH } from "../../src/core/constants"; -import mixpanel from "mixpanel-browser"; -import Link from "next/link"; -import { - MIXPANEL_PROPS, - MIXPANEL_EVENTS, -} from "../../src/core/providers/AnalyticsProvider/constants"; -import { useRouter } from "../../src/core/hooks"; -import SplitWithImage from "../../src/components/SplitWithImage"; -import RouteButton from "../../src/components/RouteButton"; - -const FaStoreAlt = dynamic(() => - import("react-icons/fa").then((mod) => mod.FaStoreAlt) -); - -const GiRiver = dynamic(() => - import("react-icons/gi").then((mod) => mod.GiRiver) -); - -const GiCrossedChains = dynamic(() => - import("react-icons/gi").then((mod) => mod.GiCrossedChains) -); - -const GiChainedHeart = dynamic(() => - import("react-icons/gi").then((mod) => mod.GiChainedHeart) -); - -const MdOutlineVerifiedUser = dynamic(() => - import("react-icons/md").then((mod) => mod.MdOutlineVerifiedUser) -); - -const GiRadarCrossSection = dynamic(() => - import("react-icons/gi").then((mod) => mod.GiRadarCrossSection) -); - -const GiMedallist = dynamic(() => - import("react-icons/gi").then((mod) => mod.GiMedallist) -); - -const GiRobotGolem = dynamic(() => - import("react-icons/gi").then((mod) => mod.GiRobotGolem) -); - -const CgUserlane = dynamic(() => - import("react-icons/cg").then((mod) => mod.CgUserlane) -); - -const GiChaingun = dynamic(() => - import("react-icons/gi").then((mod) => mod.GiChaingun) -); - -const GiQuickSlash = dynamic(() => - import("react-icons/gi").then((mod) => mod.GiQuickSlash) -); - -const GiConcentrationOrb = dynamic(() => - import("react-icons/gi").then((mod) => mod.GiConcentrationOrb) -); - -const GiTakeMyMoney = dynamic(() => - import("react-icons/gi").then((mod) => mod.GiTakeMyMoney) -); - -const FaGithubSquare = dynamic(() => - import("react-icons/fa").then((mod) => mod.FaGithubSquare) -); -const GiMeshBall = dynamic(() => - import("react-icons/gi").then((mod) => mod.GiMeshBall) -); - -const VscOrganization = dynamic(() => - import("react-icons/vsc").then((mod) => mod.VscOrganization) -); - -const assets = { - cryptoTraders: `${AWS_ASSETS_PATH}/crypto+traders.png`, - lender: `${AWS_ASSETS_PATH}/lender.png`, - DAO: `${AWS_ASSETS_PATH}/DAO .png`, - NFT: `${AWS_ASSETS_PATH}/NFT.png`, - smartDevelopers: `${AWS_ASSETS_PATH}/smart+contract+developers.png`, -}; - -const Product = () => { - const router = useRouter(); - - return ( - - { - router.push("/whitepapers"); - }, - label: "NFT market report", - }} - socialButton={{ - url: "https://discord.gg/K56VNUQGvA", - title: "Contact us on discord", - icon: "discord", - }} - elementName={"element1"} - colorScheme="green" - badge={`Moonstream analytics`} - bullets={[ - { - text: `See how value flows into and out of every component of your economy.`, - icon: GiRiver, - color: "green.50", - bgColor: "green.900", - }, - { - text: `Track inflation or deflation of your currencies.`, - icon: GiTakeMyMoney, - color: "green.50", - bgColor: "green.900", - }, - { - text: `Track the concentration of wealth in your economy.`, - icon: GiConcentrationOrb, - color: "green.50", - bgColor: "green.900", - }, - ]} - imgURL={assets["cryptoTraders"]} - /> - - - - - ); -}; - -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 }, - }; -} -Product.layoutProps = { mxDesktop: "12%" }; -Product.getLayout = getLayout; -export default Product; diff --git a/frontend/pages/index.js b/frontend/pages/index.js index 5482af41..0caec769 100644 --- a/frontend/pages/index.js +++ b/frontend/pages/index.js @@ -1,16 +1,9 @@ -import React, { - useState, - useContext, - Suspense, - useEffect, - useLayoutEffect, -} from "react"; +import React, { useState, Suspense, useEffect, useLayoutEffect } from "react"; import { Fade, Flex, Heading, Box, - Container, Divider, chakra, Stack, @@ -19,36 +12,17 @@ import { Grid, Text, GridItem, - Button, + SimpleGrid, Image as ChakraImage, } from "@chakra-ui/react"; -import dynamic from "next/dynamic"; -import Link from "next/dist/client/link"; import useUser from "../src/core/hooks/useUser"; -import useModals from "../src/core/hooks/useModals"; import useRouter from "../src/core/hooks/useRouter"; import { AWS_ASSETS_PATH, DEFAULT_METATAGS } from "../src/core/constants"; -import UIContext from "../src/core/providers/UIProvider/context"; import TrustedBadge from "../src/components/TrustedBadge"; import RouteButton from "../src/components/RouteButton"; -import { MODAL_TYPES } from "../src/core/providers/OverlayProvider/constants"; import mixpanel from "mixpanel-browser"; import { MIXPANEL_EVENTS } from "../src/core/providers/AnalyticsProvider/constants"; -const SplitWithImage = dynamic( - () => import("../src/components/SplitWithImage"), - { - ssr: false, - } -); -const FaDiscord = dynamic(() => - import("react-icons/fa").then((mod) => mod.FaDiscord) -); - -const FaGithubSquare = dynamic(() => - import("react-icons/fa").then((mod) => mod.FaGithubSquare) -); - const HEADING_PROPS = { fontWeight: "700", fontSize: ["4xl", "5xl", "5xl", "5xl", "6xl", "7xl"], @@ -59,21 +33,12 @@ const assets = { background1920: `${AWS_ASSETS_PATH}/background720.png`, background2880: `${AWS_ASSETS_PATH}/background720.png`, background3840: `${AWS_ASSETS_PATH}/background720.png`, - minedTransactions: `${AWS_ASSETS_PATH}/Ethereum+mined+transactions.png`, - pendingTransactions: `${AWS_ASSETS_PATH}/Ethereum+pending+transactions.png`, - priceInformation: `${AWS_ASSETS_PATH}/Price+information.png`, - socialMediaPosts: `${AWS_ASSETS_PATH}/Social+media+posts.png`, cryptoTraders: `${AWS_ASSETS_PATH}/crypto+traders.png`, - smartDevelopers: `${AWS_ASSETS_PATH}/smart+contract+developers.png`, cointelegraph: `${AWS_ASSETS_PATH}/featured_by/Cointelegraph_logo.png`, forte: `${AWS_ASSETS_PATH}/featured_by/forte_logo.png`, educativesessions: `${AWS_ASSETS_PATH}/featured_by/educative_logo.png`, cryptoinsiders: `${AWS_ASSETS_PATH}/featured_by/crypto_insiders.png`, cryptoslate: `${AWS_ASSETS_PATH}/featured_by/cs-media-logo-light.png`, - bitcoinLogo: `${AWS_ASSETS_PATH}/bitcoin.png`, - ethereumBlackLogo: `${AWS_ASSETS_PATH}/eth-diamond-black.png`, - ethereumRainbowLogo: `${AWS_ASSETS_PATH}/eth-diamond-rainbow.png`, - maticLogo: `${AWS_ASSETS_PATH}/matic-token-inverted-icon.png`, lender: `${AWS_ASSETS_PATH}/lender.png`, DAO: `${AWS_ASSETS_PATH}/DAO .png`, NFT: `${AWS_ASSETS_PATH}/NFT.png`, @@ -82,53 +47,51 @@ const assets = { game7io: `${AWS_ASSETS_PATH}/featured_by/game7io_logo.png`, orangedao: `${AWS_ASSETS_PATH}/featured_by/orangedao_logo.png`, meetup: `${AWS_ASSETS_PATH}/featured_by/meetup_logo.png`, - gnosis: `${AWS_ASSETS_PATH}/gnosis_chain_logo_no_text.png`, - immutable: `${AWS_ASSETS_PATH}/immutable_x_logo.png`, }; -const carousel_content = [ - { title: "Bitcoin coming soon!", img: assets["bitcoinLogo"] }, - { title: "Ethereum", img: assets["ethereumBlackLogo"] }, - { title: "Ethereum transaction pool", img: assets["ethereumRainbowLogo"] }, - { title: "Polygon", img: assets["maticLogo"] }, - { title: "immutable x coming soon!", img: assets["immutable"] }, - { title: "gnosis chain coming soon!", img: assets["gnosis"] }, -]; - -const Feature = ({ image, altText, heading }) => { +const Feature = ({ image, altText, heading, description }) => { return ( - + - + {heading} + + + {description} - + ); }; const Homepage = () => { - const ui = useContext(UIContext); const [background, setBackground] = useState("background720"); const [backgroundLoaded720, setBackgroundLoaded720] = useState(false); const [backgroundLoaded1920, setBackgroundLoaded1920] = useState(false); const [backgroundLoaded2880, setBackgroundLoaded2880] = useState(false); const [backgroundLoaded3840, setBackgroundLoaded3840] = useState(false); - const [imageIndex, setImageIndex] = useState(0); - const router = useRouter(); const { isInit } = useUser(); - const { toggleModal } = useModals(); const [ isLargerThan720px, isLargerThan1920px, @@ -217,25 +180,6 @@ const Homepage = () => { setBackgroundLoaded3840(true); }; }, []); - - const settings = { - infinite: true, - lazyLoad: true, - speed: 2000, - autoplay: true, - autoplaySpeed: 0, - // cssEase: "linear", - cssEase: "cubic-bezier(0.165, 0.840, 0.440, 1.000)", - // cssEase: "ease-in", - slidesToScroll: 1, - slidesToShow: ui.isMobileView ? 3 : 5, - centerMode: true, - centerPadding: 0, - // nextArrow: "", - // prevArrow: "", - beforeChange: (current, next) => setImageIndex(next), - }; - return ( @@ -302,7 +246,7 @@ const Homepage = () => { @@ -311,7 +255,7 @@ const Homepage = () => { @@ -332,47 +276,7 @@ const Homepage = () => { py={0} overflowX="hidden" overflowY="visible" - > - {/* - {carousel_content.map((content_item, idx) => ( - - - - {content_item.title} - - - ))} - */} - + > @@ -426,281 +330,106 @@ const Homepage = () => { - - - - - - Dive into Engine Features - - - - - - - - Lootboxes, crafting, deck builder, you name it! - Whatever on-chain mechanics you want incorporated in - your project, contact us to help you launch it. It is - fast and secure. Or explore the features to know more. - - - - - - - - - - - - - - - {/* - - Dive into Engine Features - - - Get the full picture of your economy with automated - customizable dashboards. - - - - + - - Analytics - - Get the full picture of your economy with automated - customizable dashboards. - - - - - - - Markets - - Create goods and resources for your economy. Set up - fully customizable storefronts for these items. - - - - - - - Engine - - Create and manage tokens with custom mechanics specific - to your project. - - - - - - - {`Loyalty`} - - Reward the most active participants in your economy with - loyalty programs and token sale whitelists. - - - - - - + { + if (mixpanel.get_distinct_id()) { + mixpanel.track( + `${MIXPANEL_EVENTS.BUTTON_CLICKED}`, + { + full_url: router.nextRouter.asPath, + buttonName: `Explore case studies`, + page: `landing`, + section: `Dive into Engine Features`, + } + ); + } }} - m={2} - pb={2} + textColor="blue.900" + alignSelf={["center", "center", "initial"]} + href="https://docs.google.com/document/d/1mjfF8SgRrAZvtCVVxB2qNSUcbbmrH6dTEYSMfHKdEgc/preview" > - - {`Security`} - - Secure your economy against bad actors. Detect attacks - on your economy and defend against them. - - - + Explore case studies + + + + + + Lootboxes, crafting, deck builder, you name it! Whatever + on-chain mechanics you want incorporated in your + project, contact us to help you launch it. It is fast + and secure. Or explore the features to know more. + + + + + + + + + + - */} - + { { {`Contact us on Discord to discuss your project and keep up with the latest updates on the Moonstream Engine.`} - { + if (mixpanel.get_distinct_id()) { + mixpanel.track(`${MIXPANEL_EVENTS.BUTTON_CLICKED}`, { + full_url: router.nextRouter.asPath, + buttonName: `Join our Discord`, + page: `landing`, + section: `bottom-line`, + }); + } + }} + href={"/discordleed"} > - - -
- {/* */} - { - if (mixpanel.get_distinct_id()) { - mixpanel.track( - `${MIXPANEL_EVENTS.BUTTON_CLICKED}`, - { - full_url: router.nextRouter.asPath, - buttonName: `Join our Discord`, - page: `landing`, - section: `bottom-line`, - } - ); - } - }} - href={"https://discord.gg/K56VNUQGvA"} - > - Join the community on Discord - - - - + Join the community on Discord + diff --git a/frontend/src/components/Footer.js b/frontend/src/components/Footer.js index 760a58d6..2aed7578 100644 --- a/frontend/src/components/Footer.js +++ b/frontend/src/components/Footer.js @@ -100,10 +100,7 @@ const Footer = () => ( > - + diff --git a/frontend/src/components/SplitWithImage.js b/frontend/src/components/SplitWithImage.js index 51385cc8..8bb2d745 100644 --- a/frontend/src/components/SplitWithImage.js +++ b/frontend/src/components/SplitWithImage.js @@ -62,7 +62,7 @@ const Feature = ({ text, icon, iconBg, bullets }) => { ); }; -const SplitWithImage = ({ +const _SplitWithImage = ({ badge, title, body, @@ -259,5 +259,6 @@ const SplitWithImage = ({ ); }; +const SplitWithImage = chakra(_SplitWithImage); -export default chakra(SplitWithImage); +export default SplitWithImage; diff --git a/frontend/src/core/constants.js b/frontend/src/core/constants.js index ddd7adca..449bbc1f 100644 --- a/frontend/src/core/constants.js +++ b/frontend/src/core/constants.js @@ -36,29 +36,24 @@ export const PAGETYPE = { export const SITEMAP = [ { - title: "Features", - path: "/features", + title: "Resources", + path: "/resources", type: PAGETYPE.EMPTY, children: [ { - title: "On-chain mechanics", - path: "/features/#engine", + title: "Case studies", + path: "https://docs.google.com/document/d/1mjfF8SgRrAZvtCVVxB2qNSUcbbmrH6dTEYSMfHKdEgc", + type: PAGETYPE.EXTERNAL, + }, + { + title: "Whitepapers", + path: "/whitepapers", type: PAGETYPE.CONTENT, }, { - title: "Loyalty programs", - path: "/features/#loyalty", - type: PAGETYPE.CONTENT, - }, - { - title: "Secure transactions", - path: "/features/#security", - type: PAGETYPE.CONTENT, - }, - { - title: "Content management", - path: "/features/#cms", - type: PAGETYPE.CONTENT, + title: "Blog", + path: "https://blog.moonstream.to", + type: PAGETYPE.EXTERNAL, }, ], }, @@ -66,6 +61,7 @@ export const SITEMAP = [ title: "Developers", path: "/developers", type: PAGETYPE.EMPTY, + children: [ { title: "Docs", @@ -79,23 +75,7 @@ export const SITEMAP = [ }, ], }, - { - title: "Resources", - path: "/resources", - type: PAGETYPE.EMPTY, - children: [ - { - title: "whitepapers", - path: "/whitepapers", - type: PAGETYPE.CONTENT, - }, - { - title: "blog", - path: "https://blog.moonstream.to", - type: PAGETYPE.EXTERNAL, - }, - ], - }, + { title: "About", path: "/about",