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

Tweaks to landing page. Moving branches from landing page to new color scheme.

pull/683/head
Kellan Wampler 2022-10-20 10:58:32 -04:00
rodzic 6fe23253f8
commit ef6a3f3f15
9 zmienionych plików z 40 dodań i 336 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

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

@ -11,13 +11,13 @@ import {
Grid,
Text,
GridItem,
SimpleGrid,
Image as ChakraImage,
VStack,
HStack,
Accordion,
Icon,
Spacer,
SimpleGrid,
} from "@chakra-ui/react";
import { HiOutlineChatAlt2 } from "react-icons/hi";
import useUser from "../src/core/hooks/useUser";
@ -101,10 +101,9 @@ const Homepage = () => {
<Box onClick={props.onClick}>
<RouterLink href={props.href}>
<Stack
h="100%"
transition={"1s"}
spacing={1}
px={2}
py={4}
p={4}
alignItems="center"
borderRadius="12px"
borderColor="white"
@ -112,16 +111,8 @@ const Homepage = () => {
borderWidth={"1px"}
_hover={{ transform: "scale(1.05)", transition: "0.42s" }}
cursor="pointer"
m={2}
minW={["120px", "120px", "200px", "240px"]}
h={["200px", "200px", "300px"]}
>
<ChakraImage
boxSize={["120px", "120px", "200px", null]}
objectFit="contain"
src={image}
alt={altText}
/>
<ChakraImage objectFit="contain" src={image} alt={altText} />
<Heading
textAlign="center"
fontSize={["md", "md", "lg", "lg", null]}
@ -223,6 +214,7 @@ const Homepage = () => {
"linear-gradient(92.26deg, #F56646 8.41%, #FFFFFF 255.37%);"
}
minW={["320px", "150px", null]}
border="none"
onClick={() => {
buttonReport(
"Boost",
@ -264,7 +256,7 @@ const Homepage = () => {
<Flex w="100%">
<Stack
direction={["column", "column", "row"]}
textAlign="center"
textAlign={["center", "center", "left"]}
>
<Text
fontSize={[
@ -300,7 +292,7 @@ const Homepage = () => {
<Flex w="100%" justifyContent="right">
<Stack
direction={["column", "column", "row"]}
textAlign="center"
textAlign={["center", "center", "left"]}
>
<Text
fontSize={[
@ -508,7 +500,7 @@ const Homepage = () => {
columns={[2, 2, 4, null]}
justifyContent={["flex-end", "flex-end", "center"]}
w="100%"
spacing={["0px", "40px"]}
spacing={["20px", "20px", "40px"]}
paddingTop="20px"
>
<Feature
@ -704,7 +696,7 @@ const Homepage = () => {
</VStack>
</Stack>
<Center pt={14}>
<Icon as={HiOutlineChatAlt2} mr={2}></Icon>
<Icon as={HiOutlineChatAlt2} w={6} h={6} mr={2}></Icon>
<Text fontSize={["xs", "sm", "md", "md", null]}>
Have something to discuss before signing up?{" "}
<Link
@ -946,7 +938,7 @@ const Homepage = () => {
>
<Suspense fallback={""}>
<TrustedBadge
scaling={0.5}
scaling={0.7}
name="cointelegraph"
caseURL=""
ImgURL={assets["cointelegraph"]}
@ -965,7 +957,7 @@ const Homepage = () => {
boxURL="https://cryptoslate.com/should-investors-care-80-of-all-nfts-belong-to-17-of-addresses/"
/>
<TrustedBadge
scaling={0.5}
scaling={0.7}
name="bc101"
ImgURL={assets["meetup"]}
boxURL="https://www.meetup.com/SF-Bay-Area-Data-Science-Initiative/events/283215538/"
@ -1018,7 +1010,7 @@ const Homepage = () => {
letterSpacing="wide"
px={2}
pb={1}
textAlign={["center", "left"]}
textAlign={["center", "center", "left"]}
>
Sign up to grow your economy
</Heading>
@ -1026,7 +1018,7 @@ const Homepage = () => {
fontSize={["sm", "sm", "md", "md", null]}
px={2}
py={4}
textAlign={["center", "left"]}
textAlign={["center", "center", "left"]}
>
{`Answer 5 questions about your project to get whitelisted.`}
</Text>
@ -1061,9 +1053,9 @@ const Homepage = () => {
<Text
display="block"
fontSize={["sm", "sm", "md", "md", null]}
textAlign={["center", "left"]}
textAlign={["center", "center", "left"]}
mr={[0, 0, 14]}
pb={[4, 0]}
pb={[4, 4, 0]}
letterSpacing="tight"
>
{`Learn more about crypto, NFT and DAOs, find links to educational resources, discuss gaming projects, and laugh at memes.`}

95
frontend/pages/team/index.js
Wyświetl plik

@ -1,4 +1,4 @@
import React, { useEffect, useState, useLayoutEffect, useContext } from "react";
import React, { useContext } from "react";
import {
Heading,
Text,
@ -7,7 +7,6 @@ import {
Image as ChakraImage,
Stack,
chakra,
useMediaQuery,
UnorderedList,
ListItem,
Box,
@ -22,11 +21,7 @@ import { getLayout, getLayoutProps } from "../../src/layouts/WideInfoPage";
const TEAM_PATH = `${AWS_ASSETS_PATH}/team`;
const assets = {
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`,
rocket: `${TEAM_PATH}/rocket.png`,
rocket: `${TEAM_PATH}/rocket-w-background.png`,
ant: `${TEAM_PATH}/ant.png`,
bee: `${TEAM_PATH}/bee.png`,
centipede: `${TEAM_PATH}/centipede.png`,
@ -41,89 +36,6 @@ const assets = {
const Team = () => {
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 [
isLargerThan720px,
isLargerThan1920px,
isLargerThan2880px,
isLargerThan3840px,
] = useMediaQuery([
"(min-width: 720px)",
"(min-width: 1920px)",
"(min-width: 2880px)",
"(min-width: 3840px)",
]);
useEffect(() => {
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`;
}, []);
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();
imageLoader720.src = `${AWS_ASSETS_PATH}/blog-background-720x405.png`;
imageLoader720.onload = () => {
setBackgroundLoaded720(true);
};
}, []);
useLayoutEffect(() => {
const imageLoader1920 = new Image();
imageLoader1920.src = `${AWS_ASSETS_PATH}/blog-background-1920x1080.png`;
imageLoader1920.onload = () => {
setBackgroundLoaded1920(true);
};
}, []);
useLayoutEffect(() => {
const imageLoader2880 = new Image();
imageLoader2880.src = `${AWS_ASSETS_PATH}/blog-background-2880x1620.png`;
imageLoader2880.onload = () => {
setBackgroundLoaded2880(true);
};
}, []);
useLayoutEffect(() => {
const imageLoader3840 = new Image();
imageLoader3840.src = `${AWS_ASSETS_PATH}/blog-background-3840x2160.png`;
imageLoader3840.onload = () => {
setBackgroundLoaded3840(true);
};
}, []);
const margin = ui.isMobileView ? "3%" : "22%";
@ -131,7 +43,6 @@ const Team = () => {
<Flex
bgPos="bottom"
bgColor="transparent"
backgroundImage={`url(${assets[`${background}`]})`}
bgSize="cover"
minH="100vh"
direction="column"
@ -169,7 +80,7 @@ const Team = () => {
</Text>
</chakra.span>
</Box>
<Center w="100%" h="100%">
<Center w="100%" h="100%" py={6}>
<ChakraImage w="40%" src={assets["rocket"]} alt="rocket" />
</Center>
</SimpleGrid>

2
frontend/src/Theme/Button/index.js
Wyświetl plik

@ -120,7 +120,6 @@ const variantOrangeAndBlue = () => {
justifyContent: "center",
border: "solid transparent",
borderRadius: "70px",
shadow: "md",
variant: "solid",
fontSize: ["md", "md", "lg", "lg", "xl", "xl"],
textColor: "white",
@ -136,7 +135,6 @@ const variantWhiteOnOrange = () => {
justifyContent: "center",
border: "solid transparent",
borderRadius: "70px",
shadow: "md",
variant: "solid",
fontSize: ["md", "md", "lg", "lg", "xl", "xl"],
textColor: "white",

2
frontend/src/Theme/theme.js
Wyświetl plik

@ -41,7 +41,7 @@ const theme = extendTheme({
styles: {
global: {
body: {
color: "blue.1200",
color: "white",
},
},
},

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

@ -17,7 +17,7 @@ import {
SITEMAP,
BACKGROUND_COLOR,
} from "../core/constants";
import { FaGithub, FaTwitter, FaDiscord } from "react-icons/fa";
import { FaGithub, FaTwitter, FaDiscord, FaLinkedin } from "react-icons/fa";
import moment from "moment";
const LINKS_SIZES = {
@ -87,6 +87,9 @@ const Footer = () => (
<Stack>
<Text fontWeight="semibold">Follow Us</Text>
<Stack direction={"row"} spacing={6}>
<SocialButton label={"Discord"} href={"/discordleed"}>
<FaDiscord />
</SocialButton>
<SocialButton
label={"Twitter"}
href={"https://twitter.com/moonstreamto"}
@ -99,8 +102,11 @@ const Footer = () => (
>
<FaGithub />
</SocialButton>
<SocialButton label={"Discord"} href={"/discordleed"}>
<FaDiscord />
<SocialButton
label={"LinkedIn"}
href={"https://www.linkedin.com/company/moonstream/"}
>
<FaLinkedin />
</SocialButton>
</Stack>
</Stack>

6
frontend/src/components/TeamCard.js
Wyświetl plik

@ -59,11 +59,7 @@ export default function SocialProfileSimple({
<Text fontWeight={600} color={"gray.900"} mb={4}>
{atName}
</Text>
<Text
textAlign={"center"}
color={useColorModeValue("blue.500", "gray.100")}
px={3}
>
<Text textAlign={"center"} px={3}>
{content}
</Text>

2
frontend/src/components/TrustedBadge.js
Wyświetl plik

@ -31,7 +31,7 @@ const TrustedBadge = ({
alignItems="center"
alignSelf="center"
wrap="nowrap"
p={[2, 4]}
p={[2, 3]}
direction="column"
>
<Image

109
frontend/src/layouts/InfoPageLayout.js
Wyświetl plik

@ -1,108 +1,18 @@
import React, { useContext, useState, useEffect, useLayoutEffect } from "react";
import { Flex, useMediaQuery, Stack } from "@chakra-ui/react";
import React, { useContext } from "react";
import { Flex, Stack } from "@chakra-ui/react";
import UIContext from "../core/providers/UIProvider/context";
import { DEFAULT_METATAGS, AWS_ASSETS_PATH } from "../core/constants";
import { DEFAULT_METATAGS, BACKGROUND_COLOR } from "../core/constants";
import { getLayout as getSiteLayout } from "./index";
const assets = {
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`,
};
const InfoPageLayout = ({ children }) => {
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 [
isLargerThan720px,
isLargerThan1920px,
isLargerThan2880px,
isLargerThan3840px,
] = useMediaQuery([
"(min-width: 720px)",
"(min-width: 1920px)",
"(min-width: 2880px)",
"(min-width: 3840px)",
]);
useEffect(() => {
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`;
}, []);
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();
imageLoader720.src = `${AWS_ASSETS_PATH}/blog-background-720x405.png`;
imageLoader720.onload = () => {
setBackgroundLoaded720(true);
};
}, []);
useLayoutEffect(() => {
const imageLoader1920 = new Image();
imageLoader1920.src = `${AWS_ASSETS_PATH}/blog-background-1920x1080.png`;
imageLoader1920.onload = () => {
setBackgroundLoaded1920(true);
};
}, []);
useLayoutEffect(() => {
const imageLoader2880 = new Image();
imageLoader2880.src = `${AWS_ASSETS_PATH}/blog-background-2880x1620.png`;
imageLoader2880.onload = () => {
setBackgroundLoaded2880(true);
};
}, []);
useLayoutEffect(() => {
const imageLoader3840 = new Image();
imageLoader3840.src = `${AWS_ASSETS_PATH}/blog-background-3840x2160.png`;
imageLoader3840.onload = () => {
setBackgroundLoaded3840(true);
};
}, []);
const margin = ui.isMobileView ? "6%" : "22%";
return (
<Flex
bgPos="bottom"
bgColor="transparent"
bgSize="cover"
backgroundImage={`url(${assets[`${background}`]})`}
bgColor={BACKGROUND_COLOR}
minH="100vh"
direction="column"
alignItems="center"
@ -119,19 +29,10 @@ export const getLayout = (page) =>
getSiteLayout(<InfoPageLayout>{page}</InfoPageLayout>);
export const getLayoutProps = () => {
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 },
props: { metaTags: { ...DEFAULT_METATAGS }, preconnects },
};
};
export default InfoPageLayout;

110
frontend/src/layouts/WideInfoPage.js
Wyświetl plik

@ -1,106 +1,15 @@
import React, { useState, useEffect, useLayoutEffect } from "react";
import { Flex, useMediaQuery, Stack } from "@chakra-ui/react";
import { DEFAULT_METATAGS, AWS_ASSETS_PATH } from "../core/constants";
import React from "react";
import { Flex, Stack } from "@chakra-ui/react";
import { DEFAULT_METATAGS, BACKGROUND_COLOR } from "../core/constants";
import { getLayout as getSiteLayout } from "./index";
const assets = {
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`,
};
const InfoPageLayout = ({ children }) => {
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(() => {
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`;
}, []);
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();
imageLoader720.src = `${AWS_ASSETS_PATH}/blog-background-720x405.png`;
imageLoader720.onload = () => {
setBackgroundLoaded720(true);
};
}, []);
useLayoutEffect(() => {
const imageLoader1920 = new Image();
imageLoader1920.src = `${AWS_ASSETS_PATH}/blog-background-1920x1080.png`;
imageLoader1920.onload = () => {
setBackgroundLoaded1920(true);
};
}, []);
useLayoutEffect(() => {
const imageLoader2880 = new Image();
imageLoader2880.src = `${AWS_ASSETS_PATH}/blog-background-2880x1620.png`;
imageLoader2880.onload = () => {
setBackgroundLoaded2880(true);
};
}, []);
useLayoutEffect(() => {
const imageLoader3840 = new Image();
imageLoader3840.src = `${AWS_ASSETS_PATH}/blog-background-3840x2160.png`;
imageLoader3840.onload = () => {
setBackgroundLoaded3840(true);
};
}, []);
const margin = 0;
return (
<Flex
bgPos="bottom"
bgColor="transparent"
bgColor={BACKGROUND_COLOR}
bgSize="cover"
backgroundImage={`url(${assets[`${background}`]})`}
minH="100vh"
direction="column"
alignItems="center"
@ -123,19 +32,10 @@ export const getLayout = (page) =>
getSiteLayout(<InfoPageLayout>{page}</InfoPageLayout>);
export const getLayoutProps = () => {
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 },
props: { metaTags: { ...DEFAULT_METATAGS }, preconnects },
};
};
export default InfoPageLayout;