2021-08-20 11:55:06 +00:00
|
|
|
|
import React, { useEffect, useState, useLayoutEffect, useContext } from "react";
|
2021-08-20 11:42:40 +00:00
|
|
|
|
import {
|
|
|
|
|
Heading,
|
|
|
|
|
Text,
|
|
|
|
|
Flex,
|
|
|
|
|
Link,
|
|
|
|
|
Stack,
|
|
|
|
|
chakra,
|
|
|
|
|
useMediaQuery,
|
|
|
|
|
UnorderedList,
|
|
|
|
|
ListItem,
|
2021-08-24 09:02:41 +00:00
|
|
|
|
Box,
|
|
|
|
|
SimpleGrid,
|
2021-08-20 11:42:40 +00:00
|
|
|
|
} from "@chakra-ui/react";
|
2021-08-24 12:28:17 +00:00
|
|
|
|
import { DEFAULT_METATAGS, AWS_ASSETS_PATH } from "../../src/core/constants";
|
2021-08-20 11:55:06 +00:00
|
|
|
|
import UIContext from "../../src/core/providers/UIProvider/context";
|
2021-12-10 12:04:46 +00:00
|
|
|
|
import TeamCard from "../../src/components/TeamCard";
|
2021-08-20 11:42:40 +00:00
|
|
|
|
|
|
|
|
|
const assets = {
|
2021-08-24 12:28:17 +00:00
|
|
|
|
background720: `${AWS_ASSETS_PATH}/blog-background-720x405.png`,
|
|
|
|
|
background1920: `${AWS_ASSETS_PATH}/blog-background-720x405.png`,
|
|
|
|
|
background2880: `${AWS_ASSETS_PATH}/blog-background-720x405.png`,
|
|
|
|
|
background3840: `${AWS_ASSETS_PATH}/blog-background-720x405.png`,
|
2021-08-24 16:06:08 +00:00
|
|
|
|
team: `${AWS_ASSETS_PATH}/Team-page-illustration.png`,
|
2021-12-10 12:04:46 +00:00
|
|
|
|
dragonfly: `${AWS_ASSETS_PATH}/dragonfly.jpg`,
|
|
|
|
|
ladybird: `${AWS_ASSETS_PATH}/ladybird.jpg`,
|
|
|
|
|
locust: `${AWS_ASSETS_PATH}/locust.jpg`,
|
|
|
|
|
mantis: `${AWS_ASSETS_PATH}/mantis.jpg`,
|
|
|
|
|
centipede: `${AWS_ASSETS_PATH}/centipede.jpg`,
|
|
|
|
|
spider: `${AWS_ASSETS_PATH}/spider.jpg`,
|
|
|
|
|
ant: `${AWS_ASSETS_PATH}/ant.jpg`,
|
|
|
|
|
firefly: `${AWS_ASSETS_PATH}/firefly.jpg`,
|
2021-08-20 11:42:40 +00:00
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const Product = () => {
|
2021-08-20 11:55:06 +00:00
|
|
|
|
const ui = useContext(UIContext);
|
2021-08-20 11:42:40 +00:00
|
|
|
|
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 [
|
|
|
|
|
isLargerThan720px,
|
|
|
|
|
isLargerThan1920px,
|
|
|
|
|
isLargerThan2880px,
|
|
|
|
|
isLargerThan3840px,
|
|
|
|
|
] = useMediaQuery([
|
|
|
|
|
"(min-width: 720px)",
|
|
|
|
|
"(min-width: 1920px)",
|
|
|
|
|
"(min-width: 2880px)",
|
|
|
|
|
"(min-width: 3840px)",
|
|
|
|
|
]);
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
2021-08-24 12:28:17 +00:00
|
|
|
|
assets["background720"] = `${AWS_ASSETS_PATH}/blog-background-720x405.png`;
|
|
|
|
|
assets[
|
|
|
|
|
"background1920"
|
|
|
|
|
] = `${AWS_ASSETS_PATH}/blog-background-1920x1080.png`;
|
|
|
|
|
assets[
|
|
|
|
|
"background2880"
|
|
|
|
|
] = `${AWS_ASSETS_PATH}/blog-background-2880x1620.png`;
|
|
|
|
|
assets[
|
|
|
|
|
"background3840"
|
|
|
|
|
] = `${AWS_ASSETS_PATH}/blog-background-3840x2160.png`;
|
2021-08-20 11:42:40 +00:00
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
|
|
useLayoutEffect(() => {
|
|
|
|
|
if (backgroundLoaded3840) {
|
|
|
|
|
setBackground("background3840");
|
|
|
|
|
} else if (backgroundLoaded2880) {
|
|
|
|
|
setBackground("background2880");
|
|
|
|
|
} else if (backgroundLoaded1920) {
|
|
|
|
|
setBackground("background1920");
|
|
|
|
|
} else {
|
|
|
|
|
setBackground("background720");
|
|
|
|
|
}
|
|
|
|
|
}, [
|
|
|
|
|
isLargerThan720px,
|
|
|
|
|
isLargerThan1920px,
|
|
|
|
|
isLargerThan2880px,
|
|
|
|
|
isLargerThan3840px,
|
|
|
|
|
backgroundLoaded720,
|
|
|
|
|
backgroundLoaded1920,
|
|
|
|
|
backgroundLoaded2880,
|
|
|
|
|
backgroundLoaded3840,
|
|
|
|
|
]);
|
|
|
|
|
|
|
|
|
|
useLayoutEffect(() => {
|
|
|
|
|
const imageLoader720 = new Image();
|
2021-08-24 12:28:17 +00:00
|
|
|
|
imageLoader720.src = `${AWS_ASSETS_PATH}/blog-background-720x405.png`;
|
2021-08-20 11:42:40 +00:00
|
|
|
|
imageLoader720.onload = () => {
|
|
|
|
|
setBackgroundLoaded720(true);
|
|
|
|
|
};
|
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
|
|
useLayoutEffect(() => {
|
|
|
|
|
const imageLoader1920 = new Image();
|
2021-08-24 12:28:17 +00:00
|
|
|
|
imageLoader1920.src = `${AWS_ASSETS_PATH}/blog-background-1920x1080.png`;
|
2021-08-20 11:42:40 +00:00
|
|
|
|
imageLoader1920.onload = () => {
|
|
|
|
|
setBackgroundLoaded1920(true);
|
|
|
|
|
};
|
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
|
|
useLayoutEffect(() => {
|
|
|
|
|
const imageLoader2880 = new Image();
|
2021-08-24 12:28:17 +00:00
|
|
|
|
imageLoader2880.src = `${AWS_ASSETS_PATH}/blog-background-2880x1620.png`;
|
2021-08-20 11:42:40 +00:00
|
|
|
|
imageLoader2880.onload = () => {
|
|
|
|
|
setBackgroundLoaded2880(true);
|
|
|
|
|
};
|
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
|
|
useLayoutEffect(() => {
|
|
|
|
|
const imageLoader3840 = new Image();
|
2021-08-24 12:28:17 +00:00
|
|
|
|
imageLoader3840.src = `${AWS_ASSETS_PATH}/blog-background-3840x2160.png`;
|
2021-08-20 11:42:40 +00:00
|
|
|
|
imageLoader3840.onload = () => {
|
|
|
|
|
setBackgroundLoaded3840(true);
|
|
|
|
|
};
|
|
|
|
|
}, []);
|
|
|
|
|
|
2021-08-20 11:55:06 +00:00
|
|
|
|
const margin = ui.isMobileView ? "3%" : "22%";
|
2021-08-20 11:42:40 +00:00
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<Flex
|
|
|
|
|
bgPos="bottom"
|
|
|
|
|
bgColor="transparent"
|
|
|
|
|
backgroundImage={`url(${assets[`${background}`]})`}
|
|
|
|
|
bgSize="cover"
|
|
|
|
|
minH="100vh"
|
|
|
|
|
direction="column"
|
|
|
|
|
alignItems="center"
|
|
|
|
|
w="100%"
|
|
|
|
|
>
|
2021-08-24 16:06:08 +00:00
|
|
|
|
<Stack mx={margin} maxW="1700px" w="100%">
|
2021-08-24 09:02:41 +00:00
|
|
|
|
<SimpleGrid
|
2021-08-20 11:42:40 +00:00
|
|
|
|
px={12}
|
2021-08-24 09:02:41 +00:00
|
|
|
|
alignItems="start"
|
|
|
|
|
columns={{ base: 1, md: 2 }}
|
|
|
|
|
// mb={24}
|
|
|
|
|
spacingY={{ base: 10, md: 32 }}
|
|
|
|
|
spacingX={{ base: 10, md: 24 }}
|
2021-08-20 11:42:40 +00:00
|
|
|
|
>
|
2021-08-24 09:02:41 +00:00
|
|
|
|
<Box>
|
2021-08-24 16:06:08 +00:00
|
|
|
|
<Heading as="h2" size="md" w="100%" py={6} borderTopRadius="xl">
|
2021-08-24 09:02:41 +00:00
|
|
|
|
Meet The Moonstream Team
|
|
|
|
|
</Heading>
|
|
|
|
|
<chakra.span pl={2} py={2}>
|
|
|
|
|
<Text mb={2}>
|
|
|
|
|
We are a distributed team of nerds with very strong expertise in
|
|
|
|
|
math, software engineering, machine learning, and cryptography.
|
|
|
|
|
Members of our team worked at Google, at OpenAI and other great
|
|
|
|
|
companies.
|
|
|
|
|
</Text>
|
|
|
|
|
<Text mb={2}>
|
|
|
|
|
We believe that the crypto world opens opportunities for
|
|
|
|
|
financial inclusion. Meaning that people from all walks of life
|
|
|
|
|
and financial situations can have a new source of income. We are
|
|
|
|
|
passionate about developing technology that helps people become
|
|
|
|
|
active participants in this field and take advantage of this
|
|
|
|
|
opportunity. We’re striving to debunk harmful stereotypes and
|
|
|
|
|
make the crypto field more inclusive.
|
|
|
|
|
</Text>
|
|
|
|
|
</chakra.span>
|
|
|
|
|
</Box>
|
|
|
|
|
<Box
|
|
|
|
|
w="full"
|
|
|
|
|
py={48}
|
|
|
|
|
backgroundImage={`url(${assets[`team`]})`}
|
|
|
|
|
backgroundSize="cover"
|
|
|
|
|
bgPos="bottom"
|
|
|
|
|
bgColor="transparent"
|
|
|
|
|
></Box>
|
|
|
|
|
</SimpleGrid>
|
2021-08-20 11:42:40 +00:00
|
|
|
|
</Stack>
|
2021-08-24 12:01:34 +00:00
|
|
|
|
<Stack mx={margin} mb={6} mt={0} maxW="1700px" w="100%">
|
2021-08-20 11:42:40 +00:00
|
|
|
|
<Heading
|
|
|
|
|
as="h2"
|
|
|
|
|
size="md"
|
|
|
|
|
w="100%"
|
|
|
|
|
px={12}
|
2021-08-24 12:01:34 +00:00
|
|
|
|
pb={2}
|
|
|
|
|
pt={0}
|
2021-08-20 11:42:40 +00:00
|
|
|
|
borderTopRadius="xl"
|
|
|
|
|
>
|
|
|
|
|
Values that we share within our team:
|
|
|
|
|
</Heading>
|
|
|
|
|
<chakra.span pl={2} px={12} py={2}>
|
|
|
|
|
<UnorderedList w="75%" pl={4}>
|
|
|
|
|
<ListItem>
|
2021-08-24 11:58:55 +00:00
|
|
|
|
<b>Be bold</b>
|
|
|
|
|
</ListItem>
|
|
|
|
|
<ListItem>
|
|
|
|
|
<b>Be curious</b>
|
2021-08-20 11:42:40 +00:00
|
|
|
|
</ListItem>
|
|
|
|
|
<ListItem>
|
|
|
|
|
<b>Don’t be an ass</b>
|
|
|
|
|
</ListItem>
|
|
|
|
|
<ListItem>
|
|
|
|
|
<b>And always be kind to each other</b>
|
|
|
|
|
</ListItem>
|
|
|
|
|
</UnorderedList>
|
|
|
|
|
<Text my={2}>
|
|
|
|
|
We are always looking to hire new talents, regardless of their
|
|
|
|
|
backgrounds. If you are interested in working with us, send us a
|
|
|
|
|
message at{" "}
|
2021-09-21 18:37:48 +00:00
|
|
|
|
<Link textColor="orange.900" href="mailto: careers@moonstream.to">
|
2021-08-20 11:42:40 +00:00
|
|
|
|
careers@moonstream.to
|
|
|
|
|
</Link>
|
|
|
|
|
</Text>
|
|
|
|
|
</chakra.span>
|
|
|
|
|
</Stack>
|
2021-08-24 09:02:41 +00:00
|
|
|
|
<Stack mx={margin} mb={12} maxW="1700px" w="100%">
|
|
|
|
|
<Heading as="h2" size="md" w="100%" px={12} py={2} borderTopRadius="xl">
|
2021-08-20 11:42:40 +00:00
|
|
|
|
Our engineering team
|
|
|
|
|
</Heading>
|
2021-12-10 12:04:46 +00:00
|
|
|
|
<Stack
|
|
|
|
|
w="100%"
|
|
|
|
|
direction={"row"}
|
|
|
|
|
flexWrap="wrap"
|
|
|
|
|
spacing={4}
|
|
|
|
|
justifyContent="space-between"
|
|
|
|
|
px={12}
|
|
|
|
|
placeContent={"center"}
|
|
|
|
|
>
|
|
|
|
|
<TeamCard
|
|
|
|
|
avatarURL={assets["ant"]}
|
|
|
|
|
name={"Neeraj Kashyap"}
|
|
|
|
|
atName={"@zomglings"}
|
|
|
|
|
content={` Founder. Number theorist. Loves playing chess while programming. Fan of GO, backgammon, and video games.`}
|
|
|
|
|
/>
|
|
|
|
|
<TeamCard
|
|
|
|
|
avatarURL={assets["spider"]}
|
|
|
|
|
name={"Sergei Sumarokov"}
|
|
|
|
|
atName={"@kompotkot"}
|
|
|
|
|
content={`Keeper of Secrets. Likes information
|
|
|
|
|
security since childhood, loves mountains and goes hiking from
|
|
|
|
|
time to time. Had a close call with a wild bear in a forest once.`}
|
|
|
|
|
/>
|
|
|
|
|
<TeamCard
|
|
|
|
|
avatarURL={assets["locust"]}
|
|
|
|
|
name={"Andrey Dolgolev"}
|
|
|
|
|
atName={"@Andrei-Dolgolev"}
|
|
|
|
|
content={`Wizard. Loves mountains, bicycling, and
|
|
|
|
|
hiking. A practicing Python wizard. Also likes to cook and play
|
|
|
|
|
the guitar in between data witchcraft.`}
|
|
|
|
|
/>
|
|
|
|
|
<TeamCard
|
|
|
|
|
avatarURL={assets["dragonfly"]}
|
|
|
|
|
name={"Tim Pechersky"}
|
|
|
|
|
atName={"@peersky"}
|
2022-03-15 17:24:14 +00:00
|
|
|
|
content={`Spectral hopper. Has special ability to perceive world trough spectral domain. Occasionaly
|
|
|
|
|
shifts in time domain to spend some in doing flow
|
2021-12-10 12:04:46 +00:00
|
|
|
|
arts, surfing, and connecting with nature.`}
|
|
|
|
|
/>
|
|
|
|
|
<TeamCard
|
|
|
|
|
avatarURL={assets["centipede"]}
|
2021-12-16 21:26:34 +00:00
|
|
|
|
name={"Yhtyyar Sahatov"}
|
2021-12-10 12:04:46 +00:00
|
|
|
|
atName={"@Yhtiyar"}
|
|
|
|
|
content={`Wunderkind. Interested in Math, NLP. Loves
|
|
|
|
|
programming language parsing and Algorithms & Data structures.
|
|
|
|
|
Implementing his own dialect of LISP programming language for
|
|
|
|
|
scientific calculations.`}
|
|
|
|
|
/>
|
|
|
|
|
</Stack>
|
2021-08-20 11:42:40 +00:00
|
|
|
|
</Stack>
|
2021-08-24 09:02:41 +00:00
|
|
|
|
<Stack mx={margin} mb={12} maxW="1700px" w="100%">
|
2021-08-20 11:43:38 +00:00
|
|
|
|
<Heading as="h2" size="md" w="100%" px={12} py={2} borderTopRadius="xl">
|
2021-08-20 11:42:40 +00:00
|
|
|
|
Our marketing and growth team
|
|
|
|
|
</Heading>
|
2021-12-10 12:04:46 +00:00
|
|
|
|
<Stack
|
|
|
|
|
w="100%"
|
|
|
|
|
direction={"row"}
|
|
|
|
|
flexWrap="wrap"
|
|
|
|
|
spacing={4}
|
|
|
|
|
justifyContent="space-between"
|
|
|
|
|
px={12}
|
|
|
|
|
placeContent={"center"}
|
|
|
|
|
>
|
|
|
|
|
<TeamCard
|
|
|
|
|
avatarURL={assets["ladybird"]}
|
|
|
|
|
name={"Sophia Aryan"}
|
|
|
|
|
atName={"@pahita"}
|
|
|
|
|
content={`Dreamer. An alien who pretends to be a human.
|
|
|
|
|
So far so good. Loves ecstatic dance, being alone in nature and
|
|
|
|
|
dreaming.`}
|
|
|
|
|
/>
|
|
|
|
|
<TeamCard
|
|
|
|
|
avatarURL={assets["mantis"]}
|
|
|
|
|
name={"Daria Navoloshnikova"}
|
|
|
|
|
atName={"@in_technicolor"}
|
|
|
|
|
content={`Mediator. Loves stand-up comedy and
|
|
|
|
|
crying at nights. Volunteered at a horse farm once. Portrait
|
|
|
|
|
artist, puts the pain in painting.`}
|
|
|
|
|
/>
|
|
|
|
|
</Stack>
|
2021-08-20 11:42:40 +00:00
|
|
|
|
</Stack>
|
|
|
|
|
</Flex>
|
|
|
|
|
);
|
|
|
|
|
};
|
2021-08-20 11:57:37 +00:00
|
|
|
|
|
|
|
|
|
export async function getStaticProps() {
|
|
|
|
|
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: { ...DEFAULT_METATAGS }, preloads },
|
|
|
|
|
};
|
|
|
|
|
}
|
2021-08-20 11:42:40 +00:00
|
|
|
|
export default Product;
|