Add "Integrates well with" section; move featured customers lower (#2791)

* Add "Integrates well with" section; move featured customers lower

* Set links to respective integration docs; remove buggy transition

website/themes/uppy/layout/index.ejs

@@ -17,24 +17,21 @@
 
 <section class="IndexLogos">
   <div class="IndexLogos-container">
-    <h2 class="IndexLogos-title">Used by:</h2>
+    <h2 class="IndexLogos-title">Integrates well with</h2>
     <div class="IndexLogos-logos">
-      <a href="https://www.coursera.org/" class="IndexLogos-item IndexLogos-item--coursera">
-        <%- inline_svg('/images/featured-customers/coursera.svg') %>
+      <a class="IndexLogos-item IndexLogos-item--js" href="/docs/" title="Vanilla JS">
+        <%- inline_svg('/images/integrations/js.svg') %>
       </a>
-      <a href="https://www.photobox.com/" class="IndexLogos-item IndexLogos-item--photobox">
-        <%- inline_svg('/images/featured-customers/photobox.svg') %>
+      <a class="IndexLogos-item IndexLogos-item--react" href="/docs/react/" title="React">
+        <%- inline_svg('/images/integrations/react.svg') %>
       </a>
-      <a href="https://issuu.com/" class="IndexLogos-item IndexLogos-item--issuu">
-        <%- inline_svg('/images/featured-customers/issuu.svg') %>
+      <a class="IndexLogos-item IndexLogos-item--vue" href="/docs/vue/" title="Vue.js">
+        <%- inline_svg('/images/integrations/vue.svg') %>
       </a>
-      <a href="https://zulipchat.com/" class="IndexLogos-item IndexLogos-item--zulip">
-        <%- inline_svg('/images/featured-customers/zulip.svg') %>
+      <a class="IndexLogos-item IndexLogos-item--svelte" href="/docs/svelte" title="Svelte">
+        <%- inline_svg('/images/integrations/svelte.svg') %>
       </a>
     </div>
-    <div class="IndexLogos-join">
-      Using Uppy in your project? <a href="https://github.com/transloadit/uppy/issues/769" rel="noreferrer noopener" target="_blank">Let us know ›</a>
-    </div>
   </div>
 </section>
 
@@ -151,6 +148,29 @@
   </ul>
 </section>
 
+<section class="IndexLogos IndexLogos--customers">
+  <div class="IndexLogos-container">
+    <h2 class="IndexLogos-title">Used by</h2>
+    <div class="IndexLogos-logos">
+      <a href="https://www.coursera.org/" class="IndexLogos-item IndexLogos-item--coursera">
+        <%- inline_svg('/images/featured-customers/coursera.svg') %>
+      </a>
+      <a href="https://www.photobox.com/" class="IndexLogos-item IndexLogos-item--photobox">
+        <%- inline_svg('/images/featured-customers/photobox.svg') %>
+      </a>
+      <a href="https://issuu.com/" class="IndexLogos-item IndexLogos-item--issuu">
+        <%- inline_svg('/images/featured-customers/issuu.svg') %>
+      </a>
+      <a href="https://zulipchat.com/" class="IndexLogos-item IndexLogos-item--zulip">
+        <%- inline_svg('/images/featured-customers/zulip.svg') %>
+      </a>
+    </div>
+    <div class="IndexLogos-join">
+      Using Uppy in your project? <a href="https://github.com/transloadit/uppy/issues/769" rel="noreferrer noopener" target="_blank">Let us know ›</a>
+    </div>
+  </div>
+</section>
+
 <section class="IndexActivity">
   <h2>Activity Feed</h2>
 

website/themes/uppy/source/css/_index.scss

@@ -32,7 +32,7 @@
 }
 
 .IndexHero-description {
-  color: $color-gray;
+  color: $color-medium-gray;
   font-size: 14px;
   line-height: 1.45;
   margin-bottom: 24px;
@@ -60,7 +60,7 @@
 
 .IndexLogos {
   font-size: 12px;
-  color: $color-gray;
+  color: $color-dark;
   text-align: center;
   margin: 80px 0;
 
@@ -68,6 +68,12 @@
     margin-top: 120px;
   }
 
+  &--customers {
+    @media #{$screen-medium} {
+      margin: 150px 0 120px;
+    }
+  }
+
   &-container {
     max-width: 900px;
     padding: 0 20px;
@@ -78,7 +84,7 @@
     font-weight: bold;
     text-transform: uppercase;
     letter-spacing: 0.2em;
-    margin-bottom: 10px;
+    margin-bottom: 20px;
     font-size: inherit;
     color: inherit;
   }
@@ -95,11 +101,13 @@
     vertical-align: middle;
 
     @media #{$screen-medium} {
-      margin: 0 30px 5px;
+      margin: 0 30px 10px;
     }
   }
 
   &-join {
+    color: $color-gray;
+
     a {
       color: inherit;
       text-decoration: underline;
@@ -107,9 +115,8 @@
   }
 }
 
-.IndexLogos-item path {
-  fill: #b7b9bb;
-  transition: fill 0.3s ease;
+.IndexLogos--customers path {
+  fill: $color-dark;
 }
 
 .IndexLogos-item--coursera:hover {
@@ -140,6 +147,30 @@
   }
 }
 
+.IndexLogos-item--js:hover {
+  .js {
+    fill: #ffaa00;
+  }
+}
+
+.IndexLogos-item--react:hover {
+  .react {
+    fill: #37c1e7;
+  }
+}
+
+.IndexLogos-item--vue:hover {
+  .vue {
+    fill: #41b783;
+  }
+}
+
+.IndexLogos-item--svelte:hover {
+  .svelte {
+    fill: #ff3f00;
+  }
+}
+
 
 .IndexDemo {
   margin: 60px auto;

website/themes/uppy/source/css/_settings.scss

@@ -24,6 +24,7 @@ $color-border     : #dddddd;
 $color-codebg     : #f8f8f8;
 $color-red        : #ff6666;
 $color-gray       : #777;
+$color-medium-gray: #555;
 $color-lightgray  : #adbdbe;
 $color-darkgray   : #34393a;
 $color-violet     : #492e7c;

website/themes/uppy/source/images/integrations/js.svg

@@ -0,0 +1 @@
+<svg width="39" height="28" viewBox="0 0 39 28" xmlns="http://www.w3.org/2000/svg"><path class="js" fill="#15192a" d="M24.344 19.506c1.175 1.897 2.705 3.292 5.41 3.292 2.273 0 3.724-1.123 3.724-2.674 0-1.86-1.491-2.518-3.993-3.6l-1.37-.581c-3.959-1.667-6.588-3.756-6.588-8.17 0-4.067 3.134-7.163 8.032-7.163 3.488 0 5.995 1.2 7.801 4.342l-4.27 2.71c-.941-1.666-1.956-2.323-3.53-2.323-1.607 0-2.625 1.008-2.625 2.324 0 1.627 1.019 2.285 3.372 3.293l1.371.58c4.66 1.976 7.291 3.99 7.291 8.518 0 4.882-3.879 7.556-9.088 7.556-5.094 0-8.384-2.4-9.995-5.544l4.458-2.56zm-19.375.47c.861 1.51 1.645 2.788 3.53 2.788 1.801 0 2.938-.697 2.938-3.407V.92h5.485v18.51c0 5.615-3.33 8.17-8.19 8.17-4.392 0-6.935-2.246-8.228-4.952l4.465-2.673z" fill="none" fill-rule="nonzero"/></svg>