add existing content, all new components

_src/_assets/javascripts/bigchain.js

@@ -3,6 +3,8 @@
 //=include ../../../node_modules/jquery/dist/jquery.js
 
 //=include bigchain/analytics.js
+//=include bigchain/forms.js
+//=include bigchain/smoothscroll.js
 
 jQuery(function($) {
 
@@ -10,5 +12,7 @@ jQuery(function($) {
     // init modules
     //
     GoogleAnalytics.init();
+    Forms.init();
+    SmoothScroll.init();
 
 });

_src/_assets/javascripts/bigchain/forms.js

@@ -0,0 +1,55 @@
+
+//=include ../../../../node_modules/parsleyjs/dist/parsley.js
+
+var Forms = (function(w, d) {
+
+    'use strict'
+
+    var app, _private, _config
+
+    // workaround for blog
+    var $ = jQuery
+
+    _config = {
+        form: $('form'),
+        parsleyForm: $('form.js-parsley')
+    }
+
+    _private = {
+        formValidation: function() {
+            // kick in Parsley.js but only if its js is present
+            // and form has `js-parsley` class
+            if ( window.Parsley && _config.form.hasClass('js-parsley') ) {
+                _config.parsleyForm.parsley({
+                    trigger: 'change'
+                })
+            }
+        },
+        formEmptyValidation: function() {
+            _config.form.find('.form-control').each(function() {
+
+                if ($(this).val() == '') {
+                    $(this).addClass('is-empty')
+                }
+
+                $(this).blur(function() {
+                    if ($(this).val() == '') {
+                        $(this).addClass('is-empty')
+                    } else {
+                        $(this).removeClass('is-empty')
+                    }
+                })
+            })
+        }
+    }
+
+    app = {
+        init: function() {
+            _private.formValidation()
+            _private.formEmptyValidation()
+        }
+    }
+
+    return app
+
+})(window, document)

_src/_assets/javascripts/bigchain/smoothscroll.js

@@ -0,0 +1,81 @@
+
+var SmoothScroll = (function(w, d) {
+
+    'use strict';
+
+    var app, _private, _config;
+
+    // workaround for blog
+    var $ = jQuery;
+
+    _config = {
+        win: $(window)
+    },
+
+    _private = {
+
+        scrollToTarget: function() {
+
+            // Check window width helper
+            function isWide() {
+                return _config.win.width() >= _config.minWidth;
+            }
+
+            $('a[href*=#]:not([href=#]):not(.nav-tabs a[href*=#])').click(function(e) {
+                if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
+                    var target = $(this.hash);
+                    target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
+
+                    if (target.length) {
+                        e.preventDefault();
+
+                        if (typeof document.body.style.transitionProperty === 'string') {
+                            var avail = $(document).height() - _config.win.height();
+
+                            scroll = target.offset().top;
+
+                            if (scroll > avail) {
+                                scroll = avail;
+                            }
+
+                            $('html').css({
+                                'transform': 'translate3d(0, ' + ( _config.win.scrollTop() - scroll ) + 'px, 0)',
+                                'transition' : '.6s ease-in-out'
+                            }).data('transitioning', true);
+                        }
+                        else {
+                            // fallback for dumb browsers
+                            $('html, body').animate({
+                                scrollTop: target.offset().top
+                            }, 600);
+                        }
+                    }
+                }
+            });
+        },
+
+        //
+        // remove styles after transition has finished
+        //
+        removeStyles: function() {
+
+            $('html').on('transitionend webkitTransitionEnd msTransitionEnd oTransitionEnd', function (e) {
+                if (e.target == e.currentTarget && $(this).data('transitioning') === true) {
+                    $(this).removeAttr('style').data('transitioning', false);
+                    $('html, body').scrollTop(scroll);
+                    return;
+                }
+            });
+        }
+    };
+
+    app = {
+        init: function() {
+            _private.scrollToTarget();
+            _private.removeStyles();
+        }
+    };
+
+    return app;
+
+})(window, document);

_src/_assets/styles/bigchain.scss

@@ -15,6 +15,9 @@
 // Components
 @import 'bigchain/_fonts';
 @import 'bigchain/_typography';
+@import 'bigchain/_animations';
+@import 'bigchain/_buttons';
+@import 'bigchain/_forms';
 @import 'bigchain/_logo';
 @import 'bigchain/_grid';
 @import 'bigchain/_sections';

_src/_assets/styles/bigchain/_animations.scss

@@ -0,0 +1,3 @@
+
+$timing-default:        ease-out;
+$timing-bounce:         cubic-bezier(0,1.02,.32,1.34); // easeOutBack, modified: http://cubic-bezier.com/#0,1.02,.32,1.34

_src/_assets/styles/bigchain/_buttons.scss

@@ -0,0 +1,149 @@
+//
+// Buttons
+// ---
+// bigchain.io
+//
+
+.btn {
+    display: inline-block;
+    font-weight: $btn-font-weight;
+    text-transform: uppercase;
+    font-family: $input-font;
+    text-align: center;
+    white-space: nowrap;
+    vertical-align: middle;
+    cursor: pointer;
+    user-select: none;
+    border: 1px solid transparent;
+    @include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $line-height, $btn-border-radius);
+    transition: all .2s ease-in-out;
+
+    &,
+    &:active,
+    &.active {
+        &:focus,
+        &.focus {
+
+        }
+    }
+    &:active,
+    &.active {
+        background-image: none;
+        outline: 0;
+        box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
+    }
+    &.disabled,
+    &:disabled {
+        cursor: disabled;
+        opacity: 0.65;
+        box-shadow: none;
+    }
+}
+
+// Future-proof disabling of clicks on `<a>` elements
+a.btn.disabled,
+fieldset[disabled] a.btn {
+    pointer-events: none;
+}
+
+//
+// Alternate buttons
+//
+.btn-primary {
+    @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
+}
+.btn-secondary {
+    @include button-variant($btn-secondary-color, $btn-secondary-bg, $btn-secondary-border);
+}
+.btn-info {
+    @include button-variant($btn-info-color, $btn-info-bg, $btn-info-border);
+}
+.btn-success {
+    @include button-variant($btn-success-color, $btn-success-bg, $btn-success-border);
+}
+.btn-warning {
+    @include button-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border);
+}
+.btn-danger {
+    @include button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border);
+}
+
+// Remove all backgrounds
+.btn-primary-outline {
+    @include button-outline-variant($btn-primary-bg);
+}
+.btn-secondary-outline {
+    @include button-outline-variant($btn-secondary-border);
+}
+.btn-info-outline {
+    @include button-outline-variant($btn-info-bg);
+}
+.btn-success-outline {
+    @include button-outline-variant($btn-success-bg);
+}
+.btn-warning-outline {
+    @include button-outline-variant($btn-warning-bg);
+}
+.btn-danger-outline {
+    @include button-outline-variant($btn-danger-bg);
+}
+
+//
+// Link buttons
+//
+// Make a button look and behave like a link
+.btn-link {
+    font-weight: normal;
+    color: $link-color;
+    border-radius: 0;
+    &,
+    &:active,
+    &.active,
+    &:disabled {
+        background-color: transparent;
+        box-shadow: none;
+    }
+    &,
+    &:focus,
+    &:active {
+        border-color: transparent;
+    }
+    &:disabled {
+    }
+}
+
+//
+// Button Sizes
+//
+.btn-lg {
+
+    // line-height: ensure even-numbered height of button next to large input
+    @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $font-size-lg, $line-height-lg, $btn-border-radius-lg);
+}
+.btn-sm {
+
+    // line-height: ensure proper height of button next to small input
+    @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $line-height-sm, $btn-border-radius-sm);
+}
+
+//
+// Block button
+//
+.btn-block {
+    display: block;
+    width: 100%;
+}
+
+// Vertically space out multiple block buttons
+.btn-block + .btn-block {
+    margin-top: 5px;
+}
+
+// Specificity overrides
+input[type="submit"],
+input[type="reset"],
+input[type="button"] {
+    &.btn-block {
+        width: 100%;
+    }
+}

_src/_assets/styles/bigchain/_fonts.scss

@@ -1,3 +1,10 @@
+//
+// Fonts
+// ---
+// bigchain.io
+//
+
+
 @font-face{
     font-family: 'Fira Sans';
     src: local('Fira Sans Light'),

_src/_assets/styles/bigchain/_forms.scss

@@ -0,0 +1,144 @@
+//
+// Forms
+// ---
+// bigchain.io
+//
+
+.form-control {
+    display: block;
+    width: 100%;
+    appearance: none;
+    padding: $input-padding-x $input-padding-y;
+    font-family: $input-font;
+    font-size: $font-size-base;
+    line-height: $line-height;
+    color: $input-color;
+    background: none;
+    border: none;
+    border-bottom: 2px solid $input-border-color;
+    border-radius: 0;
+    transition: border-color ease-in-out .15s;
+
+    &:focus {
+        outline: 0;
+        border-color: #fff;
+    }
+
+    // Placeholder
+    &::placeholder {
+        color: $input-color-placeholder;
+
+        // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
+        opacity: 1;
+    }
+
+    // Disabled and read-only inputs
+    //
+    // HTML5 says that controls under a fieldset > legend:first-child won't be
+    // disabled if the fieldset is disabled. Due to implementation difficulty, we
+    // don't honor that edge case; we style them as disabled anyway.
+    &:disabled,
+    &[readonly] {
+        background-color: $input-bg-disabled;
+
+        // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
+        opacity: 1;
+    }
+    &:disabled {
+        cursor: disabled;
+    }
+}
+
+
+//
+// Floating placeholder labels
+//
+.form-label {
+    position: absolute;
+    top: $input-padding-x;
+    left: $input-padding-y;
+    transition: .15s ease-out;
+    user-select: none;
+
+    // style like placeholder
+    font-family: $input-font;
+    font-weight: $input-font-weight;
+    font-size: $font-size-base;
+    line-height: $line-height;
+    color: $input-color-placeholder;
+}
+
+.form-control {
+    // the active state
+    &:focus ~ .form-label,
+    &:valid:not(.is-empty) ~ .form-label,
+    &:invalid:not(.is-empty) ~ .form-label,
+    &.parsley-error ~ .form-label,
+    &.parsley-success ~ .form-label {
+        transform: translate3d(0, -1.5rem, 0) scale(.75);
+        transform-origin: left top;
+    }
+}
+
+
+//
+// Form groups
+//
+.form-group {
+    margin-bottom: ($spacer * 2);
+    position: relative;
+    // make room for floating labels
+    margin-top: $spacer;
+}
+
+
+//
+// Form Validation States
+//
+.form-control {
+
+    // Success style
+    &:valid:not(.is-empty),
+    &.parsley-success {
+        &,
+        &:focus {
+            border-color: $brand-success;
+        }
+    }
+
+    // Error style
+    &:invalid:not(.is-empty),
+    &.parsley-error {
+        &,
+        &:focus {
+            border-color: $brand-danger;
+            color: $brand-danger;
+        }
+    }
+}
+
+
+//
+// Error messages
+//
+.form-group,
+.input-group { position: relative; }
+
+.parsley-errors-list {
+    @extend .list-unstyled;
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    font-size: $font-size-sm;
+    color: $brand-danger;
+    z-index: -1;
+
+    &.filled {
+        animation: errors-list-show .2s $timing-bounce forwards;
+    }
+}
+
+@keyframes errors-list-show {
+    from { transform: translate3d(0,0,0); }
+    to   { transform: translate3d(0,( $font-size-sm + ($spacer / 4)),0); }
+}

_src/_assets/styles/bigchain/_mixins.scss

@@ -3,3 +3,5 @@
 // ---
 // bigchain.io
 //
+
+@import "_mixins/_buttons";

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

@@ -0,0 +1,75 @@
+//
+// Button variants
+//
+@mixin button-variant($color, $background, $border) {
+    $active-background: darken($background, 5%);
+    $active-border: darken($border, 12%);
+    color: $color !important;
+    background-color: $background;
+    border-color: $border;
+
+    &:hover,
+    &:focus,
+    &.focus {
+        color: $color !important;
+        background-color: $active-background;
+        border-color: $active-border;
+    }
+    &:active,
+    &.active {
+        color: $color !important;
+        background-color: $active-background;
+        border-color: $active-border;
+
+        // Remove the gradient for the pressed/active state
+        background-image: none;
+
+        &:hover,
+        &:focus,
+        &.focus {
+            color: $color !important;
+            background-color: darken($background, 17%);
+            border-color: darken($border, 25%);
+        }
+    }
+    &.disabled,
+    &:disabled {
+        &:focus,
+        &.focus {
+            background-color: $background;
+            border-color: $border;
+        }
+    }
+}
+@mixin button-outline-variant($color) {
+    color: $color;
+    background-image: none;
+    background-color: transparent;
+    border-color: $color;
+
+    &:hover,
+    &:focus,
+    &.focus,
+    &:active,
+    &.active {
+        color: #fff;
+        background-color: $color;
+        border-color: $color;
+    }
+
+    &.disabled,
+    &:disabled {
+        &:focus,
+        &.focus {
+            border-color: lighten($color, 20%);
+        }
+    }
+}
+
+// Button sizes
+@mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
+    padding: $padding-y $padding-x;
+    font-size: $font-size;
+    line-height: $line-height;
+    border-radius: $border-radius;
+}

_src/_assets/styles/bigchain/_sections.scss

@@ -1,20 +1,29 @@
 
 .section {
-    padding-top: ($line-height-computed * 2);
+    padding-top: ($spacer * 2);
-    padding-bottom: ($line-height-computed * 2);
+    padding-bottom: ($spacer * 2);
+    min-height: 420px;
 
     // use this so animated elements coming in from outside of screen
     // don't affect layout
     overflow: hidden;
 
+    // vertically center everything
+    display: flex;
+    align-items: center;
+
+    .row { flex: 1 }
+
     @media ($screen-sm) {
-        padding-top: ($line-height-computed * 3);
+        padding-top: ($spacer * 3);
-        padding-bottom: ($line-height-computed * 3);
+        padding-bottom: ($spacer * 3);
     }
 }
 
 .section-title,
 .section-description {
+    text-align: center;
+    
     @media ($screen-sm) {
         max-width: 100%;
         margin-left: auto;
@@ -25,7 +34,7 @@
 .section-title {
     font-size: $font-size-h3;
     margin-top: 0;
-    margin-bottom: $line-height-computed;
+    margin-bottom: $spacer;
 
     @media ($screen-sm) {
         font-size: $font-size-h2;
@@ -37,12 +46,12 @@
     margin-bottom: 0;
 
     + .section-description {
-        margin-top: $line-height-computed;
+        margin-top: $spacer;
     }
 }
 
 .section-actions {
-    margin-top: $line-height-computed;
+    margin-top: $spacer;
 
     .btn {
         margin-left: 5px;

_src/_assets/styles/bigchain/_typography.scss

@@ -14,7 +14,7 @@ body {
     font-family: $font-family-base;
     font-size: $font-size-base;
     font-weight: $font-weight-base;
-    line-height: $line-height-base;
+    line-height: $line-height;
     color: $text-color;
     background-color: $body-bg;
 
@@ -49,7 +49,6 @@ a {
     &:hover,
     &:focus {
         color: $link-hover-color;
-        text-decoration: underline;
     }
 
     &:active {}
@@ -74,16 +73,16 @@ h1, h2, h3, h4, h5, h6,
 h1, .h1,
 h2, .h2,
 h3, .h3 {
-    margin-top: ($line-height-computed * 2);
+    margin-top: ($spacer * 2);
-    margin-bottom: $line-height-computed;
+    margin-bottom: $spacer;
 }
 
 h4, .h4,
 h5, .h5,
 h6, .h6 {
     color: $gray;
-    margin-top: $line-height-computed;
+    margin-top: $spacer;
-    margin-bottom: ($line-height-computed / 2);
+    margin-bottom: ($spacer / 2);
 }
 
 h1, .h1 { font-size: $font-size-h1; }
@@ -98,7 +97,7 @@ h6, .h6 { font-size: $font-size-h6; }
 // Body text
 //
 p {
-    margin: 0 0 ($line-height-computed / 2);
+    margin: 0 0 ($spacer / 2);
 }
 
 
@@ -107,17 +106,17 @@ p {
 //
 small,
 .small {
-    font-size: floor((100% * $font-size-small / $font-size-base));
+    font-size: floor((100% * $font-size-sm / $font-size-base));
     font-weight: $font-weight-normal;
 }
 
 .mini {
-    font-size: floor((100% * $font-size-mini / $font-size-base));
+    font-size: floor((100% * $font-size-xs / $font-size-base));
     font-weight: $font-weight-normal;
 }
 
 .large {
-    font-size: floor((100% * $font-size-large / $font-size-base));
+    font-size: floor((100% * $font-size-lg / $font-size-base));
 }
 
 strong,
@@ -144,13 +143,13 @@ strong,
 // Unordered and Ordered lists
 ul,
 ol {
-    margin-top: $line-height-computed;
+    margin-top: $spacer;
-    margin-bottom: $line-height-computed;
+    margin-bottom: $spacer;
-    padding-left: ($line-height-computed * 2);
+    padding-left: ($spacer * 2);
 
     li {
-        margin-bottom: ($line-height-computed / 2);
+        margin-bottom: ($spacer / 2);
-        padding-left: ($line-height-computed / 2);
+        padding-left: ($spacer / 2);
     }
     ul,
     ol {
@@ -198,9 +197,9 @@ ul {
 blockquote {
     border-left: 3px solid $gray-lighter;
     margin-left: 0;
-    margin-top: $line-height-computed;
+    margin-top: $spacer;
-    margin-bottom: $line-height-computed;
+    margin-bottom: $spacer;
-    padding: ($line-height-computed/2) $line-height-computed;
+    padding: ($spacer/2) $spacer;
     color: $gray;
     font-style: italic;
 
@@ -220,9 +219,9 @@ cite {
 
 // Addresses
 address {
-    margin-bottom: $line-height-computed;
+    margin-bottom: $spacer;
     font-style: normal;
-    line-height: $line-height-base;
+    line-height: $line-height;
 }
 
 

_src/_assets/styles/bigchain/_variables.scss

@@ -40,19 +40,18 @@ $font-weight-base:          $font-weight-light !default;
 $font-size-root:            16px !default;
 
 $font-size-base:            1rem !default;
-$font-size-large:           ceil(($font-size-base * 1.25)) !default;
+$font-size-lg:              ceil(($font-size-base * 1.25)) !default;
-$font-size-small:           ceil(($font-size-base * 0.875)) !default;
+$font-size-sm:              ceil(($font-size-base * 0.875)) !default;
-$font-size-mini:            ceil(($font-size-base * 0.75)) !default;
+$font-size-xs:              ceil(($font-size-base * 0.75)) !default;
 
-$font-size-h1:              floor(($font-size-base * 2.6)) !default;
+$font-size-h1:              3rem !default;
-$font-size-h2:              floor(($font-size-base * 2.25)) !default;
+$font-size-h2:              2.5rem !default;
-$font-size-h3:              ceil(($font-size-base * 1.7)) !default;
+$font-size-h3:              2rem !default;
-$font-size-h4:              ceil(($font-size-base * 1.25)) !default;
+$font-size-h4:              1.5rem !default;
 $font-size-h5:              $font-size-base !default;
-$font-size-h6:              ceil(($font-size-base * 0.85)) !default;
+$font-size-h6:              0.85rem !default;
 
-$line-height-base:          1.4 !default;
+$line-height:               1.5 !default;
-$line-height-computed:      floor(($font-size-base * $line-height-base)) !default;
 
 $headings-font-family:      $font-family-fira !default;
 $headings-font-weight:      $font-weight-light !default;
@@ -73,7 +72,7 @@ $link-hover-color:          darken($link-color, 15%) !default;
 //
 // Grid
 //
-$gutter-space:              4% !default;
+$gutter-space:              2rem !default;
 
 
 //
@@ -86,3 +85,83 @@ $screen-lg-min:             87.500em !default;
 $screen-sm:                 'min-width: #{$screen-sm-min}';
 $screen-md:                 'min-width: #{$screen-md-min}';
 $screen-lg:                 'min-width: #{$screen-lg-min}';
+
+
+//
+// Components
+//
+$spacer:                 1rem !default;
+$line-height-lg:         (4 / 3) !default;
+$line-height-sm:         1.5 !default;
+
+$border-radius:          .15rem !default;
+$border-radius-lg:       .2rem !default;
+$border-radius-sm:       .1rem !default;
+
+$component-active-color: #fff !default;
+$component-active-bg:    $brand-primary !default;
+
+
+//
+// Buttons
+//
+$btn-padding-x:                  1.5rem !default;
+$btn-padding-y:                  .375rem !default;
+$btn-font-weight:                $font-weight-light !default;
+
+$btn-primary-color:              #fff !default;
+$btn-primary-bg:                 $brand-primary !default;
+$btn-primary-border:             $btn-primary-bg !default;
+
+$btn-secondary-color:            $gray-dark !default;
+$btn-secondary-bg:               #fff !default;
+$btn-secondary-border:           #fff !default;
+
+$btn-info-color:                 #fff !default;
+$btn-info-bg:                    $brand-info !default;
+$btn-info-border:                $btn-info-bg !default;
+
+$btn-success-color:              #fff !default;
+$btn-success-bg:                 $brand-success !default;
+$btn-success-border:             $btn-success-bg !default;
+
+$btn-warning-color:              #fff !default;
+$btn-warning-bg:                 $brand-warning !default;
+$btn-warning-border:             $btn-warning-bg !default;
+
+$btn-danger-color:               #fff !default;
+$btn-danger-bg:                  $brand-danger !default;
+$btn-danger-border:              $btn-danger-bg !default;
+
+$btn-link-disabled-color:        $gray-light !default;
+
+$btn-padding-x-sm:               .75rem !default;
+$btn-padding-y-sm:               .25rem !default;
+
+$btn-padding-x-lg:               1.25rem !default;
+$btn-padding-y-lg:               .75rem !default;
+
+// Allows for customizing button radius independently from global border radius
+$btn-border-radius:              $border-radius !default;
+$btn-border-radius-lg:           $border-radius-lg !default;
+$btn-border-radius-sm:           $border-radius-sm !default;
+
+//
+// Forms
+//
+$input-padding-x:                .5rem !default;
+$input-padding-y:                0 !default;
+
+$input-bg:                       rgba(255,255,255,.1) !default;
+$input-bg-disabled:              $gray-lighter !default;
+
+$input-color:                    $gray !default;
+$input-border-color:             #ccc !default;
+
+$input-border-focus:             #66afe9 !default;
+$input-box-shadow-focus:         rgba(102,175,233,.6) !default;
+
+$input-color-placeholder:        #999 !default;
+
+$input-font:                     $font-family-avenir !default;
+$input-font-weight:              $font-weight-light !default;

_src/_assets/styles/page-front.scss

@@ -3,3 +3,48 @@
 // ---
 // bigchain.io
 //
+
+.hero {
+    text-align: center;
+    overflow: hidden;
+    position: relative;
+
+    // background
+    background: url('../img/photo2.jpg') no-repeat center center;
+    background-size: cover;
+
+    @media ($screen-sm) {
+        height: 85vh;
+        max-height: 680px;
+    }
+
+    .logo {
+        fill-opacity: .7;
+        margin: auto;
+        margin-top: -($spacer * 6);
+        margin-bottom: $spacer;
+        max-width: 31em;
+    }
+
+    .section-title {
+        color: #fff;
+        font-size: $font-size-h1;
+        margin-bottom: ($spacer * 3);
+    }
+}
+
+
+
+.section-benchmarks {
+    text-align: center;
+}
+
+
+
+.section-earlyaccess {
+
+    form {
+        max-width: $screen-sm-min;
+        margin: auto;
+    }
+}

_src/index.html

@@ -4,13 +4,19 @@ layout: base
 front_page: true
 ---
 
-<section class="section">
+<header class="section hero">
     <div class="row">
-        <svg class="logo logo--blue logo--full" aria-labelledby="title">
+        <svg class="logo logo--black logo--full" aria-labelledby="title">
             <title>Logo</title>
             <use xlink:href="/assets/img/sprite.svg#logo"></use>
         </svg>
-        <h1 class="section-title">Bigchain is coming</h1>
+        <h1 class="section-title">Bigchain is coming.</h1>
+        <a href="#earlyaccess" class="btn btn-secondary-outline">Get Early Access</a>
+    </div>
+</header>
+
+<section class="section section-benchmarks background--blue">
+    <div class="row">
         <div class="section-description">
             <div class="grid grid--gutters">
                 <p class="grid__col">100,000 transactions per second and climbing</p>
@@ -21,16 +27,34 @@ front_page: true
     </div>
 </section>
 
-<section class="section background--black">
+<section class="section">
     <div class="row">
         <h1 class="section-title">Whitepaper</h1>
         <p class="section-description">Coming soon</p>
     </div>
 </section>
 
-<section class="section background--blue">
+<section id="earlyaccess" class="section section-earlyaccess background--black">
     <div class="row">
         <h1 class="section-title">Early Access</h1>
         <p class="section-description">For early access and inquiries, enter your contact information below</p>
+
+        <form action="" id="form-earlyaccess" class="js-parsley">
+            <p class="form-group">
+                <input class="form-control" type="text" id="name" name="name">
+                <label class="form-label" for="name">Your Name</label>
+            </p>
+            <p class="form-group">
+                <input class="form-control" type="email" id="email" name="email">
+                <label class="form-label" for="email">Your Email</label>
+            </p>
+            <p class="form-group">
+                <textarea class="form-control" id="comment" name="comment" rows="1"></textarea>
+                <label class="form-label" for="comment">Your Comment (optional)</label>
+            </p>
+            <p class="form-group">
+                <input class="btn btn-secondary" type="submit" value="Send">
+            </p>
+        </form>
     </div>
 </section>