Use Cases section (#103)

_config.yml

@@ -60,6 +60,14 @@ source:                 ./_src
 destination:            ./_dist
 
 
+# Jekyll native collections
+# --------------------
+collections:
+    usecases:
+        output: true
+        permalink: /:collection/:path/
+
+
 # Plugins
 # --------------------
 gems:

_src/_assets/images/icon-industry-energy.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="43" height="61" viewBox="0 0 43 61">
+  <g transform="translate(1.901 .502)">
+    <path stroke="currentColor" d="M0 20.4921767L40.0433839 20.4921767M36.0390456 20.4921767L36.0390456 40.5159962C36.0390456 44.9212365 32.435141 48.525524 28.0303688 48.525524L12.0130152 48.525524C7.60824295 48.525524 4.00433839 44.9212365 4.00433839 40.5159962L4.00433839 20.4921767"/>
+    <polygon points="26.028 54.533 14.015 54.533 14.015 48.526 26.028 48.526"/>
+    <path d="M20.021692 54.5326699L20.021692 58.5374338M10.010846 20.4921767L10.010846.468357139M30.032538 20.4921767L30.032538.468357139"/>
+  </g>
+</svg>

_src/_assets/images/icon-industry-finance.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="61" height="61" viewBox="0 0 61 61">
+  <g transform="translate(1.806 1.072)">
+    <path stroke="currentColor" d="M58.0629067 50.527906C58.0629067 53.317224 54.8424176 56.5350518 52.0563991 56.5350518L6.00650759 56.5350518C3.21848698 56.5350518 0 53.317224 0 50.527906L0 6.475503C0 3.68818732 3.21848698.468357139 6.00650759.468357139L52.0563991.468357139C54.8424176.468357139 58.0629067 3.68818732 58.0629067 6.475503L58.0629067 50.527906 58.0629067 50.527906zM6.00650759 56.5350518L6.00650759 58.5374338M52.0563991 56.5350518L52.0563991 58.5374338"/>
+    <path d="M8.00867679 40.5159962L8.00867679 43.5195691C8.00867679 46.5231421 10.010846 48.525524 13.0140998 48.525524L45.0488069 48.525524C48.0520607 48.525524 50.0542299 46.5231421 50.0542299 43.5195691L50.0542299 13.4838398C50.0542299 10.4802669 48.0520607 8.47788495 45.0488069 8.47788495L13.0140998 8.47788495C10.010846 8.47788495 8.00867679 10.4802669 8.00867679 13.4838398L8.00867679 16.4874128M8.00867679 24.4969406L8.00867679 32.5064684"/>
+    <polygon points="6.007 24.497 10.011 24.497 10.011 16.488 6.007 16.488"/>
+    <polygon points="6.007 40.516 10.011 40.516 10.011 32.507 6.007 32.507"/>
+    <path d="M18.0195228 28.5017045L24.0260304 28.5017045M21.5370337 36.9971103L25.7856368 32.749057M30.032538 40.5159962L30.032538 34.5088503M38.5271412 36.9971103L34.2795393 32.749057M42.0455531 28.5017045L36.0390456 28.5017045M38.5261401 20.0061986L34.2805403 24.2542519M30.0315369 16.4883138L30.032538 22.4944585M21.5370337 20.0071998L25.7856368 24.2542519M36.0390456 28.5017045C36.0390456 31.8186502 33.3491312 34.5088503 30.032538 34.5088503 26.7159447 34.5088503 24.0260304 31.8186502 24.0260304 28.5017045 24.0260304 25.1847588 26.7159447 22.4945586 30.032538 22.4945586 33.3491312 22.4945586 36.0390456 25.1847588 36.0390456 28.5017045L36.0390456 28.5017045z"/>
+    <path d="M42.0455531,28.5017045 C42.0455531,35.1365971 36.6667256,40.5159962 30.032538,40.5159962 C23.3983503,40.5159962 18.0195228,35.1365971 18.0195228,28.5017045 C18.0195228,21.8668119 23.3983503,16.4874128 30.032538,16.4874128 C36.6667256,16.4874128 42.0455531,21.8668119 42.0455531,28.5017045 L42.0455531,28.5017045 Z"/>
+  </g>
+</svg>

_src/_assets/images/icon-industry-government.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="59" height="61" viewBox="0 0 59 61">
+  <g transform="translate(1.938 1.215)">
+    <path stroke="currentColor" d="M0 58.5374338L56.0607375 58.5374338M0 54.5326699L56.0607375 54.5326699M42.0455531 50.527906L54.0585683 50.527906M42.0455531 28.5017045L54.0585683 28.5017045" />
+    <path d="M44.0477223 50.527906L44.0477223 28.5017045M52.0563991 50.527906L52.0563991 28.5017045"/>
+    <path d="M2.0021692 50.527906L14.0151844 50.527906M2.0021692 28.5017045L14.0151844 28.5017045" />
+    <path d="M4.00433839 50.527906L4.00433839 28.5017045M12.0130152 50.527906L12.0130152 28.5017045"/>
+    <path d="M22.0238612 50.527906L34.0368764 50.527906M22.0238612 28.5017045L34.0368764 28.5017045" />
+    <path d="M24.0260304 50.527906L24.0260304 28.5017045M32.0347072 50.527906L32.0347072 28.5017045"/>
+    <polygon stroke="currentColor" points="0 24.497 56.061 24.497 28.03 .468" />
+  </g>
+</svg>

_src/_assets/images/icon-industry-identity.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="61" height="56" viewBox="0 0 61 56">
+  <g transform="translate(1.658 1.939)">
+    <polyline stroke="currentColor" points="40.043 12.483 58.063 12.483 58.063 52.53 0 52.53 0 12.483 18.02 12.483"/>
+    <path d="M0 22.4945586L58.0629067 22.4945586M30.032538 30.5040864L41.0444685 30.5040864M30.032538 36.5112323L45.0488069 36.5112323M30.032538 42.5183782L43.0466377 42.5183782M29.0314534-.315275039C25.5466779-.315275039 22.719615 2.51108709 22.0238612 5.99623288L22.0238612 16.4877131 36.0390456 16.4877131 36.0390456 5.99623288C35.3432918 2.51108709 32.5162289-.315275039 29.0314534-.315275039L29.0314534-.315275039zM20.1956805 33.7686699C20.1956805 35.8601578 18.5008443 37.5561753 16.4085774 37.5561753 14.3173117 37.5561753 12.6224755 35.8601578 12.6224755 33.7686699 12.6224755 31.6771819 14.3173117 29.9821656 16.4085774 29.9821656 18.5008443 29.9821656 20.1956805 31.6771819 20.1956805 33.7686699L20.1956805 33.7686699z"/>
+    <path d="M22.7199153,46.5231421 L10.0982407,46.5231421 C10.0982407,40.9475095 12.9233014,37.5554745 16.409078,37.5554745 C19.8948546,37.5554745 22.7199153,40.9475095 22.7199153,46.5231421 L22.7199153,46.5231421 Z"/>
+  </g>
+</svg>

_src/_assets/images/icon-industry-ip.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="51" height="61" viewBox="0 0 51 61">
+  <g transform="translate(1.016 .648)">
+    <g stroke="currentColor">
+        <polyline points="22.393 52.53 0 52.53 0 .468 28.03 .468 40.043 12.483 40.043 17.489" />
+        <polyline points="28.03 .468 28.03 12.483 40.043 12.483"/>
+    </g>
+    <g transform="translate(27 23)">
+      <polyline points="19.05 18.735 19.05 35.537 11.041 29.53 3.033 35.537 3.033 19.32"/>
+      <path d="M15.0455531,11.5088503 C15.0455531,13.7204812 13.2516095,15.5136142 11.0412148,15.5136142 C8.83081996,15.5136142 7.03687636,13.7204812 7.03687636,11.5088503 C7.03687636,9.29621828 8.83081996,7.50408644 11.0412148,7.50408644 C13.2516095,7.50408644 15.0455531,9.29621828 15.0455531,11.5088503 L15.0455531,11.5088503 Z" />
+      <path d="M19.9331485,11.5518014 C21.1985194,9.97392446 21.4507927,7.7282531 20.3786311,5.87104383 C19.3064695,4.01583696 17.2342244,3.10875793 15.2370606,3.41612356 C14.5042667,1.53188214 12.6822927,0.190286234 10.5409728,0.190286234 C8.39664957,0.190286234 6.57567668,1.53188214 5.84388384,3.41712475 C3.84571898,3.10975912 1.77347386,4.01583696 0.703314425,5.87104383 C-0.36884718,7.7282531 -0.117574946,9.97592684 1.1467949,11.5518014 C-0.117574946,13.1296784 -0.36884718,15.376351 0.703314425,17.232559 C1.77347386,19.0897683 3.84672007,19.9958461 5.84488492,19.6884805 C6.57767885,21.5727219 8.39765065,22.9143178 10.5409728,22.9143178 C12.6842949,22.9143178 14.5042667,21.5727219 15.2380617,19.6874793 C17.2362266,19.9948449 19.3064695,19.0897683 20.3786311,17.232559 C21.4507927,15.376351 21.1985194,13.127676 19.9331485,11.5518014 L19.9331485,11.5518014 Z" />
+    </g>
+  </g>
+</svg>

_src/_assets/images/icon-industry-supplychain.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="61" height="47" viewBox="0 0 61 47">
+  <g transform="matrix(-1 0 0 1 59.088 .946)">
+    <path d="M54.0585683 38.5136142C54.0585683 41.8315611 51.3696551 44.5207601 48.0520607 44.5207601 44.7314631 44.5207601 42.0455531 41.8315611 42.0455531 38.5136142 42.0455531 35.1966685 44.7314631 32.5064684 48.0520607 32.5064684 51.3696551 32.5064684 54.0585683 35.1966685 54.0585683 38.5136142L54.0585683 38.5136142zM26.0281996 38.5136142C26.0281996 41.8315611 23.3392863 44.5207601 20.021692 44.5207601 16.7010944 44.5207601 14.0151844 41.8315611 14.0151844 38.5136142 14.0151844 35.1966685 16.7010944 32.5064684 20.021692 32.5064684 23.3392863 32.5064684 26.0281996 35.1966685 26.0281996 38.5136142L26.0281996 38.5136142z"/>
+    <polyline stroke="currentColor" points="20.022 26.499 20.022 .468 58.063 .468 58.063 37.512"/>
+    <path stroke="currentColor" d="M0 40.5159962L0 18.4897947C0 14.0845544 3.60390456 10.4802669 8.00867679 10.4802669L20.021692 10.4802669M30.032538 38.5136142L38.0412148 38.5136142M0 40.5159962L10.010846 40.5159962"/>
+    <path d="M6.00650759 24.4969406L6.00650759 19.4909857C6.00650759 17.8400218 7.3579718 16.4874128 9.00976139 16.4874128L14.0151844 16.4874128M0 34.5088503L10.010846 34.5088503"/>
+  </g>
+</svg>

_src/_assets/images/logo-resonate.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="681" height="136" viewBox="0 0 681 136">
+  <g fill-rule="evenodd">
+    <path d="M42 37.8C33.3 37.8 25.35 42 19.8 49.8L19.65 49.8 19.65 39 0 39 0 112.2 19.65 112.2 19.65 78.15C19.65 67.35 26.25 59.1 38.4 59.1 39.45 59.1 41.55 59.1 43.5 59.25L43.5 37.95C43.2 37.8 42.6 37.8 42 37.8zM118.8 74.85C118.8 53.4 104.4 37.8 82.95 37.8 62.1 37.8 46.65 53.25 46.65 75.45 46.65 98.4 62.85 113.4 84.3 113.4 99 113.4 109.65 107.55 115.95 99.6L103.2 87.75C99.15 92.7 93.45 96.15 85.65 96 76.2 96 69.3 90.6 66.9 81.9L118.35 81.9C118.8 80.7 118.8 77.25 118.8 74.85zM83.55 55.05C92.1 55.05 97.35 60.15 99.3 67.8L67.05 67.8C69.3 59.4 75.6 55.05 83.55 55.05zM158.8 113.4C178 113.4 187.3 103.65 187.3 90.6 187.3 76.2 178 72.75 162.1 66.9 154.9 64.2 151 62.1 151 59.1 151 55.2 155.05 53.55 158.2 53.55 163.6 53.55 170.05 55.95 175.75 61.35L185.2 46.95C176.95 40.5 168.7 37.8 158.5 37.8 143.5 37.8 132.1 46.5 132.1 59.7 132.1 73.8 142.6 79.5 154.6 83.55 164.2 86.55 167.95 88.2 167.95 91.65 167.95 95.25 164.65 97.65 158.95 97.65 151 97.65 144.7 94.8 138.7 89.1L129.1 102.75C137.2 109.65 147.1 113.4 158.8 113.4zM225.4 135.75L239.95 129.3C230.65 111.45 225.1 90.6 225.1 67.95 225.1 45.6 230.5 24 240.1 6.6L225.7 0C213.85 17.85 207.25 42 207.25 67.95 207.25 94.35 213.85 117.6 225.4 135.75zM340.15 135.75C351.7 117.6 358.3 94.35 358.3 67.95 358.3 42 351.7 17.85 339.85 0L325.45 6.6C335.05 24 340.45 45.6 340.45 67.95 340.45 90.6 334.9 111.45 325.6 129.3L340.15 135.75zM416.05 37.8C407.05 37.8 398.65 41.4 392.65 48.45L392.35 48.45 392.35 39 372.7 39 372.7 112.2 392.35 112.2 392.35 75.3C392.35 62.25 399.1 55.35 409 55.35 418.15 55.35 423.1 59.7 423.1 73.65L423.1 112.2 442.75 112.2 442.75 68.7C442.75 46.2 431.8 37.8 416.05 37.8zM511.05 39L511.05 47.25 510.6 47.25C505.35 40.95 497.85 37.8 489.15 37.8 469.5 37.8 454.65 53.55 454.65 75.75 454.65 98.4 469.35 113.4 489.6 113.4 499.05 113.4 506.55 109.8 511.5 103.35L511.95 103.35 511.95 112.2 530.55 112.2 530.55 39 511.05 39zM493.2 95.85C482.25 95.85 474.45 87.75 474.45 75.9 474.45 63.3 482.85 55.35 493.35 55.35 504 55.35 511.8 64.2 511.8 75.9 511.8 87.9 503.4 95.85 493.2 95.85zM580.15 113.4C590.05 113.4 594.85 111.45 599.65 108.9L594.55 93.15C591.25 94.8 587.65 95.7 585.25 95.7 580.75 95.7 578.8 92.7 578.8 86.4L578.8 55.2 598.75 55.2 598.75 39 578.8 39 578.8 12.9 559.3 15 559.3 39 550.6 39 550.6 55.2 559.3 55.2 559.3 89.1C559.3 105.6 567.55 113.4 580.15 113.4zM680.35 74.85C680.35 53.4 665.95 37.8 644.5 37.8 623.65 37.8 608.2 53.25 608.2 75.45 608.2 98.4 624.4 113.4 645.85 113.4 660.55 113.4 671.2 107.55 677.5 99.6L664.75 87.75C660.7 92.7 655 96.15 647.2 96 637.75 96 630.85 90.6 628.45 81.9L679.9 81.9C680.35 80.7 680.35 77.25 680.35 74.85zM645.1 55.05C653.65 55.05 658.9 60.15 660.85 67.8L628.6 67.8C630.85 59.4 637.15 55.05 645.1 55.05z"/>
+  </g>
+</svg>

_src/_assets/javascripts/bigchain/smoothscroll.js

@@ -41,7 +41,7 @@ document.addEventListener("DOMContentLoaded", function() {
                         g = c.get("start"),
                         h = c.get("delta");
                     e.scrollTop = Math.round(h * (-Math.pow(2, -10 * f / a) + 1) + g);
-                    d.get("elapsed") < d.get("duration") ? requestAnimationFrame(l) : (history.pushState(null, null, b), e.scrollTop = c.get("start") + c.get("delta"))
+                    d.get("elapsed") < d.get("duration") ? requestAnimationFrame(l) : (null, null, b, e.scrollTop = c.get("start") + c.get("delta"))
                 })
             }
         },

_src/_assets/javascripts/page-usecases.js

@@ -0,0 +1 @@
+//=include bigchain/smoothscroll.js

_src/_assets/styles/_page-usecases.scss

@@ -0,0 +1,221 @@
+.page-usecases {
+
+}
+
+.section--intro {
+    .section-header {
+        margin-bottom: 0;
+    }
+
+    .section-description {
+        margin-bottom: $spacer * 2;
+        padding-bottom: $spacer * 2;
+        border-bottom: 2px solid lighten($gray-dark, 5%);
+    }
+}
+
+//
+// Industry section
+//
+.section--industry {
+
+    .section-header {
+        margin-bottom: $spacer * 2;
+
+        .icon {
+            width: 48px;
+            height: 48px;
+            margin-bottom: $spacer / 3;
+        }
+    }
+
+    .section-title,
+    .section-description {
+        text-align: left;
+    }
+
+    .section-title {
+        @extend .h3;
+        margin-top: 0;
+        margin-bottom: $spacer * 2;
+
+        &:after {
+            margin-left: 0;
+        }
+    }
+
+    &:nth-child(even) {
+        @extend .background--darker;
+
+        .featuredusecase {
+            border-top-color: $gray-dark;
+        }
+    }
+}
+
+.featuredusecase {
+    border-top: 2px solid lighten($gray-dark, 5%);
+    padding-top: $spacer * 2;
+    margin-top: $spacer * 2;
+
+    @media ($screen-sm) {
+        display: flex;
+        justify-content: space-between;
+    }
+}
+
+.featuredusecase__logo {
+    box-shadow: none;
+    transition: .2s ease-out;
+    display: block;
+
+    &:hover,
+    &:focus {
+        background: none;
+
+        svg {
+            fill: $brand-main-green;
+        }
+    }
+
+    @media ($screen-sm) {
+        flex: 0 0 20%;
+        order: 2;
+        margin-left: 5%;
+    }
+
+    img,
+    svg {
+        width: 80px;
+        max-width: 80px;
+        max-height: 60px;
+        height: auto;
+        margin-bottom: $spacer / 2;
+        opacity: .6;
+        align-self: flex-start; // work around stretched images flexbox bug
+        fill: $brand-main-blue-light;
+        transition: .2s ease-out;
+
+        @media ($screen-sm) {
+            width: 120px;
+            max-width: 120px;
+            max-height: 90px;
+            height: auto;
+            margin-bottom: 0;
+        }
+    }
+}
+
+.featuredusecase__content {
+    flex: 0 0 75%;
+}
+
+.featuredusecase__title {
+    @extend .h4;
+    margin-top: 0;
+    margin-bottom: $spacer;
+
+    a {
+        color: $brand-main-green;
+        box-shadow: none;
+
+        &:hover,
+        &:focus {
+            color: #fff;
+        }
+    }
+}
+
+
+//
+// Single use case page
+//
+.content--usecase {
+    padding-top: $spacer * 4;
+    padding-bottom: 0;
+
+    > .row {
+        > h2 {
+            @extend .h3;
+
+            &:first-child {
+                margin-top: 0;
+            }
+        }
+    }
+
+    .testimonial {
+        @extend .large;
+        margin: $spacer * 4 auto;
+
+        @media ($screen-sm) {
+            max-width: 66%;
+        }
+    }
+
+    .testimonial__avatar {
+        width: 5rem;
+        height: 5rem;
+        margin-top: $spacer;
+    }
+}
+
+.header--usecase {
+    .header__logo {
+        width: 140px;
+        max-height: 100px;
+        display: block;
+        margin-left: auto;
+        margin-right: auto;
+        margin-bottom: $spacer;
+        fill: #fff;
+    }
+
+    .header__label {
+        display: block;
+        color: $brand-main-blue-light;
+        font-size: $font-size-lg;
+        margin-bottom: $spacer * 2;
+    }
+}
+
+.content__about {
+    margin-top: $spacer * 4;
+    background: $gray-darker;
+    padding-top: $spacer * 3;
+    padding-bottom: $spacer;
+}
+
+.content__about__title {
+    @extend .h4;
+    margin-top: 0;
+    margin-bottom: $spacer;
+}
+
+.actionbar {
+    a {
+        display: block;
+        padding: ($spacer * 2) $spacer;
+        background: $brand-main-green;
+        text-align: center;
+        box-shadow: none;
+        font-family: $btn-font-family;
+        text-transform: uppercase;
+        color: $brand-main-blue-dark;
+
+        &:hover,
+        &:focus {
+            background: lighten($brand-main-green, 5%);
+        }
+
+        &.link-back {
+            background: $brand-main-blue-dark;
+            color: #fff;
+
+            &:hover,
+            &:focus {
+                background: lighten($brand-main-blue-dark, 5%);
+            }
+        }
+    }
+}

_src/_assets/styles/bigchain.scss

@@ -58,6 +58,7 @@
 @import '_page-styleguide';
 @import '_page-about';
 @import '_page-features';
+@import '_page-usecases';
 @import '_page-community';
 @import '_page-contact';
 @import '_page-cla';

_src/_assets/styles/bigchain/_menus.scss

@@ -289,3 +289,18 @@
     height: 30px;
     display: inline-block;
 }
+
+
+.menu--sub {
+    text-align: center;
+    background: $gray-darker;
+
+    .icon {
+        width: 1rem;
+        height: 1rem;
+        vertical-align: baseline;
+        margin-right: $spacer / 6;
+        margin-bottom: -2px;
+        stroke-width: 3px;
+    }
+}

_src/_assets/styles/bigchain/_sections.scss

@@ -42,8 +42,8 @@
     // the bottom line
     &:after {
         content: "";
-        height: 1px;
-        width: 5rem;
+        height: 2px;
+        width: 3rem;
         display: block;
         margin: ($spacer * 2) auto 0 auto;
         background: $gray;

_src/_data/industries.yml

@@ -0,0 +1,20 @@
+
+- name: Intellectual Property
+  description: Blockchain technology helps secure attribution and authorship. It also makes it easy to license work, track usage and provide transparent audit trails for all stakeholders.
+  icon: icon-industry-ip
+  usecase: resonate
+
+- name: Identity
+  description: Blockchain technology gives control back to you. On the internet, siloed, walled gardens lock up your personal data. This means it’s next to impossible to port your data if you want to leave or to gain visibility into what is stored where. Blockchain technology enables sovereign personal data, a new way to manage your identity, medical records, and credentials.
+  icon: icon-industry-identity
+  usecase: recruit-technologies
+
+- name: Supply chain
+  description: Blockchain technologies are trust and transparency machines. This is a feature sorely lacking in global supply chains. Blockchain technology offers the promising of increased transparency and provenance to the global supply chain. In the future, every single product will have a clear record of its history and verifiable authenticity.
+  icon: icon-industry-supplychain
+  usecase: innogy
+
+- name: Government
+  description: Blockchain technology can help to improve the efficiency and services of government. Blockchain technologies can be applied in every area of government – identity services, inland revenue, company formation and land registration. Having transparency in government services offers the promise of reduced corruption, stronger land and property rights, efficient taxation, and sovereign personal identity.
+  icon: icon-industry-government
+  usecase: benben

_src/_data/menus.yml

@@ -1,7 +1,9 @@
 ---
 main:
-    - title: How it works
+    - title: Features
       url: "/features/"
+    - title: Use Cases
+      url: "/usecases/"
     - title: Whitepaper
       url: "/whitepaper/"
     - title: Community

_src/_includes/head.html

@@ -3,8 +3,8 @@
 
     <!-- Dynamic meta title -->
     <title>
-    {% if paginator.previous_page %}
-        Page {{ paginator.page }} &bull; &bull; {{ site.name }}
+    {% if page.layout == 'usecase' %}
+        {{ page.company }} &bull; &bull; {{ page.industry }} &bull; &bull; {{ site.name }}
     {% elsif page.title %}
         {{ page.title }} &bull; &bull; {{ site.name }}
     {% else %}

_src/_includes/opengraph.html

@@ -1,7 +1,9 @@
 <meta content="website" property="og:type">
 <meta content="{{ site.name }}" property="og:site_name">
 
-{% if page.title %}
+{% if page.layout == 'usecase' %}
+    <meta content="{{ page.company }} &bull; &bull; {{ page.industry }} &bull; &bull; {{ site.name }}" property="og:title">
+{% elsif page.title %}
     <meta content="{{ page.title }} &bull; &bull; {{ site.name }}" property="og:title">
 {% else %}
     <meta content="{{ site.name }} &bull; &bull; {{ site.description }}" property="og:title">

_src/_includes/sections/section-cta-features.html

@@ -6,7 +6,7 @@
         </header>
 
         <a class="btn btn-blue" href="/features/">
-            How BigchainDB Works
+            Features
         </a>
     </div>
 </section>

_src/_includes/sections/section-cta.html

@@ -0,0 +1,18 @@
+{% if layout %}
+    {% assign context = layout %}
+{% else %}
+    {% assign context = page %}
+{% endif %}
+
+<section class="section section-cta section-cta--features background--photo text-center">
+    <div class="row">
+        <header class="section-header">
+            <h1 class="section-title">{{ context.cta.title }}</h1>
+            <p class="section-description">{{ context.cta.description }}</p>
+        </header>
+
+        <a class="btn btn-blue" href="/">
+            {{ context.cta.button }}
+        </a>
+    </div>
+</section>

_src/_includes/sections/section-newsletter.html

@@ -4,8 +4,20 @@
 
         <div class="grid grid--full grid-small--half grid--gutters grid--center">
             <div class="grid__col">
-                <h1 class="newsletter__title">Get updates delivered to your inbox</h1>
-                <p class="newsletter__text">No more than one email per month. We're busy too.</p>
+                <h1 class="newsletter__title">
+                    {% if page.newsletter.title %}
+                        {{ page.newsletter.title }}
+                    {% else %}
+                        Get updates delivered to your inbox
+                    {% endif %}
+                </h1>
+                <p class="newsletter__text">
+                    {% if page.newsletter.text %}
+                        {{ page.newsletter.text }}
+                    {% else %}
+                        No more than one email per month. We're busy too.
+                    {% endif %}
+                </p>
             </div>
             <div class="grid__col">
 

_src/_includes/twittercards.html

@@ -2,7 +2,9 @@
 <meta name="twitter:site" content="@{{ site.twitter }}">
 <meta name="twitter:creator" content="@{{ site.twitter }}">
 
-{% if page.title %}
+{% if page.layout == 'usecase' %}
+    <meta name="twitter:title" content="{{ page.company }} &bull; &bull; {{ page.industry }} &bull; &bull; {{ site.name }}">
+{% elsif page.title %}
     <meta name="twitter:title" content="{{ page.title }} &bull; &bull; {{ site.name }}">
 {% else %}
     <meta name="twitter:title" content="{{ site.name }} &bull; &bull; {{ site.description }}">

_src/_layouts/usecase.html

@@ -0,0 +1,91 @@
+---
+layout: base
+
+cta:
+    title: Meet BigchainDB
+    description: The scalable blockchain database
+    button: Get started
+---
+
+<header role="banner" class="header header--usecase" {% if page.header %}style="background-image:url('/assets/img/{{ page.header }}')"{% endif %}>
+
+    {% include menu-main.html %}
+
+    <div class="row">
+        <h1 class="header__title">
+            <span class="header__label">{{ page.industry }}</span>
+            {% if page.bitmaplogo %}
+                <img class="header__logo" src="/assets/img/{{ page.bitmaplogo }}" />
+            {% else %}
+                <svg class="header__logo">
+                    <use xlink:href="/assets/img/sprite.svg#logo-{{ page.slug }}"></use>
+                </svg>
+            {% endif %}
+
+            {{ page.title }}
+        </h1>
+    </div>
+</header>
+
+<section role="main" class="section content content--page content--usecase">
+
+    <div class="row">
+
+        <p class="section-description">{{ page.description }}</p>
+
+        {% if page.quote %}
+            <figure class="testimonial">
+                <blockquote class="testimonial__quote">{{ page.quote.copy }}</blockquote>
+
+                <figcaption class="testimonial__caption">
+                    <img class="testimonial__avatar" src="/assets/img/{{ page.quote.image }}">
+                    <cite class="testimonial__cite">
+                        <span class="testimonial__name">{{ page.quote.name }}</span>
+                        <span class="testimonial__org">{{ page.quote.org }}</span>
+                    </cite>
+                </figcaption>
+            </figure>
+        {% endif %}
+
+        {{ content }}
+
+    </div>
+
+    <aside class="content__about">
+        <div class="row">
+            <div class="grid grid--full grid--gutters grid-small--half grid--top">
+
+                <div class="grid__col">
+                    <h1 class="content__about__title">&nbsp;</h1>
+                    {{ page.about.user | markdownify }}
+                </div>
+
+                <div class="grid__col">
+                    <h1 class="content__about__title">About {{ page.company }}</h1>
+                    {{ page.about.company | markdownify }}
+                </div>
+            </div>
+        </div>
+    </aside>
+
+
+    <aside class="actionbar">
+
+        <div class="grid grid--full grid-small--half grid--top">
+
+            {% if page.fullstudy %}
+            <div class="grid__col">
+                <a href="../{{ page.fullstudy }}" download rel="external">Download case study (pdf)</a>
+            </div>
+            {% endif %}
+
+            <div class="grid__col">
+                <a class="link-back" href="/usecases/">&lt; Back to use cases</a>
+            </div>
+        </div>
+
+    </aside>
+
+</section>
+
+{% include sections/section-cta.html %}

_src/_usecases/government/benben.md

@@ -0,0 +1,54 @@
+---
+layout: usecase
+
+title: Blockchain Powered Land Registry in Ghana with BenBen
+description: BenBen is building a land registry in Ghana to help lock in property rights for citizens.
+header: hero-benben.jpg
+
+quote:
+    copy: BigchainDB allows us to manage land titles and transactions the way we want, something that no other blockchain can do.
+    name: Daniel Bloch
+    org: Co-Founder & COO, BenBen
+    image: daniel-bloch.jpg
+
+company: BenBen
+slug: benben
+industry: Government
+bitmaplogo: logo-benben.png
+
+about:
+    user: "Daniel is the cofounder and COO of BenBen. He was introduced to the blockchain in 2011 while working at Bitbox, one of North America’s first Bitcoin exchanges. From there Daniel cofounded the College Cryptocurrency Network (now the Blockchain Education Network) to fill the educational gap on Blockchain at University campuses. He is based in Accra leading product development, partnerships and client integration at BenBen."
+    company: "BenBen is a team of motivated engineers and innovators dedicated to improving government technology in Ghana. BenBen is a digital land database that leverages blockchain technology to provide fast easy access to trusted land content. Focusing on land and property management, BenBen aims to create a reliable land information and transactions system by coupling the latest in geomatic services with blockchain technology."
+---
+
+## Background
+
+[BenBen](http://benben.com.gh)’s founders, Daniel Bloch and Emmanuel Noah were early true believers in Bitcoin and blockchain technology. Both worked at Bitbox, the second Bitcoin exchange in North America, at its inception while at the University of Michigan in 2013. Daniel also cofounded the Blockchain Education Network.
+
+While attending an event at the University of Kenya, they became aware of the land and property rights issues endemic to much of Africa and focused their efforts on addressing these in Ghana.
+
+## Challenges
+
+Land records are stored in a centralized database with no additional benefits other than being a paper registry. It is virtually impossible to collateralize property rights in Ghana because the paper registry system is unenforceable in court. Because of unenforceability, banks won’t accept land as collateral. This situation leaves millions without the possibility of leveraging their property to get loans and rely on the rule of law for protection – continuing the ongoing cycle of poverty for much of the population.
+
+## Solution
+
+BenBen is creating a top-of-stack land registry and verification platform for financial institutions. This platform captures transactions and verifies the data. BenBen works with financial institutions to update current registries, enable smart transactions and distribute private keys for clients - to allow an automated and trusted property transactions between all parties.
+
+## How BigchainDB is Helping
+
+Using blockchain technology provided by BigchainDB, it’s possible to build a land registry and a history of transactions that can be verified.
+BigchainDB underpins the BenBen land registry in several ways:
+
+- Provides a globally accessible database to store land titles and transactions
+- High capacity and throughput for millions of records
+- Data immutability that brings trust and auditability to the records
+- Query technology that enables quick retrieval transaction histories
+- Interoperability with [IPFS](https://ipfs.io), to store large files and media
+
+BigchainDB facilitated the agile development of the BenBen product - supplying all of the technological and development tools to build the platform.
+
+
+## Looking Ahead
+
+The BenBen team is in conversations with organizations in Nigeria, Mozambique, and Colombia to identify markets where the same system could be launched after Ghana.

_src/_usecases/identity/recruit.md

@@ -0,0 +1,53 @@
+---
+layout: usecase
+
+title: Verified Educational Credentials with Recruit Technologies
+description: Recruit Technologies is building a platform to verify HR credentials.
+
+header: hero-recruit.jpg
+
+quote:
+    copy: "We could have implemented the decentralized technology ourselves with the help of the open source community, but the support and expertise provided by BigchainDB changed the whole process and made it more efficient."
+    name: Takeshi Nanato
+    org: Senior Architect, Recruit Technologies
+    image: takeshi-nanato.jpg
+
+company: Recruit Technologies
+slug: recruit-technologies
+industry: Identity
+
+about:
+    user: "Takeshi Nanato is a Senior Architect at Recruit Technologies Co. Ltd. Residing in Berlin, he focuses on building technical collaborations between Recruit and internet startups and managing and fostering the international entrepreneurship program for young Japanese engineers and developers. He also works in R&D for blockchain technologies and how to adopt the technology mainly to existing B2C services."
+    company: "Founded in 1960, Recruit Holdings Co. is a leading information services and human resources company in Japan. Through a wide range of services, the Recruit Group provides services in a variety of areas, including recruitment advertising, employment placement, staffing, education, housing and real estate, bridal, travel, dining, beauty, automobiles and others. The Recruit Group has more than 30,000 employees and operates all over the world."
+---
+
+## Background
+
+[Recruit Technologies](http://recruit-tech.co.jp) is a Japanese information services and human resources company. Using HR data, Recruit investigated the possibility and practical uses for blockchain in the HR sector. They built a prototype resume authentication database for job seekers and employers.
+
+## Challenges
+
+- Companies can’t easily verify credentials from the flood of applicants
+- Job seekers must upload documents and credentials in manual and time-consuming ways
+- Document fraud (forged, altered, falsified or misleading documents) is hard to detect and increases the risks for employers
+
+## Solution
+
+- A secure, trusted platform that holds applicant credentials
+- A verification process to check HR credentials
+- The ability to easily share credentials with employers
+
+## How BigchainDB is Helping
+
+Using blockchain technology provided by BigchainDB, it’s possible to build a database of applicants and their documents so that credentials can be verified and shared seamlessly, increasing trust amongst all parties and reducing the risks for everyone.
+
+BigchainDB underpins the Recruit platform in several ways:
+
+- Provides a globally accessible database to store applicants and their documents
+- High capacity and throughput for millions of records and documents
+- Interoperability with IPFS, to store large files and media
+- Data immutability that brings trust and auditability to the records
+- Query technology that enables quick retrieval records and documents
+- Reduced security and liability in managing private applicant data
+
+By leveraging BigchainDB’s technology, fraud more easily detectable and manageable on a large scale.

_src/_usecases/ip/resonate.md

@@ -0,0 +1,50 @@
+---
+layout: usecase
+
+title: Own the Music You Stream with Resonate
+description: "Resonate is a music streaming cooperative owned by music makers and the listeners who love them, supported by blockchain technology."
+header: hero-resonate.jpg
+
+quote:
+    copy: "Looking at the Bitcoin blockchain, it was clear it wouldn’t be able to handle Resonate’s use case. We met BigchainDB and realized, oh wait, they’ve solved this problem."
+    name: Peter Harris
+    org: Founder, Resonate
+    image: peter-harris.jpg
+
+company: Resonate
+slug: resonate
+industry: Intellectual Property
+
+about:
+    user: "As a web developer since the 90’s, Peter Harris has built hundreds of sites, working with numerous musicians from struggling artists to mid-level bands and platinum-selling superstars. Simultaneous to his day job as web developer, Peter experimented as a DJ and electronica producer. Finding many web and music publishing platforms lacking, this combination of background and insight is what led to the fundamental features being offered via Resonate."
+    company: "Resonate is the world’s first streaming music cooperative with a totally new listening model called “stream to own.” Only pay for what you play, making a seamless transition from casual listening into becoming a dedicated fan. Resonate is a cooperative owned by the musicians, indie labels, fans and workers that build it."
+---
+
+## Background
+
+[Peter Harris](https://resonate.is/profile/1/), a web developer, an electronic DJ and producer, he has had moments of clarity into seeing the future. In the early days of the web, he became convinced that all content would be distributed through the internet. His second moment of clarity comes with the rise of blockchain.
+
+As both a music creator and fan, he’s always felt that the system was unfair. Control is in the hands of the corporations and labels, who sign artists and then pay a fraction of the proceeds back to the them. Streaming music has only worsened this dynamic. Peter sees the opportunity to give power and control back to the creators and their fans.
+
+## Challenges
+
+- Streaming and downloading business models don’t reward content creators.
+- Corporations and labels enforce rigid contracts that don’t benefit the artists.
+- Musicians and fans are shut out on how platforms run, operate and function.
+
+## Solution
+
+What if users could pay for streaming music knowing that the proceeds go directly to the artists? Resonate is a music streaming cooperative that allows listeners to “pay as you stream” until you own the song. It’s a totally new listening model called “stream to own.” Only pay for what you play, making a seamless transition from casual listening into becoming a dedicated fan. Resonate is a cooperative owned by the musicians, indie labels, fans and workers that build it.
+
+## How BigchainDB is Helping
+
+Using blockchain technology provided by BigchainDB, it’s possible to build a database of artists and songs, track who listens, and set up cost-effective micropayment channels so that artists can be rewarded and listeners can show their love.
+
+BigchainDB underpins [Resonate](https://resonate.is/) in several ways:
+
+- Provides a globally accessible database to store artists, songs, licensing terms and royalty payout rules.
+- Extremely cost-effective micropayment technology that lets artists keep most of the streaming proceeds
+- Fast recording and matching of usage that lets artists get paid in real-time.
+- Supports the [COALA IP](https://www.coalaip.org) protocol, a community-driven standard for licensing intellectual property.
+- Supports [Envoke](https://envoke.org), a consortium of music industry stakeholders.
+- Transparent and trusted usage reports that are auditable.

_src/_usecases/supplychain/innogy.md

@@ -0,0 +1,56 @@
+---
+layout: usecase
+
+title: "“Every Product Has a Story” - innogy’s Digital Product Memory"
+description: "innogy is leading the charge to reveal every product's story. Their Digital Product Memory project leads to a future where we know the exact provenance and authenticity of everything we touch, see, feel and taste – and in the process, solve many of the problems in today’s global supply chains."
+header: hero-innogy.jpg
+
+quote:
+    copy: BigchainDB powers the machine economy.
+    name: Dr. Carsten Stöcker
+    org: Machine Economy Innovation Lighthouse Lead, innogy SE
+    image: carsten-stoecker.jpg
+
+company: innogy SE
+slug: innogy
+industry: Supply chain
+
+about:
+    user: "Dr. Carsten Stöcker is the Machine Economy Innovation Lighthouse Lead at innogy SE, and a co-founder of Genesis of Things. He is a physicist by training with a PhD from University of Aachen. He also serves as a Council Member of Global Future Network for the World Economic Forum. Prior to joining innogy SE, Dr. Stöcker worked for the German Aerospace Center (DLR) and Accenture GmbH."
+    company: "innogy SE is an European energy company. With its three business areas of renewables, grid & infrastructure as well as retail, it addresses the requirements of a modern, decarbonized, decentralized and digital world. The focus of innogy SE’s activities is on offering existing and potential customers innovative and sustainable products and services which enable them to use energy more efficiently and improve their quality of life."
+---
+
+## Background
+
+[innogy SE](www.innogy.com) is an energy company that is building solutions for a modern, decarbonized, decentralized and digital world. Innogy is based in Germany and focuses on renewables, grids & infrastructure and retail. Innogy is exploring the use of blockchain technologies all lines of business.
+
+One of the projects, the Digital Product Memory seeks to give every product a story. innogy’s Digital Product Memory project leads to a future where we know the exact provenance and authenticity of everything we touch, see, feel and taste – and in the process, solve many of the problems in today’s global supply chains.
+
+## Challenges
+
+The global flow of goods has never been greater. Many of the processes designed to manage these flows are manual, paper-based, error-prone and vulnerable to fraud. This means that consumers have almost no way to check the trace the history, check provenance, or verify authenticity the the products that they buy. In today’s world, where consumers make choices based on moral, political and economic values, it matters where a product comes from, how it’s made and what’s happened to it.
+
+## Solution
+
+With today’s real-time information systems, global internet connectivity and rapidly advancing sensor technology – there’s no reason why we can’t track each individual product from the moment of inception until it reaches the end consumer.
+
+This is the vision of the Digital Product Memory – to give each product a story – from the moment of inception until it completes its useful life.
+
+A Digital Product Memory facilitates:
+
+- Verification of authenticity and provenance
+- Proof of ownership
+- Lifecycle traceability
+
+
+## How BigchainDB is Helping
+
+Using blockchain technology provided by BigchainDB, it’s possible to build a database of products and their entire history so that provenance, authenticity and ownership can be verified.
+
+BigchainDB underpins the Digital Product Memory in several ways:
+
+- Provides a globally accessible database to store products and their digital histories
+- High capacity and throughput for millions of sensors and products
+- Data immutability that brings trust and auditability to the records
+- Query technology that enables quick retrieval product histories
+- Supports micropayment channels to enable machine-to-machine commerce

_src/features.html

@@ -1,7 +1,7 @@
 ---
 layout: page
 
-title: How BigchainDB Works
+title: Features
 description: 'Rather than trying to scale up blockchain technology, BigchainDB starts with a big data distributed database and then adds blockchain characteristics - decentralized control, immutability and the transfer of digital assets.'
 
 quotes: set2

_src/robots.txt

@@ -0,0 +1,8 @@
+---
+---
+
+User-agent: *
+
+Disallow: /usecases/*.pdf$
+
+Sitemap: {{ site.url }}/sitemap.xml

_src/usecases.html

@@ -0,0 +1,98 @@
+---
+layout: page
+
+title: Use Cases
+description: For blockchain technology to go mainstream, it needs scale. At BigchainDB, we’ve taken care of that for you.
+
+intro:
+    title: Where blockchains and databases meet
+    description: "BigchainDB is for developers and organizations looking for a scalable, queryable database with blockchain characteristics such as decentralization, immutability and the ability to treat anything stored in the database as an asset. Whether it’s atoms, bits or bytes of value, any real-world blockchain application needs scale and performance. A perfect fit for BigchainDB."
+    addition: "We’re still in the early days of the decentralization movement and while all of the industries below are being disrupted in one way or another, there’s an abundance of opportunity within each."
+    contact:
+        text: Building something with BigchainDB?
+        action: We want to hear from you.
+        link: "/contact/"
+
+newsletter:
+    title: Be the first to hear about our customer stories.
+
+js: page-usecases.min.js
+---
+
+<section class="section section--intro">
+    <div class="row">
+        <header class="section-header">
+            <h1 class="section-title">{{ page.intro.title }}</h1>
+                <p class="section-description">{{ page.intro.description }}</p>
+
+                <div class="grid grid--full grid-small--half grid--gutters grid--top text-left">
+                    <div class="grid__col">
+                        {{ page.intro.addition }}
+                    </div>
+                    <div class="grid__col">
+                        <p><strong>{{ page.intro.contact.text }}</strong> <br><a href="{{ page.intro.contact.link }}">{{ page.intro.contact.action }}</a></p>
+                    </div>
+                </div>
+        </header>
+    </div>
+</section>
+
+<nav class="menu--sub">
+    <div class="row row--wide">
+        <div class="menu-overflow">
+            {% for industry in site.data.industries %}
+                <a class="menu__link scroll" href="#{{ industry.name | downcase | replace: " ", "" }}">
+                    <svg class="icon">
+                        <use xlink:href="/assets/img/sprite.svg#{{ industry.icon }}"></use>
+                    </svg>
+                    {{ industry.name }}
+                </a>
+            {% endfor%}
+        </div>
+    </div>
+</nav>
+
+{% for industry in site.data.industries %}
+
+    <section class="section section--industry" id="{{ industry.name | downcase | replace: " ", "" }}">
+
+        <header class="section-header row">
+            <svg class="icon">
+                <use xlink:href="/assets/img/sprite.svg#{{ industry.icon }}"></use>
+            </svg>
+            <h1 class="section-title">{{ industry.name }}</h1>
+            <p class="section-description">{{ industry.description }}</p>
+        </header>
+
+        {% if industry.usecase %}
+            <div class="row">
+                {% for usecase in site.usecases %}
+                    {% if industry.usecase == usecase.slug %}
+                    <article class="featuredusecase">
+
+                        <a class="featuredusecase__logo" href="{{ usecase.url }}">
+                            {% if usecase.bitmaplogo %}
+                                <img src="/assets/img/{{ usecase.bitmaplogo }}" />
+                            {% else %}
+                                <svg>
+                                    <use xlink:href="/assets/img/sprite.svg#logo-{{ usecase.slug }}"></use>
+                                </svg>
+                            {% endif %}
+                        </a>
+
+                        <div class="featuredusecase__content">
+                            <h1 class="featuredusecase__title"><a href="{{ usecase.url }}">{{ usecase.title }}</a></h1>
+                            <p>{{ usecase.description }}</p>
+                            <a href="{{ usecase.url }}">Learn more</a>
+                        </div>
+
+                    </article>
+                    {% endif %}
+                {% endfor %}
+            </div>
+        {% endif %}
+    </section>
+
+{% endfor%}
+
+{% include sections/section-newsletter.html %}