Add a users page.

site/_css/index.less

@@ -749,6 +749,11 @@ body.index {
     }
 
     .logos {
+      align-items: center;
+      display: flex;
+      flex-flow: row wrap;
+      justify-content: center;
+
       img {
         height: 100px;
         padding: 14px;
@@ -767,5 +772,25 @@ body.index {
         }
       }
     }
+
+    .button {
+      display: inline-block;
+      .headline-font(@size: 17px, @color: @text-color);
+      border: solid 1px fadeout(black, 60%);
+      border-radius: 6px;
+      line-height: 1.0;
+      transition: border 0.1s ease-out, background 0.1s ease-out, color 0.1s ease-out;
+      padding: 0.65em 1.6em 0.6em;
+      margin: 2em;
+      display: inline-block;
+      text-decoration: none;
+
+      &:hover, &:focus, &:active {
+        color: white;
+        background: @rhodamine-color;
+        border-color: @rhodamine-color;
+        text-decoration: none;
+      }
+    }
   }
 }

site/_css/users.less

@@ -0,0 +1,40 @@
+section.whos-using-page {
+  padding-bottom: 6em;
+  text-align: center;
+  max-width: 800px;
+
+  .prose {
+    max-width: 560px;
+    text-align: center;
+    margin: 0 auto;
+  }
+
+  .logos {
+    align-items: center;
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: center;
+
+    img {
+      max-height: 100px;
+      max-width: 180px;
+      padding: 14px;
+      @media screen and (min-width: 1020px) {
+        max-height: 150px;
+        max-width: 270px;
+        padding: 20px;
+      }
+
+      &.round {
+        max-height: 106px;
+        max-width: 140px;
+        padding: 11px;
+        @media screen and (min-width: 1020px) {
+          max-height: 158px;
+          max-width: 210px;
+          padding: 16px;
+        }
+      }
+    }
+  }
+}

site/index.html.js

@@ -536,31 +536,36 @@ public class Character {
           <div className="logos">
             {/* Waiting for permission from some of the below */}
             <a href="https://www.facebook.com/" target="_blank">
-              <img src="/img/logos/facebook.png" title="Facebook" />
+              <img src="/users/logos/facebook.png" title="Facebook" />
             </a>
             {/** /}
             <a href="https://twitter.com/" target="_blank">
-              <img src="/img/logos/twitter.png" title="Twitter" className="round" />
+              <img src="/users/logos/twitter.png" title="Twitter" className="round" />
             </a>
             {/**/}
             <a href="https://developer.github.com/early-access/graphql" target="_blank">
-              <img src="/img/logos/github.png" title="GitHub" className="round" />
+              <img src="/users/logos/github.png" title="GitHub" className="round" />
             </a>
             {/** /}
             <a href="https://www.pinterest.com/" target="_blank">
-              <img src="/img/logos/pinterest.png" title="Pinterest" className="round" />
+              <img src="/users/logos/pinterest.png" title="Pinterest" className="round" />
             </a>
             <a href="https://www.airbnb.com/" target="_blank">
-              <img src="/img/logos/airbnb.png" title="Airbnb" className="round" />
+              <img src="/users/logos/airbnb.png" title="Airbnb" className="round" />
             </a>
             {/**/}
             <a href="https://www.intuit.com/" target="_blank">
-              <img src="/img/logos/intuit.png" title="Intuit" />
+              <img src="/users/logos/intuit.png" title="Intuit" />
             </a>
             <a href="https://www.coursera.org/" target="_blank">
-              <img src="/img/logos/coursera.png" title="Coursera" />
+              <img src="/users/logos/coursera.png" title="Coursera" />
             </a>
           </div>
+
+          <a className="button" href="/users/">
+            More GraphQL Users
+          </a>
+
         </section>
 
       </Site>

site/style.less

@@ -1,6 +1,7 @@
 @import "_css/graphql.less";
 @import "_css/index.less";
 @import "_css/docs.less";
+@import "_css/users.less";
 @import "_css/prism.less";
 @import "_css/codemirror.less";
 @import "_css/algolia.less";

site/users/index.html.js

@@ -0,0 +1,67 @@
+/**
+ * Copyright (c) 2015, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var React = require('react');
+var Site = require('../_core/Site');
+
+/**
+ * Adding your logo? Add it to the /whos-using/logos/ directory and then append
+ * an entry to this list.
+ *
+ * Please include logos with transparent backgrounds with no margins. If your
+ * logo is round, include `isRound: true` in your entry.
+ */
+var logos = [
+  {
+    name: 'Facebook',
+    img: 'facebook.png',
+    link: 'https://www.facebook.com/'
+  },
+  {
+    name: 'GitHub',
+    img: 'github.png',
+    isRound: true,
+    link: 'https://developer.github.com/early-access/graphql'
+  },
+  {
+    name: 'Intuit',
+    img: 'intuit.png',
+    link: 'https://www.intuit.com/'
+  },
+  {
+    name: 'Coursea',
+    img: 'coursera.png',
+    link: 'https://www.coursera.org/'
+  },
+];
+
+module.exports = ({ page }) =>
+  <Site title="Who's Using" page={page}>
+    <section className="whos-using-page">
+
+      <div className="prose">
+        <h1>Who&rsquo;s using GraphQL?</h1>
+        <p>
+          GraphQL is used by teams of all sizes in many different environments and languages to power mobile apps, websites, and APIs.
+        </p>
+        <p>
+          Is your company using GraphQL?<br />
+          Edit this page with a <a target="_blank" href={'https://github.com/graphql/graphql.github.io/edit/source/site/' + page.relPath}>Pull Request</a> to add your logo.
+        </p>
+      </div>
+
+      <div className="logos">
+        {logos.map(logo =>
+          <a href={logo.link} target="_blank">
+            <img src={'/users/logos/' + logo.img} title={logo.name} className={logo.isRound ? 'round' : null} />
+          </a>
+        )}
+      </div>
+
+    </section>
+  </Site>