From c22ec133588390e4d80c3144c3e574a3daa39e1f Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Mon, 20 Nov 2017 11:25:56 +0100
Subject: [PATCH] get started CTA section

---
 _src/_assets/styles/_page-guides.scss | 18 ++++++++++++++++++
 _src/_layouts/guide.html              | 27 +++++++++++++++++++++++----
 _src/guides.html                      | 19 +++++++++++++++++++
 3 files changed, 60 insertions(+), 4 deletions(-)

diff --git a/_src/_assets/styles/_page-guides.scss b/_src/_assets/styles/_page-guides.scss
index 3ce164d..a43f2f4 100644
--- a/_src/_assets/styles/_page-guides.scss
+++ b/_src/_assets/styles/_page-guides.scss
@@ -55,6 +55,10 @@
     }
 }
 
+.section--guides-more {
+    padding-top: 0;
+}
+
 .guide {
     height: 100%;
 
@@ -151,3 +155,17 @@ li.toc-h3 {
         padding-bottom: ($spacer * 5);
     }
 }
+
+.section--getstarted {
+    padding-bottom: 0;
+
+    .section-header {
+        margin-bottom: -($spacer * 3.5);
+        position: relative;
+        z-index: 10;
+
+        .btn {
+            margin-top: $spacer * 2;
+        }
+    }
+}
diff --git a/_src/_layouts/guide.html b/_src/_layouts/guide.html
index bce88eb..9d51bb6 100644
--- a/_src/_layouts/guide.html
+++ b/_src/_layouts/guide.html
@@ -21,15 +21,15 @@ layout: base
     </div>
 </section>
 
-<section class="section">
+<section class="section section--guides-more">
     <div class="row">
         <header class="section-header">
             <h1 class="section-title">More guides</h1>
         </header>
     </div>
-    <div class="row">
-        <div class="grid grid--full grid-small--half grid--gutters">
-            {% for guide in site.guides limit: 4 %}
+    <div class="row row--wide">
+        <div class="grid grid--full grid-small--half grid-medium--third grid--gutters">
+            {% for guide in site.guides limit: 6 %}
                 {% unless page.id == guide.id %}
                     <div class="grid__col">
                         <article class="guide">
@@ -46,3 +46,22 @@ layout: base
         <a class="btn btn-secondary" href="/guides/">All guides</a>
     </div>
 </section>
+
+<section class="section section--getstarted background--darker">
+    <div class="row row--wide">
+        <header class="section-header">
+            <h1 class="section-title">Get to know the BigchainDB universe</h1>
+            <div class="section-description">
+                <p>Explore drivers, tools & a lot more documentation.</p>
+                <a class="btn btn-primary" href="/getstarted/">Get started</a>
+            </div>
+        </header>
+    </div>
+    <aside class="starbase starbase--server">
+        <div class="row row--wide">
+            <figure class="starbase__image">
+                <img class="img--responsive" src="/assets/img/nosprite/starbase-server.svg" alt="Starbase" width="1111" height="343">
+            </figure>
+        </div>
+    </aside>
+</section>
diff --git a/_src/guides.html b/_src/guides.html
index e006df4..90d0626 100644
--- a/_src/guides.html
+++ b/_src/guides.html
@@ -21,3 +21,22 @@ tagline: "These guides explain you how to get started and build apps with Bigcha
         </div>
     </div>
 </section>
+
+<section class="section section--getstarted background--darker">
+    <div class="row row--wide">
+        <header class="section-header">
+            <h1 class="section-title">Get to know the BigchainDB universe</h1>
+            <div class="section-description">
+                <p>Explore drivers, tools & a lot more documentation.</p>
+                <a class="btn btn-primary" href="/getstarted/">Get started</a>
+            </div>
+        </header>
+    </div>
+    <aside class="starbase starbase--server">
+        <div class="row row--wide">
+            <figure class="starbase__image">
+                <img class="img--responsive" src="/assets/img/nosprite/starbase-server.svg" alt="Starbase" width="1111" height="343">
+            </figure>
+        </div>
+    </aside>
+</section>