first try at get started section

_src/_assets/scss/_sections.scss

@@ -49,7 +49,9 @@
 
 .section__actions {
     text-align: center;
-    margin-top: $spacer * 2;
+    margin-top: $spacer * 3;
+    padding-top: $spacer * 2;
+    border-top: 1px solid darken($brand-05, 8%);
 
     .button + .button {
         margin-left: $spacer * 2;

_src/_assets/scss/page-front.scss

@@ -166,6 +166,87 @@
     }
 }
 
+//
+// Get started
+//
+.section--getstarted {
+    counter-reset: getstarted-steps;
+
+    .feature__image {
+        background: rgba(255, 255, 255, .5);
+    }
+
+    .section__actions {
+        border-top: 0;
+        padding-top: 0;
+        margin-top: $spacer * 2;
+    }
+}
+
+.getstarted-bigchaindb {
+    padding-top: $spacer * 3;
+    margin-top: $spacer * 3;
+    border-top: 1px solid darken($brand-05, 8%);
+}
+
+.getstarted {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    height: 100%;
+    padding: $spacer;
+    color: $brand-05;
+    background: $link-color;
+    cursor: pointer;
+    counter-increment: getstarted-steps;
+
+    .grid__col:first-child & {
+        border-top-left-radius: $border-radius;
+        border-bottom-left-radius: $border-radius;
+        border-right: .2rem solid $brand-05;
+    }
+
+    .grid__col:last-child & {
+        border-top-right-radius: $border-radius;
+        border-bottom-right-radius: $border-radius;
+        border-left: .2rem solid $brand-05;
+    }
+
+    &:hover,
+    &:focus {
+        background: darken($link-color, 10%);
+        color: $brand-05;
+    }
+
+    code {
+        color: inherit;
+    }
+}
+
+.getstarted__title {
+    font-size: $font-size-h3;
+    color: #fff;
+    margin-bottom: $spacer / 3;
+
+    &:before {
+        content: counter(getstarted-steps);
+        display: block;
+        background: rgba($brand-05, .3);
+        width: 1.75rem;
+        height: 1.75rem;
+        border-radius: 50%;
+        text-align: center;
+        line-height: 1.75rem;
+        font-size: $font-size-base;
+        font-weight: $font-weight-bold;
+        margin-bottom: $spacer / 1.5;
+    }
+}
+
+.getstarted__text {
+    opacity: .9;
+}
+
 
 //
 // Connect

_src/_data/content-front.yml

@@ -61,8 +61,8 @@ roadmap:
           status: planned
 
 getstarted:
-    title: "Get started"
+    title: "Get started with IPDB"
-    description: "GET https://test.ipdb.io/api/"
+    description: "Since you don’t need to setup and maintain your own BigchainDB node, you can get started with IPDB in no time."
 
 
 connect:

_src/index.html

@@ -170,9 +170,59 @@ css: page-front
 <section class="section section--background section--getstarted">
     <div class="row">
         <header class="section__header">
+            <div class="grid grid--full grid-medium--columns grid--gutters">
+                <div class="grid__col grid__col--4">
                     <h1 class="section__title">{{ content.getstarted.title }}</h1>
                     <p class="section__description">{{ content.getstarted.description }}</p>
+                </div>
+            </div>
         </header>
+
+        <h2>TL;DR</h2>
+
+        <div class="grid grid--full grid-medium--third">
+            <div class="grid__col">
+                <a class="getstarted" href="{{ site.signup.link }}">
+                    <h2 class="getstarted__title">Create account</h2>
+                    <p class="getstarted__text">Creating an account is free and takes just a second.</p>
+                </a>
+            </div>
+            <div class="grid__col">
+                <a class="getstarted" href="">
+                    <h2 class="getstarted__title">Add your app</h2>
+                    <p class="getstarted__text">Add your app and receive your <code>app_id</code> &amp; <code>app_key</code>.</p>
+                </a>
+            </div>
+            <div class="grid__col">
+                <a class="getstarted" href="https://www.bigchaindb.com/getstarted/#drivers">
+                    <h2 class="getstarted__title">Get drivers &amp; tools</h2>
+                    <p class="getstarted__text">Point your apps to <code>test.ipdb.io</code> and code along.</p>
+                </a>
+            </div>
+        </div>
+
+        <footer class="section__actions">
+            <a href="/docs/" class="button button--text">IPDB Documentation</a>
+        </footer>
+
+        <div class="getstarted-bigchaindb">
+            <div class="grid grid--full grid-small--half grid-medium--columns grid--center grid--gutters">
+                <div class="grid__col grid__col--2">
+                    <figure class="feature__image">
+                        <svg aria-labelledby="title">
+                            <title>BigchainDB</title>
+                            <use xlink:href="/assets/img/sprite.svg#feature-bigchaindb"></use>
+                        </svg>
+                    </figure>
+                </div>
+
+                <div class="grid__col grid__col--4">
+                    <h1 class="feature__title">Just want to have a quick look into a transaction?</h1>
+                    <p class="feature__text">Over on the BigchainDB site you can quickly create your first transaction, and learn how to craft a proper one.</p>
+                    <a class="button button--text" href="https://www.bigchaindb.com/getstarted/">Send your first transaction</a>
+                </div>
+            </div>
+        </div>
     </div>
 </section>