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",