kopia lustrzana https://github.com/bugout-dev/moonstream
Neeraj Kashyap
GitHub
commit
0da5e7c3fb
|
|
@ -19,6 +19,7 @@ import {
|
|||
SimpleGrid,
|
||||
useMediaQuery,
|
||||
Grid,
|
||||
Text,
|
||||
GridItem,
|
||||
} from "@chakra-ui/react";
|
||||
import dynamic from "next/dynamic";
|
||||
|
|
@ -28,7 +29,6 @@ import useModals from "../src/core/hooks/useModals";
|
|||
import useRouter from "../src/core/hooks/useRouter";
|
||||
import { MIXPANEL_PROPS } from "../src/core/providers/AnalyticsProvider/constants";
|
||||
import UIContext from "../src/core/providers/UIProvider/context";
|
||||
|
||||
const SplitWithImage = dynamic(
|
||||
() => import("../src/components/SplitWithImage"),
|
||||
{
|
||||
|
|
@ -244,17 +244,21 @@ const Homepage = () => {
|
|||
textAlign="center"
|
||||
alignItems="center"
|
||||
spacing={6}
|
||||
maxW="1620px"
|
||||
maxW={["1620px", null, null, null, "1620px", "2222px"]}
|
||||
px="7%"
|
||||
h="100%"
|
||||
pt={["10vh", null, "20vh"]}
|
||||
>
|
||||
<Heading size="2xl" fontWeight="semibold" color="white">
|
||||
<Heading
|
||||
fontSize={["lg", "4xl", "5xl", "5xl", "5xl", "6xl"]}
|
||||
fontWeight="semibold"
|
||||
color="white"
|
||||
>
|
||||
All the crypto data you care about in a single stream
|
||||
</Heading>
|
||||
<chakra.span
|
||||
my={12}
|
||||
fontSize={["lg", null, "xl"]}
|
||||
fontSize={["md", "2xl", "3xl", "3xl", "3xl", "4xl"]}
|
||||
display="inline-block"
|
||||
color="primary.200"
|
||||
>
|
||||
|
|
@ -263,7 +267,7 @@ const Homepage = () => {
|
|||
pool to Elon Musk’s latest tweets.
|
||||
</chakra.span>
|
||||
<chakra.span
|
||||
fontSize={["lg", null, "xl"]}
|
||||
fontSize={["md", "2xl", "3xl", "3xl", "3xl", "4xl"]}
|
||||
display="inline-block"
|
||||
color="primary.300"
|
||||
>
|
||||
|
|
@ -279,18 +283,44 @@ const Homepage = () => {
|
|||
<GridItem
|
||||
px="7%"
|
||||
colSpan="12"
|
||||
pt={["20px", "20px", "100px", null, "120px"]}
|
||||
// pt={["20px", "20px", "100px", null, "120px"]}
|
||||
pt={0}
|
||||
pb={["20px", "56px", null, "184px"]}
|
||||
minH="100vh"
|
||||
>
|
||||
<chakra.span
|
||||
// {...HEADING_PROPS}
|
||||
textAlign="center"
|
||||
fontWeight="600"
|
||||
fontSize="lg"
|
||||
w="100%"
|
||||
h="fit-content"
|
||||
>
|
||||
<Text
|
||||
mb={18}
|
||||
// mb={[12, 12, 12, null, 48]}
|
||||
fontSize={["md", "2xl", "3xl", "3xl", "3xl", "4xl"]}
|
||||
>
|
||||
{` We believe in financial inclusion. Proprietary technologies
|
||||
are not financially inclusive. That's why all our software
|
||||
is `}
|
||||
<chakra.span
|
||||
display="inline-block"
|
||||
textColor="secondary.900"
|
||||
>
|
||||
<i>open source</i>
|
||||
</chakra.span>
|
||||
</Text>
|
||||
</chakra.span>
|
||||
|
||||
<Heading
|
||||
{...HEADING_PROPS}
|
||||
textAlign="center"
|
||||
mt={16}
|
||||
pb={[12, 12, 12, null, 48]}
|
||||
>
|
||||
Data you can add to your stream:
|
||||
</Heading>
|
||||
|
||||
<SimpleGrid columns={[1, 2, 2, 4, null, 4]}>
|
||||
<Stack spacing={1} px={1} alignItems="center">
|
||||
<ChakraImage
|
||||
|
|
@ -486,6 +516,16 @@ const Homepage = () => {
|
|||
toggleModal("hubspot-developer");
|
||||
},
|
||||
}}
|
||||
socialButton={{
|
||||
url: "https://github.com/bugout-dev/moonstream/",
|
||||
network: "github",
|
||||
label: "See our github",
|
||||
onClick: () => {
|
||||
track(`${MIXPANEL_EVENTS.BUTTON_CLICKED}`, {
|
||||
[`${MIXPANEL_PROPS.BUTTON_CLICKED}`]: `Github link in landing page`,
|
||||
});
|
||||
},
|
||||
}}
|
||||
elementName={"element3"}
|
||||
colorScheme="primary"
|
||||
badge={`For smart contract developers`}
|
||||
|
|
|
|||
|
|
@ -10,12 +10,12 @@ import {
|
|||
Icon,
|
||||
useColorModeValue,
|
||||
Button,
|
||||
Center,
|
||||
useBreakpointValue,
|
||||
} from "@chakra-ui/react";
|
||||
// import Xarrow, { useXarrow } from "react-xarrows";
|
||||
import React, { useContext } from "react";
|
||||
import UIContext from "../core/providers/UIProvider/context";
|
||||
import { FaGithubSquare } from "react-icons/fa";
|
||||
import RouteButton from "../components/RouteButton";
|
||||
|
||||
const Feature = ({ text, icon, iconBg, bullets }) => {
|
||||
return (
|
||||
|
|
@ -67,16 +67,20 @@ const SplitWithImage = ({
|
|||
mirror,
|
||||
elementName,
|
||||
cta,
|
||||
socialButton,
|
||||
}) => {
|
||||
const buttonSize = useBreakpointValue({
|
||||
base: "md",
|
||||
sm: "md",
|
||||
md: "md",
|
||||
lg: "lg",
|
||||
xl: "xl",
|
||||
"2xl": "xl",
|
||||
var buttonSize = useBreakpointValue({
|
||||
base: { single: "sm", double: "xs" },
|
||||
sm: { single: "md", double: "sm" },
|
||||
md: { single: "md", double: "sm" },
|
||||
lg: { single: "lg", double: "lg" },
|
||||
xl: { single: "lg", double: "lg" },
|
||||
"2xl": { single: "lg", double: "lg" },
|
||||
});
|
||||
|
||||
//idk why but sometimes buttonSize gets undefined
|
||||
if (!buttonSize) buttonSize = "lg";
|
||||
|
||||
const ui = useContext(UIContext);
|
||||
|
||||
const [isVisible, setVisible] = React.useState(true);
|
||||
|
|
@ -109,20 +113,25 @@ const SplitWithImage = ({
|
|||
</Flex>
|
||||
)}
|
||||
<Stack spacing={4} justifyContent="center">
|
||||
<Text
|
||||
id={`MoonBadge ${elementName}`}
|
||||
// id={`MoonBadge${elementName}`}
|
||||
textTransform={"uppercase"}
|
||||
color={useColorModeValue(`${colorScheme}.50`, `${colorScheme}.900`)}
|
||||
fontWeight={600}
|
||||
fontSize={"sm"}
|
||||
bg={useColorModeValue(`${colorScheme}.900`, `${colorScheme}.50`)}
|
||||
p={2}
|
||||
alignSelf={mirror && !ui.isMobileView ? "flex-end" : "flex-start"}
|
||||
rounded={"md"}
|
||||
>
|
||||
{badge}
|
||||
</Text>
|
||||
<Stack direction="row">
|
||||
<Text
|
||||
id={`MoonBadge ${elementName}`}
|
||||
// id={`MoonBadge${elementName}`}
|
||||
textTransform={"uppercase"}
|
||||
color={useColorModeValue(
|
||||
`${colorScheme}.50`,
|
||||
`${colorScheme}.900`
|
||||
)}
|
||||
fontWeight={600}
|
||||
fontSize={"sm"}
|
||||
bg={useColorModeValue(`${colorScheme}.900`, `${colorScheme}.50`)}
|
||||
p={2}
|
||||
alignSelf={mirror && !ui.isMobileView ? "flex-end" : "flex-start"}
|
||||
rounded={"md"}
|
||||
>
|
||||
{badge}
|
||||
</Text>
|
||||
</Stack>
|
||||
<Heading>{title}</Heading>
|
||||
<Text color={`primary.500`} fontSize={"lg"}>
|
||||
{body}
|
||||
|
|
@ -148,20 +157,40 @@ const SplitWithImage = ({
|
|||
/>
|
||||
);
|
||||
})}
|
||||
<Container>
|
||||
<Center>
|
||||
<Button
|
||||
colorScheme={colorScheme}
|
||||
variant="outline"
|
||||
|
||||
<Flex
|
||||
w="100%"
|
||||
flexWrap="nowrap"
|
||||
display={["column", "column", null, "row"]}
|
||||
>
|
||||
<Button
|
||||
colorScheme={colorScheme}
|
||||
w={["100%", "100%", "fit-content", null]}
|
||||
maxW={["250px", null, "fit-content"]}
|
||||
variant="outline"
|
||||
mt={[0, 0, null, 16]}
|
||||
size={socialButton ? buttonSize.double : buttonSize.single}
|
||||
onClick={cta.onClick}
|
||||
>
|
||||
{cta.label}
|
||||
</Button>
|
||||
|
||||
{socialButton && (
|
||||
<RouteButton
|
||||
isExternal
|
||||
w={["100%", "100%", "fit-content", null]}
|
||||
maxW={["250px", null, "fit-content"]}
|
||||
href={socialButton.url}
|
||||
mt={[0, 0, null, 16]}
|
||||
fontSize={["xs", "sm", "lg", null, "lg"]}
|
||||
size={buttonSize}
|
||||
onClick={cta.onClick}
|
||||
size={socialButton ? buttonSize.double : buttonSize.single}
|
||||
variant="outline"
|
||||
colorScheme="primary"
|
||||
leftIcon={<FaGithubSquare />}
|
||||
>
|
||||
{cta.label}
|
||||
</Button>
|
||||
</Center>
|
||||
</Container>
|
||||
git clone moonstream
|
||||
</RouteButton>
|
||||
)}
|
||||
</Flex>
|
||||
</Stack>
|
||||
</Stack>
|
||||
{(!mirror || ui.isMobileView) && (
|
||||
|
|
@ -171,7 +200,6 @@ const SplitWithImage = ({
|
|||
alt={"feature image"}
|
||||
src={imgURL}
|
||||
objectFit={"contain"}
|
||||
// boxSize={ui.isMobileView ? "lg" : null}
|
||||
/>
|
||||
</Flex>
|
||||
)}
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue