teaser: pre-launch teaser

components/core/WebsitePrototypeWrapper.js

@@ -6,7 +6,7 @@ import { GoogleScript } from "~/common/analytics";
 
 export default class WebsitePrototypeWrapper extends React.Component {
   static defaultProps = {
-    image: "/static/art-v2-social.png",
+    image: "/static/new-brand-teaser.png",
   };
 
   render() {
@@ -26,30 +26,12 @@ export default class WebsitePrototypeWrapper extends React.Component {
           <meta property="twitter:card" content="summary_large_image" />
           <meta property="twitter:url" content={this.props.url} />
           <meta property="twitter:title" content={this.props.title} />
-          <meta
+          <meta property="twitter:description" content={this.props.description} />
-            property="twitter:description"
-            content={this.props.description}
-          />
           <meta property="twitter:image" content={this.props.image} />
 
-          <link
+          <link rel="icon" type="image/png" sizes="32x32" href="/static/favicon-32x32.png" />
-            rel="icon"
+          <link rel="icon" type="image/png" sizes="96x96" href="/static/favicon-96x96.png" />
-            type="image/png"
+          <link rel="icon" type="image/png" sizes="16x16" href="/static/favicon-16x16.png" />
-            sizes="32x32"
-            href="/static/favicon-32x32.png"
-          />
-          <link
-            rel="icon"
-            type="image/png"
-            sizes="96x96"
-            href="/static/favicon-96x96.png"
-          />
-          <link
-            rel="icon"
-            type="image/png"
-            sizes="16x16"
-            href="/static/favicon-16x16.png"
-          />
 
           <link rel="shortcut icon" href="/static/favicon.ico" />
           <GoogleScript id="UA-52930282-7" />

components/system/SystemPage.js

@@ -99,13 +99,10 @@ const SidebarLink = (props) => {
       <a
         css={props.url.includes(props.href) ? STYLES_LINK_ACTIVE : STYLES_LINK}
         href={props.href}
-        target={props.target}
+        target={props.target}>
-      >
         {props.title}
       </a>
-      {props.children ? (
+      {props.children ? <div css={STYLES_DESCRIPTION}>{props.children}</div> : null}
-        <div css={STYLES_DESCRIPTION}>{props.children}</div>
-      ) : null}
     </React.Fragment>
   );
 };
@@ -139,32 +136,17 @@ export default class SystemPage extends React.Component {
           <meta property="og:url" content={url} />
           <meta property="og:title" content={title} />
           <meta property="og:description" content={description} />
-          <meta property="og:image" content="/static/art-v2-social.png" />
+          <meta property="og:image" content="/static/new-brand-teaser.png" />
 
           <meta property="twitter:card" content="summary_large_image" />
           <meta property="twitter:url" content={url} />
           <meta property="twitter:title" content={title} />
           <meta property="twitter:description" content={description} />
-          <meta property="twitter:image" content="/static/art-v2-social.png" />
+          <meta property="twitter:image" content="/static/new-brand-teaser.png" />
 
-          <link
+          <link rel="icon" type="image/png" sizes="32x32" href="/static/favicon-32x32.png" />
-            rel="icon"
+          <link rel="icon" type="image/png" sizes="96x96" href="/static/favicon-96x96.png" />
-            type="image/png"
+          <link rel="icon" type="image/png" sizes="16x16" href="/static/favicon-16x16.png" />
-            sizes="32x32"
-            href="/static/favicon-32x32.png"
-          />
-          <link
-            rel="icon"
-            type="image/png"
-            sizes="96x96"
-            href="/static/favicon-96x96.png"
-          />
-          <link
-            rel="icon"
-            type="image/png"
-            sizes="16x16"
-            href="/static/favicon-16x16.png"
-          />
 
           <link rel="shortcut icon" href="/static/favicon.ico" />
 
@@ -173,51 +155,15 @@ export default class SystemPage extends React.Component {
         <div css={STYLES_BODY}>{children}</div>
         <div css={STYLES_SIDEBAR}>
           <span css={STYLES_LABEL}>Experiences</span>
-          <SidebarLink
+          <SidebarLink url={url} href="/_/experiences/create-address" title="CreateFilecoinAddress" />
-            url={url}
+          <SidebarLink url={url} href="/_/experiences/make-storage-deal" title="CreateFilecoinStorageDeal" />
-            href="/_/experiences/create-address"
+          <SidebarLink url={url} href="/_/experiences/generate-powergate-token" title="CreateToken" />
-            title="CreateFilecoinAddress"
+          <SidebarLink url={url} href="/_/experiences/filecoin-wallet-balances" title="FilecoinBalancesList" />
-          />
+          <SidebarLink url={url} href="/_/experiences/list-filecoin-deals" title="FilecoinDealsList" />
-          <SidebarLink
+          <SidebarLink url={url} href="/_/experiences/filecoin-settings" title="FilecoinSettings" />
-            url={url}
+          <SidebarLink url={url} href="/_/experiences/friends-list" title="FriendsList" />
-            href="/_/experiences/make-storage-deal"
+          <SidebarLink url={url} href="/_/experiences/peers-list" title="PeersList" />
-            title="CreateFilecoinStorageDeal"
+          <SidebarLink url={url} href="/_/experiences/send-address-filecoin" title="SendAddressFilecoin" />
-          />
-          <SidebarLink
-            url={url}
-            href="/_/experiences/generate-powergate-token"
-            title="CreateToken"
-          />
-          <SidebarLink
-            url={url}
-            href="/_/experiences/filecoin-wallet-balances"
-            title="FilecoinBalancesList"
-          />
-          <SidebarLink
-            url={url}
-            href="/_/experiences/list-filecoin-deals"
-            title="FilecoinDealsList"
-          />
-          <SidebarLink
-            url={url}
-            href="/_/experiences/filecoin-settings"
-            title="FilecoinSettings"
-          />
-          <SidebarLink
-            url={url}
-            href="/_/experiences/friends-list"
-            title="FriendsList"
-          />
-          <SidebarLink
-            url={url}
-            href="/_/experiences/peers-list"
-            title="PeersList"
-          />
-          <SidebarLink
-            url={url}
-            href="/_/experiences/send-address-filecoin"
-            title="SendAddressFilecoin"
-          />
 
           <span css={STYLES_LABEL}>
             <br />
@@ -225,51 +171,23 @@ export default class SystemPage extends React.Component {
             Components
           </span>
 
-          <SidebarLink
+          <SidebarLink url={url} href="/_/system/avatar-group" title="Avatar Group" />
-            url={url}
-            href="/_/system/avatar-group"
-            title="Avatar Group"
-          />
           <SidebarLink url={url} href="/_/system/buttons" title="Buttons" />
           <SidebarLink url={url} href="/_/system/card-tabs" title="Card Tabs" />
           <SidebarLink url={url} href="/_/system/carousel" title="Carousel" />
-          <SidebarLink
+          <SidebarLink url={url} href="/_/system/checkboxes" title="Checkboxes" />
-            url={url}
-            href="/_/system/checkboxes"
-            title="Checkboxes"
-          />
           <SidebarLink url={url} href="/_/system/colors" title="Colors" />
-          <SidebarLink
+          <SidebarLink url={url} href="/_/system/datepicker" title="Datepicker" />
-            url={url}
-            href="/_/system/datepicker"
-            title="Datepicker"
-          />
           <SidebarLink url={url} href="/_/system/dropdowns" title="Dropdowns" />
           <SidebarLink url={url} href="/_/system/globe" title="Globe" />
-          <SidebarLink
+          <SidebarLink url={url} href="/_/system/hover-tile" title="Hover Tile" />
-            url={url}
-            href="/_/system/hover-tile"
-            title="Hover Tile"
-          />
           <SidebarLink url={url} href="/_/system/icons" title="Icons" />
           <SidebarLink url={url} href="/_/system/inputs" title="Inputs" />
-          <SidebarLink
+          <SidebarLink url={url} href="/_/system/line-chart" title="Line Chart" />
-            url={url}
+          <SidebarLink url={url} href="/_/system/list-editor" title="List Editor" />
-            href="/_/system/line-chart"
-            title="Line Chart"
-          />
-          <SidebarLink
-            url={url}
-            href="/_/system/list-editor"
-            title="List Editor"
-          />
           <SidebarLink url={url} href="/_/system/loaders" title="Loaders" />
           <SidebarLink url={url} href="/_/system/modals" title="Modals" />
-          <SidebarLink
+          <SidebarLink url={url} href="/_/system/notifications" title="Notifications" />
-            url={url}
-            href="/_/system/notifications"
-            title="Notifications"
-          />
           <SidebarLink url={url} href="/_/system/radios" title="Radios" />
           <SidebarLink url={url} href="/_/system/sliders" title="Sliders" />
           <SidebarLink url={url} href="/_/system/stats" title="Stats" />
@@ -277,30 +195,22 @@ export default class SystemPage extends React.Component {
           <SidebarLink url={url} href="/_/system/tabs" title="Tabs" />
           <SidebarLink url={url} href="/_/system/toggles" title="Toggles" />
           <SidebarLink url={url} href="/_/system/tooltips" title="Tooltips" />
-          <SidebarLink
+          <SidebarLink url={url} href="/_/system/typography" title="Typography" />
-            url={url}
-            href="/_/system/typography"
-            title="Typography"
-          />
 
           <div
             css={STYLES_SMALL_LINK}
             style={{ marginTop: 48 }}
             onClick={() => {
               window.open("https://github.com/filecoin-project/slate");
-            }}
+            }}>
-          >
             <SVG.ExpandBox height="12px" style={{ marginRight: 10 }} />
             View source
           </div>
           <div
             css={STYLES_SMALL_LINK}
             onClick={() => {
-              window.open(
+              window.open("https://github.com/filecoin-shipyard/js-lotus-client");
-                "https://github.com/filecoin-shipyard/js-lotus-client"
+            }}>
-              );
-            }}
-          >
             <SVG.ExpandBox height="12px" style={{ marginRight: 10 }} />
             JS Lotus Client
           </div>
@@ -308,8 +218,7 @@ export default class SystemPage extends React.Component {
             css={STYLES_SMALL_LINK}
             onClick={() => {
               window.open("https://github.com/textileio/js-powergate-client");
-            }}
+            }}>
-          >
             <SVG.ExpandBox height="12px" style={{ marginRight: 10 }} />
             JS Powergate Client
           </div>
@@ -317,8 +226,7 @@ export default class SystemPage extends React.Component {
             css={STYLES_SMALL_LINK}
             onClick={() => {
               window.open("https://docs.textile.io/");
-            }}
+            }}>
-          >
             <SVG.ExpandBox height="12px" style={{ marginRight: 10 }} />
             Textile Documentation
           </div>
@@ -326,8 +234,7 @@ export default class SystemPage extends React.Component {
             css={STYLES_SMALL_LINK}
             onClick={() => {
               window.open("https://docs.lotu.sh/");
-            }}
+            }}>
-          >
             <SVG.ExpandBox height="12px" style={{ marginRight: 10 }} />
             Lotus Documentation
           </div>
@@ -335,8 +242,7 @@ export default class SystemPage extends React.Component {
             css={STYLES_SMALL_LINK}
             onClick={() => {
               window.open("https://docs.filecoin.io/");
-            }}
+            }}>
-          >
             <SVG.ExpandBox height="12px" style={{ marginRight: 10 }} />
             Filecoin Documentation
           </div>
@@ -344,8 +250,7 @@ export default class SystemPage extends React.Component {
             css={STYLES_SMALL_LINK}
             onClick={() => {
               window.open("https://filecoin.io/#community");
-            }}
+            }}>
-          >
             <SVG.ExpandBox height="12px" style={{ marginRight: 10 }} />
             Community
           </div>

pages/index.js

@@ -36,7 +36,7 @@ const STYLES_MIDDLE = css`
 
 const STYLES_CARD = css`
   margin: 0 auto 0 auto;
-  max-width: 640px;
+  max-width: 420px;
   width: 100%;
   background: #000000;
   border-radius: 8px;
@@ -50,7 +50,7 @@ const STYLES_CARD_IMAGE = css`
 
 const STYLES_CARD_PARAGRAPH = css`
   padding: 48px;
-  font-size: 1.6rem;
+  font-size: 1.2rem;
   color: ${Constants.system.white};
 
   @media (max-width: ${Constants.sizes.mobile}px) {
@@ -90,16 +90,17 @@ const STYLES_CARD_ACTIONS_RIGHT = css`
 `;
 
 const STYLES_LINK = css`
-  color: ${Constants.system.green};
+  color: #6a737d;
   text-decoration: none;
   transition: 200ms ease color;
+  cursor: pointer;
 
   :visited {
-    color: ${Constants.system.green};
+    color: #959da5;
   }
 
   :hover {
-    color: ${Constants.system.brand};
+    color: #959da5;
   }
 `;
 
@@ -144,54 +145,36 @@ export default class IndexPage extends React.Component {
 
   render() {
     const title = `Slate`;
-    const description =
+    const description = "The place for all of your assets. Powered by Textile and Filecoin.";
-      "The place for all of your assets. Powered by Textile and Filecoin.";
     const url = "https://slate.host";
 
     return (
-      <WebsitePrototypeWrapper
+      <WebsitePrototypeWrapper title={title} description={description} url={url}>
-        title={title}
-        description={description}
-        url={url}
-      >
         <div css={STYLES_ROOT}>
           <WebsitePrototypeHeader />
           <div css={STYLES_MIDDLE}>
             <div css={STYLES_CARD}>
-              <img
+              <img css={STYLES_CARD_IMAGE} src="/public/static/new-brand-teaser.png" />
-                css={STYLES_CARD_IMAGE}
-                src="/public/static/art-v2-index.png"
-              />
               <p css={STYLES_CARD_PARAGRAPH}>
-                Store your files, turn them into collections, and share them
+                Store your files, turn them into collections, and share them with the world — with{" "}
-                with the world — with{" "}
+                <a css={STYLES_LINK} href="https://github.com/filecoin-project/slate" target="_blank">
-                <a
-                  css={STYLES_LINK}
-                  href="https://github.com/filecoin-project/slate"
-                  target="_blank"
-                >
                   Filecoin & Slate
                 </a>
                 .
+                <br />
+                <br />
+                We launch September 14th.
               </p>
               {this.state.available ? (
                 <div css={STYLES_CARD_ACTIONS}>
-                  <div css={STYLES_CARD_ACTIONS_LEFT}>
+                  <div css={STYLES_CARD_ACTIONS_LEFT}>alpha test v{Constants.values.version} for Filecoin</div>
-                    Try out our alpha testing application v
-                    {Constants.values.version} for Filecoin
-                  </div>
                   <div css={STYLES_CARD_ACTIONS_RIGHT}>
-                    <System.ButtonPrimary onClick={() => window.open("/_")}>
+                    <System.ButtonPrimary onClick={() => window.open("/_")}>Join Slate</System.ButtonPrimary>
-                      Use Slate
-                    </System.ButtonPrimary>
                   </div>
                 </div>
               ) : (
                 <div css={STYLES_CARD_ACTIONS}>
-                  <div
+                  <div css={STYLES_CARD_ACTIONS_LEFT} style={{ textAlign: "center" }}>
-                    css={STYLES_CARD_ACTIONS_LEFT}
-                    style={{ textAlign: "center" }}
-                  >
                     Slate is currently down for maintenance.
                   </div>
                 </div>