From dc679f7cbd27a9527a6c5f8a1f3d82687b8d7899 Mon Sep 17 00:00:00 2001
From: Florian Kissling <flo@6230.org>
Date: Fri, 8 May 2015 03:29:16 +0200
Subject: [PATCH] Add a "feature overview" section to the homepage.

While I'm not too happy with things as they currently are, it's a start.
This also removes the icon from the "Download" button.
---
 docs/_sass/_jumbotron.scss      | 10 ++++++-
 docs/_sass/_s2-docs-home.scss   | 31 ++++++++++++++++-----
 docs/_sass/_s2-docs-layout.scss |  6 +++-
 docs/_sass/_s2-docs-nav.scss    |  1 -
 docs/css/s2-docs.scss           | 15 ++++------
 docs/index.html                 | 49 +++++++++++++++++++++++++++++++--
 6 files changed, 89 insertions(+), 23 deletions(-)

diff --git a/docs/_sass/_jumbotron.scss b/docs/_sass/_jumbotron.scss
index 1dd971fc..5ee8243f 100644
--- a/docs/_sass/_jumbotron.scss
+++ b/docs/_sass/_jumbotron.scss
@@ -6,7 +6,15 @@
   padding-right: 0;
 
   h1 {
-    font-size: 36px;
     color: #777;
+    font-size: 36px;
+    margin-top: 10px;
+  }
+
+  .version {
+    color: #999;
+    font-size: 14px;
+    font-weight: normal;
+    margin-bottom: 30px;
   }
 }
diff --git a/docs/_sass/_s2-docs-home.scss b/docs/_sass/_s2-docs-home.scss
index 668cbbec..eebc1863 100644
--- a/docs/_sass/_s2-docs-home.scss
+++ b/docs/_sass/_s2-docs-home.scss
@@ -1,19 +1,36 @@
 .notice-previous {
-  padding: 15px 20px;
-  color: #777;
-  background-color: #FAFAFA;
+  background: #f6f6f6;
+  color: #666;
   border-bottom: 1px solid #eee;
-  a {
-    font-weight: bold;
-  }
+  padding: 15px 20px;
 }
 
 .s2-docs-home .jumbotron {
   margin-bottom: 0;
+  color: #000;
+  h1 {
+    color: #000;
+    margin-top: 20px;
+  }
 }
 
 #lead {
 	text-align: center;
 	max-width: 800px;
-	margin: 0 auto 80px;
+	margin: 0 auto 40px;
+}
+
+.s2-docs-featurette {
+  color: #777;
+  text-align: center;
+  padding: 15px 0;
+
+  .fa {
+    font-size: 28px;
+    color: #777;
+  }
+
+  h4 {
+    margin: 30px 0 15px;
+  }
 }
diff --git a/docs/_sass/_s2-docs-layout.scss b/docs/_sass/_s2-docs-layout.scss
index 0cbe9912..7a0f4455 100644
--- a/docs/_sass/_s2-docs-layout.scss
+++ b/docs/_sass/_s2-docs-layout.scss
@@ -1,8 +1,12 @@
 .s2-docs-container {
   line-height: 1.6;
-  //font-size: 16px;
 }
 
 section {
   margin-bottom: 40px;
 }
+
+.page-header {
+  padding-bottom: 19px;
+  margin-bottom: 29px;
+}
diff --git a/docs/_sass/_s2-docs-nav.scss b/docs/_sass/_s2-docs-nav.scss
index a9280ef6..5e11eecb 100644
--- a/docs/_sass/_s2-docs-nav.scss
+++ b/docs/_sass/_s2-docs-nav.scss
@@ -14,7 +14,6 @@
   .navbar-nav > .active > a:hover,
   .navbar-nav > .active > a:focus {
     background-color: #f0f0f0;
-    //background-color: #FFF;
     color: #000;
   }
 
diff --git a/docs/css/s2-docs.scss b/docs/css/s2-docs.scss
index 2d4a171b..000b1cbe 100644
--- a/docs/css/s2-docs.scss
+++ b/docs/css/s2-docs.scss
@@ -19,16 +19,6 @@
   margin-bottom: 20px;
 }
 
-
-.version {
-  color: #999;
-}
-
-.page-header {
-  padding-bottom: 19px;
-  margin-bottom: 29px;
-}
-
 /* Inline code within headings retain the heading's background-color */
 h2 code,
 h3 code,
@@ -48,3 +38,8 @@ pre {
   background-color: #f7f7f9;
   border: 1px solid #e1e1e8;
 }
+
+.half-rule {
+  width: 100px;
+  margin: 40px auto;
+}
diff --git a/docs/index.html b/docs/index.html
index e5cb8615..089e6b24 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -12,12 +12,11 @@ slug: home
     </p>
     <p>
       <a href="https://github.com/select2/select2/releases" class="btn btn-outline-inverse btn-lg">
-        <i class="fa fa-arrow-down fa-lg"></i>
-        Download
+        Download Select2
       </a>
     </p>
     <p class="version">
-      Version 4.0.0
+      Currently v4.0.0</a>
     </p>
   </div>
 </main>
@@ -31,6 +30,50 @@ slug: home
     options.
   </section>
 
+  <hr class="half-rule">
+
+  <div class="row s2-docs-featurette">
+    <div class="col-sm-4">
+      <i class="fa fa-language"></i>
+      <h4>In your language</h4>
+      <p>Select2 comes with support for <a href="#">RTL environments</a>, <a href="#">searching with diacritics</a> and <a href="#">over 40 languages</a> built-in.</p>
+    </div>
+
+    <div class="col-sm-4">
+      <i class="fa fa-paint-brush"></i>
+      <h4>Fits in with your theme</h4>
+      <p>Fully skinnable, CSS built with Sass and seamlessly fitting Bootstrap 3.</p>
+    </div>
+
+    <div class="col-sm-4">
+      <i class="fa fa-database"></i>
+      <h4>Remote data support</h4>
+      <p><a href="#">Using AJAX</a> you can efficiently search large lists of items.</p>
+    </div>
+  </div>
+
+  <div class="row s2-docs-featurette">
+    <div class="col-sm-4">
+      <i class="fa fa-plug"></i>
+      <h4>Fully extensible</h4>
+      <p>The <a href="#">plugin system</a> allows you to easily customize Select2 to work exactly how you want it to.</p>
+    </div>
+
+    <div class="col-sm-4">
+      <i class="fa fa-tag"></i>
+      <h4>Dynamic item creation</h4>
+      <p>Allow users to type in a new option and <a href="#">add it on the fly</a>.</p>
+    </div>
+
+    <div class="col-sm-4">
+      <i class="fa fa-plug"></i>
+      <h4>Remote data support</h4>
+      <p><a href="#">Using AJAX</a> you can efficiently search large lists of items.</p>
+    </div>
+  </div>
+
+  <hr class="half-rule">
+
   <section id="getting-started">
     <h2>
       Getting started with Select2