From 03e42d043cb63796cdf283fcf317155c0be0e1d2 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Thu, 15 Jun 2017 22:11:46 +0200
Subject: [PATCH] prototype driver component

---
 _src/_assets/styles/_page-getstarted.scss | 54 +++++++++++++++++++++++
 _src/start.html                           | 10 +++++
 2 files changed, 64 insertions(+)

diff --git a/_src/_assets/styles/_page-getstarted.scss b/_src/_assets/styles/_page-getstarted.scss
index 5198c54..cbb6f35 100644
--- a/_src/_assets/styles/_page-getstarted.scss
+++ b/_src/_assets/styles/_page-getstarted.scss
@@ -4,6 +4,60 @@
 // bigchaindb.com
 //
 
+.driver {
+    padding: $spacer;
+    background: rgba($brand-main-blue-light, .15);
+    border-top-left-radius: $border-radius;
+    border-top-right-radius: $border-radius;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+
+    &:hover,
+    &:focus {
+        .driver__title {
+            color: #fff;
+        }
+
+        .driver__logo {
+            background: #fff;
+        }
+    }
+}
+
+.driver,
+.driver__logo,
+.driver__title {
+    @include transition;
+}
+
+.driver__logo {
+    width: 3rem;
+    height: 3rem;
+    background: $brand-primary;
+}
+
+.driver__title {
+    color: $brand-primary;
+    margin: 0;
+    font-size: $font-size-h3;
+}
+
+.driver__meta {
+    @include text-small;
+    width: 100%;
+    align-self: flex-end;
+    margin: 0;
+
+    span {
+        display: block;
+    }
+}
+
+.driver__version {
+    opacity: .75;
+}
+
 .section--community {
     text-align: center;
     position: relative;
diff --git a/_src/start.html b/_src/start.html
index d7c2b90..ccd5d11 100644
--- a/_src/start.html
+++ b/_src/start.html
@@ -42,7 +42,17 @@ redirect_from:
 
 <section class="section section--drivers background--darker" id="drivers">
     <div class="row">
+        <a class="driver" href="https://github.com/bigchaindb/bigchaindb-driver">
+            <h2 class="driver__title">Python</h2>
+            <svg class="driver__logo">
+                <use></use>
+            </svg>
 
+            <p class="driver__meta">
+                <span class="driver__repo">bigchaindb-driver</span>
+                <span class="driver__version">v0.1.1</span>
+            </p>
+        </a>
     </div>
 </section>