From 8b03477763c7f9baf158628044f63fd811263540 Mon Sep 17 00:00:00 2001 From: Kellan Wampler Date: Wed, 5 Oct 2022 14:22:35 -0400 Subject: [PATCH 1/6] Partial checkin for landing page redesign. --- frontend/pages/contact/index.js | 15 +- frontend/pages/index.js | 310 ++++++++++++----------- frontend/src/Theme/Button/index.js | 17 ++ frontend/src/Theme/theme.js | 2 +- frontend/src/components/FAQCard.js | 6 +- frontend/src/components/LandingNavbar.js | 2 +- frontend/src/components/Navbar.js | 4 +- frontend/src/core/constants.js | 2 + 8 files changed, 196 insertions(+), 162 deletions(-) diff --git a/frontend/pages/contact/index.js b/frontend/pages/contact/index.js index 5183640a..77ccade5 100644 --- a/frontend/pages/contact/index.js +++ b/frontend/pages/contact/index.js @@ -29,7 +29,14 @@ const Contact = () => { return ( - + {
- Click the button to submit your answers. We'll reach out - directly within 3 days. You will not receive any marketing emails - from us. + We'll reach out directly within 3 business days after you + submit this form. You won't be receiving any spam emails from + us, only the most important technical updates.
diff --git a/frontend/pages/index.js b/frontend/pages/index.js index 47d46aa4..aa1727ea 100644 --- a/frontend/pages/index.js +++ b/frontend/pages/index.js @@ -1,10 +1,4 @@ -import React, { - useState, - Suspense, - useEffect, - useLayoutEffect, - useContext, -} from "react"; +import React, { useState, Suspense, useEffect, useContext } from "react"; import { Fade, Flex, @@ -26,7 +20,11 @@ import { } from "@chakra-ui/react"; import useUser from "../src/core/hooks/useUser"; 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 RouteButton from "../src/components/RouteButton"; import AnalyticsContext from "../src/core/providers/AnalyticsProvider/context"; @@ -40,6 +38,7 @@ const HEADING_PROPS = { }; const assets = { + airdrop: `${AWS_ASSETS_PATH}/airdrop.png`, arbitrum: `${AWS_ASSETS_PATH}/arbitrum_logo.png`, background720: `${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`, championsAscension: `${AWS_ASSETS_PATH}/featured_by/champions.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`, cryptoinsiders: `${AWS_ASSETS_PATH}/featured_by/crypto_insiders.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`, - DAO: `${AWS_ASSETS_PATH}/DAO .png`, educativesessions: `${AWS_ASSETS_PATH}/featured_by/educative_logo.png`, ethereum_blockchain: `${AWS_ASSETS_PATH}/ethereum_blockchain_logo.png`, evmos: `${AWS_ASSETS_PATH}/evmos_logo.png`, @@ -63,9 +61,9 @@ const assets = { game7io: `${AWS_ASSETS_PATH}/featured_by/game7io_logo.png`, gnosis: `${AWS_ASSETS_PATH}/gnosis_chain_logo.png`, laguna: `${AWS_ASSETS_PATH}/featured_by/laguna_logo.svg`, - lender: `${AWS_ASSETS_PATH}/lender.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`, orangedao: `${AWS_ASSETS_PATH}/featured_by/orangedao_logo.png`, polygon: `${AWS_ASSETS_PATH}/polygon_blockchain_logo.png`, @@ -94,33 +92,33 @@ const Homepage = () => { const { buttonReport } = useContext(AnalyticsContext); - useEffect(() => { - assets["background720"] = `${AWS_ASSETS_PATH}/background720.png`; - assets["background1920"] = `${AWS_ASSETS_PATH}/background1920.png`; - assets["background2880"] = `${AWS_ASSETS_PATH}/background2880.png`; - assets["background3840"] = `${AWS_ASSETS_PATH}/background3840.png`; - }, []); + // useEffect(() => { + // assets["background720"] = `${AWS_ASSETS_PATH}/background720.png`; + // assets["background1920"] = `${AWS_ASSETS_PATH}/background1920.png`; + // assets["background2880"] = `${AWS_ASSETS_PATH}/background2880.png`; + // assets["background3840"] = `${AWS_ASSETS_PATH}/background3840.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(() => { + // 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, + // ]); useEffect(() => { if ( @@ -139,40 +137,41 @@ const Homepage = () => { } }, [isInit, router]); - useLayoutEffect(() => { - const imageLoader720 = new Image(); - imageLoader720.src = `${AWS_ASSETS_PATH}/background720.png`; - imageLoader720.onload = () => { - setBackgroundLoaded720(true); - }; - }, []); + // useLayoutEffect(() => { + // const imageLoader720 = new Image(); + // imageLoader720.src = `${AWS_ASSETS_PATH}/background720.png`; + // imageLoader720.onload = () => { + // setBackgroundLoaded720(true); + // }; + // }, []); - useLayoutEffect(() => { - const imageLoader1920 = new Image(); - imageLoader1920.src = `${AWS_ASSETS_PATH}/background1920.png`; - imageLoader1920.onload = () => { - setBackgroundLoaded1920(true); - }; - }, []); + // useLayoutEffect(() => { + // const imageLoader1920 = new Image(); + // imageLoader1920.src = `${AWS_ASSETS_PATH}/background1920.png`; + // imageLoader1920.onload = () => { + // setBackgroundLoaded1920(true); + // }; + // }, []); - useLayoutEffect(() => { - const imageLoader2880 = new Image(); - imageLoader2880.src = `${AWS_ASSETS_PATH}/background2880.png`; - imageLoader2880.onload = () => { - setBackgroundLoaded2880(true); - }; - }, []); + // useLayoutEffect(() => { + // const imageLoader2880 = new Image(); + // imageLoader2880.src = `${AWS_ASSETS_PATH}/background2880.png`; + // imageLoader2880.onload = () => { + // setBackgroundLoaded2880(true); + // }; + // }, []); - useLayoutEffect(() => { - const imageLoader3840 = new Image(); - imageLoader3840.src = `${AWS_ASSETS_PATH}/background3840.png`; - imageLoader3840.onload = () => { - setBackgroundLoaded3840(true); - }; - }, []); + // useLayoutEffect(() => { + // const imageLoader3840 = new Image(); + // imageLoader3840.src = `${AWS_ASSETS_PATH}/background3840.png`; + // imageLoader3840.onload = () => { + // setBackgroundLoaded3840(true); + // }; + // }, []); const blueBackgroundColor = "#212698"; const lightOrangeColor = "#FF9473"; + const cardBackgroundColor = "#353535"; const Feature = ({ title, altText, image, ...props }) => { return ( @@ -184,24 +183,27 @@ const Homepage = () => { px={1} alignItems="center" borderRadius="12px" - borderColor="blue.700" - bgColor={"blue.800"} + borderColor="white" + bgColor={cardBackgroundColor} borderWidth={"1px"} _hover={{ transform: "scale(1.05)", transition: "0.42s" }} cursor="pointer" m={[2, 3, 3, 4, 8, 12]} pb={2} - minH={["225px", "290px", "400px", null]} + py={4} + w="240px" + h="300px" > {title} @@ -220,7 +222,7 @@ const Homepage = () => { sx={{ scrollBehavior: "smooth" }} bgSize="cover" id="page:landing" - bgColor={"blue.50"} + bgColor={BACKGROUND_COLOR} > { border="none" boxSizing="content-box" > - + @@ -295,7 +301,7 @@ const Homepage = () => { >
{ }} href={"/contact"} > - Make my game web3 + Boost my game economy
{ -
- -
- - - >$3b - - - transaction volume. -
- And growing - - -
+
+ + + + >$4b + + + transaction volume. +
+ And growing + +
-
- - {" "} -
- - - >44k - - - active users in game economies -
- built with our engine - - -
+
+ + + + >44k + + + active users in game economies +
+ built with our engine + +
@@ -416,8 +413,13 @@ const Homepage = () => { - - + + { px={["7%", null, "12%", "15%"]} colSpan="12" pt={12} - bgColor={"blue.900"} + bgColor={BACKGROUND_COLOR} textColor="white" > @@ -575,7 +577,7 @@ const Homepage = () => { title="Assemble Lootboxes" altText="Lootboxes" path="/features/#lootboxes" - image={assets["cryptoTraders"]} + image={assets["openLootbox"]} href="/features/#lootboxes" onClick={() => { buttonReport("Lootboxes", "features", "landing"); @@ -585,7 +587,7 @@ const Homepage = () => { title="Create Crafting Recipes" altText="Crafting Recipes" path="/features/#crafting" - image={assets["NFT"]} + image={assets["craftingRecipe"]} href="/features/#crafting" onClick={() => { buttonReport("Crafting Recipes", "features", "landing"); @@ -595,7 +597,7 @@ const Homepage = () => { title="Deploy Minigames" altText="Minigames" path="/features/#minigames" - image={assets["DAO"]} + image={assets["minigame"]} href="/features/#minigames" onClick={() => { buttonReport("Minigames", "features", "landing"); @@ -605,7 +607,7 @@ const Homepage = () => { title="Manage Airdrops" altText="Airdrops" path="/features/#airdrops" - image={assets["lender"]} + image={assets["airdrop"]} href="/features/#airdrops" onClick={() => { buttonReport("Airdrops", "features", "landing"); @@ -619,7 +621,8 @@ const Homepage = () => { >
{
{ px={["7%", null, "12%", "15%"]} py={10} colSpan="12" - bgColor="white.100" + bgColor={BACKGROUND_COLOR} minH="50vh" > @@ -870,7 +874,7 @@ const Homepage = () => { px={["7%", "7%", "7%", "15%"]} py={10} colSpan="12" - bgColor="white.100" + bgColor={BACKGROUND_COLOR} minH="100vh" > @@ -884,7 +888,7 @@ const Homepage = () => { px={["7%", null, "12%", "15%"]} py={10} colSpan="12" - bgColor="white.100" + bgColor={BACKGROUND_COLOR} > Our Workflow @@ -971,7 +975,7 @@ const Homepage = () => { px="7%" py={12} colSpan="12" - bgColor="blue.900" + bgColor={BACKGROUND_COLOR} textColor="white" minH="40vh" > @@ -1039,7 +1043,7 @@ const Homepage = () => { px={["7%", null, "12%", "15%"]} py={10} colSpan="12" - bgColor="white" + bgColor={BACKGROUND_COLOR} minH="50vh" > { }; }; +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 = { // 1. We can update the base styles baseStyle: () => ({ @@ -168,6 +184,7 @@ const Button = { outline: variantOutline, link: variantLink, orangeAndBlue: variantOrangeAndBlue, + whiteOnOrange: variantWhiteOnOrange, }, }; export default Button; diff --git a/frontend/src/Theme/theme.js b/frontend/src/Theme/theme.js index 6269fd18..a7b65cfe 100644 --- a/frontend/src/Theme/theme.js +++ b/frontend/src/Theme/theme.js @@ -41,7 +41,7 @@ const theme = extendTheme({ styles: { global: { body: { - color: "blue.1200", + color: "white", }, }, }, diff --git a/frontend/src/components/FAQCard.js b/frontend/src/components/FAQCard.js index e38dd4f8..5ee35943 100644 --- a/frontend/src/components/FAQCard.js +++ b/frontend/src/components/FAQCard.js @@ -10,6 +10,8 @@ import { import { AddIcon, MinusIcon } from "@chakra-ui/icons"; const _FAQCard = ({ heading, headingProps, panelContent }) => { + const iconColor = "#F56646"; + return ( {({ isExpanded }) => ( @@ -25,9 +27,9 @@ const _FAQCard = ({ heading, headingProps, panelContent }) => { {isExpanded ? ( - + ) : ( - + )} { {!ui.isMobileView && ( <> - + {SITEMAP.map((item, idx) => { return ( diff --git a/frontend/src/components/Navbar.js b/frontend/src/components/Navbar.js index 51e50132..cde2d082 100644 --- a/frontend/src/components/Navbar.js +++ b/frontend/src/components/Navbar.js @@ -1,6 +1,7 @@ import React, { Suspense, useContext } from "react"; import { Flex } from "@chakra-ui/react"; import UIContext from "../core/providers/UIProvider/context"; +import { BACKGROUND_COLOR } from "../core/constants"; import LandingNavbar from "./LandingNavbar"; const AppNavbar = React.lazy(() => import("./AppNavbar")); @@ -16,7 +17,8 @@ const Navbar = () => { id="Navbar" minH="3rem" maxH="3rem" - bgColor="blue.1200" + bgColor={BACKGROUND_COLOR} + borderBottom="1px solid white" direction="row" w="100%" overflow="hidden" diff --git a/frontend/src/core/constants.js b/frontend/src/core/constants.js index b457f531..3dc7de62 100644 --- a/frontend/src/core/constants.js +++ b/frontend/src/core/constants.js @@ -8,6 +8,8 @@ export const BUGOUT_ENDPOINTS = { Web: "parasite", }; +export const BACKGROUND_COLOR = "#1A1D22"; + export const DEFAULT_METATAGS = { title: "Build, Scale, and Monitor Your Game on the Blockchain", description: From 4fbcdf0422babaf8cdb0667037a72d33f7dba7b0 Mon Sep 17 00:00:00 2001 From: Kellan Wampler Date: Wed, 12 Oct 2022 23:11:21 -0400 Subject: [PATCH 2/6] Updates to landing page for mobile. --- frontend/pages/_document.js | 4 +- frontend/pages/index.js | 483 +++++++++--------- frontend/src/Theme/theme.js | 8 +- .../src/components/EngineOverviewDiagram.js | 19 +- frontend/src/components/FAQCard.js | 9 +- frontend/src/components/Footer.js | 28 +- frontend/src/components/LandingNavbar.js | 15 +- frontend/src/components/SVGGraphics/Cloud.js | 4 +- .../src/components/SVGGraphics/Rectangle.js | 4 +- .../src/components/SVGGraphics/RoundedRect.js | 4 +- frontend/src/components/Sidebar.js | 12 +- frontend/src/components/TrustedBadge.js | 11 +- frontend/src/core/constants.js | 4 +- 13 files changed, 318 insertions(+), 287 deletions(-) diff --git a/frontend/pages/_document.js b/frontend/pages/_document.js index e65fc2f1..ca07fcd2 100644 --- a/frontend/pages/_document.js +++ b/frontend/pages/_document.js @@ -35,10 +35,10 @@ export default class MyDocument extends Document { diff --git a/frontend/pages/index.js b/frontend/pages/index.js index aa1727ea..05555126 100644 --- a/frontend/pages/index.js +++ b/frontend/pages/index.js @@ -17,7 +17,10 @@ import { HStack, VStack, Accordion, + Icon, + Spacer, } from "@chakra-ui/react"; +import { HiOutlineChatAlt2 } from "react-icons/hi"; import useUser from "../src/core/hooks/useUser"; import useRouter from "../src/core/hooks/useRouter"; import { @@ -30,7 +33,6 @@ import RouteButton from "../src/components/RouteButton"; import AnalyticsContext from "../src/core/providers/AnalyticsProvider/context"; import RouterLink from "next/link"; import FAQCard from "../src/components/FAQCard"; -import EngineOverviewDiagram from "../src/components/EngineOverviewDiagram"; const HEADING_PROPS = { fontWeight: "700", @@ -44,24 +46,24 @@ const assets = { background1920: `${AWS_ASSETS_PATH}/background720.png`, background2880: `${AWS_ASSETS_PATH}/background720.png`, background3840: `${AWS_ASSETS_PATH}/background720.png`, - bc101: `${AWS_ASSETS_PATH}/featured_by/blockchain101_logo.png`, + bc101: `${AWS_ASSETS_PATH}/featured_by/blockchain-101-white.png`, bulliverse: `${AWS_ASSETS_PATH}/bullieverse_logo.png`, cgcConference: `${AWS_ASSETS_PATH}/featured_by/cgc_conference_2022_logo.jpg`, championsAscension: `${AWS_ASSETS_PATH}/featured_by/champions.png`, - cointelegraph: `${AWS_ASSETS_PATH}/featured_by/Cointelegraph_logo.png`, + cointelegraph: `${AWS_ASSETS_PATH}/featured_by/cointelegraph-white.png`, craftingRecipe: `${AWS_ASSETS_PATH}/crafting-recipe.png`, cryptoGuilds: `${AWS_ASSETS_PATH}/crypto_guilds_logo.png`, - cryptoinsiders: `${AWS_ASSETS_PATH}/featured_by/crypto_insiders.png`, - cryptoslate: `${AWS_ASSETS_PATH}/featured_by/cs-media-logo-light.png`, + cryptoinsiders: `${AWS_ASSETS_PATH}/featured_by/crypto-insiders-white.png`, + cryptoslate: `${AWS_ASSETS_PATH}/featured_by/cryptoslate-white.png`, cryptoUnicorns: `${AWS_ASSETS_PATH}/crypto_unicorns_logo.png`, - educativesessions: `${AWS_ASSETS_PATH}/featured_by/educative_logo.png`, + educativesessions: `${AWS_ASSETS_PATH}/featured_by/educative-white.png`, ethereum_blockchain: `${AWS_ASSETS_PATH}/ethereum_blockchain_logo.png`, evmos: `${AWS_ASSETS_PATH}/evmos_logo.png`, forte: `${AWS_ASSETS_PATH}/forte_logo.png`, game7io: `${AWS_ASSETS_PATH}/featured_by/game7io_logo.png`, gnosis: `${AWS_ASSETS_PATH}/gnosis_chain_logo.png`, laguna: `${AWS_ASSETS_PATH}/featured_by/laguna_logo.svg`, - meetup: `${AWS_ASSETS_PATH}/featured_by/meetup_logo.png`, + meetup: `${AWS_ASSETS_PATH}/featured_by/meetup-white.png`, minigame: `${AWS_ASSETS_PATH}/minigame.png`, openLootbox: `${AWS_ASSETS_PATH}/open-lootbox.png`, optimism: `${AWS_ASSETS_PATH}/optimism_logo.png`, @@ -170,7 +172,7 @@ const Homepage = () => { // }, []); const blueBackgroundColor = "#212698"; - const lightOrangeColor = "#FF9473"; + const lightOrangeColor = "#F56646"; const cardBackgroundColor = "#353535"; const Feature = ({ title, altText, image, ...props }) => { @@ -180,7 +182,8 @@ const Homepage = () => { { _hover={{ transform: "scale(1.05)", transition: "0.42s" }} cursor="pointer" m={[2, 3, 3, 4, 8, 12]} - pb={2} - py={4} - w="240px" - h="300px" + w={["155px", "240px"]} + h={["200px", "300px"]} > { bgSize="cover" id="page:landing" bgColor={BACKGROUND_COLOR} + textColor="white" > {
{ buttonReport( "Boost", @@ -319,7 +317,7 @@ const Homepage = () => { }} href={"/contact"} > - Boost my game economy + Get Started
@@ -329,14 +327,7 @@ const Homepage = () => { borderWidth="2px" borderColor="white" textColor="white" - minW={[ - "220px", - "250px", - "250px", - "300px", - "350px", - "400px", - ]} + minW={["200px", null]} onClick={() => { buttonReport( "Discord", @@ -358,18 +349,19 @@ const Homepage = () => { // rounded={["lg", "xl", "2xl"]} > -
+
- + >$4b @@ -379,31 +371,32 @@ const Homepage = () => {
And growing - +
-
+
- + >44k - + active users in game economies
built with our engine - +
@@ -413,7 +406,12 @@ const Homepage = () => { - + { boxURL="https://bullieverisland.com/" /> */} { > + - { - - + + {
@@ -668,6 +668,131 @@ const Homepage = () => {
+ + + Our Workflow + + + + + + Step 1 + + + + + So you decided to build a healthy economy on the + blockchain. You are on the right path, traveler! + + + + + + + Step 2 + + + + + Sign up to get whitelisted. We'll reach out to you + within 3 days to schedule a call or make a partnership + proposal. + + + + + + + Step 3 + + + + + During onboarding pick game mechanics that you'd + like to deploy. Moonstream Engine provides you with + back-end tools to put them on the blockchain. + + + + +
+ + Enjoy + +
+ + + You're at the end of your blockchain development + journey now, traveler. Time to watch your game economy + grow! + + + + +
+ + + Have something to discuss before signing up?{" "} + { + buttonReport("Discord", "workflow", "landing"); + }} + isExternal + > + Join our Discord{" "} + + to get in touch with the team (@zomglings). + +
+ { - - Engine Overview - -
- -
- - - - Our Workflow - - - - - Step 1: - - - - - So you decided to build a healthy economy on the - blockchain. You are on the right path, traveler! - - - - - - - Step 2: - - - - - { - buttonReport("Discord", "workflow", "landing"); - }} - isExternal - > - Join our Discord{" "} - {" "} - to get in touch with the team (@zomglings). Tell us about - your game and schedule a call if needed. - - - - - - - Step 3: - - - - - Pick game mechanics that you'd like to deploy. - Moonstream Engine provides you with back-end tools to put - them on the blockchain. -
-
- You're at the end of your development journey now, - traveler. Time to watch your game economy grow! - - - - - - + Featured by{" "}
@@ -987,50 +1017,48 @@ const Homepage = () => { width="81%" wrap="wrap" direction="row" - justifyContent="center" - bgColor="white" rounded={["lg", "xl", "2xl", "3xl", "4xl", "4xl"]} > { bgColor={BACKGROUND_COLOR} minH="50vh" > - - - Sign up to grow your economy - - - {`Answer 5 questions about your project to get whitelisted.`} - + + + Sign up to grow your economy + + + {`Answer 5 questions about your project to get whitelisted.`} + + + { buttonReport("Boost", "page-bottom", "landing"); }} href={"/contact"} > - Boost my game + Boost my game economy - + - {`Learn more about crypto, NFT and DAOs, find links to educational resources, discuss gaming projects, and laugh at memes.`} - + { buttonReport("Discord", "page-bottom", "landing"); }} diff --git a/frontend/src/Theme/theme.js b/frontend/src/Theme/theme.js index a7b65cfe..11fbda87 100644 --- a/frontend/src/Theme/theme.js +++ b/frontend/src/Theme/theme.js @@ -41,7 +41,7 @@ const theme = extendTheme({ styles: { global: { body: { - color: "white", + color: "blue.1200", }, }, }, @@ -62,9 +62,9 @@ const theme = extendTheme({ }, fonts: { - heading: '"Work Sans", sans-serif', - body: '"Work Sans", sans-serif', - mono: '"Work Sans", monospace', + heading: '"Space Grotesk", sans-serif', + body: '"Space Grotesk", sans-serif', + mono: '"Space Grotesk", monospace', }, fontSizes: { xs: "0.625rem", //10px diff --git a/frontend/src/components/EngineOverviewDiagram.js b/frontend/src/components/EngineOverviewDiagram.js index 4f12b647..c2ba7019 100644 --- a/frontend/src/components/EngineOverviewDiagram.js +++ b/frontend/src/components/EngineOverviewDiagram.js @@ -8,18 +8,13 @@ import { VStack, Text, Icon, - Popover, - PopoverTrigger, - PopoverBody, - PopoverContent, useBreakpointValue, } from "@chakra-ui/react"; import CloudSVG from "./SVGGraphics/Cloud"; import RectangleSVG from "./SVGGraphics/Rectangle"; import RoundedRectSVG from "./SVGGraphics/RoundedRect"; -import { BsFillPersonFill, BsFillFileEarmarkCodeFill } from "react-icons/bs"; +import { BsFillPersonFill } from "react-icons/bs"; import Xarrow from "react-xarrows"; -import ExampleCode from "./ExampleCode"; const _EngineOverviewDiagram = (props) => { const smartContract = useRef(null); @@ -50,6 +45,7 @@ const _EngineOverviewDiagram = (props) => { templateColumns={["repeat(1, 1fr)", "repeat(1, 1fr)", "repeat(3, 1fr)"]} rowGap={[10, 10, 20]} columnGap={4} + textColor="black" > { justifyContent="center" position="relative" > - + {/* { - + */}
@@ -233,8 +229,13 @@ const _EngineOverviewDiagram = (props) => { as={BsFillPersonFill} w={[120, 120, 160]} h={[120, 120, 160]} + color="white" > - + Game Designer
diff --git a/frontend/src/components/FAQCard.js b/frontend/src/components/FAQCard.js index 5ee35943..4777fc44 100644 --- a/frontend/src/components/FAQCard.js +++ b/frontend/src/components/FAQCard.js @@ -13,7 +13,7 @@ const _FAQCard = ({ heading, headingProps, panelContent }) => { const iconColor = "#F56646"; return ( - + {({ isExpanded }) => ( <> @@ -21,7 +21,7 @@ const _FAQCard = ({ heading, headingProps, panelContent }) => { {heading} @@ -32,10 +32,7 @@ const _FAQCard = ({ heading, headingProps, panelContent }) => { )} - + {panelContent} diff --git a/frontend/src/components/Footer.js b/frontend/src/components/Footer.js index 134c2559..17ca3aff 100644 --- a/frontend/src/components/Footer.js +++ b/frontend/src/components/Footer.js @@ -12,25 +12,22 @@ import { chakra, } from "@chakra-ui/react"; import RouterLink from "next/link"; -import { PRIMARY_MOON_LOGO_URL, SITEMAP } from "../core/constants"; +import { + PRIMARY_MOON_LOGO_URL, + SITEMAP, + BACKGROUND_COLOR, +} from "../core/constants"; import { FaGithub, FaTwitter, FaDiscord } from "react-icons/fa"; import moment from "moment"; const LINKS_SIZES = { fontWeight: "300", - fontSize: "lg", + fontSize: "md", }; const ListHeader = ({ children }) => { return ( - + {children} ); @@ -62,12 +59,14 @@ const SocialButton = ({ children, label, href }) => { const Footer = () => ( @@ -87,6 +86,9 @@ const Footer = () => ( © {moment().year()} Moonstream.to All rights reserved + + + Follow Us { <> ui.setSidebarToggled(!ui.sidebarToggled)} icon={} @@ -80,7 +86,7 @@ const LandingNavbar = () => { )} {item.type !== PAGETYPE.FOOTER_CATEGORY && item.children && ( - + }> {item.title} @@ -123,12 +129,13 @@ const LandingNavbar = () => { )} {!ui.isLoggedIn && ( diff --git a/frontend/src/components/SVGGraphics/Cloud.js b/frontend/src/components/SVGGraphics/Cloud.js index de46b063..a8721446 100644 --- a/frontend/src/components/SVGGraphics/Cloud.js +++ b/frontend/src/components/SVGGraphics/Cloud.js @@ -17,7 +17,7 @@ const _CloudSVG = (props) => { strokeLinecap="round" strokeLinejoin="round" /> - + {/* { - + */} ); }; diff --git a/frontend/src/components/SVGGraphics/Rectangle.js b/frontend/src/components/SVGGraphics/Rectangle.js index 2464a499..0d275761 100644 --- a/frontend/src/components/SVGGraphics/Rectangle.js +++ b/frontend/src/components/SVGGraphics/Rectangle.js @@ -16,7 +16,7 @@ const _RectangleSVG = (props) => { stroke="url(#paint0_linear_293_56)" strokeWidth="5" /> - + {/* { - + */} ); }; diff --git a/frontend/src/components/SVGGraphics/RoundedRect.js b/frontend/src/components/SVGGraphics/RoundedRect.js index 6721720c..6255bc14 100644 --- a/frontend/src/components/SVGGraphics/RoundedRect.js +++ b/frontend/src/components/SVGGraphics/RoundedRect.js @@ -16,7 +16,7 @@ const _RoundedRectSVG = (props) => { stroke="url(#paint0_linear_291_337)" strokeWidth="5" /> - + {/* { - + */} ); }; diff --git a/frontend/src/components/Sidebar.js b/frontend/src/components/Sidebar.js index 0bc87ed9..7d6fbb65 100644 --- a/frontend/src/components/Sidebar.js +++ b/frontend/src/components/Sidebar.js @@ -25,7 +25,12 @@ import { LockIcon, } from "@chakra-ui/icons"; import { MdSettings, MdDashboard, MdTimeline } from "react-icons/md"; -import { PRIMARY_MOON_LOGO_URL, SITEMAP, PAGETYPE } from "../core/constants"; +import { + PRIMARY_MOON_LOGO_URL, + SITEMAP, + PAGETYPE, + BACKGROUND_COLOR, +} from "../core/constants"; import useDashboard from "../core/hooks/useDashboard"; import { MODAL_TYPES } from "../core/providers/OverlayProvider/constants"; import OverlayContext from "../core/providers/OverlayProvider/context"; @@ -49,7 +54,8 @@ const Sidebar = () => { { - + {!ui.isLoggedIn && ( <> diff --git a/frontend/src/components/TrustedBadge.js b/frontend/src/components/TrustedBadge.js index 624d5c67..c839ecfa 100644 --- a/frontend/src/components/TrustedBadge.js +++ b/frontend/src/components/TrustedBadge.js @@ -31,19 +31,12 @@ const TrustedBadge = ({ alignItems="center" alignSelf="center" wrap="nowrap" - p={4} + p={[2, 4]} direction="column" > {name} diff --git a/frontend/src/core/constants.js b/frontend/src/core/constants.js index 3dc7de62..fec35565 100644 --- a/frontend/src/core/constants.js +++ b/frontend/src/core/constants.js @@ -11,9 +11,9 @@ export const BUGOUT_ENDPOINTS = { export const BACKGROUND_COLOR = "#1A1D22"; export const DEFAULT_METATAGS = { - title: "Build, Scale, and Monitor Your Game on the Blockchain", + title: "Build, Scale, and Monitor Your Game's Economy", description: - "Moonstream is a web3 game engine. Use Moonstream’s technical blockchain infrastructure to add on-chain mechanics to your game. Watch your game economy flourish.", + "Moonstream provides economic infrastructure for web3 games. Gather actionable data with our web3 data analytics. Act on it with our on-chain mechanics. Watch your economy flourish.", keywords: "analytics, blockchain analytics, protocol, protocols, blockchain, crypto, data, NFT gaming, smart contracts, web3, smart contract, ethereum, polygon, matic, transactions, defi, finance, decentralized, mempool, NFT, NFTs, DAO, DAOs, cryptocurrency, cryptocurrencies, bitcoin, blockchain economy, blockchain game, marketplace, blockchain security, loyalty program, Ethereum bridge, Ethereum bridges, NFT game, NFT games", url: "https://www.moonstream.to", From f47c4469b36c57bee78342826cb26985e44c1784 Mon Sep 17 00:00:00 2001 From: Kellan Wampler Date: Thu, 13 Oct 2022 10:25:23 -0400 Subject: [PATCH 3/6] Tweeks per review with Iskhan. --- frontend/pages/index.js | 143 +++++++++++------------ frontend/src/Theme/Button/index.js | 10 +- frontend/src/components/FAQCard.js | 12 +- frontend/src/components/LandingNavbar.js | 9 +- frontend/src/components/Sidebar.js | 2 +- frontend/styles/sidebar.css | 2 +- 6 files changed, 90 insertions(+), 88 deletions(-) diff --git a/frontend/pages/index.js b/frontend/pages/index.js index 05555126..9b19b2d7 100644 --- a/frontend/pages/index.js +++ b/frontend/pages/index.js @@ -192,7 +192,7 @@ const Homepage = () => { _hover={{ transform: "scale(1.05)", transition: "0.42s" }} cursor="pointer" m={[2, 3, 3, 4, 8, 12]} - w={["155px", "240px"]} + minW={["155px", "180px", "200px", "240px"]} h={["200px", "300px"]} > { /> {title} @@ -247,7 +247,7 @@ const Homepage = () => { bgColor={BACKGROUND_COLOR} id="Header grid item" > - + { align="center" justify="center" boxSize="full" - pt={["120px", "120px", "150px"]} + pt={["90px", "120px"]} pb={10} px="5%" flexDir="column" @@ -272,34 +272,34 @@ const Homepage = () => { w="100%" > {DEFAULT_METATAGS.title} {DEFAULT_METATAGS.description}
{ bg={ "linear-gradient(92.26deg, #F56646 8.41%, #FFFFFF 255.37%);" } - minW={["150px", null]} + minW={["320px", "150px", null]} onClick={() => { buttonReport( "Boost", @@ -327,7 +327,7 @@ const Homepage = () => { borderWidth="2px" borderColor="white" textColor="white" - minW={["200px", null]} + minW={["320px", "200px", null]} onClick={() => { buttonReport( "Discord", @@ -366,7 +366,7 @@ const Homepage = () => { > >$4b - + transaction volume.
And growing @@ -408,7 +408,7 @@ const Homepage = () => { @@ -421,17 +421,19 @@ const Homepage = () => { - Trusted by visionaries in the industry + Trusted by visionaries + in the industry {/* { Supported blockchains @@ -485,7 +488,7 @@ const Homepage = () => { wrap="wrap" direction="row" justifyContent="center" - pb={10} + pb={[4, 10]} > { Upcoming Integrations { { Features
- - {`Lootboxes, crafting recipes, deck building, you name it! With Moonstream Engine you can deploy on-chain mechanics with one click. - Read our Use Cases or explore the features to know more. `} - + + + {`Lootboxes, crafting recipes, deck building, you name it! With Moonstream Engine you can deploy`} + + + {`on-chain mechanics with one click. Read our Use Cases or explore the features to know more.`} + +
{ { buttonReport("Features", "features", "landing"); }} @@ -646,14 +647,7 @@ const Homepage = () => { borderWidth="2px" borderColor="white" textColor="white" - minW={[ - "220px", - "250px", - "250px", - "300px", - "350px", - "400px", - ]} + minW={["320px", "300px", null]} onClick={() => { buttonReport("Use Cases", "features", "landing"); }} @@ -670,7 +664,7 @@ const Homepage = () => { @@ -682,12 +676,15 @@ const Homepage = () => { > Our Workflow - + @@ -696,7 +693,7 @@ const Homepage = () => { So you decided to build a healthy economy on the @@ -708,7 +705,7 @@ const Homepage = () => { @@ -717,7 +714,7 @@ const Homepage = () => { Sign up to get whitelisted. We'll reach out to you @@ -730,7 +727,7 @@ const Homepage = () => { @@ -739,7 +736,7 @@ const Homepage = () => { During onboarding pick game mechanics that you'd @@ -757,7 +754,7 @@ const Homepage = () => { > @@ -766,7 +763,7 @@ const Homepage = () => {
You're at the end of your blockchain development @@ -778,7 +775,7 @@ const Homepage = () => {
- + Have something to discuss before signing up?{" "} {
FAQ @@ -870,7 +866,7 @@ const Homepage = () => { onClick={() => { buttonReport("Moonstream Github", "faq", "landing"); }} - textColor="blue.700" + textColor="white" isExternal > {" "} @@ -1001,7 +997,6 @@ const Homepage = () => { colSpan="12" bgColor={BACKGROUND_COLOR} textColor="white" - minH="40vh" > {
{
Sign up to grow your economy @@ -1108,6 +1106,7 @@ const Homepage = () => { variant="orangeAndBlue" bg="white" minW={["250px", "250px", null]} + textColor={BACKGROUND_COLOR} onClick={() => { buttonReport("Boost", "page-bottom", "landing"); }} diff --git a/frontend/src/Theme/Button/index.js b/frontend/src/Theme/Button/index.js index af9b83d2..447241a2 100644 --- a/frontend/src/Theme/Button/index.js +++ b/frontend/src/Theme/Button/index.js @@ -122,10 +122,10 @@ const variantOrangeAndBlue = () => { borderRadius: "70px", shadow: "md", variant: "solid", - fontSize: ["sm", "md", "lg", "lg", "xl", "xl"], - textColor: "blue.1200", + fontSize: ["md", "md", "lg", "lg", "xl", "xl"], + textColor: "white", bg: "#FF8B73", - py: 5, + py: 3, px: 5, }; }; @@ -138,10 +138,10 @@ const variantWhiteOnOrange = () => { borderRadius: "70px", shadow: "md", variant: "solid", - fontSize: ["sm", "md", "lg", "lg", "xl", "xl"], + fontSize: ["md", "md", "lg", "lg", "xl", "xl"], textColor: "white", bg: "#FF8B73", - py: 5, + py: 3, px: 5, }; }; diff --git a/frontend/src/components/FAQCard.js b/frontend/src/components/FAQCard.js index 4777fc44..4c48f501 100644 --- a/frontend/src/components/FAQCard.js +++ b/frontend/src/components/FAQCard.js @@ -13,11 +13,11 @@ const _FAQCard = ({ heading, headingProps, panelContent }) => { const iconColor = "#F56646"; return ( - + {({ isExpanded }) => ( <> - - + + { )} - + {panelContent} diff --git a/frontend/src/components/LandingNavbar.js b/frontend/src/components/LandingNavbar.js index a2a8ab24..874babaf 100644 --- a/frontend/src/components/LandingNavbar.js +++ b/frontend/src/components/LandingNavbar.js @@ -46,7 +46,7 @@ const LandingNavbar = () => { )} { { variant="solid" onClick={() => toggleModal({ type: MODAL_TYPES.SIGNUP })} size="sm" - fontWeight="400" + fontWeight="bold" borderRadius="2xl" textColor="white" > - Sign Up + Sign up )} {!ui.isLoggedIn && ( diff --git a/frontend/src/components/Sidebar.js b/frontend/src/components/Sidebar.js index 7d6fbb65..73ed989c 100644 --- a/frontend/src/components/Sidebar.js +++ b/frontend/src/components/Sidebar.js @@ -74,7 +74,7 @@ const Sidebar = () => { /> .pro-sidebar-inner { - background: #212990; + background: #1A1D22; height: 100%; position: relative; z-index: 101; From 2d6087e828468f67a66a87f90a7e7c790f3cb9f8 Mon Sep 17 00:00:00 2001 From: Kellan Wampler Date: Thu, 13 Oct 2022 11:01:10 -0400 Subject: [PATCH 4/6] Removing comments. --- frontend/pages/index.js | 81 +---------------------------------------- 1 file changed, 2 insertions(+), 79 deletions(-) diff --git a/frontend/pages/index.js b/frontend/pages/index.js index 9b19b2d7..7393de7a 100644 --- a/frontend/pages/index.js +++ b/frontend/pages/index.js @@ -94,34 +94,6 @@ const Homepage = () => { const { buttonReport } = useContext(AnalyticsContext); - // useEffect(() => { - // assets["background720"] = `${AWS_ASSETS_PATH}/background720.png`; - // assets["background1920"] = `${AWS_ASSETS_PATH}/background1920.png`; - // assets["background2880"] = `${AWS_ASSETS_PATH}/background2880.png`; - // assets["background3840"] = `${AWS_ASSETS_PATH}/background3840.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, - // ]); - useEffect(() => { if ( router.nextRouter.asPath !== "/" && @@ -139,39 +111,6 @@ const Homepage = () => { } }, [isInit, router]); - // useLayoutEffect(() => { - // const imageLoader720 = new Image(); - // imageLoader720.src = `${AWS_ASSETS_PATH}/background720.png`; - // imageLoader720.onload = () => { - // setBackgroundLoaded720(true); - // }; - // }, []); - - // useLayoutEffect(() => { - // const imageLoader1920 = new Image(); - // imageLoader1920.src = `${AWS_ASSETS_PATH}/background1920.png`; - // imageLoader1920.onload = () => { - // setBackgroundLoaded1920(true); - // }; - // }, []); - - // useLayoutEffect(() => { - // const imageLoader2880 = new Image(); - // imageLoader2880.src = `${AWS_ASSETS_PATH}/background2880.png`; - // imageLoader2880.onload = () => { - // setBackgroundLoaded2880(true); - // }; - // }, []); - - // useLayoutEffect(() => { - // const imageLoader3840 = new Image(); - // imageLoader3840.src = `${AWS_ASSETS_PATH}/background3840.png`; - // imageLoader3840.onload = () => { - // setBackgroundLoaded3840(true); - // }; - // }, []); - - const blueBackgroundColor = "#212698"; const lightOrangeColor = "#F56646"; const cardBackgroundColor = "#353535"; @@ -248,13 +187,7 @@ const Homepage = () => { id="Header grid item" > - + {
- +
@@ -436,12 +365,6 @@ const Homepage = () => { pb={[4, 10]} > - {/* */} Date: Thu, 13 Oct 2022 13:32:14 -0400 Subject: [PATCH 5/6] A couple more mobile fixes from dev meeting. --- .../src/components/EngineOverviewDiagram.js | 328 ------------------ 1 file changed, 328 deletions(-) delete mode 100644 frontend/src/components/EngineOverviewDiagram.js diff --git a/frontend/src/components/EngineOverviewDiagram.js b/frontend/src/components/EngineOverviewDiagram.js deleted file mode 100644 index c2ba7019..00000000 --- a/frontend/src/components/EngineOverviewDiagram.js +++ /dev/null @@ -1,328 +0,0 @@ -import { React, useRef } from "react"; -import { - chakra, - Grid, - GridItem, - Flex, - Center, - VStack, - Text, - Icon, - useBreakpointValue, -} from "@chakra-ui/react"; -import CloudSVG from "./SVGGraphics/Cloud"; -import RectangleSVG from "./SVGGraphics/Rectangle"; -import RoundedRectSVG from "./SVGGraphics/RoundedRect"; -import { BsFillPersonFill } from "react-icons/bs"; -import Xarrow from "react-xarrows"; - -const _EngineOverviewDiagram = (props) => { - const smartContract = useRef(null); - const gameClient = useRef(null); - const adminDashboard = useRef(null); - const gameServer = useRef(null); - const user = useRef(null); - - const xarrowStyle = { - color: "#FF8B73", - showHead: true, - headSize: 6, - }; - - const smallDiagram = useBreakpointValue({ - base: true, - sm: true, - md: false, - lg: false, - xl: false, - "2xl": false, - }); - - return ( - <> - - - - -
- - - Moonstream Smart Contracts - - {!smallDiagram && ( - - Your backend for lootboxes, crafting recipes, items, - minigames - - )} - -
- - - - - - -
- - Game Client - -
- - - -
- -
- - - Admin Dashboard - - {!smallDiagram && ( - - Choose mechanics at engine.moonstream.to - - )} - -
-
- - -
- - {/* - - - { - props.buttonReport( - "Example Code", - "engine-overview-diagram", - "landing" - ); - }} - >{" "} - - - - - - - - */} - -
- - - - -
- - Game Server - -
- - - -
- - - Game Designer - -
- - - {!smallDiagram && ( - <> - - - - - - )} - {smallDiagram && ( - <> - - - - - - )} - - ); -}; - -const EngineOverviewDiagram = chakra(_EngineOverviewDiagram); - -export default EngineOverviewDiagram; From d64c1a46df4c69587e8c89167bde335d962cc796 Mon Sep 17 00:00:00 2001 From: Kellan Wampler Date: Thu, 13 Oct 2022 13:33:27 -0400 Subject: [PATCH 6/6] Changes from dev review. --- frontend/pages/index.js | 78 +++++++++++++----------- frontend/src/components/Footer.js | 5 +- frontend/src/components/LandingNavbar.js | 10 +-- frontend/src/components/Sidebar.js | 6 +- frontend/styles/sidebar.css | 4 +- 5 files changed, 54 insertions(+), 49 deletions(-) diff --git a/frontend/pages/index.js b/frontend/pages/index.js index 7393de7a..3940e399 100644 --- a/frontend/pages/index.js +++ b/frontend/pages/index.js @@ -1,4 +1,4 @@ -import React, { useState, Suspense, useEffect, useContext } from "react"; +import React, { Suspense, useEffect, useContext } from "react"; import { Fade, Flex, @@ -8,14 +8,13 @@ import { Stack, Link, Center, - useMediaQuery, Grid, Text, GridItem, SimpleGrid, Image as ChakraImage, - HStack, VStack, + HStack, Accordion, Icon, Spacer, @@ -72,25 +71,8 @@ const assets = { }; const Homepage = () => { - 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 router = useRouter(); const { isInit } = useUser(); - const [ - isLargerThan720px, - isLargerThan1920px, - isLargerThan2880px, - isLargerThan3840px, - ] = useMediaQuery([ - "(min-width: 720px)", - "(min-width: 1920px)", - "(min-width: 2880px)", - "(min-width: 3840px)", - ]); const { buttonReport } = useContext(AnalyticsContext); @@ -276,11 +258,14 @@ const Homepage = () => {
- - -
+ + + - + { > >$4b - + transaction volume.
And growing -
+
- + { > >44k - + active users in game economies
built with our engine @@ -337,7 +341,7 @@ const Homepage = () => { @@ -486,13 +490,17 @@ const Homepage = () => { Features -
+
- - {`Lootboxes, crafting recipes, deck building, you name it! With Moonstream Engine you can deploy`} - - - {`on-chain mechanics with one click. Read our Use Cases or explore the features to know more.`} + + Lootboxes, crafting recipes, deck building, you name it! + With Moonstream Engine you can deploy on-chain mechanics + with one click. Read our Use Cases or explore the features + to know more.
diff --git a/frontend/src/components/Footer.js b/frontend/src/components/Footer.js index 17ca3aff..31ec79c1 100644 --- a/frontend/src/components/Footer.js +++ b/frontend/src/components/Footer.js @@ -74,10 +74,7 @@ const Footer = () => ( diff --git a/frontend/src/components/LandingNavbar.js b/frontend/src/components/LandingNavbar.js index 874babaf..c1282547 100644 --- a/frontend/src/components/LandingNavbar.js +++ b/frontend/src/components/LandingNavbar.js @@ -46,12 +46,12 @@ const LandingNavbar = () => { )}