From db9c10081c8ac0a110be53814d2a45b0d293c986 Mon Sep 17 00:00:00 2001
From: Gianluca Bargelli <g.bargelli@gmail.com>
Date: Mon, 21 Mar 2016 20:17:49 +0100
Subject: [PATCH] feat(website): React :raised_hands:, popped out on the top
 with React                Native :)

---
 docs/css/_home.scss |  3 +++
 docs/index.haml     | 40 ++++++++++++++++++++++++----------------
 2 files changed, 27 insertions(+), 16 deletions(-)

diff --git a/docs/css/_home.scss b/docs/css/_home.scss
index dfcabf643..db094cc43 100644
--- a/docs/css/_home.scss
+++ b/docs/css/_home.scss
@@ -246,8 +246,11 @@ html, body {
   }
   .screen-wrapper {
     position: relative;
+    height: 201px;
+    overflow: hidden;
     .freezeframe-container {
 	    border-radius: 3px;
+      max-height: 100%;
     }
     .screen-mask {
       position: absolute;
diff --git a/docs/index.haml b/docs/index.haml
index f42a126bf..ed2ba6b33 100644
--- a/docs/index.haml
+++ b/docs/index.haml
@@ -30,13 +30,29 @@ layout: default
       %h2.page-section-title DocSearch is live
       %p We’ve integrated DocSearch into several open source projects. Take a look.
     .row
+      .col-sm-4.showcase
+        %a{:href => "https://facebook.github.io/react/", :target => "_blank"}
+          %img.img-responsive.logo{:src => "./img/showcase/logo-react.png"}
+          .screen-wrapper
+            %img.img-responsive.example.freezeframe{:src => "./img/showcase/example-react.gif"}
+            %img.img-responsive.screen-mask{:src => "./img/mask.png"}
+          .spacer10
+          React
+      .col-sm-4.showcase
+        %a{:href => "http://facebook.github.io/react-native/docs/getting-started.html", :target => "_blank"}
+          %img.img-responsive.logo{:src => "./img/showcase/logo-react.png"}
+          .screen-wrapper
+            %img.img-responsive.example.freezeframe{:src => "./img/showcase/example-reactnative.gif"}
+            %img.img-responsive.screen-mask{:src => "./img/mask.png"}
+          .spacer10
+          React Native
       .col-sm-4.showcase
         %a{:href => "http://eslint.org/", :target => "_blank"}
           %img.img-responsive.logo{:src => "./img/showcase/logo-eslint.png"}
           .screen-wrapper
             %img.img-responsive.example.freezeframe{:src => "./img/showcase/example-eslint.gif"}
             %img.img-responsive.screen-mask{:src => "./img/mask.png"}
-          .spacer5
+          .spacer10
           ESLint
       .col-sm-4.showcase
         %a{:href => "http://docs.scala-lang.org/", :target => "_blank"}
@@ -44,7 +60,7 @@ layout: default
           .screen-wrapper
             %img.img-responsive.example.freezeframe{:src => "./img/showcase/example-scala.gif"}
             %img.img-responsive.screen-mask{:src => "./img/mask.png"}
-          .spacer5
+          .spacer10
           Scala
       .col-sm-4.showcase
         %a{:href => "https://babeljs.algolia.com/", :target => "_blank"}
@@ -52,7 +68,7 @@ layout: default
           .screen-wrapper
             %img.img-responsive.example.freezeframe{:src => "./img/showcase/example-babel.gif"}
             %img.img-responsive.screen-mask{:src => "./img/mask.png"}
-          .spacer5
+          .spacer10
           Babel.js
       .col-sm-4.showcase
         %a{:href => "http://vuejs.org/guide/", :target => "_blank"}
@@ -60,23 +76,15 @@ layout: default
           .screen-wrapper
             %img.img-responsive.example.freezeframe{:src => "./img/showcase/example-vuejs.gif"}
             %img.img-responsive.screen-mask{:src => "./img/mask.png"}
-          .spacer5
+          .spacer10
           Vue.js
-      .col-sm-4.showcase
-        %a{:href => "http://facebook.github.io/react-native/docs/getting-started.html", :target => "_blank"}
-          %img.img-responsive.logo{:src => "./img/showcase/logo-react.png"}
-          .screen-wrapper
-            %img.img-responsive.example.freezeframe{:src => "./img/showcase/example-reactnative.gif"}
-            %img.img-responsive.screen-mask{:src => "./img/mask.png"}
-          .spacer5
-          React Native
       .col-sm-4.showcase
         %a{:href => "https://docs.influxdata.com/", :target => "_blank"}
           %img.img-responsive.logo{:src => "./img/showcase/logo-influxdata.png"}
           .screen-wrapper
             %img.img-responsive.example.freezeframe{:src => "./img/showcase/example-influxdata.gif"}
             %img.img-responsive.screen-mask{:src => "./img/mask.png"}
-          .spacer5
+          .spacer10
           Influxdata
       .col-sm-4.showcase
         %a{:href => "http://help.apiary.io/", :target => "_blank"}
@@ -84,7 +92,7 @@ layout: default
           .screen-wrapper
             %img.img-responsive.example.freezeframe{:src => "./img/showcase/example-apiary.gif"}
             %img.img-responsive.screen-mask{:src => "./img/mask.png"}
-          .spacer5
+          .spacer10
           Apiary
       .col-sm-4.showcase
         %a{:href => "http://marionettejs.com/", :target => "_blank"}
@@ -92,12 +100,12 @@ layout: default
           .screen-wrapper
             %img.img-responsive.example.freezeframe{:src => "./img/showcase/example-marionettejs.gif"}
             %img.img-responsive.screen-mask{:src => "./img/mask.png"}
-          .spacer5
+          .spacer10
           Marionette.js
       .col-sm-4.showcase
         .placeholder-logo
         .placeholder-screen
-        .spacer5
+        .spacer10
         You?
 #section_how.page-section
   .container