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

@@ -4,10 +4,14 @@ m-marketing__footer {
  display: block;
  margin-top: 105px;
 
+ @media screen and (max-width: $m-grid-min-vp) {
+ margin-top: 80px;
+ }
+
  @include m-theme() {
  background: linear-gradient(
  180deg,
- themed($m-grey-50) 0.01%,
+ themed($m-bg-gradient-start) 0%,
  themed($m-white) 100%
  );
  }

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

+.m-marketing__main,
+.m-marketing__section {
+ // Common
+
+ .m-marketing--title,
+ h1 {
+ font-weight: 900;
+ font-size: 42px;
+ line-height: 44px;
+ margin: 0 0 23px;
+
+ &.m-marketing--title__bigger-title {
+ font-size: 48px;
+ line-height: 53px;
+ margin-bottom: 26px;
+ }
+
+ 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;
+ }
+ }
+ }
+
+ 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(
+ 180deg,
+ themed($m-white) 0%,
+ themed($m-bg-gradient-start) 100%
+ );
+ }
+
+ .m-marketing__wrapper {
+ padding: 95px 0 85px;
+ }
+ }
+}

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

 <div class="m-marketing">
- <ng-content select=".m-marketing__main"></ng-content>
+ <div class="m-marketing__mainWrapper">
+ <ng-content select=".m-marketing__main"></ng-content>
+ </div>
 
  <div class="m-marketing__sep" *ngIf="bodyWrapper?.children?.length > 0"></div>
 
- <div class="m-marketing__bodyWrapper" #bodyWrapper>
- <ng-content select=".m-marketing__body"></ng-content>
+ <div class="m-marketing__extrasWrapper" #bodyWrapper>
+ <ng-content select=".m-marketing__extras"></ng-content>
  </div>
 </div>
 

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

@@ -37,11 +37,10 @@ m-marketing {
  }
  }
 
- .m-marketing__body {
- > * > * {
- max-width: 1084px;
- margin: 0 auto;
- box-sizing: border-box;
- }
+ .m-marketing__wrapper,
+ .m-marketing__extras > * > * {
+ max-width: 1084px;
+ margin: 0 auto;
+ box-sizing: border-box;
  }
 }

src/app/foundation/buttons.scss

+@import './grid-values';
+@import '../../stylesheets/themes';
+
 .mf-button {
  display: inline-block;
  padding: 14px 32px;
+ font: inherit;
  font-size: 18px;
  line-height: 24px;
  border: 1px solid;
@@ -8,6 +12,10 @@
  font-weight: 400;
  cursor: pointer;
  user-select: none;
+ white-space: nowrap;
+ text-align: center;
+ appearance: none;
+ text-decoration: none;
 
  @include m-theme() {
  background: themed($m-blue);
@@ -15,6 +23,18 @@
  border-color: themed($m-blue);
  }
 
+ @media screen and (max-width: $m-grid-min-vp) {
+ display: block;
+ font-size: 15px;
+ padding: 12px 15px;
+ }
+
+ &.mf-button--always-inline {
+ @media screen and (max-width: $m-grid-min-vp) {
+ display: inline-block;
+ }
+ }
+
  &.mf-button--hollow {
  @include m-theme() {
  background: themed($m-white);

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

-<div class="m-upgrades__buyTokens">
- <div class="m-upgradesBuyTokens__body">
- <h2>Buy Tokens</h2>
+<ng-template #buyTokensRateTpl>
+ 32 tokens = 32,000 page views
+</ng-template>
 
- <p class="m-upgradesBuyTokens__description">
- Expand your reach with Boost and support your favorite channels with Wire.
- </p>
+<div class="m-upgrades__buyTokens">
+ <div class="m-upgradesBuyTokens__wrapper">
+ <div class="m-upgradesBuyTokens__body">
+ <h2>Buy Tokens</h2>
 
- <p>
- <a>Learn more about tokens</a>
- </p>
- </div>
+  <p class="m-upgradesBuyTokens__description">
+  Expand your reach with Boost and support your favorite channels with
+  Wire.
+  </p>
 
- <div class="m-upgradesBuyTokens__form">
- <div class="upgradesBuyTokens__amount">
- <label for="m-upgradesBuyTokens__amountInput">$</label>
- <input
- type="number"
- name="amount"
- id="m-upgradesBuyTokens__amountInput"
- />
+ <p>
+ <a>Learn more about tokens</a>
+ </p>
  </div>
 
- <div class="upgradesBuyTokens__rate">
- 32 tokens = 32,000 page views
+ <div class="m-upgradesBuyTokens__form">
+ <div class="upgradesBuyTokens__amount">
+ <label for="m-upgradesBuyTokens__amountInput">$</label>
+ <input
+ type="number"
+ name="amount"
+ id="m-upgradesBuyTokens__amountInput"
+ />
+ </div>
+
+ <div class="upgradesBuyTokens__rate">
+ <ng-container *ngTemplateOutlet="buyTokensRateTpl"></ng-container>
+ </div>
+
+ <div class="upgradesBuyTokens__action">
+ <button class="mf-button">Buy Tokens</button>
+ </div>
  </div>
 
- <div class="upgradesBuyTokens__action">
- <button class="m-upgrades__button">Buy Tokens</button>
+ <div class="m-upgradesBuyTokens__overflownRate">
+ <ng-container *ngTemplateOutlet="buyTokensRateTpl"></ng-container>
  </div>
  </div>
 </div>

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

@@ -3,17 +3,28 @@ m-upgrades__buyTokens {
 }
 
 .m-upgrades__buyTokens {
- position: relative;
- padding: 40px 60px 60px;
  margin-bottom: 105px;
- background: #726061;
- color: #ffffff;
+
+ .m-upgradesBuyTokens__wrapper {
+ padding: 40px 60px 60px;
+ background: url('http://placekitten.com/591/362') no-repeat right center
+ #726061;
+ background-size: contain;
+ color: #ffffff;
+
+ @media screen and (max-width: $m-grid-min-vp) {
+ background-image: none;
+ padding: 30px;
+ margin: 0 20px;
+ }
+ }
 
  .m-upgradesBuyTokens__body {
  max-width: 320px;
  }
 
  h2 {
+ margin: 0 0 12px;
  font-size: 32px;
  font-weight: 900;
  line-height: 43px;
@@ -27,6 +38,7 @@ m-upgrades__buyTokens {
  }
 
  &.m-upgradesBuyTokens__description {
+ margin-bottom: 25px;
  opacity: 0.6;
  }
  }
@@ -51,6 +63,10 @@ m-upgrades__buyTokens {
  @include m-theme() {
  color: themed($m-grey-300);
  }
+
+ @media screen and (max-width: $m-grid-min-vp) {
+ display: none;
+ }
  }
 
  .upgradesBuyTokens__amount {
@@ -93,7 +109,21 @@ m-upgrades__buyTokens {
  box-shadow: 0 1px 0 rgba(themed($m-black), 0.2);
  }
  }
+
+ @media screen and (max-width: $m-grid-min-vp) {
+ max-width: calc(100% - 20px);
+ }
  }
  }
  }
+
+ .m-upgradesBuyTokens__overflownRate {
+ display: none;
+ margin: 24px 0 0;
+ color: #9b9b9b;
+
+ @media screen and (max-width: $m-grid-min-vp) {
+ display: block;
+ }
+ }
 }

src/app/modules/upgrades/upgrade-options.component.scss

@@ -11,7 +11,7 @@ m-upgrades__upgradeOptions {
 
  @media screen and (max-width: $m-grid-min-vp) {
  display: block;
- margin: 0 40px 25px;
+ margin: 0 40px 20px;
  }
 
  h2 {
@@ -147,7 +147,6 @@ m-upgrades__upgradeOptions {
  }
 
  .m-upgradesUpgradeOptionsPlan__action {
- display: inline-block;
  margin-top: 25px;
  }
  }

src/app/modules/upgrades/upgrades.component.html

 <m-marketing class="m-upgrades" pageTitle="Upgrade your account" i18n-pageTitle>
- <div class="m-marketing__main">
- <section class="m-upgrades__grid m-upgrades__mainFeatures">
- <div class="m-upgrades__gridColumn--5">
- <h1>Upgrade your Minds experience</h1>
+ <div class="m-marketing__main m-marketing__section--style-1">
+ <div class="m-marketing__wrapper">
+ <h1 class="m-marketing--title__bigger-title" i18n>
+ Upgrade you Minds experience
+ </h1>
 
-  <p class="m-upgrades__description">
-  Minds offers a unique range of powerful upgrades that will supercharge
-  your Minds experience.
-  </p>
+ <p class="m-marketing__description" i18n>
+ Minds offers a unique range of powerful upgrades that will supercharge
+ your Minds experience.
+ </p>
 
- <ul class="m-upgrades__features">
- <li>
- TBD
- </li>
- <li>
- TBD
- </li>
- <li>
- TBD
- </li>
- </ul>
-
- <p>
- <a class="m-upgrades__button m-upgrades__button--hollow"
- >Upgrade Now</a
- >
- </p>
- </div>
-
- <div class="m-upgrades__gridColumn--7">
- <!-- Main assets here -->
- </div>
- </section>
-
- <section class="m-upgrades__grid">
- <ul class="m-upgrades__gridColumn--12 m-upgrades__featuredIn">
- <li>As featured in</li>
- <li class="m-upgrades__featuredInItem--big">
- <img src="" alt="BBC" />
- </li>
- <li><img src="" alt="Fox News" /></li>
- <li><img src="" alt="Forbes" /></li>
- <li><img src="" alt="TechCrunch" /></li>
- <li><img src="" alt="Reuters" /></li>
- <li><img src="" alt="Wired" /></li>
- <li><img src="" alt="The Joe Rogan Experience" /></li>
+ <ul class="m-marketing__points">
+ <li>Lorem ipsum dolor sit amet.</li>
+ <li>Aliquam eveniet impedit maiores sapiente.</li>
+ <li>Aperiam laudantium nemo non soluta.</li>
  </ul>
- </section>
+
+ <a class="mf-button mf-button--hollow" i18n>
+ Upgrade now
+ </a>
+ </div>
  </div>
 
- <div class="m-marketing__body">
+ <div class="m-marketing__extras">
  <m-upgrades__upgradeOptions></m-upgrades__upgradeOptions>
  </div>
 
- <div class="m-marketing__body">
+ <div class="m-marketing__extras">
  <m-upgrades__buyTokens></m-upgrades__buyTokens>
  </div>
 </m-marketing>

src/app/modules/upgrades/upgrades.component.scss

@@ -73,5 +73,9 @@
 
  m-upgrades__upgradeOptions {
  margin-bottom: 110px;
+
+ @media screen and (max-width: $m-grid-min-vp) {
+ margin-bottom: 40px;
+ }
  }
 }

src/stylesheets/themes.scss

@@ -121,6 +121,7 @@ $themes: (
  m-white: $white,
  m-white-always: $white,
  m-body-bg: #f8f8f8,
+ m-bg-gradient-start: #f9fafc,
  m-warn-bg: $amber-light,
  m-warn-fg: $black,
  m-facebook: $facebook,
@@ -159,6 +160,7 @@ $themes: (
  m-white: lighten($grey-990, $percent),
  m-white-always: $white,
  m-body-bg: lighten(#080808, $percent),
+ m-bg-gradient-start: #292827,
  m-blue-dark: lighten($blue-bright, 15%),
  m-blue: $blue-bright,
  m-blue-light: $blue-dark,
@@ -215,6 +217,7 @@ $m-black-always: 'm-black-always';
 $m-white: 'm-white';
 $m-white-always: 'm-white-always';
 $m-body-bg: 'm-body-bg';
+$m-bg-gradient-start: 'm-bg-gradient-start';
 
 $m-blue-dark: 'm-blue-dark';
 $m-blue: 'm-blue';