mirror
/
moonstream
kopia lustrzana https://github.com/bugout-dev/moonstream
1
0
Forkuj 0
Kod Zgłoszenia Projekty Wydania Wiki Aktywność

Landing content and component update

pull/595/head
Tim Pechersky 2022-04-28 19:05:13 +01:00
rodzic ca0f858eab
commit fe57b4f336
5 zmienionych plików z 166 dodań i 762 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

272
frontend/pages/features/index.js
Wyświetl plik

@ -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;

466
frontend/pages/index.js
Wyświetl plik

@ -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,72 +330,83 @@ 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)",
sm: "repeat(1, 1fr)",
md: "repeat(2, 1fr)",
}}
gap={4}>
gap={4}
>
<GridItem>
<VStack alignItems="flex-start" spacing="20px">
<VStack
alignItems="flex-start"
spacing="20px"
mb={[12, 12, "initial"]}
>
<Heading
{...HEADING_PROPS}
textAlign="center"
textAlign={["center", "center", "left"]}
alignSelf={["center", "center", "initial"]}
pb={14}
pt={0}
>
Dive into Engine Features
</Heading>
<Button
<RouteButton
colorScheme="orange"
size="md"
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`,
}
);
}
}}
textColor="blue.900"
>
<a
alignSelf={["center", "center", "initial"]}
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>
Explore case studies
</RouteButton>
</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.
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" }}
<SimpleGrid
columns={[1, 2, 2, 4, null, 4]}
justifyContent="center"
w="100%"
placeContent={"space-between"}
>
<Feature
image={assets["cryptoTraders"]}
@ -513,194 +428,8 @@ const Homepage = () => {
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]}
>
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}
>
<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}
>
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",
}}
m={2}
pb={2}
>
<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>
</GridItem>
</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,36 +512,9 @@ 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")}
>
<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"}
minW={["300px", "300px", "460px"]}
alignItems="center"
justifyContent="center"
border="solid transparent"
@ -823,26 +524,23 @@ const Homepage = () => {
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}`,
{
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"}
href={"/discordleed"}
>
Join the community on Discord
</RouteButton>
</Stack>
</Box>
</Box>
</Flex>
</GridItem>
</Grid>

5
frontend/src/components/Footer.js
Wyświetl plik

@ -100,10 +100,7 @@ const Footer = () => (
>
<FaGithub />
</SocialButton>
<SocialButton
label={"Discord"}
href={"https://discord.gg/K56VNUQGvA"}
>
<SocialButton label={"Discord"} href={"/discordleed"}>
<FaDiscord />
</SocialButton>
</Stack>

5
frontend/src/components/SplitWithImage.js
Wyświetl plik

@ -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;

48
frontend/src/core/constants.js
Wyświetl plik

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