Layer 2 page

src/components/Footer.js

@@ -139,6 +139,10 @@ const Footer = () => {
           to: `/dapps/`,
           text: "decentralized-applications-dapps",
         },
+        {
+          to: "/layer-2/",
+          text: "layer-2",
+        },
         {
           to: "/run-a-node/",
           text: "run-a-node",

src/components/Layer2ProductCard.js

@@ -0,0 +1,130 @@
+// Libraries
+import React from "react"
+import styled from "styled-components"
+import { GatsbyImage } from "gatsby-plugin-image"
+
+// Components
+import ButtonLink from "./ButtonLink"
+
+// Styles
+const ImageWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  background: ${(props) => props.background};
+  box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.1);
+  min-height: 200px;
+`
+
+const Image = styled(GatsbyImage)`
+  width: 100%;
+  align-self: center;
+  max-width: 372px;
+  max-height: 257px;
+  @media (max-width: ${(props) => props.theme.breakpoints.s}) {
+    max-width: 311px;
+  }
+`
+
+const Card = styled.div`
+  color: ${(props) => props.theme.colors.text};
+  box-shadow: 0px 14px 66px rgba(0, 0, 0, 0.07);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  background: ${(props) => props.theme.colors.searchBackground};
+  border-radius: 4px;
+  border: 1px solid ${(props) => props.theme.colors.lightBorder};
+  text-decoration: none;
+  &:hover {
+    transition: transform 0.1s;
+    transform: scale(1.02);
+  }
+`
+
+const Content = styled.div`
+  padding: 1.5rem;
+  text-align: left;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+`
+
+const Title = styled.h3`
+  margin-top: ${(props) => (props.gitHidden ? "2rem" : "3rem")};
+  margin-bottom: 0.75rem;
+`
+
+const Description = styled.p`
+  opacity: 0.8;
+  font-size: ${(props) => props.theme.fontSizes.s};
+  margin-bottom: 0.5rem;
+  line-height: 140%;
+`
+
+const StyledButtonLink = styled(ButtonLink)`
+  margin: 0.5rem;
+`
+
+const Children = styled.div`
+  margin-top: 1rem;
+`
+
+const Layer2ProductCard = ({
+  url,
+  background,
+  image,
+  name,
+  description,
+  note = "",
+  alt = "",
+  children,
+  bridge,
+  tokenLists,
+  ecosystemPortal,
+}) => {
+  // Check if image is an svg as gatsby-plugin-image doesn't support svg
+  let isSvg = false
+  if (typeof image === "string") {
+    if (image.includes("svg")) {
+      isSvg = true
+    }
+  }
+
+  return (
+    <Card>
+      <ImageWrapper background={background}>
+        <Image image={image} alt={alt} objectFit="contain" />
+      </ImageWrapper>
+      <Content className="hover">
+        <div>
+          <Title>{name}</Title>
+          <Description>{description}</Description>
+          {note.length > 0 && <Description>Note: {note}</Description>}
+        </div>
+        {children && <Children>{children}</Children>}
+      </Content>
+      {ecosystemPortal && (
+        <StyledButtonLink to={bridge} hideArrow={true}>
+          {name} Ecosystem Portal
+        </StyledButtonLink>
+      )}
+      {tokenLists && (
+        <StyledButtonLink to={bridge} hideArrow={true}>
+          {name} Token Lists
+        </StyledButtonLink>
+      )}
+      {bridge && (
+        <StyledButtonLink to={bridge} hideArrow={true}>
+          {name} Bridge
+        </StyledButtonLink>
+      )}
+      <StyledButtonLink to={url} hideArrow={true}>
+        Explore {name}
+      </StyledButtonLink>
+    </Card>
+  )
+}
+
+export default Layer2ProductCard

src/components/Nav/index.js

@@ -168,6 +168,10 @@ const Nav = ({ handleThemeChange, isDarkTheme, path }) => {
           text: "decentralized-applications-dapps",
           to: "/dapps/",
         },
+        {
+          text: "layer-2",
+          to: "/layer-2/",
+        },
         {
           text: "run-a-node",
           to: "/run-a-node/",

src/components/Pill.js

@@ -12,6 +12,7 @@ const Primary = styled.div`
   text-align: center;
   display: inline-block;
   padding: 0.25rem 0.5rem;
+  margin-right: 0.5rem;
   font-size: 0.75rem;
   border-radius: 0.25rem;
 `

src/components/ProductCard.js

@@ -139,6 +139,7 @@ const ProductCard = ({
   image,
   name,
   description,
+  note = "",
   alt = "",
   children,
   githubUrl = "",
@@ -176,7 +177,7 @@ const ProductCard = ({
         {isSvg ? (
           <img src={image} alt={alt} />
         ) : (
-          <Image image={image} alt={alt} />
+          <Image image={image} alt={alt} objectFit="contain" />
         )}
       </ImageWrapper>
       <Content className="hover">
@@ -186,6 +187,7 @@ const ProductCard = ({
           )}
           <Title gitHidden={!hasRepoData}>{name}</Title>
           <Description>{description}</Description>
+          {note.length > 0 && <Description>Note: {note}</Description>}
         </div>
         {children && <Children>{children}</Children>}
       </Content>

src/components/ProductList.js

@@ -7,8 +7,6 @@ import Translation from "./Translation"
 
 const Product = styled.div`
   width: 100%;
-  margin-bottom: 2rem;
-  margin-top: 4rem;
 `
 
 const Item = styled.div`

src/components/RollupProductDevDoc.js

@@ -7,7 +7,7 @@ import Link from "./Link"
 import Translation from "./Translation"
 
 // Data
-import rollups from "../data/layer-2.json"
+import rollups from "../data/layer-2/layer-2.json"
 
 // Styles
 const H4 = styled.h4`

src/data/layer-2/cex-layer-2-support.json

@@ -0,0 +1,32 @@
+[
+  {
+    "name": "Binance",
+    "supports_withdrawals": ["Arbitrum"],
+    "supports_deposits": ["Arbitrum"],
+    "url": "https://www.binance.com/"
+  },
+  {
+    "name": "Crypto.com",
+    "supports_withdrawals": ["Arbitrum"],
+    "supports_deposits": ["Arbitrum"],
+    "url": "https://crypto.com/"
+  },
+  {
+    "name": "OKX",
+    "supports_withdrawals": ["Arbitrum"],
+    "supports_deposits": ["Arbitrum"],
+    "url": "https://www.okx.com/"
+  },
+  {
+    "name": "FTX",
+    "supports_withdrawals": ["Arbitrum"],
+    "supports_deposits": ["Arbitrum"],
+    "url": "https://ftx.com/"
+  },
+  {
+    "name": "Huobi",
+    "supports_withdrawals": ["Arbitrum"],
+    "supports_deposits": ["Arbitrum"],
+    "url": "https://www.huobi.com/"
+  }
+]