kopia lustrzana https://github.com/bugout-dev/moonstream
Landing content and component update
Tim Pechersky
rodzic
ca0f858eab
commit
fe57b4f336
|
|
@ -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 (
|
||||
<Stack
|
||||
direction={"column"}
|
||||
spacing={9}
|
||||
mx="7%"
|
||||
overscrollBehaviorY={"contain"}
|
||||
>
|
||||
<SplitWithImage
|
||||
key={"SplitWithImage-3"}
|
||||
cta={{
|
||||
colorScheme: "orange",
|
||||
onClick: () => {
|
||||
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"]}
|
||||
/>
|
||||
<SplitWithImage
|
||||
key={"SplitWithImage-2"}
|
||||
socialButton={{
|
||||
url: "https://discord.gg/K56VNUQGvA",
|
||||
title: "Contact us on discord",
|
||||
icon: "discord",
|
||||
}}
|
||||
elementName={"element3"}
|
||||
colorScheme="orange"
|
||||
badge={`Moonstream engine`}
|
||||
bullets={[
|
||||
{
|
||||
text: `Deploy customizable and upgradable characters, items, and currencies into your economy`,
|
||||
icon: GiCrossedChains,
|
||||
color: "orange.50",
|
||||
bgColor: "orange.900",
|
||||
},
|
||||
{
|
||||
text: `Monitor interactions between these tokens`,
|
||||
icon: GiChainedHeart,
|
||||
color: "orange.50",
|
||||
bgColor: "orange.900",
|
||||
},
|
||||
{
|
||||
text: `Secure the tokens with Moonstream defense bots.`,
|
||||
icon: GiChaingun,
|
||||
color: "orange.50",
|
||||
bgColor: "orange.900",
|
||||
},
|
||||
]}
|
||||
imgURL={assets["lender"]}
|
||||
/>
|
||||
<SplitWithImage
|
||||
key={"SplitWithImage-1"}
|
||||
mirror
|
||||
socialButton={{
|
||||
url: "https://discord.gg/K56VNUQGvA",
|
||||
title: "Contact us on discord",
|
||||
icon: "discord",
|
||||
}}
|
||||
elementName={"element3"}
|
||||
colorScheme="red"
|
||||
badge={`Moonstream Loyalty`}
|
||||
bullets={[
|
||||
{
|
||||
text: `Track the most active participants in your economy and easily give them rewards for their engagement.`,
|
||||
icon: VscOrganization,
|
||||
color: "red.50",
|
||||
bgColor: "red.900",
|
||||
},
|
||||
{
|
||||
text: `Create and distribute whitelist tokens for your pre-sales. Make them tradeable on markets like OpenSea.`,
|
||||
icon: GiMedallist,
|
||||
color: "red.50",
|
||||
bgColor: "red.900",
|
||||
},
|
||||
{
|
||||
text: `Manage KYC information about your community.`,
|
||||
icon: CgUserlane,
|
||||
color: "red.50",
|
||||
bgColor: "red.900",
|
||||
},
|
||||
]}
|
||||
imgURL={assets["DAO"]}
|
||||
/>
|
||||
<SplitWithImage
|
||||
key={"SplitWithImage-0"}
|
||||
socialButton={{
|
||||
url: "https://discord.gg/K56VNUQGvA",
|
||||
title: "Contact us on discord",
|
||||
icon: "discord",
|
||||
}}
|
||||
elementName={"element3"}
|
||||
colorScheme="green"
|
||||
badge={`Moonstream security`}
|
||||
bullets={[
|
||||
{
|
||||
text: `Moonstream smart contracts have been vetted in production with over $1B in value transacted.`,
|
||||
icon: MdOutlineVerifiedUser,
|
||||
color: "green.50",
|
||||
bgColor: "green.900",
|
||||
},
|
||||
{
|
||||
text: `Moonstream scanners constantly monitor accounts and transactions in your economy and identify threats in seconds.`,
|
||||
icon: GiRadarCrossSection,
|
||||
color: "green.50",
|
||||
bgColor: "green.900",
|
||||
},
|
||||
{
|
||||
text: `One-click deploy defense bots which counter attacks as soon as they are detected.`,
|
||||
icon: GiRobotGolem,
|
||||
color: "green.50",
|
||||
bgColor: "green.900",
|
||||
},
|
||||
]}
|
||||
imgURL={assets["smartDevelopers"]}
|
||||
/>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
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;
|
||||
|
|
@ -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 (
|
||||
<GridItem>
|
||||
<Stack
|
||||
transition={"1s"}
|
||||
spacing={1}
|
||||
px={1}
|
||||
alignItems="center"
|
||||
borderRadius="12px"
|
||||
borderColor="blue.700"
|
||||
bgColor={"blue.800"}
|
||||
borderWidth={"1px"}
|
||||
// minW="250px"
|
||||
_hover={{ transform: "scale(1.05)", transition: "0.42s" }}
|
||||
cursor="pointer"
|
||||
// mt={2}
|
||||
m={[2, 3, null, 4, 8, 12]}
|
||||
pb={2}
|
||||
>
|
||||
<ChakraImage
|
||||
boxSize={["100px", "100px", "xs", null, "xs"]}
|
||||
boxSize={["220px", "220px", "xs", null, "xs"]}
|
||||
objectFit="contain"
|
||||
src={image}
|
||||
alt={altText}
|
||||
/>
|
||||
<chakra.span
|
||||
my={12}
|
||||
fontSize={["md", "2xl", "3xl", "3xl", "3xl", "4xl"]}
|
||||
display="inline-block"
|
||||
color="white"
|
||||
>
|
||||
<Heading textAlign="center" fontSize={["md", "md", "lg", "3xl", "4xl"]}>
|
||||
{heading}
|
||||
</Heading>
|
||||
<chakra.span textAlign={"center"} textColor="blue.600" px={2}>
|
||||
{description}
|
||||
</chakra.span>
|
||||
</GridItem>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
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 (
|
||||
<Suspense fallback="">
|
||||
<Fade in>
|
||||
|
|
@ -302,7 +246,7 @@ const Homepage = () => {
|
|||
</Heading>
|
||||
<chakra.span
|
||||
my={12}
|
||||
fontSize={["md", "2xl", "3xl", "3xl", "3xl", "4xl"]}
|
||||
fontSize={["md", "2xl", "3xl", "3xl", "4xl", "5xl"]}
|
||||
display="inline-block"
|
||||
color="blue.200"
|
||||
>
|
||||
|
|
@ -311,7 +255,7 @@ const Homepage = () => {
|
|||
</chakra.span>
|
||||
<chakra.span
|
||||
my={12}
|
||||
fontSize={["md", "2xl", "3xl", "3xl", "3xl", "4xl"]}
|
||||
fontSize={["md", "2xl", "3xl", "3xl", "4xl", "5xl"]}
|
||||
display="inline-block"
|
||||
color="blue.200"
|
||||
>
|
||||
|
|
@ -332,47 +276,7 @@ const Homepage = () => {
|
|||
py={0}
|
||||
overflowX="hidden"
|
||||
overflowY="visible"
|
||||
>
|
||||
{/* <Slider
|
||||
{...settings}
|
||||
// adaptiveHeight={true}
|
||||
arrows={false}
|
||||
autoplay={true}
|
||||
autoplaySpeed={100}
|
||||
>
|
||||
{carousel_content.map((content_item, idx) => (
|
||||
<Box
|
||||
pt="80px"
|
||||
h="auto"
|
||||
w="150px"
|
||||
maxW="150px"
|
||||
// size="150px"
|
||||
key={uuidv4()}
|
||||
className={
|
||||
idx === imageIndex
|
||||
? "slide activeSlide"
|
||||
: "slide"
|
||||
}
|
||||
// bgColor="blue.900"
|
||||
// borderRadius="lg"
|
||||
// boxShadow="lg"
|
||||
>
|
||||
<ChakraImage
|
||||
fit="contain"
|
||||
boxSize={["64px", "96px", "130px", null]}
|
||||
src={content_item.img}
|
||||
/>
|
||||
<Text
|
||||
py={2}
|
||||
color="blue.300"
|
||||
fontSize={["sm", "md", null]}
|
||||
>
|
||||
{content_item.title}
|
||||
</Text>
|
||||
</Box>
|
||||
))}
|
||||
</Slider> */}
|
||||
</Box>
|
||||
></Box>
|
||||
</Stack>
|
||||
</Flex>
|
||||
</Box>
|
||||
|
|
@ -426,281 +330,106 @@ const Homepage = () => {
|
|||
</Flex>
|
||||
</GridItem>
|
||||
<GridItem
|
||||
px="7%"
|
||||
px={["7%", null, "12%", "15%"]}
|
||||
colSpan="12"
|
||||
pt={0}
|
||||
pt={24}
|
||||
minH="100vh"
|
||||
bgColor={"blue.900"}
|
||||
textColor="white"
|
||||
>
|
||||
<Box as={Container} maxW="7xl" mt={14} p={4}>
|
||||
<Grid
|
||||
templateColumns={{
|
||||
base: "repeat(1, 1fr)",
|
||||
sm: "repeat(2, 1fr)",
|
||||
md: "repeat(2, 1fr)",
|
||||
}}
|
||||
gap={4}>
|
||||
<GridItem>
|
||||
<VStack alignItems="flex-start" spacing="20px">
|
||||
<Heading
|
||||
{...HEADING_PROPS}
|
||||
textAlign="center"
|
||||
pb={14}
|
||||
pt={0}
|
||||
>
|
||||
Dive into Engine Features
|
||||
</Heading>
|
||||
<Button
|
||||
colorScheme="orange"
|
||||
size="md"
|
||||
textColor="blue.900"
|
||||
>
|
||||
<a
|
||||
href="https://docs.google.com/document/d/1mjfF8SgRrAZvtCVVxB2qNSUcbbmrH6dTEYSMfHKdEgc/preview"
|
||||
my={12}
|
||||
fontSize={["md", "2xl", "3xl", "3xl", "3xl", "4xl"]}
|
||||
display="inline-block"
|
||||
color="blue.200"
|
||||
>
|
||||
Call To Action
|
||||
</a>
|
||||
</Button>
|
||||
</VStack>
|
||||
</GridItem>
|
||||
<GridItem>
|
||||
<Flex>
|
||||
<chakra.span
|
||||
my={12}
|
||||
fontSize={["md", "2xl", "3xl", "3xl", "3xl", "4xl"]}
|
||||
display="inline-block"
|
||||
color="blue.200"
|
||||
>
|
||||
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.
|
||||
</chakra.span>
|
||||
</Flex>
|
||||
</GridItem>
|
||||
</Grid>
|
||||
<Divider mt={12} mb={12} />
|
||||
<Grid
|
||||
templateColumns={{
|
||||
base: "repeat(1, 1fr)",
|
||||
sm: "repeat(2, 1fr)",
|
||||
md: "repeat(4, 1fr)",
|
||||
}}
|
||||
gap={{ base: "8", sm: "12", md: "16" }}
|
||||
>
|
||||
<Feature
|
||||
image={assets["cryptoTraders"]}
|
||||
altText="mined transactions"
|
||||
heading="ON-CHAIN MECHANICS"
|
||||
/>
|
||||
<Feature
|
||||
image={assets["NFT"]}
|
||||
altText="mined transactions"
|
||||
heading="LOYALTY PROGRAMS"
|
||||
/>
|
||||
<Feature
|
||||
image={assets["lender"]}
|
||||
altText="mined transactions"
|
||||
heading="SECURE TRANSACTIONS"
|
||||
/>
|
||||
<Feature
|
||||
image={assets["DAO"]}
|
||||
altText="mined transactions"
|
||||
heading="CONTENT MANAGEMENT"
|
||||
/>
|
||||
</Grid>
|
||||
</Box>
|
||||
</GridItem>
|
||||
|
||||
{/* <GridItem
|
||||
px="7%"
|
||||
colSpan="12"
|
||||
pt={0}
|
||||
minH="100vh"
|
||||
bgColor={"blue.1200"}
|
||||
>
|
||||
<Heading
|
||||
{...HEADING_PROPS}
|
||||
textAlign="center"
|
||||
textColor="white"
|
||||
mt={[12, 14, 16]}
|
||||
pb={[12, 12, 12, null, 24]}
|
||||
<Grid
|
||||
templateColumns={{
|
||||
base: "repeat(1, 1fr)",
|
||||
sm: "repeat(1, 1fr)",
|
||||
md: "repeat(2, 1fr)",
|
||||
}}
|
||||
gap={4}
|
||||
>
|
||||
Dive into Engine Features
|
||||
</Heading>
|
||||
<chakra.span textAlign={"center"} textColor="white" px={2}>
|
||||
Get the full picture of your economy with automated
|
||||
customizable dashboards.
|
||||
</chakra.span>
|
||||
<SimpleGrid
|
||||
columns={[1, 2, 2, 5, null, 5]}
|
||||
justifyContent="center"
|
||||
>
|
||||
<Link href="#more_about_analytics" shallow scroll>
|
||||
<Stack
|
||||
transition={"1s"}
|
||||
spacing={1}
|
||||
px={1}
|
||||
alignItems="center"
|
||||
borderRadius="12px"
|
||||
borderColor="gray.100"
|
||||
bgColor={"blue.700"}
|
||||
borderWidth={"1px"}
|
||||
_hover={{ transform: "scale(1.05)", transition: "0.42s" }}
|
||||
cursor="pointer"
|
||||
m={2}
|
||||
pb={2}
|
||||
<GridItem>
|
||||
<VStack
|
||||
alignItems="flex-start"
|
||||
spacing="20px"
|
||||
mb={[12, 12, "initial"]}
|
||||
>
|
||||
<ChakraImage
|
||||
boxSize={["220px", "220px", "xs", null, "xs"]}
|
||||
objectFit="contain"
|
||||
src={assets["cryptoTraders"]}
|
||||
alt="mined transactions"
|
||||
/>
|
||||
<Heading textAlign="center ">Analytics</Heading>
|
||||
<chakra.span
|
||||
textAlign={"center"}
|
||||
textColor="blue.600"
|
||||
px={2}
|
||||
<Heading
|
||||
{...HEADING_PROPS}
|
||||
textAlign={["center", "center", "left"]}
|
||||
alignSelf={["center", "center", "initial"]}
|
||||
pb={14}
|
||||
pt={0}
|
||||
>
|
||||
Get the full picture of your economy with automated
|
||||
customizable dashboards.
|
||||
</chakra.span>
|
||||
</Stack>
|
||||
</Link>
|
||||
<Link href="#more_about_markets" shallow scroll>
|
||||
<Stack
|
||||
transition={"1s"}
|
||||
spacing={1}
|
||||
px={1}
|
||||
alignItems="center"
|
||||
borderRadius="12px"
|
||||
borderColor="gray.100"
|
||||
borderWidth={"1px"}
|
||||
_hover={{ transform: "scale(1.05)", transition: "0.42s" }}
|
||||
m={2}
|
||||
pb={2}
|
||||
>
|
||||
<ChakraImage
|
||||
boxSize={["220px", "220px", "xs", null, "xs"]}
|
||||
objectFit="contain"
|
||||
src={assets["NFT"]}
|
||||
alt="mined transactions"
|
||||
/>
|
||||
<Heading textAlign="center ">Markets</Heading>
|
||||
<chakra.span
|
||||
textAlign={"center"}
|
||||
textColor="blue.600"
|
||||
px={2}
|
||||
>
|
||||
Create goods and resources for your economy. Set up
|
||||
fully customizable storefronts for these items.
|
||||
</chakra.span>
|
||||
</Stack>
|
||||
</Link>
|
||||
<Link href="#more_about_bridges" shallow scroll>
|
||||
<Stack
|
||||
transition={"1s"}
|
||||
spacing={1}
|
||||
px={1}
|
||||
alignItems="center"
|
||||
borderRadius="12px"
|
||||
borderColor="gray.100"
|
||||
borderWidth={"1px"}
|
||||
_hover={{ transform: "scale(1.05)", transition: "0.42s" }}
|
||||
m={2}
|
||||
pb={2}
|
||||
>
|
||||
<ChakraImage
|
||||
boxSize={["220px", "220px", "xs", null, "xs"]}
|
||||
objectFit="contain"
|
||||
src={assets["lender"]}
|
||||
alt="engine"
|
||||
/>
|
||||
<Heading textAlign="center ">Engine</Heading>
|
||||
<chakra.span
|
||||
textAlign={"center"}
|
||||
textColor="blue.600"
|
||||
px={2}
|
||||
>
|
||||
Create and manage tokens with custom mechanics specific
|
||||
to your project.
|
||||
</chakra.span>
|
||||
</Stack>
|
||||
</Link>
|
||||
<Link href="#more_about_loyalty" shallow scroll>
|
||||
<Stack
|
||||
transition={"1s"}
|
||||
spacing={1}
|
||||
px={1}
|
||||
alignItems="center"
|
||||
borderRadius="12px"
|
||||
borderColor="gray.100"
|
||||
borderWidth={"1px"}
|
||||
_hover={{ transform: "scale(1.05)", transition: "0.42s" }}
|
||||
m={2}
|
||||
pb={2}
|
||||
>
|
||||
<ChakraImage
|
||||
boxSize={["220px", "220px", "xs", null, "xs"]}
|
||||
objectFit="contain"
|
||||
src={assets["DAO"]}
|
||||
alt="mined transactions"
|
||||
/>
|
||||
<Heading textAlign="center ">{`Loyalty`}</Heading>
|
||||
<chakra.span
|
||||
textAlign={"center"}
|
||||
textColor="blue.600"
|
||||
px={2}
|
||||
>
|
||||
Reward the most active participants in your economy with
|
||||
loyalty programs and token sale whitelists.
|
||||
</chakra.span>
|
||||
</Stack>
|
||||
</Link>
|
||||
<GridItem colSpan={[1, 2, 2, 1, null, 1]}>
|
||||
<Link href="#more_about_security" shallow scroll>
|
||||
<Stack
|
||||
transition={"1s"}
|
||||
spacing={1}
|
||||
px={1}
|
||||
alignItems="center"
|
||||
borderRadius="12px"
|
||||
borderColor="gray.100"
|
||||
borderWidth={"1px"}
|
||||
_hover={{
|
||||
transform: "scale(1.05)",
|
||||
transition: "0.42s",
|
||||
Dive into Engine Features
|
||||
</Heading>
|
||||
<RouteButton
|
||||
colorScheme="orange"
|
||||
fontSize={["md", "lg", "lg", "xl", "3xl"]}
|
||||
py={[4, 4, 4, 8, 8]}
|
||||
px={[4, 4, 4, 8, 8]}
|
||||
onClick={() => {
|
||||
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"
|
||||
>
|
||||
<ChakraImage
|
||||
boxSize={["220px", "220px", "xs", null, "xs"]}
|
||||
objectFit="contain"
|
||||
src={assets["smartDevelopers"]}
|
||||
alt="mined transactions"
|
||||
/>
|
||||
<Heading textAlign="center ">{`Security`}</Heading>
|
||||
<chakra.span
|
||||
textAlign={"center"}
|
||||
textColor="blue.600"
|
||||
px={2}
|
||||
>
|
||||
Secure your economy against bad actors. Detect attacks
|
||||
on your economy and defend against them.
|
||||
</chakra.span>
|
||||
</Stack>
|
||||
</Link>
|
||||
Explore case studies
|
||||
</RouteButton>
|
||||
</VStack>
|
||||
</GridItem>
|
||||
<GridItem>
|
||||
<Flex>
|
||||
<chakra.span
|
||||
fontSize={["md", "2xl", "3xl", "3xl", "3xl", "4xl"]}
|
||||
display="inline-block"
|
||||
color="blue.200"
|
||||
>
|
||||
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.
|
||||
</chakra.span>
|
||||
</Flex>
|
||||
</GridItem>
|
||||
</Grid>
|
||||
<Divider mt={12} mb={12} />
|
||||
<SimpleGrid
|
||||
columns={[1, 2, 2, 4, null, 4]}
|
||||
justifyContent="center"
|
||||
w="100%"
|
||||
placeContent={"space-between"}
|
||||
>
|
||||
<Feature
|
||||
image={assets["cryptoTraders"]}
|
||||
altText="mined transactions"
|
||||
heading="ON-CHAIN MECHANICS"
|
||||
/>
|
||||
<Feature
|
||||
image={assets["NFT"]}
|
||||
altText="mined transactions"
|
||||
heading="LOYALTY PROGRAMS"
|
||||
/>
|
||||
<Feature
|
||||
image={assets["lender"]}
|
||||
altText="mined transactions"
|
||||
heading="SECURE TRANSACTIONS"
|
||||
/>
|
||||
<Feature
|
||||
image={assets["DAO"]}
|
||||
altText="mined transactions"
|
||||
heading="CONTENT MANAGEMENT"
|
||||
/>
|
||||
</SimpleGrid>
|
||||
</GridItem> */}
|
||||
|
||||
</GridItem>
|
||||
<GridItem
|
||||
px="7%"
|
||||
// mt={["32px", "64px", null]}
|
||||
|
|
@ -752,20 +481,19 @@ const Homepage = () => {
|
|||
</Flex>
|
||||
</GridItem>
|
||||
<GridItem
|
||||
px="7%"
|
||||
// mt={["32px", "64px", null]}
|
||||
px={["7%", null, "12%", "15%"]}
|
||||
py={["98px", "128px", null]}
|
||||
colSpan="12"
|
||||
bgColor="blue.700"
|
||||
textColor="white"
|
||||
>
|
||||
<Flex
|
||||
// bg={useColorModeValue("#F9FAFB", "gray.600")}
|
||||
p={50}
|
||||
w="full"
|
||||
w="100%"
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
direction={"row"}
|
||||
direction={["column", "column", "row"]}
|
||||
maxW="1024px"
|
||||
>
|
||||
<chakra.h2
|
||||
mr={[0, 12, 14]}
|
||||
|
|
@ -784,65 +512,35 @@ const Homepage = () => {
|
|||
{`Contact us on Discord to discuss your project and keep up with the latest updates on the Moonstream Engine.`}
|
||||
</chakra.span>
|
||||
</chakra.h2>
|
||||
<Box
|
||||
// bg={useColorModeValue("gray.50", "gray.800")}
|
||||
|
||||
<RouteButton
|
||||
minW={["300px", "300px", "460px"]}
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
border="solid transparent"
|
||||
fontWeight="bold"
|
||||
rounded="md"
|
||||
shadow="md"
|
||||
variant="solid"
|
||||
colorScheme="orange"
|
||||
textColor="blue.1200"
|
||||
fontSize={["md", "md", "lg", "xl", "3xl"]}
|
||||
py={[4, 6, 6, 8, 8]}
|
||||
px={[4, 4, 4, 8, 8]}
|
||||
onClick={() => {
|
||||
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"}
|
||||
>
|
||||
<Box
|
||||
maxW="7xl"
|
||||
w="min-content"
|
||||
mx="auto"
|
||||
py={{ base: 12, lg: 16 }}
|
||||
px={{ base: 4, lg: 8 }}
|
||||
display={{ lg: "flex" }}
|
||||
alignItems={{ lg: "center" }}
|
||||
justifyContent={{ lg: "space-between" }}
|
||||
>
|
||||
<Stack
|
||||
direction={{ base: "column", sm: "column" }}
|
||||
mt={{ base: 8, lg: 0 }}
|
||||
shrink={{ lg: 0 }}
|
||||
>
|
||||
<div></div>
|
||||
{/* <Button
|
||||
// mt={3}
|
||||
placeSelf="center"
|
||||
w={["100%", "100%", "fit-content", null]}
|
||||
maxW={["280px", null, "fit-content"]}
|
||||
size="lg"
|
||||
>
|
||||
Sign up
|
||||
</Button> */}
|
||||
<RouteButton
|
||||
w={"280px"}
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
border="solid transparent"
|
||||
fontWeight="bold"
|
||||
rounded="md"
|
||||
shadow="md"
|
||||
variant="solid"
|
||||
colorScheme="orange"
|
||||
textColor="blue.1200"
|
||||
onClick={() => {
|
||||
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
|
||||
</RouteButton>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Box>
|
||||
Join the community on Discord
|
||||
</RouteButton>
|
||||
</Flex>
|
||||
</GridItem>
|
||||
</Grid>
|
||||
|
|
|
|||
|
|
@ -100,10 +100,7 @@ const Footer = () => (
|
|||
>
|
||||
<FaGithub />
|
||||
</SocialButton>
|
||||
<SocialButton
|
||||
label={"Discord"}
|
||||
href={"https://discord.gg/K56VNUQGvA"}
|
||||
>
|
||||
<SocialButton label={"Discord"} href={"/discordleed"}>
|
||||
<FaDiscord />
|
||||
</SocialButton>
|
||||
</Stack>
|
||||
|
|
|
|||
|
|
@ -62,7 +62,7 @@ const Feature = ({ text, icon, iconBg, bullets }) => {
|
|||
);
|
||||
};
|
||||
|
||||
const SplitWithImage = ({
|
||||
const _SplitWithImage = ({
|
||||
badge,
|
||||
title,
|
||||
body,
|
||||
|
|
@ -259,5 +259,6 @@ const SplitWithImage = ({
|
|||
</Container>
|
||||
);
|
||||
};
|
||||
const SplitWithImage = chakra(_SplitWithImage);
|
||||
|
||||
export default chakra(SplitWithImage);
|
||||
export default SplitWithImage;
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue