From ef6a3f3f15f9c03805a134fc29f29205466aada6 Mon Sep 17 00:00:00 2001 From: Kellan Wampler Date: Thu, 20 Oct 2022 10:58:32 -0400 Subject: [PATCH] Tweaks to landing page. Moving branches from landing page to new color scheme. --- frontend/pages/index.js | 38 ++++---- frontend/pages/team/index.js | 95 +------------------- frontend/src/Theme/Button/index.js | 2 - frontend/src/Theme/theme.js | 2 +- frontend/src/components/Footer.js | 12 ++- frontend/src/components/TeamCard.js | 6 +- frontend/src/components/TrustedBadge.js | 2 +- frontend/src/layouts/InfoPageLayout.js | 109 ++--------------------- frontend/src/layouts/WideInfoPage.js | 110 ++---------------------- 9 files changed, 40 insertions(+), 336 deletions(-) diff --git a/frontend/pages/index.js b/frontend/pages/index.js index 1c3ac9be..0269f6c7 100644 --- a/frontend/pages/index.js +++ b/frontend/pages/index.js @@ -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 = () => { { borderWidth={"1px"} _hover={{ transform: "scale(1.05)", transition: "0.42s" }} cursor="pointer" - m={2} - minW={["120px", "120px", "200px", "240px"]} - h={["200px", "200px", "300px"]} > - + { "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 = () => { { { columns={[2, 2, 4, null]} justifyContent={["flex-end", "flex-end", "center"]} w="100%" - spacing={["0px", "40px"]} + spacing={["20px", "20px", "40px"]} paddingTop="20px" > {
- + Have something to discuss before signing up?{" "} { > { boxURL="https://cryptoslate.com/should-investors-care-80-of-all-nfts-belong-to-17-of-addresses/" /> { letterSpacing="wide" px={2} pb={1} - textAlign={["center", "left"]} + textAlign={["center", "center", "left"]} > Sign up to grow your economy @@ -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.`} @@ -1061,9 +1053,9 @@ const Homepage = () => { {`Learn more about crypto, NFT and DAOs, find links to educational resources, discuss gaming projects, and laugh at memes.`} diff --git a/frontend/pages/team/index.js b/frontend/pages/team/index.js index eb57a5c8..1f94e33c 100644 --- a/frontend/pages/team/index.js +++ b/frontend/pages/team/index.js @@ -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 = () => { { -
+
diff --git a/frontend/src/Theme/Button/index.js b/frontend/src/Theme/Button/index.js index 447241a2..2c791b1c 100644 --- a/frontend/src/Theme/Button/index.js +++ b/frontend/src/Theme/Button/index.js @@ -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", diff --git a/frontend/src/Theme/theme.js b/frontend/src/Theme/theme.js index 11fbda87..0cb302e0 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/Footer.js b/frontend/src/components/Footer.js index 31ec79c1..dca6795b 100644 --- a/frontend/src/components/Footer.js +++ b/frontend/src/components/Footer.js @@ -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 = () => ( Follow Us + + + ( > - - + + diff --git a/frontend/src/components/TeamCard.js b/frontend/src/components/TeamCard.js index 81d4b89c..e9d4ed18 100644 --- a/frontend/src/components/TeamCard.js +++ b/frontend/src/components/TeamCard.js @@ -59,11 +59,7 @@ export default function SocialProfileSimple({ {atName} - + {content} diff --git a/frontend/src/components/TrustedBadge.js b/frontend/src/components/TrustedBadge.js index c839ecfa..f1cc41d9 100644 --- a/frontend/src/components/TrustedBadge.js +++ b/frontend/src/components/TrustedBadge.js @@ -31,7 +31,7 @@ const TrustedBadge = ({ alignItems="center" alignSelf="center" wrap="nowrap" - p={[2, 4]} + p={[2, 3]} direction="column" > { 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 ( getSiteLayout({page}); 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; diff --git a/frontend/src/layouts/WideInfoPage.js b/frontend/src/layouts/WideInfoPage.js index 2227db08..accd0739 100644 --- a/frontend/src/layouts/WideInfoPage.js +++ b/frontend/src/layouts/WideInfoPage.js @@ -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 ( getSiteLayout({page}); 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;