Merge pull request #229 from filecoin-project/@gndclouds/community-page

Rebased and ready for PR

components/system/components/HoverTileColorful.js

@@ -0,0 +1,94 @@
+import * as React from "react";
+
+import { css } from "@emotion/react";
+
+const STYLES_TILE = css`
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  transition: transform 0.6s, box-shadow 0.65s ease;
+  transform-style: preserve-3d;
+  z-index: -1;
+  border-radius: 10px;
+  background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
+`;
+
+const STYLES_TILE_CONTAINER = css`
+  width: 300px;
+  height: 300px;
+  position: relative;
+  perspective: 600px;
+  display: inline-block;
+`;
+
+export class HoverTileColorful extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      tileStyle: {}
+    };
+
+    this.containerRef = React.createRef();
+  }
+
+  handleMovement = e => {
+    const { offsetLeft, offsetTop } = this.containerRef.current;
+    const width = this.props.width ? this.props.width : 300;
+    const height = this.props.height ? this.props.height : 300;
+    const relativeX = e.pageX - offsetLeft;
+    const relativeY = e.pageY - offsetTop;
+
+    let xP = (relativeX / width - 0.5) * 10;
+    let yP = (relativeY / height - 0.5) * 10;
+
+    if (xP >= 0 && yP >= 0) {
+      this.setTransform(4, 4);
+    } else if (xP < 0 && yP >= 0) {
+      this.setTransform(-4, 4);
+    } else if (xP < 0 && yP < 0) {
+      this.setTransform(-4, -4);
+    } else {
+      this.setTransform(4, -4);
+    }
+  };
+
+  handleExit = () => {
+    this.setState({ tileStyle: { transform: "none", boxShadow: "none" } });
+  };
+
+  setTransform = (x, y) => {
+    this.setState({
+      tileStyle: {
+        transform: `scale(.97) rotateY(${x}deg) rotateX(${y * -1}deg)`,
+        background: `linear-gradient(${x}deg, rgba(${x *
+          -5},238,238,1) 0%, rgba(148,${x * -20},233,1) 100%)`,
+        boxShadow: `${x * -1 * 0.75}px ${y *
+          -1 *
+          1.2}px 25px rgba(0, 0, 0, .15)`
+      }
+    });
+  };
+
+  render() {
+    return (
+      <div
+        css={STYLES_TILE_CONTAINER}
+        style={{ width: this.props.width, height: this.props.height }}
+        onMouseEnter={this.handleMovement}
+        onMouseMove={this.handleMovement}
+        onMouseLeave={this.handleExit}
+        ref={this.containerRef}
+      >
+        <div
+          css={STYLES_TILE}
+          style={{ ...this.state.tileStyle, ...this.props.style }}
+        >
+          {this.props.children}
+        </div>
+      </div>
+    );
+  }
+}

components/system/index.js

@@ -13,7 +13,7 @@ import { SendAddressFilecoin } from "~/components/system/modules/SendAddressFile
 import { FilecoinBalancesList } from "~/components/system/modules/FilecoinBalancesList";
 import {
   FilecoinStorageDealsList,
-  FilecoinRetrievalDealsList,
+  FilecoinRetrievalDealsList
 } from "~/components/system/modules/FilecoinDealsList";
 import { FilecoinSettings } from "~/components/system/modules/FilecoinSettings";
 
@@ -29,7 +29,7 @@ import {
   ButtonSecondary,
   ButtonSecondaryFull,
   ButtonDisabled,
-  ButtonDisabledFull,
+  ButtonDisabledFull
 } from "~/components/system/components/Buttons";
 import { CardTabGroup } from "~/components/system/components/CardTabGroup";
 import { CheckBox } from "~/components/system/components/CheckBox";
@@ -38,6 +38,7 @@ import { DatePicker } from "~/components/system/components/DatePicker";
 import { Input } from "~/components/system/components/Input";
 import { ListEditor } from "~/components/system/components/ListEditor";
 import { HoverTile } from "~/components/system/components/HoverTile";
+import { HoverTileColorful } from "~/components/system/components/HoverTileColorful";
 import { PopoverNavigation } from "~/components/system/components/PopoverNavigation";
 import { RadioGroup } from "~/components/system/components/RadioGroup";
 import {
@@ -46,12 +47,12 @@ import {
   LoaderMoon,
   LoaderRotate,
   LoaderProgress,
-  LoaderSpinner,
+  LoaderSpinner
 } from "~/components/system/components/Loaders";
 import { Slider } from "~/components/system/components/Slider";
 import {
   SelectCountryMenu,
-  SelectMenu,
+  SelectMenu
 } from "~/components/system/components/SelectMenus";
 import { StatUpload, StatDownload } from "~/components/system/components/Stat";
 import { TabGroup } from "~/components/system/components/TabGroup";
@@ -66,7 +67,7 @@ import {
   P,
   UL,
   OL,
-  LI,
+  LI
 } from "~/components/system/components/Typography";
 
 // NOTE(jim): Fragments
@@ -75,12 +76,12 @@ import { CodeText } from "~/components/system/components/fragments/CodeText";
 import {
   GlobalTooltip,
   TooltipAnchor,
-  TooltipWrapper,
+  TooltipWrapper
 } from "~/components/system/components/fragments/GlobalTooltip";
 import { DescriptionGroup } from "~/components/system/components/fragments/DescriptionGroup";
 import {
   TableContent,
-  TableColumn,
+  TableColumn
 } from "~/components/system/components/fragments/TableComponents";
 
 import { AvatarGroup } from "~/components/system/components/AvatarGroup";
@@ -119,6 +120,7 @@ export {
   GlobalNotification,
   Input,
   HoverTile,
+  HoverTileColorful,
   ListEditor,
   PopoverNavigation,
   RadioGroup,
@@ -156,5 +158,5 @@ export {
   LoaderRotate,
   LoaderProgress,
   LoaderSpinner,
-  AvatarGroup,
+  AvatarGroup
 };

pages/_/marketing-candidate/community.js

@@ -1,101 +1,116 @@
 import * as React from "react";
 import * as Constants from "~/common/constants";
-import * as Actions from "~/common/actions";
 import * as System from "~/components/system";
-import CodeBlock from "~/components/system/CodeBlock";
-import ReactDOM from "react-dom";
 
 import { css } from "@emotion/react";
 
 import WebsitePrototypeWrapper from "~/components/core/WebsitePrototypeWrapper";
 import WebsitePrototypeHeader from "~/components/core/NewWebsitePrototypeHeader";
 import WebsitePrototypeFooter from "~/components/core/NewWebsitePrototypeFooter";
+import CodeBlock from "~/components/system/CodeBlock";
 
 const STYLES_ROOT = css`
   display: flex;
   flex-direction: column;
-  padding: 16px 88px;
+  justify-content: space-between;
-  @media (max-width: ${Constants.sizes.tablet}px) {
+  max-width: 1440px;
-    padding: 5px 10px;
+  margin: -88px 0 0 0;
-  }
+  background-color: ${Constants.system.wall};
-  @media (max-width: ${Constants.sizes.mobile}px) {
-    padding: 5px 5px;
-  }
 `;
 
 const STYLES_H1 = css`
-  font-size: 1.953rem;
+  font-size: 3.815rem;
   line-height: 1.25;
-  padding: 0px 0px 32px 0px;
   width: 100%;
-  color: ${Constants.system.pitchBlack};
+  color: ${Constants.system.slate};
+  @media (max-width: ${Constants.sizes.tablet}px) {
+    font-size: 3.052rem;
+    padding: 0px 0px 16px 0px;
+  }
   @media (max-width: ${Constants.sizes.mobile}px) {
     font-size: 1.953rem;
-    padding: 0px 0px 16px 0px;
+    padding: 0px 0px 8px 0px;
-    line-height: 1.25;
   }
 `;
 
 const STYLES_H2 = css`
-  font-size: 1.25rem;
+  font-size: 2.441em;
   line-height: 1.25;
-  padding: 0px 0px 32px 0px;
+  padding: 16px 0px 0 0px;
   width: 100%;
-  color: ${Constants.system.darkGray};
+  color: ${Constants.system.slate};
+  @media (max-width: ${Constants.sizes.tablet}px) {
+    font-size: 1.563rem;
+    padding: 8px 0px 0px 0px;
+  }
   @media (max-width: ${Constants.sizes.mobile}px) {
     font-size: 1.25rem;
-    padding: 0px 0px 8px 0px;
+    padding: 8px 0px 0 0px;
     line-height: 1.5;
   }
 `;
 
 const STYLES_H3 = css`
-  font-size: 1.563em;
+  font-size: 1.563rem;
   line-height: 1.5;
-  padding: 0px 0px 16px 0px;
+  padding: 16px 0px 0px 0px;
-  color: ${Constants.system.darkGray};
+  color: ${Constants.system.slate};
+  @media (max-width: ${Constants.sizes.tablet}px) {
+    font-size: 1.25rem;
+    padding: 8px 0px 0px 0px;
+  }
   @media (max-width: ${Constants.sizes.mobile}px) {
     font-size: 1rem;
-    padding: 0px 0px 8px 0px;
+    padding: 8px 0px 0px 0px;
-    line-height: 1.5;
-    color: ${Constants.system.moonstone};
   }
 `;
 
 const STYLES_P = css`
   font-size: 1rem;
+  padding: 16px 0px 0px 0px;
   color: ${Constants.system.black};
   @media (max-width: ${Constants.sizes.mobile}px) {
     font-size: 0.78rem;
   }
 `;
 
-const STYLES_A = css`
+const STYLES_SECTION_HERO = css`
-  :link {
+  width: 100vw;
-    color: ${Constants.system.darkGray};
+  padding: 30vh 88px 88px 88px;
-    background-color: transparent;
+  display: flex;
-    text-decoration: none;
+  flex-direction: column;
-  }
+  justify-content: center;
-  :hover {
-    color: ${Constants.system.pitchBlack};
-    background-color: transparent;
-    text-decoration: none;
-  }
-  :active {
-    color: yellow;
-    background-color: transparent;
-    text-decoration: none;
-  }
   @media (max-width: ${Constants.sizes.mobile}px) {
+    padding: 40vh 24px 48px 24px;
+    display: block;
+  }
+`;
+
+const STYLES_TEXT_BLOCK = css`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 56vw;
+  align-self: center;
+  @media (max-width: ${Constants.sizes.mobile}px) {
+    width: 88%;
+    right: 24px;
+  }
+`;
+
+const STYLES_HEROIMG = css`
+  float: right;
+  margin: -80px 0 0 0;
+  width: 50vw;
+  @media (max-width: ${Constants.sizes.tablet}px) {
+    margin: 0;
   }
 `;
 
 const STYLES_IMG = css`
-  width: 180px;
+  width: 100%;
   border-radius: 4px;
-
+  display: block;
-  @media (max-width: ${Constants.sizes.mobile}px) {
-  }
 `;
 
 const STYLES_BUTTON_PRIMARY = css`
@@ -133,81 +148,80 @@ const STYLES_BUTTON_PRIMARY = css`
 
 const STYLES_SECTION_WRAPPER = css`
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
-  justify-content: space-between;
+  padding: 88px;
-  align-items: center;
+  width: 100vw;
-  margin: 10px auto;
-  width: 100%;
-  flex-wrap: wrap;
   @media (max-width: ${Constants.sizes.mobile}px) {
-    flex-direction: column;
+    padding: 64px 24px;
-    justify-content: space-between;
+    display: block;
-    align-items: center;
   }
 `;
-
 const STYLES_SECTION_CHILD_FULL = css`
+  display: flex;
   width: 100%;
-  @media (max-width: ${Constants.sizes.tablet}px) {
-    width: 100%;
-  }
   @media (max-width: ${Constants.sizes.mobile}px) {
-    width: 100%;
+    flex-direction: column;
-    padding: 20px;
   }
 `;
 const STYLES_SECTION_CHILD_SPLIT = css`
-  padding: 50px;
   width: 50%;
+  padding: 16px;
   @media (max-width: ${Constants.sizes.tablet}px) {
     width: 100%;
-    padding: 20px;
+    padding: 16px 0;
-  }
-  @media (max-width: ${Constants.sizes.mobile}px) {
-    width: 100%;
-    padding: 20px;
   }
 `;
-const STYLES_CARD_NAME = css`
-font-size: 1.3rem;
-font-weight: 600;
-letter-spacing: 0.002em;
-text-align: center;
-  @media (max-width: ${Constants.sizes.mobile}px) {
 
+const STYLES_CARD_GROUP = css`
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: 48px;
 `;
+
+const STYLES_CARD_NAME = css`
+  font-size: 1.25rem;
+  font-weight: 600;
+  letter-spacing: 0.002em;
+  text-align: center;
+`;
+
 const STYLES_CARD_GITHUB = css`
   font-size: 1rem;
   font-weight: 400;
   letter-spacing: 0.002em;
   text-align: center;
-  @media (max-width: ${Constants.sizes.mobile}px) {
-  }
-`;
-const STYLES_CARD_TEXT = css`
-  padding: 20px 5px;
-  color: ${Constants.system.pitchBlack};
-  :hover {
-  }
-  @media (max-width: ${Constants.sizes.mobile}px) {
-  }
-`;
-const STYLES_CARD_WRAPPER = css`
-  float: left;
-  width: 150px;
-  transition: 200ms ease box-shadow;
-  border-radius: 4px;
-  margin: 20px 40px;
-  @media (max-width: ${Constants.sizes.tablet}px) {
-    width: 100%;
-    padding: 20px;
-  }
-  @media (max-width: ${Constants.sizes.mobile}px) {
-    width: 100%;
-    padding: 20px;
-  }
 `;
 
+const STYLES_CARD_TEXT = css`
+  padding: 20px 5px;
+`;
+
+const STYLES_CARD_WRAPPER = css`
+  width: calc(100% / 7 px);
+  transition: 200ms ease box-shadow;
+  padding: 16px 16px 0 0;
+  @media (max-width: ${Constants.sizes.tablet}px) {
+    width: 50%;
+  }
+`;
+const STYLES_SLATE_CARD_EFFECTS = css`
+  border-radius: 4px;
+  height: 100%;
+  cursor: default;
+  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/13471/sparkles.gif");
+  background-position: center;
+  z-index: 2;
+  :hover {
+    background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/13471/sparkles.gif");
+    background-position: center;
+    background-size: 180%;
+    mix-blend-mode: color-dodge;
+    opacity: 1;
+    z-index: 2;
+  }
+  :after {
+  }
+`;
 export const getServerSideProps = async context => {
   return {
     props: { ...context.query }
@@ -218,7 +232,7 @@ export default class CommunityPage extends React.Component {
   render() {
     const title = `Slate`;
     const description =
-      "The place for all of your assets. Powered by Textile and Filecoin.";
+      "Slate is designed and built by a growing community of hackers, artists, and creatives on the web.";
     const url = "https://slate.host/community";
 
     return (
@@ -227,47 +241,50 @@ export default class CommunityPage extends React.Component {
         description={description}
         url={url}
       >
-        <WebsitePrototypeHeader color="dark" />
+        <WebsitePrototypeHeader />
         <div css={STYLES_ROOT}>
-          <div css={STYLES_SECTION_WRAPPER}>
+          <div css={STYLES_SECTION_HERO}>
-            <div css={STYLES_SECTION_CHILD_FULL}>
+            <div css={STYLES_TEXT_BLOCK}>
-              <h1 css={STYLES_H1}>
+              <h1 css={STYLES_H1}>Community</h1>
+              <h2 css={STYLES_H2}>
                 Slate is designed and built by a growing community of hackers,
                 artists, and creatives on the web.
-              </h1>
+              </h2>
             </div>
-            <div css={STYLES_SECTION_CHILD_FULL}>
+            <div>
               <img
-                css={STYLES_IMG}
+                css={STYLES_HEROIMG}
-                src=" https://bafybeihi2f53tmtwxv5f5jd2wcxtzrutgvxg5xsawfv3ousfjz2yfurm2i.ipfs.slate.textile.io"
+                src="https://bafybeihg57cndacdyww5rl62qjbitltdxnj4xpuyeohzv6wos2fnsrknza.ipfs.slate.textile.io/"
-                alt="Slate browser extension"
+                alt="Slate hive tesseract"
               />
             </div>
           </div>
 
           <div css={STYLES_SECTION_WRAPPER}>
-            <div css={STYLES_SECTION_CHILD_FULL}>
+            <div css={STYLES_TEXT_BLOCK}>
-              <h1 css={STYLES_H1}>Core Team</h1>
+              <h2 css={STYLES_H2}>Core Team</h2>
-              <br />
+            </div>
+            <div css={STYLES_CARD_GROUP}>
               <div css={STYLES_CARD_WRAPPER}>
                 <a href="https://github.com/jasonleyser">
-                  <System.HoverTile
+                  <System.HoverTileColorful
                     height={300}
                     width={200}
-                    style={{ padding: 10 }}
+                    style={{ padding: 8 }}
                   >
-                    <div>
+                    <div css={STYLES_SLATE_CARD_EFFECTS}>
                       <img
                         css={STYLES_IMG}
                         alt="Github Profile Photo for Jason Leyser"
                         src="https://bafkreie3dvujhpil4tgv2qx2lng5bfeif7reyybmgaftub6n4wxx4vnbly.ipfs.slate.textile.io"
                       />
+
+                      <div css={STYLES_CARD_TEXT}>
+                        <p css={STYLES_CARD_NAME}>Jason Leyser</p>
+                        <p css={STYLES_CARD_GITHUB}>@jasonleyser</p>
+                      </div>
                     </div>
-                    <div css={STYLES_CARD_TEXT}>
+                  </System.HoverTileColorful>
-                      <p css={STYLES_CARD_NAME}>Jason Leyser</p>
-                      <p css={STYLES_CARD_GITHUB}>@jasonleyser</p>
-                    </div>
-                  </System.HoverTile>
                 </a>
               </div>
               <div css={STYLES_CARD_WRAPPER}>
@@ -275,15 +292,14 @@ export default class CommunityPage extends React.Component {
                   <System.HoverTile
                     height={300}
                     width={200}
-                    style={{ padding: 10 }}
+                    style={{ padding: 8 }}
                   >
-                    <div>
+                    <img
-                      <img
+                      css={STYLES_IMG}
-                        css={STYLES_IMG}
+                      alt="Github Profile Photo for Cake"
-                        alt="Github Profile Photo for Cake"
+                      src="https://bafkreibfbxpiypzw4t7ubvjsxac7z3fdigvran5sayp2ibbuxhvzeivn4a.ipfs.slate.textile.io"
-                        src="https://bafkreibfbxpiypzw4t7ubvjsxac7z3fdigvran5sayp2ibbuxhvzeivn4a.ipfs.slate.textile.io"
+                    />
-                      />
+
-                    </div>
                     <div css={STYLES_CARD_TEXT}>
                       <p css={STYLES_CARD_NAME}>Cake</p>
                       <p css={STYLES_CARD_GITHUB}>@jimmylee</p>
@@ -296,15 +312,14 @@ export default class CommunityPage extends React.Component {
                   <System.HoverTile
                     height={300}
                     width={200}
-                    style={{ padding: 10 }}
+                    style={{ padding: 8 }}
                   >
-                    <div>
+                    <img
-                      <img
+                      css={STYLES_IMG}
-                        css={STYLES_IMG}
+                      alt="Github Profile Photo for Martina Long"
-                        alt="Github Profile Photo for Martina Long"
+                      src="https://bafkreif4mdwcxtykrcl2sfs6kcapg3d2tjyjjpcpmxnw3rqshbvr5ncjdi.ipfs.slate.textile.io"
-                        src="https://bafkreif4mdwcxtykrcl2sfs6kcapg3d2tjyjjpcpmxnw3rqshbvr5ncjdi.ipfs.slate.textile.io"
+                    />
-                      />
+
-                    </div>
                     <div css={STYLES_CARD_TEXT}>
                       <p css={STYLES_CARD_NAME}>Martina Long</p>
                       <p css={STYLES_CARD_GITHUB}>@martinalong</p>
@@ -317,7 +332,7 @@ export default class CommunityPage extends React.Component {
                   <System.HoverTile
                     height={300}
                     width={200}
-                    style={{ padding: 10 }}
+                    style={{ padding: 8 }}
                   >
                     <div>
                       <img
@@ -338,15 +353,14 @@ export default class CommunityPage extends React.Component {
                   <System.HoverTile
                     height={300}
                     width={200}
-                    style={{ padding: 10 }}
+                    style={{ padding: 8 }}
                   >
-                    <div>
+                    <img
-                      <img
+                      css={STYLES_IMG}
-                        css={STYLES_IMG}
+                      alt="Github Profile Photo for Tara Lin"
-                        alt="Github Profile Photo for Tara Lin"
+                      src="https://bafkreibku3qhls572oo4hskrg4t32c2kcj4auujyxioz5i44pfbaatwqbe.ipfs.slate.textile.io"
-                        src="https://bafkreibku3qhls572oo4hskrg4t32c2kcj4auujyxioz5i44pfbaatwqbe.ipfs.slate.textile.io"
+                    />
-                      />
+
-                    </div>
                     <div css={STYLES_CARD_TEXT}>
                       <p css={STYLES_CARD_NAME}>Tara Lin</p>
                       <p css={STYLES_CARD_GITHUB}>@tarafanlin</p>
@@ -359,15 +373,14 @@ export default class CommunityPage extends React.Component {
                   <System.HoverTile
                     height={300}
                     width={200}
-                    style={{ padding: 10 }}
+                    style={{ padding: 8 }}
                   >
-                    <div>
+                    <img
-                      <img
+                      css={STYLES_IMG}
-                        css={STYLES_IMG}
+                      alt="Github Profile Photo for William Felker"
-                        alt="Github Profile Photo for William Felker"
+                      src="https://bafybeic25subftulrkrxrw2ggpjblamofj3uemi2vaoqmlqzyzg2lfji5q.ipfs.slate.textile.io"
-                        src="https://bafybeic25subftulrkrxrw2ggpjblamofj3uemi2vaoqmlqzyzg2lfji5q.ipfs.slate.textile.io"
+                    />
-                      />
+
-                    </div>
                     <div css={STYLES_CARD_TEXT}>
                       <p css={STYLES_CARD_NAME}>William Felker</p>
                       <p css={STYLES_CARD_GITHUB}>@gndclouds</p>
@@ -378,23 +391,23 @@ export default class CommunityPage extends React.Component {
             </div>
           </div>
           <div css={STYLES_SECTION_WRAPPER}>
-            <div css={STYLES_SECTION_CHILD_FULL}>
+            <div css={STYLES_TEXT_BLOCK}>
-              <h1 css={STYLES_H1}>Contributors</h1>
+              <h2 css={STYLES_H2}>Contributors</h2>
-              <br />
+            </div>
+            <div css={STYLES_CARD_GROUP}>
               <div css={STYLES_CARD_WRAPPER}>
                 <a href="https://github.com/pooja">
                   <System.HoverTile
                     height={300}
                     width={200}
-                    style={{ padding: 10 }}
+                    style={{ padding: 8 }}
                   >
-                    <div>
+                    <img
-                      <img
+                      css={STYLES_IMG}
-                        css={STYLES_IMG}
+                      alt="Github Profile Photo for Pooja Shah"
-                        alt="Github Profile Photo for Pooja Shah"
+                      src="https://bafkreifqrmwuvlky7urkmkxyswksyjjpxvk62jwqgol35bfdfshgmcjmba.ipfs.slate.textile.io/"
-                        src="https://bafkreifqrmwuvlky7urkmkxyswksyjjpxvk62jwqgol35bfdfshgmcjmba.ipfs.slate.textile.io/"
+                    />
-                      />
+
-                    </div>
                     <div css={STYLES_CARD_TEXT}>
                       <p css={STYLES_CARD_NAME}>Pooja Shah</p>
                       <p css={STYLES_CARD_GITHUB}>@pooja</p>
@@ -407,18 +420,17 @@ export default class CommunityPage extends React.Component {
                   <System.HoverTile
                     height={300}
                     width={200}
-                    style={{ padding: 10 }}
+                    style={{ padding: 8 }}
                   >
-                    <div>
+                    <img
-                      <img
+                      css={STYLES_IMG}
-                        css={STYLES_IMG}
+                      alt="Github Profile Photo for Why"
-                        alt="Github Profile Photo for Why"
+                      src="https://bafkreiczwqnp5c6msa42pihhobagcbq6r5lkxuucmm3rmccb5lh46x3h7u.ipfs.slate.textile.io"
-                        src="https://bafkreiczwqnp5c6msa42pihhobagcbq6r5lkxuucmm3rmccb5lh46x3h7u.ipfs.slate.textile.io"
+                    />
-                      />
+
-                    </div>
                     <div css={STYLES_CARD_TEXT}>
-                      <p css={STYLES_CARD_NAME}>Pooja Shah</p>
+                      <p css={STYLES_CARD_NAME}>Why</p>
-                      <p css={STYLES_CARD_GITHUB}>@pooja</p>
+                      <p css={STYLES_CARD_GITHUB}>@whyrusleeping</p>
                     </div>
                   </System.HoverTile>
                 </a>
@@ -428,7 +440,7 @@ export default class CommunityPage extends React.Component {
                   <System.HoverTile
                     height={300}
                     width={200}
-                    style={{ padding: 10 }}
+                    style={{ padding: 8 }}
                   >
                     <div>
                       <img
@@ -449,7 +461,7 @@ export default class CommunityPage extends React.Component {
                   <System.HoverTile
                     height={300}
                     width={200}
-                    style={{ padding: 10 }}
+                    style={{ padding: 8 }}
                   >
                     <div>
                       <img
@@ -470,7 +482,7 @@ export default class CommunityPage extends React.Component {
                   <System.HoverTile
                     height={300}
                     width={200}
-                    style={{ padding: 10 }}
+                    style={{ padding: 8 }}
                   >
                     <div>
                       <img
@@ -491,7 +503,7 @@ export default class CommunityPage extends React.Component {
                   <System.HoverTile
                     height={300}
                     width={200}
-                    style={{ padding: 10 }}
+                    style={{ padding: 8 }}
                   >
                     <div>
                       <img
@@ -512,7 +524,7 @@ export default class CommunityPage extends React.Component {
                   <System.HoverTile
                     height={300}
                     width={200}
-                    style={{ padding: 10 }}
+                    style={{ padding: 8 }}
                   >
                     <div>
                       <img
@@ -534,7 +546,7 @@ export default class CommunityPage extends React.Component {
                   <System.HoverTile
                     height={300}
                     width={200}
-                    style={{ padding: 10 }}
+                    style={{ padding: 8 }}
                   >
                     <div>
                       <img
@@ -555,7 +567,7 @@ export default class CommunityPage extends React.Component {
                   <System.HoverTile
                     height={300}
                     width={200}
-                    style={{ padding: 10 }}
+                    style={{ padding: 8 }}
                   >
                     <div>
                       <img
@@ -574,58 +586,55 @@ export default class CommunityPage extends React.Component {
             </div>
           </div>
           <div css={STYLES_SECTION_WRAPPER}>
-            <div css={STYLES_SECTION_CHILD_FULL}>
+            <div css={STYLES_TEXT_BLOCK}>
               <h1 css={STYLES_H1}>Get involved</h1>
-              <p css={STYLES_P}>
+              <h3 css={STYLES_H3}>
                 Slate is a fully open-source file sharing network designed for
                 research and collaboration.
-              </p>
+              </h3>
             </div>
-            <div css={STYLES_SECTION_CHILD_SPLIT}>
+            <div css={STYLES_SECTION_CHILD_FULL}>
-              <h2 css={STYLES_H2}>Contribute</h2>
+              <div css={STYLES_SECTION_CHILD_SPLIT}>
-              <br />
+                <h3 css={STYLES_H3}>Contribute</h3>
-              <p css={STYLES_P}>
+                <p css={STYLES_P}>
-                Get involved with the project and contribute.
+                  Get involved with the project and contribute.
-              </p>
+                </p>
-              <br />
+                <br />
-
+                <button css={STYLES_BUTTON_PRIMARY}>
-              <button css={STYLES_BUTTON_PRIMARY}>
+                  <a>Github</a>
-                <a>Github</a>
+                </button>
-              </button>
+              </div>
+              <div css={STYLES_SECTION_CHILD_SPLIT}>
+                <h3 css={STYLES_H3}>Contact</h3>
+                <p css={STYLES_P}>
+                  {" "}
+                  Reach out to any of the core contributors, reach us on
+                  Twitter, or join our Slack.
+                </p>
+                <br />
+                <button css={STYLES_BUTTON_PRIMARY}>
+                  <a>Github</a>
+                </button>
+              </div>
             </div>
-            <div css={STYLES_SECTION_CHILD_SPLIT}>
+            <div css={STYLES_SECTION_CHILD_FULL}>
-              <h2 css={STYLES_H2}>Contact</h2>
+              <div css={STYLES_SECTION_CHILD_SPLIT}>
+                <h3 css={STYLES_H3}>Integrate</h3>
+                <p css={STYLES_P}>
+                  Explore our API and SDK and build on top of Slate.
+                </p>
+                <br />
+                <CodeBlock>npm install --save slate-react-system</CodeBlock>
+              </div>
               <br />
-              <p css={STYLES_P}>
+              <div css={STYLES_SECTION_CHILD_SPLIT}>
-                {" "}
+                <h3 css={STYLES_H3}>Design System</h3>
-                Reach out to any of the core contributors, reach us on Twitter,
+                <p css={STYLES_P}>
-                or join our Slack.
+                  Check out our open source design system for your projects.
-              </p>
+                </p>
-              <br />
+                <br />
-
+                <CodeBlock>npm install --save slate-react-system</CodeBlock>
-              <button css={STYLES_BUTTON_PRIMARY}>
+              </div>
-                <a>Github</a>
-              </button>
-            </div>
-            <div css={STYLES_SECTION_CHILD_SPLIT}>
-              <h2 css={STYLES_H2}>Integrate</h2>
-              <br />
-              <p css={STYLES_P}>
-                Explore our API and SDK and build on top of Slate.
-              </p>
-
-              <br />
-              <CodeBlock>npm install --save slate-react-system</CodeBlock>
-            </div>
-            <br />
-            <div css={STYLES_SECTION_CHILD_SPLIT}>
-              <h2 css={STYLES_H2}>Design System</h2>
-              <p css={STYLES_P}>
-                Check out our open source design system for your projects.
-              </p>
-
-              <br />
-              <CodeBlock>npm install --save slate-react-system</CodeBlock>
             </div>
           </div>
         </div>