Merge pull request #345 from filecoin-project/@gndclouds/community-v2

@gndclouds/community v2

.gitignore

@@ -1,4 +1,5 @@
 .next
+.nova
 .env
 .env-custom-development
 .env-development

pages/_/community.js

@@ -9,7 +9,6 @@ import { SceneUtils } from "three";
 import WebsitePrototypeWrapper from "~/components/core/WebsitePrototypeWrapper";
 import WebsitePrototypeHeader from "~/components/core/NewWebsitePrototypeHeader";
 import WebsitePrototypeFooter from "~/components/core/NewWebsitePrototypeFooter";
-import IssuesList from "~/components/core/marketing/IssuesList";
 import CodeBlock from "~/components/system/CodeBlock";
 
 const FEATURES = [
@@ -36,27 +35,6 @@ const FEATURES = [
   },
 ];
 
-const CONTRIBUTIONS = [
-  {
-    contribution: "An open source brandbook for Slate.",
-    contributor: "Narrative",
-    illustration:
-      "https://slate.textile.io/ipfs/bafkreiamnbqik6542ydqowdicdqji7jljbtvebee7vaciyozklgn6uycim",
-  },
-  {
-    contribution: "A portrait of Slate",
-    contributor: "Jason Yuan",
-    illustration:
-      "https://slate.textile.io/ipfs/bafkreidtgwdyqwqwk2apprnu3rwxkzv5lewktquou6k6crckpouxpq5ugm",
-  },
-  {
-    contribution: "A playful hover tile",
-    contributor: "Someone",
-    illustration:
-      "https://slate.textile.io/ipfs/bafkreiaz2hmjkzau3kkcah55rxdkwzum33n35icqbse2ik5e7vqcsb73kq",
-  },
-];
-
 const SLATE_CORE_TEAM = [
   {
     id: 1,
@@ -64,7 +42,7 @@ const SLATE_CORE_TEAM = [
     url: "https://github.com/jasonleyser",
     username: "jasonleyser",
     imageUrl:
-      "https://avatars0.githubusercontent.com/u/310223?s=400&u=62a15c1b5791b953fc5153a4b3f491f4b0bf2ae5&v=4",
+      "https://slate.textile.io/ipfs/bafkreidw22xqcr6fo6m7k25qe3yemby6w4dlawbsu6yxs7qjnpu5gyoiwm",
   },
   {
     id: 2,
@@ -72,7 +50,7 @@ const SLATE_CORE_TEAM = [
     url: "https://github.com/jimmylee",
     username: "jimmylee",
     imageUrl:
-      "https://avatars0.githubusercontent.com/u/310223?s=400&u=62a15c1b5791b953fc5153a4b3f491f4b0bf2ae5&v=4",
+      "https://slate.textile.io/ipfs/bafkreigxoyf43vw3p2hbc4ycsyh2og36cgy3s47xkb2n4w3i7auv2a6cei",
   },
   {
     id: 3,
@@ -80,7 +58,7 @@ const SLATE_CORE_TEAM = [
     url: "https://github.com/martinalong",
     username: "martinalong",
     imageUrl:
-      "https://avatars0.githubusercontent.com/u/310223?s=400&u=62a15c1b5791b953fc5153a4b3f491f4b0bf2ae5&v=4",
+      "https://slate.textile.io/ipfs/bafkreiasfgunf66fxncazlfzff3vp2btfe4j55jxgb2epcthrnvwkthwrq",
   },
   {
     id: 4,
@@ -96,15 +74,15 @@ const SLATE_CORE_TEAM = [
     url: "https://github.com/tarafanlin",
     username: "tarafanlin",
     imageUrl:
-      "https://avatars0.githubusercontent.com/u/310223?s=400&u=62a15c1b5791b953fc5153a4b3f491f4b0bf2ae5&v=4",
+      "https://slate.textile.io/ipfs/bafkreieuxq4itewoes3wnpfxw2dfat6oi6rsy2snix7tvtgv7d7bgre64q",
   },
   {
     id: 6,
     name: "William Felker",
-    url: "https://slate.host/gndclouds/urban-gardens",
+    url: "https://github.com/gndclouds",
     username: "gndclouds",
     imageUrl:
-      "https://avatars0.githubusercontent.com/u/310223?s=400&u=62a15c1b5791b953fc5153a4b3f491f4b0bf2ae5&v=4",
+      "https://bafkreih2b33oaftlflmsg6njtu7i54f2nwws5gfhhf5w4qaezcejs6gjte.ipfs.slate.textile.io/",
   },
 ];
 
@@ -173,14 +151,6 @@ const SLATE_CONTRIBUTOR_TEAM = [
     imageUrl:
       "https://slate.textile.io/ipfs/bafkreihdkapriwuzfh42zkhs3kwj5qki43dvyu6mq5j3rug3uf6i7egs6y",
   },
-  {
-    id: 9,
-    name: "Colin S. McCaleb",
-    url: "https://github.com/uonai",
-    username: "uonai",
-    imageUrl:
-      "https://slate.textile.io/ipfs/bafkreigbjyxbmc2cirha3g4y2rmlrntau2l2gjy4ft3y6ii3kyh4ifw5li",
-  },
 ];
 
 const STYLES_ROOT = css`
@@ -252,6 +222,22 @@ const STYLES_P = css`
   }
 `;
 
+const STYLES_P_FULL_WIDTH = css`
+  font-family: ${Constants.font.text};
+  font-weight: 400;
+  font-size: ${Constants.typescale.lvl1};
+  letter-spacing: -0.011rem;
+  line-height: 1.5;
+  margin: 4px 0 0 0;
+  width: 100%;
+  color: ${Constants.system.slate};
+  opacity: 0.7;
+
+  @media (max-width: ${Constants.sizes.mobile}px) {
+    width: 100%;
+  }
+`;
+
 const STYLES_TEXT_BLOCK = css`
   display: flex;
   flex: 1 1 auto;
@@ -270,17 +256,31 @@ const STYLES_SECTION_WRAPPER = css`
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  background-color: ${Constants.system.white};
-  border-radius: 16px;
 
   @media (max-width: ${Constants.sizes.mobile}px) {
     padding: 24px;
   }
 `;
+const STYLES_SECTION_WRAPPER_BOX = css`
+  width: 750px;
+  padding: 44px;
+  margin: 12px auto;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  background: white;
+  border-radius: 8px;
+
+  @media (max-width: ${Constants.sizes.mobile}px) {
+    padding: 24px;
+    margin: 36px;
+  }
+`;
 
 const STYLES_BUTTON = css`
   margin-top: 48px;
   min-height: 48px;
+  margin-right: 12px;
   box-sizing: border-box;
   border: 0;
   border-radius: 4px;
@@ -331,10 +331,16 @@ const STYLES_SPLIT_WIDTH = css`
 
   @media (max-width: ${Constants.sizes.tablet}px) {
     width: 100%;
+    :nth-child(2) {
+      padding-left: 0;
+    }
   }
 
   @media (max-width: ${Constants.sizes.mobile}px) {
     width: 100%;
+    :nth-child(2) {
+      padding-left: 0;
+    }
   }
 `;
 
@@ -488,18 +494,43 @@ const STYLES_SLATE_CARD_EFFECTS = css`
   }
 `;
 
+const STYLES_FEATURE_CARD_WRAPPER = css`
+  width: 33%;
+  height: auto;
+  padding-right: 24px;
+  :nth-last-child() {
+    padding-right: 0px;
+  }
+
+  @media (max-width: ${Constants.sizes.tablet}px) {
+    width: 100%;
+    height: auto;
+    margin-bottom: 32px;
+  }
+
+  @media (max-width: ${Constants.sizes.mobile}px) {
+    width: 100%;
+    height: auto;
+    margin-bottom: 32px;
+  }
+`;
+
 const STYLES_FEATURE_CARD = css`
-  width: 30%;
+  margin: 24px auto;
-  height: 450px;
-  justify-content: space-between;
-  margin: auto;
   padding: 16px;
   border-radius: 8px;
   background-color: #f2f4f8;
   box-shadow: -6px -6px 10px #ffffff, 4px 4px 10px #d4d4d4;
 
+  @media (max-width: ${Constants.sizes.tablet}px) {
+    width: 100%;
+    height: auto;
+    margin-bottom: 32px;
+  }
+
   @media (max-width: ${Constants.sizes.mobile}px) {
     width: 100%;
+    height: auto;
     margin-bottom: 32px;
   }
 `;
@@ -567,7 +598,6 @@ const STYLES_IMG_ICON = css`
 `;
 
 const STYLES_CHAT = css`
-  width: 350px;
   background: #ffffff;
   border: 1px solid #000000;
   box-sizing: border-box;
@@ -603,9 +633,7 @@ const STYLES_CONSOLE = css`
   font-size: 14px;
   box-sizing: border-box;
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
-
+  border-radius: 8px;
-  :hover {
-  }
 `;
 
 const STYLES_CONSOLE_BODY = css`
@@ -705,11 +733,13 @@ const SlateTeamCards = (props) => {
 
 const FeatureCard = (props) => {
   return (
-    <div css={STYLES_FEATURE_CARD}>
+    <div css={STYLES_FEATURE_CARD_WRAPPER}>
-      <img css={STYLES_FEATURE_IMG} src={props.illustration} />
+      <div css={STYLES_FEATURE_CARD}>
-      <div css={STYLES_FEATURE_TEXT}>{props.title}</div>
+        <img css={STYLES_FEATURE_IMG} src={props.illustration} />
-      <div css={STYLES_FEATURE_TEXT} style={{ opacity: 0.7 }}>
+        <div css={STYLES_FEATURE_TEXT}>{props.title}</div>
-        {props.description}
+        <div css={STYLES_FEATURE_TEXT} style={{ opacity: 0.7 }}>
+          {props.description}
+        </div>
       </div>
     </div>
   );
@@ -766,13 +796,17 @@ export default class CommunityPage extends React.Component {
               />
               <div css={STYLES_DINNER_TABLE}>
                 <h1 css={STYLES_H1}>An open invitation to everyone</h1>
-                <p css={STYLES_P}>
+                <p css={STYLES_P_FULL_WIDTH}>
                   Slate is designed and built by a growing community of hackers,
                   artists, and creatives on the web.
                 </p>
                 <button
                   css={STYLES_BUTTON}
-                  onClick={() => window.open("https://filecoin.io/slack")}
+                  onClick={() =>
+                    window.open(
+                      "https://slate.textile.io/ipfs/bafybeiekksvkiaa2vwyzaitjb44adb5mfbqaqkagizwuw5odmgcwdmmiha"
+                    )
+                  }
                 >
                   Join our community{" "}
                 </button>
@@ -796,9 +830,10 @@ export default class CommunityPage extends React.Component {
           <div css={STYLES_SECTION_WRAPPER}>
             <div css={STYLES_FULL_WIDTH}>
               <h1>Core Team</h1>
-              <p>
+              <br />
-                We work on the core product of Slate, and you can reachout to us
+              <p css={STYLES_P}>
-                about for anything you might need to know about Slate.
+                We work on Slate, and you can reachout to us about for anything
+                you might need to know.
               </p>
               <div css={STYLES_CARD_GROUP}>
                 {SLATE_CORE_TEAM.map((each) => (
@@ -816,9 +851,9 @@ export default class CommunityPage extends React.Component {
           <div css={STYLES_SECTION_WRAPPER} style={{ marginTop: 80 }}>
             <div css={STYLES_FULL_WIDTH}>
               <h1>Contributors</h1>
-              <p>
+              <br />
-                We couldn’t make Slate without the input and continures from the
+              <p css={STYLES_P}>
-                out community.
+                Our amazing community members helping us make Slate.
               </p>
               <div css={STYLES_CARD_GROUP}>
                 {SLATE_CONTRIBUTOR_TEAM.map((each) => (
@@ -833,107 +868,6 @@ export default class CommunityPage extends React.Component {
               </div>
             </div>
           </div>
-          <div css={STYLES_SECTION_WRAPPER}>
-            <div css={STYLES_TEXT_BLOCK}>
-              <h2 css={STYLES_H2}>
-                We couldn’t build Slate without our community of contributors
-              </h2>
-              <p css={STYLES_P}>
-                Here features some great work from our contributors. We define
-                contribution beyond code. And we believe that everyone has
-                something to bring to the table. 🍰
-              </p>
-            </div>
-            <br />
-            <br />
-            <div>
-              {CONTRIBUTIONS.map((each) => (
-                <ContributionCard
-                  contribution={each.contribution}
-                  contributor={each.contributor}
-                  illustration={each.illustration}
-                />
-              ))}
-            </div>
-            <div css={STYLES_CENTER_BLOCK}>
-              <img
-                css={STYLES_IMG_ICON}
-                src="https://slate.textile.io/ipfs/bafkreiav4ursjyxypvx5nvils6wyskpdua64pnzukmun3xmilndiuv3vp4"
-              />
-              <h3 css={STYLES_H3}>
-                Have some 🍰 to bring to the table?
-                <br />
-                Let’s chat about how we can support you.
-              </h3>
-              <button
-                css={STYLES_BUTTON}
-                onClick={() =>
-                  window.open(
-                    "https://github.com/filecoin-project/slate/issues"
-                  )
-                }
-              >
-                Join Slack channel
-              </button>
-            </div>
-          </div>
-          <div css={STYLES_SECTION_WRAPPER} style={{ marginTop: 80 }}>
-            <div css={STYLES_SPLIT_WIDTH}>
-              <div css={STYLES_CHAT}>
-                <p>
-                  Hey Slate Team,
-                  <br />
-                  <br /> Have you thought about adding a confetti 🎉 effect to
-                  the download button?
-                  <br />
-                  <br />
-                  Best, <br />
-                  🦄
-                </p>
-              </div>
-              <div css={STYLES_CHAT}>
-                <p>
-                  Hey 🦄, <br />
-                  <br />
-                  That would be so fun, will work in it! <br />
-                  <br /> best, <br />
-                  🐳
-                </p>
-              </div>
-            </div>
-            <div css={STYLES_SPLIT_WIDTH}>
-              <h1>
-                <span css={STYLES_HIGLIGHT_TEXT_GREEN}>Have an idea</span> for
-                how to make Slate better?
-              </h1>
-              <p>
-                You can create an issue on github or send us an email with your
-                recommendation.
-              </p>
-              <div>
-                <button
-                  css={STYLES_BUTTON}
-                  onClick={() =>
-                    window.open(
-                      "https://github.com/filecoin-project/slate/issues/new/choose"
-                    )
-                  }
-                >
-                  Create an issue
-                </button>
-                <button
-                  css={STYLES_BUTTON}
-                  onClick={() =>
-                    window.open(
-                      "https://chrome.google.com/webstore/detail/slate/gloembacbehhbfbkcfjmloikeeaebnoc"
-                    )
-                  }
-                >
-                  Email us feedback
-                </button>
-              </div>
-            </div>
-          </div>
           <div css={STYLES_SECTION_WRAPPER}>
             <div css={STYLES_TEXT_BLOCK}>
               <h2 css={STYLES_H2}>Further down the road</h2>
@@ -942,6 +876,8 @@ export default class CommunityPage extends React.Component {
                 we’re excited about.
               </p>
             </div>
+            <br />
+            <br />
             <div css={STYLES_CARD_GROUP}>
               {FEATURES.map((each) => (
                 <FeatureCard
@@ -951,6 +887,8 @@ export default class CommunityPage extends React.Component {
                 />
               ))}
             </div>
+          </div>
+          <div css={STYLES_SECTION_WRAPPER_BOX}>
             <div css={STYLES_CENTER_BLOCK}>
               <img
                 css={STYLES_IMG_ICON}
@@ -973,6 +911,59 @@ export default class CommunityPage extends React.Component {
               </button>
             </div>
           </div>
+          <div css={STYLES_SECTION_WRAPPER}>
+            <div css={STYLES_SPLIT_WIDTH}>
+              <h1>
+                <span css={STYLES_HIGLIGHT_TEXT_GREEN}>Have an idea</span> for
+                how to make Slate better?
+              </h1>
+              <p>
+                You can create an issue on github or send us an email with your
+                recommendation.
+              </p>
+              <div>
+                <button
+                  css={STYLES_BUTTON}
+                  onClick={() =>
+                    window.open(
+                      "https://github.com/filecoin-project/slate/issues"
+                    )
+                  }
+                >
+                  Create an issue
+                </button>
+                <button
+                  css={STYLES_BUTTON}
+                  onClick={() => window.open("https://twitter.com/_slate")}
+                >
+                  Tweet us
+                </button>
+              </div>
+            </div>
+            <div css={STYLES_SPLIT_WIDTH}>
+              <div css={STYLES_CHAT}>
+                <p>
+                  Hey Slate Team,
+                  <br />
+                  <br /> Have you thought about adding a confetti 🎉 effect to
+                  the download button?
+                  <br />
+                  <br />
+                  Best, <br />
+                  🦄
+                </p>
+              </div>
+              <div css={STYLES_CHAT}>
+                <p>
+                  Hey 🦄, <br />
+                  <br />
+                  That would be so fun, will work in it! <br />
+                  <br /> Best, <br />
+                  🐳
+                </p>
+              </div>
+            </div>
+          </div>
           <div css={STYLES_SECTION_WRAPPER} style={{ marginTop: 80 }}>
             <div css={STYLES_SPLIT_WIDTH}>
               <h1>
@@ -984,7 +975,7 @@ export default class CommunityPage extends React.Component {
               <br />
               <p>
                 Checkout the examples below to see how quickly you can get up
-                and running wtih Slate’s API.
+                and running with Slate’s API.
               </p>
               <button
                 css={STYLES_BUTTON}
@@ -996,27 +987,21 @@ export default class CommunityPage extends React.Component {
             <div css={STYLES_SPLIT_WIDTH}>
               <CodeWindow>
                 {`const response = await fetch('https://slate.host/api/v1/get', {
-                      method: 'POST',
+method: 'POST',
-                      headers: {
+    headers: {
-                      'Content-Type': 'application/json',
+    'Content-Type': 'application/json',
-                      // NOTE: your API key
+    // NOTE: your API key
-                      Authorization: 'Basic SLA234abe41-c235-464f-9f4a-9effbbd3530dTE',
+    Authorization: 'Basic SLA234abe41-c235-464f-9f4a-9effbbd3530dTE',
-                      },
+    },
-                      body: JSON.stringify({ data: {
+    body: JSON.stringify({ data: {
-                      // NOTE: optional, if you want your private slates too.
+    // NOTE: optional, if you want your private slates too.
-                      private: false
+    private: false
-                      }})
+    }})
-                    });
+  });
-                    
+  
-                    const json = await response.json();
+  const json = await response.json();
-                    console.log(json);`}
+  console.log(json);`}
               </CodeWindow>
-              {/*<div css={STYLES_CONSOLE}>
-                <div css={STYLES_CONSOLE_BODY}>
-                  <code>{`
-                `}</code>
-                </div>
-              </div>*/}
             </div>
           </div>
         </div>

pages/_/marketing-candidate/community-t.js

@@ -1,488 +0,0 @@
-import * as React from "react";
-import * as Constants from "~/common/constants";
-import * as Actions from "~/common/actions";
-
-import { css } from "@emotion/react";
-
-import WebsitePrototypeWrapper from "~/components/core/WebsitePrototypeWrapper";
-import WebsitePrototypeHeader from "~/components/core/NewWebsitePrototypeHeader";
-import WebsitePrototypeFooter from "~/components/core/NewWebsitePrototypeFooter";
-
-const FEATURES = [
-  {
-    illustration: "https://slate.textile.io/ipfs/bafkreih4hmgltk3mboh5to6lwzcmcptzsiuzlodpdxztynsl2xij6q4deq",
-    title: "Multiplayer slate",
-    description:
-      "Slate as social space. Co-create slates with family and friends. Share design, code, research, dinner plans with others and discuss your ideas.",
-  },
-  {
-    illustration: "https://slate.textile.io/ipfs/bafybeiebglllfwpqk7v57erslgmsjq2vkfav7zmcgjb7dcq3rhca26iwli",
-    title: "Unity game engine",
-    description:
-      "Slate as playground. Upload your favorite unity game to the file-sharing network. Invite your friends to play together.",
-  },
-  {
-    illustration: "https://slate.textile.io/ipfs/bafkreigwlh7kmqnay2qs5lrcyl34mq7rhlcwfwld4vwstmnhhxyrqdyhaq",
-    title: "Flexible content arrangement",
-    description:
-      "Slate as digital garden. Organized information with gallery view, list view, a node-link diagram, a timeline, a discussion thread and more.",
-  },
-];
-
-const CONTRIBUTIONS = [
-  {
-    contribution: "An open source brandbook for Slate.",
-    contributor: "Narrative",
-    illustration: "https://slate.textile.io/ipfs/bafkreiamnbqik6542ydqowdicdqji7jljbtvebee7vaciyozklgn6uycim",
-  },
-  {
-    contribution: "A portrait of Slate",
-    contributor: "Jason Yuan",
-    illustration: "https://slate.textile.io/ipfs/bafkreidtgwdyqwqwk2apprnu3rwxkzv5lewktquou6k6crckpouxpq5ugm",
-  },
-  {
-    contribution: "A playful hover tile",
-    contributor: "Someone",
-    illustration: "https://slate.textile.io/ipfs/bafkreiaz2hmjkzau3kkcah55rxdkwzum33n35icqbse2ik5e7vqcsb73kq",
-  },
-];
-
-const STYLES_ROOT = css`
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  max-width: 1440px;
-  margin: -88px 0 0 0;
-  background-color: #f2f4f8;
-`;
-
-const STYLES_H1 = css`
-  font-family: ${Constants.font.medium};
-  font-weight: 400;
-  font-size: ${Constants.typescale.lvl5};
-  letter-spacing: -0.022rem;
-  line-height: 1.3;
-  color: ${Constants.system.slate};
-  margin-bottom: 1rem;
-  width: 45%;
-
-  @media (max-width: ${Constants.sizes.mobile}px) {
-    font-size: ${Constants.typescale.lvl4};
-  }
-`;
-
-const STYLES_H2 = css`
-  font-family: ${Constants.font.medium};
-  font-weight: 400;
-  font-size: ${Constants.typescale.lvl4};
-  letter-spacing: -0.022rem;
-  line-height: 1.3;
-  color: ${Constants.system.slate};
-  margin-bottom: 1rem;
-  width: 45%;
-
-  @media (max-width: ${Constants.sizes.mobile}px) {
-    width: 100%;
-    font-size: ${Constants.typescale.lvl3};
-  }
-`;
-
-const STYLES_H3 = css`
-  font-family: ${Constants.font.medium};
-  font-weight: 400;
-  font-size: ${Constants.typescale.lvl3};
-  letter-spacing: -0.022rem;
-  line-height: 1.3;
-  color: ${Constants.system.slate};
-  margin-bottom: 1rem;
-  width: 45%;
-
-  @media (max-width: ${Constants.sizes.mobile}px) {
-    width: 100%;
-    font-size: ${Constants.typescale.lvl2};
-  }
-`;
-
-const STYLES_P = css`
-  font-family: ${Constants.font.text};
-  font-weight: 400;
-  font-size: ${Constants.typescale.lvl1};
-  letter-spacing: -0.011rem;
-  line-height: 1.5;
-  margin: 4px 0 0 0;
-  width: 50%;
-  color: ${Constants.system.slate};
-  opacity: 0.7;
-
-  @media (max-width: ${Constants.sizes.mobile}px) {
-    width: 100%;
-  }
-`;
-
-const STYLES_TEXT_BLOCK = css`
-  display: flex;
-  flex: 1 1 auto;
-  justify-content: space-between;
-  width: 67%;
-
-  @media (max-width: ${Constants.sizes.mobile}px) {
-    display: block;
-    width: 100%;
-  }
-`;
-
-const stylesFullWidthText = {
-  width: `100%`,
-};
-
-const STYLES_SECTION_WRAPPER = css`
-  width: 100%;
-  padding: 120px 88px;
-
-  @media (max-width: ${Constants.sizes.mobile}px) {
-    padding: 48px;
-  }
-`;
-
-const STYLES_DINNER_TABLE = css`
-  width: 50%;
-  padding: 48px 64px;
-  background-color: #e7e7e9;
-  display: inline-block;
-  box-shadow: 0px 10px 50px 20px rgba(0, 0, 0, 0.1);
-
-  @media (max-width: ${Constants.sizes.mobile}px) {
-    width: 100%;
-    padding: 24px 32px;
-  }
-`;
-
-const STYLES_TABLE_ROW = css`
-  width: 100%;
-`;
-
-const STYLES_FIGURES_GROUP = css`
-  width: 50%;
-  margin: -4px auto;
-
-  @media (max-width: ${Constants.sizes.mobile}px) {
-    width: 100%;
-    margin: 10vh 0 -4px 0;
-  }
-`;
-
-const STYLES_FIGURE = css`
-  width: 50%;
-`;
-
-const STYLES_FIGURES_BOTTOM = css`
-  width: 50%;
-  margin: -4px auto;
-  transform: rotate(180deg);
-
-  @media (max-width: ${Constants.sizes.mobile}px) {
-    width: 100%;
-  }
-`;
-
-const STYLES_FIGURE_RIGHT = css`
-  width: 25%;
-  transform: rotate(90deg) translateY(39%);
-
-  @media (max-width: ${Constants.sizes.mobile}px) {
-    display: none;
-  }
-`;
-
-const STYLES_FIGURE_LEFT = css`
-  width: 25%;
-  transform: rotate(-90deg) translateY(39%);
-
-  @media (max-width: ${Constants.sizes.mobile}px) {
-    display: none;
-  }
-`;
-
-const STYLES_BUTTON = css`
-  margin-top: 48px;
-  min-height: 48px;
-  box-sizing: border-box;
-  border: 0;
-  border-radius: 4px;
-  padding: 0 16px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  user-select: none;
-  background-color: #e7e7e9;
-  color: ${Constants.system.slate};
-  font-family: ${Constants.font.semiBold};
-  font-weight: 400;
-  font-size: ${Constants.typescale.lvl1};
-  letter-spacing: -0.011rem;
-
-  box-shadow: -4px -4px 10px #ffffff, 4px 4px 10px #b2b4b3;
-  transition: 200ms ease all;
-  cursor: pointer;
-
-  :hover {
-    color: ${Constants.system.brand};
-  }
-`;
-
-const STYLES_CENTER_BLOCK = css`
-  width: 50%;
-  margin: 96px auto;
-  text-align: center;
-
-  @media (max-width: ${Constants.sizes.mobile}px) {
-    margin: 0 auto 48px autp;
-    width: 100%;
-  }
-`;
-
-const STYLES_IMG = css`
-  width: 15%;
-  margin-bottom: 24px;
-`;
-
-const STYLES_CARD_GROUP = css`
-  display: flex;
-  width: 100%;
-  margin-top: 48px;
-
-  @media (max-width: ${Constants.sizes.mobile}px) {
-    display: block;
-  }
-`;
-
-const STYLES_FEATURE_CARD = css`
-  width: 33.3%;
-  margin: 0 16px 0 0;
-  padding: 16px;
-  border-radius: 8px;
-  background-color: #f2f4f8;
-  box-shadow: -6px -6px 10px #ffffff, 4px 4px 10px #d4d4d4;
-
-  @media (max-width: ${Constants.sizes.mobile}px) {
-    width: 100%;
-    margin-bottom: 32px;
-  }
-`;
-
-const STYLES_CONTRIBUTION_CARD = css`
-  margin-left: 33.3%;
-  width: 66.6%;
-  display: flex;
-  justify-content: space-between;
-  padding: 16px;
-  border: 1px solid ${Constants.system.gray};
-
-  @media (max-width: ${Constants.sizes.mobile}px) {
-    margin: 0;
-    width: 100%;
-  }
-`;
-
-const STYLES_FEATURE_TEXT = css`
-  font-family: ${Constants.font.text};
-  font-weight: 400;
-  font-size: ${Constants.typescale.lvl1};
-  letter-spacing: -0.011rem;
-  line-height: 1.5;
-  margin: 8px 0 0 0;
-  color: ${Constants.system.slate};
-`;
-
-const STYLES_CONTRIBUTION_TEXT = css`
-  font-family: ${Constants.font.text};
-  font-weight: 400;
-  font-size: ${Constants.typescale.lvl1};
-  letter-spacing: -0.011rem;
-  line-height: 1.5;
-  margin: 8px 0 0 0;
-  color: ${Constants.system.slate};
-`;
-
-const STYLES_DOT = css`
-  height: 12px;
-  width: 12px;
-  margin-right: 8px;
-  background-color: ${Constants.system.darkGray};
-  border-radius: 50%;
-  display: inline-block;
-`;
-
-const STYLES_CONTRIBUTION_IMG = css`
-  width: 40%;
-  box-shadow: 0px 0px 20px 10px rgba(0, 0, 0, 0.1);
-`;
-
-const STYLES_FEATURE_IMG = css`
-  width: 100%;
-  border-radius: 4px;
-  margin-bottom: 8px;
-`;
-
-const FeatureCard = (props) => {
-  return (
-    <div css={STYLES_FEATURE_CARD}>
-      <img css={STYLES_FEATURE_IMG} src={props.illustration} />
-      <div css={STYLES_FEATURE_TEXT}>{props.title}</div>
-      <div css={STYLES_FEATURE_TEXT} style={{ opacity: 0.7 }}>
-        {props.description}
-      </div>
-    </div>
-  );
-};
-
-const ContributionCard = (props) => {
-  return (
-    <div css={STYLES_CONTRIBUTION_CARD}>
-      <div css={STYLES_CONTRIBUTION_TEXT} style={{ marginRight: 8 }}>
-        <span css={STYLES_DOT} />
-        {props.contributor}
-        <br />
-        {props.contribution}
-      </div>
-      <img css={STYLES_CONTRIBUTION_IMG} src={props.illustration} />
-    </div>
-  );
-};
-
-export const getServerSideProps = async (context) => {
-  return {
-    props: { ...context.query },
-  };
-};
-
-export default class CommunityPage extends React.Component {
-  async componentDidMount() {
-    const response = await Actions.health();
-    console.log("HEALTH_CHECK", response);
-  }
-
-  render() {
-    const title = `Slate`;
-    const description =
-      "Slate is designed and built by a growing community of hackers, artists, and creatives on the web.";
-    const url = "https://slate.host/community";
-
-    return (
-      <WebsitePrototypeWrapper title={title} description={description} url={url}>
-        <WebsitePrototypeHeader />
-        <div css={STYLES_ROOT}>
-          <section css={STYLES_SECTION_WRAPPER}>
-            <div css={STYLES_FIGURES_GROUP}>
-              <img
-                css={STYLES_FIGURE}
-                src="https://slate.textile.io/ipfs/bafybeiekksvkiaa2vwyzaitjb44adb5mfbqaqkagizwuw5odmgcwdmmiha"
-              />
-              <img
-                css={STYLES_FIGURE}
-                src="https://slate.textile.io/ipfs/bafybeiehufugq7vujsclzdpkdhff5kop6c4uw6emjuswwp3jhpznaou2se"
-              />
-            </div>
-            <div css={STYLES_TABLE_ROW}>
-              <img
-                css={STYLES_FIGURE_LEFT}
-                src="https://slate.textile.io/ipfs/bafybeiehufugq7vujsclzdpkdhff5kop6c4uw6emjuswwp3jhpznaou2se"
-              />
-              <div css={STYLES_DINNER_TABLE}>
-                <h1 css={STYLES_H1} style={stylesFullWidthText}>
-                  An open invitation to everyone
-                </h1>
-                <p css={STYLES_P} style={stylesFullWidthText}>
-                  Slate is designed and built by a growing community of hackers, artists, and creatives on the web.
-                </p>
-                <button css={STYLES_BUTTON} onClick={() => window.open("https://filecoin.io/slack")}>
-                  Join our community{" "}
-                </button>
-              </div>
-              <img
-                css={STYLES_FIGURE_RIGHT}
-                src="https://slate.textile.io/ipfs/bafybeiekksvkiaa2vwyzaitjb44adb5mfbqaqkagizwuw5odmgcwdmmiha"
-              />
-            </div>
-            <div css={STYLES_FIGURES_BOTTOM}>
-              <img
-                css={STYLES_FIGURE}
-                src="https://slate.textile.io/ipfs/bafybeiekksvkiaa2vwyzaitjb44adb5mfbqaqkagizwuw5odmgcwdmmiha"
-              />
-              <img
-                css={STYLES_FIGURE}
-                src="https://slate.textile.io/ipfs/bafybeiehufugq7vujsclzdpkdhff5kop6c4uw6emjuswwp3jhpznaou2se"
-              />
-            </div>
-          </section>
-          <section css={STYLES_SECTION_WRAPPER}>
-            <div css={STYLES_TEXT_BLOCK}>
-              <h2 css={STYLES_H2}>Further down the road</h2>
-              <p css={STYLES_P}>Slate has infinite possibilities. Here are some of them that we’re excited about.</p>
-            </div>
-            <div css={STYLES_CARD_GROUP}>
-              {FEATURES.map((each) => (
-                <FeatureCard illustration={each.illustration} title={each.title} description={each.description} />
-              ))}
-            </div>
-            <div css={STYLES_CENTER_BLOCK}>
-              <img
-                css={STYLES_IMG}
-                src="https://slate.textile.io/ipfs/bafkreicq4yjwe47vu66u3qt5qqvznrq5vb4tfunmbrjjt3w6rg5p7pdcwy"
-              />
-              <h3 css={STYLES_H3} style={stylesFullWidthText}>
-                Have an idea?
-                <br />
-                Expand our imaginations.
-              </h3>
-              <button
-                css={STYLES_BUTTON}
-                onClick={() => window.open("https://github.com/filecoin-project/slate/issues")}
-              >
-                Submit a feature request
-              </button>
-            </div>
-          </section>
-          <section css={STYLES_SECTION_WRAPPER}>
-            <div css={STYLES_TEXT_BLOCK}>
-              <h2 css={STYLES_H2}>We couldn’t build Slate without our community of contributors</h2>
-              <p css={STYLES_P}>
-                Here features some great work from our contributors. We define contribution beyond code. And we believe
-                that everyone has something to bring to the table. 🍰
-              </p>
-            </div>
-            <br />
-            <br />
-            <div>
-              {CONTRIBUTIONS.map((each) => (
-                <ContributionCard
-                  contribution={each.contribution}
-                  contributor={each.contributor}
-                  illustration={each.illustration}
-                />
-              ))}
-            </div>
-            <div css={STYLES_CENTER_BLOCK}>
-              <img
-                css={STYLES_IMG}
-                src="https://slate.textile.io/ipfs/bafkreiav4ursjyxypvx5nvils6wyskpdua64pnzukmun3xmilndiuv3vp4"
-              />
-              <h3 css={STYLES_H3} style={stylesFullWidthText}>
-                Have some 🍰 to bring to the table?
-                <br />
-                Let’s chat about how we can support you.
-              </h3>
-              <button
-                css={STYLES_BUTTON}
-                onClick={() => window.open("https://github.com/filecoin-project/slate/issues")}
-              >
-                Join Slack channel
-              </button>
-            </div>
-          </section>
-        </div>
-        <WebsitePrototypeFooter />
-      </WebsitePrototypeWrapper>
-    );
-  }
-}