whitepappers desktop

frontend/pages/whitepapers.js

@@ -1,23 +1,24 @@
 import React from "react";
-import { VStack, Link, Heading, Icon } from "@chakra-ui/react";
+import { Flex, Heading } from "@chakra-ui/react";
 import { getLayout, getLayoutProps } from "../src/layouts/InfoPageLayout";
-import { MdPictureAsPdf } from "react-icons/md";
+import WhitepaperCard from "../src/components/molecules/WhitepaperCard";
+import { AWS_ASSETS_PATH } from "../src/core/constants";
 
 const Papers = () => {
   return (
-    <VStack>
-      <Heading pb={12} pt="72px">
+    <Flex direction="column" px="7%" width="100%" alignItems="center">
+      <Heading pb="60px" pt="142px">
         Whitepapers
       </Heading>
-      <Link
-        color="orange.1000"
+      <WhitepaperCard
+        maxW="890px"
         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>
+        img={`${AWS_ASSETS_PATH}/nft_market_analysis_i.png`}
+        title="An analysis of 7,020,950 NFT transactions on the Ethereum blockchain"
+        date="October 22, 2021"
+        text="We present the Ethereum NFTs dataset, a representation of the activity on the Ethereum non-fungible token (NFT) market between April 1, 2021 and September 25, 2021, constructed purely from on-chain data. This dataset consists of all 7 020 950 token mints and transfers across 727 102 accounts between block 12 150 245 and block 13 296 011."
+      />
+    </Flex>
   );
 };
 

frontend/src/components/molecules/WhitepaperCard.js

@@ -0,0 +1,54 @@
+import React from "react";
+import { Flex, Image, Text } from "@chakra-ui/react";
+
+const WhitepaperCard = ({ img, title, date = "", text, href, ...props }) => {
+  return (
+    <Flex p="20px" bg="#353535" borderRadius="20px" {...props}>
+      <Image
+        src={img}
+        w="200px"
+        h="200px"
+        borderRadius="20px"
+        cursor="pointer"
+        onClick={() => {
+          window.open(href);
+        }}
+      />
+      <Flex direction="column" ml="20px">
+        <Text
+          fontSize={["24px"]}
+          fontWeight="700"
+          maxW="500px"
+          lineHeight="120%"
+          mb="10px"
+        >
+          {title}
+        </Text>
+        {date && (
+          <Text fontSize={["16px"]} lineHeight="20px">
+            {date}
+          </Text>
+        )}
+        <Text fontSize={["18px"]} my="5px" lineHeight="23px">
+          {text}
+        </Text>
+        <Text
+          href={href}
+          maxW="fit-content"
+          color="orange.1000"
+          cursor="pointer"
+          fontSize="18px"
+          fontWeight="700"
+          _hover={{ color: "#F4532F" }}
+          onClick={() => {
+            window.open(href);
+          }}
+        >
+          Read more
+        </Text>
+      </Flex>
+    </Flex>
+  );
+};
+
+export default WhitepaperCard;

frontend/src/layouts/InfoPageLayout.js

@@ -1,5 +1,5 @@
 import React, { useContext } from "react";
-import { Flex, Stack } from "@chakra-ui/react";
+import { Flex } from "@chakra-ui/react";
 import UIContext from "../core/providers/UIProvider/context";
 import { DEFAULT_METATAGS, BACKGROUND_COLOR } from "../core/constants";
 import { getLayout as getSiteLayout } from "./index";
@@ -7,7 +7,6 @@ import { getLayout as getSiteLayout } from "./index";
 const InfoPageLayout = ({ children }) => {
   const ui = useContext(UIContext);
 
-  const margin = ui.isMobileView ? "6%" : "22%";
   return (
     <Flex
       bgPos="bottom"
@@ -18,9 +17,7 @@ const InfoPageLayout = ({ children }) => {
       alignItems="center"
       w="100%"
     >
-      <Stack mx={margin} my={[4, 6, 12]} maxW="1700px" textAlign="justify">
-        {children}
-      </Stack>
+      {children}
     </Flex>
   );
 };