kopia lustrzana https://github.com/bugout-dev/moonstream
Autoscroll to hash works correctly. Link to discord on features page (non-mobile).
Kellan Wampler
rodzic
5b9332ff84
commit
fe56b95f3d
|
|
@ -1,8 +1,12 @@
|
|||
import React, { useRef, useEffect } from "react";
|
||||
import React from "react";
|
||||
import { Container } from "@chakra-ui/react";
|
||||
import RouteButton from "../../src/components/RouteButton";
|
||||
import mixpanel from "mixpanel-browser";
|
||||
import { getLayout, getLayoutProps } from "../../src/layouts/WideInfoPage";
|
||||
import { AWS_ASSETS_PATH } from "../../src/core/constants";
|
||||
import { MIXPANEL_EVENTS } from "../../src/core/providers/AnalyticsProvider/constants";
|
||||
import FeatureCard from "../../src/components/FeatureCard";
|
||||
import useRouter from "../../src/core/hooks/useRouter";
|
||||
|
||||
const assets = {
|
||||
cryptoTraders: `${AWS_ASSETS_PATH}/crypto+traders.png`,
|
||||
|
|
@ -12,40 +16,36 @@ const assets = {
|
|||
};
|
||||
|
||||
const Features = () => {
|
||||
const airdrops = useRef(null);
|
||||
const minigames = useRef(null);
|
||||
const lootboxes = useRef(null);
|
||||
const crafting = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
const hash = window.location.hash;
|
||||
console.log("Hash is " + hash);
|
||||
console.log(crafting);
|
||||
switch (hash) {
|
||||
case "#minigames":
|
||||
minigames.current.scrollIntoView();
|
||||
|
||||
break;
|
||||
case "#lootboxes":
|
||||
lootboxes.current.scrollIntoView();
|
||||
|
||||
break;
|
||||
case "#crafting":
|
||||
console.log("scroll to crafting");
|
||||
crafting.current.scrollIntoView();
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}, []);
|
||||
|
||||
const router = useRouter();
|
||||
return (
|
||||
<Container id="container" maxW="container.xl">
|
||||
<RouteButton
|
||||
variant="orangeAndBlue"
|
||||
onClick={() => {
|
||||
if (mixpanel.get_distinct_id()) {
|
||||
mixpanel.track(`${MIXPANEL_EVENTS.BUTTON_CLICKED}`, {
|
||||
full_url: router.nextRouter.asPath,
|
||||
buttonName: `Learn More`,
|
||||
page: `features`,
|
||||
section: `main`,
|
||||
});
|
||||
}
|
||||
}}
|
||||
href={"/discordleed"}
|
||||
isExternal
|
||||
minW={["150", "150", "150", "200px", "300px", "300px"]}
|
||||
fontSize={["md", "lg", "xl", "2xl", "3xl", "3xl"]}
|
||||
position="absolute"
|
||||
bottom="10px"
|
||||
right="5px"
|
||||
>
|
||||
Learn More
|
||||
</RouteButton>
|
||||
<FeatureCard
|
||||
ref={airdrops}
|
||||
id="airdrops"
|
||||
headingText="Airdrops"
|
||||
image={assets["lender"]}
|
||||
order={1}
|
||||
cardOrder={1}
|
||||
>
|
||||
<>
|
||||
Use Moonstream to distribute ERC20 tokens, NFTs, items, or
|
||||
|
|
@ -65,10 +65,10 @@ const Features = () => {
|
|||
</>
|
||||
</FeatureCard>
|
||||
<FeatureCard
|
||||
ref={minigames}
|
||||
id="minigames"
|
||||
headingText="Minigames"
|
||||
image={assets["DAO"]}
|
||||
order={-1}
|
||||
cardOrder={-1}
|
||||
>
|
||||
<>
|
||||
Use Moonstream to deploy on-chain minigames into your project. Our
|
||||
|
|
@ -82,10 +82,10 @@ const Features = () => {
|
|||
</>
|
||||
</FeatureCard>
|
||||
<FeatureCard
|
||||
ref={lootboxes}
|
||||
id="lootboxes"
|
||||
headingText="Lootboxes"
|
||||
image={assets["cryptoTraders"]}
|
||||
order={1}
|
||||
cardOrder={1}
|
||||
>
|
||||
<>
|
||||
Use Moonstream Lootboxes to reward your players on-chain for
|
||||
|
|
@ -99,10 +99,10 @@ const Features = () => {
|
|||
</>
|
||||
</FeatureCard>
|
||||
<FeatureCard
|
||||
ref={crafting}
|
||||
id="crafting"
|
||||
headingText="Crafting"
|
||||
image={assets["cryptoTraders"]}
|
||||
order={-1}
|
||||
image={assets["NFT"]}
|
||||
cardOrder={-1}
|
||||
>
|
||||
<>
|
||||
Use Moonstream to set up a fully on-chain crafting system and give
|
||||
|
|
|
|||
|
|
@ -25,6 +25,7 @@ import RouteButton from "../src/components/RouteButton";
|
|||
import MilestoneBox from "../src/components/MilestoneBox";
|
||||
import mixpanel from "mixpanel-browser";
|
||||
import { MIXPANEL_EVENTS } from "../src/core/providers/AnalyticsProvider/constants";
|
||||
import RouterLink from "next/link";
|
||||
|
||||
const HEADING_PROPS = {
|
||||
fontWeight: "700",
|
||||
|
|
@ -62,7 +63,7 @@ const Feature = ({
|
|||
image,
|
||||
}) => {
|
||||
return (
|
||||
<Link
|
||||
<RouterLink
|
||||
href={path}
|
||||
onClick={() => {
|
||||
if (mixpanel.get_distinct_id()) {
|
||||
|
|
@ -99,7 +100,7 @@ const Feature = ({
|
|||
{title}
|
||||
</Heading>
|
||||
</Stack>
|
||||
</Link>
|
||||
</RouterLink>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
@ -279,6 +280,15 @@ const Homepage = () => {
|
|||
</chakra.span>
|
||||
<RouteButton
|
||||
variant="orangeAndBlue"
|
||||
minW={[
|
||||
"200px",
|
||||
"250px",
|
||||
"250px",
|
||||
"300px",
|
||||
"350px",
|
||||
"400px",
|
||||
]}
|
||||
fontSize={["lg", "xl", "2xl", "3xl", "4xl", "4xl"]}
|
||||
onClick={() => {
|
||||
if (mixpanel.get_distinct_id()) {
|
||||
mixpanel.track(
|
||||
|
|
@ -419,6 +429,15 @@ const Homepage = () => {
|
|||
<Center w="100%" h="100%">
|
||||
<RouteButton
|
||||
variant="orangeAndBlue"
|
||||
minW={[
|
||||
"200px",
|
||||
"250px",
|
||||
"250px",
|
||||
"300px",
|
||||
"350px",
|
||||
"400px",
|
||||
]}
|
||||
fontSize={["lg", "xl", "2xl", "3xl", "4xl", "4xl"]}
|
||||
px={[4, 4, 4, 8, 8]}
|
||||
onClick={() => {
|
||||
if (mixpanel.get_distinct_id()) {
|
||||
|
|
@ -675,6 +694,15 @@ const Homepage = () => {
|
|||
|
||||
<RouteButton
|
||||
variant="orangeAndBlue"
|
||||
minW={[
|
||||
"200px",
|
||||
"250px",
|
||||
"250px",
|
||||
"300px",
|
||||
"350px",
|
||||
"400px",
|
||||
]}
|
||||
fontSize={["lg", "xl", "2xl", "3xl", "4xl", "4xl"]}
|
||||
onClick={() => {
|
||||
if (mixpanel.get_distinct_id()) {
|
||||
mixpanel.track(`${MIXPANEL_EVENTS.BUTTON_CLICKED}`, {
|
||||
|
|
|
|||
|
|
@ -116,7 +116,6 @@ const variantGhost = (props) => {
|
|||
|
||||
const variantOrangeAndBlue = () => {
|
||||
return {
|
||||
minW: ["200px", "250px", "250px", "300px", "350px", "400px"],
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
border: "solid transparent",
|
||||
|
|
|
|||
|
|
@ -15,9 +15,9 @@ const HEADING_PROPS = {
|
|||
fontSize: ["4xl", "5xl", "5xl", "5xl", "6xl", "7xl"],
|
||||
};
|
||||
|
||||
const FeatureCard = (props, ref) => {
|
||||
const _FeatureCard = (props) => {
|
||||
return (
|
||||
<Flex ref={ref} colSpan="12" pt={12}>
|
||||
<Flex id={props.id} colSpan="12" pt={12}>
|
||||
<Grid
|
||||
templateColumns={{
|
||||
base: "repeat(1, 1fr)",
|
||||
|
|
@ -41,14 +41,14 @@ const FeatureCard = (props, ref) => {
|
|||
</VStack>
|
||||
</GridItem>
|
||||
<GridItem
|
||||
order={2 * props.order}
|
||||
order={[2, 2, 2 * props.cardOrder]}
|
||||
justifyContent="right"
|
||||
alignContent="center"
|
||||
h="auto"
|
||||
>
|
||||
<Center>
|
||||
<ChakraImage
|
||||
boxSize={["220px", "220px", "md", null, "lg"]}
|
||||
boxSize={["220px", "md", "md", null, "lg"]}
|
||||
objectFit="contain"
|
||||
src={props.image}
|
||||
/>
|
||||
|
|
@ -59,4 +59,6 @@ const FeatureCard = (props, ref) => {
|
|||
);
|
||||
};
|
||||
|
||||
export default React.forwardRef(FeatureCard);
|
||||
const FeatureCard = chakra(_FeatureCard)
|
||||
|
||||
export default FeatureCard;
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue