added background images for video content

pages/index.js

@@ -423,14 +423,10 @@ export default class IndexPage extends React.Component {
 
   render() {
     const title = `Slate`;
-    const description =
+    const description = "Welcome to the future of file sharing. Powered by Textile, Filecoin, and IPFS.";
-      "Welcome to the future of file sharing. Powered by Textile, Filecoin, and IPFS.";
     const url = "https://slate.host";
     return (
-      <WebsitePrototypeWrapper
+      <WebsitePrototypeWrapper title={title} description={description} url={url}>
-        title={title}
-        description={description}
-        url={url}>
         <WebsitePrototypeHeader />
         <div css={STYLES_ROOT}>
           <section css={STYLES_SECTION_HERO}>
@@ -442,15 +438,12 @@ export default class IndexPage extends React.Component {
               </h1>
 
               <div css={STYLES_ACTIONS_RIGHT}>
-                <div
+                <div css={STYLES_BUTTON_PRIMARY} onClick={() => window.open("/_")}>
-                  css={STYLES_BUTTON_PRIMARY}
-                  onClick={() => window.open("/_")}>
                   Use Slate
                 </div>
               </div>
             </div>
             <br />
-
             <video
               css={STYLES_VIDEO_BIG}
               autoPlay
@@ -459,17 +452,20 @@ export default class IndexPage extends React.Component {
               src="https://bafybeifsvkepb46prksbt7ank6o5gxeqcz4lshrn7d34ruzitxqr3hiqka.ipfs.slate.textile.io/"
               type="video/m4v"
               playsInline
+              style={{
+                backgroundImage: `url(https://bafybeigalcaqfsxj4iiy5lseonatvvaglsxoz33knc5kngnilp2l23wndu.ipfs.slate.textile.io/`,
+                borderRadius: `4px`,
+                width: `100%`,
+                boxShadow: `0px 10px 50px 20px rgba(0, 0, 0, 0.1)`,
+                backgroundSize: `cover`,
+              }}
             />
-
             <div css={STYLES_TEXT_BLOCK}>
               <h2 css={STYLES_H2}>
                 Slate{" "}
                 <span css={STYLES_HIGHLIGHT}>
                   is a{" "}
-                  <a
+                  <a css={STYLES_LINK} href={"https://github.com/filecoin-project/slate"} target="_blank">
-                    css={STYLES_LINK}
-                    href={"https://github.com/filecoin-project/slate"}
-                    target="_blank">
                     fully open-source
                   </a>{" "}
                   file sharing network designed for research and collaboration.
@@ -478,27 +474,19 @@ export default class IndexPage extends React.Component {
                 <br />
                 <span css={STYLES_HIGHLIGHT}>Store</span> your data,
                 <br />
-                <span css={STYLES_HIGHLIGHT}>organize</span> it any way you
+                <span css={STYLES_HIGHLIGHT}>organize</span> it any way you like, <br />
-                like, <br />
+                <span css={STYLES_HIGHLIGHT}>and share</span> it with the world securely.
-                <span css={STYLES_HIGHLIGHT}>and share</span> it with the world
-                securely.
                 <br />
                 <br />
               </h2>
               <h3 css={STYLES_H3}>Powered by</h3>
               <h2 css={STYLES_H2}>
                 <span css={STYLES_HIGHLIGHT}>
-                  <a
+                  <a href="https://textile.io" css={STYLES_LINK} target="_blank">
-                    href="https://textile.io"
-                    css={STYLES_LINK}
-                    target="_blank">
                     Textile
                   </a>{" "}
                   <br />
-                  <a
+                  <a href="https://filecoin.io" css={STYLES_LINK} target="_blank">
-                    href="https://filecoin.io"
-                    css={STYLES_LINK}
-                    target="_blank">
                     Filecoin
                   </a>
                   <br />
@@ -526,8 +514,7 @@ export default class IndexPage extends React.Component {
                 </span>
               </h1>
               <h3 css={STYLES_H3} style={{ marginBottom: 48 }}>
-                <span css={STYLES_HIGHLIGHT}>Easily upload </span>any kind of
+                <span css={STYLES_HIGHLIGHT}>Easily upload </span>any kind of media file to your storage system.
-                media file to your storage system.
                 <br />
               </h3>
               <div css={STYLES_FILETYPE}>
@@ -540,6 +527,12 @@ export default class IndexPage extends React.Component {
                     src="https://bafybeiawzns4vxqp3llkzmc4shvytzpurysh26yj3aljde4d4fsgf7wlze.ipfs.slate.textile.io/"
                     type="video/mp4"
                     playsInline
+                    style={{
+                      backgroundImage: `url(https://bafybeic4c572po5xd2crtcgr4m7vipddfttcaslsyy64xkl77pyocgqrii.ipfs.slate.textile.io/`,
+                      backgroundSize: `cover`,
+                      borderRadius: `4px`,
+                      boxShadow: `0px 10px 50px 20px rgba(0, 0, 0, 0.1)`,
+                    }}
                   />
                 </div>
                 <div css={STYLES_FILETYPE_GRID_ITEM}>
@@ -551,6 +544,12 @@ export default class IndexPage extends React.Component {
                     src="https://bafybeiczug4d6uyr4pkejdwirkeffbzkkzrbaprxvreid6iitw3pmjzq3q.ipfs.slate.textile.io/"
                     type="video/mp4"
                     playsInline
+                    style={{
+                      backgroundImage: `url(https://bafybeicpw2w6udug33s5sfcratqxabiebzwrhe34jfdmycc5imippcjjli.ipfs.slate.textile.io/`,
+                      backgroundSize: `cover`,
+                      borderRadius: `4px`,
+                      boxShadow: `0px 10px 50px 20px rgba(0, 0, 0, 0.1)`,
+                    }}
                   />
                 </div>
               </div>
@@ -564,6 +563,12 @@ export default class IndexPage extends React.Component {
                     src="https://bafkreid7wl4443p764ozdlqtodh7dmsej6ffayp4tc3lr3hil2qkclrohi.ipfs.slate.textile.io/"
                     type="video/mp4"
                     playsInline
+                    style={{
+                      backgroundImage: `url(https://bafkreiexblrnkrzp4ywwtfxrt6xo4aexo6dmphvfdjkwbcxphbivkrd2xi.ipfs.slate.textile.io/`,
+                      backgroundSize: `cover`,
+                      borderRadius: `4px`,
+                      boxShadow: `0px 10px 50px 20px rgba(0, 0, 0, 0.1)`,
+                    }}
                   />
                 </div>
                 <div css={STYLES_FILETYPE_GRID_ITEM}>
@@ -575,6 +580,12 @@ export default class IndexPage extends React.Component {
                     src="https://bafybeicjovnsnhvt7xwjw3igdwwpb4ms2m23fayoydj3oevrwyi7dzjtga.ipfs.slate.textile.io/"
                     type="video/mp4"
                     playsInline
+                    style={{
+                      backgroundImage: `url(https://bafkreiefuyyk6dcjhyk3hl2httqvdlnl3mo6wrfzgmponexrc75jop757y.ipfs.slate.textile.io/`,
+                      backgroundSize: `cover`,
+                      borderRadius: `4px`,
+                      boxShadow: `0px 10px 50px 20px rgba(0, 0, 0, 0.1)`,
+                    }}
                   />
                 </div>
               </div>
@@ -588,9 +599,8 @@ export default class IndexPage extends React.Component {
                 <span css={STYLES_HIGHLIGHT}>anywhere</span>
               </h1>
               <h3 css={STYLES_H3}>
-                <span css={STYLES_HIGHLIGHT}>The Slate Chrome extension</span>{" "}
+                <span css={STYLES_HIGHLIGHT}>The Slate Chrome extension</span> lets you seamlessly upload files to your
-                lets you seamlessly upload files to your slates from anywhere on
+                slates from anywhere on the web.
-                the web.
               </h3>
             </div>
             <div>
@@ -610,24 +620,31 @@ export default class IndexPage extends React.Component {
                 </span>
               </h1>
               <h3 css={STYLES_H3}>
-                <span css={STYLES_HIGHLIGHT}>A modular interface</span> for your
+                <span css={STYLES_HIGHLIGHT}>A modular interface</span> for your files, giving you complete flexibility.
-                files, giving you complete flexibility.
               </h3>
               <br />
               <br />
               <br />
               <h2 css={STYLES_H2}>Create moodboards</h2>
+
               <video
                 css={STYLES_VIDEO_BIG}
                 autoPlay
                 loop
                 muted
-                src="https://bafybeie3q44jsb7ttklkcej52jmvtdvxfs2w7jpwmqhq7tatyijkw62km4.ipfs.slate.textile.io/"
+                src="https://bafybeib46kplzcylnzviaojgbogua52wyrzbvnj6uulvo4zwrxm4hnxeqe.ipfs.slate.textile.io/"
                 type="video/mp4"
                 playsInline
+                style={{
+                  backgroundImage: `url(https://bafybeiaxdqxxwksdykptwghh5du6fhwobavohyrgsajgzje2vvhbxphsl4.ipfs.slate.textile.io/`,
+                  backgroundSize: `cover`,
+                  borderRadius: `4px`,
+                  boxShadow: `0px 10px 50px 20px rgba(0, 0, 0, 0.1)`,
+                }}
               />
 
               <h2 css={STYLES_H2}>Organize research</h2>
+
               <video
                 css={STYLES_VIDEO_BIG}
                 autoPlay
@@ -636,9 +653,16 @@ export default class IndexPage extends React.Component {
                 src="https://bafybeifrvssh7hata6kbhkq26zkmiw7ti66vvc3pc5aptapqmpafotsufm.ipfs.slate.textile.io/"
                 type="video/mp4"
                 playsInline
+                style={{
+                  backgroundImage: `url(https://bafybeie4p45yfvbjdzc2rgw67e7crcltpu7o544xtugs3wyv3qh3t3oegi.ipfs.slate.textile.io/`,
+                  backgroundSize: `cover`,
+                  borderRadius: `4px`,
+                  boxShadow: `0px 10px 50px 20px rgba(0, 0, 0, 0.1)`,
+                }}
               />
 
               <h2 css={STYLES_H2}>Share presentations</h2>
+
               <video
                 css={STYLES_VIDEO_BIG}
                 autoPlay
@@ -647,6 +671,12 @@ export default class IndexPage extends React.Component {
                 src="https://bafybeia4bvim5wcvsqoqb27pkky6b6ocamzv3pbgltgso43tdz454bmjsu.ipfs.slate.textile.io/"
                 type="video/mp4"
                 playsInline
+                style={{
+                  backgroundImage: `url(https://bafkreihlxav37dy6vqwrcamvbhub72zy3z6doayhjwtvqqvrlbvojum3um.ipfs.slate.textile.io/`,
+                  backgroundSize: `cover`,
+                  borderRadius: `4px`,
+                  boxShadow: `0px 10px 50px 20px rgba(0, 0, 0, 0.1)`,
+                }}
               />
             </div>
           </section>
@@ -660,9 +690,8 @@ export default class IndexPage extends React.Component {
                 </span>
               </h1>
               <h3 css={STYLES_H3}>
-                <span css={STYLES_HIGHLIGHT}>A file sharing network</span> built
+                <span css={STYLES_HIGHLIGHT}>A file sharing network</span> built on top of a storage system making it
-                on top of a storage system making it possible to connect with
+                possible to connect with other people on the Filecoin network.
-                other people on the Filecoin network.
               </h3>
             </div>
 
@@ -675,6 +704,12 @@ export default class IndexPage extends React.Component {
                 src="https://bafybeidnaytqqghnwoduomvefwmnxz3kqllyl5xhyzc4azcl4zflscqcry.ipfs.slate.textile.io/"
                 type="video/mp4"
                 playsInline
+                style={{
+                  backgroundImage: `url(https://bafkreid67aupu7dpnekkej77ik642zyrytkfhgpwxdoyhxey6qbcyuxrpq.ipfs.slate.textile.io/`,
+                  backgroundSize: `cover`,
+                  borderRadius: `4px`,
+                  boxShadow: `0px 10px 50px 20px rgba(0, 0, 0, 0.1)`,
+                }}
               />
             </div>
           </section>
@@ -689,45 +724,29 @@ export default class IndexPage extends React.Component {
                 </span>
               </h1>
               <h3 css={STYLES_H3}>
-                <span css={STYLES_HIGHLIGHT}>
+                <span css={STYLES_HIGHLIGHT}>Slate is built on Filecoin and IPFS</span> — technologies built around
-                  Slate is built on Filecoin and IPFS
+                ownership and transparency for the future of the web.
-                </span>{" "}
-                — technologies built around ownership and transparency for the
-                future of the web.
               </h3>
-              <a
+              <a css={STYLES_LINK_WHITE} href="https://filecoin.io" target="_blank">
-                css={STYLES_LINK_WHITE}
-                href="https://filecoin.io"
-                target="_blank">
                 Learn more about Filecoin -&gt;
               </a>
             </div>
 
             <div>
-              <img
+              <img css={STYLES_MEDIA_RIGHT_OVERLAP} src="/static/landing/marketing-slate-cube.png" />
-                css={STYLES_MEDIA_RIGHT_OVERLAP}
-                src="/static/landing/marketing-slate-cube.png"
-              />
             </div>
           </section>
 
           <section css={STYLES_SECTION_SLATE_WALL}>
             <div css={STYLES_SLATE_CARD_GRAY}>
-              <a
+              <a css={STYLES_SLATE_CARD_PARAGRAPH} href="https://slate.host/_" target="_blank">
-                css={STYLES_SLATE_CARD_PARAGRAPH}
-                href="https://slate.host/_"
-                target="_blank">
                 <div css={STYLES_SLATE_CARD_TEXT}>
                   <h1 css={STYLES_SLATE_CARD_CTA_TITLE}>
                     Join us <br />
-                    <span css={STYLES_HIGHLIGHT_BLACK}>
+                    <span css={STYLES_HIGHLIGHT_BLACK}>in our open & secure network</span>
-                      in our open & secure network
-                    </span>
                   </h1>
                   <div css={STYLES_SLATE_CARD_EXPLAINER}>
-                    <div css={STYLES_SLATE_CARD_CTA_PARAGRAPH}>
+                    <div css={STYLES_SLATE_CARD_CTA_PARAGRAPH}>Create your first slate</div>
-                      Create your first slate
-                    </div>
                     <div css={STYLES_SLATE_CARD_CTA_PARAGRAPH}>-&gt;</div>
                   </div>
                 </div>
@@ -737,10 +756,7 @@ export default class IndexPage extends React.Component {
             <br />
             <div css={STYLES_SLATE_CARD_GROUP}>
               <div css={STYLES_SLATE_CARD}>
-                <a
+                <a css={STYLES_SLATE_CARD_PARAGRAPH} href="https://slate.host/gndclouds/urban-gardens" target="_blank">
-                  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}>
@@ -751,10 +767,7 @@ export default class IndexPage extends React.Component {
                 </a>
               </div>
               <div css={STYLES_SLATE_CARD}>
-                <a
+                <a css={STYLES_SLATE_CARD_PARAGRAPH} href="https://slate.host/haris/shapes-and-letters" target="_blank">
-                  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}>
@@ -765,10 +778,7 @@ export default class IndexPage extends React.Component {
                 </a>
               </div>
               <div css={STYLES_SLATE_CARD}>
-                <a
+                <a css={STYLES_SLATE_CARD_PARAGRAPH} href="https://slate.host/jason/mountains" target="_blank">
-                  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}>
@@ -781,10 +791,7 @@ export default class IndexPage extends React.Component {
             </div>
             <div css={STYLES_SLATE_CARD_GROUP}>
               <div css={STYLES_SLATE_CARD}>
-                <a
+                <a css={STYLES_SLATE_CARD_PARAGRAPH} href="https://slate.host/tara/loom" target="_blank">
-                  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}>
@@ -795,10 +802,7 @@ export default class IndexPage extends React.Component {
                 </a>
               </div>
               <div css={STYLES_SLATE_CARD}>
-                <a
+                <a css={STYLES_SLATE_CARD_PARAGRAPH} href="https://slate.host/slate/brand" target="_blank">
-                  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}>
@@ -812,11 +816,10 @@ export default class IndexPage extends React.Component {
                 <a
                   css={STYLES_SLATE_CARD_PARAGRAPH}
                   href="https://slate.host/tcosta/montreal-underground"
-                  target="_blank">
+                  target="_blank"
+                >
                   <div css={STYLES_SLATE_CARD_TEXT}>
-                    <div css={STYLES_SLATE_CARD_TITLE}>
+                    <div css={STYLES_SLATE_CARD_TITLE}>Montreal underground</div>
-                      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>
@@ -827,10 +830,7 @@ export default class IndexPage extends React.Component {
             </div>
             <div css={STYLES_SLATE_CARD_GROUP}>
               <div css={STYLES_SLATE_CARD}>
-                <a
+                <a css={STYLES_SLATE_CARD_PARAGRAPH} href="https://slate.host/slate/monet" target="_blank">
-                  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}>
@@ -841,10 +841,7 @@ export default class IndexPage extends React.Component {
                 </a>
               </div>
               <div css={STYLES_SLATE_CARD}>
-                <a
+                <a css={STYLES_SLATE_CARD_PARAGRAPH} href="https://slate.host/haris/book-shelf" target="_blank">
-                  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}>
@@ -855,10 +852,7 @@ export default class IndexPage extends React.Component {
                 </a>
               </div>
               <div css={STYLES_SLATE_CARD}>
-                <a
+                <a css={STYLES_SLATE_CARD_PARAGRAPH} href="https://slate.host/slate/papers" target="_blank">
-                  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}>