Merge pull request #357 from filecoin-project/@tarafanlin/marketing

small updates to finalize landing and chrome extension pages

pages/community.js

@@ -17,48 +17,42 @@ const SLATE_CORE_TEAM = [
     name: "Jason Leyser",
     url: "https://github.com/jasonleyser",
     username: "jasonleyser",
-    imageUrl:
-      "https://slate.textile.io/ipfs/bafkreidw22xqcr6fo6m7k25qe3yemby6w4dlawbsu6yxs7qjnpu5gyoiwm",
+    imageUrl: "https://slate.textile.io/ipfs/bafkreidw22xqcr6fo6m7k25qe3yemby6w4dlawbsu6yxs7qjnpu5gyoiwm",
   },
   {
     id: 2,
     name: "Cake",
     url: "https://github.com/jimmylee",
     username: "jimmylee",
-    imageUrl:
-      "https://slate.textile.io/ipfs/bafkreigxoyf43vw3p2hbc4ycsyh2og36cgy3s47xkb2n4w3i7auv2a6cei",
+    imageUrl: "https://slate.textile.io/ipfs/bafkreigxoyf43vw3p2hbc4ycsyh2og36cgy3s47xkb2n4w3i7auv2a6cei",
   },
   {
     id: 3,
     name: "Martina Long",
     url: "https://github.com/martinalong",
     username: "martinalong",
-    imageUrl:
-      "https://slate.textile.io/ipfs/bafkreiasfgunf66fxncazlfzff3vp2btfe4j55jxgb2epcthrnvwkthwrq",
+    imageUrl: "https://slate.textile.io/ipfs/bafkreiasfgunf66fxncazlfzff3vp2btfe4j55jxgb2epcthrnvwkthwrq",
   },
   {
     id: 4,
     name: "Haris Butt",
     url: "https://github.com/harisbutt",
     username: "harisbutt",
-    imageUrl:
-      "https://slate.textile.io/ipfs/bafkreih3tbsh6f4m3m2yv3uyc7cupriovl4b354rsyyxuh6l5sv7ftdgzq",
+    imageUrl: "https://slate.textile.io/ipfs/bafkreih3tbsh6f4m3m2yv3uyc7cupriovl4b354rsyyxuh6l5sv7ftdgzq",
   },
   {
     id: 5,
     name: "Tara Lin",
     url: "https://github.com/tarafanlin",
     username: "tarafanlin",
-    imageUrl:
-      "https://slate.textile.io/ipfs/bafkreieuxq4itewoes3wnpfxw2dfat6oi6rsy2snix7tvtgv7d7bgre64q",
+    imageUrl: "https://slate.textile.io/ipfs/bafkreih4jc7scjz7ni24enb6ur32mn7eel5nax562zohrhcq2xkcegukj4",
   },
   {
     id: 6,
     name: "William Felker",
     url: "https://github.com/gndclouds",
     username: "gndclouds",
-    imageUrl:
-      "https://bafkreih2b33oaftlflmsg6njtu7i54f2nwws5gfhhf5w4qaezcejs6gjte.ipfs.slate.textile.io/",
+    imageUrl: "https://bafkreih2b33oaftlflmsg6njtu7i54f2nwws5gfhhf5w4qaezcejs6gjte.ipfs.slate.textile.io/",
   },
 ];
 
@@ -68,64 +62,56 @@ const SLATE_CONTRIBUTOR_TEAM = [
     name: "Pooja Shah",
     url: "https://github.com/pooja",
     username: "pooja",
-    imageUrl:
-      "https://slate.textile.io/ipfs/bafkreier4xffhrpconlprzxvzslqsovykqet7xj6zhhptxgu4nm2qw5i3u",
+    imageUrl: "https://slate.textile.io/ipfs/bafkreier4xffhrpconlprzxvzslqsovykqet7xj6zhhptxgu4nm2qw5i3u",
   },
   {
     id: 2,
     name: "Why",
     url: "https://github.com/whyrusleeping",
     username: "whyrusleeping",
-    imageUrl:
-      "https://slate.textile.io/ipfs/bafkreigvs53l22cuswtc4dtgndmc3aqns2unpc5xndnzx5gjdbw4yv6qhm",
+    imageUrl: "https://slate.textile.io/ipfs/bafkreigvs53l22cuswtc4dtgndmc3aqns2unpc5xndnzx5gjdbw4yv6qhm",
   },
   {
     id: 4,
     name: "Aaron Stula",
     url: "https://github.com/asutula",
     username: "asutula",
-    imageUrl:
-      "https://slate.textile.io/ipfs/bafkreig3vnxyqqsxnrs24zpbbuc6jh5wvdsa7w6fx5gvi4j3t7rhoelhlm",
+    imageUrl: "https://slate.textile.io/ipfs/bafkreig3vnxyqqsxnrs24zpbbuc6jh5wvdsa7w6fx5gvi4j3t7rhoelhlm",
   },
   {
     id: 3,
     name: "Ignacio Hagopian",
     url: "https://github.com/jsign",
     username: "jsign",
-    imageUrl:
-      "https://slate.textile.io/ipfs/bafkreicktewpelagb3uvgd6psacr4kra66ii7254ghqflklek7taahni2m",
+    imageUrl: "https://slate.textile.io/ipfs/bafkreicktewpelagb3uvgd6psacr4kra66ii7254ghqflklek7taahni2m",
   },
   {
     id: 5,
     name: "Sander Pick",
     url: "https://github.com/sanderpick",
     username: "sanderpick",
-    imageUrl:
-      "https://slate.textile.io/ipfs/bafkreihptnrkusu7qnsm4qure7noknmsrhftyrx7zy6aaj4e2cxmtcey6q",
+    imageUrl: "https://slate.textile.io/ipfs/bafkreihptnrkusu7qnsm4qure7noknmsrhftyrx7zy6aaj4e2cxmtcey6q",
   },
   {
     id: 6,
     name: "Andrew Hill",
     url: "https://github.com/andrewxhill",
     username: "andrewxhill",
-    imageUrl:
-      "https://slate.textile.io/ipfs/bafkreicfbr2qpmineh2ezi2kjfbshbpizkikectbdurfskczwatjkdfcoa",
+    imageUrl: "https://slate.textile.io/ipfs/bafkreicfbr2qpmineh2ezi2kjfbshbpizkikectbdurfskczwatjkdfcoa",
   },
   {
     id: 7,
     name: "Akuoko Daniel Jnr",
     url: "https://github.com/akuokojnr",
     username: "akuokojnr",
-    imageUrl:
-      "https://slate.textile.io/ipfs/bafkreiblpimmchcbvsv3xh5aimjzrjw6bmiz6yg2dtifssf2oencg5z54q",
+    imageUrl: "https://slate.textile.io/ipfs/bafkreiblpimmchcbvsv3xh5aimjzrjw6bmiz6yg2dtifssf2oencg5z54q",
   },
   {
     id: 8,
     name: "Narative",
     url: "https://github.com/narative",
     username: "Narative",
-    imageUrl:
-      "https://slate.textile.io/ipfs/bafkreihdkapriwuzfh42zkhs3kwj5qki43dvyu6mq5j3rug3uf6i7egs6y",
+    imageUrl: "https://slate.textile.io/ipfs/bafkreihdkapriwuzfh42zkhs3kwj5qki43dvyu6mq5j3rug3uf6i7egs6y",
   },
 ];
 
@@ -545,11 +531,7 @@ class CodeWindow extends React.Component {
     const textMap = codeBlockToken;
 
     return (
-      <div
-        css={STYLES_CODE_BLOCK}
-        className="language-javascript"
-        style={this.props.style}
-      >
+      <div css={STYLES_CODE_BLOCK} className="language-javascript" style={this.props.style}>
         {textMap.map((element, index) => {
           return (
             <div css={STYLES_LINE} key={`${element}-${index}`}>
@@ -569,17 +551,9 @@ const SlateTeamCards = (props) => {
   return (
     <div key={props.id} css={STYLES_CARD_WRAPPER}>
       <a href={props.url}>
-        <System.HoverTileColorful
-          height={350}
-          width={300}
-          style={{ borderRadius: 4 }}
-        >
+        <System.HoverTileColorful height={350} width={300} style={{ borderRadius: 4 }}>
           <div css={STYLES_SLATE_CARD_EFFECTS}>
-            <img
-              css={STYLES_IMG}
-              alt={`Github Profile Photo for ${props.handle}`}
-              src={props.preview}
-            />
+            <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.username}`}</p>
@@ -617,19 +591,14 @@ export default class CommunityPage extends React.Component {
     const url = "https://slate.host/community";
 
     return (
-      <WebsitePrototypeWrapper
-        title={title}
-        description={description}
-        url={url}
-      >
+      <WebsitePrototypeWrapper title={title} description={description} url={url}>
         <WebsitePrototypeHeader />
         <div css={STYLES_ROOT}>
           <div css={STYLES_SECTION_HERO}>
             <div css={STYLES_DINNER_TABLE}>
               <h1 css={STYLES_H1}>An open invitation to everyone</h1>
               <p css={STYLES_P}>
-                Slate is designed and built by a growing community of hackers,
-                artists, and creatives on the web.
+                Slate is designed and built by a growing community of hackers, artists, and creatives on the web.
               </p>
               <button
                 css={STYLES_BUTTON}
@@ -647,8 +616,7 @@ export default class CommunityPage extends React.Component {
             <div css={STYLES_FULL_WIDTH}>
               <h1>Core Team</h1>
               <p css={STYLES_P}>
-                We work on Slate, and you can reachout to us about for anything
-                you might need to know.
+                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) => (
@@ -666,9 +634,7 @@ export default class CommunityPage extends React.Component {
           <div css={STYLES_SECTION_WRAPPER} style={{ marginTop: 80 }}>
             <div css={STYLES_FULL_WIDTH}>
               <h2 css={STYLES_H2}>Contributors</h2>
-              <p css={STYLES_P}>
-                Our amazing community members helping us make Slate.
-              </p>
+              <p css={STYLES_P}>Our amazing community members helping us make Slate.</p>
               <div css={STYLES_CARD_GROUP}>
                 {SLATE_CONTRIBUTOR_TEAM.map((each) => (
                   <SlateTeamCards
@@ -685,28 +651,17 @@ export default class CommunityPage extends React.Component {
           <div css={STYLES_SECTION_WRAPPER}>
             <div css={STYLES_SPLIT_WIDTH}>
               <h2 css={STYLES_H2}>
-                <span css={STYLES_HIGLIGHT_TEXT_GREEN}>Have an idea</span> for
-                how to make Slate better?
+                <span css={STYLES_HIGLIGHT_TEXT_GREEN}>Have an idea</span> for how to make Slate better?
               </h2>
-              <p css={STYLES_P}>
-                You can create an issue on github or send us an email with your
-                recommendation.
-              </p>
+              <p css={STYLES_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"
-                    )
-                  }
+                  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")}
-                >
+                <button css={STYLES_BUTTON} onClick={() => window.open("https://twitter.com/_slate")}>
                   Tweet us
                 </button>
               </div>
@@ -716,8 +671,7 @@ export default class CommunityPage extends React.Component {
                 <p>
                   Hey Slate Team,
                   <br />
-                  <br /> Have you thought about adding a confetti effect to the
-                  download button?
+                  <br /> Have you thought about adding a confetti effect to the download button?
                   <br />
                   <br />
                   Best, <br />
@@ -738,19 +692,13 @@ export default class CommunityPage extends React.Component {
           <div css={STYLES_SECTION_WRAPPER}>
             <div css={STYLES_SPLIT_WIDTH}>
               <h2 css={STYLES_H2}>
-                <span css={STYLES_HIGLIGHT_TEXT_YELLOW}>
-                  Explore our API and SDK{" "}
-                </span>
+                <span css={STYLES_HIGLIGHT_TEXT_YELLOW}>Explore our API and SDK </span>
                 and build on top of Slate.
               </h2>
               <p css={STYLES_P}>
-                Checkout the examples below to see how quickly you can get up
-                and running with Slate’s API.
+                Checkout the examples below to see how quickly you can get up and running with Slate’s API.
               </p>
-              <button
-                css={STYLES_BUTTON}
-                onClick={() => window.open("https://slate.host/system")}
-              >
+              <button css={STYLES_BUTTON} onClick={() => window.open("https://slate.host/system")}>
                 Use Slate API
               </button>
             </div>

pages/index-new.js

@@ -33,7 +33,7 @@ const USER_SLATES = [
     preview: "https://slate.textile.io/ipfs/bafybeiclkru6hwzw2ghvsyrbnaf67taxxhq2hbpcia2oqj5ufdggwhcbti",
   },
   {
-    name: "Get started with Slate",
+    name: "Get started with Slate ->",
     url: "/_",
     username: "",
     preview: "",
@@ -386,7 +386,7 @@ export default class IndexPage extends React.Component {
               />
               <br />
               <a css={STYLES_LINK} href="/_">
-                50GB free storage for early sign up ->
+                Get 50GB free storage as an early member ->
               </a>
             </div>
 
@@ -459,7 +459,7 @@ export default class IndexPage extends React.Component {
               <img
                 css={STYLES_IMG}
                 style={{ margin: `48px auto`, boxShadow: `none` }}
-                src="https://slate.textile.io/ipfs/bafkreihen4fii4jmtbpslpjofujdrgrbmnzr3pittluinvmdvszkhtsw2a"
+                src="https://slate.textile.io/ipfs/bafybeib2tdk7qvw754ho6ru3nj3wc24hf3lzppuce4lafx32qhkhjkehmy"
               />
             </div>
             <div css={STYLES_SECTIONCTA_WRAPPER}>

pages/slate-for-chrome.js

@@ -229,7 +229,7 @@ export default class SlateForChromePage extends React.Component {
               />
               <img
                 css={STYLES_IMG_OVERLAY}
-                src="https://slate.textile.io/ipfs/bafkreibgds7gena4fjhe57ozk45iy23wzh5klux4zsrlzbh2xo5ku2t6rm"
+                src="https://slate.textile.io/ipfs/bafkreig2ynqlvfynv3zvft73fh2igyyks5bgmthugtq7azeed6rehd3s5u"
               />
             </div>
             <div css={STYLES_SECTION_FLEXWRAPPER}>