Merge pull request #345 from mrleewong/buydash

added buy dash

_data/get-dash.yml

@@ -0,0 +1,237 @@
+- currencies:
+    usd:
+      - Wire Transfer
+      - SWIFT
+      - PerfectMoney
+      - OkPay
+      - SWIFT
+      - Capitalist
+      - Money Polo
+      - EPAY
+      - Payeer
+      - AdvCash
+      - NixMoney
+      - MoneyPolo
+    eur: 
+      - Wire Transfer 
+      - SEPA
+      - Bancontact
+      - Giropay
+      - iDEAL
+      - Mybank
+      - Sofort
+      - TrustPay
+    btc: 
+      - Cryptocurrency
+    rur:
+      - QIWI 
+      - AdvCash 
+      - Payeer
+      - Capitalist 
+      - Sberbank
+      - Tinkoff
+      - VTB24
+    cny:
+      - ChinaUnionPay
+    cad:
+      - Flexepin
+
+- name: Kraken
+  using: traditional
+  methods: 
+    - Wire Transfer
+    - SEPA
+    - SEPA
+    - SWIFT
+    - Wire Transfer
+    - Cryptocurrency
+  type: exchange
+  currency:
+    - USD
+    - EUR
+    - BTC
+  image: kraken_logo-small.png
+  url: http://kraken.com/
+
+- name: Bitfinex
+  using: traditional
+  methods:
+    - USD
+    - Cryptocurrency
+  type: exchange
+  currency:
+    - USD
+    - EUR
+    - BTC
+  image: bitfinex_logo-small.png
+  url: https://www.bitfinex.com/
+
+- name: Poloniex
+  using: traditional
+  methods: 
+    - Cryptocurrency
+  type: exchange
+  currency:
+    - BTC
+  image: poloniex_logo-small.png
+  url: https://poloniex.com/
+
+- name: Bithumb
+  using: traditional
+  methods: 
+    - Cryptocurrency
+  type: exchange
+  currency:
+    - BTC
+  image: bithumb_logo-small.png
+  url: https://www.bithumb.com/
+
+- name: Livecoin
+  using: traditional
+  methods: 
+    - Payeer
+    - PerfectMoney
+    - OkPay
+    - SWIFT
+    - Capitalist
+    - Cryptocurrency
+  type: exchange
+  currency:
+    - BTC
+    - USD
+  image: livecoin_logo-small.png
+  url: https://www.livecoin.net/
+
+- name: Bittrex
+  using: traditional
+  methods: 
+    - Cryptocurrency
+  type: exchange
+  currency:
+    - BTC
+  image: bittrex_logo-small.png
+  url: https://bittrex.com/
+
+- name: Exmo
+  using: traditional
+  methods: 
+    - Money Polo
+    - Capitalist
+    - Perfect Money
+    - EPAY
+    - OKPAY
+  type: exchange
+  currency:
+    - BTC
+    - USD
+  image: exmo_logo-small.png
+  url: https://exmo.com/
+
+- name: Hitbtc
+  using: traditional
+  methods: 
+    - Cryptocurrency
+  type: exchange
+  currency:
+    - BTC
+  image: hitbtc_logo-small.png
+  url: https://hitbtc.com/
+  
+- name: Yobit
+  using: traditional
+  methods: 
+    - OKPay
+    - Payeer
+    - AdvCash
+    - PerfectMoney
+    - Capitalist
+  type: exchange
+  currency:
+    - USD
+    - RUR
+    - BTC
+  image: yobit_logo-small.png
+  url: https://yobit.net/
+
+- name: C-cex
+  using: traditional
+  methods: 
+    - Payeer
+    - Perfect Money
+    - OKPAY
+    - NixMoney
+    - Sberbank
+    - Wire Transfer
+    - MoneyPolo
+    - Cryptocurrency
+  type: exchange
+  currency:
+    - USD
+    - BTC
+  image: ccx_logo-small.png
+  url: https://c-cex.com/
+
+- name: ANYCOIN DIRECT
+  using: traditional
+  methods: 
+    - Bancontact
+    - Giropay
+    - iDEAL
+    - Mybank
+    - SEPA
+    - Sofort
+    - TrustPay
+  type: exchange
+  currency:
+    - EUR
+  image: anycoin_logo-small.png
+  url: https://anycoindirect.eu/
+
+- name: ALFACASHIER
+  using: traditional
+  methods: 
+    - Cryptocurrency
+    - Perfect Money
+    - OkPay
+    - MoneyPolo
+    - SWIFT
+    - SEPA
+    - Online Bank Transfer
+    - ChinaUnionPay
+    - Flexepin
+    - Tinkoff
+    - VTB24
+  type: exchange
+  currency:
+    - USD
+    - EUR
+    - BTC
+    - CNY
+    - CAD
+    - RUR
+  image: alpha_logo-small.png
+  url: https://www.alfacashier.com/
+
+- name: BITPANDA
+  using: traditional
+  methods: 
+    - Cryptocurrency
+  type: exchange
+  currency:
+    - BTC
+  image: bitpanda_logo-small.png
+  url: https://www.bitpanda.com/
+
+- name: LITEBIT.EU
+  using: traditional
+  methods: 
+    - iDeal
+    - SEPA
+    - Sofort
+    - GiroPay
+    - Bancontact
+  type: exchange
+  currency:
+    - EUR
+  image: litebit-eu_logo-small.jpg
+  url: https://www.litebit.eu/

_i18n/en.yml

@@ -761,20 +761,37 @@ pages:
     title: Get Dash
     description: Download the wallet and get Dash at an exchange.
     hero-image: get-dash-n.jpg
-    hero-heading: Download Dash Wallet
+    hero-heading: Get Dash
-    hero-text: Download the latest Dash client to get started
+    hero-heading-text: |
+      Buy and Sell Dash every time, when you want. 
+      Dash can be acquired, held and exchanged in many ways
+    hero-text: |
+      First time here? Read <a href='https://dashpay.atlassian.net/wiki/pages/viewpage.action?pageId=1146941' target='_blank'>Dash guide</a> for new users
     hero-wallet-version: Dash Wallet (Fullclient v12.0.56) for OSX
     hero-wallet-version-select: Choose Another
     hero-platform-not-detected: "We're sorry, but your platform could not be automatically detected. Please select \"All Wallets\" to find a compatible version."
     hero-download-btn: Download
     hero-all-wallets-btn: All Wallets
 
+    download-title: Download wallet
+    download-text: Your wallet is the software you use to send, receive and store Dash. It’s simple to use and you can choose to send payments anonymously from your wallet using PrivateSend
+    all-wallets-btn: All wallets
+    buy-dash-title: Buy Dash
+    buy-dash-info-text: Select your preferences and we will offer you the best way to buy Dash
+    dash-select-label: I want to buy with
+    show-more-btn: Show More
+    service-type: Service Type
+    exchange-rate: Exchange Rate
+    payments-method: Payments Method
+    tooltip: Tooltip
+    buy-dash-table: Buy Dash
+
     guide-btn: Setup Guide
     buy-btn: Buy Dash
     spend-btn: Spend Dash
     trade-btn: Trade Dash
-
+    security-btn: Security
-    otc-heading: Over the Counter (OTC)
+    otc-heading: Over <br />the Counter (OTC)
     otc-text: |
       Buying or selling large amounts of Dash on exchanges can cause price slippage, resulting in the buyer or seller receiving less value than intended. Large buy orders push the price higher, resulting in overpayment. Sizeable sell orders do the opposite, resulting in less value received for the Dash you sell. Fortunately there are “over the counter” or OTC solutions, where a vendor pairs buyers and sellers, allowing them to conduct large transactions off the exchanges and free from slippage.t things like a new website, pr budget, etc. The benefit to you is, you can get many more coins at the current price, than what are available on any exchange. So you can get into a Dash position much easier/cheaper than would otherwise be possible.
     otc-btn: Full List

_includes/get-dash.html

@@ -0,0 +1,46 @@
+<tr
+	data-index="{{ forloop.index }}"
+	data-using="{{ exchange.using }}"
+	data-type="{{ exchange.type }}"
+	data-name="{{ exchange.name }}"
+	class="{% for curr in exchange.currency %}js-{{curr | downcase}} {% endfor %} {% for method in exchange.methods %}js-{{ method | replace: ' ',''| downcase }} {% endfor %} js-exchange-row js-type-{{ exchange.type }}"
+	{% if forloop.index > 6 %}
+	style="display:none;"
+	{% endif %}
+>
+	<td class="clear-fix">
+		<div class="get-dash-table__img-container">
+			<img src="/assets/img/get-dash/{{ exchange.image }}" alt="">
+		</div>
+		<div class="get-dash-table__exchange">
+			<div class="get-dash-table__exchange-name">{{ exchange.name }}</div>
+			<a href="https://dashpay.atlassian.net/wiki/display/DOC/How+to+buy" data-exchange="link" class="get-dash-table__exchange-link" target="_blank">More Information</a>
+		</div>
+	</td>
+	<td data-cell="price" class="get-dash-table__price-cell">
+		<div data-price="result" class="hidden">
+			<div class="get-dash-table__rates" >
+				<span data-rate="rate"></span>
+				<sup class="get-dash-table__currency" data-rate="currency">$</sup>
+			</div>
+			<div class="get-dash-table__volume js-dash-table-volume">
+				<span class="get-dash-table__volume-summ" >
+					<span data-rate="volume"></span>$
+				</span>
+				<span class="get-dash-table__volume-time">24h volume </span>
+			</div>
+		</div>
+		<a href="{{ exchange.url }}" class="get-dash-price-req" target="_blank" data-price="click">Click to get price</a>
+	</td>
+	<td>
+	{% for method in exchange.methods %}
+	<div>{{ method }}</div>
+	{% endfor %} 
+	</td>
+	<td> 
+		<a href="{{ exchange.url }}" class="buy-dash-btn" target="_blank">
+			Buy
+			<span class="buy-dash-btn__dash">Dash</span>
+		</a>
+	</td>
+</tr>

_includes/hero/get-dash.html

@@ -1,7 +1,7 @@
 <div class="hero" id="hero">
 	<div class="hero__background">
 		{% capture heroimage %}hero/{% t pages.get-dash.hero-image %}{% endcapture %}
-		{% srcset hero/get-dash-n.jpg ppi:1,2 class="hero__background-image" %}
+		{% srcset hero/get-dash.jpg ppi:1,2 class="hero__background-image" %}
 			{% srcset_source width:1920 %}
 			{% srcset_source width:960 %}
 		{% endsrcset %}
@@ -17,15 +17,15 @@
 		<p class="hero__lead">{% t pages.get-dash.hero-text %}</p>
 
 		<section>
-			<p id="platform-not-detected" class="callout-blue">{% t pages.get-dash.hero-platform-not-detected %}</p>
-
 			<div class="hero__buttons hero__buttons--get-dash">
-				<button id="download-detected-platform-button" href="#" class="btn-blue-solid btn-large">{% t pages.get-dash.hero-download-btn %}</button>
+				<a href="#download" class="btn-white-solid">{% t pages.get-dash.hero-download-btn %}</a>
-				<a href="../wallets/" class="btn-large btn-white-solid">{% t pages.get-dash.hero-all-wallets-btn %}</a>
+				<a href="#buydash" class="btn-transparent">{% t pages.get-dash.buy-btn %}</a>
+				<a href="https://dashpay.atlassian.net/wiki/pages/viewpage.action?pageId=31326247" class="btn-transparent" target="_blank">{% t pages.get-dash.security-btn %}</a>
 			</div>
 		</section>
+		<p>{% t pages.get-dash.hero-text %}</p>
 	</div>
 
 	<!-- Hero stripe -->
-	<div class="hero__stripe"></div>
+	<div class="hero__stripe hero__stripe--grey"></div>
 </div>

_includes/nav-desktop.html

@@ -17,12 +17,12 @@
     <nav class="nav nav--{{ logo-color }}">
         <ul class="nav__list">
             <li class="nav__item"><a href="{{ basenav }}/get-dash/" class="nav__link">{% t nav.get-dash %}</a></li>
-			<li class="nav__item"><a href="{{ basenav }}/merchants/" class="nav__link">{% t nav.merchants %}</a></li>
+            <li class="nav__item"><a href="{{ basenav }}/merchants/" class="nav__link">{% t nav.merchants %}</a></li>
-			<li class="nav__item"><a href="{{ basenav }}/network/" class="nav__link">{% t nav.currency %}</a></li>
+            <li class="nav__item"><a href="{{ basenav }}/network/" class="nav__link">{% t nav.currency %}</a></li>
-			<li class="nav__item"><a href="{{ basenav }}/community/" class="nav__link">{% t nav.community %}</a></li>
+            <li class="nav__item"><a href="{{ basenav }}/community/" class="nav__link">{% t nav.community %}</a></li>
-			<li class="nav__item"><a href="{{ basenav }}/team/" class="nav__link">{% t nav.team %}</a></li>
+            <li class="nav__item"><a href="{{ basenav }}/team/" class="nav__link">{% t nav.team %}</a></li>
-			<li class="nav__item"><a href="{{ basenav }}/blog/" class="nav__link">{% t nav.blog %}</a></li>
+            <li class="nav__item"><a href="{{ basenav }}/blog/" class="nav__link">{% t nav.blog %}</a></li>
-			<li class="nav__item"><a href="{{ basenav }}/evolution/" class="nav__link">{% t nav.evolution %}</a></li>
+            <li class="nav__item"><a href="{{ basenav }}/evolution/" class="nav__link">{% t nav.evolution %}</a></li>
             {% if page.layout != 'post' %}
             <li class="nav__item nav__item--languages">
                 <a href="#" class="nav__link" style="text-transform:uppercase;"><span class="flag {% if 'en' == site.lang %}gb{% else %}{{site.lang}}{% endif %}"></span></a>

_includes/nav-mobile.html

@@ -54,5 +54,4 @@
             {% endif %}
         </ul>
     </div>
-
 </nav>

evolution/index.html

@@ -18,7 +18,6 @@ description: pages.evolution.description
 		<div class="section__content">
 				<h2 class="section__title">{% t pages.evolution.video-heading %}</h2>
 				<div class="section__lead">{% tmd pages.evolution.video-text %}</div>
-
 				<div class="section__btn-grp">
 					<a href="https://www.youtube.com/watch?v=rcHC40YmS0g" class="btn-blue btn-large" target="_blank" data-js-popup="video">{% t pages.evolution.video-btn %}</a>
 					<!--a href="https://dashpay.atlassian.net/wiki/x/ErwxBg" class="btn-blue-solid btn-large"  target="_blank">{% t pages.evolution.sentinel-btn %}</a-->

src/js/get-dash.js

@@ -19,6 +19,9 @@
 		if (typeof(walletsCollectionByOs) !== 'undefined' && walletsCollectionByOs) {
 			initDownloadButton();
 		}
+		if ($('[data-wallet]').length) {
+			initTileWallet();
+		}
 	});
 
 	function getBestWalletMatch() {
@@ -72,7 +75,6 @@
 			detectedWallet = _.find(_walletsCollection,{ os: _walletOs, vendor_id: _vendor, type: _type});
 		}
 
-		console.info('detectedWallet: ' , detectedWallet, { os: _walletOs, vendor_id: _vendor, type: _type});
 		return detectedWallet;
 	}
 
@@ -90,7 +92,7 @@
 			_notDetectedMessage = $('#platform-not-detected'),
 			_platform = platform
 			;
-
+		console.log(_detectedWallet);
 		if (_downloadButton && _downloadButton.length > 0) {
 			if (_detectedWallet && _platform) {
 				_downloadButton.html(_detectedWallet.name)
@@ -110,4 +112,15 @@
 		return _downloadButton;
 	}
 
+	function initTileWallet() {
+		var _tile = $('[data-wallet="auto-detect"]'),
+			_wallet = getBestWalletMatch();
+
+		_tile.find('[data-wallet="os"]').html(_wallet.name);
+		_tile.find('[data-wallet="img"]').attr('src', _wallet.logo_url);
+		_tile.find('[data-wallet="version"]').html(_wallet.type + ' Wallet');
+		_tile.find('[data-wallet="text"]').html(_wallet.description);
+		_tile.find('[data-wallet="link"]').attr('href', _wallet.links[0].url);
+	}
+
 }(jQuery));

src/js/tables.js

@@ -3,7 +3,93 @@
 	$(document).ready(function () {
 
 		var siteApi = window.globals.siteApi || '/api/v1',
-			marketCapApi = 'https://www.coincap.io/front/';
+			marketCapApi = 'https://www.coincap.io/front/',
+			resultExchanges,
+			exchangesApi = siteApi + '/exchange';
+
+		if ($('#getDashTable').length) {
+			$.ajax({
+				url: exchangesApi,
+				error: function(jqXHR, textStatus, errorThrown) {
+					console.log(jqXHR);
+					console.log(textStatus);
+					console.log('errorThrown:', errorThrown);
+				}
+			}).done(function(json) {
+				resultExchanges = json;
+				$('[data-name]').each(function() {
+					var that = $(this),
+						exchangeName = that.data('name'),
+						resultName = resultExchanges.filter(function(el) {
+							return el.exchange === exchangeName;
+						}),
+						$result = that.find('[data-price="result"]');
+
+					if (resultName[0] && resultName[0].price !== 'undefined') {
+						that.find('[data-price="click"]').addClass('hidden');
+						$result.removeClass('hidden').find('[data-rate="rate"]').text(formatCurrency(resultName[0].price));
+						if (resultName[0].volume) {
+							$result.find('[data-rate="volume"]').text(formatCurrency(resultName[0].volume));
+						} else {
+							$result.find('.js-dash-table-volume').addClass('hidden');
+						}
+					}
+				});
+			});
+
+			var getRows = function() {
+					var $typeClass = $('#type').val() === 'all' ? '' : '.js-type-' + $('#type').val(),
+						$methodClass = $('#method').val() === 'all' ? '' : '.js-' + $('#method').val(),
+						$currencyClass = $('#currency').val() === 'all' ? '' : '.js-' + $('#currency').val(),
+						$resultClass = $typeClass + $methodClass + $currencyClass;
+
+					return $resultClass;
+				},
+				showMethod = function(selectedMethod) {
+					$('#method option').hide();
+					$('#method').find('option').filter(function() {
+						if ($(this).data('method') !== 'undefined') {
+							var method = $(this).data('method');
+
+							return selectedMethod.indexOf(method) !== -1;
+						}
+					}).show();
+				};
+
+			$('select').on('change', function() {
+				var $resultRow = getRows();
+
+				$('.js-exchange-row').hide();
+				if (!$resultRow) {
+					$('.js-exchange-row:hidden').slice(0, 6).show();
+					$('[data-btn="show-more"]').removeClass('hidden');
+				} else {
+					$($resultRow).slice(0, 6).show();
+				}
+			});
+			$('select#currency').on('change', function() {
+				if ($(this).val() === 'all') {
+					$('#method option').show();
+				} else {
+					var methods = $(this).find(':selected').data('method') + 'all'.split(' ').filter(String);
+
+					showMethod(methods);
+				}
+			});
+
+			$('[data-btn="show-more"]').on('click', function() {
+				var $resultRow = getRows();
+
+				if (!$resultRow) {
+					$('.js-exchange-row:hidden').slice(0, 6).show();
+				} else {
+					$($resultRow + ':hidden').slice(0, 6).show();
+				}
+				if (!$('.js-exchange-row:hidden').length || !$($resultRow + ':hidden').length) {
+					$(this).addClass('hidden');
+				}
+			});
+		}
 
 		if ($('#marketcap_count').length) {
 
@@ -46,7 +132,7 @@
 
 			// Get the exchange data
 			$.ajax({
-				url: siteApi + '/exchange/',
+				url: exchangesApi,
 				error: function(jqXHR, textStatus, errorThrown) {
 					console.log(jqXHR);
 					console.log(textStatus);
@@ -57,7 +143,7 @@
 				var exchanges = response;
 
 				exchanges.map(function(exchange) {
-					if (exchange) {
+					if (exchange && exchange.volume && exchange.price && exchange.percent_change) {
 						console.log('exchange',exchange);
 						var name 	= exchange.exchange,
 							url 	= exchange.url,

src/scss/_buttons.scss

@@ -86,5 +86,6 @@
 	box-shadow: none;
 	background-color: transparent;
 	color: $color-black !important;
-	border: 1px solid #b5b5b5
+	border: 1px solid #b5b5b5;
+	font-size: 18px;
 }

src/scss/_get-dash.scss

@@ -0,0 +1,326 @@
+$get-wallet-tile-min-height: 20em;
+$get-wallet-tile-max-width: 21em;
+$get-wallet-tile-logo-container-height: 5.5em;
+$get-wallet-tile-logo-container-width: 5.5em;
+$get-wallet-tile-spacing: .7em;
+$get-wallet-tile-caption-fine-print-font-size: 0.7em;
+$get-wallet-tile-caption-fine-print-height: $get-wallet-tile-caption-fine-print-font-size*20.9;
+$get-wallet-tile-hover-background-base-color: lighten($color-blue-light, 9);
+.get-wallet-tile {
+    background: #fff;
+    animation: fadein 0.4s;
+    cursor: pointer;
+    text-align: center;
+    margin: $get-wallet-tile-spacing*2 auto 50px;
+    border: 1px solid $color-gray;
+    border-radius: 4px;
+    min-height: $get-wallet-tile-min-height;
+    .version-text {
+        text-transform: uppercase;
+        font-size: 0.75em;
+        color: #5e5e5e;
+        margin-bottom: 40px;
+    }
+    .payments & {
+        min-height: 12em;
+    }
+    max-width: $get-wallet-tile-max-width;
+    overflow: hidden;
+    transition: .25s;
+    &:hover,
+    &:focus {
+        border-color: $color-blue;
+        a {
+            color: darken($color-blue, 15);
+        }
+        & .thumbnail .caption .fine-print {
+            color: darken($color-gray-dark, 15);
+        }
+        & .thumbnail .wallet-links-container .link {
+            border-top: solid 1px darken($color-gray, 15);
+        }
+    }
+    & .thumbnail {
+        & .logo-container {
+            margin: $get-wallet-tile-spacing*3 auto;
+            padding: 0;
+            display: block;
+            max-width: $get-wallet-tile-logo-container-width;
+            max-height: $get-wallet-tile-logo-container-height;
+            overflow: hidden;
+            img {
+                max-height: 55px;
+            }
+        }
+        & .caption {
+            line-height: 1 !important;
+            margin: $get-wallet-tile-spacing;
+            h4 {
+                font-size: $font-size-medium;
+                padding: 0 0 $get-wallet-tile-spacing 0;
+            }
+            & .fine-print {
+                overflow-y: auto;
+                min-height: $get-wallet-tile-caption-fine-print-height;
+                max-height: $get-wallet-tile-caption-fine-print-height*2;
+                margin: 0 0 $get-wallet-tile-spacing 0;
+                font-size: $get-wallet-tile-caption-fine-print-font-size;
+                line-height: 1.5 !important;
+                color: $color-gray-dark;
+            }
+        }
+        & .wallet-links-container {
+            width: 100%;
+            & .link {
+                border-top: solid 1px $color-gray;
+                margin: 0 auto;
+                width: 90%;
+                display: block;
+                transition: 1.25s;
+                & a {
+                    display: inline-block;
+                    margin-top: 1.4em;
+                    margin-bottom: 1.9em;
+                    padding: $get-wallet-tile-spacing*.63 $get-wallet-tile-spacing*1.9;
+                    height: 100%;
+                    transition: .5s;
+                    border: 1px solid $color-blue;
+                    border-radius: 4px;
+                    color: $color-blue;
+                    &:hover,
+                    &:focus {
+                        background-color: $color-blue;
+                        border-color: $color-blue;
+                        color: $color-white;
+                    }
+                }
+            }
+        }
+    }
+}
+
+select.get-dash-select {
+    text-transform: uppercase;
+    border-radius: 4px;
+    outline: none;
+    padding: 5px 55px 5px 20px;
+    font-size: 16px;
+    border: 1px solid $color-gray;
+    height: 43px;
+    color: $color-black;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;  
+    background: transparent;
+    background-image: url("data:image/svg+xml;utf8,<svg fill='#858585' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
+    background-repeat: no-repeat;
+    background-position-x: 96%;
+    background-position-y: 9px;
+}
+
+select.get-dash-select::-ms-expand { 
+    display: none; 
+}
+
+.get-dash-select-label{
+    margin-right: 10px;
+    color: #858585;
+    font-weight: $font-weight-light;
+}
+
+.get-dash-info-text{
+    color: #5e5e5e;
+    font-size: 1.2em;
+    max-width: 768px;
+    text-align: center;
+    margin: 0  auto 50px;
+    font-weight: $font-weight-light;
+}
+.get-dash{
+    &__select-section{
+        display: inline-block;
+        margin-right: 23px;
+    }
+
+}
+
+.get-dash-table {
+    text-align: left;
+    border-collapse: inherit;
+    border-collapse: collapse;
+    border-radius: 4px;
+    overflow: hidden;
+    border-style: hidden; /* hide standard table (collapsed) border */
+    box-shadow: 0 0 0 1px $color-gray; /* this draws the table border  */ 
+    margin-top: 50px;
+    td {
+        border: 1px solid $color-gray;
+        padding-left: 20px;
+        vertical-align: top;
+    }
+    th {
+        padding-left: 20px;
+        font-weight: normal;
+        color: #858585;
+        font-size: 16px;
+        border: 1px solid $color-gray;
+        font-weight: $font-weight-light;
+    }
+    &__price-cell{
+        @at-root {
+            td#{&} {
+                vertical-align: text-top;
+            }
+        }
+    }
+    &__popup {
+        display: inline-block;
+        border-radius: 50%;
+        background: #d1d1d1;
+        color: $color-white;
+        width: 19px;
+        height: 19px;
+        line-height: 19px;
+        text-align: center;
+        cursor: pointer;
+        margin-left: 5px;
+    }
+    &__exchange {
+        margin-left: 0.7em;
+        float: left;
+    }
+    &__exchange-name {
+        font-size: 2em;
+    }
+    &__exchange-link{
+        cursor: pointer;
+        text-decoration: underline;
+        margin-top: 2px;
+    }
+    &__rates {
+        text-align: left;
+        font-size: 2em;
+        font-weight: $font-weight-light;
+    }
+    &__volume {
+        text-align: left;
+        font-size: 0.75em;
+        color: $color-black;
+    }
+    &__volume-summ{
+        color: #666666;
+    }
+    &__volume-time{
+        color: #9f9f9f;
+    }
+    &__show {
+        display: block;
+        width: 100%;
+        text-align: center;
+        padding-top: 10px;
+        padding-bottom: 10px;
+        font-size: 1.2em;
+        color: $color-black;
+        cursor: pointer;
+        &:visited, &:hover{
+            color: $color-black;
+        }
+    }
+    &__currency{
+        font-size: 0.5em;
+        vertical-align: super;
+    }
+    &__method{
+        color: $color-black;
+        font-weight: $font-weight-light;
+    }
+    &__img-container {
+        float: left;
+        width: 85px;
+        margin-left: 31px;
+        img {
+            max-width: 55px;
+        }
+    }
+}
+.buy-dash-btn {
+    display: inline-block;
+    border-radius: 4px;
+    border: 1px solid #b6b6b6;
+    color: #131415;
+    transition: all .3s;
+    padding-left: 20px;
+    padding-right: 33px;
+    line-height: 1;
+    padding-top: 11px;
+    font-size: 13px;
+    padding-bottom: 11px;
+    cursor: pointer;
+    font-weight: 700;
+    &:visited {
+        color: $color-black;
+    }
+    &__dash {
+        font-size: 2em;
+        line-height: 1;
+        text-transform: uppercase;
+        color: $color-blue;
+        font-family: $font-family-brand;
+        font-weight: $font-weight-bold;
+        transition: all .3s;
+        margin-left: 10px;
+    }
+    &:hover{
+        background: $color-blue;
+        color: $color-white;
+        border: 1px solid transparent;
+        .buy-dash-btn__dash {
+            color: $color-white;
+        }
+    }
+}
+span.tooltips {
+  position: relative;
+}
+span.tooltips span {
+  position: absolute;
+  width:140px;
+  color: #FFFFFF;
+  background: #000000;
+  height: 30px;
+  line-height: 30px;
+  text-align: center;
+  visibility: hidden;
+  border-radius: 6px;
+}
+span.tooltips span:after {
+    content: '';
+    position: absolute;
+    bottom: 100%;
+    left: 50%;
+    margin-left: -4px;
+    width: 0; height: 0;
+    border-bottom: 8px solid #000000;
+    border-right: 8px solid transparent;
+    border-left: 8px solid transparent;
+}
+span:hover.tooltips span {
+    visibility: visible;
+    opacity: 0.8;
+    top: 30px;
+    left: 50%;
+    margin-left: -76px;
+    z-index: 999;
+}
+
+.page--get-dash {
+    .section__title {
+        font-weight: 400;
+    }
+}
+.get-dash-price-req {
+    color: #1076bc;
+    font-size: 19.5px;
+    font-weight: 400;
+    line-height: 1.2;
+}

src/scss/_hero.scss

@@ -61,7 +61,7 @@
 	&__buttons {
 		margin-bottom: 20px; /*optical*/
 		&--get-dash {
-			margin-bottom: 0;
+			margin-top: 34px;
 		}
 	}
 

src/scss/_junk-drawer.scss

@@ -30,7 +30,9 @@ you're in a hurry or lost or you just need to Make It Work©
   text-align: left;
 }
 
-
+.no-padding{
+  padding: 0;
+}
 
 $wallet-tile-min-height: 20em;
 $wallet-tile-max-width: 25em;
@@ -547,4 +549,17 @@ a.blog_link {
     vertical-align: super;
     font-size: smaller;
   }
-}
+}
+.page.page--get-dash section{
+    text-align: center;
+    &:nth-child(2n+1) {
+      background-color: $color-gray-light;
+    }
+    &:nth-child(2n) {
+      background-color: $color-white;
+    }
+    .info-grid {
+      text-align: left;
+    }
+}
+

src/scss/_section.scss

@@ -10,6 +10,18 @@ $m: 'section';
 		padding: 0 20px;
 		margin: 0 auto;
 	}
+	&__number{
+		display: inline-block;
+		border: 1px solid #1c75bc;
+		border-radius: 50%;
+		color: #1c75bc;
+		line-height: 56px;
+		font-weight: 500;
+		width: 56px;
+		height: 56px;
+		margin-bottom: 3%;
+		margin-top: 73px;
+	}
 	&__title{
 		@include font-title-xlarge();
 		margin-bottom: 10px;

src/scss/main.scss

@@ -52,3 +52,4 @@
 @import "pages/currency";
 @import "social_icons";
 @import "school";
+@import "get-dash";