first draft of landing page

components/core/NewWebsitePrototypeFooter.js

@@ -12,7 +12,7 @@ const STYLES_CONTAINER = css`
   display: flex;
   align-items: top;
   justify-content: top;
-  padding: 48px 24px;
+  padding: 48px 88px;
   background-color: ${Constants.system.black};
 
   @media (max-width: ${Constants.sizes.mobile}px) {
@@ -40,14 +40,14 @@ const STYLES_LINK = css`
 const STYLES_LEFT = css`
   flex-shrink: 0;
   font-size: 1rem;
-  color: ${Constants.system.white};  
+  color: ${Constants.system.white};
 `;
 
 const STYLES_SLATE = css`
   flex-shrink: 0;
   padding: 0px 0px 8px 0px;
   font-size: 1rem;
-  color: ${Constants.system.white};  
+  color: ${Constants.system.white};
 `;
 
 const STYLES_TRADEMARK = css`
@@ -58,14 +58,14 @@ const STYLES_TRADEMARK = css`
 const transition = {
   loop: Infinity,
   ease: "easeInOut",
-  duration: 4
-}
+  duration: 4,
+};
 
 const STYLES_CREDIT = css`
   flex-shrink: 0;
   padding: 8px 0px 8px 0px;
   font-size: 12px;
-  color: ${Constants.system.white};  
+  color: ${Constants.system.white};
 `;
 
 const STYLES_RIGHT = css`
@@ -76,9 +76,9 @@ const STYLES_RIGHT = css`
   align-items: top;
   justify-content: flex-end;
   position: absolute;
-  right: 24px;
+  right: 88px;
 
-  color: ${Constants.system.gray};
+  color: ${Constants.system.darkGray};
 
   @media (max-width: ${Constants.sizes.mobile}px) {
     position: absolute;
@@ -93,15 +93,20 @@ export default (props) => {
   return (
     <div css={STYLES_CONTAINER} style={props.style}>
       <div css={STYLES_LEFT}>
-        <motion.div css={STYLES_TRADEMARK} animate={{ rotateY: 360 }}
-      transition={transition}>
-          <img width = "80px" src="/static/slate.png" />
+        <motion.div
+          css={STYLES_TRADEMARK}
+          animate={{ rotateY: 360 }}
+          transition={transition}
+        >
+          <img width="80px" src="/static/slate.png" />
         </motion.div>
         <div css={STYLES_SLATE}>
-          Slate is the gateway to {" "} 
-          <a css={STYLES_LINK} href="https://filecoin.io">Filecoin</a> –
-          <br />
-          A new network design we trust.  
+          Slate is the gateway to{" "}
+          <a css={STYLES_LINK} href="https://filecoin.io">
+            Filecoin
+          </a>{" "}
+          –
+          <br />A new network design we trust.
         </div>
         <div css={STYLES_CREDIT}>
           Powered by{" "}
@@ -119,7 +124,7 @@ export default (props) => {
       <br />
       <br />
       <div css={STYLES_RIGHT}>
-        <div style={{ flex:1 }}>
+        <div style={{ marginRight: 48 }}>
           <b>Reach out</b>
           <br />
           <br />
@@ -133,7 +138,7 @@ export default (props) => {
         </div>
         <br />
         <br />
-        <div style={{ flex:1 }}>
+        <div>
           Resources
           <br />
           <br />
@@ -141,33 +146,20 @@ export default (props) => {
             Github
           </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/issues"
+          >
             Community Guidelines
           </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/issues"
+          >
             Privacy
           </a>
         </div>
-        <br />
-        <br />
-        <div style={{ flex:2 }}>
-          Stay in the looop
-          <br />
-          <br />
-          <a css={STYLES_LINK} href="https://twitter.com/_slate">
-            Github
-          </a>
-          <br />
-          <a css={STYLES_LINK} href="https://github.com/filecoin-project/slate/issues">
-            Community Guidelines
-          </a>
-          <br />
-          <a css={STYLES_LINK} href="https://github.com/filecoin-project/slate/issues">
-            Privacy
-          </a>
-          <br />
-        </div>
       </div>
     </div>
   );

components/core/NewWebsitePrototypeHeader.js

@@ -10,9 +10,13 @@ const STYLES_CONTAINER = css`
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 16px 24px;
+  padding: 16px 88px;
   postion: fixed;
   top: 0px;
+  position: -webkit-sticky;
+  position: sticky;
+  z-index: 3;
+  height: 88px;
 
   @media (max-width: ${Constants.sizes.mobile}px) {
     display: block;
@@ -54,16 +58,27 @@ export default (props) => {
   return (
     <div css={STYLES_CONTAINER} style={props.style}>
       <div css={STYLES_LEFT}>
-        <a css={STYLES_LINK} href="/" style={{ marginRight: 24, fontFamily: Constants.font.codeBold }}>
+        <a
+          css={STYLES_LINK}
+          href="/"
+          style={{ marginRight: 24, fontFamily: Constants.font.codeBold }}
+        >
           Slate {Constants.values.version}
         </a>
-        <a css={STYLES_LINK} href="/_/system">
-          Design System
-        </a>
       </div>
       <div css={STYLES_RIGHT}>
+        <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
+        </a>
         <a css={STYLES_LINK} href="https://github.com/filecoin-project/slate">
-          View Source
+          Download
         </a>
       </div>
     </div>

pages/index.js

@@ -144,19 +144,32 @@ 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 =
+      "The place for all of your assets. Powered by Textile and Filecoin.";
     const url = "https://slate.host";
 
     return (
-      <WebsitePrototypeWrapper title={title} description={description} url={url}>
+      <WebsitePrototypeWrapper
+        title={title}
+        description={description}
+        url={url}
+      >
         <div css={STYLES_ROOT}>
           <WebsitePrototypeHeader />
           <div css={STYLES_MIDDLE}>
             <div css={STYLES_CARD}>
-              <img css={STYLES_CARD_IMAGE} src="/static/social-github-dark.jpg" />
+              <img
+                css={STYLES_CARD_IMAGE}
+                src="/static/social-github-dark.jpg"
+              />
               <p css={STYLES_CARD_PARAGRAPH}>
-                Store your files, turn them into collections, and share them with the world — with{" "}
-                <a css={STYLES_LINK} href="https://github.com/filecoin-project/slate" target="_blank">
+                Store your files, turn them into collections, and share them
+                with the world — with{" "}
+                <a
+                  css={STYLES_LINK}
+                  href="https://github.com/filecoin-project/slate"
+                  target="_blank"
+                >
                   Filecoin & Slate
                 </a>
                 .
@@ -164,15 +177,21 @@ export default class IndexPage extends React.Component {
               {this.state.available ? (
                 <div css={STYLES_CARD_ACTIONS}>
                   <div css={STYLES_CARD_ACTIONS_LEFT}>
-                    Try out our alpha testing application v{Constants.values.version} for Filecoin
+                    Try out our alpha testing application v
+                    {Constants.values.version} for Filecoin
                   </div>
                   <div css={STYLES_CARD_ACTIONS_RIGHT}>
-                    <System.ButtonPrimary onClick={() => window.open("/_")}>Use Slate</System.ButtonPrimary>
+                    <System.ButtonPrimary onClick={() => window.open("/_")}>
+                      Use Slate
+                    </System.ButtonPrimary>
                   </div>
                 </div>
               ) : (
                 <div css={STYLES_CARD_ACTIONS}>
-                  <div css={STYLES_CARD_ACTIONS_LEFT} style={{ textAlign: "center" }}>
+                  <div
+                    css={STYLES_CARD_ACTIONS_LEFT}
+                    style={{ textAlign: "center" }}
+                  >
                     Slate is currently down for maintenance.
                   </div>
                 </div>