Merge pull request #224 from filecoin-project/@gndclouds/general-benchmark-improvements

@gndclouds/general-benchmark-improvements Updated all assets to new compressed versions

components/core/NewWebsitePrototypeHeader.js

@@ -21,6 +21,7 @@ const STYLES_CONTAINER = css`
     display: flex;
     justify-content: space-between;
     padding: 16px 24px;
+    mix-blend-mode: normal;
   }
 `;
 

pages/_/old.js

@@ -0,0 +1,463 @@
+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";
+
+const STYLES_ROOT = css`
+  padding: 16px 88px;
+  section {
+    width: 1140px;
+    margin: auto;
+    padding: 15vh 0;
+  }
+  h1 {
+    font-size: 46px;
+    line-height: 100%;
+  }
+  button {
+    background: #36383d;
+    color: white;
+    width: 300px;
+    height: 60px;
+    border-radius: 5px;
+    font-style: normal;
+    font-weight: bold;
+    font-size: 18px;
+    align-items: center;
+    text-align: center;
+    margin: auto;
+  }
+
+  @media (max-width: ${Constants.sizes.mobile}px) {
+  }
+`;
+
+const STYLES_SECTION_CONTAINER = css`
+  width: 100%;
+  height: 100vh;
+`;
+
+const STYLES_OPENSOURCE_CONTAINER = css`
+  width: 100%;
+  background-color: ${Constants.system.foreground};
+`;
+
+const STYLES_HEADER_TEXT = css`
+  font-size: 4.768rem;
+  padding: 0px 0px 32px 0px;
+  width: 100%;
+  @media (max-width: ${Constants.sizes.mobile}px) {
+    font-size: 2.441rem;
+  }
+`;
+
+const STYLES_SECTION_TEXT = css`
+  font-size: 1rem;
+  color: ${Constants.system.black};
+  @media (max-width: ${Constants.sizes.mobile}px) {
+    font-size: 0.78rem;
+  }
+`;
+
+const STYLES_CONTRIBUTOR_CONTAINER = css`
+  display: grid;
+  padding-top: 32px;
+  column-gap: 5px;
+  row-gap: 10px;
+  justify-items: center;
+  align-item: center;
+  grid-template-columns: repeat(auto-fit, 150px);
+  height: 70vh;
+  overflow: hidden;
+`;
+
+const STYLES_CONTRIBUTOR_CARD = css`
+  height: 200px;
+  width: 150px;
+  background-color: ${Constants.system.white};
+`;
+
+const STYLES_IMAGE_CONTAINER = css`
+  height: 150px;
+  width: 150px;
+`;
+
+const STYLES_CARD_IMAGE = css`
+  width: 100%;
+  height: auto;
+`;
+
+const STYLES_CARD_TEXT = css`
+  font-size: 1rem;
+  color: ${Constants.system.black};
+  @media (max-width: ${Constants.sizes.mobile}px) {
+    font-size: 0.78rem;
+  }
+`;
+
+const STYLES_SECTION_CONTRIBUTE = css`
+  width: 100%;
+  height: 80%;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: auto 1fr 1fr;
+`;
+
+const STYLES_BTN_SPACER = css`
+  padding-bottom: 32px;
+`;
+
+const STYLES_IMAGES_CONTAINER = css`
+  grid-row: 1 / span 2;
+  grid-column: 2;
+  display: flex;
+  flex-direction: column;
+`;
+
+const STYLES_IMAGE_CONT = css`
+  max-width: 500px;
+  float: right;
+  justify-self: center;
+  align-self: center;
+  margin-bottom: 20px;
+  border: 1px solid ${Constants.system.border};
+  box-shadow: 5px 5px 1px ${Constants.system.border};
+`;
+
+const STYLES_CONTRIBUTE_CONTAINER = css`
+  width: 100%;
+  height: 100vh;
+`;
+
+const STYLES_IMAGE_THREE = css`
+  width: 100%;
+  height: auto;
+`;
+
+const STYLES_SECTION_QUOTE = css`
+  grid-row: 3;
+  grid-column: 1;
+  font-size: 2rem;
+  color: ${Constants.system.black};
+  @media (max-width: ${Constants.sizes.mobile}px) {
+    font-size: 1rem;
+  }
+`;
+
+const STYLES_CONTACT_CONTAINER = css`
+  width: 100%;
+  height: auto;
+`;
+
+const STYLES_CONTACT_BTN_CONTAINER = css`
+  display: flex;
+  padding: 96px 0;
+  flex-direction: row;
+  justify-content: space-around;
+`;
+
+const STYLES_INTEGRATE_GIF = css`
+  width: 100%
+  height: 70vh;
+  padding-top: 20vh;
+`;
+
+const STYLES_DESIGN_CONTAINER = css`
+  display: grid;
+  grid-template-rows: 1fr 1fr;
+  grid-template-columns: 1fr 1fr;
+  grid-column-gap: 32px;
+`;
+
+const STYLES_D_TEXT = css`
+  grid-column: 1;
+  grid-row: 1;
+`;
+
+const STYLES_DESIGN_CODE = css`
+  width: 100%;
+  grid-row: 2;
+  grid-column: 1;
+`;
+
+const STYLES_D_IMAGE_CONTAINER = css`
+  height: auto;
+  width: 90%;
+  grid-column: 2;
+  grid-row: 1 / span 2;
+`;
+
+const STYLES_DESIGN_IMAGE = css`
+  width: 100%;
+  height: auto;
+`;
+const STYLES_WRAPPER_TEXT = css`
+  width: 40%;
+  align-self: center;
+  padding: 0 50px;
+`;
+const STYLES_SECTION = css`
+  display: flex;
+  flex-direction: row;
+  align-self: center;
+  h1 {
+    font-size: 46px;
+    line-height: 100%;
+  }
+`;
+const STYLES_CARD = css``;
+
+export const getServerSideProps = async context => {
+  return {
+    props: { ...context.query }
+  };
+};
+
+export default class IndexPage extends React.Component {
+  async componentDidMount() {
+    const response = await Actions.health();
+    console.log("HEALTH_CHECK", response);
+    this.addContributors();
+  }
+
+  contributorsList = [
+    {
+      id: 1,
+      name: "jimmylee",
+      url: "https://github.com/jimmylee",
+      organization: "Slate",
+      pic:
+        "https://avatars0.githubusercontent.com/u/310223?s=400&u=62a15c1b5791b953fc5153a4b3f491f4b0bf2ae5&v=4"
+    },
+    {
+      id: 2,
+      name: "martinalong",
+      url: "https://github.com/martinalong",
+      organization: "Slate",
+      pic:
+        "https://avatars2.githubusercontent.com/u/33686587?s=400&u=d1841da2872f30f7f8cb80e67cdc9b385d0f50e1&v=4"
+    },
+    {
+      id: 3,
+      name: "gndclouds",
+      url: "https://github.com/gndclouds",
+      organization: "Slate",
+      pic:
+        "https://avatars0.githubusercontent.com/u/1757261?s=400&u=b7136d82bfacac3002b3b08980ac611ca7f34b7b&v=4"
+    },
+    {
+      id: 4,
+      name: "uonai",
+      url: "https://github.com/uonai",
+      organization: "",
+      pic:
+        "https://avatars2.githubusercontent.com/u/7935491?s=400&u=8d91d58215c8df440eacf37d6291d912252685c3&v=4"
+    },
+    {
+      id: 5,
+      name: "tarafanlin",
+      url: "https://github.com/tarafanlin",
+      organization: "Slate",
+      pic:
+        "https://avatars2.githubusercontent.com/u/35607644?s=400&u=48483bdf251e5293fefb30ae993bfa04d06601a6&v=4"
+    },
+    {
+      id: 6,
+      name: "jasonleyser",
+      url: "https://github.com/",
+      organization: "Slate",
+      pic: "/static/a1.jpg"
+    },
+    {
+      id: 7,
+      name: "akuokojnr",
+      url: "https://github.com/akuokojnr",
+      organization: "",
+      pic:
+        "https://avatars2.githubusercontent.com/u/31008944?s=400&u=340814cc84eac860654a072781661e58aadaf560&v=4"
+    },
+    {
+      id: 8,
+      name: "jordattebayo",
+      url: "https://github.com/jordattebayo",
+      organization: "",
+      pic:
+        "https://avatars2.githubusercontent.com/u/31581758?s=400&u=21765bba0c302a554ef3aab835450a32fc947a98&v=4"
+    },
+    {
+      id: 9,
+      name: "Pooja",
+      url: "https://github.com/",
+      organization: "",
+      pic: "/static/a1.jpg"
+    },
+    {
+      id: 10,
+      name: "tmytrn",
+      url: "https://github.com/tmrtrn",
+      organization: "",
+      pic:
+        "https://avatars0.githubusercontent.com/u/2691514?s=400&u=b589dc97fa893152768b00c27b5f9f68d1a7fb79&v=4"
+    },
+    {
+      id: 11,
+      name: "motdde",
+      url: "https://github.com/motdde",
+      organization: "",
+      pic:
+        "https://avatars3.githubusercontent.com/u/12215060?s=400&u=aa85ebcfc7438becdb50a67aa79e78ba8feb2d77&v=4"
+    },
+    {
+      id: 12,
+      name: "harisbutt",
+      url: "https://github.com/harisbutt",
+      organization: "",
+      pic: "/static/a1.jpg"
+    },
+    {
+      id: 13,
+      name: "andrewxhill",
+      url: "https://github.com/andrewxhill",
+      organization: "",
+      pic: "/static/a1.jpg"
+    },
+    {
+      id: 14,
+      name: "johannes-jp",
+      url: "https://github.com/johannes-jp",
+      organization: "",
+      pic: "/static/a1.jpg"
+    },
+    {
+      id: 15,
+      name: "Anish-Agnihotri",
+      url: "https://github.com/anish-agnihotri",
+      organization: "",
+      pic: "/static/a1.jpg"
+    },
+    {
+      id: 16,
+      name: "Aminejvm",
+      url: "https://github.com/aminejvm",
+      organization: "",
+      pic: "/static/a1.jpg"
+    }
+  ];
+
+  addContributors = () => {
+    const allContributors = [];
+    const contributors = this.contributorsList;
+    for (let c of contributors) {
+      allContributors.push(
+        <div key={c.id} css={STYLES_CONTRIBUTOR_CARD}>
+          <div css={STYLES_IMAGE_CONTAINER}>
+            <img css={STYLES_CARD_IMAGE} src={c.pic} />
+          </div>
+          <System.P css={STYLES_CARD_TEXT}>{c.name}</System.P>
+          <a href={c.url}>{`@${c.name}`}</a>
+        </div>
+      );
+    }
+    ReactDOM.render(allContributors, document.getElementById("contr-cont"));
+  };
+
+  render() {
+    const title = `Slate`;
+    const description =
+      "The place for all of your assets. Powered by Textile and Filecoin.";
+    const url = "https://slate.host/community";
+
+    return (
+      <WebsitePrototypeWrapper
+        title={title}
+        description={description}
+        url={url}
+      >
+        <WebsitePrototypeHeader />
+        <div css={STYLES_ROOT}>
+          <section css={STYLES_SECTION}>
+            <div>
+              <System.H1>
+                Slate is designed and built by a growing community of hackers,
+                artists, and creatives on the web.
+              </System.H1>
+              <System.P>ytu</System.P>
+            </div>
+            <div>
+              {" "}
+              <div id="contr-cont" css={STYLES_CONTRIBUTOR_CONTAINER}></div>
+            </div>
+          </section>
+
+          <section css={STYLES_SECTION}>
+            <div css={STYLES_WRAPPER_TEXT}>
+              <System.H1>Get Involved</System.H1>
+              <System.P>
+                Slate is a fully open-source file sharing network designed for
+                research and collaboration.
+              </System.P>
+              <br />
+              <br />
+              <div>
+                <img
+                  src="https://d2w9rnfcy7mm78.cloudfront.net/8547413/original_613b9b0a650a3f274c68e1407f552ff3.png?1599111034?bc=0"
+                  alt="Slate Web App Screenshot"
+                />
+              </div>
+            </div>
+
+            <div css={STYLES_CARD}>
+              <System.H2>Contribute</System.H2>
+              <br />
+              <System.P>Get involved with the project and contribute.</System.P>
+              <br />
+              <br />
+            </div>
+
+            <div css={STYLES_CARD}>
+              <System.H2>Contact</System.H2>
+              <br />
+              <System.P>
+                Reach out to any of the core contributors, reach us on Twitter,
+                or join our Slack.
+              </System.P>
+              <br />
+              <br />
+            </div>
+
+            <div css={STYLES_CARD}>
+              <System.H2>Integrate</System.H2>
+              <br />
+              <System.P>
+                Explore our API and SDK and build on top of Slate.
+              </System.P>
+              <br />
+              <br />
+              <CodeBlock>npm install --save slate-react-system</CodeBlock>
+            </div>
+
+            <div>
+              <System.H2>Design System</System.H2>
+              <br />
+              <System.P>
+                Check out our open source design system for your projects
+              </System.P>
+              <br />
+              <br />
+              <CodeBlock>npm install --save slate-react-system</CodeBlock>
+            </div>
+          </section>
+        </div>
+        <WebsitePrototypeFooter />
+      </WebsitePrototypeWrapper>
+    );
+  }
+}

pages/index.js

@@ -9,6 +9,8 @@ import WebsitePrototypeFooter from "~/components/core/NewWebsitePrototypeFooter"
 import TextLoop from "react-text-loop";
 import { css } from "@emotion/react";
 
+import ReactDOM from "react-dom";
+
 const STYLES_ROOT = css`
   display: flex;
   flex-direction: column;
@@ -294,6 +296,7 @@ const STYLES_SLATE_CARD = css`
   border-radius: 4px;
   transition: 200ms ease box-shadow;
   box-shadow: 0px 4px 8px 4px rgba(0, 0, 0, 0.02);
+
   :hover {
     transition: 200ms ease box-shadow;
     box-shadow: 0px 10px 40px 20px rgba(0, 0, 0, 0.1);
@@ -385,7 +388,6 @@ const STYLES_SLATE_CARD_EXPLAINER = css`
   justify-content: space-between;
   width: 100%;
   padding: 12px;
-
   @media (max-width: ${Constants.sizes.mobile}px) {
     padding: 0px;
     font-size: 1rem;
@@ -410,6 +412,17 @@ const STYLES_SLATE_CARD_CTA_PARAGRAPH = css`
     font-size: 1rem;
   }
 `;
+const STYLES_SLATE_CARD_IMAGE = css`
+  border-radius: 4px;
+  height: 100%;
+  :hover {
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    opacity: 0.5;
+    height: 100%;
+  }
+`;
 
 export const getServerSideProps = async context => {
   return {
@@ -421,8 +434,129 @@ export default class IndexPage extends React.Component {
   async componentDidMount() {
     const response = await Actions.health();
     console.log("HEALTH_CHECK", response);
+    this.addExampleSlates();
   }
 
+  coolSlates = [
+    {
+      id: 1,
+      slateName: "Urban gardens",
+      slateUrl: "https://slate.host/gndclouds/urban-gardens",
+      slateUser: "gndclouds",
+      previewImageUrl:
+        "https://bafybeiff7y4kz4e2z4nfso4nsgdbkfsyroa62jvvldoxafuaf34m7lticu.ipfs.slate.textile.io/"
+    },
+    {
+      id: 2,
+      slateName: "Shapes and Letters",
+      slateUrl: "https://slate.host/haris/shapes-and-letters",
+      slateUser: "haris",
+      previewImageUrl:
+        "https://bafybeifgxtl7mq5djnorxedzi35hkizjmbjvdy3nnoitd3xvdnqpmruxbm.ipfs.slate.textile.io/"
+    },
+    {
+      id: 3,
+      slateName: "Mountains",
+      slateUrl: "https://slate.host/jason/mountains",
+      slateUser: "jason",
+      previewImageUrl:
+        "https://bafkreies6uykgocrkunrsndxfubntyqvfqzo5wuwyos42vak6d4qnvtdn4.ipfs.slate.textile.io/"
+    },
+    {
+      id: 4,
+      slateName: "Loom",
+      slateUrl: "https://slate.host/tara/loom",
+      slateUser: "tara",
+      previewImageUrl:
+        "https://bafybeifl5xzy4vjctrsr3jywdlv5ceq3hpaadhcii2ekjx2gljyagveqna.ipfs.slate.textile.io/"
+    },
+    {
+      id: 5,
+      slateName: "Brand",
+      slateUrl: "https://slate.host/slate/brand",
+      slateUser: "slate",
+      previewImageUrl:
+        "https://bafybeiaerbu2nivrgncqtwgwom27caji25netswvjbo6tcmbka47ucmupa.ipfs.slate.textile.io/"
+    },
+    {
+      id: 6,
+      slateName: "Montreal underground",
+      slateUrl: "https://slate.host/tcosta/montreal-underground",
+      slateUser: "tcosta",
+      previewImageUrl:
+        "https://bafybeieblkyt6d7wg4xmltshvxm6w7tz4c3zjpjuu4yfhiak36debqccda.ipfs.slate.textile.io/"
+    },
+    {
+      id: 7,
+      slateName: "Monet",
+      slateUrl: "https://slate.host/slate/monet",
+      slateUser: "slate",
+      previewImageUrl:
+        "https://bafkreieb4yfiamtipapmhoihl547lxeod2vfku67dimrhmab5tcglr5bli.ipfs.slate.textile.io/"
+    },
+    {
+      id: 8,
+      slateName: "Book shelf",
+      slateUrl: "https://slate.host/haris/book-shelf",
+      slateUser: "haris",
+      previewImageUrl:
+        "https://bafkreihe7ismqfyytekj6yvbv6mpbc5de3gozk6n7a47smodbcsnrhbpri.ipfs.slate.textile.io/"
+    },
+    {
+      id: 9,
+      slateName: "Papers",
+      slateUrl: "https://slate.host/slate/papers",
+      slateUser: "@slate",
+      previewImageUrl:
+        "https://bafkreif7l2vxkvdyrydcjwjjrrmqq73id3tdrdkf3z54tp2fotc75wkdwm.ipfs.slate.textile.io/"
+    }
+  ];
+  addExampleSlates = () => {
+    console.log("Function Running");
+    const allExampleSlates = [];
+    const slates = this.coolSlates;
+    for (let c of slates) {
+      allExampleSlates.push(
+        <div key={c.id} css={STYLES_SLATE_CARD}>
+          <div
+            css={css`
+              height: 100%;
+
+              :hover {
+                background: url(${c.previewImageUrl});
+                background-position: center;
+                background-repeat: no-repeat;
+                background-size: cover;
+                opacity: 0.5;
+                height: 100%;
+              }
+            `}
+          >
+            <a
+              css={STYLES_SLATE_CARD_PARAGRAPH}
+              href={c.slateURL}
+              target="_blank"
+            >
+              <div css={STYLES_SLATE_CARD_TEXT}>
+                <div css={STYLES_SLATE_CARD_TITLE}>{c.slateName}</div>
+                <div css={STYLES_SLATE_CARD_EXPLAINER}>
+                  <div
+                    css={STYLES_SLATE_CARD_PARAGRAPH}
+                  >{`@${c.slateUser}`}</div>
+                  <div css={STYLES_SLATE_CARD_PARAGRAPH}>-&gt;</div>
+                </div>
+              </div>
+            </a>
+          </div>
+        </div>
+      );
+    }
+    ReactDOM.render(
+      allExampleSlates,
+      document.getElementById("example-slates")
+    );
+  };
+
   render() {
     const title = `Slate`;
     const description =
@@ -434,9 +568,9 @@ export default class IndexPage extends React.Component {
         description={description}
         url={url}
       >
-        <WebsitePrototypeHeader color="light" />
+        <WebsitePrototypeHeader />
         <div css={STYLES_ROOT}>
-          <section css={STYLES_SECTION_HERO}>
+          <div css={STYLES_SECTION_HERO}>
             <div css={STYLES_TEXT_BLOCK}>
               <h1 css={STYLES_H1}>
                 A file storage network <br />
@@ -459,11 +593,11 @@ export default class IndexPage extends React.Component {
               autoPlay
               loop
               muted
-              src="https://bafybeifsvkepb46prksbt7ank6o5gxeqcz4lshrn7d34ruzitxqr3hiqka.ipfs.slate.textile.io/"
+              src="https://bafybeidfr2x5ftxzixjxtrgiqm6iuotzip25tlrpase226jog3tqenqd4a.ipfs.slate.textile.io/"
               type="video/m4v"
               playsInline
               style={{
-                backgroundImage: `url('https://bafybeigalcaqfsxj4iiy5lseonatvvaglsxoz33knc5kngnilp2l23wndu.ipfs.slate.textile.io/')`,
+                backgroundImage: `url('https://bafybeict43te7wcy7pdw3v45dwwedwxw7yjthbytdsja6dpsiqkgil7iey.ipfs.slate.textile.io/')`,
                 borderRadius: `4px`,
                 width: `100%`,
                 boxShadow: `0px 10px 50px 20px rgba(0, 0, 0, 0.1)`,
@@ -520,8 +654,8 @@ export default class IndexPage extends React.Component {
                 </span>
               </h2>
             </div>
-          </section>
+          </div>
-          <section css={STYLES_SECTION_SLATE}>
+          <div css={STYLES_SECTION_SLATE}>
             <div css={STYLES_TEXT_BLOCK}>
               <h1 css={STYLES_H1}>
                 A new home
@@ -553,7 +687,7 @@ export default class IndexPage extends React.Component {
                     type="video/mp4"
                     playsInline
                     style={{
-                      backgroundImage: `url('https://bafybeic4c572po5xd2crtcgr4m7vipddfttcaslsyy64xkl77pyocgqrii.ipfs.slate.textile.io/')`,
+                      backgroundImage: `url('https://bafybeihez3rtyqqftx7mkyktwozyqjkwdtk2kglxqjc4zspah26bva3yk4.ipfs.slate.textile.io/')`,
                       backgroundSize: `cover`,
                       borderRadius: `4px`,
                       boxShadow: `0px 10px 50px 20px rgba(0, 0, 0, 0.1)`
@@ -570,7 +704,7 @@ export default class IndexPage extends React.Component {
                     type="video/mp4"
                     playsInline
                     style={{
-                      backgroundImage: `url('https://bafybeicpw2w6udug33s5sfcratqxabiebzwrhe34jfdmycc5imippcjjli.ipfs.slate.textile.io/')`,
+                      backgroundImage: `url('https://bafybeidnt2l3lslxi7ofkxs5ffncsh4fw5h2ohbukxumngrqj5pdrooaou.ipfs.slate.textile.io/')`,
                       backgroundSize: `cover`,
                       borderRadius: `4px`,
                       boxShadow: `0px 10px 50px 20px rgba(0, 0, 0, 0.1)`
@@ -589,7 +723,7 @@ export default class IndexPage extends React.Component {
                     type="video/mp4"
                     playsInline
                     style={{
-                      backgroundImage: `url('https://bafkreiexblrnkrzp4ywwtfxrt6xo4aexo6dmphvfdjkwbcxphbivkrd2xi.ipfs.slate.textile.io/')`,
+                      backgroundImage: `url('https://bafkreibb3onijljnmonrbs7qguimjf5qwbnkx3m33pouxbtar2yb7hupti.ipfs.slate.textile.io/')`,
                       backgroundSize: `cover`,
                       borderRadius: `4px`,
                       boxShadow: `0px 10px 50px 20px rgba(0, 0, 0, 0.1)`
@@ -606,7 +740,7 @@ export default class IndexPage extends React.Component {
                     type="video/mp4"
                     playsInline
                     style={{
-                      backgroundImage: `url('https://bafkreiefuyyk6dcjhyk3hl2httqvdlnl3mo6wrfzgmponexrc75jop757y.ipfs.slate.textile.io/')`,
+                      backgroundImage: `url('https://bafkreihu7k46n6eixx6sxjv7aolou5bgvksvb7ryju3gbwie22t6r2dhli.ipfs.slate.textile.io/')`,
                       backgroundSize: `cover`,
                       borderRadius: `4px`,
                       boxShadow: `0px 10px 50px 20px rgba(0, 0, 0, 0.1)`
@@ -615,9 +749,9 @@ export default class IndexPage extends React.Component {
                 </div>
               </div>
             </div>
-          </section>
+          </div>
 
-          <section css={STYLES_SECTION_SLATE}>
+          <div css={STYLES_SECTION_SLATE}>
             <div css={STYLES_TEXT_BLOCK}>
               <h1 css={STYLES_H1}>
                 Upload from <br />
@@ -632,12 +766,13 @@ export default class IndexPage extends React.Component {
             <div>
               <img
                 css={STYLES_MEDIA_LEFT}
-                src="https://bafybeibwppu23j5wgshqvm5qyqv3c6pmhp3y5irdwn3ivvnnrpexiguzbi.ipfs.slate.textile.io/"
+                src="https://bafybeig46uuyp3fkjpk2edeqlmt26r3rxdola52dy7kbgvjms6olyucjdu.ipfs.slate.textile.io/"
+                alt="Slate Web Clipper being used in chrome dropdown menu"
               />
             </div>
-          </section>
+          </div>
 
-          <section css={STYLES_SECTION_SLATE}>
+          <div css={STYLES_SECTION_SLATE}>
             <div css={STYLES_TEXT_BLOCK}>
               <h1 css={STYLES_H1}>
                 <span css={STYLES_HIGHLIGHT}>
@@ -659,11 +794,11 @@ export default class IndexPage extends React.Component {
                 autoPlay
                 loop
                 muted
-                src="https://bafybeib46kplzcylnzviaojgbogua52wyrzbvnj6uulvo4zwrxm4hnxeqe.ipfs.slate.textile.io/"
+                src="https://bafybeiagnzwfvdsqqxamlpru2fulmwzlgaqtg4ys4gs4wfnm5rq75c2cs4.ipfs.slate.textile.io/"
                 type="video/mp4"
                 playsInline
                 style={{
-                  backgroundImage: `url('https://bafybeiaxdqxxwksdykptwghh5du6fhwobavohyrgsajgzje2vvhbxphsl4.ipfs.slate.textile.io/')`,
+                  backgroundImage: `url('https://bafybeicoaponp2nv3ikpsjgcgu7pio6aercflsvsiyxrpaonza7ncg73dq.ipfs.slate.textile.io/')`,
                   backgroundSize: `cover`,
                   borderRadius: `4px`,
                   boxShadow: `0px 10px 50px 20px rgba(0, 0, 0, 0.1)`
@@ -677,7 +812,7 @@ export default class IndexPage extends React.Component {
                 autoPlay
                 loop
                 muted
-                src="https://bafybeifrvssh7hata6kbhkq26zkmiw7ti66vvc3pc5aptapqmpafotsufm.ipfs.slate.textile.io/"
+                src="https://bafybeigstyjfpzazdlmgkfuhw4yxrneux3opvbls7nmv6gq7dbnhmy6xwy.ipfs.slate.textile.io/"
                 type="video/mp4"
                 playsInline
                 style={{
@@ -695,20 +830,20 @@ export default class IndexPage extends React.Component {
                 autoPlay
                 loop
                 muted
-                src="https://bafybeia4bvim5wcvsqoqb27pkky6b6ocamzv3pbgltgso43tdz454bmjsu.ipfs.slate.textile.io/"
+                src="https://bafybeiampkmsxeihxnuz2hkgbhtzosgkwghslpwm7dsrxrzlqwa7tvzreq.ipfs.slate.textile.io/"
                 type="video/mp4"
                 playsInline
                 style={{
-                  backgroundImage: `url('https://bafkreihlxav37dy6vqwrcamvbhub72zy3z6doayhjwtvqqvrlbvojum3um.ipfs.slate.textile.io/')`,
+                  backgroundImage: `url('https://bafkreiglefskwq7bpa3aazihegawd4qwxockl6shipnps7zlokrbnu4f7u.ipfs.slate.textile.io/')`,
                   backgroundSize: `cover`,
                   borderRadius: `4px`,
                   boxShadow: `0px 10px 50px 20px rgba(0, 0, 0, 0.1)`
                 }}
               />
             </div>
-          </section>
+          </div>
 
-          <section css={STYLES_SECTION_SLATE}>
+          <div css={STYLES_SECTION_SLATE}>
             <div css={STYLES_TEXT_BLOCK}>
               <h1 css={STYLES_H1}>
                 <span css={STYLES_HIGHLIGHT}>
@@ -729,20 +864,20 @@ export default class IndexPage extends React.Component {
                 autoPlay
                 loop
                 muted
-                src="https://bafybeidnaytqqghnwoduomvefwmnxz3kqllyl5xhyzc4azcl4zflscqcry.ipfs.slate.textile.io/"
+                src="https://bafybeih63zq5f7htbhkmrog447ybytyid2yi6fix4k6z3pbegxpcq2r2qa.ipfs.slate.textile.io/"
                 type="video/mp4"
                 playsInline
                 style={{
-                  backgroundImage: `url('https://bafkreid67aupu7dpnekkej77ik642zyrytkfhgpwxdoyhxey6qbcyuxrpq.ipfs.slate.textile.io/')`,
+                  backgroundImage: `url('https://bafkreiagwjqvmisseb6voj7cwd3lhjudigkel63hqg6efpqjmhlfv5ucj4.ipfs.slate.textile.io/')`,
                   backgroundSize: `cover`,
                   borderRadius: `4px`,
                   boxShadow: `0px 10px 50px 20px rgba(0, 0, 0, 0.1)`
                 }}
               />
             </div>
-          </section>
+          </div>
 
-          <section css={STYLES_SECTION_SLATE}>
+          <div css={STYLES_SECTION_SLATE}>
             <div css={STYLES_TEXT_BLOCK}>
               <h1 css={STYLES_H1}>
                 Built on <br />
@@ -766,16 +901,17 @@ export default class IndexPage extends React.Component {
                 Learn more about Filecoin -&gt;
               </a>
             </div>
-
+            z
             <div>
               <img
                 css={STYLES_MEDIA_RIGHT_OVERLAP}
-                src="https://bafybeihi2f53tmtwxv5f5jd2wcxtzrutgvxg5xsawfv3ousfjz2yfurm2i.ipfs.slate.textile.io/"
+                src="https://bafybeiaex6rorqtumulc4x3u4sbl5pdbn5sx45mvm6uvbebu4cxgk3okjy.ipfs.slate.textile.io/"
+                alt="Slate logo in frosted cube"
               />
             </div>
-          </section>
+          </div>
 
-          <section css={STYLES_SECTION_SLATE_WALL}>
+          <div css={STYLES_SECTION_SLATE_WALL}>
             <div css={STYLES_SLATE_CARD_GRAY}>
               <a
                 css={STYLES_SLATE_CARD_PARAGRAPH}
@@ -792,158 +928,15 @@ export default class IndexPage extends React.Component {
                   <div css={STYLES_SLATE_CARD_EXPLAINER}>
                     <div css={STYLES_SLATE_CARD_CTA_PARAGRAPH}>
                       Create your first slate
-                    </div>
+                    </div>{" "}
                     <div css={STYLES_SLATE_CARD_CTA_PARAGRAPH}>-&gt;</div>
                   </div>
                 </div>
               </a>
             </div>
             <br />
-            <br />
+            <br /> <div id="example-slates" css={STYLES_SLATE_CARD_GROUP}></div>
-            <div css={STYLES_SLATE_CARD_GROUP}>
+          </div>
-              <div css={STYLES_SLATE_CARD}>
-                <a
-                  css={STYLES_SLATE_CARD_PARAGRAPH}
-                  href="https://slate.host/gndclouds/urban-gardens"
-                  target="_blank"
-                >
-                  <div css={STYLES_SLATE_CARD_TEXT}>
-                    <div css={STYLES_SLATE_CARD_TITLE}>Urban gardens</div>
-                    <div css={STYLES_SLATE_CARD_EXPLAINER}>
-                      <div css={STYLES_SLATE_CARD_PARAGRAPH}>@gndclouds</div>
-                      <div css={STYLES_SLATE_CARD_PARAGRAPH}>-&gt;</div>
-                    </div>
-                  </div>
-                </a>
-              </div>
-              <div css={STYLES_SLATE_CARD}>
-                <a
-                  css={STYLES_SLATE_CARD_PARAGRAPH}
-                  href="https://slate.host/haris/shapes-and-letters"
-                  target="_blank"
-                >
-                  <div css={STYLES_SLATE_CARD_TEXT}>
-                    <div css={STYLES_SLATE_CARD_TITLE}>Shapes and letters</div>
-                    <div css={STYLES_SLATE_CARD_EXPLAINER}>
-                      <div css={STYLES_SLATE_CARD_PARAGRAPH}>@haris</div>
-                      <div css={STYLES_SLATE_CARD_PARAGRAPH}>-&gt;</div>
-                    </div>
-                  </div>
-                </a>
-              </div>
-              <div css={STYLES_SLATE_CARD}>
-                <a
-                  css={STYLES_SLATE_CARD_PARAGRAPH}
-                  href="https://slate.host/jason/mountains"
-                  target="_blank"
-                >
-                  <div css={STYLES_SLATE_CARD_TEXT}>
-                    <div css={STYLES_SLATE_CARD_TITLE}>Mountains</div>
-                    <div css={STYLES_SLATE_CARD_EXPLAINER}>
-                      <div css={STYLES_SLATE_CARD_PARAGRAPH}>@jason</div>
-                      <div css={STYLES_SLATE_CARD_PARAGRAPH}>-&gt;</div>
-                    </div>
-                  </div>
-                </a>
-              </div>
-            </div>
-            <div css={STYLES_SLATE_CARD_GROUP}>
-              <div css={STYLES_SLATE_CARD}>
-                <a
-                  css={STYLES_SLATE_CARD_PARAGRAPH}
-                  href="https://slate.host/tara/loom"
-                  target="_blank"
-                >
-                  <div css={STYLES_SLATE_CARD_TEXT}>
-                    <div css={STYLES_SLATE_CARD_TITLE}>Loom</div>
-                    <div css={STYLES_SLATE_CARD_EXPLAINER}>
-                      <div css={STYLES_SLATE_CARD_PARAGRAPH}>@tara</div>
-                      <div css={STYLES_SLATE_CARD_PARAGRAPH}>-&gt;</div>
-                    </div>
-                  </div>
-                </a>
-              </div>
-              <div css={STYLES_SLATE_CARD}>
-                <a
-                  css={STYLES_SLATE_CARD_PARAGRAPH}
-                  href="https://slate.host/slate/brand"
-                  target="_blank"
-                >
-                  <div css={STYLES_SLATE_CARD_TEXT}>
-                    <div css={STYLES_SLATE_CARD_TITLE}>Brand</div>
-                    <div css={STYLES_SLATE_CARD_EXPLAINER}>
-                      <div css={STYLES_SLATE_CARD_PARAGRAPH}>@slate</div>
-                      <div css={STYLES_SLATE_CARD_PARAGRAPH}>-&gt;</div>
-                    </div>
-                  </div>
-                </a>
-              </div>
-              <div css={STYLES_SLATE_CARD}>
-                <a
-                  css={STYLES_SLATE_CARD_PARAGRAPH}
-                  href="https://slate.host/tcosta/montreal-underground"
-                  target="_blank"
-                >
-                  <div css={STYLES_SLATE_CARD_TEXT}>
-                    <div css={STYLES_SLATE_CARD_TITLE}>
-                      Montreal underground
-                    </div>
-                    <div css={STYLES_SLATE_CARD_EXPLAINER}>
-                      <div css={STYLES_SLATE_CARD_PARAGRAPH}>@tcosta</div>
-                      <div css={STYLES_SLATE_CARD_PARAGRAPH}>-&gt;</div>
-                    </div>
-                  </div>
-                </a>
-              </div>
-            </div>
-            <div css={STYLES_SLATE_CARD_GROUP}>
-              <div css={STYLES_SLATE_CARD}>
-                <a
-                  css={STYLES_SLATE_CARD_PARAGRAPH}
-                  href="https://slate.host/slate/monet"
-                  target="_blank"
-                >
-                  <div css={STYLES_SLATE_CARD_TEXT}>
-                    <div css={STYLES_SLATE_CARD_TITLE}>Monet</div>
-                    <div css={STYLES_SLATE_CARD_EXPLAINER}>
-                      <div css={STYLES_SLATE_CARD_PARAGRAPH}>@slate</div>
-                      <div css={STYLES_SLATE_CARD_PARAGRAPH}>-&gt;</div>
-                    </div>
-                  </div>
-                </a>
-              </div>
-              <div css={STYLES_SLATE_CARD}>
-                <a
-                  css={STYLES_SLATE_CARD_PARAGRAPH}
-                  href="https://slate.host/haris/book-shelf"
-                  target="_blank"
-                >
-                  <div css={STYLES_SLATE_CARD_TEXT}>
-                    <div css={STYLES_SLATE_CARD_TITLE}>Book shelf</div>
-                    <div css={STYLES_SLATE_CARD_EXPLAINER}>
-                      <div css={STYLES_SLATE_CARD_PARAGRAPH}>@haris</div>
-                      <div css={STYLES_SLATE_CARD_PARAGRAPH}>-&gt;</div>
-                    </div>
-                  </div>
-                </a>
-              </div>
-              <div css={STYLES_SLATE_CARD}>
-                <a
-                  css={STYLES_SLATE_CARD_PARAGRAPH}
-                  href="https://slate.host/slate/papers"
-                  target="_blank"
-                >
-                  <div css={STYLES_SLATE_CARD_TEXT}>
-                    <div css={STYLES_SLATE_CARD_TITLE}>Papers</div>
-                    <div css={STYLES_SLATE_CARD_EXPLAINER}>
-                      <div css={STYLES_SLATE_CARD_PARAGRAPH}>@slate</div>
-                      <div css={STYLES_SLATE_CARD_PARAGRAPH}>-&gt;</div>
-                    </div>
-                  </div>
-                </a>
-              </div>
-            </div>
-          </section>
         </div>
         <WebsitePrototypeFooter />
       </WebsitePrototypeWrapper>