chore(docs): freeze gif

docs/index.haml

@@ -49,28 +49,43 @@ layout: default
         .col-sm-4.showcase
           %a{:href => "https://bootstrap.algolia.com", :target => "_blank"}
             %img.img-responsive.logo{:src => "./img/showcase/logo-bootstrap.png"}
-              %img.img-responsive.example{:src => "./img/showcase/example-bootstrap.gif"}
-                Bootstrap
+            .screen-wrapper
+              %img.img-responsive.example.freezeframe{:src => "./img/showcase/example-bootstrap.gif"}
+              %img.img-responsive.screen-mask{:src => "./img/mask.png"}
+            .spacer10
+            Bootstrap
         .col-sm-4.showcase
           %a{:href => "http://eslint.org/", :target => "_blank"}
             %img.img-responsive.logo{:src => "./img/showcase/logo-eslint.png"}
-              %img.img-responsive.example{:src => "./img/showcase/example-eslint.gif"}
-                ESLint
+            .screen-wrapper
+              %img.img-responsive.example.freezeframe{:src => "./img/showcase/example-eslint.gif"}
+              %img.img-responsive.screen-mask{:src => "./img/mask.png"}
+            .spacer10
+            ESLint
         .col-sm-4.showcase
           %a{:href => "http://docs.scala-lang.org/", :target => "_blank"}
             %img.img-responsive.logo{:src => "./img/showcase/logo-scala.png"}
-              %img.img-responsive.example{:src => "./img/showcase/example-scala.gif"}
-                Scala
+            .screen-wrapper
+              %img.img-responsive.example.freezeframe{:src => "./img/showcase/example-scala.gif"}
+              %img.img-responsive.screen-mask{:src => "./img/mask.png"}
+            .spacer10
+            Scala
         .col-sm-4.showcase
           %a{:href => "https://babeljs.algolia.com/", :target => "_blank"}
             %img.img-responsive.logo{:src => "./img/showcase/logo-babel.png"}
-              %img.img-responsive.example{:src => "./img/showcase/example-babel.gif"}
-                Babel.js
+            .screen-wrapper
+              %img.img-responsive.example.freezeframe{:src => "./img/showcase/example-babel.gif"}
+              %img.img-responsive.screen-mask{:src => "./img/mask.png"}
+            .spacer10
+            Babel.js
         .col-sm-4.showcase
           %a{:href => "https://reactjs.algolia.com/", :target => "_blank"}
             %img.img-responsive.logo{:src => "./img/showcase/logo-react.png"}
-              %img.img-responsive.example{:src => "./img/showcase/example-react.gif"}
-                React
+            .screen-wrapper
+              %img.img-responsive.example.freezeframe{:src => "./img/showcase/example-react.gif"}
+              %img.img-responsive.screen-mask{:src => "./img/mask.png"}
+            .spacer10
+            React
   #section_how.page-section
     .container
       .row
@@ -78,26 +93,28 @@ layout: default
       .row
         .col-sm-12
           %img.img-responsive{:src => "./img/illus-howitworks.jpg"}
-          .spacer30
+      .spacer60
       .row
-        .col-sm-4.how-it-works
-          %h3
-            %span.how-it-works-number> 1
-            We crawl your documentation pages
-          %p We built a website crawler designed to index every section of your documentation.
-          %p Just send us the URL of your documentation, and we’ll periodically run the crawler so you’re always up-to-date.
-        .col-sm-4.how-it-works
-          %h3
-            %span.how-it-works-number> 2
-            We configure your search experience
-          %p You don’t need to configure any settings or even have an Algolia account.
-          %p We take of all of this automatically to ensure the best documentation search experience.
-        .col-sm-4.how-it-works
-          %h3
-            %span.how-it-works-number> 3
-            You add the autocomplete to your UI
-          %p We’ll send you a few lines to code to integrate Algolia autocomplete and power your search.
-          %p You will receive the same speed, relevance and best-in-class UX as our paying customers.
+        .col-sm-10.col-sm-offset-1
+          .row
+            .col-sm-4.how-it-works
+              %h3
+                %span.how-it-works-number> 1
+                We crawl your documentation pages
+              %p We built a website crawler designed to index every section of your documentation.
+              %p Just send us the URL of your documentation, and we’ll periodically run the crawler so you’re always up-to-date.
+            .col-sm-4.how-it-works
+              %h3
+                %span.how-it-works-number> 2
+                We configure your search experience
+              %p You don’t need to configure any settings or even have an Algolia account.
+              %p We take of all of this automatically to ensure the best documentation search experience.
+            .col-sm-4.how-it-works
+              %h3
+                %span.how-it-works-number> 3
+                You add the search autocomplete to your UI
+              %p We’ll send you a few lines to code to integrate Algolia autocomplete and power your search.
+              %p You will receive the same speed, relevance and best-in-class UX as our paying customers.
   #section_get-started.page-section.page-section-dark
     .m900.m-l-r-auto
       %h2.page-section-title Get started
@@ -121,8 +138,13 @@ layout: default
           %button.btn.btn-primary.btn-lg{type: 'submit'}
             JOIN THE BETA!
 
-<script src="js/animation.js"></script>
-
 {% contentfor site-footer %}
 <script src="{{ "/js/home.js" | prepend: site.baseurl }}"></script>
+<script src="js/animation.js"></script>
+<script type="text/javascript">
+freezeframe_options = {
+animation_icon_image: false
+}
+</script>
+<script src="js/freezeframe.min.js"></script>
 {% endcontentfor %}