features content & layout

_src/_assets/styles/bigchain.scss

@@ -40,3 +40,4 @@
 @import 'page-404';
 @import 'page-styleguide';
 @import 'page-about';
+@import 'page-features';

_src/_assets/styles/bigchain/_content-page.scss

@@ -1,11 +1,21 @@
 
 .content--page {
-    .row {
+
-        > h1, h2 {
+}
-            border-bottom: 2px solid $gray-lightest;
+
-            padding-bottom: $spacer;
+.content--page--markdown {
-            margin-bottom: ($spacer * 2);
+    padding-top: ($spacer * 2);
-            text-align: center;
+    padding-bottom: ($spacer * 2);
-        }
+
+    @media ($screen-sm) {
+        padding-top: ($spacer * 4);
+        padding-bottom: ($spacer * 4);
+    }
+
+    > h1, h2 {
+        border-bottom: 2px solid $gray-lightest;
+        padding-bottom: $spacer;
+        margin-bottom: ($spacer * 2);
+        text-align: center;
     }
 }

_src/_assets/styles/bigchain/_header.scss

@@ -1,6 +1,5 @@
 .header {
     position: relative;
-    margin-bottom: ($spacer * 4);
     padding-top: 60px; // space for absolute menu
 
     // background

_src/_assets/styles/page-features.scss

@@ -0,0 +1,28 @@
+
+.section-difference {
+    @extend .background--gray;
+}
+
+.difference {
+    display: flex;
+    align-items: center;
+    padding: ($spacer * 2) 0;
+
+    &:first-of-type { padding-top: 0; }
+}
+
+.difference__icon {
+    flex: 0 0 15%;
+    margin-right: 5%;
+}
+
+.difference__text {
+    flex: 0 0 80%;
+
+    .section-difference & { color: #fff; }
+}
+
+
+.section-timeline {
+    @extend .background--light;
+}

_src/_layouts/page.html

@@ -12,9 +12,15 @@ layout: base
 </header>
 
 <section role="main" class="content content--page">
-    <div class="row">
+
+    {% if page.path contains '.md' %}
+    <div class="row content--page--markdown">
+    {% endif %}
 
         {{ content }}
 
+    {% if page.path contains '.md' %}
     </div>
+    {% endif %}
+
 </section>

_src/features.html

@@ -3,3 +3,71 @@ layout: page
 
 title: Features
 ---
+
+<section class="section section-benefits">
+    <div class="row">
+        <header class="section-header">
+            <h1 class="section-title">All the good stuff.</h1>
+        </header>
+
+        <div class="grid grid--full grid-small--fit grid--gutters">
+            <p class="grid__col">
+                Universal Timestamping
+            </p>
+            <p class="grid__col">
+                Build your trust network
+            </p>
+            <p class="grid__col">
+                Gain supply chain transparency
+            </p>
+        </div>
+    </div>
+</section>
+
+
+<section class="section section-difference">
+    <div class="row">
+        <header class="section-header">
+            <h1 class="section-title">Bigchain is different.</h1>
+        </header>
+
+        <p class="difference">
+            <svg class="difference__icon icon">
+                <use xlink:href="/assets/img/sprite.svg#icon-graph"></use>
+            </svg>
+            <span class="difference__text">Federation consensus model – public via trusted nodes (more coming soon), private (select your own)</span>
+        </p>
+
+        <p class="difference">
+            <svg class="difference__icon icon">
+                <use xlink:href="/assets/img/sprite.svg#icon-servers"></use>
+            </svg>
+            <span class="difference__text">We imbued blockchain characteristics on big data, rather than trying to big-datafy blockchain.</span>
+        </p>
+
+        <p class="difference">
+            <svg class="difference__icon icon">
+                <use xlink:href="/assets/img/sprite.svg#icon-tree"></use>
+            </svg>
+            <span class="difference__text">Open source, public version for the world and a private one for specific industry use cases.</span>
+        </p>
+
+        <p>
+            For more insight, read our whitepaper.
+        </p>
+    </div>
+</section>
+
+
+<section class="section section-timeline">
+    <div class="row">
+        <header class="section-header">
+            <h1 class="section-title">Timeline.</h1>
+        </header>
+
+        <p>
+            Private beta is shipping now. Contact us more information. Public Bigchain will be released soon
+        </p>
+
+    </div>
+</section>