prototype all content blocks

_src/_assets/styles/_page-getstarted.scss

@@ -12,6 +12,7 @@
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
+    box-shadow: none;
 
     &:hover,
     &:focus {
@@ -32,15 +33,16 @@
 }
 
 .driver__logo {
-    width: 3rem;
+    width: 2rem;
-    height: 3rem;
+    height: 2rem;
     background: $brand-primary;
 }
 
 .driver__title {
+    @extend .h5;
     color: $brand-primary;
-    margin: 0;
+    margin-top: 0;
-    font-size: $font-size-h3;
+    margin-bottom: $spacer;
 }
 
 .driver__meta {
@@ -58,6 +60,20 @@
     opacity: .75;
 }
 
+.driver--community {
+    text-align: center;
+    justify-content: center;
+
+    .driver__title {
+        width: 100%;
+        margin-bottom: 0;
+    }
+
+    .driver__logo {
+        margin-bottom: $spacer / 2;
+    }
+}
+
 .section--community {
     text-align: center;
     position: relative;

_src/_assets/styles/bigchain/_mixins/_backgrounds.scss

@@ -13,7 +13,10 @@
     background: $brand-main-gray-lighter;
 
     .section-title,
-    p {
+    p,
+    h1,
+    h2,
+    h3 {
         color: $brand-main-gray;
     }
 }

_src/_data/drivers.yml

@@ -0,0 +1,41 @@
+official:
+    - title: Python
+      repo: bigchaindb-driver
+      version: v0.2.2
+
+    - title: JavaScript
+      repo: js-bigchaindb-driver
+      version: v0.1.1
+
+    - title: CLI
+      repo: bdb-transaction-cli
+      version: v0.2.2
+
+community:
+    - title: Haskell
+      repo: bigchaindb-hs
+
+    - title: Ruby
+      repo: bigchaindb_ruby
+
+    - title: Go
+      repo: bigchaindb-driver-golang
+
+    - title: Java
+      repo: bigchaindb-java
+
+    - title: Swift
+      repo: bigchaindb-swift
+
+tools:
+    - title: Crypto-Conditions
+      repo: cryptoconditions
+      version: v0.5.1
+
+    - title: ILP ledger plugin
+      repo: ilp-plugin-bigchaindb
+      version: v0.1.1
+
+    - title: COALA IP ledger plugin
+      repo: pycoalaip-bigchaindb
+      version: v0.0.4

_src/start.html

@@ -10,10 +10,29 @@ redirect_from:
     - /community/
 ---
 
+<section class="section section--firsttransaction">
+    <div class="row">
+        <header class="section-header">
+            <h1 class="section-title">Get your first transaction into BigchainDB</h1>
+            <p class="section-description">Never wrote something into a blockchain? Now’s your chance: add your message and send off your first transaction to BigchainDB running within IPDB.</p>
+        </header>
+    </div>
+    <div class="row row--wide">
+        <div class="grid grid--full grid-small--half grid--gutters">
+            <div class="grid__col">
+                <h3>Request</h3>
+            </div>
+            <div class="grid__col">
+                <h3>Response</h3>
+            </div>
+        </div>
+    </div>
+</section>
+
 <section class="section section--architecture">
     <div class="row">
         <header class="section-header">
-            <p class="section-description">Get started quickly by installing BigchainDB.</p>
+            <p class="section-description">Architecture overview</p>
         </header>
     </div>
     <div class="row">
@@ -35,30 +54,122 @@ redirect_from:
 </nav>
 
 <section class="section section--server" id="server">
-    <div class="row">
+    <div class="row row--wide">
-
+        <header class="section-header text-left">
+            <h1 class="section-title">Get Server</h1>
+        </header>
+    </div>
+    <div class="row row--wide">
+        <div class="grid grid--full grid-small--half grid--gutters">
+            <div class="grid__col">
+                <h3>IPDB: the public BigchainDB network</h3>
+                <p>No need for any installation. Sign up and connect instantly, we handle running a BigchainDB production node for you.</p>
+                <a class="btn btn-primary" href="">Get IPDB</a>
+            </div>
+            <div class="grid__col">
+                <h3>BigchainDB Server</h3>
+                <p>If you want to run your own BigchainDB instance you can either install on Linux or with Docker on any system.</p>
+                <a class="btn btn-secondary" href="">Install BigchainDB Server</a>
+            </div>
+        </div>
     </div>
 </section>
 
 <section class="section section--drivers background--darker" id="drivers">
-    <div class="row">
+    <div class="row row--wide">
-        <a class="driver" href="https://github.com/bigchaindb/bigchaindb-driver">
+        <header class="section-header text-left">
-            <h2 class="driver__title">Python</h2>
+            <h1 class="section-title">Get Drivers &amp; Tools</h1>
-            <svg class="driver__logo">
+        </header>
-                <use></use>
+    </div>
-            </svg>
+    <div class="row row--wide">
+        <h3>BigchainDB in your language</h3>
+        <p>Get one of the drivers to connect to IPDB or your BigchainDB server instance.</p>
+    </div>
+    <div class="row row--wide">
+        <h3>Officially supported drivers</h3>
+        <div class="grid grid--full grid-small--half grid-medium--fit grid--gutters">
 
-            <p class="driver__meta">
+            {% for driver in site.data.drivers.official %}
-                <span class="driver__repo">bigchaindb-driver</span>
+            <div class="grid__col">
-                <span class="driver__version">v0.1.1</span>
+                <a class="driver" href="https://github.com/bigchaindb/{{ driver.repo }}">
-            </p>
+                    <h2 class="driver__title">{{ driver.title }}</h2>
-        </a>
+                    <svg class="driver__logo">
+                        <use></use>
+                    </svg>
+
+                    <p class="driver__meta">
+                        <span class="driver__repo">{{ driver.repo }}</span>
+                        <span class="driver__version">{{ driver.version }}</span>
+                    </p>
+                </a>
+            </div>
+            {% endfor %}
+
+        </div>
+    </div>
+
+    <div class="row row--wide">
+        <h3>Officially supported tools</h3>
+        <div class="grid grid--full grid-small--half grid-medium--fit grid--gutters">
+
+            {% for driver in site.data.drivers.tools %}
+            <div class="grid__col">
+                <a class="driver" href="https://github.com/bigchaindb/{{ driver.repo }}">
+                    <h2 class="driver__title">{{ driver.title }}</h2>
+
+                    <p class="driver__meta">
+                        <span class="driver__repo">{{ driver.repo }}</span>
+                        <span class="driver__version">{{ driver.version }}</span>
+                    </p>
+                </a>
+            </div>
+            {% endfor %}
+
+        </div>
+    </div>
+
+    <div class="row row--wide">
+        <h3>Community supported drivers</h3>
+        <div class="grid grid--full grid-small--half grid-medium--fit grid--gutters">
+
+            {% for driver in site.data.drivers.community %}
+            <div class="grid__col">
+                <a class="driver driver--community" href="https://github.com/bigchaindb/{{ driver.repo }}">
+                    <svg class="driver__logo">
+                        <use></use>
+                    </svg>
+                    <h2 class="driver__title">{{ driver.title }}</h2>
+
+                    <p class="driver__meta">
+                        <span class="driver__repo">{{ driver.repo }}</span>
+                    </p>
+                </a>
+            </div>
+            {% endfor %}
+
+        </div>
     </div>
 </section>
 
-<section class="section section--docs" id="docs">
+<section class="section section--docs background--light" id="docs">
     <div class="row">
-
+        <header class="section-header">
+            <h1 class="section-title">Next Up</h1>
+            <p class="section-description">Dive into our documentation or learn or code.</p>
+        </header>
+    </div>
+    <div class="row">
+        <div class="grid grid--full grid-small--fit grid--gutters">
+            <div class="grid__col">
+                <h3>Tutorials</h3>
+            </div>
+            <div class="grid__col">
+                <h3>Code examples</h3>
+            </div>
+            <div class="grid__col">
+                <h3>Documentation</h3>
+            </div>
+        </div>
     </div>
 </section>