.gitignore

@@ -39,3 +39,4 @@ cypress/videos
 !/.gitlab
 !/.githooks
 !/.prettierrc
+!.gitattributes

cypress/integration/blockchain/rewards-marketing.spec.js

+context('Rewards Product Page', () => {
+  before(() => {
+    cy.getCookie('minds_sess').then(sessionCookie => {
+      if (!sessionCookie) {
+        return cy.login(true);
+      }
+    });
+  });
+
+  beforeEach(() => {
+    cy.preserveCookies();
+  });
+
+  const joinRewards = '.m-marketing__mainWrapper .mf-button';
+
+  it('should have a join rewards button', () => {
+    cy.visit('/rewards');
+
+    cy.get(joinRewards)
+      .should('be.visible')
+      .should('contain', 'Join Rewards')
+      .click();
+
+    cy.location('pathname').should(
+      'contains',
+      '/wallet/tokens/contributions'
+    );
+  });
+});

cypress/integration/blockchain/token-marketing.spec.js

+context('Token Page', () => {
+  before(() => {
+    cy.getCookie('minds_sess').then(sessionCookie => {
+      if (!sessionCookie) {
+        return cy.login(true);
+      }
+    });
+  });
+
+  beforeEach(() => {
+    cy.preserveCookies();
+    cy.visit('/token');
+  });
+
+  it('should have the ability to trigger Buy Tokens modal', () => {
+    const tokensInput = 'm-blockchain--purchase input[name=amount]';
+    const buyTokensButton =
+      'm-blockchain--purchase .m-blockchainTokenPurchase__action .mf-button';
+    const anyBuyTokensModal =
+      'm-blockchain--purchase m-modal .m-modal-container';
+
+    cy.get(tokensInput)
+      .focus()
+      .clear()
+      .type('0');
+    cy.get(buyTokensButton).should('be.disabled');
+
+    cy.get(tokensInput)
+      .focus()
+      .clear()
+      .type('1');
+    cy.get(buyTokensButton)
+      .should('not.be.disabled')
+      .click();
+
+    cy.get('.m-get-metamask--cancel-btn.m-btn').click();
+
+    cy.get(anyBuyTokensModal).should('be.visible');
+  });
+
+  it('should have the ability to trigger Buy Eth modal', () => {
+    const buyEthLink =
+      'm-blockchain--purchase .m-blockchainTokenPurchase__ethRate a';
+    const buyEthModal = 'm-blockchain__eth-modal .m-modal-container';
+
+    cy.get(buyEthLink).click();
+
+    cy.get(buyEthModal).should('be.visible');
+  });
+});

cypress/integration/boost/marketing.spec.js

+context('Boost Product Page', () => {
+  before(() => {
+    cy.getCookie('minds_sess').then(sessionCookie => {
+      if (!sessionCookie) {
+        return cy.login(true);
+      }
+    });
+  });
+
+  beforeEach(() => {
+    cy.preserveCookies();
+  });
+
+  const createBoostButton = '.m-marketing__mainWrapper .mf-button';
+
+  it('should have a create boost button', () => {
+    cy.visit('/boost');
+
+    cy.get(createBoostButton)
+      .should('be.visible')
+      .should('contain', 'Create Boost')
+      .click();
+
+    cy.location('pathname').should(
+      'contains',
+      '/boost/console/newsfeed/create'
+    );
+  });
+});

cypress/integration/nodes/marketing.spec.js

+context('Pro Product Page', () => {
+  before(() => {
+    cy.getCookie('minds_sess').then(sessionCookie => {
+      if (!sessionCookie) {
+        return cy.login(true);
+      }
+    });
+  });
+
+  beforeEach(() => {
+    cy.preserveCookies();
+  });
+
+  const contactUsButton = '.m-marketing__mainWrapper .mf-button';
+
+  it('should have a contact us button', () => {
+    cy.visit('/nodes', {
+      onBeforeLoad(_window) {
+        cy.stub(_window, 'open');
+      },
+    });
+
+    cy.get(contactUsButton)
+      .should('be.visible')
+      .should('contain', 'Contact us for details')
+      .click();
+
+    cy.window()
+      .its('open')
+      .should('be.called');
+  });
+});

cypress/integration/plus/marketing.spec.js

+context('Plus Product Page', () => {
+  before(() => {
+    cy.getCookie('minds_sess').then(sessionCookie => {
+      if (!sessionCookie) {
+        return cy.login(true);
+      }
+    });
+  });
+
+  beforeEach(() => {
+    cy.preserveCookies();
+  });
+
+  const upgradeButton = 'm-plus--subscription .mf-button';
+  const wirePaymentsComponent = 'm-wire__paymentscreator .m-wire--creator';
+
+  it('should open the Wire Payment modal', () => {
+    cy.visit('/plus');
+
+    cy.get(upgradeButton)
+      .should('be.visible')
+      .should('contain', 'Upgrade to Plus')
+      .click();
+
+    cy.get(wirePaymentsComponent).should('be.visible');
+  });
+
+  it('should automatically open the Wire Payment modal', () => {
+    cy.visit('/plus?i=yearly&c=tokens');
+
+    cy.get(wirePaymentsComponent).should('be.visible');
+  });
+});

cypress/integration/pro/marketing.spec.js

+context('Pro Product Page', () => {
+  before(() => {
+    cy.getCookie('minds_sess').then(sessionCookie => {
+      if (!sessionCookie) {
+        return cy.login(true);
+      }
+    });
+  });
+
+  beforeEach(() => {
+    cy.preserveCookies();
+  });
+
+  const upgradeButton = 'm-pro--subscription .mf-button';
+  const wirePaymentsComponent = 'm-wire__paymentscreator .m-wire--creator';
+
+  it('should show a coming soon button', () => {
+    cy.visit('/pro');
+
+    cy.get(upgradeButton)
+      .should('be.visible')
+      .should('contain', 'Coming soon')
+      .click();
+  });
+
+  // it('should open the Wire Payment modal', () => {
+  //
+  //   cy.visit('/pro');
+  //
+  //   cy.get(upgradeButton)
+  //     .should('be.visible')
+  //     .should('contain', 'Upgrade to Pro')
+  //     .click();
+  //
+  //   cy.get(wirePaymentsComponent).should('be.visible');
+  // });
+  //
+  // it('should automatically open the Wire Payment modal', () => {
+  //   cy.visit('/pro?i=yearly&c=tokens');
+  //
+  //   cy.get(wirePaymentsComponent).should('be.visible');
+  // });
+});

cypress/integration/upgrades.spec.js

+context('Upgrades page', () => {
+  before(() => {
+    cy.getCookie('minds_sess').then(sessionCookie => {
+      if (!sessionCookie) {
+        return cy.login(true);
+      }
+    });
+  });
+
+  beforeEach(() => {
+    cy.preserveCookies();
+    cy.visit('/upgrades');
+  });
+
+  it('should scroll to upgrades table', () => {
+    cy.viewport(1200, 600); // Only on desktop
+
+    const scrollButton = '[data-cy="m-upgrades__upgrade-now-button"]';
+    const heading = '.m-upgradesUpgradeOptions__header h2';
+
+    cy.get(scrollButton)
+      .should('contain', 'Upgrade now')
+      .click();
+
+    cy.wait(1500);
+    cy.isInViewport(heading);
+  });
+
+  // TODO: Toggles tests (make them testable)
+
+  it('should have the ability to trigger Buy Tokens modal', () => {
+    const tokensInput = 'm-blockchain--purchase input[name=amount]';
+    const buyTokensButton =
+      'm-blockchain--purchase .m-blockchainTokenPurchase__action .mf-button';
+    const anyBuyTokensModal =
+      'm-blockchain--purchase m-modal .m-modal-container';
+
+    cy.get(tokensInput)
+      .focus()
+      .clear()
+      .type('0');
+    cy.get(buyTokensButton).should('be.disabled');
+
+    cy.get(tokensInput)
+      .focus()
+      .clear()
+      .type('1');
+    cy.get(buyTokensButton)
+      .should('not.be.disabled')
+      .click();
+
+    cy.get('.m-get-metamask--cancel-btn.m-btn').click();
+
+    cy.get(anyBuyTokensModal).should('be.visible');
+  });
+
+  it('should have the ability to trigger Buy Eth modal', () => {
+    const buyEthLink =
+      'm-blockchain--purchase .m-blockchainTokenPurchase__ethRate a';
+    const buyEthModal = 'm-blockchain__eth-modal .m-modal-container';
+
+    cy.get(buyEthLink).click();
+
+    cy.get(buyEthModal).should('be.visible');
+  });
+
+  it('should navigate to Plus and trigger a Wire', () => {
+    const upgradeButton = cy.get(
+      '[data-cy="m-upgradeOptions__upgrade-to-plus-button"]'
+    );
+
+    upgradeButton.click();
+
+    cy.location('pathname').should('contain', '/plus');
+  });
+
+  it('should navigate to Pro and trigger a Wire', () => {
+    const upgradeButton = cy.get(
+      '[data-cy="m-upgradeOptions__upgrade-to-pro-button"]'
+    );
+
+    upgradeButton.click();
+
+    cy.location('pathname').should('contain', '/pro');
+  });
+
+  it('should navigate to Nodes', () => {
+    const upgradeButton = cy.get(
+      '[data-cy="m-upgradeOptions__contact-us-nodes-button"]'
+    );
+
+    upgradeButton.click();
+
+    cy.location('pathname').should('contain', '/nodes');
+  });
+});

cypress/integration/wire.spec.js → cypress/integration/wire/creator.spec.js

@@ -5,10 +5,10 @@
  * @desc Spec tests for Wire transactions.
  */
 
-import generateRandomId from "../support/utilities";
+import generateRandomId from "../../support/utilities";
 
 // Issue to re-enable https://gitlab.com/minds/front/issues/1846
-context.skip('Wire', () => {
+context.skip('Wire Creator', () => {
 
   const receiver = {
     username: generateRandomId(),

cypress/integration/wire/marketing.spec.js

+context('Pay Product Page', () => {
+  before(() => {
+    cy.getCookie('minds_sess').then(sessionCookie => {
+      if (!sessionCookie) {
+        return cy.login(true);
+      }
+    });
+  });
+
+  beforeEach(() => {
+    cy.preserveCookies();
+  });
+
+  const monetizeChannelButton = '.m-marketing__mainWrapper .mf-button';
+
+  it('should have a monetize channel button', () => {
+    cy.visit('/pay');
+
+    cy.get(monetizeChannelButton)
+      .should('be.visible')
+      .should('contain', 'Monetize your channel')
+      .click();
+
+    cy.location('pathname').should(
+      'contains',
+      '/wallet/tokens/contributions'
+    );
+  });
+});

cypress/support/commands.js

@@ -255,3 +255,36 @@ function b64toBlob(b64Data, contentType, sliceSize = 512) {
   blob.lastModifiedDate = new Date();
   return blob;
 }
+
+/**
+ * Check if certain element is on viewport
+ * @param {*} element
+ */
+Cypress.Commands.add('isInViewport', element => {
+  cy.get(element).then($el => {
+    const bottom = Cypress.$(cy.state('window')).height();
+    const rect = $el[0].getBoundingClientRect();
+
+    expect(rect.top).not.to.be.greaterThan(bottom);
+    expect(rect.bottom).not.to.be.greaterThan(bottom);
+    expect(rect.top).not.to.be.greaterThan(bottom);
+    expect(rect.bottom).not.to.be.greaterThan(bottom);
+  })
+});
+
+/**
+ * Check if certain element is on viewport
+ * @param {*} element
+ */
+Cypress.Commands.add('isNotInViewport', element => {
+  cy.get(element).then($el => {
+    const bottom = Cypress.$(cy.state('window')).height();
+    const rect = $el[0].getBoundingClientRect();
+
+    expect(rect.top).to.be.greaterThan(bottom);
+    expect(rect.bottom).to.be.greaterThan(bottom);
+    expect(rect.top).to.be.greaterThan(bottom);
+    expect(rect.bottom).to.be.greaterThan(bottom);
+  })
+});
+

src/app/common/components/marketing/as-featured-in.component.html

@@ -6,29 +6,25 @@
   <ul class="m-grid__column-10">
     <li>
       <a
-        href="https://www.independent.co.uk/news/business/indyventure/minds-facebook-alternative-deletefacebook-social-network-data-a8475841.html"
+        href="https://www.wsj.com/articles/facebook-on-notice-as-vietnam-tightens-grip-on-social-media-11547036594"
         target="_blank"
       >
         <img
-          [src]="cdnAssetsUrl + 'assets/marketing/press-logos/independent.png'"
-          alt="Independent"
+          [src]="cdnAssetsUrl + 'assets/marketing/wsj.png'"
+          alt="The Wall Street Journal"
         />
       </a>
     </li>
+
     <li>
       <a
-        href="https://www.foxnews.com/tech/alternate-social-media-squash-extremist-content-without-violating-first-amendment"
+        href="https://www.wired.com/story/minds-anti-facebook/"
         target="_blank"
       >
-        <img
-          [src]="cdnAssetsUrl + 'assets/marketing/foxnews.png'"
-          alt="Fox News"
-        />
+        <img [src]="cdnAssetsUrl + 'assets/marketing/wired.png'" alt="Wired" />
       </a>
     </li>
-    <li *ngIf="false">
-      <img [src]="cdnAssetsUrl + 'assets/marketing/forbes.png'" alt="Forbes" />
-    </li>
+
     <li>
       <a
         href="https://techcrunch.com/2018/04/16/minds-aims-to-decentralize-the-social-network/"
@@ -40,35 +36,62 @@
         />
       </a>
     </li>
+
     <li>
       <a
-        href="https://mobile.reuters.com/article/amp/idUSKBN1K7147"
+        href="http://podcasts.joerogan.net/podcasts/bill-ottman"
         target="_blank"
       >
         <img
-          [src]="cdnAssetsUrl + 'assets/marketing/reuters.png'"
-          alt="Reuters"
+          [src]="cdnAssetsUrl + 'assets/marketing/tjre.png'"
+          alt="The Joe Rogan Experience"
         />
       </a>
     </li>
+
     <li>
       <a
-        href="https://www.wired.com/story/minds-anti-facebook/"
+        href="https://www.foxnews.com/tech/alternate-social-media-squash-extremist-content-without-violating-first-amendment"
         target="_blank"
       >
-        <img [src]="cdnAssetsUrl + 'assets/marketing/wired.png'" alt="Wired" />
+        <img
+          [src]="cdnAssetsUrl + 'assets/marketing/foxnews.png'"
+          alt="Fox News"
+        />
       </a>
     </li>
+
     <li>
       <a
-        href="http://podcasts.joerogan.net/podcasts/bill-ottman"
+        href="https://www.independent.co.uk/news/business/indyventure/minds-facebook-alternative-deletefacebook-social-network-data-a8475841.html"
         target="_blank"
       >
         <img
-          [src]="cdnAssetsUrl + 'assets/marketing/tjre.png'"
-          alt="The Joe Rogan Experience"
+          [src]="cdnAssetsUrl + 'assets/marketing/press-logos/independent.png'"
+          alt="Independent"
+        />
+      </a>
+    </li>
+
+    <li>
+      <a
+        href="https://www.reuters.com/article/us-vietnam-cyber-usa/u-s-lawmakers-urge-google-facebook-to-resist-vietnam-cybersecurity-law-idUSKBN1K7147"
+        target="_blank"
+      >
+        <img
+          [src]="cdnAssetsUrl + 'assets/marketing/reuters.png'"
+          alt="Reuters"
         />
       </a>
     </li>
+
+    <li>
+      <a
+        href="https://www.npr.org/2019/08/06/748810962/debate-over-policing-free-speech-intensifies-as-8chan-struggles-to-stay-online"
+        target="_blank"
+      >
+        <img [src]="cdnAssetsUrl + 'assets/marketing/npr.png'" alt="npr" />
+      </a>
+    </li>
   </ul>
 </div>

src/app/common/components/marketing/as-featured-in.component.scss

@@ -2,14 +2,19 @@
 
 .m-marketing__asFeaturedIn {
   max-width: 1084px;
-  margin: 40px auto 0;
+  margin: 45px auto 80px;
+
+  .m-marketing__asFeaturedIn--noMargin & {
+    margin-bottom: 0;
+  }
 
   @media screen and (max-width: $m-grid-min-vp) {
     &.m-grid {
       display: block;
+      margin-bottom: 45px;
     }
 
-    margin: 20px 0 45px;
+    margin: 20px 0 50px;
     padding: 0 12px;
   }
 
@@ -45,20 +50,8 @@
         object-fit: contain;
 
         @media screen and (max-width: $m-grid-min-vp) {
-          width: 40px;
-          height: 40px;
-        }
-      }
-
-      &.m-marketingAsFeaturedIn__item--bigger {
-        img {
-          width: 96px;
-          height: 96px;
-
-          @media screen and (max-width: $m-grid-min-vp) {
-            width: 40px;
-            height: 40px;
-          }
+          width: 32px;
+          height: 32px;
         }
       }
     }

src/app/common/components/marketing/footer.component.html

 <div class="m-marketing__footer">
   <div class="m-grid m-marketingFooter__columns">
     <div
-      class="m-grid__column-3 m-grid__column-12--mobile m-marketingFooter__column"
+      class="m-grid__column-4 m-grid__column-12--mobile m-marketingFooter__column m-marketingFooter__brandColumn"
     >
-      <h4 i18n>About</h4>
+      <div class="m-marketingFooter__mindsLogo"></div>
 
-      <ul>
-        <li hidden>
-          <a href="#" i18n>
-            Company
-          </a>
-        </li>
+      <h4 class="m-marketingFooter__sloganText" i18n>
+        Take back control of your social media
+      </h4>
 
-        <li hidden>
-          <a href="#" i18n>
-            Mission
-          </a>
-        </li>
+      <div class="m-marketingFooter__text">&copy; {{ year }} Minds, Inc.</div>
+    </div>
 
-        <li hidden>
-          <a href="#" i18n>
-            Features
-          </a>
-        </li>
+    <div
+      class="m-grid__column-2 m-grid__column-12--mobile m-marketingFooter__column"
+    >
+      <h4 i18n>About</h4>
 
+      <ul>
         <li>
           <a routerLink="/mobile" i18n>
             Mobile
@@ -32,7 +26,7 @@
 
         <li>
           <a routerLink="/jobs" i18n>
-            Jobs
+            Careers
           </a>
         </li>
 
@@ -67,7 +61,7 @@
     </div>
 
     <div
-      class="m-grid__column-3 m-grid__column-12--mobile m-marketingFooter__column"
+      class="m-grid__column-2 m-grid__column-12--mobile m-marketingFooter__column"
     >
       <h4 i18n>Business</h4>
 
@@ -96,6 +90,12 @@
           </a>
         </li>
 
+        <li>
+          <a routerLink="/pay" i18n>
+            Pay
+          </a>
+        </li>
+
         <li>
           <a routerLink="/nodes" i18n>
             Nodes
@@ -109,8 +109,8 @@
         </li>
 
         <li>
-          <a routerLink="/wire" i18n>
-            Pay
+          <a routerLink="/rewards" i18n>
+            Rewards
           </a>
         </li>
 
@@ -123,7 +123,7 @@
     </div>
 
     <div
-      class="m-grid__column-3 m-grid__column-12--mobile m-marketingFooter__column"
+      class="m-grid__column-2 m-grid__column-12--mobile m-marketingFooter__column"
     >
       <h4>Developers</h4>
 
@@ -161,7 +161,7 @@
     </div>
 
     <div
-      class="m-grid__column-3 m-grid__column-12--mobile m-marketingFooter__column"
+      class="m-grid__column-2 m-grid__column-12--mobile m-marketingFooter__column"
     >
       <h4>Support</h4>
 
@@ -189,30 +189,19 @@
             Status
           </a>
         </li>
-
-        <li hidden>
-          <a routerLink="/p/contact" i18n>
-            Contact
-          </a>
-        </li>
       </ul>
     </div>
   </div>
 
-  <div class="m-marketing__sep m-marketing__sep--big"></div>
+  <div
+    class="m-marketing__sep m-marketing__sep--dashed m-marketing__sep--big"
+  ></div>
 
   <div class="m-grid m-marketingFooter__columns">
     <div
-      class="m-grid__column-2 m-grid__column-12--mobile m-marketingFooter__column m-marketingFooter__column--noMobileSpacing"
-      i18n
-    >
-      <div class="m-marketingFooter__text">&copy; {{ year }} Minds, Inc.</div>
-    </div>
-
-    <div
-      class="m-grid__column-10 m-grid__column-12--mobile m-marketingFooter__column"
+      class="m-grid__column-12 m-grid__column-12--mobile m-marketingFooter__column"
     >
-      <ul class="m-marketingFooter__inlineList">
+      <ul class="m-marketingFooter__inlineList m-marketingFooter__legalLinks">
         <li>
           <a routerLink="/p/terms" i18n>
             Terms of Service

src/app/common/components/marketing/footer.component.scss

@@ -2,10 +2,10 @@
 
 m-marketing__footer {
   display: block;
-  margin-top: 105px;
+  margin: 105px 0 95px;
 
   @media screen and (max-width: $m-grid-min-vp) {
-    margin-top: 80px;
+    margin: 80px 0 0;
   }
 
   @include m-theme() {
@@ -19,12 +19,14 @@ m-marketing__footer {
 
 .m-marketing__footer {
   padding: 60px 0 48px;
+  border-top: 1px dashed;
 
   @media screen and (max-width: $m-grid-min-vp) {
     padding: 32px 0;
   }
 
   @include m-theme() {
+    border-color: themed($m-grey-50);
     color: themed($m-grey-800);
   }
 
@@ -47,6 +49,17 @@ m-marketing__footer {
       }
     }
 
+    &.m-marketingFooter__brandColumn {
+      width: 60%;
+      margin: 0 auto;
+
+      @media screen and (max-width: $m-grid-min-vp) {
+        width: 60%;
+        grid-row: 999;
+        margin: 32px 0 0;
+      }
+    }
+
     h4 {
       font-weight: 500;
       font-size: 16px;
@@ -60,11 +73,34 @@ m-marketing__footer {
       @include m-theme() {
         color: themed($m-grey-800);
       }
+
+      &.m-marketingFooter__sloganText {
+        margin: 0 0 21px;
+      }
+    }
+
+    .m-marketingFooter__mindsLogo {
+      width: 116px;
+      height: 43px;
+      margin: 0 0 35px;
+      background: url('<%= APP_CDN %>/assets/logos/logo.svg') no-repeat center
+        left;
+      background-size: contain;
+
+      @include m-on-theme(dark) {
+        background: url('<%= APP_CDN %>/assets/logos/logo-white.svg') no-repeat
+          center left;
+        background-size: contain;
+      }
     }
 
     .m-marketingFooter__text {
       font-size: 14px;
       line-height: 26px;
+
+      @include m-theme() {
+        color: themed($m-grey-300);
+      }
     }
 
     ul {
@@ -90,7 +126,7 @@ m-marketing__footer {
 
         a {
           color: inherit;
-          font-weight: 300;
+          font-weight: normal;
           text-decoration: none;
         }
       }
@@ -108,6 +144,16 @@ m-marketing__footer {
             margin-right: 0;
           }
         }
+
+        &.m-marketingFooter__legalLinks {
+          text-align: right;
+          padding-right: 92px;
+
+          @media screen and (max-width: $m-grid-min-vp) {
+            text-align: inherit;
+            padding-right: initial;
+          }
+        }
       }
     }
   }

src/app/common/components/marketing/footer.component.ts

@@ -7,4 +7,6 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
 })
 export class MarketingFooterComponent {
   readonly year: number = new Date().getFullYear();
+
+  readonly cdnAssetsUrl: string = window.Minds.cdn_assets_url;
 }

src/app/common/components/marketing/marketing.component.scss

@@ -20,6 +20,10 @@ m-marketing {
     width: 100%;
     margin: 40px 0;
 
+    &.m-marketing__sep--dashed {
+      border-top-style: dashed;
+    }
+
     &.m-marketing__sep--big {
       margin: 60px 0;
     }

src/app/common/components/marketing/styles/general.scss

+@import '../../../../foundation/grid-values';
+
+.m-marketing__main,
+.m-marketing__section {
+  a {
+    font: inherit;
+    text-decoration: none;
+    cursor: pointer;
+
+    @include m-theme() {
+      color: themed($m-blue);
+    }
+  }
+
+  .m-marketing--hideMobile {
+    @media screen and (max-width: $m-grid-min-vp) {
+      display: none;
+    }
+  }
+
+  .m-marketing__title,
+  h1 {
+    font-size: 22px;
+    line-height: 44px;
+    font-weight: bold;
+    opacity: 0.7;
+    margin: 12px 0 4px;
+
+    @include m-theme() {
+      color: themed($m-grey-800);
+    }
+  }
+
+  .m-marketing__subtitle,
+  h2 {
+    font-weight: 900;
+    font-size: 42px;
+    line-height: 44px;
+    margin: 0 0 23px;
+    position: relative;
+    z-index: 0;
+
+    @media screen and (max-width: $m-grid-min-vp) {
+      font-size: 32px;
+      line-height: 34px;
+      margin: 0 0 18px;
+    }
+
+    &.m-marketing__subtitle--asTitle {
+      font-size: 48px;
+      line-height: 53px;
+      margin: 0 0 26px;
+
+      @media screen and (max-width: $m-grid-min-vp) {
+        font-size: 38px;
+        line-height: 46px;
+        margin: 0 0 21px;
+      }
+    }
+
+    em {
+      font-style: inherit;
+      text-decoration: inherit;
+      white-space: nowrap;
+      position: relative;
+
+      &::after {
+        content: '';
+        display: inline-block;
+        position: absolute;
+        background: rgba(80, 226, 195, 0.3);
+        top: 0.36em;
+        left: -0.03em;
+        right: -0.03em;
+        bottom: 0.22em;
+        pointer-events: none;
+        z-index: -1;
+      }
+    }
+
+    em + em::after {
+      left: -0.25em;
+    }
+  }
+
+  p.m-marketing__description {
+    font-size: 18px;
+    line-height: 27px;
+    margin: 0 0 36px;
+  }
+
+  ul.m-marketing__points {
+    list-style: disc;
+    margin: 0 0 45px;
+    padding: 0 0 0 1em;
+    font-size: 16px;
+    line-height: 21px;
+
+    > li {
+      margin-bottom: 19px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  .m-marketing__actionButtons {
+    > * {
+      margin: 0 25px 0 0;
+
+      @media screen and (max-width: $m-grid-min-vp) {
+        margin: 0 0 20px;
+      }
+
+      &:last-child {
+        margin-right: initial;
+      }
+    }
+  }
+
+  .m-marketing__links {
+    @media screen and (max-width: $m-grid-min-vp) {
+      text-align: center;
+    }
+
+    h3 {
+      margin: 0;
+      font-size: 15px;
+      line-height: 20px;
+      opacity: 0.5;
+      font-weight: normal;
+
+      @include m-theme() {
+        color: themed($m-grey-800);
+      }
+    }
+
+    ul {
+      margin: 13px 0 0 0;
+      padding: 0;
+      list-style: none;
+
+      > li {
+        margin: 0 0 10px;
+        font-size: 15px;
+        line-height: 20px;
+
+        &:last-child {
+          margin: 0;
+        }
+      }
+    }
+
+    a {
+      > * {
+        vertical-align: middle;
+      }
+
+      i.material-icons {
+        margin-left: 0.35em;
+        font-size: 16px;
+        line-height: 16px;
+        opacity: 0.4;
+
+        @include m-theme() {
+          color: themed($m-grey-800);
+        }
+      }
+    }
+  }
+}

src/app/common/components/marketing/marketing-styles.scss → src/app/common/components/marketing/styles/style-1.scss

+@import '../../../../foundation/grid-values';
+
 .m-marketing__main,
 .m-marketing__section {
-  // Common
-  overflow-x: hidden;
-
-  .m-marketing--hideMobile {
-    @media screen and (max-width: $m-grid-min-vp) {
-      display: none;
-    }
-  }
-
-  .m-marketing__title,
-  h1 {
-    font-size: 22px;
-    line-height: 44px;
-    font-weight: bold;
-    opacity: 0.7;
-    margin: 12px 0 4px;
-
-    @include m-theme() {
-      color: themed($m-grey-800);
-    }
-  }
-
-  .m-marketing__subtitle,
-  h2 {
-    font-weight: 900;
-    font-size: 42px;
-    line-height: 44px;
-    margin: 0 0 23px;
-    position: relative;
-    z-index: 0;
-
-    @media screen and (max-width: $m-grid-min-vp) {
-      font-size: 32px;
-      line-height: 34px;
-      margin: 0 0 18px;
-    }
-
-    &.m-marketing__subtitle--asTitle {
-      font-size: 48px;
-      line-height: 53px;
-      margin: 0 0 26px;
-
-      @media screen and (max-width: $m-grid-min-vp) {
-        font-size: 38px;
-        line-height: 46px;
-        margin: 0 0 21px;
-      }
-    }
-
-    em {
-      font-style: inherit;
-      text-decoration: inherit;
-      white-space: nowrap;
-      position: relative;
-
-      &::after {
-        content: '';
-        display: inline-block;
-        position: absolute;
-        background: rgba(80, 226, 195, 0.3);
-        top: 0.36em;
-        left: -0.03em;
-        right: -0.03em;
-        bottom: 0.22em;
-        pointer-events: none;
-        z-index: -1;
-      }
-    }
-
-    em + em::after {
-      left: -0.25em;
-    }
-  }
-
-  p.m-marketing__description {
-    font-size: 18px;
-    line-height: 27px;
-    margin: 0 0 36px;
-  }
-
-  ul.m-marketing__points {
-    list-style: disc;
-    margin: 0 0 45px;
-    padding: 0 0 0 1em;
-    font-size: 16px;
-    line-height: 21px;
-
-    > li {
-      margin-bottom: 19px;
-
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
-  }
-
-  // Style 1
-
   &.m-marketing__section--style-1 {
     @include m-theme() {
       background: linear-gradient(
@@ -272,160 +176,4 @@
       }
     }
   }
-
-  // Style 2
-
-  &.m-marketing__section--style-2 {
-    .m-marketing__wrapper {
-      position: relative;
-      z-index: 0;
-      padding: 72px 0 32px;
-
-      @media screen and (max-width: $m-grid-min-vp) {
-        padding: 0;
-      }
-    }
-
-    .m-marketing__body {
-      position: relative;
-
-      @media screen and (max-width: $m-grid-min-vp) {
-        padding: 0 30px 30px;
-      }
-
-      &::before {
-        content: '';
-        position: absolute;
-        top: 0;
-        right: -290px;
-        bottom: -56px;
-        left: 0;
-        transform: translate(-86px, -56px);
-        clip-path: polygon(0% 0%, 0% 100%, 100% 92%, 100% 0%);
-        z-index: -1;
-
-        @include m-theme() {
-          background: linear-gradient(
-            180deg,
-            themed($m-marketing-bg-colored-gradient-start) 0%,
-            themed($m-marketing-bg-colored-gradient-end) 99.99%
-          );
-        }
-
-        @media screen and (max-width: $m-grid-min-vp) {
-          right: 0;
-          bottom: -3vw;
-          transform: none;
-          clip-path: none;
-        }
-      }
-
-      h1 {
-        @include m-on-theme(dark) {
-          color: #ffffff;
-        }
-
-        @media screen and (max-width: $m-grid-min-vp) {
-          margin: 15px 0 15px;
-          text-align: center;
-        }
-      }
-
-      h2 {
-        @include m-on-theme(dark) {
-          color: #ffffff;
-        }
-
-        @media screen and (max-width: $m-grid-min-vp) {
-          font-size: 28px;
-          line-height: 32px;
-          margin: 0 0 17px;
-          text-align: center;
-        }
-      }
-    }
-
-    p.m-marketing__description {
-      margin-bottom: 42px;
-      padding-right: 200px;
-
-      @include m-theme() {
-        color: themed($m-grey-300);
-      }
-
-      @include m-on-theme(dark) {
-        color: #ffffff;
-      }
-
-      @media screen and (max-width: $m-grid-min-vp) {
-        padding-right: 0;
-        margin-bottom: 30px;
-        font-size: 16px;
-        line-height: 23px;
-        text-align: center;
-      }
-    }
-
-    .m-marketing__image {
-      position: relative;
-      z-index: 0;
-
-      img {
-        object-fit: contain;
-        clip-path: polygon(0% 1%, 0% 97%, 100% 100%, 100% 0%);
-
-        @media screen and (max-width: $m-grid-min-vp) {
-          width: 100vw;
-          height: 100vw;
-          object-fit: cover;
-          clip-path: polygon(0% 2%, 0% 97%, 100% 100%, 100% 0%);
-        }
-      }
-
-      span {
-        display: inline-block;
-        position: relative;
-
-        // Deco
-
-        &::before {
-          content: '';
-          display: block;
-          position: absolute;
-          width: 393px;
-          height: 193px;
-          bottom: 0;
-          right: 0;
-          transform: translate(45px, 32px);
-          background: url('<%= APP_CDN %>/assets/marketing/deco_1.svg')
-            no-repeat;
-          z-index: -1;
-
-          @media screen and (max-width: $m-grid-min-vp) {
-            content: initial;
-            display: none;
-          }
-        }
-
-        &::after {
-          content: '';
-          display: block;
-          position: absolute;
-          top: 0;
-          right: 0;
-          width: 284px;
-          height: 262px;
-          transform: translate(35px, -35px);
-          background: url('<%= APP_CDN %>/assets/marketing/deco_2-straight.svg')
-            no-repeat;
-          z-index: -1;
-
-          @media screen and (max-width: $m-grid-min-vp) {
-            content: initial;
-            display: none;
-          }
-        }
-      }
-    }
-  }
 }

src/app/common/components/marketing/styles/style-2.scss

+@import '../../../../foundation/grid-values';
+
+.m-marketing__main,
+.m-marketing__section {
+  &.m-marketing__section--style-2 {
+    .m-marketing__wrapper {
+      position: relative;
+      z-index: 0;
+      padding: 72px 0 0;
+      margin-bottom: 95px;
+
+      @media screen and (max-width: $m-grid-min-vp) {
+        padding: 0;
+        margin-bottom: 15px;
+      }
+    }
+
+    .m-marketing__body {
+      position: relative;
+
+      @media screen and (max-width: $m-grid-min-vp) {
+        padding: 0 30px 30px;
+      }
+
+      &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        right: -290px;
+        bottom: -56px;
+        left: 0;
+        transform: translate(-86px, -56px);
+        clip-path: polygon(0% 0%, 0% 100%, 100% 92%, 100% 0%);
+        z-index: -1;
+
+        @include m-theme() {
+          background: linear-gradient(
+            180deg,
+            themed($m-marketing-bg-colored-gradient-start) 0%,
+            themed($m-marketing-bg-colored-gradient-end) 99.99%
+          );
+        }
+
+        @media screen and (max-width: $m-grid-min-vp) {
+          right: 0;
+          bottom: -3vw;
+          transform: none;
+          clip-path: none;
+        }
+      }
+
+      h1 {
+        @include m-on-theme(dark) {
+          color: #ffffff;
+        }
+
+        @media screen and (max-width: $m-grid-min-vp) {
+          margin: 15px 0 15px;
+          text-align: center;
+        }
+      }
+
+      h2 {
+        @include m-on-theme(dark) {
+          color: #ffffff;
+        }
+
+        @media screen and (max-width: $m-grid-min-vp) {
+          font-size: 28px;
+          line-height: 32px;
+          margin: 0 0 17px;
+          text-align: center;
+        }
+      }
+    }
+
+    p.m-marketing__description {
+      margin-bottom: 42px;
+      padding-right: 200px;
+
+      @include m-theme() {
+        color: themed($m-grey-300);
+      }
+
+      @include m-on-theme(dark) {
+        color: #ffffff;
+      }
+
+      @media screen and (max-width: $m-grid-min-vp) {
+        padding-right: 0;
+        margin-bottom: 30px;
+        font-size: 16px;
+        line-height: 23px;
+        text-align: center;
+      }
+    }
+
+    .m-marketing__image {
+      position: relative;
+      z-index: 0;
+
+      img {
+        object-fit: cover;
+        width: 438px;
+        height: 547px;
+        clip-path: polygon(0% 1%, 0% 97%, 100% 100%, 100% 0%);
+
+        @media screen and (max-width: $m-grid-min-vp) {
+          width: 100vw;
+          height: 100vw;
+          clip-path: polygon(0% 2%, 0% 97%, 100% 100%, 100% 0%);
+        }
+      }
+
+      span {
+        display: inline-block;
+        position: relative;
+
+        // Deco
+
+        &::before {
+          content: '';
+          display: block;
+          position: absolute;
+          width: 393px;
+          height: 193px;
+          bottom: 0;
+          right: 0;
+          transform: translate(45px, 32px);
+          background: url('<%= APP_CDN %>/assets/marketing/deco_1.svg')
+            no-repeat;
+          z-index: -1;
+
+          @media screen and (max-width: $m-grid-min-vp) {
+            content: initial;
+            display: none;
+          }
+        }
+
+        &::after {
+          content: '';
+          display: block;
+          position: absolute;
+          top: 0;
+          right: 0;
+          width: 284px;
+          height: 262px;
+          transform: translate(35px, -35px);
+          background: url('<%= APP_CDN %>/assets/marketing/deco_2-straight.svg')
+            no-repeat;
+          z-index: -1;
+
+          @media screen and (max-width: $m-grid-min-vp) {
+            content: initial;
+            display: none;
+          }
+        }
+      }
+    }
+  }
+}

src/app/common/components/marketing/styles/style-3.scss

+@import '../../../../foundation/grid-values';
+
+.m-marketing__main,
+.m-marketing__section {
+  &.m-marketing__section--style-3 {
+    margin-bottom: 100px;
+
+    @media screen and (max-width: $m-grid-min-vp) {
+      margin-bottom: 80px;
+    }
+
+    .m-marketing__wrapper {
+      position: relative;
+      z-index: 0;
+      padding: 80px 0 80px;
+
+      @media screen and (max-width: $m-grid-min-vp) {
+        padding: 0;
+      }
+    }
+
+    .m-marketing__body {
+      position: relative;
+      margin: auto 0;
+      padding: 0;
+      min-height: 330px;
+
+      @media screen and (max-width: $m-grid-min-vp) {
+        padding: 0 30px 0;
+        min-height: 0;
+      }
+
+      &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        right: -360px;
+        left: 0;
+        bottom: auto;
+        height: calc(100% + 160px);
+        transform: translate(-230px, -80px);
+        clip-path: polygon(0% 6%, 0% 95%, 100% 100%, 100% 0%);
+        z-index: -1;
+
+        @include m-theme() {
+          background: linear-gradient(
+            180deg,
+            themed($m-marketing-bg-colored-gradient-start) 0%,
+            themed($m-marketing-bg-colored-gradient-end) 99.99%
+          );
+        }
+
+        @media screen and (max-width: $m-grid-min-vp) {
+          content: initial;
+          display: none;
+        }
+      }
+
+      h2 {
+        @include m-on-theme(dark) {
+          color: #ffffff;
+        }
+
+        @media screen and (max-width: $m-grid-min-vp) {
+          font-size: 28px;
+          line-height: 32px;
+          margin: 20px 0 17px;
+          text-align: center;
+        }
+      }
+    }
+
+    p.m-marketing__description {
+      margin-bottom: 42px;
+      padding-right: 200px;
+
+      @include m-theme() {
+        color: themed($m-grey-300);
+      }
+
+      @include m-on-theme(dark) {
+        color: #ffffff;
+      }
+
+      @media screen and (max-width: $m-grid-min-vp) {
+        padding-right: 0;
+        margin-bottom: 30px;
+        font-size: 16px;
+        line-height: 23px;
+        text-align: center;
+      }
+    }
+
+    ul.m-marketing__points {
+      @include m-theme() {
+        color: themed($m-grey-300);
+      }
+
+      @include m-on-theme(dark) {
+        color: #ffffff;
+      }
+
+      > li em {
+        font-style: normal;
+
+        @include m-theme() {
+          color: themed($m-black);
+        }
+
+        @include m-on-theme(dark) {
+          color: #ffffff;
+          font-weight: bold;
+        }
+      }
+    }
+
+    .m-marketing__image {
+      position: relative;
+      z-index: 0;
+      grid-column-start: 1;
+      grid-row: 1;
+
+      img.m-marketing__image--1 {
+        object-fit: cover;
+        width: 438px;
+        height: 518px;
+        clip-path: polygon(0% 1%, 0% 100%, 100% 96%, 100% 0%);
+
+        @media screen and (max-width: $m-grid-min-vp) {
+          width: 100vw;
+          height: 100vw;
+          clip-path: polygon(0% 1%, 0% 100%, 100% 97%, 100% 0%);
+        }
+      }
+
+      img.m-marketing__image--2 {
+        object-fit: contain;
+        width: 358px;
+        height: 191px;
+        position: absolute;
+        right: 0;
+        bottom: 35px;
+        transform: translate(15px, 0);
+
+        @media screen and (max-width: $m-grid-min-vp) {
+          right: auto;
+          left: 50%;
+          bottom: 0;
+          transform: translate(-50%, 50%);
+          width: 85vw;
+          height: 45.35vw;
+        }
+      }
+
+      span {
+        display: inline-block;
+        position: relative;
+        width: 100%;
+
+        @media screen and (max-width: $m-grid-min-vp) {
+          margin-bottom: calc(
+            20vw + 40px
+          ); // A little bit less than half UX image + normal margin
+
+          &.m-marketing__image--noUxSample {
+            margin-bottom: 40px;
+          }
+        }
+
+        // Deco
+
+        &::after {
+          content: '';
+          display: block;
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 191px;
+          height: 191px;
+          transform: translate(-60px, -58px);
+          background: url('<%= APP_CDN %>/assets/marketing/deco_3.svg')
+            no-repeat;
+          z-index: -1;
+
+          @media screen and (max-width: $m-grid-min-vp) {
+            content: initial;
+            display: none;
+          }
+        }
+      }
+    }
+  }
+}

src/app/common/components/marketing/styles/style-4.scss

+@import '../../../../foundation/grid-values';
+
+.m-marketing__main,
+.m-marketing__section {
+  &.m-marketing__section--style-4 {
+    margin-bottom: 100px;
+
+    @media screen and (max-width: $m-grid-min-vp) {
+      margin-bottom: 80px;
+    }
+
+    .m-marketing__wrapper {
+      position: relative;
+      z-index: 0;
+
+      @media screen and (max-width: $m-grid-min-vp) {
+        padding: 0;
+      }
+    }
+
+    .m-marketing__body {
+      position: relative;
+      margin: auto 0;
+      padding: 0;
+      min-height: 360px;
+
+      @media screen and (max-width: $m-grid-min-vp) {
+        padding: 0 30px 0;
+        min-height: 0;
+      }
+
+      h2 {
+        @include m-on-theme(dark) {
+          color: #ffffff;
+        }
+
+        @media screen and (max-width: $m-grid-min-vp) {
+          font-size: 28px;
+          line-height: 32px;
+          margin: 20px 0 17px;
+          text-align: center;
+        }
+      }
+    }
+
+    p.m-marketing__description {
+      margin-bottom: 42px;
+      padding-right: 200px;
+
+      @include m-theme() {
+        color: themed($m-grey-300);
+      }
+
+      @include m-on-theme(dark) {
+        color: #ffffff;
+      }
+
+      @media screen and (max-width: $m-grid-min-vp) {
+        padding-right: 0;
+        margin-bottom: 30px;
+        font-size: 16px;
+        line-height: 23px;
+        text-align: center;
+      }
+    }
+
+    ul.m-marketing__points {
+      @include m-theme() {
+        color: themed($m-grey-300);
+      }
+
+      @include m-on-theme(dark) {
+        color: #ffffff;
+      }
+
+      > li em {
+        font-style: normal;
+
+        @include m-theme() {
+          color: themed($m-black);
+        }
+
+        @include m-on-theme(dark) {
+          color: #ffffff;
+          font-weight: bold;
+        }
+      }
+    }
+
+    .m-marketing__image {
+      position: relative;
+      z-index: 0;
+
+      @media screen and (max-width: $m-grid-min-vp) {
+        grid-row: 1;
+      }
+
+      img.m-marketing__image--1 {
+        object-fit: cover;
+        width: 438px;
+        height: 547px;
+        clip-path: polygon(0% 1%, 0% 96%, 100% 100%, 100% 0%);
+
+        @media screen and (max-width: $m-grid-min-vp) {
+          width: 100vw;
+          height: 100vw;
+          clip-path: polygon(0% 1%, 0% 97%, 100% 100%, 100% 0%);
+        }
+      }
+
+      img.m-marketing__image--2 {
+        object-fit: contain;
+        width: 358px;
+        height: 191px;
+        position: absolute;
+        left: 0;
+        bottom: 35px;
+        transform: translate(-15px, 0);
+
+        @media screen and (max-width: $m-grid-min-vp) {
+          right: auto;
+          left: 50%;
+          bottom: 0;
+          transform: translate(-50%, 50%);
+          width: 85vw;
+          height: 45.35vw;
+        }
+      }
+
+      span {
+        display: inline-block;
+        position: relative;
+        width: 100%;
+        text-align: right;
+
+        @media screen and (max-width: $m-grid-min-vp) {
+          margin-bottom: calc(
+            20vw + 40px
+          ); // A little bit less than half UX image + normal margin
+
+          &.m-marketing__image--noUxSample {
+            margin-bottom: 40px;
+          }
+        }
+
+        // Deco
+
+        &::after {
+          content: '';
+          display: block;
+          position: absolute;
+          right: 0;
+          bottom: 0;
+          width: 169px;
+          height: 169px;
+          transform: translate(50px, 50px);
+          background: url('<%= APP_CDN %>/assets/marketing/deco_4.svg')
+            no-repeat;
+          z-index: -1;
+
+          @media screen and (max-width: $m-grid-min-vp) {
+            content: initial;
+            display: none;
+          }
+        }
+      }
+    }
+  }
+}

src/app/common/components/marketing/styles/style-tail.scss

+@import '../../../../foundation/grid-values';
+
+.m-marketing__main,
+.m-marketing__section {
+  &.m-marketing__section--tail {
+    h2 {
+      font-size: 24px;
+      line-height: 32px;
+      font-weight: 700;
+      margin: 0 0 70px;
+
+      @include m-theme() {
+        color: themed($m-grey-300);
+      }
+
+      @media screen and (max-width: $m-grid-min-vp) {
+        margin: 0 0 35px;
+      }
+    }
+
+    .m-marketing__body {
+      position: relative;
+      text-align: center;
+      padding: 0 36px;
+
+      h3 {
+        margin: 0 0 24px;
+        font-size: 24px;
+        line-height: 32px;
+        font-weight: 900;
+
+        @media screen and (max-width: $m-grid-min-vp) {
+          margin: 0 0 12px;
+        }
+      }
+
+      p.m-marketing__description {
+        font-size: 16px;
+        line-height: 21px;
+
+        @include m-theme() {
+          color: themed($m-grey-300);
+        }
+
+        em {
+          font-style: normal;
+
+          @include m-theme() {
+            color: themed($m-black);
+          }
+
+          @include m-on-theme(dark) {
+            color: #ffffff;
+            font-weight: bold;
+          }
+        }
+      }
+
+      &.m-marketing__body--extra {
+        margin-top: 135px;
+
+        @media screen and (max-width: $m-grid-min-vp) {
+          margin-top: 0;
+        }
+      }
+    }
+
+    .m-marketingSectionTail__table {
+      .m-marketing__body {
+        @media screen and (max-width: $m-grid-min-vp) {
+          margin-bottom: 45px;
+
+          &:last-child {
+            margin-bottom: 55px;
+          }
+        }
+      }
+
+      > *::after {
+        content: '';
+        display: block;
+        position: absolute;
+        width: 1px;
+        height: 100%;
+        top: 0;
+        right: 0;
+        transform: translateX(($m-grid-gap / 2) + 1px);
+
+        @include m-theme() {
+          background: linear-gradient(
+            to bottom,
+            rgba(themed($m-grey-100), 0) 0%,
+            rgba(themed($m-grey-100), 0) 25%,
+            rgba(themed($m-grey-100), 0.9) 50%,
+            rgba(themed($m-grey-100), 0) 75%,
+            rgba(themed($m-grey-100), 0) 100%
+          );
+        }
+
+        @media screen and (max-width: $m-grid-min-vp) {
+          content: initial;
+          display: initial;
+        }
+      }
+
+      > *:last-child::after {
+        content: initial;
+        display: initial;
+      }
+    }
+  }
+}

src/app/foundation/buttons.scss

@@ -17,12 +17,36 @@
   appearance: none;
   text-decoration: none;
 
+  > * {
+    vertical-align: middle;
+    margin-right: 0.35em; // A space
+
+    &:last-child {
+      margin-right: initial;
+    }
+  }
+
+  i.material-icons {
+    line-height: 1em;
+    font-size: 20px;
+    height: auto;
+    color: inherit;
+    opacity: 0.4;
+  }
+
   @include m-theme() {
     background: themed($m-blue);
     color: themed($m-white-always);
     border-color: themed($m-blue);
   }
 
+  &.mf-button--smaller {
+    font-size: 15px;
+    line-height: 21px;
+    padding: 10px 20px;
+    border-radius: 3px;
+  }
+
   &.mf-button--alt {
     @include m-theme() {
       background: themed($m-aqua);
@@ -55,12 +79,20 @@
 
   &.mf-button--hollow {
     @include m-theme() {
-      background: themed($m-white);
+      background: transparent; // Within theme because of cascading
       color: themed($m-black);
       border-color: themed($m-blue);
     }
   }
 
+  &.mf-button--hollow-mono {
+    @include m-theme() {
+      background: transparent; // Within theme because of cascading
+      color: themed($m-black);
+      border-color: themed($m-grey-200);
+    }
+  }
+
   &[disabled] {
     cursor: default;
     opacity: 0.6;

src/app/modules/blockchain/blockchain.module.ts

@@ -22,9 +22,11 @@ import { TokenDistributionEventService } from './contracts/token-distribution-ev
 import { LocalWalletService } from './local-wallet.service';
 import { OffchainPaymentService } from './offchain-payment.service';
 import { Client } from '../../services/api/client';
-import { MarketingModule } from '../marketing/marketing.module';
-import { BlockchainMarketingModule } from './marketing/marketing.module';
 import { GetMetamaskComponent } from './metamask/getmetamask.component';
+import { BlockchainEthModalComponent } from './eth-modal/eth-modal.component';
+import { BlockchainMarketingOnboardComponent } from './token-purchase/onboard.component';
+import { BlockchainPurchaseComponent } from './token-purchase/purchase.component';
+import { ModalsModule } from '../modals/modals.module';
 
 const cryptoRoutes: Routes = [
   {
@@ -45,7 +47,7 @@ const cryptoRoutes: Routes = [
     FormsModule,
     ReactiveFormsModule,
     FaqModule,
-    //    BlockchainMarketingModule,
+    ModalsModule,
   ],
   declarations: [
     BlockchainConsoleComponent,
@@ -54,6 +56,9 @@ const cryptoRoutes: Routes = [
     TransactionOverlayComponent,
     BlockchainTdeBuyComponent,
     GetMetamaskComponent,
+    BlockchainEthModalComponent,
+    BlockchainMarketingOnboardComponent,
+    BlockchainPurchaseComponent,
   ],
   providers: [
     TransactionOverlayService,
@@ -104,6 +109,8 @@ const cryptoRoutes: Routes = [
     TransactionOverlayComponent,
     BlockchainTdeBuyComponent,
     GetMetamaskComponent,
+    BlockchainEthModalComponent,
+    BlockchainPurchaseComponent,
   ],
   entryComponents: [BlockchainTdeBuyComponent],
 })

src/app/modules/blockchain/marketing/blogs.component.html

-<div class="m-blockchain--marketing--blogs">
-  <m-blog--tile *ngFor="let blog of blogs" [entity]="blog"> </m-blog--tile>
-</div>

src/app/modules/blockchain/marketing/blogs.component.ts

-import { Component } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-
-import { Subscription } from 'rxjs';
-
-import { Client } from '../../../services/api';
-import { MindsBlogListResponse } from '../../../interfaces/responses';
-
-@Component({
-  selector: 'm-blockchain--marketing--blogs',
-  templateUrl: 'blogs.component.html',
-})
-export class BlockchainMarketingBlogsComponent {
-  blogs = [
-    {
-      guid: '871791809876131840',
-      title: 'How to buy MINDS tokens',
-      ownerObj: {
-        name: 'Minds',
-        username: 'minds',
-        guid: '100000000000000519',
-      },
-      thumbnail_src:
-        window.Minds.cdn_url + 'fs/v1/banners/871791809876131840/1533585765',
-      header_bg: true,
-    },
-    {
-      guid: '871789298595016704',
-      title: 'How to buy ETH on Coinbase',
-      ownerObj: {
-        name: 'Minds',
-        username: 'minds',
-        guid: '100000000000000519',
-      },
-      thumbnail_src:
-        window.Minds.cdn_url + 'fs/v1/banners/871789298595016704/1533585765',
-      header_bg: true,
-    },
-    {
-      guid: '871787065656385536',
-      title: 'How to buy ETH on Gemini',
-      ownerObj: {
-        name: 'Minds',
-        username: 'minds',
-        guid: '100000000000000519',
-      },
-      thumbnail_src:
-        window.Minds.cdn_url + 'fs/v1/banners/871787065656385536/1533585765',
-      header_bg: true,
-    },
-    {
-      guid: '871783126122799104',
-      title: 'How to setup your wallet with MetaMask',
-      ownerObj: {
-        name: 'Minds',
-        username: 'minds',
-        guid: '100000000000000519',
-      },
-      thumbnail_src:
-        window.Minds.cdn_url + 'fs/v1/banners/871783126122799104/1533585765',
-      header_bg: true,
-    },
-    {
-      guid: '871784584725569536',
-      title: 'How to setup your wallet without MetaMask',
-      ownerObj: {
-        name: 'Minds',
-        username: 'minds',
-        guid: '100000000000000519',
-      },
-      thumbnail_src:
-        window.Minds.cdn_url + 'fs/v1/banners/871784584725569536/1533585765',
-      header_bg: true,
-    },
-    {
-      guid: '826188573910073344',
-      title: 'Crypto launch, new apps, and more',
-      ownerObj: {
-        name: 'Minds',
-        username: 'minds',
-        guid: '100000000000000519',
-      },
-      thumbnail_src:
-        window.Minds.cdn_url + 'fs/v1/banners/826188573910073344/1533585765',
-      header_bg: true,
-    },
-  ];
-
-  ngOnInit() {}
-}

src/app/modules/blockchain/marketing/countdown.component.html

-<div class="m-blockchain--marketing--countdown">
-  <div class="m-blockchain--marketing--countdown--col">
-    <span>{{ days }}</span>
-    <label>DAYS</label>
-  </div>
-  <div class="m-blockchain--marketing--countdown--col">
-    <span>{{ hours }}</span>
-    <label>hours</label>
-  </div>
-  <div class="m-blockchain--marketing--countdown--col">
-    <span>{{ minutes }}</span>
-    <label>Minutes</label>
-  </div>
-  <div class="m-blockchain--marketing--countdown--col">
-    <span>{{ seconds }}</span>
-    <label>Seconds</label>
-  </div>
-</div>

src/app/modules/blockchain/marketing/countdown.component.scss

-.m-blockchain--marketing--countdown {
-  display: flex;
-  flex-direction: row;
-  @include m-theme() {
-    color: themed($m-white);
-  }
-
-  .m-blockchain--marketing--countdown--col {
-    flex: 1;
-    text-align: center;
-
-    span {
-      display: block;
-      font-size: 42px;
-      line-height: 48px;
-      font-weight: 600;
-    }
-
-    label {
-      text-transform: uppercase;
-      letter-spacing: 1.25px;
-      font-weight: 300;
-    }
-  }
-}

src/app/modules/blockchain/marketing/countdown.component.ts

-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  Input,
-  OnDestroy,
-  OnInit,
-  ViewChild,
-} from '@angular/core';
-import { Client } from '../../../services/api/client';
-import { MindsTitle } from '../../../services/ux/title';
-import { OverlayModalService } from '../../../services/ux/overlay-modal';
-import { Session } from '../../../services/session';
-import * as BN from 'bn.js';
-
-@Component({
-  selector: 'm-blockchain--marketing--countdown',
-  templateUrl: 'countdown.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class BlockchainMarketingCountdownComponent implements OnInit {
-  end = new Date('Aug 13, 2018 12:00:00 UTC').getTime();
-
-  days: number;
-  hours: number;
-  minutes: number;
-  seconds: number;
-
-  interval;
-
-  constructor(private cd: ChangeDetectorRef) {}
-
-  ngOnInit() {
-    this.countDown();
-  }
-
-  countDown() {
-    this.interval = setInterval(() => {
-      let now = new Date().getTime();
-      let distance = this.end - now;
-
-      this.days = Math.floor(distance / (1000 * 60 * 60 * 24));
-      this.hours = Math.floor(
-        (distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
-      );
-      this.minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
-      this.seconds = Math.floor((distance % (1000 * 60)) / 1000);
-
-      this.cd.markForCheck();
-      this.cd.detectChanges();
-    });
-  }
-
-  ngOnDestroy() {
-    if (this.interval) clearInterval(this.interval);
-  }
-}

src/app/modules/blockchain/marketing/marketing.common.scss

+.m-blockchain--marketing--modal {
+  padding: 36px 16px 16px;
+}

src/app/modules/blockchain/marketing/marketing.component.scss

-m-blockchain--marketing {
-}
-
-.m-error--text {
-  margin-left: 8px;
-  font-size: 11px;
-  @include m-theme() {
-    color: themed($m-red);
-  }
-}
-
-.m-blockchain--marketing {
-  .m-marketing--hero {
-    .m-marketing--hero--inner {
-      flex-wrap: wrap;
-    }
-
-    .m-marketing--hero--slogans {
-      h1 {
-        font-size: 86px;
-      }
-    }
-
-    .m-marketing--hero--actions {
-      text-align: right;
-      flex-basis: 85px;
-      @media screen and (max-width: 500px) {
-        margin-left: 0;
-        margin-top: 52px;
-      }
-
-      .m-blockchain--marketing--pledge--input {
-        display: flex;
-        align-items: center;
-        text-align: right;
-
-        i {
-          font-size: 36px;
-          @include m-theme() {
-            color: themed($m-white);
-          }
-        }
-
-        .m-input {
-          border: 0;
-          padding: 12px 16px;
-          font-size: 26px;
-          letter-spacing: 2.5px;
-          font-weight: 600;
-          text-align: right;
-          min-width: 105px;
-          @include m-theme() {
-            color: themed($m-white);
-            background-color: rgba(themed($m-white), 0.2);
-          }
-        }
-
-        .m-btn {
-          height: auto;
-          padding: 20px;
-          border: 0;
-          margin: 16px 0;
-          margin-left: 12px;
-          white-space: nowrap;
-          @include m-theme() {
-            color: themed($m-white) !important;
-            background-color: rgba(themed($m-white), 0.3) !important;
-          }
-        }
-
-        .m-blockchain--marketing--pledges--eth-label {
-          font-size: 22px;
-          margin: 0 0 0 0.35em;
-          @include m-theme() {
-            color: themed($m-white);
-          }
-        }
-        .m-blockchain--marketing--pledges--eth-subtext {
-          font-size: 11px;
-          @include m-theme() {
-            color: themed($m-white);
-          }
-        }
-      }
-
-      .m-marketing--marketing-action-button {
-        button.mdl-button {
-          width: 200px;
-          font-size: 20px;
-          @include m-theme() {
-            color: themed($m-white);
-            background-color: themed($m-blue) !important;
-          }
-        }
-      }
-    }
-  }
-
-  .m-blockchain--marketing--pledges {
-    display: flex;
-    flex-direction: row;
-
-    .m-blockchain--marketing--pledges--amounts {
-      padding: 24px 12px;
-      text-align: left;
-      width: 100%;
-
-      tr {
-        height: 72px;
-      }
-
-      .m-blockchain--marketing--pledges--amounts--value {
-        line-height: 52px;
-        font-size: 52px;
-        font-weight: 600;
-        text-align: right;
-        @include m-theme() {
-          color: themed($m-white);
-        }
-      }
-
-      .m-blockchain--marketing--pledges--amounts--label {
-        font-size: 14px;
-        font-weight: 600;
-        width: 100px;
-        text-transform: uppercase;
-        letter-spacing: 1.5px;
-        font-weight: 400;
-        @include m-theme() {
-          color: themed($m-grey-50);
-        }
-
-        @media screen and (max-width: 1000px) {
-          display: none;
-        }
-      }
-    }
-  }
-
-  .m-blockchain--marketing--pledges--eth-label {
-    font-weight: 300;
-  }
-
-  m-video--progress-bar .seeker-ball {
-    top: 12px;
-  }
-
-  m-video .minds-video-play-icon {
-    @include m-theme() {
-      text-shadow: 0 0 3px rgba(themed($m-black-always), 0.6);
-    }
-  }
-}
-
-.m-blockchain--marketing--links a {
-  text-decoration: none;
-  line-height: 48px;
-  white-space: nowrap;
-  margin-right: 8px;
-
-  @media screen and (max-width: 420px) {
-    font-size: 10px;
-    padding: 6px;
-  }
-}
-
-.m-blockchain--marketing--modal {
-  text-align: left;
-  padding: 24px;
-
-  h2 {
-    font-size: 30px;
-    @include m-theme() {
-      color: themed($m-grey-800) !important;
-    }
-  }
-
-  m-blockchain--marketing--onboard {
-    text-align: left;
-
-    h2 {
-      display: none;
-    }
-
-    .m-token--onboarding--slide {
-      border: 0;
-      padding: 0 !important;
-
-      > div:nth-of-type(1) {
-        width: 100% !important;
-      }
-      > div:nth-of-type(2) {
-        display: none;
-      }
-    }
-  }
-
-  table {
-    margin: 16px 0;
-    tr {
-      height: 50px;
-    }
-  }
-}
-
-.m-blockchain--marketing--pledge--address-input {
-  padding-bottom: 16px;
-
-  label {
-    display: block;
-    margin-bottom: 8px;
-  }
-
-  input {
-    display: block;
-    width: 100%;
-    border-radius: 4px;
-    font-size: 16px;
-    padding: 8px;
-    letter-spacing: 1px;
-    @include m-theme() {
-      border: 1px solid themed($m-grey-50);
-    }
-  }
-}
-
-.m-blockchain--marketing--pledge--address-warn {
-  font-size: 0.85em;
-  padding-bottom: 16px;
-  @include m-theme() {
-    color: themed($m-grey-400);
-  }
-}
-
-.m-blockchain--marketing--pledge--note {
-  margin-bottom: 0;
-}
-
-.m-blockchain--marketing--pledge--note,
-.m-blockchain--marketing--pledge--check-label {
-  line-height: 1.35;
-  @include m-theme() {
-    color: themed($m-grey-800);
-  }
-}
-
-.m-blockchain--marketing--pledge--wallet-label {
-  font-weight: 500;
-}
-
-.m-blockchain--marketing-tde-stats {
-  max-width: 1028px;
-
-  > .mdl-cell {
-    display: flex;
-    justify-content: center;
-
-    .m-blockchain--marketing-stats-cell {
-      display: flex;
-      flex-direction: column;
-    }
-  }
-
-  .m-blockchain--marketing-value,
-  .m-blockchain--marketing-label {
-    display: block;
-    text-align: left;
-  }
-
-  .m-blockchain--marketing-value {
-    font-size: 52px;
-    letter-spacing: 2px;
-    line-height: 1.5;
-    @include m-theme() {
-      color: themed($m-blue);
-    }
-  }
-
-  .m-blockchain--marketing-label {
-    font-size: 24px;
-    letter-spacing: 2px;
-    font-weight: 300;
-    line-height: 1.5;
-    text-transform: uppercase;
-    @include m-theme() {
-      color: themed($m-grey-400);
-    }
-    @media screen and (max-width: $max-mobile) {
-      text-align: center;
-    }
-  }
-}
-
-.m-blockchain--marketing--bullets {
-  h3 {
-    font-weight: 600;
-  }
-  ul {
-    margin: 0;
-    padding-left: 0;
-    list-style: none;
-  }
-  li {
-    font-size: 16px;
-    letter-spacing: 0.25px;
-    padding: 16px 0;
-    @include m-theme() {
-      color: themed($m-grey-700);
-      border-bottom: 1px solid themed($m-grey-50);
-    }
-  }
-}
-
-.m-blockchain--marketing--balloon {
-  padding: 200px 0 !important;
-  margin-bottom: 100px;
-}
-
-.m-blockchain--marketing--press {
-  .m-marketing--section--grid {
-    align-items: center;
-    @media screen and (max-width: 500px) {
-      flex-wrap: wrap;
-      flex-direction: row;
-    }
-  }
-  .m-marketing--section--grid-col {
-    img {
-      max-width: 80%;
-    }
-    @media screen and (max-width: 500px) {
-      flex: 1;
-      margin: 4px !important;
-      padding: 0 !important;
-      img {
-        max-width: 80% !important;
-      }
-    }
-  }
-}
-
-.m-blockchain--value-logos {
-  padding-bottom: 0;
-
-  > img {
-    width: auto;
-    height: 128px;
-  }
-}
-
-.m-blockchain--marketing--team {
-  .m-marketing--section--grid {
-    justify-content: center;
-  }
-
-  .m-marketing--section--grid-col {
-    padding: 16px 8px;
-    text-align: center;
-    width: 225px;
-    flex-basis: 225px;
-    max-width: 225px;
-
-    @media screen and (max-width: 500px) {
-      width: auto;
-      margin: 8px auto !important;
-    }
-  }
-
-  .m-blockchain--marketing-person-image {
-    margin: auto;
-    width: 125px;
-    height: 125px;
-    background-position: center;
-    background-size: cover;
-    border-radius: 50%;
-    @include m-theme() {
-      border: 1px solid themed($m-grey-50);
-    }
-  }
-
-  .m-blockchain--marketing-person-name,
-  .m-blockchain--marketing-person-title {
-    display: block;
-    font-family: Roboto, sans-serif;
-    font-weight: 300;
-    letter-spacing: 0.25px;
-    line-height: 1.5;
-    text-align: center;
-  }
-
-  .m-blockchain--marketing-person-name {
-    font-size: 24px;
-    margin-top: 16px;
-    font-weight: 800;
-
-    img {
-      max-width: 16px;
-      filter: grayscale(1);
-      opacity: 0.62;
-      &:hover {
-        filter: initial;
-        opacity: 1;
-      }
-    }
-  }
-
-  .m-blockchain--marketing-person-title {
-    font-size: 14px;
-    @include m-theme() {
-      color: themed($m-grey-400);
-    }
-  }
-
-  &.m-blockchain--marketing--team--more {
-    padding-top: 0;
-
-    .m-blockchain--marketing-person-image {
-      width: 75px;
-      height: 75px;
-    }
-    .m-blockchain--marketing-person-name {
-      font-size: 18px;
-    }
-  }
-}
-
-.m-blockchain--marketing--blogs {
-  display: flex;
-  flex-direction: row;
-  max-width: 1008px;
-  margin: auto;
-  align-items: center;
-  flex-wrap: wrap;
-
-  @media screen and (max-width: 1350px) {
-    max-width: 1008px;
-  }
-
-  @media screen and (max-width: 1008px) {
-    max-width: 700px;
-  }
-
-  @media screen and (max-width: 675px) {
-    max-width: 360px;
-  }
-
-  m-blog--tile {
-    margin: 8px;
-    height: 200px;
-    width: 320px;
-    display: block;
-    text-align: left;
-  }
-}
-
-.m-blockchain--marketing-faq {
-  padding: 16px;
-  margin: auto;
-  max-width: 1280px;
-}
-
-m-blockchain--purchase m-modal {
-  text-align: left;
-}
-
-m-blockchain--pre-register {
-  padding: 0 !important;
-}
-
-.m-marketing--section--subsection-video {
-  @include m-theme() {
-    border: 1px solid themed($m-grey-100);
-  }
-
-  m-video {
-    @include m-theme() {
-      background-color: themed($m-grey-50);
-    }
-  }
-}
-
-.m-marketing--section-economy {
-  @include m-theme() {
-    background-color: themed($m-grey-50);
-  }
-}

src/app/modules/blockchain/marketing/marketing.component.ts

-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  OnDestroy,
-  OnInit,
-  ViewChild,
-} from '@angular/core';
-import { Client } from '../../../services/api/client';
-import { MindsTitle } from '../../../services/ux/title';
-import { WireCreatorComponent } from '../../wire/creator/creator.component';
-import { OverlayModalService } from '../../../services/ux/overlay-modal';
-import { BlockchainTdeBuyComponent } from '../tde-buy/tde-buy.component';
-
-@Component({
-  moduleId: module.id,
-  selector: 'm-blockchain--marketing',
-  templateUrl: 'marketing.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class BlockchainMarketingComponent implements OnInit, OnDestroy {
-  tdeStats: { tokens; raised; remaining };
-
-  isPledgeApproved: boolean = false;
-  inProgress: boolean = false;
-
-  minds = window.Minds;
-
-  private _pollTimer;
-
-  videoError: boolean = false;
-
-  constructor(
-    protected client: Client,
-    protected changeDetectorRef: ChangeDetectorRef,
-    protected title: MindsTitle,
-    protected overlayModal: OverlayModalService
-  ) {}
-
-  ngOnInit() {
-    //this.poll();
-
-    this.title.setTitle('The Minds Token');
-    this.updatePledgeConfirmation();
-  }
-
-  async poll() {
-    const update = async () => {
-      try {
-        let result: any = await this.client.get(`api/v2/blockchain/tde/stats`);
-
-        this.tdeStats = result.stats;
-        this.detectChanges();
-      } catch (e) {
-        console.error('[TDE Stats]', e);
-      }
-    };
-
-    this._pollTimer = setInterval(update, 60 * 1000);
-    update();
-  }
-
-  async updatePledgeConfirmation() {
-    this.inProgress = true;
-    this.detectChanges();
-
-    try {
-      const response: any = await this.client.get('api/v2/blockchain/pledges', {
-        brief: 1,
-      });
-
-      this.isPledgeApproved =
-        response.pledge && response.pledge.status === 'approved';
-    } catch (e) {
-      console.error(e);
-    }
-
-    this.inProgress = false;
-    this.detectChanges();
-  }
-
-  ngOnDestroy() {
-    if (this._pollTimer) {
-      clearInterval(this._pollTimer);
-    }
-  }
-
-  detectChanges() {
-    this.changeDetectorRef.markForCheck();
-    this.changeDetectorRef.detectChanges();
-  }
-
-  showBuy() {
-    const creator = this.overlayModal.create(
-      BlockchainTdeBuyComponent,
-      {},
-      {
-        onComplete: (payload: any = {}) => {
-          if (payload.changeAmount) {
-            this.isPledgeApproved = false;
-            this.detectChanges();
-          }
-        },
-      }
-    );
-    creator.present();
-  }
-
-  /**
-   * When the video source's got an error
-   */
-  onSourceError() {
-    this.videoError = true;
-  }
-}

src/app/modules/blockchain/marketing/marketing.module.ts

@@ -3,28 +3,27 @@ import { RouterModule, Routes } from '@angular/router';
 import { CommonModule as NgCommonModule } from '@angular/common';
 
 import { CommonModule } from '../../../common/common.module';
-import { FaqModule } from '../../faq/faq.module';
-import { VideoModule } from '../../media/components/video/video.module';
-import { MarketingModule } from '../../marketing/marketing.module';
-import { OnboardingModule } from '../../onboarding/onboarding.module';
-import { BlogModule } from '../../blogs/blog.module';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { BlockchainMarketingComponent } from './marketing.component';
-import { BlockchainPurchaseComponent } from './purchase.component';
-import { BlockchainMarketingOnboardComponent } from './onboard.component';
-import { BlockchainMarketingBlogsComponent } from './blogs.component';
-import { BlockchainMarketingCountdownComponent } from './countdown.component';
-import { BlockchainEthModalComponent } from './eth-modal.component';
-import { ModalsModule } from '../../modals/modals.module';
+import { BlockchainModule } from '../blockchain.module';
+import { BlockchainMarketingTokenComponent } from './token.component';
+import { BlockchainMarketingRewardsComponent } from './rewards.component';
 
 const routes: Routes = [
   {
     path: 'tokens',
-    redirectTo: '/token',
+    redirectTo: 'token',
   },
   {
     path: 'token',
-    component: BlockchainMarketingComponent,
+    component: BlockchainMarketingTokenComponent,
+  },
+  {
+    path: 'reward',
+    redirectTo: 'rewards',
+  },
+  {
+    path: 'rewards',
+    component: BlockchainMarketingRewardsComponent,
   },
 ];
 
@@ -35,21 +34,11 @@ const routes: Routes = [
     CommonModule,
     FormsModule,
     ReactiveFormsModule,
-    FaqModule,
-    MarketingModule,
-    ModalsModule,
-    BlogModule,
-    VideoModule,
+    BlockchainModule,
   ],
   declarations: [
-    BlockchainMarketingComponent,
-    BlockchainMarketingOnboardComponent,
-    BlockchainPurchaseComponent,
-    BlockchainMarketingBlogsComponent,
-    BlockchainMarketingCountdownComponent,
-    BlockchainEthModalComponent,
+    BlockchainMarketingTokenComponent,
+    BlockchainMarketingRewardsComponent,
   ],
-  exports: [BlockchainMarketingComponent],
-  entryComponents: [BlockchainMarketingComponent],
 })
 export class BlockchainMarketingModule {}

src/app/modules/blockchain/marketing/rewards.component.html

+<div class="mf-jumpAnchor" #topAnchor></div>
+
+<m-marketing
+  class="m-nodes__marketing"
+  pageTitle="Minds Rewards"
+  i18n-pageTitle
+>
+  <div class="m-marketing__main m-marketing__section--style-2">
+    <div class="m-grid m-marketing__wrapper">
+      <div class="m-grid__column-7 m-grid__column-12--mobile m-marketing__body">
+        <h1 i18n>
+          Minds Rewards
+        </h1>
+
+        <h2 ngPreserveWhitespaces i18n>
+          Earn tokens for your
+          <em>contributions to the network</em>
+        </h2>
+
+        <p class="m-marketing__description" i18n>
+          Each day you will receive a contribution score for your activity on
+          the network.
+        </p>
+
+        <p class="m-marketing__description" i18n>
+          This score determines your share of the daily rewards pool and results
+          in a payout of Minds Tokens, which can be used to support other
+          channels or boost your content for more reach.
+        </p>
+
+        <div class="">
+          <button
+            class="mf-button mf-button--alt"
+            (click)="action(); $event.preventDefault()"
+            i18n
+          >
+            Join Rewards
+          </button>
+        </div>
+      </div>
+
+      <div
+        class="m-grid__column-5 m-grid__column-12--mobile m-marketing__image"
+      >
+        <span>
+          <img
+            [src]="cdnAssetsUrl + 'assets/product-pages/rewards/rewards-1.jpg'"
+          />
+        </span>
+      </div>
+    </div>
+  </div>
+
+  <ng-container slot="2">
+    <m-marketing__asFeaturedIn></m-marketing__asFeaturedIn>
+
+    <!-- Section 2 -->
+
+    <div class="m-marketing__section m-marketing__section--style-3">
+      <div class="m-grid m-marketing__wrapper">
+        <div
+          class="m-grid__column-6 m-grid__column-12--mobile m-marketing__body"
+        >
+          <h2 i18n>Engagement</h2>
+
+          <p class="m-marketing__description" i18n>
+            We reward you for the amount of unique engagement received on your
+            content. In order to prevent fraud, you can only receive credit once
+            per engagement type per day from verified channels.
+          </p>
+
+          <ul class="m-marketing__points">
+            <li i18n>
+              Votes =
+              <em
+                >{contributionValues.votes, plural, =1
+                {{{contributionValues.votes}} point} other
+                {{{contributionValues.votes}} points}}</em
+              >
+            </li>
+
+            <li i18n>
+              Comments =
+              <em
+                >{contributionValues.comments, plural, =1
+                {{{contributionValues.comments}} point} other
+                {{{contributionValues.comments}} points}}</em
+              >
+            </li>
+
+            <li i18n>
+              Subscribers =
+              <em
+                >{contributionValues.subscribers, plural, =1
+                {{{contributionValues.subscribers}} point} other
+                {{{contributionValues.subscribers}} points}}</em
+              >
+            </li>
+
+            <li i18n>
+              Reminds =
+              <em
+                >{contributionValues.reminds, plural, =1
+                {{{contributionValues.reminds}} point} other
+                {{{contributionValues.reminds}} points}}</em
+              >
+            </li>
+          </ul>
+        </div>
+        <div
+          class="m-grid__column-6 m-grid__column-12--mobile m-marketing__image"
+        >
+          <span>
+            <img
+              class="m-marketing__image--1"
+              [src]="
+                cdnAssetsUrl + 'assets/product-pages/rewards/rewards-2.jpg'
+              "
+            />
+
+            <img
+              class="m-marketing__image--2"
+              [src]="
+                cdnAssetsUrl + 'assets/product-pages/rewards/rewards-2-ux.png'
+              "
+            />
+          </span>
+        </div>
+      </div>
+    </div>
+
+    <!-- Section 3 -->
+
+    <div class="m-marketing__section m-marketing__section--style-4">
+      <div class="m-grid m-marketing__wrapper">
+        <div
+          class="m-grid__column-6 m-grid__column-12--mobile m-marketing__body"
+        >
+          <h2 i18n>Referrals</h2>
+
+          <p class="m-marketing__description" i18n>
+            You deserve credit for the people you bring to the Minds network. We
+            reward you with 50 points for every new user that signs up through
+            your referral code and joins our Rewards program.
+          </p>
+
+          <ul class="m-marketing__points">
+            <li i18n>
+              Referrals =
+              <em
+                >{contributionValues.referrals, plural, =1
+                {{{contributionValues.referrals}} point} other
+                {{{contributionValues.referrals}} points}}</em
+              >
+            </li>
+          </ul>
+        </div>
+        <div
+          class="m-grid__column-6 m-grid__column-12--mobile m-marketing__image"
+        >
+          <span>
+            <img
+              class="m-marketing__image--1"
+              [src]="
+                cdnAssetsUrl + 'assets/product-pages/rewards/rewards-3.jpg'
+              "
+            />
+
+            <img
+              class="m-marketing__image--2"
+              [src]="
+                cdnAssetsUrl + 'assets/product-pages/rewards/rewards-3-ux.png'
+              "
+            />
+          </span>
+        </div>
+      </div>
+    </div>
+
+    <!-- Section 4 -->
+
+    <div class="m-marketing__section m-marketing__section--style-3">
+      <div class="m-grid m-marketing__wrapper">
+        <div
+          class="m-grid__column-6 m-grid__column-12--mobile m-marketing__body"
+        >
+          <h2 i18n>Development</h2>
+
+          <p class="m-marketing__description" i18n>
+            All of our development is publicly available on Gitlab. Any
+            contribution you make to the code will be manually reviewed in order
+            to determine appropriate payouts in Minds Tokens, Bitcoin, Ether or
+            USD.
+          </p>
+
+          <div class="m-marketing__actionButtons">
+            <a
+              class="mf-button mf-button--smaller mf-button--hollow-mono"
+              href="https://gitlab.com/minds"
+              target="_blank"
+              i18n
+            >
+              View Sourcecode
+            </a>
+          </div>
+        </div>
+        <div
+          class="m-grid__column-6 m-grid__column-12--mobile m-marketing__image"
+        >
+          <span>
+            <img
+              class="m-marketing__image--1"
+              [src]="
+                cdnAssetsUrl + 'assets/product-pages/rewards/rewards-4.jpg'
+              "
+            />
+
+            <img
+              class="m-marketing__image--2"
+              [src]="
+                cdnAssetsUrl + 'assets/product-pages/rewards/rewards-4-ux.png'
+              "
+            />
+          </span>
+        </div>
+      </div>
+    </div>
+
+    <!-- Final section -->
+
+    <div class="m-marketing__section m-marketing__section--tail">
+      <div class="m-grid m-marketing__wrapper">
+        <div
+          class="m-grid__column-12 m-grid__column-12--mobile m-marketing__body"
+        >
+          <h2 i18n>Other Rewards</h2>
+        </div>
+      </div>
+
+      <div class="m-grid m-marketing__wrapper m-marketingSectionTail__table">
+        <div
+          class="m-grid__column-4 m-grid__column-12--mobile m-marketing__body"
+        >
+          <h3 i18n>OnChain Transactions</h3>
+
+          <p class="m-marketing__description" i18n>
+            Earn
+            <em
+              >{contributionValues.onchain_tx, plural, =1
+              {{{contributionValues.onchain_tx}} point} other
+              {{{contributionValues.onchain_tx}} points}}</em
+            >
+            every time you perform an OnChain transaction with your Minds
+            Tokens.
+          </p>
+        </div>
+
+        <div
+          class="m-grid__column-4 m-grid__column-12--mobile m-marketing__body"
+        >
+          <h3 i18n>Jury Duty</h3>
+
+          <p class="m-marketing__description" i18n>
+            Earn
+            <em
+              >{contributionValues.jury_duty, plural, =1
+              {{{contributionValues.jury_duty}} point} other
+              {{{contributionValues.jury_duty}} points}}</em
+            >
+            every time you participate in our Jury system to review appeals on
+            content moderation decisions.
+          </p>
+        </div>
+
+        <div
+          class="m-grid__column-4 m-grid__column-12--mobile m-marketing__body"
+        >
+          <h3 i18n>Hourly Check-ins</h3>
+
+          <p class="m-marketing__description" i18n>
+            Earn
+            <em
+              >{contributionValues.checkin, plural, =1
+              {{{contributionValues.checkin}} point} other
+              {{{contributionValues.checkin}} points}}</em
+            >
+            every hour that you check in to the app and perform an action, such
+            as voting or commenting.
+          </p>
+        </div>
+      </div>
+
+      <div class="m-grid m-marketing__wrapper">
+        <div
+          class="m-grid__column-12 m-grid__column-12--mobile m-marketing__body m-marketing__body--extra"
+        >
+          <button class="mf-button mf-button--alt" (click)="scrollToTop()" i18n>
+            Join Rewards
+          </button>
+        </div>
+      </div>
+    </div>
+  </ng-container>
+</m-marketing>

src/app/modules/blockchain/marketing/rewards.component.ts

+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  ViewChild,
+} from '@angular/core';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'm-blockchainMarketing__rewards',
+  templateUrl: 'rewards.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class BlockchainMarketingRewardsComponent {
+  readonly cdnAssetsUrl: string = window.Minds.cdn_assets_url;
+
+  readonly contributionValues: { [key: string]: number } =
+    window.Minds.contribution_values;
+
+  @ViewChild('topAnchor', { static: false })
+  readonly topAnchor: ElementRef;
+
+  constructor(protected router: Router, protected cd: ChangeDetectorRef) {}
+
+  scrollToTop() {
+    if (this.topAnchor.nativeElement) {
+      this.topAnchor.nativeElement.scrollIntoView({
+        behavior: 'smooth',
+        block: 'start',
+        inline: 'nearest',
+      });
+    }
+  }
+
+  action() {
+    this.router.navigate(['/wallet/tokens/contributions']);
+  }
+
+  detectChanges() {
+    this.cd.markForCheck();
+    this.cd.detectChanges();
+  }
+}

src/app/modules/blockchain/marketing/token.component.html

+<div class="mf-jumpAnchor" #topAnchor></div>
+
+<m-marketing class="m-token__marketing" pageTitle="Tokens" i18n-pageTitle>
+  <div class="m-marketing__main m-marketing__section--style-2">
+    <div class="m-grid m-marketing__wrapper">
+      <div class="m-grid__column-7 m-grid__column-12--mobile m-marketing__body">
+        <h1 i18n>
+          Tokens
+        </h1>
+
+        <h2 ngPreserveWhitespaces i18n>
+          The <em>fuel</em> of the Minds network
+        </h2>
+
+        <p class="m-marketing__description" i18n>
+          Buy tokens to support Minds and your favorite channels. Unlock premium
+          features and launch advertising campaigns to expand your reach.
+        </p>
+
+        <div class="m-tokenMarketing__purchase">
+          <m-blockchain--purchase
+            [hasTitle]="true"
+            (onComplete)="onPurchaseComplete($event)"
+          ></m-blockchain--purchase>
+        </div>
+      </div>
+
+      <div
+        class="m-grid__column-5 m-grid__column-12--mobile m-marketing__image"
+      >
+        <span>
+          <img
+            [src]="cdnAssetsUrl + 'assets/product-pages/token/token-1.jpg'"
+          />
+        </span>
+      </div>
+    </div>
+  </div>
+
+  <ng-container slot="2">
+    <m-marketing__asFeaturedIn></m-marketing__asFeaturedIn>
+
+    <!-- Section 2 -->
+
+    <div class="m-marketing__section m-marketing__section--style-3">
+      <div class="m-grid m-marketing__wrapper">
+        <div
+          class="m-grid__column-6 m-grid__column-12--mobile m-marketing__body"
+        >
+          <h2 i18n>Expand your reach</h2>
+
+          <p class="m-marketing__description" i18n>
+            1 token = 1,000 views from the network. Launch advertising
+            campaigns, send offers to other channels for more exposure and grow
+            your audience to new levels.
+          </p>
+
+          <div class="m-marketing__links">
+            <h3>Useful links</h3>
+
+            <ul>
+              <li>
+                <a
+                  [href]="cdnAssetsUrl + 'assets/documents/Whitepaper-v0.5.pdf'"
+                  target="_blank"
+                >
+                  <span i18n>Download Whitepaper</span>
+                  <i class="material-icons">cloud_download</i>
+                </a>
+              </li>
+              <li>
+                <a routerLink="/wallet" target="_blank" i18n>
+                  Setup Wallet
+                </a>
+              </li>
+              <li>
+                <a routerLink="/boost" target="_blank" i18n>
+                  Learn About Boost
+                </a>
+              </li>
+            </ul>
+          </div>
+        </div>
+        <div
+          class="m-grid__column-6 m-grid__column-12--mobile m-marketing__image"
+        >
+          <span>
+            <img
+              class="m-marketing__image--1"
+              [src]="cdnAssetsUrl + 'assets/product-pages/token/token-2.jpg'"
+            />
+
+            <img
+              class="m-marketing__image--2"
+              [src]="cdnAssetsUrl + 'assets/product-pages/token/token-2-ux.png'"
+            />
+          </span>
+        </div>
+      </div>
+    </div>
+
+    <!-- Section 3 -->
+
+    <div class="m-marketing__section m-marketing__section--style-4">
+      <div class="m-grid m-marketing__wrapper">
+        <div
+          class="m-grid__column-6 m-grid__column-12--mobile m-marketing__body"
+        >
+          <h2 i18n>Buy premium subscriptions</h2>
+
+          <p class="m-marketing__description" i18n>
+            Spend tokens to upgrade your channel to Pro or Plus. Access
+            exclusive content and other custom offerings from your favorite
+            creators.
+          </p>
+
+          <div class="m-marketing__links">
+            <h3>Useful links</h3>
+
+            <ul>
+              <li>
+                <a routerLink="/pro" target="_blank" i18n>
+                  Learn About Pro
+                </a>
+              </li>
+              <li>
+                <a routerLink="/plus" target="_blank" i18n>
+                  Learn About Plus
+                </a>
+              </li>
+            </ul>
+          </div>
+        </div>
+        <div
+          class="m-grid__column-6 m-grid__column-12--mobile m-marketing__image"
+        >
+          <span>
+            <img
+              class="m-marketing__image--1"
+              [src]="cdnAssetsUrl + 'assets/product-pages/token/token-3.jpg'"
+            />
+
+            <img
+              class="m-marketing__image--2"
+              [src]="cdnAssetsUrl + 'assets/product-pages/token/token-3-ux.png'"
+            />
+          </span>
+        </div>
+      </div>
+    </div>
+
+    <!-- Section 4 -->
+
+    <div class="m-marketing__section m-marketing__section--style-3">
+      <div class="m-grid m-marketing__wrapper">
+        <div
+          class="m-grid__column-6 m-grid__column-12--mobile m-marketing__body"
+        >
+          <h2 i18n>Send tips and support other channels</h2>
+
+          <p class="m-marketing__description" i18n>
+            Enjoy a post from another channel? Send them tokens to show your
+            support. Tokens help other creators promote their content and build
+            their network.
+          </p>
+        </div>
+        <div
+          class="m-grid__column-6 m-grid__column-12--mobile m-marketing__image"
+        >
+          <span>
+            <img
+              class="m-marketing__image--1"
+              [src]="cdnAssetsUrl + 'assets/product-pages/token/token-4.jpg'"
+            />
+
+            <img
+              class="m-marketing__image--2"
+              [src]="cdnAssetsUrl + 'assets/product-pages/token/token-4-ux.png'"
+            />
+          </span>
+        </div>
+      </div>
+    </div>
+
+    <!-- Final section -->
+
+    <div class="m-marketing__section m-marketing__section--tail">
+      <div class="m-grid m-marketing__wrapper">
+        <div
+          class="m-grid__column-12 m-grid__column-12--mobile m-marketing__body"
+        >
+          <h2 i18n>Other features</h2>
+        </div>
+      </div>
+
+      <div class="m-grid m-marketing__wrapper m-marketingSectionTail__table">
+        <div
+          class="m-grid__column-4 m-grid__column-12--mobile m-marketing__body"
+        >
+          <h3 i18n>Decentralized</h3>
+
+          <p class="m-marketing__description" i18n>
+            An
+            <a href="https://eips.ethereum.org/EIPS/eip-20" target="_blank"
+              >ERC-20</a
+            >
+            token harnessing the Ethereum blockchain to give you full control
+            over your crypto.
+          </p>
+        </div>
+
+        <div
+          class="m-grid__column-4 m-grid__column-12--mobile m-marketing__body"
+        >
+          <h3 i18n>Earn daily rewards</h3>
+
+          <p class="m-marketing__description" i18n>
+            Don’t have the funds to buy tokens? You can also earn them as
+            <a routerLink="/rewards" target="_blank">rewards</a> for your
+            contribution to the network each day.
+          </p>
+        </div>
+
+        <div
+          class="m-grid__column-4 m-grid__column-12--mobile m-marketing__body"
+        >
+          <h3 i18n>Support Minds</h3>
+
+          <p class="m-marketing__description" i18n>
+            Buying tokens is one of the best ways to keep Minds independent and
+            support Internet freedom.
+          </p>
+        </div>
+      </div>
+
+      <div class="m-grid m-marketing__wrapper">
+        <div
+          class="m-grid__column-12 m-grid__column-12--mobile m-marketing__body m-marketing__body--extra"
+        >
+          <button class="mf-button mf-button--alt" (click)="scrollToTop()" i18n>
+            Buy Tokens
+          </button>
+        </div>
+      </div>
+    </div>
+  </ng-container>
+</m-marketing>

src/app/modules/blockchain/marketing/token.component.scss

+@import '../../../foundation/grid-values';
+
+.m-token__marketing {
+  .m-tokenMarketing__purchase {
+    max-width: 90%;
+
+    @media screen and (max-width: $m-grid-min-vp) {
+      max-width: 100%;
+    }
+
+    .m-blockchainTokenPurchase {
+      box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.07);
+    }
+  }
+}

src/app/modules/blockchain/marketing/token.component.ts

+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  ViewChild,
+} from '@angular/core';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'm-blockchainMarketing__token',
+  templateUrl: 'token.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class BlockchainMarketingTokenComponent {
+  readonly cdnAssetsUrl: string = window.Minds.cdn_assets_url;
+
+  @ViewChild('topAnchor', { static: false })
+  readonly topAnchor: ElementRef;
+
+  constructor(protected router: Router, protected cd: ChangeDetectorRef) {}
+
+  scrollToTop() {
+    if (this.topAnchor.nativeElement) {
+      this.topAnchor.nativeElement.scrollIntoView({
+        behavior: 'smooth',
+        block: 'start',
+        inline: 'nearest',
+      });
+    }
+  }
+
+  onPurchaseComplete(purchase: any) {}
+
+  detectChanges() {
+    this.cd.markForCheck();
+    this.cd.detectChanges();
+  }
+}

src/app/modules/blockchain/marketing/purchase.component.html → src/app/modules/blockchain/token-purchase/purchase.component.html

-<div class="m-blockchain--marketing--pledges">
-  <table class="m-blockchain--marketing--pledges--amounts" *ngIf="!inProgress">
-    <ng-container *ngIf="phase === 'presale'">
-      <tr>
-        <td
-          class="m-blockchain--marketing--pledges--amounts--label"
-          i18n="@@M__PURCHASE_PLEDGED_AMOUNTS"
-        >
-          Pledged
-        </td>
-        <td class="m-blockchain--marketing--pledges--amounts--value">
-          {{ stats.amount | token: 18 | number: '1.0-2' }}
-          <span class="m-blockchain--marketing--pledges--eth-label">ETH</span>
-        </td>
-      </tr>
-      <tr>
-        <td
-          class="m-blockchain--marketing--pledges--amounts--label"
-          i18n="@@M__PURCHASE_PLEDGED_CHANNEL"
-        >
-          Channels
-        </td>
-        <td class="m-blockchain--marketing--pledges--amounts--value">
-          {{ stats.count | number }}
-        </td>
-      </tr>
-    </ng-container>
-    <tr>
-      <td class="m-blockchain--marketing--pledges--amounts--label"></td>
-      <td class="m-blockchain--marketing--pledge--input">
-        <input
-          type="number"
-          class="m-input m-border"
-          [(ngModel)]="tokens"
-          #tokenInput
-        />
-        <span class="m-blockchain--marketing--pledges--eth-label">Tokens</span>
-      </td>
-    </tr>
-    <tr>
-      <td class="m-blockchain--marketing--pledges--amounts--label"></td>
-      <td class="m-blockchain--marketing--pledge--input">
-        <input
-          type="number"
-          class="m-input m-border"
-          [(ngModel)]="amount"
-          style="font-size: 18px; padding: 18px; cursor: pointer"
-          #ethInput
-          (click)="ethInput.blur(); promptTokenInput(tokenInput)"
-        />
-        <span class="m-blockchain--marketing--pledges--eth-label">ETH</span>
-        <button
-          class="m-btn m-btn--action"
-          (click)="purchase()"
-          i18n="@@M__PURCHASE_PURCHASE_HEADER"
-        >
-          Purchase
-        </button>
-      </td>
-    </tr>
-    <tr style="height:16px;">
-      <td class="m-blockchain--marketing--pledges--amounts--label"></td>
-      <td
-        class="m-blockchain--marketing--pledge--input"
-        style="text-align: left"
-      >
-        <m-tooltip
-          anchor="left"
-          i18n="@@MINDS__TOPBAR__TOP__OPEN_TRENDING_ITEM_TOOLTIP"
-        >
-          <span
-            m-tooltip--anchor
-            class="m-blockchain--marketing--pledges--eth-subtext"
-            >1 Token = $1.25 USD = {{ 1 / rate }} ETH</span
-          >
+<h4 *ngIf="hasTitle" i18n>Purchase Tokens</h4>
+
+<div class="m-blockchainTokenPurchase">
+  <div class="m-blockchainTokenPurchase__amount">
+    <input
+      type="number"
+      name="amount"
+      id="m-blockchainTokenPurchase__amountInput"
+      placeholder="0"
+      [(ngModel)]="tokens"
+      (focus)="selectAllInput(amountInput)"
+      #amountInput
+    />
+
+    <label for="m-blockchainTokenPurchase__amountInput" i18n>Tokens</label>
+  </div>
+
+  <div class="m-blockchainTokenPurchase__ethTotal" ngPreserveWhitespaces>
+    <span class="m-blockchainTokenPurchaseEthTotal__value">{{ amount }}</span>
+    Eth
+  </div>
+
+  <div class="m-blockchainTokenPurchase__action">
+    <button
+      class="mf-button"
+      [disabled]="!tokens"
+      (click)="purchase(); $event.preventDefault()"
+      i18n
+    >
+      Buy
+    </button>
+  </div>
+</div>
 
-          <ng-container>
-            ETH amount is based on the current USD/ETH rate and is updated in
-            regular intervals
-          </ng-container>
-        </m-tooltip>
-        <span class="m-layout__spacer"></span>
-        <button (click)="purchaseEth()" class="m-btn m-btn--action">
-          Buy ETH
-        </button>
-      </td>
-    </tr>
-  </table>
+<div class="m-blockchainTokenPurchase__ethRate" ngPreserveWhitespaces>
+  <span i18n>
+    {tokens, plural, =1 {{{tokens | number}} token} other
+    {{{tokens | number}} tokens}} = {calculatedViews, plural, =1
+    {{{calculatedViews | number}} view} other
+    {{{calculatedViews | number}} views}}
+  </span>
+  |
+  <a (click)="purchaseEth(); $event.preventDefault()" i18n>Buy Eth</a>
 </div>
 
 <m-modal-signup-on-action

src/app/modules/blockchain/token-purchase/purchase.component.scss

+@import '../../../foundation/grid-values';
+
+m-blockchain--purchase {
+  h4 {
+    font-size: 16px;
+    line-height: 44px;
+    font-weight: bold;
+    opacity: 0.7;
+
+    @include m-theme() {
+      color: themed($m-grey-800);
+    }
+  }
+}
+
+.m-blockchainTokenPurchase {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  border-radius: 2px;
+  padding: 20px 35px;
+
+  @include m-theme() {
+    background: themed($m-white);
+    color: themed($m-black);
+  }
+
+  @media screen and (max-width: $m-grid-min-vp) {
+    padding: 10px 15px;
+  }
+
+  .m-blockchainTokenPurchase__amount {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    font-size: 24px;
+
+    @media screen and (max-width: $m-grid-min-vp) {
+      font-size: 18px;
+    }
+
+    label {
+      display: inline-block;
+      font: inherit;
+      margin-right: 0.1em;
+
+      @include m-theme() {
+        color: themed($m-grey-300);
+      }
+    }
+
+    input {
+      display: inline-block;
+      font: inherit;
+      appearance: none;
+      border: none;
+      margin: 0 0.35em 0 0;
+      padding: 0;
+      line-height: 1;
+      vertical-align: top;
+      border-radius: 0;
+      width: 5em;
+      text-align: right;
+
+      @media screen and (max-width: $m-grid-min-vp) {
+        width: 4em;
+      }
+
+      &:focus {
+        outline: none !important;
+      }
+
+      @include m-theme() {
+        color: themed($m-black);
+        box-shadow: 0 1px 0 rgba(themed($m-black), 0.1);
+
+        &:focus {
+          box-shadow: 0 1px 0 rgba(themed($m-black), 0.3);
+        }
+      }
+    }
+  }
+
+  .m-blockchainTokenPurchase__ethTotal {
+    @include m-theme() {
+      color: themed($m-grey-300);
+    }
+
+    .m-blockchainTokenPurchaseEthTotal__value {
+      @include m-theme() {
+        color: themed($m-black);
+      }
+    }
+  }
+}
+
+.m-blockchainTokenPurchase__ethRate {
+  display: block;
+  margin: 24px 0 0;
+
+  @include m-theme() {
+    color: themed($m-grey-300);
+  }
+
+  a {
+    cursor: pointer;
+  }
+}

src/app/modules/blockchain/marketing/purchase.component.ts → src/app/modules/blockchain/token-purchase/purchase.component.ts

@@ -37,7 +37,7 @@ export class BlockchainPurchaseComponent implements OnInit {
   };
 
   //amount: number = 0.25;
-  tokens: number = 30;
+  tokens: number = 0;
 
   address: string = '';
   ofac: boolean = false;
@@ -54,12 +54,15 @@ export class BlockchainPurchaseComponent implements OnInit {
   confirmed: boolean = false;
   error: string;
 
-  @Input() phase: string = 'presale';
+  @Input() phase: string = 'sale';
   inProgress: boolean = false;
   rate: number = 0;
+  cpm: number = 1;
 
   paramsSubscription: Subscription;
 
+  @Input() hasTitle: boolean = false;
+
   constructor(
     protected client: Client,
     protected changeDetectorRef: ChangeDetectorRef,
@@ -76,6 +79,7 @@ export class BlockchainPurchaseComponent implements OnInit {
     this.loadWalletAddress();
     this.load().then(() => {
       this.amount = 0.25;
+      this.detectChanges();
     });
     this.paramsSubscription = this.route.params.subscribe(params => {
       if (params.purchaseEth) {
@@ -96,10 +100,23 @@ export class BlockchainPurchaseComponent implements OnInit {
     return Math.ceil(newAmnt * wei) / wei; // Rounds up amount and add 1/1000th ETH to compensate for rounding
   }
 
+  get calculatedViews() {
+    return Math.floor(this.tokens / (this.cpm / 1000));
+  }
+
   set amount(value: number) {
     this.tokens = value * this.rate;
   }
 
+  selectAllInput(input: HTMLInputElement) {
+    setTimeout(() => {
+      try {
+        input.select();
+        input.setSelectionRange(0, input.value.length);
+      } catch (e) {}
+    }, 50);
+  }
+
   async load() {
     this.inProgress = true;
     this.detectChanges();

src/app/modules/boost/boost.module.ts

@@ -99,10 +99,6 @@ const boostRoutes: Routes = [
     BoostConsoleCard,
     BoostConsoleBooster,
   ],
-  entryComponents: [
-    BoostCreatorComponent,
-    BoostConsoleComponent,
-    BoostMarketingComponent,
-  ],
+  entryComponents: [BoostCreatorComponent, BoostConsoleComponent],
 })
 export class BoostModule {}

src/app/modules/marketing/marketing.component.scss

@@ -194,8 +194,7 @@
   }
 }
 
-.m-marketing--section,
-.m-marketing__section {
+.m-marketing--section {
   height: 300px;
   align-items: center;
   justify-content: center;

src/app/modules/upgrades/buy-tokens.component.ts

@@ -11,7 +11,5 @@ export class BuyTokensComponent {
 
   constructor(protected router: Router) {}
 
-  navigateToTokensPage() {
-    this.router.navigate(['/token']);
-  }
+  onPurchaseComplete(purchase: any) {}
 }