From 158534cf61a08a68180e90df49bd5cc66d91b686 Mon Sep 17 00:00:00 2001
From: Shipow <shipowlata@gmail.com>
Date: Wed, 23 Dec 2015 01:36:59 +0100
Subject: [PATCH] chore(docs): landing

---
 docs/_layouts/default.html |   2 -
 docs/css/_helper.scss      |   1 -
 docs/css/_home.scss        | 101 +++++++++++++++++++------------------
 docs/index.haml            |  21 +++++++-
 4 files changed, 70 insertions(+), 55 deletions(-)

diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
index a7134b9d..556db2a9 100644
--- a/docs/_layouts/default.html
+++ b/docs/_layouts/default.html
@@ -25,8 +25,6 @@
 
     <script src="//cdn.jsdelivr.net/jquery/2.1/jquery.min.js"></script>
     <script src="{{ "/js/bootstrap.min.js" | prepend: site.baseurl }}"></script>
-    <script src="//cdn.jsdelivr.net/autocomplete.js/0/autocomplete.jquery.min.js"></script>
-    <script src="//cdn.jsdelivr.net/algoliasearch/3/algoliasearch.min.js"></script>
 
 {% if site.env == 'development' %}
     <script>
diff --git a/docs/css/_helper.scss b/docs/css/_helper.scss
index d779ac36..929bf69d 100644
--- a/docs/css/_helper.scss
+++ b/docs/css/_helper.scss
@@ -315,4 +315,3 @@ sub {
 
 .bg-white {
   background-color: white; }
-
diff --git a/docs/css/_home.scss b/docs/css/_home.scss
index fa3d2cac..00ad7e7c 100644
--- a/docs/css/_home.scss
+++ b/docs/css/_home.scss
@@ -35,6 +35,11 @@ html, body {
     .navbar-nav > li > a {
       padding-bottom: 0;
     }
+    .fa-github {
+      font-size: 1.6em;
+      position: relative;
+      top: -2px
+    }
   }
 }
 
@@ -74,16 +79,17 @@ html, body {
 
 /* JOIN FORM
 // ------------------------- */
-#join-form {
+#join-form, #join-form-2 {
   background: #242E3A;
   display: block;
   width: 400px;
-  padding: 5px 10px;
+  padding: 20px;
   margin: 0 auto;
   border-radius: 6px;
   color: #FFF;
   max-width: 90%;
   h3 {
+    font-size: 22px;
     text-align: center;
     padding-bottom: 20px;
     border-bottom: 1px solid #3A434E;
@@ -93,10 +99,25 @@ html, body {
     font-weight: normal;
   }
   p {
-    margin-top: 5px;
-    font-size: 13px;
+    margin-top: 8px;
+    font-size: 14px;
+    letter-spacing: .5px;
     color: #C7C4C4;
-    font-style: italic;
+  }
+  .form-control {
+    border: none;
+  }
+  .input-group-addon {
+    background: white;
+    border: none;
+    border-right: solid 1px #ccc;
+  }
+  .btn {
+    background-color: #FF2E6C;
+    border: none;
+    font-size: 14px;
+    letter-spacing: 2px;
+    font-weight: bold;
   }
 }
 
@@ -145,45 +166,39 @@ h2.page-section-title:after {
 #section_why {
   padding-left: 20px;
   padding-right: 20px;
-  font-size: 20px;
-}
-@media (min-width: 600px) {
-  #section_why {
+  font-size: 18px;
+  @media (min-width: 600px) {
     padding-left: 120px;
     padding-right: 120px;
   }
 }
+
 #section_examples {
   font-size: 18px;
   text-align: center;
   padding-left: 20px;
   padding-right: 20px;
-}
-#section_examples a {
-  color: #C7C4C4;
-}
-#section_examples a:hover {
-  color: #46AEDA;
-  text-decoration: none;
-}
-#section_examples .showcase {
-  margin-top: 40px;
-  text-align: center;
-}
-@media (min-width: 600px) {
-  #section_examples {
-    padding-left: 0px;
-    padding-right: 0px;
+  a {
+    color: #C7C4C4;
+    &:hover {
+      color: #46AEDA;
+      text-decoration: none;
+    }
+  }
+  .showcase {
+    margin-top: 40px;
+    text-align: center;
+    img.logo {
+      display: inline-block;;
+      height: 60px;
+      margin-bottom: 20px;
+    }
+    img.example {
+      width: 100%;
+    }
   }
 }
-#section_examples .showcase img.logo {
-  display: inline-block;;
-  height: 60px;
-  margin-bottom: 20px;
-}
-#section_examples .showcase img.example {
-  width: 100%;
-}
+
 #section_how h3 .how-it-works-number {
   float: left;
   line-height: 35px;
@@ -204,24 +219,10 @@ h2.page-section-title:after {
     padding-left: 20px;
     padding-right: 20px;
 }
-@media (min-width: 600px) {
-  #section_how p {
-    padding-left: 0px;
-    padding-right: 0px;
-  }
-}
-#section_get-started {
-  padding-left: 20px;
-  padding-right: 20px;
-  font-size: 20px;
-}
-@media (min-width: 600px) {
-  #section_get-started {
-    padding-left: 120px;
-    padding-right: 120px;
-  }
-}
 
+#section_get-started {
+  font-size: 18px;
+}
 
 /* FOOTER
 // ------------------------- */
diff --git a/docs/index.haml b/docs/index.haml
index a6c4d27f..52f0a370 100644
--- a/docs/index.haml
+++ b/docs/index.haml
@@ -38,7 +38,7 @@ layout: default
     .m800.m-l-r-auto
       %h2.page-section-title Why DocSearch?
       %p We’re scratching our own itch here. As developers, we spend a lot of time reading documentation, and it isn’t always easy to find the information we need.
-      %p Not blaming anyone here. Building a good search for a documentation is a complex challenge.
We happen to have a lot of experience doing that, and we want to share it with the world. For free.
+      %p Not blaming anyone here. Building a good search for a documentation is a complex challenge.
We happen to have a lot of experience doing that, and we want to share it with the world.
   #section_examples.page-section.page-section-dark
     .container
       .text-center
@@ -98,10 +98,27 @@ layout: default
           %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
-    .m800
+    .m900.m-l-r-auto
       %h2.page-section-title Get started
       %p Add the url of your documentation site and your email to the form at the top of the page. We’ll get back to you with what you need to integrate your new search into   your website.
       %p Don’t forget, DocSearch is completely free! There’s no need to sign up for Algolia or submit any payment information. Let’s tackle document search together.
+      .spacer30
+      %form#join-form-2{action: '#', method: 'POST'}
+        .input-group
+          %span.input-group-addon
+            %i.fa.fa-fw.fa-envelope-o
+          %input.form-control{type: 'email', placeholder: 'you@example.org', name: 'email'}
+        %p.text-sm We’ll crawl the documentation pages of your website and index them on Algolia.
+        .spacer20
+        .input-group
+          %span.input-group-addon
+            %i.fa.fa-fw.fa-globe
+          %input.form-control{type: 'text', placeholder: 'https://website.com/doc', name: 'url'}
+        %p.text-sm We’ll email you the code you need to integrate the search into your documentation.
+        .spacer20
+        .text-center
+          %button.btn.btn-primary.btn-lg{type: 'submit'}
+            JOIN THE BETA!
 
 <script src="js/animation.js"></script>