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

Partial checkin for landing page redesign.

pull/678/head
Kellan Wampler 2022-10-05 14:22:35 -04:00
rodzic 01d0b8dd03
commit 8b03477763
8 zmienionych plików z 196 dodań i 162 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

15
frontend/pages/contact/index.js
Wyświetl plik

@ -29,7 +29,14 @@ const Contact = () => {
return ( return (
<Box> <Box>
<Box px="1.5rem" py={10} m="auto" mb={8} minHeight="100vh"> <Box
px="1.5rem"
py={10}
m="auto"
mb={8}
minHeight="100vh"
textColor="black"
>
<Icon <Icon
as={BiArrowBack} as={BiArrowBack}
w={["30px", "40px", "50px"]} w={["30px", "40px", "50px"]}
@ -63,9 +70,9 @@ const Contact = () => {
<Center> <Center>
<Text my={5} fontSize={["md", "lg"]} textAlign="center" width="60%"> <Text my={5} fontSize={["md", "lg"]} textAlign="center" width="60%">
<i> <i>
Click the button to submit your answers. We&apos;ll reach out We&apos;ll reach out directly within 3 business days after you
directly within 3 days. You will not receive any marketing emails submit this form. You won&apos;t be receiving any spam emails from
from us. us, only the most important technical updates.
</i> </i>
</Text> </Text>
</Center> </Center>

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

@ -1,10 +1,4 @@
import React, { import React, { useState, Suspense, useEffect, useContext } from "react";
useState,
Suspense,
useEffect,
useLayoutEffect,
useContext,
} from "react";
import { import {
Fade, Fade,
Flex, Flex,
@ -26,7 +20,11 @@ import {
} from "@chakra-ui/react"; } from "@chakra-ui/react";
import useUser from "../src/core/hooks/useUser"; import useUser from "../src/core/hooks/useUser";
import useRouter from "../src/core/hooks/useRouter"; import useRouter from "../src/core/hooks/useRouter";
import { AWS_ASSETS_PATH, DEFAULT_METATAGS } from "../src/core/constants"; import {
AWS_ASSETS_PATH,
DEFAULT_METATAGS,
BACKGROUND_COLOR,
} from "../src/core/constants";
import TrustedBadge from "../src/components/TrustedBadge"; import TrustedBadge from "../src/components/TrustedBadge";
import RouteButton from "../src/components/RouteButton"; import RouteButton from "../src/components/RouteButton";
import AnalyticsContext from "../src/core/providers/AnalyticsProvider/context"; import AnalyticsContext from "../src/core/providers/AnalyticsProvider/context";
@ -40,6 +38,7 @@ const HEADING_PROPS = {
}; };
const assets = { const assets = {
airdrop: `${AWS_ASSETS_PATH}/airdrop.png`,
arbitrum: `${AWS_ASSETS_PATH}/arbitrum_logo.png`, arbitrum: `${AWS_ASSETS_PATH}/arbitrum_logo.png`,
background720: `${AWS_ASSETS_PATH}/background720.png`, background720: `${AWS_ASSETS_PATH}/background720.png`,
background1920: `${AWS_ASSETS_PATH}/background720.png`, background1920: `${AWS_ASSETS_PATH}/background720.png`,
@ -50,12 +49,11 @@ const assets = {
cgcConference: `${AWS_ASSETS_PATH}/featured_by/cgc_conference_2022_logo.jpg`, cgcConference: `${AWS_ASSETS_PATH}/featured_by/cgc_conference_2022_logo.jpg`,
championsAscension: `${AWS_ASSETS_PATH}/featured_by/champions.png`, championsAscension: `${AWS_ASSETS_PATH}/featured_by/champions.png`,
cointelegraph: `${AWS_ASSETS_PATH}/featured_by/Cointelegraph_logo.png`, cointelegraph: `${AWS_ASSETS_PATH}/featured_by/Cointelegraph_logo.png`,
craftingRecipe: `${AWS_ASSETS_PATH}/crafting-recipe.png`,
cryptoGuilds: `${AWS_ASSETS_PATH}/crypto_guilds_logo.png`, cryptoGuilds: `${AWS_ASSETS_PATH}/crypto_guilds_logo.png`,
cryptoinsiders: `${AWS_ASSETS_PATH}/featured_by/crypto_insiders.png`, cryptoinsiders: `${AWS_ASSETS_PATH}/featured_by/crypto_insiders.png`,
cryptoslate: `${AWS_ASSETS_PATH}/featured_by/cs-media-logo-light.png`, cryptoslate: `${AWS_ASSETS_PATH}/featured_by/cs-media-logo-light.png`,
cryptoTraders: `${AWS_ASSETS_PATH}/crypto+traders.png`,
cryptoUnicorns: `${AWS_ASSETS_PATH}/crypto_unicorns_logo.png`, cryptoUnicorns: `${AWS_ASSETS_PATH}/crypto_unicorns_logo.png`,
DAO: `${AWS_ASSETS_PATH}/DAO .png`,
educativesessions: `${AWS_ASSETS_PATH}/featured_by/educative_logo.png`, educativesessions: `${AWS_ASSETS_PATH}/featured_by/educative_logo.png`,
ethereum_blockchain: `${AWS_ASSETS_PATH}/ethereum_blockchain_logo.png`, ethereum_blockchain: `${AWS_ASSETS_PATH}/ethereum_blockchain_logo.png`,
evmos: `${AWS_ASSETS_PATH}/evmos_logo.png`, evmos: `${AWS_ASSETS_PATH}/evmos_logo.png`,
@ -63,9 +61,9 @@ const assets = {
game7io: `${AWS_ASSETS_PATH}/featured_by/game7io_logo.png`, game7io: `${AWS_ASSETS_PATH}/featured_by/game7io_logo.png`,
gnosis: `${AWS_ASSETS_PATH}/gnosis_chain_logo.png`, gnosis: `${AWS_ASSETS_PATH}/gnosis_chain_logo.png`,
laguna: `${AWS_ASSETS_PATH}/featured_by/laguna_logo.svg`, laguna: `${AWS_ASSETS_PATH}/featured_by/laguna_logo.svg`,
lender: `${AWS_ASSETS_PATH}/lender.png`,
meetup: `${AWS_ASSETS_PATH}/featured_by/meetup_logo.png`, meetup: `${AWS_ASSETS_PATH}/featured_by/meetup_logo.png`,
NFT: `${AWS_ASSETS_PATH}/NFT.png`, minigame: `${AWS_ASSETS_PATH}/minigame.png`,
openLootbox: `${AWS_ASSETS_PATH}/open-lootbox.png`,
optimism: `${AWS_ASSETS_PATH}/optimism_logo.png`, optimism: `${AWS_ASSETS_PATH}/optimism_logo.png`,
orangedao: `${AWS_ASSETS_PATH}/featured_by/orangedao_logo.png`, orangedao: `${AWS_ASSETS_PATH}/featured_by/orangedao_logo.png`,
polygon: `${AWS_ASSETS_PATH}/polygon_blockchain_logo.png`, polygon: `${AWS_ASSETS_PATH}/polygon_blockchain_logo.png`,
@ -94,33 +92,33 @@ const Homepage = () => {
const { buttonReport } = useContext(AnalyticsContext); const { buttonReport } = useContext(AnalyticsContext);
useEffect(() => { // useEffect(() => {
assets["background720"] = `${AWS_ASSETS_PATH}/background720.png`; // assets["background720"] = `${AWS_ASSETS_PATH}/background720.png`;
assets["background1920"] = `${AWS_ASSETS_PATH}/background1920.png`; // assets["background1920"] = `${AWS_ASSETS_PATH}/background1920.png`;
assets["background2880"] = `${AWS_ASSETS_PATH}/background2880.png`; // assets["background2880"] = `${AWS_ASSETS_PATH}/background2880.png`;
assets["background3840"] = `${AWS_ASSETS_PATH}/background3840.png`; // assets["background3840"] = `${AWS_ASSETS_PATH}/background3840.png`;
}, []); // }, []);
useLayoutEffect(() => { // useLayoutEffect(() => {
if (backgroundLoaded3840) { // if (backgroundLoaded3840) {
setBackground("background3840"); // setBackground("background3840");
} else if (backgroundLoaded2880) { // } else if (backgroundLoaded2880) {
setBackground("background2880"); // setBackground("background2880");
} else if (backgroundLoaded1920) { // } else if (backgroundLoaded1920) {
setBackground("background1920"); // setBackground("background1920");
} else { // } else {
setBackground("background720"); // setBackground("background720");
} // }
}, [ // }, [
isLargerThan720px, // isLargerThan720px,
isLargerThan1920px, // isLargerThan1920px,
isLargerThan2880px, // isLargerThan2880px,
isLargerThan3840px, // isLargerThan3840px,
backgroundLoaded720, // backgroundLoaded720,
backgroundLoaded1920, // backgroundLoaded1920,
backgroundLoaded2880, // backgroundLoaded2880,
backgroundLoaded3840, // backgroundLoaded3840,
]); // ]);
useEffect(() => { useEffect(() => {
if ( if (
@ -139,40 +137,41 @@ const Homepage = () => {
} }
}, [isInit, router]); }, [isInit, router]);
useLayoutEffect(() => { // useLayoutEffect(() => {
const imageLoader720 = new Image(); // const imageLoader720 = new Image();
imageLoader720.src = `${AWS_ASSETS_PATH}/background720.png`; // imageLoader720.src = `${AWS_ASSETS_PATH}/background720.png`;
imageLoader720.onload = () => { // imageLoader720.onload = () => {
setBackgroundLoaded720(true); // setBackgroundLoaded720(true);
}; // };
}, []); // }, []);
useLayoutEffect(() => { // useLayoutEffect(() => {
const imageLoader1920 = new Image(); // const imageLoader1920 = new Image();
imageLoader1920.src = `${AWS_ASSETS_PATH}/background1920.png`; // imageLoader1920.src = `${AWS_ASSETS_PATH}/background1920.png`;
imageLoader1920.onload = () => { // imageLoader1920.onload = () => {
setBackgroundLoaded1920(true); // setBackgroundLoaded1920(true);
}; // };
}, []); // }, []);
useLayoutEffect(() => { // useLayoutEffect(() => {
const imageLoader2880 = new Image(); // const imageLoader2880 = new Image();
imageLoader2880.src = `${AWS_ASSETS_PATH}/background2880.png`; // imageLoader2880.src = `${AWS_ASSETS_PATH}/background2880.png`;
imageLoader2880.onload = () => { // imageLoader2880.onload = () => {
setBackgroundLoaded2880(true); // setBackgroundLoaded2880(true);
}; // };
}, []); // }, []);
useLayoutEffect(() => { // useLayoutEffect(() => {
const imageLoader3840 = new Image(); // const imageLoader3840 = new Image();
imageLoader3840.src = `${AWS_ASSETS_PATH}/background3840.png`; // imageLoader3840.src = `${AWS_ASSETS_PATH}/background3840.png`;
imageLoader3840.onload = () => { // imageLoader3840.onload = () => {
setBackgroundLoaded3840(true); // setBackgroundLoaded3840(true);
}; // };
}, []); // }, []);
const blueBackgroundColor = "#212698"; const blueBackgroundColor = "#212698";
const lightOrangeColor = "#FF9473"; const lightOrangeColor = "#FF9473";
const cardBackgroundColor = "#353535";
const Feature = ({ title, altText, image, ...props }) => { const Feature = ({ title, altText, image, ...props }) => {
return ( return (
@ -184,24 +183,27 @@ const Homepage = () => {
px={1} px={1}
alignItems="center" alignItems="center"
borderRadius="12px" borderRadius="12px"
borderColor="blue.700" borderColor="white"
bgColor={"blue.800"} bgColor={cardBackgroundColor}
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, 3, 3, 4, 8, 12]} m={[2, 3, 3, 4, 8, 12]}
pb={2} pb={2}
minH={["225px", "290px", "400px", null]} py={4}
w="240px"
h="300px"
> >
<ChakraImage <ChakraImage
boxSize={["150px", "220px", "xs", null, "xs"]} boxSize={["150px", "220px", "200px", null]}
objectFit="contain" objectFit="contain"
src={image} src={image}
alt={altText} alt={altText}
/> />
<Heading <Heading
textAlign="center" textAlign="center"
fontSize={["md", "md", "lg", "3xl", "4xl"]} fontSize={["sm", "sm", "md", "md", null]}
fontWeight="normal"
> >
{title} {title}
</Heading> </Heading>
@ -220,7 +222,7 @@ const Homepage = () => {
sx={{ scrollBehavior: "smooth" }} sx={{ scrollBehavior: "smooth" }}
bgSize="cover" bgSize="cover"
id="page:landing" id="page:landing"
bgColor={"blue.50"} bgColor={BACKGROUND_COLOR}
> >
<Flex <Flex
direction="column" direction="column"
@ -238,12 +240,16 @@ const Homepage = () => {
border="none" border="none"
boxSizing="content-box" boxSizing="content-box"
> >
<GridItem colSpan="12" bgColor={"blue.50"} id="Header grid item"> <GridItem
colSpan="12"
bgColor={BACKGROUND_COLOR}
id="Header grid item"
>
<chakra.header boxSize="full" minH={["60vh", "100vh"]} mb={0}> <chakra.header boxSize="full" minH={["60vh", "100vh"]} mb={0}>
<Box <Box
bgPos="bottom" bgPos="bottom"
bgColor="transparent" // bgColor="transparent"
backgroundImage={`url(${assets[`${background}`]})`} // backgroundImage={`url(${assets[`${background}`]})`}
bgSize="cover" bgSize="cover"
boxSize="full" boxSize="full"
> >
@ -295,7 +301,7 @@ const Homepage = () => {
> >
<Center> <Center>
<RouteButton <RouteButton
variant="orangeAndBlue" variant="whiteOnOrange"
minW={[ minW={[
"220px", "220px",
"250px", "250px",
@ -313,14 +319,15 @@ const Homepage = () => {
}} }}
href={"/contact"} href={"/contact"}
> >
Make my game web3 Boost my game economy
</RouteButton> </RouteButton>
</Center> </Center>
<Center> <Center>
<RouteButton <RouteButton
variant="orangeAndBlue" variant="orangeAndBlue"
bg={blueBackgroundColor} bg="transparent"
borderColor={lightOrangeColor} borderWidth="2px"
borderColor="white"
textColor="white" textColor="white"
minW={[ minW={[
"220px", "220px",
@ -346,67 +353,57 @@ const Homepage = () => {
</Stack> </Stack>
</Stack> </Stack>
<Box <Box
bgColor="rgb(255, 255, 255, 0.7)" // bgColor="rgb(255, 255, 255, 0.7)"
w={[null, null, "40%"]} w={[null, null, "55%"]}
rounded={["lg", "xl", "2xl"]} // rounded={["lg", "xl", "2xl"]}
px={5}
> >
<HStack h="100%"> <HStack h="100%">
<Center w={[null, null, "40%"]} h="100%"> <Center w={[null, null, "43%"]} h="100%">
<Flex> <Flex w="100%">
<Center w="100%"> <HStack>
<VStack>
<Text <Text
fontSize={[ fontSize={[
"md", "md",
"xl", "xl",
"2xl", "2xl",
"3xl", "5xl",
"3xl", "5xl",
"3xl", "5xl",
]} ]}
fontWeight="bold" pr={4}
textColor={lightOrangeColor}
pt="20px"
> >
&gt;$3b &gt;$4b
</Text> </Text>
<Text pb="20px"> <Text>
transaction volume. transaction volume.
<br /> <br />
And growing And growing
</Text> </Text>
</VStack> </HStack>
</Center>
</Flex> </Flex>
</Center> </Center>
<Center w={[null, null, "60%"]} h="100%"> <Center w={[null, null, "57%"]} h="100%">
<Flex> <Flex w="100%" justifyContent="right">
{" "} <HStack>
<Center w="100%">
<VStack>
<Text <Text
fontSize={[ fontSize={[
"md", "md",
"xl", "xl",
"2xl", "2xl",
"3xl", "5xl",
"3xl", "5xl",
"3xl", "5xl",
]} ]}
fontWeight="bold" pr={4}
textColor={lightOrangeColor}
pt="20px"
> >
&gt;44k &gt;44k
</Text> </Text>
<Text pb="20px"> <Text w="100%">
active users in game economies active users in game economies
<br /> <br />
built with our engine built with our engine
</Text> </Text>
</VStack> </HStack>
</Center>
</Flex> </Flex>
</Center> </Center>
</HStack> </HStack>
@ -416,8 +413,13 @@ const Homepage = () => {
</chakra.header> </chakra.header>
</GridItem> </GridItem>
<GridItem px="7%" py={10} colSpan="12" bgColor="white.100"> <GridItem px="7%" py={10} colSpan="12" bgColor={BACKGROUND_COLOR}>
<VStack> <VStack
bgColor="white"
rounded="3xl"
textColor="#1A1D22"
py={10}
>
<Heading <Heading
as="h3" as="h3"
{...HEADING_PROPS} {...HEADING_PROPS}
@ -551,7 +553,7 @@ const Homepage = () => {
px={["7%", null, "12%", "15%"]} px={["7%", null, "12%", "15%"]}
colSpan="12" colSpan="12"
pt={12} pt={12}
bgColor={"blue.900"} bgColor={BACKGROUND_COLOR}
textColor="white" textColor="white"
> >
<Heading {...HEADING_PROPS} textAlign="center" pb={6} as="h2"> <Heading {...HEADING_PROPS} textAlign="center" pb={6} as="h2">
@ -575,7 +577,7 @@ const Homepage = () => {
title="Assemble Lootboxes" title="Assemble Lootboxes"
altText="Lootboxes" altText="Lootboxes"
path="/features/#lootboxes" path="/features/#lootboxes"
image={assets["cryptoTraders"]} image={assets["openLootbox"]}
href="/features/#lootboxes" href="/features/#lootboxes"
onClick={() => { onClick={() => {
buttonReport("Lootboxes", "features", "landing"); buttonReport("Lootboxes", "features", "landing");
@ -585,7 +587,7 @@ const Homepage = () => {
title="Create Crafting Recipes" title="Create Crafting Recipes"
altText="Crafting Recipes" altText="Crafting Recipes"
path="/features/#crafting" path="/features/#crafting"
image={assets["NFT"]} image={assets["craftingRecipe"]}
href="/features/#crafting" href="/features/#crafting"
onClick={() => { onClick={() => {
buttonReport("Crafting Recipes", "features", "landing"); buttonReport("Crafting Recipes", "features", "landing");
@ -595,7 +597,7 @@ const Homepage = () => {
title="Deploy Minigames" title="Deploy Minigames"
altText="Minigames" altText="Minigames"
path="/features/#minigames" path="/features/#minigames"
image={assets["DAO"]} image={assets["minigame"]}
href="/features/#minigames" href="/features/#minigames"
onClick={() => { onClick={() => {
buttonReport("Minigames", "features", "landing"); buttonReport("Minigames", "features", "landing");
@ -605,7 +607,7 @@ const Homepage = () => {
title="Manage Airdrops" title="Manage Airdrops"
altText="Airdrops" altText="Airdrops"
path="/features/#airdrops" path="/features/#airdrops"
image={assets["lender"]} image={assets["airdrop"]}
href="/features/#airdrops" href="/features/#airdrops"
onClick={() => { onClick={() => {
buttonReport("Airdrops", "features", "landing"); buttonReport("Airdrops", "features", "landing");
@ -619,7 +621,8 @@ const Homepage = () => {
> >
<Center> <Center>
<RouteButton <RouteButton
variant="orangeAndBlue" variant="whiteOnOrange"
backgroundColor="#F56646"
minW={[ minW={[
"250px", "250px",
"290px", "290px",
@ -639,13 +642,14 @@ const Homepage = () => {
<Center> <Center>
<RouteButton <RouteButton
variant="orangeAndBlue" variant="orangeAndBlue"
bg={blueBackgroundColor} bg="transparent"
borderColor={lightOrangeColor} borderWidth="2px"
borderColor="white"
textColor="white" textColor="white"
minW={[ minW={[
"220px",
"250px",
"250px", "250px",
"290px",
"300px",
"300px", "300px",
"350px", "350px",
"400px", "400px",
@ -668,7 +672,7 @@ const Homepage = () => {
px={["7%", null, "12%", "15%"]} px={["7%", null, "12%", "15%"]}
py={10} py={10}
colSpan="12" colSpan="12"
bgColor="white.100" bgColor={BACKGROUND_COLOR}
minH="50vh" minH="50vh"
> >
<Heading {...HEADING_PROPS} textAlign="center" as="h2" pb={10}> <Heading {...HEADING_PROPS} textAlign="center" as="h2" pb={10}>
@ -870,7 +874,7 @@ const Homepage = () => {
px={["7%", "7%", "7%", "15%"]} px={["7%", "7%", "7%", "15%"]}
py={10} py={10}
colSpan="12" colSpan="12"
bgColor="white.100" bgColor={BACKGROUND_COLOR}
minH="100vh" minH="100vh"
> >
<Heading {...HEADING_PROPS} textAlign="center" as="h2" pb={10}> <Heading {...HEADING_PROPS} textAlign="center" as="h2" pb={10}>
@ -884,7 +888,7 @@ const Homepage = () => {
px={["7%", null, "12%", "15%"]} px={["7%", null, "12%", "15%"]}
py={10} py={10}
colSpan="12" colSpan="12"
bgColor="white.100" bgColor={BACKGROUND_COLOR}
> >
<Heading {...HEADING_PROPS} textAlign="center" pb={14} as="h2"> <Heading {...HEADING_PROPS} textAlign="center" pb={14} as="h2">
Our Workflow Our Workflow
@ -971,7 +975,7 @@ const Homepage = () => {
px="7%" px="7%"
py={12} py={12}
colSpan="12" colSpan="12"
bgColor="blue.900" bgColor={BACKGROUND_COLOR}
textColor="white" textColor="white"
minH="40vh" minH="40vh"
> >
@ -1039,7 +1043,7 @@ const Homepage = () => {
px={["7%", null, "12%", "15%"]} px={["7%", null, "12%", "15%"]}
py={10} py={10}
colSpan="12" colSpan="12"
bgColor="white" bgColor={BACKGROUND_COLOR}
minH="50vh" minH="50vh"
> >
<VStack <VStack

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

@ -130,6 +130,22 @@ const variantOrangeAndBlue = () => {
}; };
}; };
const variantWhiteOnOrange = () => {
return {
alignItems: "center",
justifyContent: "center",
border: "solid transparent",
borderRadius: "70px",
shadow: "md",
variant: "solid",
fontSize: ["sm", "md", "lg", "lg", "xl", "xl"],
textColor: "white",
bg: "#FF8B73",
py: 5,
px: 5,
};
};
const Button = { const Button = {
// 1. We can update the base styles // 1. We can update the base styles
baseStyle: () => ({ baseStyle: () => ({
@ -168,6 +184,7 @@ const Button = {
outline: variantOutline, outline: variantOutline,
link: variantLink, link: variantLink,
orangeAndBlue: variantOrangeAndBlue, orangeAndBlue: variantOrangeAndBlue,
whiteOnOrange: variantWhiteOnOrange,
}, },
}; };
export default Button; export default Button;

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",
}, },
}, },
}, },

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

@ -10,6 +10,8 @@ import {
import { AddIcon, MinusIcon } from "@chakra-ui/icons"; import { AddIcon, MinusIcon } from "@chakra-ui/icons";
const _FAQCard = ({ heading, headingProps, panelContent }) => { const _FAQCard = ({ heading, headingProps, panelContent }) => {
const iconColor = "#F56646";
return ( return (
<AccordionItem> <AccordionItem>
{({ isExpanded }) => ( {({ isExpanded }) => (
@ -25,9 +27,9 @@ const _FAQCard = ({ heading, headingProps, panelContent }) => {
</Heading> </Heading>
</Box> </Box>
{isExpanded ? ( {isExpanded ? (
<MinusIcon fontSize="12px" /> <MinusIcon color={iconColor} fontSize="12px" />
) : ( ) : (
<AddIcon fontSize="12px" /> <AddIcon color={iconColor} fontSize="12px" />
)} )}
</AccordionButton> </AccordionButton>
<AccordionPanel <AccordionPanel

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

@ -64,7 +64,7 @@ const LandingNavbar = () => {
{!ui.isMobileView && ( {!ui.isMobileView && (
<> <>
<Spacer /> <Spacer />
<ButtonGroup variant="link" colorScheme="orange" spacing={4} pr={16}> <ButtonGroup variant="link" spacing={4} pr={16}>
{SITEMAP.map((item, idx) => { {SITEMAP.map((item, idx) => {
return ( return (
<React.Fragment key={`Fragment-${idx}`}> <React.Fragment key={`Fragment-${idx}`}>

4
frontend/src/components/Navbar.js
Wyświetl plik

@ -1,6 +1,7 @@
import React, { Suspense, useContext } from "react"; import React, { Suspense, useContext } from "react";
import { Flex } from "@chakra-ui/react"; import { Flex } from "@chakra-ui/react";
import UIContext from "../core/providers/UIProvider/context"; import UIContext from "../core/providers/UIProvider/context";
import { BACKGROUND_COLOR } from "../core/constants";
import LandingNavbar from "./LandingNavbar"; import LandingNavbar from "./LandingNavbar";
const AppNavbar = React.lazy(() => import("./AppNavbar")); const AppNavbar = React.lazy(() => import("./AppNavbar"));
@ -16,7 +17,8 @@ const Navbar = () => {
id="Navbar" id="Navbar"
minH="3rem" minH="3rem"
maxH="3rem" maxH="3rem"
bgColor="blue.1200" bgColor={BACKGROUND_COLOR}
borderBottom="1px solid white"
direction="row" direction="row"
w="100%" w="100%"
overflow="hidden" overflow="hidden"

2
frontend/src/core/constants.js
Wyświetl plik

@ -8,6 +8,8 @@ export const BUGOUT_ENDPOINTS = {
Web: "parasite", Web: "parasite",
}; };
export const BACKGROUND_COLOR = "#1A1D22";
export const DEFAULT_METATAGS = { export const DEFAULT_METATAGS = {
title: "Build, Scale, and Monitor Your Game on the Blockchain", title: "Build, Scale, and Monitor Your Game on the Blockchain",
description: description: