From 6288bad800b0f54fc2a140144363f428dbfd8cdd Mon Sep 17 00:00:00 2001
From: William Felker <gndclouds@icloud.com>
Date: Sun, 13 Sep 2020 01:17:23 +0800
Subject: [PATCH] WIP Commit for Tara

---
 components/core/CodeTerminal.js          |  54 ++-
 components/core/Issue.js                 | 143 +++++++-
 components/core/IssuesList.js            |  13 +-
 components/core/Label.js                 |  20 ++
 pages/_/marketing-candidate/community.js | 422 ++++++++++-------------
 5 files changed, 378 insertions(+), 274 deletions(-)
 create mode 100644 components/core/Label.js

diff --git a/components/core/CodeTerminal.js b/components/core/CodeTerminal.js
index 317a7f0a..6483f583 100644
--- a/components/core/CodeTerminal.js
+++ b/components/core/CodeTerminal.js
@@ -19,11 +19,13 @@ const typewriter = keyframes`
 const STYLES_ROOT = css`
   height: 300px;
   width: 500px;
-  @media (max-width: 600px) {
+  background-color: ${Constants.system.black};
+  border-radius: 5px;
+  @media (${Constants.sizes.tablet}px) {
     height: 230px;
     width: 345px;
   }
-  @media (max-width: 320px) {
+  @media (${Constants.sizes.mobile}px) {
     height: 200px;
     width: 300px;
   }
@@ -35,7 +37,7 @@ const STYLES_WINDOW = css`
   border-radius: 4px;
   width: 100%;
   background: ${Constants.system.pitchBlack};
-  min-height: 288px;
+  min-height: 150px;
   padding: 24px;
   color: ${Constants.system.white};
   resize: none;
@@ -53,13 +55,43 @@ const STYLES_WINDOW = css`
   }
 `;
 
-const STYLES_WINDOW_NAV = css`
-  border-bottom: 5px solid red;
+const STYLES_WINDOW_HEADER = css`
+  height: 34px;
+  display: flex;
+  align-items: center;
+  text-align: center;
+  @media (${Constants.sizes.mobile}px) {
+    height: 28px;
+  }
 `;
+
+const STYLES_ICON = css`
+  border-radius: 50%;
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  margin-left: 8px;
+
+  :nth-of-type(1) {
+    background: rgb(255, 95, 86);
+    margin-left: 12px;
+  }
+
+  :nth-of-type(2) {
+    background: rgb(255, 189, 46);
+  }
+
+  :nth-of-type(3) {
+    background: rgb(39, 201, 63);
+  }
+`;
+
 const STYLES_WINDOW_BODY = css`
+  padding: 25px;
+
   overflow: hidden;
   white-space: nowrap;
-
+  color: ${Constants.system.white};
   animation: ${typewriter};
   display: inline-block;
   position: relative;
@@ -71,12 +103,12 @@ const STYLES_WINDOW_BODY = css`
 const CodeTerminal = () => {
   return (
     <div css={STYLES_ROOT}>
-      <div css={STYLES_WINDOW}>
-        <div css={STYLES_WINDOW_NAV}>Cat</div>
-        <div css={STYLES_WINDOW_BODY}>
-          npm install --save slate-react-system
-        </div>
+      <div css={STYLES_WINDOW_HEADER}>
+        <span css={STYLES_ICON} />
+        <span css={STYLES_ICON} />
+        <span css={STYLES_ICON} />
       </div>
+      <div css={STYLES_WINDOW_BODY}>npm install --save slate-react-system</div>
     </div>
   );
 };
diff --git a/components/core/Issue.js b/components/core/Issue.js
index f4496cbe..b605bc47 100644
--- a/components/core/Issue.js
+++ b/components/core/Issue.js
@@ -1,31 +1,140 @@
 import React, { Component } from "react";
+import * as Constants from "~/common/constants";
+
+import Label from "~/components/core/Label";
 
 import { css } from "@emotion/react";
 
-const STYLES_SLATE_CARD_EFFECTS = css`
-  border-radius: 4px;
-  padding: 8px;
-  cursor: default;
-  border: 1px solid gray;
-  color: black;
-  background-color: white;
-  background-position: center;
-  z-index: 2;
+const STYLES_SLATE_CARD_GROUP = css`
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+  margin-top: 48px;
+`;
+
+const STYLES_SLATE_CARD = css`
+  width: 33.33%;
+  height: calc(100vh / 4);
+  margin: -1px 0 0 -1px;
+  transition: 200ms ease box-shadow;
+  border: 1px solid ${Constants.system.darkGray};
+
+  :hover {
+    transition: 200ms ease box-shadow;
+    box-shadow: 0px 10px 40px 20px rgba(0, 0, 0, 0.1);
+  }
+`;
+
+const STYLES_SLATE_CARD_CTA = css`
+  width: 100%;
+  height: calc(100vh / 2);
+  margin-left: -1px;
+  box-shadow: 0px 4px 80px 4px rgba(0, 0, 0, 0.1);
+  text-decoration: none;
+  transition: 200ms ease all;
+
+  :hover {
+    box-shadow: 0px 4px 120px 4px rgba(0, 0, 0, 0.1);
+    transform: scale(1.01);
+  }
+`;
+
+const STYLES_SLATE_CARD_TEXT = css`
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: left;
+  width: 100%;
+  height: 100%;
+  padding: 12px;
+`;
+
+const STYLES_SLATE_CARD_TITLE = css`
+  padding: 12px;
+  font-size: ${Constants.typescale.lvl1};
+  text-align: left;
+  width: 100%;
+
+  @media (max-width: ${Constants.sizes.mobile}px) {
+    padding: 0px;
+    font-size: 1rem;
+  }
+`;
+
+const STYLES_SLATE_CARD_CTA_TITLE = css`
+  font-size: ${Constants.typescale.lvl5};
+  text-align: left;
+  line-height: 1.25;
+  padding: 12px;
+  overflow-wrap: break-word;
+  width: 100%;
+  color: ${Constants.system.darkGray};
+
+  @media (max-width: ${Constants.sizes.tablet}px) {
+    font-size: ${Constants.typescale.lvl4};
+  }
+
+  @media (max-width: ${Constants.sizes.mobile}px) {
+    font-size: ${Constants.typescale.lvl3};
+    padding: 0px 0px 8px 0px;
+  }
+`;
+
+const STYLES_SLATE_CARD_EXPLAINER = css`
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  padding: 12px;
+
+  @media (max-width: ${Constants.sizes.mobile}px) {
+    padding: 0px;
+  }
+`;
+
+const STYLES_SLATE_CARD_PARAGRAPH = css`
+  font-size: ${Constants.typescale.lvl0};
+  text-align: left;
+  text-decoration: none;
+  color: ${Constants.system.pitchBlack};
+  transition: 200ms ease all;
+
+  :hover,
+  :active {
+    color: ${Constants.system.pitchBlack};
+    background-color: transparent;
+  }
+
+  @media (max-width: ${Constants.sizes.mobile}px) {
+    font-size: 0.78rem;
+  }
+`;
+
+const STYLES_SLATE_CARD_CTA_PARAGRAPH = css`
+  font-size: ${Constants.typescale.lvl2};
+  text-align: left;
+
+  @media (max-width: ${Constants.sizes.mobile}px) {
+    font-size: 1rem;
+  }
 `;
 
 export default class Issue extends Component {
   render() {
-    const { title, id, labels, userName } = this.props;
+    const { title, id, labels, userName, url } = this.props;
     return (
-      <>
-        <div css={STYLES_SLATE_CARD_EFFECTS}>
-          <div>
-            <div>
-              {title}, {userName}
+      <div css={STYLES_SLATE_CARD}>
+        <a css={STYLES_SLATE_CARD_PARAGRAPH} href={url} target="_blank">
+          <div css={STYLES_SLATE_CARD_TEXT}>
+            <div css={STYLES_SLATE_CARD_TITLE}>{title}</div>
+            <Label key={id} labels={labels} />
+            <div css={STYLES_SLATE_CARD_EXPLAINER}>
+              <div>View Issue</div>
+              <div>-&gt;</div>
             </div>
           </div>
-        </div>
-      </>
+        </a>
+      </div>
     );
   }
 }
diff --git a/components/core/IssuesList.js b/components/core/IssuesList.js
index c8bbc4fd..50560b05 100644
--- a/components/core/IssuesList.js
+++ b/components/core/IssuesList.js
@@ -1,18 +1,22 @@
 import React, { Component } from "react";
+import * as Constants from "~/common/constants";
+
 import Issue from "~/components/core/Issue";
 
 import { css, keyframes } from "@emotion/react";
 
-const STYLES_SECTION_WRAPPER = css`
+const STYLES_SLATE_CARD_GROUP = css`
   display: flex;
-  flex-direction: row;
-  padding: 88px;
+  flex-wrap: wrap;
+  width: 100%;
+  margin-top: 48px;
 `;
+
 export default class IssueList extends Component {
   render() {
     const { issues } = this.props;
     return (
-      <div css={STYLES_SECTION_WRAPPER}>
+      <div css={STYLES_SLATE_CARD_GROUP}>
         {issues.map(issue => {
           return (
             <Issue
@@ -20,6 +24,7 @@ export default class IssueList extends Component {
               id={issue.id}
               labels={issue.labels}
               userName={issue.user.login}
+              url={issue.html_url}
             />
           );
         })}
diff --git a/components/core/Label.js b/components/core/Label.js
new file mode 100644
index 00000000..18c90b9e
--- /dev/null
+++ b/components/core/Label.js
@@ -0,0 +1,20 @@
+import React, { Component } from "react";
+
+export default class Label extends Component {
+  render() {
+    const { labels } = this.props;
+    return (
+      <>
+        <div className="content">
+          {labels.map(label => {
+            return (
+              <a key={label.id} className={"ui tag label"}>
+                {label.name}
+              </a>
+            );
+          })}
+        </div>
+      </>
+    );
+  }
+}
diff --git a/pages/_/marketing-candidate/community.js b/pages/_/marketing-candidate/community.js
index 63615b7e..327718bd 100644
--- a/pages/_/marketing-candidate/community.js
+++ b/pages/_/marketing-candidate/community.js
@@ -235,11 +235,156 @@ const STYLES_SLATE_CARD_EFFECTS = css`
   :after {
   }
 `;
+const SLATE_CORE_TEAM = [
+  {
+    id: 1,
+    name: "Jason Leyser",
+    url: "https://github.com/jasonleyser",
+    username: "jasonleyser",
+    imageUrl:
+      "https://avatars3.githubusercontent.com/u/60402678?s=400&u=b7d840718b781d4266fff7fb59e688d369ec1e6b&v=4"
+  },
+  {
+    id: 2,
+    name: "Cake",
+    url: "https://github.com/jimmylee",
+    username: "jimmylee",
+    imageUrl:
+      "https://avatars3.githubusercontent.com/u/60402678?s=400&u=b7d840718b781d4266fff7fb59e688d369ec1e6b&v=4"
+  },
+  {
+    id: 3,
+    name: "Martina Long",
+    url: "https://github.com/martinalong",
+    username: "martinalong",
+    imageUrl:
+      "https://avatars3.githubusercontent.com/u/60402678?s=400&u=b7d840718b781d4266fff7fb59e688d369ec1e6b&v=4"
+  },
+  {
+    id: 4,
+    name: "Haris Butt",
+    url: "https://github.com/harisbutt",
+    username: "harisbutt",
+    imageUrl:
+      "https://avatars3.githubusercontent.com/u/60402678?s=400&u=b7d840718b781d4266fff7fb59e688d369ec1e6b&v=4"
+  },
+  {
+    id: 5,
+    name: "Tara Lin",
+    url: "https://github.com/tarafanlin",
+    username: "tarafanlin",
+    imageUrl:
+      "https://avatars3.githubusercontent.com/u/60402678?s=400&u=b7d840718b781d4266fff7fb59e688d369ec1e6b&v=4"
+  },
+  {
+    id: 6,
+    name: "William Felker",
+    url: "https://slate.host/gndclouds/urban-gardens",
+    username: "gndclouds",
+    imageUrl:
+      "https://avatars3.githubusercontent.com/u/60402678?s=400&u=b7d840718b781d4266fff7fb59e688d369ec1e6b&v=4"
+  }
+];
+const SLATE_CONTRIBUTOR_TEAM = [
+  {
+    id: 1,
+    name: "Pooja Shah",
+    url: "https://github.com/pooja",
+    username: "pooja",
+    imageUrl:
+      "https://avatars3.githubusercontent.com/u/60402678?s=400&u=b7d840718b781d4266fff7fb59e688d369ec1e6b&v=4"
+  },
+  {
+    id: 2,
+    name: "Why",
+    url: "https://github.com/whyrusleeping",
+    username: "whyrusleeping",
+    imageUrl:
+      "https://avatars3.githubusercontent.com/u/60402678?s=400&u=b7d840718b781d4266fff7fb59e688d369ec1e6b&v=4"
+  },
+  {
+    id: 4,
+    name: "Aaron Stula",
+    url: "https://github.com/asutula",
+    username: "asutula",
+    imageUrl:
+      "https://avatars3.githubusercontent.com/u/60402678?s=400&u=b7d840718b781d4266fff7fb59e688d369ec1e6b&v=4"
+  },
+  {
+    id: 3,
+    name: "Ignacio Hagopian",
+    url: "https://github.com/jsign",
+    username: "jsign",
+    imageUrl:
+      "https://avatars3.githubusercontent.com/u/60402678?s=400&u=b7d840718b781d4266fff7fb59e688d369ec1e6b&v=4"
+  },
+  {
+    id: 5,
+    name: "Sander Pick",
+    url: "https://github.com/sanderpick",
+    username: "sanderpick",
+    imageUrl:
+      "https://avatars3.githubusercontent.com/u/60402678?s=400&u=b7d840718b781d4266fff7fb59e688d369ec1e6b&v=4"
+  },
+  {
+    id: 6,
+    name: "Andrew Hill",
+    url: "https://github.com/andrewxhill",
+    username: "andrewxhill",
+    imageUrl:
+      "https://avatars3.githubusercontent.com/u/60402678?s=400&u=b7d840718b781d4266fff7fb59e688d369ec1e6b&v=4"
+  },
+  {
+    id: 7,
+    name: "Akuoko Daniel Jnr",
+    url: "https://github.com/akuokojnr",
+    username: "akuokojnr",
+    imageUrl:
+      "https://avatars3.githubusercontent.com/u/60402678?s=400&u=b7d840718b781d4266fff7fb59e688d369ec1e6b&v=4"
+  },
+  {
+    id: 8,
+    name: "Narative",
+    url: "https://github.com/narative",
+    username: "Narative",
+    imageUrl:
+      "https://avatars3.githubusercontent.com/u/60402678?s=400&u=b7d840718b781d4266fff7fb59e688d369ec1e6b&v=4"
+  },
+  {
+    id: 9,
+    name: "Colin S. McCaleb",
+    url: "https://github.com/uonai",
+    username: "uonai",
+    imageUrl:
+      "https://avatars3.githubusercontent.com/u/60402678?s=400&u=b7d840718b781d4266fff7fb59e688d369ec1e6b&v=4"
+  }
+];
 export const getServerSideProps = async context => {
   return {
     props: { ...context.query }
   };
 };
+const SlateTeamCards = props => {
+  return (
+    <div key={props.id} css={STYLES_CARD_WRAPPER}>
+      <a href={props.url}>
+        <System.HoverTile height={250} width={200} style={{ borderRadius: 4 }}>
+          <div css={STYLES_SLATE_CARD_EFFECTS}>
+            <img
+              css={STYLES_IMG}
+              alt={`Github Profile Photo for ${props.handle}`}
+              src={props.preview}
+            />
+            <div css={STYLES_CARD_TEXT}>
+              <p css={STYLES_CARD_NAME}>{props.name}</p>
+              <p css={STYLES_CARD_GITHUB}>{`@${props.handle}`}</p>
+            </div>
+          </div>
+        </System.HoverTile>
+      </a>
+    </div>
+  );
+};
 
 export default class CommunityPage extends React.Component {
   constructor(props) {
@@ -249,209 +394,18 @@ export default class CommunityPage extends React.Component {
       issues: []
     };
   }
-  async componentDidMount() {
-    fetch(
-      `https://api.github.com/repos/filecoin-project/slate/issues?labels=For+the+public`
-    )
-      .then(res => res.json())
-      .then(data => {
-        console.log(data);
-        this.setState({
-          issues: data
-        });
-      })
-      .catch(err => console.log(err));
-    this.addCoreTeam();
-    this.addContributorTeam();
-  }
 
-  coreTeam = [
-    {
-      id: 1,
-      name: "Jason Leyser",
-      url: "https://github.com/jasonleyser",
-      handle: "jasonleyser",
-      imageUrl:
-        "https://avatars3.githubusercontent.com/u/60402678?s=400&u=b7d840718b781d4266fff7fb59e688d369ec1e6b&v=4"
-    },
-    {
-      id: 2,
-      name: "Cake",
-      url: "https://github.com/jimmylee",
-      handle: "jimmylee",
-      imageUrl:
-        "https://avatars3.githubusercontent.com/u/60402678?s=400&u=b7d840718b781d4266fff7fb59e688d369ec1e6b&v=4"
-    },
-    {
-      id: 3,
-      name: "Martina Long",
-      url: "https://github.com/martinalong",
-      handle: "martinalong",
-      imageUrl:
-        "https://avatars3.githubusercontent.com/u/60402678?s=400&u=b7d840718b781d4266fff7fb59e688d369ec1e6b&v=4"
-    },
-    {
-      id: 4,
-      name: "Haris Butt",
-      url: "https://github.com/harisbutt",
-      handle: "harisbutt",
-      imageUrl:
-        "https://avatars3.githubusercontent.com/u/60402678?s=400&u=b7d840718b781d4266fff7fb59e688d369ec1e6b&v=4"
-    },
-    {
-      id: 5,
-      name: "Tara Lin",
-      url: "https://github.com/tarafanlin",
-      handle: "tarafanlin",
-      imageUrl:
-        "https://avatars3.githubusercontent.com/u/60402678?s=400&u=b7d840718b781d4266fff7fb59e688d369ec1e6b&v=4"
-    },
-    {
-      id: 6,
-      name: "William Felker",
-      url: "https://slate.host/gndclouds/urban-gardens",
-      handle: "gndclouds",
-      imageUrl:
-        "https://avatars3.githubusercontent.com/u/60402678?s=400&u=b7d840718b781d4266fff7fb59e688d369ec1e6b&v=4"
-    }
-  ];
-  contributorTeam = [
-    {
-      id: 1,
-      name: "Pooja Shah",
-      url: "https://github.com/pooja",
-      handle: "pooja",
-      imageUrl:
-        "https://avatars3.githubusercontent.com/u/60402678?s=400&u=b7d840718b781d4266fff7fb59e688d369ec1e6b&v=4"
-    },
-    {
-      id: 2,
-      name: "Why",
-      url: "https://github.com/whyrusleeping",
-      handle: "whyrusleeping",
-      imageUrl:
-        "https://avatars3.githubusercontent.com/u/60402678?s=400&u=b7d840718b781d4266fff7fb59e688d369ec1e6b&v=4"
-    },
-    {
-      id: 4,
-      name: "Aaron Stula",
-      url: "https://github.com/asutula",
-      handle: "asutula",
-      imageUrl:
-        "https://avatars3.githubusercontent.com/u/60402678?s=400&u=b7d840718b781d4266fff7fb59e688d369ec1e6b&v=4"
-    },
-    {
-      id: 3,
-      name: "Ignacio Hagopian",
-      url: "https://github.com/jsign",
-      handle: "jsign",
-      imageUrl:
-        "https://avatars3.githubusercontent.com/u/60402678?s=400&u=b7d840718b781d4266fff7fb59e688d369ec1e6b&v=4"
-    },
-    {
-      id: 5,
-      name: "Sander Pick",
-      url: "https://github.com/sanderpick",
-      handle: "sanderpick",
-      imageUrl:
-        "https://avatars3.githubusercontent.com/u/60402678?s=400&u=b7d840718b781d4266fff7fb59e688d369ec1e6b&v=4"
-    },
-    {
-      id: 6,
-      name: "Andrew Hill",
-      url: "https://github.com/andrewxhill",
-      handle: "andrewxhill",
-      imageUrl:
-        "https://avatars3.githubusercontent.com/u/60402678?s=400&u=b7d840718b781d4266fff7fb59e688d369ec1e6b&v=4"
-    },
-    {
-      id: 7,
-      name: "Akuoko Daniel Jnr",
-      url: "https://github.com/akuokojnr",
-      handle: "akuokojnr",
-      imageUrl:
-        "https://avatars3.githubusercontent.com/u/60402678?s=400&u=b7d840718b781d4266fff7fb59e688d369ec1e6b&v=4"
-    },
-    {
-      id: 8,
-      name: "Narative",
-      url: "https://github.com/narative",
-      handle: "Narative",
-      imageUrl:
-        "https://avatars3.githubusercontent.com/u/60402678?s=400&u=b7d840718b781d4266fff7fb59e688d369ec1e6b&v=4"
-    },
-    {
-      id: 9,
-      name: "Colin S. McCaleb",
-      url: "https://github.com/uonai",
-      handle: "uonai",
-      imageUrl:
-        "https://avatars3.githubusercontent.com/u/60402678?s=400&u=b7d840718b781d4266fff7fb59e688d369ec1e6b&v=4"
-    }
-  ];
-  addCoreTeam = () => {
-    const allCoreTeam = [];
-    const team = this.coreTeam;
-    for (let c of team) {
-      allCoreTeam.push(
-        <div key={c.id} css={STYLES_CARD_WRAPPER}>
-          <a href={c.url}>
-            <System.HoverTile
-              height={250}
-              width={200}
-              style={{ borderRadius: 4 }}
-            >
-              <div css={STYLES_SLATE_CARD_EFFECTS}>
-                <img
-                  css={STYLES_IMG}
-                  alt={`Github Profile Photo for ${c.handle}`}
-                  src={c.imageUrl}
-                />
-                <div css={STYLES_CARD_TEXT}>
-                  <p css={STYLES_CARD_NAME}>{c.name}</p>
-                  <p css={STYLES_CARD_GITHUB}>{`@${c.handle}`}</p>
-                </div>
-              </div>
-            </System.HoverTile>
-          </a>
-        </div>
+  async componentDidMount() {
+    try {
+      const response = await fetch(
+        `https://api.github.com/repos/filecoin-project/slate/issues?labels=For+the+public`
       );
-    }
-    ReactDOM.render(allCoreTeam, document.getElementById("core-team"));
-  };
-  addContributorTeam = () => {
-    const allContributerTeam = [];
-    const team = this.contributorTeam;
-    for (let c of team) {
-      allContributerTeam.push(
-        <div key={c.id} css={STYLES_CARD_WRAPPER}>
-          <a href={c.url}>
-            <System.HoverTile
-              height={250}
-              width={200}
-              style={{ borderRadius: 4 }}
-            >
-              <div css={STYLES_SLATE_CARD_EFFECTS}>
-                <img
-                  css={STYLES_IMG}
-                  alt={`Github Profile Photo for ${c.handle}`}
-                  src={c.imageUrl}
-                />
-                <div css={STYLES_CARD_TEXT}>
-                  <p css={STYLES_CARD_NAME}>{c.name}</p>
-                  <p css={STYLES_CARD_GITHUB}>{`@${c.handle}`}</p>
-                </div>
-              </div>
-            </System.HoverTile>
-          </a>
-        </div>
-      );
-    }
-    ReactDOM.render(
-      allContributerTeam,
-      document.getElementById("contributer-team")
-    );
-  };
+      const issues = await response.json();
+      this.setState({
+        issues
+      });
+    } catch (e) {}
+  }
 
   render() {
     const title = `Slate`;
@@ -499,14 +453,34 @@ export default class CommunityPage extends React.Component {
             <div css={STYLES_TEXT_BLOCK}>
               <h2 css={STYLES_H2}>Core Team</h2>
             </div>
-            <div id="core-team" css={STYLES_CARD_GROUP}></div>
+            <div css={STYLES_CARD_GROUP}>
+              {SLATE_CORE_TEAM.map(each => (
+                <SlateTeamCards
+                  key={each.name}
+                  preview={each.imageUrl}
+                  url={each.url}
+                  name={each.name}
+                  username={each.username}
+                />
+              ))}
+            </div>
           </div>
 
           <div css={STYLES_SECTION_WRAPPER}>
             <div css={STYLES_TEXT_BLOCK}>
               <h2 css={STYLES_H2}>Contributors</h2>
             </div>
-            <div id="contributer-team" css={STYLES_CARD_GROUP}></div>
+            <div css={STYLES_CARD_GROUP}>
+              {SLATE_CONTRIBUTOR_TEAM.map(each => (
+                <SlateTeamCards
+                  key={each.name}
+                  preview={each.imageUrl}
+                  url={each.imageUrl}
+                  name={each.name}
+                  username={each.username}
+                />
+              ))}
+            </div>
           </div>
           <div css={STYLES_SECTION_WRAPPER}>
             <div css={STYLES_TEXT_BLOCK}>
@@ -537,45 +511,9 @@ export default class CommunityPage extends React.Component {
                   Github
                 </button>
               </div>
-              <div css={STYLES_SECTION_CHILD_SPLIT}>
-                <IssuesList issues={this.state.issues} />
-              </div>
-              <div css={STYLES_SECTION_CHILD_FULL}>
-                <h3 css={STYLES_H3}>Contact</h3>
-                <div css={STYLES_SECTION_CHILD_SPLIT}>
-                  <h3 css={STYLES_H3} style={{ opacity: 0.7 }}>
-                    {" "}
-                    Reach out to any of the core contributors, reach us on
-                    Twitter, or join our Slack.
-                  </h3>
-                  <br />
-                  <br />
-                  <button
-                    css={STYLES_BUTTON_PRIMARY}
-                    style={{ marginRight: 24 }}
-                    onClick={() => window.open("https://twitter.com/_slate")}
-                  >
-                    Twitter
-                  </button>
-                  <button
-                    css={STYLES_BUTTON_PRIMARY}
-                    onClick={() => window.open("https://filecoin.io/slack")}
-                  >
-                    Slack
-                  </button>
-                </div>
-              </div>
-              <div css={STYLES_SECTION_CHILD_FULL}>
-                <h3 css={STYLES_H3}>Integrate</h3>
-                <div css={STYLES_SECTION_CHILD_SPLIT}>
-                  <h3 css={STYLES_H3} style={{ opacity: 0.7 }}>
-                    Explore our API and SDK and build on top of Slate.
-                  </h3>
-                  <br />
-                  <br />
-                  <CodeBlock>npm install --save slate-react-system</CodeBlock>
-                </div>
-              </div>
+
+              <IssuesList issues={this.state.issues} />
+
               <div css={STYLES_SECTION_CHILD_FULL}>
                 <h3 css={STYLES_H3}>Design System</h3>
                 <div css={STYLES_SECTION_CHILD_SPLIT}>