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

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

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

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

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

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

@ -17,7 +17,7 @@ import {
SITEMAP, SITEMAP,
BACKGROUND_COLOR, BACKGROUND_COLOR,
} from "../core/constants"; } from "../core/constants";
import { FaGithub, FaTwitter, FaDiscord } from "react-icons/fa"; import { FaGithub, FaTwitter, FaDiscord, FaLinkedin } from "react-icons/fa";
import moment from "moment"; import moment from "moment";
const LINKS_SIZES = { const LINKS_SIZES = {
@ -87,6 +87,9 @@ const Footer = () => (
<Stack> <Stack>
<Text fontWeight="semibold">Follow Us</Text> <Text fontWeight="semibold">Follow Us</Text>
<Stack direction={"row"} spacing={6}> <Stack direction={"row"} spacing={6}>
<SocialButton label={"Discord"} href={"/discordleed"}>
<FaDiscord />
</SocialButton>
<SocialButton <SocialButton
label={"Twitter"} label={"Twitter"}
href={"https://twitter.com/moonstreamto"} href={"https://twitter.com/moonstreamto"}
@ -99,8 +102,11 @@ const Footer = () => (
> >
<FaGithub /> <FaGithub />
</SocialButton> </SocialButton>
<SocialButton label={"Discord"} href={"/discordleed"}> <SocialButton
<FaDiscord /> label={"LinkedIn"}
href={"https://www.linkedin.com/company/moonstream/"}
>
<FaLinkedin />
</SocialButton> </SocialButton>
</Stack> </Stack>
</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}> <Text fontWeight={600} color={"gray.900"} mb={4}>
{atName} {atName}
</Text> </Text>
<Text <Text textAlign={"center"} px={3}>
textAlign={"center"}
color={useColorModeValue("blue.500", "gray.100")}
px={3}
>
{content} {content}
</Text> </Text>

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

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

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

@ -1,108 +1,18 @@
import React, { useContext, useState, useEffect, useLayoutEffect } from "react"; import React, { useContext } from "react";
import { Flex, useMediaQuery, Stack } from "@chakra-ui/react"; import { Flex, Stack } from "@chakra-ui/react";
import UIContext from "../core/providers/UIProvider/context"; 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"; 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 InfoPageLayout = ({ children }) => {
const ui = useContext(UIContext); 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%"; const margin = ui.isMobileView ? "6%" : "22%";
return ( return (
<Flex <Flex
bgPos="bottom" bgPos="bottom"
bgColor="transparent"
bgSize="cover" bgSize="cover"
backgroundImage={`url(${assets[`${background}`]})`} bgColor={BACKGROUND_COLOR}
minH="100vh" minH="100vh"
direction="column" direction="column"
alignItems="center" alignItems="center"
@ -119,19 +29,10 @@ export const getLayout = (page) =>
getSiteLayout(<InfoPageLayout>{page}</InfoPageLayout>); getSiteLayout(<InfoPageLayout>{page}</InfoPageLayout>);
export const getLayoutProps = () => { 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 preconnects = [{ rel: "preconnect", href: "https://s3.amazonaws.com" }];
const preloads = assetPreload.concat(preconnects);
return { return {
props: { metaTags: { ...DEFAULT_METATAGS }, preloads }, props: { metaTags: { ...DEFAULT_METATAGS }, preconnects },
}; };
}; };
export default InfoPageLayout; export default InfoPageLayout;

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

@ -1,106 +1,15 @@
import React, { useState, useEffect, useLayoutEffect } from "react"; import React from "react";
import { Flex, useMediaQuery, Stack } from "@chakra-ui/react"; import { Flex, Stack } from "@chakra-ui/react";
import { DEFAULT_METATAGS, AWS_ASSETS_PATH } from "../core/constants"; import { DEFAULT_METATAGS, BACKGROUND_COLOR } from "../core/constants";
import { getLayout as getSiteLayout } from "./index"; 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 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; const margin = 0;
return ( return (
<Flex <Flex
bgPos="bottom" bgPos="bottom"
bgColor="transparent" bgColor={BACKGROUND_COLOR}
bgSize="cover" bgSize="cover"
backgroundImage={`url(${assets[`${background}`]})`}
minH="100vh" minH="100vh"
direction="column" direction="column"
alignItems="center" alignItems="center"
@ -123,19 +32,10 @@ export const getLayout = (page) =>
getSiteLayout(<InfoPageLayout>{page}</InfoPageLayout>); getSiteLayout(<InfoPageLayout>{page}</InfoPageLayout>);
export const getLayoutProps = () => { 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 preconnects = [{ rel: "preconnect", href: "https://s3.amazonaws.com" }];
const preloads = assetPreload.concat(preconnects);
return { return {
props: { metaTags: { ...DEFAULT_METATAGS }, preloads }, props: { metaTags: { ...DEFAULT_METATAGS }, preconnects },
}; };
}; };
export default InfoPageLayout; export default InfoPageLayout;