From 0223c6f60cd69409d56f252bba932750ef39e629 Mon Sep 17 00:00:00 2001
From: tarafanlin <35607644+tarafanlin@users.noreply.github.com>
Date: Wed, 23 Sep 2020 17:35:21 -0700
Subject: [PATCH 1/3] community page feature request section

---
 pages/_/marketing-candidate/community-t.js | 131 ++++++++++++++++++---
 pages/index.js                             |   2 +-
 2 files changed, 116 insertions(+), 17 deletions(-)

diff --git a/pages/_/marketing-candidate/community-t.js b/pages/_/marketing-candidate/community-t.js
index 2f65fed6..9d71a369 100644
--- a/pages/_/marketing-candidate/community-t.js
+++ b/pages/_/marketing-candidate/community-t.js
@@ -8,13 +8,76 @@ 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 STYLES_FEATURE_CARD_GROUP = css`
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+  margin-top: 48px;
+`;
+
+const STYLES_FEATURE_CARD = css`
+  width: 32%;
+  margin: 0 16px 0 0;
+  border-radius: 8px;
+  background-color: #f2f4f8;
+  box-shadow: -6px -6px 10px #ffffff, 4px 4px 10px #d4d4d4;
+`;
+
+const STYLES_CARD_TEXT = css`
+  font-family: ${Constants.font.text};
+  font-weight: 400;
+  font-size: ${Constants.typescale.lvl1};
+  letter-spacing: -0.011rem;
+  line-height: 1.5;
+  margin: 4px 16px;
+  color: ${Constants.system.slate};
+`;
+
+const STYLES_CARD_IMG = css`
+  width: 100%;
+  padding: 16px;
+`;
+
+const FeatureCard = (props) => {
+  return (
+    <div css={STYLES_FEATURE_CARD}>
+      <img css={STYLES_CARD_IMG} src={props.illustration} />
+      <div css={STYLES_CARD_TEXT}>{props.title}</div>
+      <div css={STYLES_CARD_TEXT} style={{ opacity: 0.7, marginBottom: 16 }}>
+        {props.description}
+      </div>
+    </div>
+  );
+};
+
 const STYLES_ROOT = css`
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   max-width: 1440px;
   margin: -88px 0 0 0;
-  background-color: ${Constants.system.foreground};
+  background-color: #f2f4f8;
 `;
 
 const STYLES_H1 = css`
@@ -35,7 +98,7 @@ const STYLES_H1 = css`
 const STYLES_H2 = css`
   font-family: ${Constants.font.medium};
   font-weight: 400;
-  font-size: ${Constants.typescale.lvl3};
+  font-size: ${Constants.typescale.lvl4};
   letter-spacing: -0.022rem;
   line-height: 1.3;
   color: ${Constants.system.slate};
@@ -68,7 +131,7 @@ const STYLES_TEXT_BLOCK = css`
   display: flex;
   flex: 1 1 auto;
   justify-content: space-between;
-  width: 70%;
+  width: 67%;
 
   @media (max-width: ${Constants.sizes.mobile}px) {
     display: block;
@@ -76,7 +139,7 @@ const STYLES_TEXT_BLOCK = css`
   }
 `;
 
-const stylesHeroText = {
+const stylesFullWidthText = {
   width: `100%`,
 };
 
@@ -94,6 +157,7 @@ const STYLES_DINNER_TABLE = css`
   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%;
@@ -153,13 +217,13 @@ const STYLES_BUTTON = css`
   box-sizing: border-box;
   border: 0;
   border-radius: 4px;
-  padding: 0 24px;
+  padding: 0 16px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   user-select: none;
-  background-color: ${Constants.system.slate};
-  color: ${Constants.system.white};
+  background-color: #e7e7e9;
+  color: ${Constants.system.slate};
   font-family: ${Constants.font.semiBold};
   font-weight: 400;
   font-size: ${Constants.typescale.lvl1};
@@ -170,11 +234,20 @@ const STYLES_BUTTON = css`
   cursor: pointer;
 
   :hover {
-    background: #e7e7e9;
-    color: ${Constants.system.slate};
+    color: ${Constants.system.brand};
   }
 `;
 
+const STYLES_CENTER_BLOCK = css`
+  width: 33%;
+  margin: 48px auto;
+  text-align: center;
+`;
+
+const STYLES_IMG = css`
+  width: 20%;
+`;
+
 export const getServerSideProps = async (context) => {
   return {
     props: { ...context.query },
@@ -214,13 +287,15 @@ export default class CommunityPage extends React.Component {
                 src="https://slate.textile.io/ipfs/bafybeiehufugq7vujsclzdpkdhff5kop6c4uw6emjuswwp3jhpznaou2se"
               />
               <div css={STYLES_DINNER_TABLE}>
-                <h1 css={STYLES_H1} style={stylesHeroText}>
+                <h1 css={STYLES_H1} style={stylesFullWidthText}>
                   An open invitation to everyone
                 </h1>
-                <p css={STYLES_P} style={stylesHeroText}>
+                <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}>Join our community </button>
+                <button css={STYLES_BUTTON} onClick={() => window.open("https://filecoin.io/slack")}>
+                  Join our community{" "}
+                </button>
               </div>
               <img
                 css={STYLES_FIGURE_RIGHT}
@@ -240,10 +315,34 @@ export default class CommunityPage extends React.Component {
           </section>
           <section css={STYLES_SECTION_WRAPPER}>
             <div css={STYLES_TEXT_BLOCK}>
-              <h2 css={STYLES_H2}>What features are your most excited about?</h2>
-              <p css={STYLES_P}>
-                Slate has infinite possibilities. Upvote your favorite ideas or expand our imaginations.
-              </p>
+              <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_FEATURE_CARD_GROUP}>
+              {FEATURES.map((each) => (
+                <FeatureCard illustration={each.illustration} title={each.title} description={each.description} />
+              ))}
+            </div>
+            <br />
+            <br />
+            <br />
+            <br />
+            <div css={STYLES_CENTER_BLOCK}>
+              <img
+                css={STYLES_IMG}
+                src="https://slate.textile.io/ipfs/bafkreibq5lv5jfpjrk6obisfrsdl4rnijqbb23fcrehufh4w4vx5zsszfa"
+              />
+              <h2 css={STYLES_H2} style={stylesFullWidthText}>
+                Have an idea?
+                <br />
+                Expand our imaginations.
+              </h2>
+              <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}>
diff --git a/pages/index.js b/pages/index.js
index b359f34e..8eff434e 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -430,7 +430,7 @@ const STYLES_SLATE_CARD_GROUP = css`
 
 const STYLES_SLATE_CARD = css`
   width: 33.33%;
-  height: calc(100vh / 4);
+  height: 25vh;
   margin: -1px 0 0 -1px;
   transition: 200ms ease box-shadow;
   border: 1px solid ${Constants.system.darkGray};

From 542cc779c4f9d2a51cb7e425f22e547acd0b3ae2 Mon Sep 17 00:00:00 2001
From: tarafanlin <35607644+tarafanlin@users.noreply.github.com>
Date: Wed, 23 Sep 2020 18:15:32 -0700
Subject: [PATCH 2/3] community feature request section mobile responsive

---
 pages/_/marketing-candidate/community-t.js | 30 +++++++++++++++-------
 1 file changed, 21 insertions(+), 9 deletions(-)

diff --git a/pages/_/marketing-candidate/community-t.js b/pages/_/marketing-candidate/community-t.js
index 9d71a369..44c37cff 100644
--- a/pages/_/marketing-candidate/community-t.js
+++ b/pages/_/marketing-candidate/community-t.js
@@ -34,14 +34,24 @@ const STYLES_FEATURE_CARD_GROUP = css`
   flex-wrap: wrap;
   width: 100%;
   margin-top: 48px;
+
+  @media (max-width: ${Constants.sizes.mobile}px) {
+    display: block;
+  }
 `;
 
 const STYLES_FEATURE_CARD = css`
   width: 32%;
   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_CARD_TEXT = css`
@@ -50,13 +60,14 @@ const STYLES_CARD_TEXT = css`
   font-size: ${Constants.typescale.lvl1};
   letter-spacing: -0.011rem;
   line-height: 1.5;
-  margin: 4px 16px;
+  margin: 8px 0 0 0;
   color: ${Constants.system.slate};
 `;
 
 const STYLES_CARD_IMG = css`
   width: 100%;
-  padding: 16px;
+  border-radius: 4px;
+  margin-bottom: 8px;
 `;
 
 const FeatureCard = (props) => {
@@ -64,7 +75,7 @@ const FeatureCard = (props) => {
     <div css={STYLES_FEATURE_CARD}>
       <img css={STYLES_CARD_IMG} src={props.illustration} />
       <div css={STYLES_CARD_TEXT}>{props.title}</div>
-      <div css={STYLES_CARD_TEXT} style={{ opacity: 0.7, marginBottom: 16 }}>
+      <div css={STYLES_CARD_TEXT} style={{ opacity: 0.7 }}>
         {props.description}
       </div>
     </div>
@@ -107,7 +118,7 @@ const STYLES_H2 = css`
 
   @media (max-width: ${Constants.sizes.mobile}px) {
     width: 100%;
-    font-size: ${Constants.typescale.lvl2};
+    font-size: ${Constants.typescale.lvl3};
   }
 `;
 
@@ -240,8 +251,13 @@ const STYLES_BUTTON = css`
 
 const STYLES_CENTER_BLOCK = css`
   width: 33%;
-  margin: 48px auto;
+  margin: 96px auto;
   text-align: center;
+
+  @media (max-width: ${Constants.sizes.mobile}px) {
+    margin: 0 auto 48px autp;
+    width: 100%;
+  }
 `;
 
 const STYLES_IMG = css`
@@ -323,10 +339,6 @@ export default class CommunityPage extends React.Component {
                 <FeatureCard illustration={each.illustration} title={each.title} description={each.description} />
               ))}
             </div>
-            <br />
-            <br />
-            <br />
-            <br />
             <div css={STYLES_CENTER_BLOCK}>
               <img
                 css={STYLES_IMG}

From 83d55b0e514f18c3ce4b4260d0fc2be49cb42843 Mon Sep 17 00:00:00 2001
From: tarafanlin <35607644+tarafanlin@users.noreply.github.com>
Date: Wed, 23 Sep 2020 21:28:39 -0700
Subject: [PATCH 3/3] community page contribution section

---
 pages/_/marketing-candidate/community-t.js | 234 +++++++++++++++------
 1 file changed, 174 insertions(+), 60 deletions(-)

diff --git a/pages/_/marketing-candidate/community-t.js b/pages/_/marketing-candidate/community-t.js
index 44c37cff..b864d429 100644
--- a/pages/_/marketing-candidate/community-t.js
+++ b/pages/_/marketing-candidate/community-t.js
@@ -29,58 +29,23 @@ const FEATURES = [
   },
 ];
 
-const STYLES_FEATURE_CARD_GROUP = css`
-  display: flex;
-  flex-wrap: wrap;
-  width: 100%;
-  margin-top: 48px;
-
-  @media (max-width: ${Constants.sizes.mobile}px) {
-    display: block;
-  }
-`;
-
-const STYLES_FEATURE_CARD = css`
-  width: 32%;
-  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_CARD_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_CARD_IMG = css`
-  width: 100%;
-  border-radius: 4px;
-  margin-bottom: 8px;
-`;
-
-const FeatureCard = (props) => {
-  return (
-    <div css={STYLES_FEATURE_CARD}>
-      <img css={STYLES_CARD_IMG} src={props.illustration} />
-      <div css={STYLES_CARD_TEXT}>{props.title}</div>
-      <div css={STYLES_CARD_TEXT} style={{ opacity: 0.7 }}>
-        {props.description}
-      </div>
-    </div>
-  );
-};
+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;
@@ -122,6 +87,22 @@ const STYLES_H2 = css`
   }
 `;
 
+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;
@@ -156,10 +137,10 @@ const stylesFullWidthText = {
 
 const STYLES_SECTION_WRAPPER = css`
   width: 100%;
-  padding: 88px;
+  padding: 120px 88px;
 
   @media (max-width: ${Constants.sizes.mobile}px) {
-    padding: 24px;
+    padding: 48px;
   }
 `;
 
@@ -250,7 +231,7 @@ const STYLES_BUTTON = css`
 `;
 
 const STYLES_CENTER_BLOCK = css`
-  width: 33%;
+  width: 50%;
   margin: 96px auto;
   text-align: center;
 
@@ -261,9 +242,114 @@ const STYLES_CENTER_BLOCK = css`
 `;
 
 const STYLES_IMG = css`
-  width: 20%;
+  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 },
@@ -334,7 +420,7 @@ export default class CommunityPage extends React.Component {
               <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_FEATURE_CARD_GROUP}>
+            <div css={STYLES_CARD_GROUP}>
               {FEATURES.map((each) => (
                 <FeatureCard illustration={each.illustration} title={each.title} description={each.description} />
               ))}
@@ -342,13 +428,13 @@ export default class CommunityPage extends React.Component {
             <div css={STYLES_CENTER_BLOCK}>
               <img
                 css={STYLES_IMG}
-                src="https://slate.textile.io/ipfs/bafkreibq5lv5jfpjrk6obisfrsdl4rnijqbb23fcrehufh4w4vx5zsszfa"
+                src="https://slate.textile.io/ipfs/bafkreicq4yjwe47vu66u3qt5qqvznrq5vb4tfunmbrjjt3w6rg5p7pdcwy"
               />
-              <h2 css={STYLES_H2} style={stylesFullWidthText}>
+              <h3 css={STYLES_H3} style={stylesFullWidthText}>
                 Have an idea?
                 <br />
                 Expand our imaginations.
-              </h2>
+              </h3>
               <button
                 css={STYLES_BUTTON}
                 onClick={() => window.open("https://github.com/filecoin-project/slate/issues")}
@@ -365,6 +451,34 @@ export default class CommunityPage extends React.Component {
                 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 />