landing: styling tweaks

common/logo.js

@@ -1,10 +1,5 @@
 export const Logo = (props) => (
-  <svg
+  <svg {...props} fill="none" viewBox="0 0 236 79" xmlns="http://www.w3.org/2000/svg">
-    {...props}
-    fill="none"
-    viewBox="0 0 236 79"
-    xmlns="http://www.w3.org/2000/svg"
-  >
     <g clipRule="evenodd" fill="currentColor" fillRule="evenodd">
       <path d="m217.464 54.8607c-6.06 0-11.06-4.3753-11.135-11.3369h28.241s.214-1.6208.214-3.6082c0-6.7976-1.92-12.0386-5.208-15.5818-3.289-3.5441-7.93-5.3723-13.337-5.3723-5.41 0-10.078 1.9779-13.392 5.6963-3.312 3.7168-5.258 9.1582-5.258 16.0648 0 6.9044 1.846 12.336 5.259 16.0428 3.414 3.7083 8.377 5.6701 14.567 5.6704 5.635.1002 11.16-1.6208 15.742-5.1302l.111-.0854-3.782-6.5418c-1.598 1.2996-3.652 2.3167-5.031 2.9079-1.778.7631-3.915 1.2744-6.991 1.2744zm6.112-25.5668c1.681 1.7391 2.622 4.2517 2.653 7.3749h-19.896c.109-2.7752 1.009-5.2854 2.644-7.1105 1.665-1.8584 3.948-3.0185 7.272-3.0185 3.28 0 5.618.9862 7.327 2.7541z" />
       <path d="m196.252 61.3278v-7.7171c-1.658.634-3.09 1.0078-4.02 1.1408-.81.1157-1.407.1123-1.907.1095-1.222 0-2.185-.1755-2.646-.7613-.234-.2976-.406-.7148-.518-1.3028-.113-.588-.164-1.3367-.164-2.2886v-22.8095h9.255v-7.9531h-9.255v-15.40329l-8.724 4.93807v42.30672c0 3.8975.938 6.6181 2.647 8.3634 1.709 1.7459 4.162 2.4879 7.129 2.4879 1.936 0 3.349-.0295 8.203-1.1107z" />
@@ -15,3 +10,4 @@ export const Logo = (props) => (
     </g>
   </svg>
 );
+export default Logo;

components/core/NewWebsitePrototypeFooter.js

@@ -2,7 +2,6 @@ import * as React from "react";
 import * as Constants from "~/common/constants";
 
 import { css } from "@emotion/react";
-import { motion } from "framer-motion";
 
 const STYLES_CONTAINER = css`
   font-family: ${Constants.font.text};
@@ -26,7 +25,7 @@ const STYLES_CONTAINER = css`
 `;
 
 const STYLES_LINK = css`
-  color: ${Constants.system.moonstone};
+  color: ${Constants.system.darkGray};
   text-decoration: none;
   transition: 200ms ease color;
   line-height: 1.5;
@@ -39,26 +38,25 @@ const STYLES_LINK = css`
 const STYLES_LEFT = css`
   flex-shrink: 0;
   font-size: 1.563rem;
-  color: ${Constants.system.white};
+  color: ${Constants.system.c};
 `;
 
 const STYLES_SLATE = css`
   flex-shrink: 0;
   padding: 0px 0px 8px 0px;
   font-size: 1.563rem;
-  color: ${Constants.system.white};
+  color: ${Constants.system.gray};
 `;
 
 const STYLES_TRADEMARK = css`
-  width: 80px;
+  margin: 0px 16px 16px 0px;
-  margin: -8px 16px 16px 0px;
 `;
 
 const STYLES_CREDIT = css`
   flex-shrink: 0;
   padding: 8px 0px 8px 0px;
   font-size: 1rem;
-  color: ${Constants.system.white};
+  color: ${Constants.system.gray};
   line-height: 1.5;
 `;
 
@@ -81,11 +79,14 @@ const STYLES_RIGHT = css`
   }
 `;
 
-export default (props) => {
+export const NewWebsitePrototypeFooter = (props) => {
   return (
     <div css={STYLES_CONTAINER} style={props.style}>
       <div css={STYLES_TRADEMARK}>
-        <img width="88px" src="/static/landing/marketing-tesseract.png" />
+        <img
+          width="32px"
+          src="https://bafkreigojwgoqkcpi4oyjoncmiuacg3zen7mlg75fkz27k5n32golvbkb4.ipfs.slate.textile.io/"
+        />
       </div>
       <div css={STYLES_LEFT}>
         <div css={STYLES_SLATE}>
@@ -94,11 +95,11 @@ export default (props) => {
         </div>
         <div css={STYLES_CREDIT}>
           Powered by{" "}
-          <a css={STYLES_LINK} href="https://textile.io">
+          <a css={STYLES_LINK} href="https://textile.io" target="_blank">
             Textile
           </a>{" "}
           and{" "}
-          <a css={STYLES_LINK} href="https://filecoin.io">
+          <a css={STYLES_LINK} href="https://filecoin.io" target="_blank">
             Filecoin
           </a>
           <br />
@@ -111,11 +112,11 @@ export default (props) => {
         <div style={{ marginRight: 88 }}>
           <p>Reach out</p>
           <br />
-          <a css={STYLES_LINK} href="https://twitter.com/_slate">
+          <a css={STYLES_LINK} href="https://twitter.com/_slate" target="_blank">
             Twitter
           </a>
           <br />
-          <a css={STYLES_LINK} href="https://filecoin.io/slack">
+          <a css={STYLES_LINK} href="https://filecoin.io/slack" target="_blank">
             Slack
           </a>
         </div>
@@ -124,15 +125,19 @@ export default (props) => {
         <div>
           <p>Resources</p>
           <br />
-          <a css={STYLES_LINK} href="https://twitter.com/_slate">
+          <a css={STYLES_LINK} href="/" target="_blank">
-            Github
+            Design system
           </a>
           <br />
-          <a css={STYLES_LINK} href="https://github.com/filecoin-project/slate/issues">
+          <a css={STYLES_LINK} href="https://github.com/filecoin-project/slate" target="_blank">
+            View source
+          </a>
+          <br />
+          <a css={STYLES_LINK} href="./community" target="_blank">
             Community Guidelines
           </a>
           <br />
-          <a css={STYLES_LINK} href="https://github.com/filecoin-project/slate/issues">
+          <a css={STYLES_LINK} href="./privacy" target="_blank">
             Privacy
           </a>
         </div>
@@ -140,3 +145,5 @@ export default (props) => {
     </div>
   );
 };
+
+export default NewWebsitePrototypeFooter;

components/core/NewWebsitePrototypeHeader.js

@@ -2,11 +2,12 @@ import React, { useState } from "react";
 import * as Constants from "~/common/constants";
 
 import { css } from "@emotion/react";
+import { Logo } from "~/common/logo.js";
 
 const STYLES_CONTAINER = css`
   font-family: ${Constants.font.text};
   font-size: 1rem;
-  width: 100%;
+  width: 100vw;
   display: flex;
   justify-content: space-between;
   padding: 16px 88px;
@@ -40,6 +41,7 @@ const STYLES_LINK = css`
 const STYLES_LEFT = css`
   flex-shrink: 0;
   padding: 12px 0;
+  height: 24px;
 `;
 
 const STYLES_RIGHT = css`
@@ -54,7 +56,6 @@ const STYLES_RIGHT = css`
   }
 `;
 
-// Tara: [WIP] mobile burger menu
 const STYLES_BURGER = css`
   display: none;
   @media (max-width: ${Constants.sizes.mobile}px) {
@@ -156,8 +157,9 @@ const STYLES_BURGER_BUN2_OPEN = css`
 
 const STYLES_MENU = css`
   display: none;
+  visibility: 0;
+  opacity: 0;
   @media (max-width: ${Constants.sizes.mobile}px) {
-    display: flex;
     flex-direction: column;
     justify-content: center;
     background: ${Constants.system.pitchBlack};
@@ -170,6 +172,7 @@ const STYLES_MENU = css`
     right: 0;
     transition: transform 0.3s ease-in-out;
     transform: translateX(100%);
+    transition-property: transform, opacity, visibility;
 
     a {
       padding: 16px 0;
@@ -177,7 +180,7 @@ const STYLES_MENU = css`
       text-decoration: none;
       transition: color 0.3s linear;
 
-      font-size: 2.441em;
+      font-size: 1.563rem;
       text-align: left;
 
       &:hover {
@@ -188,9 +191,10 @@ const STYLES_MENU = css`
 `;
 
 const STYLES_MENU_OPEN = css`
-  display: none;
+  opacity: 1;
-  @media (max-width: ${Constants.sizes.mobile}px) {
+  visibility: visible;
   display: flex;
+  @media (max-width: ${Constants.sizes.mobile}px) {
     flex-direction: column;
     justify-content: center;
     background: ${Constants.system.pitchBlack};
@@ -203,6 +207,7 @@ const STYLES_MENU_OPEN = css`
     right: 0;
     transition: transform 0.3s ease-in-out;
     transform: translateX(0);
+    transition-property: transform, opacity, visibility;
 
     a {
       padding: 16px 0;
@@ -210,7 +215,7 @@ const STYLES_MENU_OPEN = css`
       text-decoration: none;
       transition: color 0.3s linear;
 
-      font-size: 2.441em;
+      font-size: 1.563rem;
       text-align: left;
 
       &:hover {
@@ -220,27 +225,21 @@ const STYLES_MENU_OPEN = css`
   }
 `;
 
-export default (props) => {
+export const NewWebsitePrototypeHeader = (props) => {
   const [open, setOpen] = useState(false);
   return (
     <div css={STYLES_CONTAINER} style={props.style}>
       <div css={STYLES_LEFT}>
-        <a css={STYLES_LINK} href="/" style={{ marginRight: 24, fontFamily: Constants.font.semiBold }}>
+        <a css={STYLES_LINK} href="/" style={{ marginRight: 24 }}>
-          Slate {Constants.values.version}
+          <Logo style={{ width: 64 }} />
         </a>
       </div>
       <div css={STYLES_RIGHT}>
-        <a css={STYLES_LINK} style={{ marginRight: 24 }} href="/_/system">
-          View Source
-        </a>
-        <a css={STYLES_LINK} style={{ marginRight: 24 }} href="/_/system">
-          Design System
-        </a>
         <a css={STYLES_LINK} style={{ marginRight: 24 }} href="https://github.com/filecoin-project/slate">
-          Community
+          Get involved
         </a>
         <a css={STYLES_LINK} style={{ marginRight: 24 }} href="/_/system">
-          Sign Up
+          Sign up
         </a>
         <a css={STYLES_LINK} href="https://github.com/filecoin-project/slate">
           Download
@@ -253,9 +252,7 @@ export default (props) => {
           <div css={open ? STYLES_BURGER_BUN2_OPEN : STYLES_BURGER_BUN2} />
         </div>
         <div open={open} css={open ? STYLES_MENU_OPEN : STYLES_MENU}>
-          <a href="/">View source</a>
+          <a href="/">Get involved</a>
-          <a href="/">Design system</a>
-          <a href="/">Community</a>
           <a href="/">Sign up</a>
           <a href="/">Download</a>
         </div>
@@ -263,3 +260,5 @@ export default (props) => {
     </div>
   );
 };
+
+export default NewWebsitePrototypeHeader;

pages/_/test_mark/tara-test-new-index.js

@@ -1,14 +1,13 @@
 import * as React from "react";
 import * as Constants from "~/common/constants";
 import * as Actions from "~/common/actions";
-import * as System from "~/components/system";
 
 import WebsitePrototypeWrapper from "~/components/core/WebsitePrototypeWrapper";
 import WebsitePrototypeHeader from "~/components/core/NewWebsitePrototypeHeader";
 import WebsitePrototypeFooter from "~/components/core/NewWebsitePrototypeFooter";
 
 import TextLoop from "react-text-loop";
-import { motion, useViewportScroll, useTransform } from "framer-motion";
+// import { motion, useViewportScroll, useTransform } from "framer-motion";
 import { css, keyframes } from "@emotion/react";
 
 const STYLES_ROOT = css`
@@ -17,20 +16,23 @@ const STYLES_ROOT = css`
   justify-content: space-between;
   h1 {
     font-size: 3.815rem;
+    line-height: 1.25;
     padding: 0px 0px 32px 0px;
     width: 100%;
-    color: ${Constants.system.moonstone};
+    color: ${Constants.system.darkGray};
   }
   h2 {
     font-size: 2.441em;
+    line-height: 1.25;
     padding: 0px 0px 32px 0px;
     width: 100%;
-    color: ${Constants.system.moonstone};
+    color: ${Constants.system.darkGray};
   }
   h3 {
     font-size: 1.563em;
-    padding: 0px 0px 32px 0px;
+    line-height: 1.5;
-    color: ${Constants.system.moonstone};
+    padding: 0px 0px 16px 0px;
+    color: ${Constants.system.darkGray};
   }
   p {
     font-size: 1rem;
@@ -59,7 +61,7 @@ const STYLES_ROOT = css`
     h1 {
       font-size: 1.953rem;
       padding: 0px 0px 16px 0px;
-      line-height: 1.5;
+      line-height: 1.25;
     }
     h2 {
       font-size: 1.25rem;
@@ -93,9 +95,9 @@ const STYLES_SECTION_HERO = css`
   flex-direction: column;
   justify-content: center;
   margin: -88px 0px 0px 0px;
-  background: ${Constants.system.pitchBlack};
+  background: ${Constants.system.black};
   @media (max-width: ${Constants.sizes.mobile}px) {
-    padding: 40vh 24px 0 24px;
+    padding: 40vh 24px 48px 24px;
     display: block;
   }
 `;
@@ -118,7 +120,7 @@ const STYLES_SECTION_SLATE = css`
   flex-direction: column;
   padding: 88px;
   width: 100vw;
-  background: ${Constants.system.pitchBlack};
+  background: ${Constants.system.slate};
 
   @media (max-width: ${Constants.sizes.mobile}px) {
     padding: 64px 24px;
@@ -126,13 +128,13 @@ const STYLES_SECTION_SLATE = css`
   }
 `;
 
-const STYLES_SECTION_WALL = css`
+const STYLES_SECTION_PITCHBLACK = css`
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   padding: 88px;
   width: 100vw;
-  background: ${Constants.system.wall};
+  background: ${Constants.system.pitchBlack};
 
   @media (max-width: ${Constants.sizes.mobile}px) {
     padding: 64px 24px;
@@ -149,7 +151,7 @@ const STYLES_IMAGE = css`
     box-shadow: 0px 10px 50px 20px rgba(0, 0, 0, 0.1);
   }
   video {
-    margin: 32px auto;
+    margin: 32px auto 88px auto;
     border-radius: 8px;
     width: 100%;
     height: auto;
@@ -180,7 +182,6 @@ const STYLES_IMAGE_SMALL = css`
     width: 32vw;
     height: auto;
     display: block;
-    box-shadow: 0px 10px 50px 20px rgba(0, 0, 0, 0.1);
   }
   @media (max-width: ${Constants.sizes.mobile}px) {
     img {
@@ -188,7 +189,6 @@ const STYLES_IMAGE_SMALL = css`
       border-radius: 4px;
       width: 70%;
       height: auto;
-      box-shadow: 0px 10px 50px 20px rgba(0, 0, 0, 0.1);
     }
   }
 `;
@@ -197,16 +197,52 @@ const STYLES_MEDIA_LEFT = css`
   img {
     margin: 64px 0 0 -240px;
     width: 80vw;
-    border-radius: 8px;
+    border-radius: 4px;
-    box-shadow: 0px 10px 50px 20px rgba(0, 0, 0, 0.1);
+    box-shadow: 0px 10px 50px 20px rgba(0, 0, 0, 0.2);
+  }
+  video {
+    margin: 64px 0 0 -240px;
+    border-radius: 4px;
+    width: 80vw;
+    box-shadow: 0px 10px 50px 20px rgba(0, 0, 0, 0.2);
   }
 
   @media (max-width: ${Constants.sizes.mobile}px) {
     img {
       margin: 24px 0 0 -80px;
       width: 80vw;
-      border-radius: 8px;
+      border-radius: 4px;
-      box-shadow: 0px 10px 50px 20px rgba(0, 0, 0, 0.1);
+      box-shadow: 0px 10px 50px 20px rgba(0, 0, 0, 0.2);
+    }
+  }
+`;
+
+const STYLES_MEDIA_LEFT_OVERLAP = css`
+  img {
+    margin: -320px 0 0 -48px;
+    width: 60vw;
+  }
+
+  @media (max-width: ${Constants.sizes.mobile}px) {
+    img {
+      margin: 24px 0 0 -80px;
+      width: 100vw;
+    }
+  }
+`;
+
+const STYLES_MEDIA_RIGHT_OVERLAP = css`
+  img {
+    float: right;
+    margin-right: 240px;
+    margin-top: -80px;
+    width: 24vw;
+  }
+
+  @media (max-width: ${Constants.sizes.mobile}px) {
+    img {
+      margin: 24px 0 0 80px;
+      width: 50vw;
     }
   }
 `;
@@ -217,10 +253,12 @@ const STYLES_TEXT_BLOCK = css`
   justify-content: space-between;
   width: 56vw;
   align-self: center;
+  z-index: 10;
 
   @media (max-width: ${Constants.sizes.mobile}px) {
     width: 88%;
     right: 24px;
+    z-index: 10;
   }
 `;
 
@@ -381,15 +419,15 @@ const STYLES_SLATE_CARD_TITLE = css`
 `;
 
 const STYLES_SLATE_CARD_CTA_TITLE = css`
-  font-size: 2.441em;
+  font-size: 3.815rem;
   font-weight: 700;
   text-align: left;
   width: 100%;
   padding: 12px;
-
+  color: ${Constants.system.moonstone};
   @media (max-width: ${Constants.sizes.mobile}px) {
     padding: 0px;
-    font-size: 1rem;
+    font-size: 1.953rem;
   }
 `;
 
@@ -419,7 +457,7 @@ const STYLES_SLATE_CARD_CTA_PARAGRAPH = css`
   text-align: left;
 
   @media (max-width: ${Constants.sizes.mobile}px) {
-    font-size: 0.78rem;
+    font-size: 1rem;
   }
 `;
 
@@ -429,11 +467,11 @@ export const getServerSideProps = async (context) => {
   };
 };
 
-export const MyComponent = () => <motion.div animate={{ rotate: 360 }} transition={{ duration: 2 }} />;
+// export const MyComponent = () => <motion.div animate={{ rotate: 360 }} transition={{ duration: 2 }} />;
-export const MyMotion = () => {
+// export const MyMotion = () => {
-  const { scrollYProgress } = useViewportScroll();
+//   const { scrollYProgress } = useViewportScroll();
-  return <motion.div style={{ scaleX: scrollYProgress }} />;
+//   return <motion.div style={{ scaleX: scrollYProgress }} />;
-};
+// };
 
 export default class IndexPage extends React.Component {
   async componentDidMount() {
@@ -443,20 +481,24 @@ export default class IndexPage extends React.Component {
 
   render() {
     const title = `Slate`;
-    const description = "The place for all of your assets. Powered by Textile and Filecoin.";
+    const description = "Welcome to the future of file sharing. Powered by Textile, Filecoin, IPFS.";
     const url = "https://slate.host";
+    const image = "https://bafybeifedze7dm4zesvgekukziw23gbtfodxiz63nxgybbyo2koxeybmla.ipfs.slate.textile.io/";
     return (
-      <WebsitePrototypeWrapper title={title} description={description} url={url}>
+      <WebsitePrototypeWrapper title={title} description={description} url={url} image={image}>
         <WebsitePrototypeHeader />
         <div css={STYLES_ROOT}>
           <section css={STYLES_SECTION_HERO}>
             <div css={STYLES_TEXT_BLOCK}>
               <h1>
-                Welcome to
+                A file storage network
                 <br />
-                <span css={STYLES_HIGHLIGHT}>the future of file sharing</span>
+                <span css={STYLES_HIGHLIGHT}>
+                  for you, your files, <br />
+                  and your friends
+                </span>
               </h1>
-              <h2>Powered by Textile, Filecoin, IPFS</h2>
+
               <div css={STYLES_ACTIONS_RIGHT}>
                 <div css={STYLES_BUTTON_PRIMARY} onClick={() => window.open("/_")}>
                   Use Slate
@@ -464,10 +506,11 @@ export default class IndexPage extends React.Component {
               </div>
             </div>
             <br />
+
             <div css={STYLES_IMAGE}>
               <video Autoplay="autoplay" Loop="loop" src="/static/landing/marketing-hero.mov" type="video/mov" />
             </div>
-            {/* <div css={STYLES_TEXT_BLOCK}>
+            <div css={STYLES_TEXT_BLOCK}>
               <h2>
                 Slate{" "}
                 <span css={STYLES_HIGHLIGHT}>
@@ -479,37 +522,17 @@ export default class IndexPage extends React.Component {
                 <br />
                 <span css={STYLES_HIGHLIGHT}>organize</span> it any way you like, <br />
                 <span css={STYLES_HIGHLIGHT}>and share</span> it with the world securely.
-              </h2>
-              <div css={STYLES_ACTIONS_RIGHT}>
-                <div css={STYLES_BUTTON_PRIMARY} onClick={() => window.open("/_")}>
-                  Use Slate
-                </div>
-              </div>
-            </div> */}
-          </section>
-          <section css={STYLES_SECTION_WALL}>
-            <div css={STYLES_TEXT_BLOCK}>
-              <h1>
-                <span css={STYLES_HIGHLIGHT_BLACK}>Store, organize, share</span>
                 <br />
-              </h1>
+                <br />
+              </h2>
+              <h3>Powered by</h3>
               <h2>
-                Slate{" "}
+                <span css={STYLES_HIGHLIGHT}>
-                <span css={STYLES_HIGHLIGHT_BLACK}>
+                  Textile <br />
-                  is a fully open-source file sharing network designed for research and collaboration.
+                  Filecoin <br />
+                  IPFS
                 </span>
-                <br />
-                <br />
-                <span css={STYLES_HIGHLIGHT_BLACK}>Store</span> your data,
-                <br />
-                <span css={STYLES_HIGHLIGHT_BLACK}>organize</span> it any way you like, <br />
-                <span css={STYLES_HIGHLIGHT_BLACK}>and share</span> it with the world securely.
               </h2>
-              <div css={STYLES_ACTIONS_RIGHT}>
-                <div css={STYLES_BUTTON_PRIMARY} onClick={() => window.open("/_")}>
-                  Use Slate
-                </div>
-              </div>
             </div>
           </section>
           <section css={STYLES_SECTION_SLATE}>
@@ -520,16 +543,17 @@ export default class IndexPage extends React.Component {
                 <span css={STYLES_HIGHLIGHT}>
                   for your{" "}
                   <TextLoop interval={1200}>
-                    <span>image</span>
+                    <span>images</span>
-                    <span>video</span>
+                    <span>videos</span>
-                    <span>text</span>
+                    <span>audios</span>
-                    <span>URL</span>
+                    <span>ePUBs</span>
+                    <span>PDFs</span>
                   </TextLoop>
                 </span>
               </h1>
               <h3>
                 <span css={STYLES_HIGHLIGHT}>Easily upload </span>any kind of file to your storage system. <br />
-                <span css={STYLES_HIGHLIGHT}>Organize</span> them any way you like with Slates.
+                <span css={STYLES_HIGHLIGHT}>Organize</span> them any way you like with slates.
               </h3>
             </div>
             <div css={STYLES_IMAGE}>
@@ -545,11 +569,11 @@ export default class IndexPage extends React.Component {
               </h1>
               <h3>
                 <span css={STYLES_HIGHLIGHT}>The Slate Chrome extension</span> lets you seamlessly upload files to your
-                Slates from anywhere on the web.
+                slates from anywhere on the web.
               </h3>
             </div>
             <div css={STYLES_MEDIA_LEFT}>
-              <img src="/static/landing/marketing-extension.png" />
+              <img src="https://bafybeiefyhindtituzzcncmdihxag6ypfqofpljqpp52ulcg5mjrepk6va.ipfs.slate.textile.io/" />
             </div>
           </section>
 
@@ -559,7 +583,7 @@ export default class IndexPage extends React.Component {
                 <span css={STYLES_HIGHLIGHT}>Organize and publish</span>
               </h1>
               <h3>
-                <span css={STYLES_HIGHLIGHT}>Modular interface</span> for your files, giving you complete flexibility.
+                <span css={STYLES_HIGHLIGHT}>A modular interface</span> for your files, giving you complete flexibility.
               </h3>
             </div>
             <br />
@@ -568,7 +592,7 @@ export default class IndexPage extends React.Component {
 
             <div css={STYLES_TEXT_BLOCK}>
               <h2>
-                <span css={STYLES_HIGHLIGHT}>Create moodboard</span>
+                <span css={STYLES_HIGHLIGHT}>Create moodboards</span>
               </h2>
             </div>
             <div css={STYLES_IMAGE}>
@@ -592,7 +616,7 @@ export default class IndexPage extends React.Component {
 
             <div css={STYLES_TEXT_BLOCK}>
               <h2>
-                <span css={STYLES_HIGHLIGHT}>Share presentation</span>
+                <span css={STYLES_HIGHLIGHT}>Share presentations</span>
               </h2>
             </div>
             <div css={STYLES_IMAGE}>
@@ -607,12 +631,12 @@ export default class IndexPage extends React.Component {
               </h1>
               <h3>
                 <span css={STYLES_HIGHLIGHT}>A file sharing network</span> built on top of a storage system making it
-                possible to connect.
+                possible to connect with other people on the Filecoin network.
               </h3>
             </div>
 
-            <div css={STYLES_IMAGE_SMALL}>
+            <div css={STYLES_MEDIA_LEFT_OVERLAP}>
-              <img src="/static/landing/marketing-network.png" />
+              <img src="https://bafybeifo7djff5cyfdedhnbnw6bdtdmkswlwtizyzrfri4v3sebuavrqu4.ipfs.slate.textile.io/" />
             </div>
           </section>
 
@@ -623,7 +647,7 @@ export default class IndexPage extends React.Component {
                 <span css={STYLES_HIGHLIGHT}>trust, privacy, and security</span>
               </h1>
               <h3>
-                <span css={STYLES_HIGHLIGHT}>Slate is built on Filecoin and IPFS</span> — technologies built for
+                <span css={STYLES_HIGHLIGHT}>Slate is built on Filecoin and IPFS</span> — technologies built around
                 ownership and transparency for the future of the web.
               </h3>
               <div>
@@ -633,24 +657,21 @@ export default class IndexPage extends React.Component {
               </div>
             </div>
 
-            <div css={STYLES_IMAGE_SMALL}>
+            <div css={STYLES_MEDIA_RIGHT_OVERLAP}>
               <img src="/static/landing/marketing-slate-cube.png" />
             </div>
           </section>
 
           <section css={STYLES_SECTION_SLATE_WALL}>
-            <div css={STYLES_TEXT_BLOCK}>
-              <h1>
-                Join us <br />
-                <span css={STYLES_HIGHLIGHT_BLACK}>in the open, secure network</span>
-              </h1>
-            </div>
             <div css={STYLES_SLATE_CARD_GRAY}>
               <a css={STYLES_SLATE_CARD_PARAGRAPH} href="https://slate.host/_" target="_blank">
                 <div css={STYLES_SLATE_CARD_TEXT}>
-                  <div css={STYLES_SLATE_CARD_CTA_TITLE}>A Slate</div>
+                  <div css={STYLES_SLATE_CARD_CTA_TITLE}>
+                    Join us <br />
+                    <span css={STYLES_HIGHLIGHT_BLACK}>in the open, secure network</span>
+                  </div>
                   <div css={STYLES_SLATE_CARD_EXPLAINER}>
-                    <div css={STYLES_SLATE_CARD_CTA_PARAGRAPH}>Start Slate</div>
+                    <div css={STYLES_SLATE_CARD_CTA_PARAGRAPH}>Create your first slate</div>
                     <div css={STYLES_SLATE_CARD_CTA_PARAGRAPH}>-&gt;</div>
                   </div>
                 </div>