get started terminal section, menu updates, features rename

_src/_assets/styles/bigchain.scss

@@ -32,6 +32,7 @@
 @import 'bigchain/_footer';
 @import 'bigchain/_team';
 @import 'bigchain/_timeline';
+@import 'bigchain/_terminal';
 @import 'bigchain/_utilities';
 
 // Content types

_src/_assets/styles/bigchain/_terminal.scss

@@ -0,0 +1,99 @@
+//
+// Terminal window
+// ---
+// bigchain.io
+//
+
+.terminal {
+    @extend .windowframe;
+    max-width: 100%;
+    width: 100%;
+    background: darken($code-bg, 10%);
+
+    code {
+        padding: $spacer;
+        color:#fdce93;
+        display: block;
+        word-break: break-all;
+        word-wrap: break-word;
+        background: none;
+    }
+
+    code > span {
+        display: block;
+
+        &:before {
+            content: "$";
+            color: $code-bg;
+            margin-right: $spacer;
+        }
+        &.comment {
+            &:before { opacity: 0 }
+        }
+    }
+
+    .comment {
+        color: $gray;
+    }
+}
+
+
+$frame-height:          21px;
+$frame-height-mobile:   ($frame-height / 1.5);
+$frame-border-radius:   $border-radius;
+
+.windowframe {
+    display: inline-block;
+    max-width: 100%;
+    margin-left: auto;
+    margin-right: auto;
+    position: relative;
+    padding-top: $frame-height-mobile;
+    border-radius: $frame-border-radius;
+    overflow: hidden;
+
+    @media (min-width: $screen-sm-min) {
+        padding-top: $frame-height;
+    }
+
+    // title bar
+    &:before {
+        content: "";
+        display: block;
+        width: 100%;
+        height: $frame-height-mobile;
+        border-top-left-radius: $frame-border-radius;
+        border-top-right-radius: $frame-border-radius;
+        background: linear-gradient(to bottom, $gray-dark 0%, $gray-darker 100%);
+        margin-top: -($frame-height-mobile);
+
+        @media (min-width: $screen-sm-min) {
+            height: $frame-height;
+            margin-top: -($frame-height);
+        }
+    }
+
+    // knobs
+    &:after {
+        content: "";
+        width: 6px;
+        height: 6px;
+        position: absolute;
+        left: 6px;
+        top: 4px;
+
+        background: #F55E4A;
+        border-radius: 50%;
+
+        // second & third knob
+        box-shadow: 10px 0 0 #F7CA44, 20px 0 0 #48C54D;
+
+        @media (min-width: $screen-sm-min) {
+            width: 9px;
+            height: 9px;
+            left: 9px;
+            top: 6px;
+            box-shadow: 15px 0 0 #F7CA44, 30px 0 0 #48C54D;
+        }
+    }
+}

_src/_data/menus.yml

@@ -1,13 +1,11 @@
 
 main:
-    - title: Features
+    - title: How it works
       url: /features/
     - title: Whitepaper
       url: /whitepaper/
     - title: Community
       url: /community/
-    - title: Docs
-      url: /docs/
 
 footer:
     - title: About

_src/community.html

@@ -35,12 +35,12 @@ title: Community
 <section class="section section-conduct">
     <div class="row">
         <header class="section-header">
-            <h1 class="section-title">Code of Conduct</h1>
+            <h1 class="section-title">Community Guidelines</h1>
             <p class="section-description">This project is released with a Contributor Code of Conduct. By participating in this project you agree to abide by its terms.</p>
         </header>
 
         <p>
-            <a href="https://github.com/ascribe/bigchain/blob/master/CODE_OF_CONDUCT.md" class="btn btn-primary btn-sm">Read Code of Conduct</a>
+            <a href="https://github.com/ascribe/bigchain/blob/master/CODE_OF_CONDUCT.md" class="btn btn-primary btn-sm">Read Guidelines</a>
         </p>
     </div>
 </section>

_src/features.html

@@ -1,7 +1,7 @@
 ---
 layout: page
 
-title: Features
+title: How it works
 ---
 
 <section class="section section-benefits">

_src/index.html

@@ -43,30 +43,45 @@ hero_video_name: northern-light
     </div>
 </section>
 
-<section class="section section-suitable background--darker">
+<section class="section section-getstarted background--darker">
-    <div class="row">
+    <div class="row row--wide">
         <header class="section-header">
-            <h1 class="section-title">Built for</h1>
+            <h1 class="section-title">Get started</h1>
+            <h1 class="section-description">Just clone and run</h1>
         </header>
 
-        <div class="grid grid--full grid-small--fit grid--gutters text-center">
+        <div class="grid grid--gutters grid--full grid-medium--columns grid--center">
-            <p class="grid__col">
+            <div class="grid__col grid__col--2">
-                Blockchain companies looking to scale or serve their clients
+                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus temporibus nostrum, omnis non dolores repellat! Harum delectus, dolores.</p>
-            </p>
+                <p><a href="">Read documentation</a></p>
-            <p class="grid__col">
+            </div>
-                Companies experimenting with blockchain technologies
+            <div class="grid__col grid__col--4">
-            </p>
+                <figure class="terminal highlight">
-            <p class="grid__col">
+                    <code>
-                Cloud platforms wanting to deploy Blockchain as a Service
+                        <span class="comment"># clone the repo</span>
-            </p>
+                        <span><span class="ne">git</span> clone <span class="cp">git@github.com:bigchaindb/bigchaindb.git</span></span>
+                        <span><span class="ne">cd</span> bigchaindb/</span>
+                        <span class="comment"># start the database</span>
+                        <span><span class="ne">rethinkdb</span></span>
+                        <span class="comment"># install dependencies</span>
+                        <span><span class="ne">pip</span> install -r requirements.txt && <span class="ne">pip</span> install -e .</span>
+                        <span class="comment"># initialize bigchain</span>
+                        <span><span class="ne">bigchain</span> init</span>
+                    </code>
+                </figure>
+            </div>
         </div>
+
+
+
     </div>
 </section>
 
-<section class="section section-whitepaper">
+<section class="section section-whitepaper background--photo">
     <div class="row">
         <header class="section-header">
             <h1 class="section-title">Whitepaper</h1>
+            <p class="section-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est quisquam doloremque nam quia, voluptate velit nihil</p>
         </header>
 
         <a class="btn btn-primary" href="/whitepaper/">
@@ -77,14 +92,3 @@ hero_video_name: northern-light
         </a>
     </div>
 </section>
-
-<section id="earlyaccess" class="section section-earlyaccess background--photo">
-    <div class="row">
-        <header class="section-header">
-            <h1 class="section-title">Sign Up for Early Access</h1>
-            <p class="section-description">For early access and inquiries, enter your contact information below. A member of our team will contact you.</p>
-        </header>
-
-        {% include/form-earlyaccess.html %}
-    </div>
-</section>