From 72adf63da2f92de8890ff4e8c993fb7087dbc27d Mon Sep 17 00:00:00 2001
From: connors <connor.sears@github.com>
Date: Sat, 18 Jan 2014 13:04:55 -0800
Subject: [PATCH] building out the home page layout

---
 docs-assets/css/docs.css | 62 ++++++++++++++++++++++++++++++--
 index.html               | 76 ++++++++++++++++++++++++++--------------
 lib/sass/docs.scss       | 55 +++++++++++++++++++++++++++--
 3 files changed, 162 insertions(+), 31 deletions(-)

diff --git a/docs-assets/css/docs.css b/docs-assets/css/docs.css
index 8fa5ed5..7760e04 100644
--- a/docs-assets/css/docs.css
+++ b/docs-assets/css/docs.css
@@ -667,7 +667,7 @@ body {
   padding-bottom: 50px;
 }
 .docs-header-content .button {
-  padding: 15px 30px;
+  padding: 15px 30px 16px;
   font-size: 18px;
   color: #00d1fe;
   border-color: #00d1fe;
@@ -718,10 +718,66 @@ body {
   line-height: 34px;
 }
 
-.docs-benefits {
-  display: none;
+.section-header {
   text-align: center;
+}
+.section-header:after {
+  display: block;
+  content: '';
+  width: 200px;
+  margin: 50px auto 80px;
+  border-bottom: 1px solid #eee;
+}
+
+.section-heading,
+.section-lead {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.section-heading {
+  font-size: 55px;
+  font-weight: 300;
+}
+
+.section-lead {
+  font-size: 24px;
+  color: #777;
+  font-weight: 100;
+}
+
+.docs-benefits {
+  padding-top: 80px;
+  padding-bottom: 80px;
+  text-align: center;
+}
+
+.benefit-icon {
+  display: block;
+  width: 100px;
+  height: 100px;
+  margin: 0 auto 20px;
+  border: 1px solid #ddd;
+  border-radius: 50px;
+}
+.benefit-icon .icon {
+  color: #14b9d6;
+  font-size: 50px;
+  line-height: 100px;
+}
+
+.benefit-heading {
+  font-weight: 500;
+  font-size: 24px;
+  margin-top: 5px;
+  margin-bottom: 5px;
+}
+
+.benefit-text {
+  margin-top: 0;
+  margin-bottom: 100px;
   font-size: 18px;
+  color: #777;
 }
 
 .social {
diff --git a/index.html b/index.html
index f794b1f..c6ed07e 100644
--- a/index.html
+++ b/index.html
@@ -21,32 +21,7 @@ base_url: "./"
   </div>
 </div>
 
-<section class="docs-benefits">
-  <div class="container column-group">
-    <div class="column units-1 lg-units-6">
-      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
-      tempor incididunt ut labore et dolore magna aliqua.</p>
-    </div>
-    <div class="column units-1 lg-units-6">
-      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
-      tempor incididunt ut labore et dolore magna aliqua.</p>
-    </div>
-  </div>
-
-  <div class="container column-group">
-    <div class="column units-1 lg-units-6">
-      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
-      tempor incididunt ut labore et dolore magna aliqua.</p>
-    </div>
-    <div class="column units-1 lg-units-6">
-      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
-      tempor incididunt ut labore et dolore magna aliqua.</p>
-    </div>
-  </div>
-</section>
-
-
-
+<!-- Social links -->
 <ul class="social">
   <li>
     <iframe src="http://ghbtns.com/github-btn.html?user=maker&repo=ratchet&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
@@ -60,3 +35,52 @@ base_url: "./"
     <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
   </li>
 </ul>
+
+<!-- Benefits -->
+<section class="docs-benefits">
+  <div class="container column-group">
+    <div class="section-header column units-2">
+      <h2 class="section-heading">Getting started</h2>
+      <p class="section-lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
+    </div>
+    <div class="column units-1 lg-units-6">
+      <div class="benefit-icon">
+        <span class="icon icon-refresh"></span>
+      </div>
+      <h3 class="benefit-heading">Simple web technology</h3>
+      <p class="benefit-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+      tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+      tempor incididunt ut labore et dolore magna aliqua.</p>
+    </div>
+    <div class="column units-1 lg-units-6">
+      <div class="benefit-icon">
+        <span class="icon icon-refresh"></span>
+      </div>
+      <h3 class="benefit-heading">Simple web technology</h3>
+      <p class="benefit-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+      tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+      tempor incididunt ut labore et dolore magna aliqua.</p>
+    </div>
+  </div>
+
+  <div class="container column-group">
+    <div class="column units-1 lg-units-6">
+      <div class="benefit-icon">
+        <span class="icon icon-refresh"></span>
+      </div>
+      <h3 class="benefit-heading">Simple web technology</h3>
+      <p class="benefit-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+      tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+      tempor incididunt ut labore et dolore magna aliqua.</p>
+    </div>
+    <div class="column units-1 lg-units-6"> 
+      <div class="benefit-icon">
+        <span class="icon icon-refresh"></span>
+      </div>
+      <h3 class="benefit-heading">Simple web technology</h3>
+      <p class="benefit-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+      tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+      tempor incididunt ut labore et dolore magna aliqua.</p>
+    </div>
+  </div>
+</section>
diff --git a/lib/sass/docs.scss b/lib/sass/docs.scss
index a7b6c60..3449dc2 100644
--- a/lib/sass/docs.scss
+++ b/lib/sass/docs.scss
@@ -59,7 +59,7 @@ body {
   padding-bottom: 50px;
 
   .button {
-    padding: 15px 30px;
+    padding: 15px 30px 16px;
     font-size: 18px;
     color: #00d1fe;
     border-color: #00d1fe;
@@ -108,14 +108,65 @@ body {
   font-weight: 100;
   line-height: 34px;
 }
+.section-header {
+  text-align: center;
+
+  &:after {
+    display: block;
+    content: '';
+    width: 200px;
+    margin: 50px auto 80px;
+    border-bottom: 1px solid #eee;
+  }
+}
+.section-heading,
+.section-lead {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+.section-heading {
+  font-size: 55px;
+  font-weight: 300;
+}
+.section-lead {
+  font-size: 24px;
+  color: #777;
+  font-weight: 100;
+}
 
 // Benefits
 // --------------------------------------------------
 
 .docs-benefits {
-  display: none;
+  padding-top: 80px;
+  padding-bottom: 80px;
   text-align: center;
+}
+.benefit-icon {
+  display: block;
+  width: 100px;
+  height: 100px;
+  margin: 0 auto 20px;
+  border: 1px solid #ddd;
+  border-radius: 50px;
+
+  .icon {
+    color: #14b9d6;
+    font-size: 50px;
+    line-height: 100px;
+  }
+}
+.benefit-heading {
+  font-weight: 500;
+  font-size: 24px;
+  margin-top: 5px;
+  margin-bottom: 5px;
+}
+.benefit-text {
+  margin-top: 0;
+  margin-bottom: 100px;
   font-size: 18px;
+  color: #777;
 }