add dev tools section

Author: leebyron

site/_css/index.less

@@ -161,6 +161,7 @@ body.index {
   .darkWash {
     background: #3d464f;
     position: relative;
+    overflow: hidden;
   }
 
   section.point1 {
@@ -378,9 +379,52 @@ body.index {
     }
 
     .prose {
-      max-width: 540px;
+      max-width: 575px;
       text-align: center;
       margin: 0 auto;
+
+      a {
+        color: lighten(@rhodamine-color, 30%);
+      }
+    }
+
+    .graphiqlVid {
+      background: white;
+      border-radius: 4px;
+      box-shadow:
+        0 0 0 1px rgba(0, 0, 0, 0.2),
+        0 16px 64px rgba(0, 0, 0, 0.6);
+      margin: 3em -10px -100px;
+      transform: translateZ(0);
+
+      video {
+        width: 100%;
+      }
+    }
+  }
+
+  section.point5 {
+    display: flex;
+    flex-direction: row-reverse;
+    align-items: center;
+    justify-content: space-between;
+    padding-bottom: 4em;
+    padding-top: 4em;
+
+    .prose {
+      max-width: 415px;
+    }
+  }
+
+  section.point6 {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-bottom: 4em;
+    padding-top: 4em;
+
+    .prose {
+      max-width: 415px;
     }
   }
 

site/img/graphiql.mp4

@@ -304,33 +304,45 @@ type Species {
               Know exactly what data you can request from your API without
               leaving your editor, highlight potential issues before sending a
               query, and take advantage of improved code intelligence. GraphQL
-              makes it easy to build powerful tools by leveraging your
-              API&rsquo;s type system. You can even auto-generate your&nbsp;docs.</p>
+              makes it easy to build powerful tools like <a href="https://github.com/graphql/graphiql" target="_blank">GraphiQL</a> by
+              leveraging your API&rsquo;s type system.</p>
           </div>
+          <div className="graphiqlVid" dangerouslySetInnerHTML={{__html: `
+            <video autoplay loop playsinline>
+              <source src="/img/graphiql.mp4?" type="video/mp4" />
+            </video>
+          `}} />
         </section>
         </div>
 
-        <section>
-          <h2>Evolve your API without versions</h2>
-          {/*Illustration showing more legs added to a graph? Or a type evolving over time?]*/}
-          <p>
-            Add new fields and types to a GraphQL API without affecting queries
-            sent from existing apps. Aging fields can be deprecated and hidden
-            from documentation. By using a single version, GraphQL APIs give
-            apps easier access to new features and enable cleaner, more
-            maintainable server&nbsp;code.</p>
+        <div className="grayWash">
+        <section className="point5">
+          <div className="prose">
+            <h2>Evolve your API<br />without versions</h2>
+            {/*Illustration showing more legs added to a graph? Or a type evolving over time?]*/}
+            <p>
+              Add new fields and types to a GraphQL API without affecting
+              queries sent from existing apps. Aging fields can be deprecated
+              and hidden from documentation. By using a single version, GraphQL
+              APIs give apps easier access to new features and enable cleaner,
+              more maintainable server&nbsp;code.</p>
+          </div>
         </section>
+        </div>
 
-        <section>
-          <h2>Powered by your existing data and code</h2>
-          {/*Illustration of each field becoming a function?]*/}
-          <p>
-            GraphQL creates a uniform, powerful API across the entire surface
-            area of your application without being limited by a specific storage
-            engine. Write GraphQL APIs that leverage your existing data model
-            and server with GraphQL engine implementations available in many
-            languages. You provide small functions that fulfill fields in the
-            type system, and GraphQL calls them with optimal&nbsp;concurrency.</p>
+        <section className="point6">
+          <div className="prose">
+            <h2>Powered by your<br />existing data and code</h2>
+            {/*Illustration of each field becoming a function?]*/}
+            <p>
+              GraphQL creates a uniform, powerful API across the entire surface
+              area of your application without being limited by a specific
+              storage engine. Write GraphQL APIs that leverage your existing
+              data model and server with GraphQL engine implementations
+              available in many languages. You provide small functions that
+              fulfill fields in the type system, and GraphQL calls them with
+              optimal&nbsp;concurrency.</p>
+          </div>
         </section>
 
 {/*