kopia lustrzana https://github.com/bugout-dev/moonstream
product page improvements
Tim Pechersky
rodzic
08355abb69
commit
89cfb15ffa
|
|
@ -1,6 +1,6 @@
|
|||
import React, {
|
||||
useState,
|
||||
useContext,
|
||||
// useContext,
|
||||
Suspense,
|
||||
useEffect,
|
||||
useLayoutEffect,
|
||||
|
|
@ -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,27 +29,55 @@ 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";
|
||||
const SplitWithImage = dynamic(
|
||||
() => import("../src/components/SplitWithImage"),
|
||||
// import UIContext from "../src/core/providers/UIProvider/context";
|
||||
// const SplitWithImage = dynamic(
|
||||
// () => import("../src/components/SplitWithImage"),
|
||||
// {
|
||||
// ssr: false,
|
||||
// }
|
||||
// );
|
||||
// const GiSuspicious = dynamic(() =>
|
||||
// import("react-icons/gi").then((mod) => mod.GiSuspicious)
|
||||
// );
|
||||
|
||||
// const GiHook = dynamic(() =>
|
||||
// import("react-icons/gi").then((mod) => mod.GiHook)
|
||||
// );
|
||||
|
||||
// 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 GiSuspicious = dynamic(() =>
|
||||
import("react-icons/gi").then((mod) => mod.GiSuspicious)
|
||||
);
|
||||
|
||||
const GiHook = dynamic(() =>
|
||||
import("react-icons/gi").then((mod) => mod.GiHook)
|
||||
);
|
||||
|
||||
const IoTelescopeSharp = dynamic(() =>
|
||||
import("react-icons/io5").then((mod) => mod.IoTelescopeSharp)
|
||||
);
|
||||
|
||||
const HEADING_PROPS = {
|
||||
fontWeight: "700",
|
||||
fontSize: ["4xl", "5xl", "4xl", "5xl", "6xl", "7xl"],
|
||||
|
|
@ -66,9 +94,10 @@ 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);
|
||||
// const ui = useContext(UIContext);
|
||||
const [background, setBackground] = useState("background720");
|
||||
const [backgroundLoaded720, setBackgroundLoaded720] = useState(false);
|
||||
const [backgroundLoaded1920, setBackgroundLoaded1920] = useState(false);
|
||||
|
|
@ -334,7 +363,7 @@ const Homepage = () => {
|
|||
<Heading textAlign="center ">Social media posts</Heading>
|
||||
</Stack>
|
||||
</SimpleGrid>
|
||||
{/* <Center>
|
||||
<Center>
|
||||
<Heading pt="160px" pb="60px">
|
||||
Moonstream is meant for you if
|
||||
</Heading>
|
||||
|
|
@ -343,49 +372,59 @@ const Homepage = () => {
|
|||
w="100%"
|
||||
direction={["column", "row", "column", null, "column"]}
|
||||
flexWrap={["nowrap", "nowrap", "nowrap", null, "nowrap"]}
|
||||
pb="66px"
|
||||
pb="32px"
|
||||
>
|
||||
<ConnectedButtons
|
||||
title={"You are..."}
|
||||
button1={{
|
||||
label: "Crypto trader",
|
||||
link: "/#cryptoTrader",
|
||||
title={"You need a fusion of..."}
|
||||
button4={{
|
||||
label: "Blockchain analytics",
|
||||
link: "/#analytics",
|
||||
onClick: () => {
|
||||
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`,
|
||||
});
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Flex> */}
|
||||
</Flex>
|
||||
</GridItem>
|
||||
{/* <GridItem
|
||||
px="7%"
|
||||
colSpan="12"
|
||||
pt={["1rem", "1rem", "5.125rem", null, "5.125rem"]}
|
||||
pb={["0", "66px", null, "66px"]}
|
||||
id="cryptoTrader"
|
||||
id="txpool"
|
||||
minH={ui.isMobileView ? "100vh" : null}
|
||||
>
|
||||
<SplitWithImage
|
||||
|
|
@ -394,16 +433,18 @@ const Homepage = () => {
|
|||
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 +453,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"]}
|
||||
/>
|
||||
</GridItem> */}
|
||||
{/* <GridItem
|
||||
</GridItem>
|
||||
<GridItem
|
||||
px="7%"
|
||||
colSpan="12"
|
||||
pt={["1rem", "1rem", "5.125rem", null, "5.125rem"]}
|
||||
pb={["0", "66px", null, "66px"]}
|
||||
id="algoFund"
|
||||
id="exchanges"
|
||||
minH={ui.isMobileView ? "100vh" : null}
|
||||
>
|
||||
<SplitWithImage
|
||||
|
|
@ -442,15 +483,15 @@ const Homepage = () => {
|
|||
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`}
|
||||
bullets={[
|
||||
{
|
||||
text: `Get API access to your stream`,
|
||||
|
|
@ -471,9 +512,9 @@ const Homepage = () => {
|
|||
bgColor: "orange.900",
|
||||
},
|
||||
]}
|
||||
imgURL={assets["algorithmicFunds"]}
|
||||
imgURL={assets["priceInformation"]}
|
||||
/>
|
||||
</GridItem> */}
|
||||
</GridItem>
|
||||
<GridItem
|
||||
px="7%"
|
||||
colSpan="12"
|
||||
|
|
@ -488,7 +529,7 @@ const Homepage = () => {
|
|||
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,30 +547,87 @@ const Homepage = () => {
|
|||
}}
|
||||
elementName={"element3"}
|
||||
colorScheme="blue"
|
||||
badge={`For smart contract developers`}
|
||||
badge={`Know your people`}
|
||||
bullets={[
|
||||
{
|
||||
text: `Monitor blockchain data in real time`,
|
||||
text: `Subscribe to social media tags and people`,
|
||||
icon: IoTelescopeSharp,
|
||||
color: "blue.50",
|
||||
bgColor: "blue.900",
|
||||
},
|
||||
{
|
||||
text: `Set up alerts on suspicious activity`,
|
||||
text: `Automatically process content with our semantics AI analysis`,
|
||||
icon: GiSuspicious,
|
||||
color: "blue.50",
|
||||
bgColor: "blue.900",
|
||||
},
|
||||
{
|
||||
text: `Register webhooks to connect your off-chain infrastructure`,
|
||||
text: `Register webhooks to connect your infrastructure`,
|
||||
icon: GiHook,
|
||||
color: "blue.50",
|
||||
bgColor: "blue.900",
|
||||
},
|
||||
]}
|
||||
imgURL={assets["cryptoTraders"]}
|
||||
imgURL={assets["socialMediaPosts"]}
|
||||
/>
|
||||
</GridItem>
|
||||
<GridItem
|
||||
px="7%"
|
||||
colSpan="12"
|
||||
pt={["1rem", "1rem", "1.125rem", null, "5.125rem"]}
|
||||
pb={["0", "66px", null, "66px"]}
|
||||
id="analytics"
|
||||
minH={ui.isMobileView ? "100vh" : null}
|
||||
>
|
||||
<SplitWithImage
|
||||
mirror
|
||||
cta={{
|
||||
label: "Want to find out more?",
|
||||
onClick: () => {
|
||||
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"]}
|
||||
/>
|
||||
</GridItem> */}
|
||||
<GridItem
|
||||
placeItems="center"
|
||||
w="100%"
|
||||
|
|
@ -551,7 +649,6 @@ const Homepage = () => {
|
|||
[`${MIXPANEL_PROPS.BUTTON_NAME}`]: `Join our discord`,
|
||||
}
|
||||
);
|
||||
toggleModal("hubspot");
|
||||
}}
|
||||
isExternal
|
||||
href={"https://discord.gg/K56VNUQGvA"}
|
||||
|
|
@ -566,7 +663,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");
|
||||
|
|
@ -578,17 +675,6 @@ const Homepage = () => {
|
|||
</Stack>
|
||||
</Center>
|
||||
</GridItem>
|
||||
<GridItem
|
||||
placeItems="center"
|
||||
w="100%"
|
||||
colSpan="12"
|
||||
pt={["0", "0", "5.125rem", null, "5.125rem"]}
|
||||
pb="120px"
|
||||
>
|
||||
<Center>
|
||||
<ChakraImage src={assets["comicWhite"]}></ChakraImage>
|
||||
</Center>
|
||||
</GridItem>
|
||||
</Grid>
|
||||
</Flex>
|
||||
</Box>
|
||||
|
|
@ -625,3 +711,52 @@ export async function getStaticProps() {
|
|||
}
|
||||
|
||||
export default Homepage;
|
||||
|
||||
// <chakra.span pl={2} px={12} py={2}>
|
||||
// <Text mb={3}></Text>
|
||||
// <Text mb={3}>
|
||||
// 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.
|
||||
// </Text>
|
||||
// <Text mb={3}>
|
||||
// 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.
|
||||
// </Text>
|
||||
// <Text mb={3}>
|
||||
// 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.
|
||||
// </Text>
|
||||
// <Text mb={3}>
|
||||
// Moonstream is accessible through dashboard, API and webhooks.
|
||||
// </Text>
|
||||
// <Text mb={3}>
|
||||
// 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.
|
||||
// </Text>
|
||||
// <Text mb={3}>
|
||||
// You can read{" "}
|
||||
// <Link
|
||||
// textColor="orange.900"
|
||||
// isExternal
|
||||
// href="https://github.com/bugout-dev/moonstream"
|
||||
// >
|
||||
// our code on GitHub.
|
||||
// </Link>{" "}
|
||||
// and keep track of our progress using{" "}
|
||||
// <Link
|
||||
// textColor="orange.900"
|
||||
// isExternal
|
||||
// href="https://github.com/bugout-dev/moonstream/milestones"
|
||||
// >
|
||||
// the Moonstream milestones
|
||||
// </Link>
|
||||
// .
|
||||
// </Text>
|
||||
// </chakra.span>
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue