new draft for features page

This commit is contained in:
Matthias Kretschmann 2016-02-08 14:35:02 +01:00
parent c1d4b4c8d5
commit 7a8f92f235
5 changed files with 163 additions and 47 deletions

View File

@ -13,8 +13,11 @@
display: flex;
align-items: center;
min-height: 420px;
flex-wrap: wrap;
.row { flex: 1; }
.row {
flex: 0 0 100%;
}
@media ($screen-sm) {
padding-top: ($spacer * 4);

View File

@ -55,7 +55,7 @@ $font-size-h4: 1rem !default;
$font-size-h5: $font-size-base !default;
$font-size-h6: 0.85rem !default;
$line-height: 1.5 !default;
$line-height: 1.4 !default;
$headings-font-family: $font-family-noto !default;
$headings-font-weight: $font-weight-normal !default;

View File

@ -1,23 +1,35 @@
.section-difference {
.section-ecosystem {
figcaption { margin-top: $spacer; }
}
.difference {
.feature {
display: flex;
align-items: center;
padding: ($spacer * 2) 0;
margin-bottom: $spacer;
&:first-of-type { padding-top: 0; }
}
.difference__icon {
flex: 0 0 15%;
.feature__icon {
flex: 0 0 20%;
margin-right: 5%;
margin-top: 0;
margin-bottom: 0;
}
.difference__text {
flex: 0 0 80%;
.feature__detail {
flex: 0 0 75%;
}
.feature__title {
font-size: $font-size-h4;
margin-top: 0;
margin-bottom: ($spacer / 3);
}
.feature__text {
@extend .text-dimmed;
margin-bottom: 0;
}

View File

@ -4,58 +4,161 @@ layout: page
title: How it works
---
<section class="section section-benefits">
<section class="section section-features-main">
<div class="row">
<header class="section-header">
<h1 class="section-title">All the good stuff.</h1>
<h1 class="section-title">Blockchains meet Big Data.</h1>
<p class="section-description">BigchainDB combines the key benefits of distributed DBs and traditional blockchains, with an emphasis on scale.</p>
</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>
<p>We built BigchainDB on top of an enterprise-grade distributed DB, from which BigchainDB inherits high throughput, high capacity, a full-featured NoSQL query language, efficient querying, and permissioning. Nodes can be added to increase throughput and capacity.</p>
<figure class="grid__col">
<img class="img--responsive" src="http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg" />
<figcaption>BigchainDB compared to the Bitcoin blockchain and traditional distributed DBs</figcaption>
</figure>
</div>
</section>
<section class="section section-difference background--darker">
<section class="section section-ecosystem background--darker">
<div class="row">
<header class="section-header">
<h1 class="section-title">Bigchain is different.</h1>
<h1 class="section-title">Made for the Decentralization Ecosystem.</h1>
<p class="section-description">BigchainDB can sit side-by-side with other decentralized storage, processing, and communication building blocks. It can be included in higher-level decentralized computing platforms and applications but will work with centralized computing blocks and platforms too.</p>
</header>
</div>
<div class="row row--wide">
<div class="grid grid--full grid-small--half grid--gutters text-center">
<figure class="grid__col">
<img class="img--responsive" src="http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg" />
<figcaption>BigchainDB fills a missing gap in the emerging decentralized stack as a blockchain database that complements existing platforms, processing (business logic) and file systems.</figcaption>
</figure>
<figure class="grid__col">
<img class="img--responsive" src="http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg" />
<figcaption>BigchainDB can be seamlessly integrated into the traditional stack as a blockchain database for decentralized timestamping, certificates, smart contracts and transactions.
</figure>
</div>
</div>
</section>
<p class="difference">
<svg class="difference__icon icon">
<use xlink:href="/assets/img/sprite.svg#icon-group"></use>
</svg>
<span class="difference__text">Federation consensus model public via trusted nodes (more coming soon), private (select your own)</span>
</p>
<section class="section section-features">
<div class="row">
<header class="section-header">
<h1 class="section-title">Features.</h1>
<p class="section-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere quaerat, inventore quod omnis, incidunt eius ipsa minus blanditiis perferendis doloremque quibusdam, libero distinctio voluptates odio sint ex, commodi ratione tempore!</p>
</header>
</div>
<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>
<div class="row row--wide">
<div class="grid grid--full grid-small--half grid--gutters">
<div class="grid__col">
<div class="feature">
<svg class="feature__icon icon">
<use xlink:href="/assets/img/sprite.svg#icon-graph"></use>
</svg>
<div class="feature__detail">
<h1 class="feature__title">One Million TPS and Counting</h1>
<p class="feature__text">Each transaction is recorded on the blockchain without the need for Merkle Trees or sidechains.</p>
</div>
</div>
</div>
<div class="grid__col">
<div class="feature">
<svg class="feature__icon icon">
<use xlink:href="/assets/img/sprite.svg#icon-servers"></use>
</svg>
<div class="feature__detail">
<h1 class="feature__title">Petabytes Capacity</h1>
<p class="feature__text">Load up hashes, metadata and files onto the BigchainDB so every asset can reside on the blockchain.</p>
</div>
</div>
</div>
<div class="grid__col">
<div class="feature">
<svg class="feature__icon icon">
<use xlink:href="/assets/img/sprite.svg#icon-group"></use>
</svg>
<div class="feature__detail">
<h1 class="feature__title">Native Support of Multiassets</h1>
<p class="feature__text">With no native currency on BigchainDB, any asset, token or currency can be issued.</p>
</div>
</div>
</div>
<div class="grid__col">
<div class="feature">
<svg class="feature__icon icon">
<use xlink:href="/assets/img/sprite.svg#icon-group"></use>
</svg>
<div class="feature__detail">
<h1 class="feature__title">Query</h1>
<p class="feature__text">Leverage big data query capabilities out of the box.</p>
</div>
</div>
</div>
<div class="grid__col">
<div class="feature">
<svg class="feature__icon icon">
<use xlink:href="/assets/img/sprite.svg#icon-group"></use>
</svg>
<div class="feature__detail">
<h1 class="feature__title">Customizable</h1>
<p class="feature__text">Design your own private network with custom assets, transactions, permissions and transparency.</p>
</div>
</div>
</div>
<div class="grid__col">
<div class="feature">
<svg class="feature__icon icon">
<use xlink:href="/assets/img/sprite.svg#icon-group"></use>
</svg>
<div class="feature__detail">
<h1 class="feature__title">Rich Permissioning</h1>
<p class="feature__text">Set permissions to ensure a clear separation of duties and enforce Chinese walls.</p>
</div>
</div>
</div>
<div class="grid__col">
<div class="feature">
<svg class="feature__icon icon">
<use xlink:href="/assets/img/sprite.svg#icon-group"></use>
</svg>
<div class="feature__detail">
<h1 class="feature__title">Federation Consensus Model</h1>
<p class="feature__text">Federation of nodes with voting permissions, that is, a super-peer P2P network.</p>
</div>
</div>
</div>
<div class="grid__col">
<div class="feature">
<svg class="feature__icon icon">
<use xlink:href="/assets/img/sprite.svg#icon-tree"></use>
</svg>
<div class="feature__detail">
<h1 class="feature__title">Open source</h1>
<p class="feature__text">Open sourced to the community so that everyone can use it and build their own applications on top of it.</p>
</div>
</div>
</div>
<div class="grid__col">
<div class="feature">
<svg class="feature__icon icon">
<use xlink:href="/assets/img/sprite.svg#icon-group"></use>
</svg>
<div class="feature__detail">
<h1 class="feature__title">Public or Private</h1>
<p class="feature__text">A public version via trusted nodes for the world and a private one for specific industry use cases.</p>
</div>
</div>
</div>
<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>
</div>
<p class="text-center">
For more insight, read our <a href="/whitepaper/">whitepaper</a>.
</p>
</div>
</section>

View File

@ -48,8 +48,6 @@ hero_video_name: northern-light
<div class="section-features__detail grid grid--full grid-small--columns grid--gutters grid--center">
<div class="grid__col grid__col--4">
<p>BigchainDB complements Ethereum smart contracts, blockchain platforms such as Eris, Chain, BlockApps and Enigma, and file systems like IPFS to allow a clear separation between decentralized processing and storage for transactions, contracts and media files.</p>
</div>
<div class="grid__col grid__col--2">
@ -58,8 +56,8 @@ hero_video_name: northern-light
</div>
</div>
</div>
</div>
</section>
<section class="section section-getstarted background--darker">