whitepaper , new layout for ssg pages, improvemts

2021-11-03 15:11:13 +01:00 · 2021-11-03 15:11:13 +01:00 · edf2099069
commit edf2099069
--- a/frontend/pages/index.js
+++ b/frontend/pages/index.js
@ -107,6 +107,10 @@ const carousel_content = [
  { title: "Ethereum", img: assets["ethereumBlackLogo"] },
  { title: "Ethereum transaction pool", img: assets["ethereumRainbowLogo"] },
  { title: "Polygon coming soon!", img: assets["maticLogo"] },
+  { title: "Bitcoin coming soon!", img: assets["bitcoinLogo"] },
+  { title: "Ethereum", img: assets["ethereumBlackLogo"] },
+  { title: "Ethereum transaction pool", img: assets["ethereumRainbowLogo"] },
+  { title: "Polygon coming soon!", img: assets["maticLogo"] },
 ];
 const Homepage = () => {
  const ui = useContext(UIContext);
@ -211,17 +215,17 @@ const Homepage = () => {
  }, []);

  const settings = {
-    // infinite: true,
+    infinite: true,
    lazyLoad: true,
-    speed: 2500,
+    speed: 2000,
    autoplay: true,
-    autoplaySpeed: 10000,
+    autoplaySpeed: 0,
    // cssEase: "linear",
    cssEase: "cubic-bezier(0.165, 0.840, 0.440, 1.000)",
    // cssEase: "ease-in",
-    slidesToScroll: 3,
-    slidesToShow: 3,
-    centerMode: false,
+    slidesToScroll: 1,
+    slidesToShow: ui.isMobileView ? 3 : 5,
+    centerMode: true,
    centerPadding: 0,
    // nextArrow: "",
    // prevArrow: "",
@ -297,7 +301,14 @@ const Homepage = () => {
                          understand exactly how people are using your smart
                          contracts.
                        </chakra.span>
-                        <Box w="100%" minH="200px" p={0} overflow-x="hidden">
+                        <Box
+                          w="100vw"
+                          minH="200px"
+                          // px="7%"
+                          py={0}
+                          overflowX="hidden"
+                          overflowY="visible"
+                        >
                          <Slider
                            {...settings}
                            // adaptiveHeight={true}
@ -307,8 +318,8 @@ const Homepage = () => {
                          >
                            {carousel_content.map((content_item, idx) => (
                              <Box
-                                pt="10px"
-                                h="200px"
+                                pt="80px"
+                                h="auto"
                                w="150px"
                                maxW="150px"
                                // size="150px"
@ -455,13 +466,11 @@ const Homepage = () => {
                    />
                    <TrustedBadge
                      name="CryptoInsiders"
-                      caseURL="https://www.crypto-insiders.nl/nieuws/altcoin/17-van-ethereum-whales-bezitten-meer-dan-80-van-alle-nfts-op-de-blockchain/"
                      ImgURL={assets["cryptoinsiders"]}
                    />

                    <TrustedBadge
                      name="cryptoslate"
-                      caseURL="https://cryptoslate.com/just-17-of-all-ethereum-addresses-bought-80-of-all-nfts-this-year/"
                      ImgURL={assets["cryptoslate"]}
                    />
                  </Suspense>
@ -477,7 +486,7 @@ const Homepage = () => {
              >
                <SplitWithImage
                  cta={{
-                    label: "I want early access!",
+                    label: "Want to find out more?",
                    onClick: () => {
                      mixpanel.get_distinct_id() &&
                        mixpanel.track(`${MIXPANEL_EVENTS.BUTTON_CLICKED}`, {
@ -527,7 +536,7 @@ const Homepage = () => {
              >
                <SplitWithImage
                  cta={{
-                    label: "I want early access!",
+                    label: "Want to find out more?",
                    onClick: () => {
                      mixpanel.get_distinct_id() &&
                        mixpanel.track(`${MIXPANEL_EVENTS.BUTTON_CLICKED}`, {
--- a/frontend/pages/whitepapers.js
+++ b/frontend/pages/whitepapers.js
@ -0,0 +1,34 @@
+import React from "react";
+import { VStack, Link, Heading, Icon } from "@chakra-ui/react";
+import { getLayout, getLayoutProps } from "../src/layouts/InfoPageLayout";
+import { MdPictureAsPdf } from "react-icons/md";
+
+const Papers = () => {
+  return (
+    <VStack>
+      <Heading py={12}>Whitepapers</Heading>
+      <Link href="https://github.com/bugout-dev/moonstream/blob/main/datasets/nfts/papers/ethereum-nfts.pdf">
+        An analysis of 7,020,950 NFT transactions on the Ethereum blockchain -
+        October 22, 2021
+        <Icon as={MdPictureAsPdf} color="red" display="inline-block" />
+      </Link>
+    </VStack>
+  );
+};
+
+Papers.getLayout = getLayout;
+export async function getStaticProps() {
+  const metaTags = {
+    title: "Moonstream: Whitepapers",
+    description: "Whitepapers by moonstream.to",
+    keywords:
+      "blockchain, crypto, data, trading, smart contracts, ethereum, solana, transactions, defi, finance, decentralized, analytics, product, whitepapers",
+    url: "https://www.moonstream.to/whitepapers",
+    image: `https://s3.amazonaws.com/static.simiotics.com/moonstream/assets/crypto+traders.png`,
+  };
+  const layoutProps = getLayoutProps();
+  layoutProps.props.metaTags = { ...metaTags };
+  return { ...layoutProps };
+}
+
+export default Papers;
--- a/frontend/src/components/SplitWithImage.js
+++ b/frontend/src/components/SplitWithImage.js
@ -127,12 +127,7 @@ const SplitWithImage = ({
        )}
        <Stack spacing={[2, 4]} justifyContent="center">
          {badge && (
-            <Stack
-              direction="row"
-              placeContent={
-                mirror && !ui.isMobileView ? "flex-end" : "flex-start"
-              }
-            >
+            <Stack direction="row" placeContent={"flex-start"}>
              <Text
                id={`MoonBadge ${elementName}`}
                textTransform={"uppercase"}
--- a/frontend/src/core/constants.js
+++ b/frontend/src/core/constants.js
@ -39,7 +39,7 @@ export const ALL_NAV_PATHES = [
  },
  {
    title: "Whitepapers",
-    path: "https://github.com/bugout-dev/papers",
+    path: "/whitepapers",
    footerCategory: FOOTER_COLUMNS.PRODUCT,
  },
  {
--- a/frontend/src/layouts/InfoPageLayout.js
+++ b/frontend/src/layouts/InfoPageLayout.js
@ -0,0 +1,137 @@
+import React, { useContext, useState, useEffect, useLayoutEffect } from "react";
+import { Flex, useMediaQuery, Stack } from "@chakra-ui/react";
+import UIContext from "../core/providers/UIProvider/context";
+import { DEFAULT_METATAGS, AWS_ASSETS_PATH } from "../core/constants";
+import { getLayout as getSiteLayout } from "./index";
+
+const assets = {
+  background720: `${AWS_ASSETS_PATH}/blog-background-720x405.png`,
+  background1920: `${AWS_ASSETS_PATH}/blog-background-720x405.png`,
+  background2880: `${AWS_ASSETS_PATH}/blog-background-720x405.png`,
+  background3840: `${AWS_ASSETS_PATH}/blog-background-720x405.png`,
+};
+
+const InfoPageLayout = ({ children }) => {
+  const ui = useContext(UIContext);
+  const [background, setBackground] = useState("background720");
+  const [backgroundLoaded720, setBackgroundLoaded720] = useState(false);
+  const [backgroundLoaded1920, setBackgroundLoaded1920] = useState(false);
+  const [backgroundLoaded2880, setBackgroundLoaded2880] = useState(false);
+  const [backgroundLoaded3840, setBackgroundLoaded3840] = useState(false);
+
+  const [
+    isLargerThan720px,
+    isLargerThan1920px,
+    isLargerThan2880px,
+    isLargerThan3840px,
+  ] = useMediaQuery([
+    "(min-width: 720px)",
+    "(min-width: 1920px)",
+    "(min-width: 2880px)",
+    "(min-width: 3840px)",
+  ]);
+
+  useEffect(() => {
+    assets["background720"] = `${AWS_ASSETS_PATH}/blog-background-720x405.png`;
+    assets[
+      "background1920"
+    ] = `${AWS_ASSETS_PATH}/blog-background-1920x1080.png`;
+    assets[
+      "background2880"
+    ] = `${AWS_ASSETS_PATH}/blog-background-2880x1620.png`;
+    assets[
+      "background3840"
+    ] = `${AWS_ASSETS_PATH}/blog-background-3840x2160.png`;
+  }, []);
+
+  useLayoutEffect(() => {
+    if (backgroundLoaded3840) {
+      setBackground("background3840");
+    } else if (backgroundLoaded2880) {
+      setBackground("background2880");
+    } else if (backgroundLoaded1920) {
+      setBackground("background1920");
+    } else {
+      setBackground("background720");
+    }
+  }, [
+    isLargerThan720px,
+    isLargerThan1920px,
+    isLargerThan2880px,
+    isLargerThan3840px,
+    backgroundLoaded720,
+    backgroundLoaded1920,
+    backgroundLoaded2880,
+    backgroundLoaded3840,
+  ]);
+
+  useLayoutEffect(() => {
+    const imageLoader720 = new Image();
+    imageLoader720.src = `${AWS_ASSETS_PATH}/blog-background-720x405.png`;
+    imageLoader720.onload = () => {
+      setBackgroundLoaded720(true);
+    };
+  }, []);
+
+  useLayoutEffect(() => {
+    const imageLoader1920 = new Image();
+    imageLoader1920.src = `${AWS_ASSETS_PATH}/blog-background-1920x1080.png`;
+    imageLoader1920.onload = () => {
+      setBackgroundLoaded1920(true);
+    };
+  }, []);
+
+  useLayoutEffect(() => {
+    const imageLoader2880 = new Image();
+    imageLoader2880.src = `${AWS_ASSETS_PATH}/blog-background-2880x1620.png`;
+    imageLoader2880.onload = () => {
+      setBackgroundLoaded2880(true);
+    };
+  }, []);
+
+  useLayoutEffect(() => {
+    const imageLoader3840 = new Image();
+    imageLoader3840.src = `${AWS_ASSETS_PATH}/blog-background-3840x2160.png`;
+    imageLoader3840.onload = () => {
+      setBackgroundLoaded3840(true);
+    };
+  }, []);
+  const margin = ui.isMobileView ? "6%" : "22%";
+  return (
+    <Flex
+      bgPos="bottom"
+      bgColor="transparent"
+      bgSize="cover"
+      backgroundImage={`url(${assets[`${background}`]})`}
+      minH="100vh"
+      direction="column"
+      alignItems="center"
+      w="100%"
+    >
+      <Stack mx={margin} my={[4, 6, 12]} maxW="1700px" textAlign="justify">
+        {children}
+      </Stack>
+    </Flex>
+  );
+};
+
+export const getLayout = (page) =>
+  getSiteLayout(<InfoPageLayout>{page}</InfoPageLayout>);
+
+export const getLayoutProps = () => {
+  const assetPreload = Object.keys(assets).map((key) => {
+    return {
+      rel: "preload",
+      href: assets[key],
+      as: "image",
+    };
+  });
+  const preconnects = [{ rel: "preconnect", href: "https://s3.amazonaws.com" }];
+
+  const preloads = assetPreload.concat(preconnects);
+
+  return {
+    props: { metaTags: { ...DEFAULT_METATAGS }, preloads },
+  };
+};
+export default InfoPageLayout;
--- a/frontend/src/layouts/LandingLayout.js
+++ b/frontend/src/layouts/LandingLayout.js
@ -1,17 +0,0 @@
-import React from "react";
-import { Scrollable, Footer } from "../components";
-import { getLayout as getSiteLayout } from "./index";
-
-const DefaultLayout = (props) => {
-  return (
-    <Scrollable bgImg={""}>
-      {props.children}
-      <Footer />
-    </Scrollable>
-  );
-};
-
-export const getLayout = (page) =>
-  getSiteLayout(<DefaultLayout>{page}</DefaultLayout>);
-
-export default DefaultLayout;
--- a/frontend/styles/styles.css
+++ b/frontend/styles/styles.css
@ -208,15 +208,30 @@ code {
 }

 .slide {
-  transform: scale(0.02);
-  transition: transform 2600ms;
-  opacity: 0.5;
+  transform: scale(0.6) translate3D(0, -200px, 0px);
+  transition: transform 6000ms;
+  /* opacity: 0.6; */
+  padding-bottom: 200px;
+  animation: off 2s ease-in-out forwards;
+  overflow: visible;
 }

 .activeSlide {
  transform: scale(1.1);
-  transition: transform 2600ms;
-  opacity: 1;
+  transition: transform 2000ms;
+  animation: change 2s ease-in-out forwards;
+  /* opacity: 1; */
+}
+
+@keyframes change {
+  to {
+    opacity: 1
+  }
+}
+@keyframes off {
+  to {
+    opacity: 0.6
+  }
 }

 .arrow {