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"
+ >
+ <div class="m-marketingFooter__mindsLogo">
+ <img [src]="cdnAssetsUrl + 'assets/logos/bulb.svg'" />
+ </div>
+
+ <h4 class="m-marketingFooter__sloganText" i18n>
+ Take back control of your social media
+ </h4>
+
+ <div class="m-marketingFooter__text">&copy; {{ year }} Minds, Inc.</div>
+ </div>
+
+ <div
+ class="m-grid__column-2 m-grid__column-12--mobile m-marketingFooter__column"
  >
  <h4 i18n>About</h4>
 
  <ul>
- <li hidden>
- <a href="#" i18n>
- Company
- </a>
- </li>
-
  <li hidden>
  <a href="#" i18n>
  Mission
  </a>
  </li>
 
- <li hidden>
- <a href="#" i18n>
- Features
- </a>
- </li>
-
  <li>
  <a routerLink="/mobile" i18n>
  Mobile
@@ -32,7 +34,7 @@
 
  <li>
  <a routerLink="/jobs" i18n>
- Jobs
+ Careers
  </a>
  </li>
 
@@ -67,7 +69,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>
 
@@ -114,6 +116,12 @@
  </a>
  </li>
 
+ <li>
+ <a routerLink="/rewards" i18n>
+ Rewards
+ </a>
+ </li>
+
  <li>
  <a href="https://teespring.com/stores/minds" i18n>
  Store
@@ -123,7 +131,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 +169,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>
 
@@ -190,29 +198,30 @@
  </a>
  </li>
 
- <li hidden>
- <a routerLink="/p/contact" i18n>
+ <li>
+ <a href="#" i18n>
  Contact
  </a>
  </li>
+
+ <li>
+ <a href="#" i18n>
+ Donate
+ </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,27 @@ m-marketing__footer {
  @include m-theme() {
  color: themed($m-grey-800);
  }
+
+ &.m-marketingFooter__sloganText {
+ margin: 0 0 21px;
+ }
+ }
+
+ .m-marketingFooter__mindsLogo {
+ margin: 0 0 20px;
+
+ > img {
+ height: 45px;
+ }
  }
 
  .m-marketingFooter__text {
  font-size: 14px;
  line-height: 26px;
+
+ @include m-theme() {
+ color: themed($m-grey-300);
+ }
  }
 
  ul {
@@ -108,6 +137,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/modules/upgrades/upgrade-options.component.html

@@ -4,7 +4,7 @@
 
  <div class="m-upgradesUpgradeOptionsHeader__toggleContainer">
  <div class="m-upgradesUpgradeOptionsHeader__toggle">
- <span>Yearly</span>
+ <span i18n>Yearly</span>
  <span
  ><m-toggle
  [(mModel)]="interval"
@@ -12,10 +12,10 @@
  rightValue="monthly"
  ></m-toggle
  ></span>
- <span>Monthly</span>
+ <span i18n>Monthly</span>
  </div>
  <div class="m-upgradesUpgradeOptionsHeader__toggle">
- <span>USD</span>
+ <span i18n>USD</span>
  <span
  ><m-toggle
  [(mModel)]="currency"
@@ -23,7 +23,7 @@
  rightValue="tokens"
  ></m-toggle
  ></span>
- <span>Tokens</span>
+ <span i18n>Tokens</span>
  </div>
  </div>
  </div>
@@ -34,47 +34,52 @@
  >
  <h3 i18n>Plus</h3>
 
- <p class="m-upgradesUpgradeOptionsPlan__targetAudience">
+ <p class="m-upgradesUpgradeOptionsPlan__targetAudience" i18n>
  Ideal for all Minds Users
  </p>
  </div>
 
  <div class="m-upgradesUpgradeOptionsPlan__row">
- <p class="m-upgradesUpgradeOptionsPlan__description">
+ <p class="m-upgradesUpgradeOptionsPlan__description" i18n>
  Upgrade your channel to unlock new features and upgrade your experience.
  </p>
  </div>
 
  <div class="m-upgradesUpgradeOptionsPlan__row">
  <ul>
- <li>
+ <li i18n>
  Access exclusive content
  </li>
 
- <li>
+ <li i18n>
  Verify your channel
  </li>
 
- <li>
+ <li i18n>
  Hide boosted content
  </li>
  </ul>
 
  <p>
- <a class="m-upgradesUpgradeOptionsPlan__moreInfo" routerLink="/plus">
+ <a
+ class="m-upgradesUpgradeOptionsPlan__moreInfo"
+ routerLink="/plus"
+ i18n
+ >
  More info
  </a>
  </p>
  </div>
 
  <div class="m-upgradesUpgradeOptionsPlan__row">
- <p class="m-upgradesUpgradeOptionsPlan__pricing">
+ <p class="m-upgradesUpgradeOptionsPlan__pricing" i18n>
  <span>{{ plusPricing.amount }}</span> per month
  </p>
 
  <p
  class="m-upgradesUpgradeOptionsPlan__offer"
  *ngIf="plusPricing.offerFrom"
+ i18n
  >
  {{ plusPricing.offerFrom }} per month
  </p>
@@ -86,6 +91,7 @@
  routerLink="/plus"
  [queryParams]="intervalCurrencyQueryParams"
  *ngIf="!session.getLoggedInUser()?.plus"
+ i18n
  >
  Upgrade to Plus
  </a>
@@ -94,49 +100,54 @@
  <div
  class="m-upgradesUpgradeOptionsPlan__row m-upgradesUpgradeOptionsPlan__row--first"
  >
- <h3>Pro</h3>
+ <h3 i18n>Pro</h3>
 
- <p class="m-upgradesUpgradeOptionsPlan__targetAudience">
+ <p class="m-upgradesUpgradeOptionsPlan__targetAudience" i18n>
  For independent content creators
  </p>
  </div>
 
  <div class="m-upgradesUpgradeOptionsPlan__row">
- <p class="m-upgradesUpgradeOptionsPlan__description">
+ <p class="m-upgradesUpgradeOptionsPlan__description" i18n>
  The ultimate platform for independent content creators on the Internet.
  </p>
  </div>
 
  <div class="m-upgradesUpgradeOptionsPlan__row">
  <ul>
- <li>
+ <li i18n>
  Get paid for your work
  </li>
 
- <li>
+ <li i18n>
  Build your own custom website
  </li>
 
- <li>
+ <li i18n>
  Professional media tools
  </li>
  </ul>
 
  <p>
- <a class="m-upgradesUpgradeOptionsPlan__moreInfo" routerLink="/pro">
+ <a
+ class="m-upgradesUpgradeOptionsPlan__moreInfo"
+ routerLink="/pro"
+ i18n
+ >
  More info
  </a>
  </p>
  </div>
 
  <div class="m-upgradesUpgradeOptionsPlan__row">
- <p class="m-upgradesUpgradeOptionsPlan__pricing">
+ <p class="m-upgradesUpgradeOptionsPlan__pricing" i18n>
  <span>{{ proPricing.amount }}</span> per month
  </p>
 
  <p
  class="m-upgradesUpgradeOptionsPlan__offer"
  *ngIf="proPricing.offerFrom"
+ i18n
  >
  {{ proPricing.offerFrom }} per month
  </p>
@@ -149,6 +160,7 @@
  routerLink="/pro"
  [queryParams]="intervalCurrencyQueryParams"
  *ngIf="!session.getLoggedInUser()?.pro"
+ i18n
  >
  Upgrade to Pro
  </a>
@@ -157,6 +169,7 @@
  <a
  class="mf-button m-upgradesUpgradeOptionsPlan__action"
  routerLink="/pro"
+ i18n
  >
  Coming soon
  </a>
@@ -166,43 +179,47 @@
  <div
  class="m-upgradesUpgradeOptionsPlan__row m-upgradesUpgradeOptionsPlan__row--first"
  >
- <h3>Node</h3>
+ <h3 i18n>Node</h3>
 
- <p class="m-upgradesUpgradeOptionsPlan__targetAudience">
+ <p class="m-upgradesUpgradeOptionsPlan__targetAudience" i18n>
  For next-level content creators
  </p>
  </div>
 
  <div class="m-upgradesUpgradeOptionsPlan__row">
- <p class="m-upgradesUpgradeOptionsPlan__description">
+ <p class="m-upgradesUpgradeOptionsPlan__description" i18n>
  Launch your own white-labeled social network and mobile app.
  </p>
  </div>
 
  <div class="m-upgradesUpgradeOptionsPlan__row">
  <ul>
- <li>
+ <li i18n>
  White-labeled web + mobile app
  </li>
 
- <li>
+ <li i18n>
  Custom domain and brand
  </li>
 
- <li>
+ <li i18n>
  Independent from Minds
  </li>
  </ul>
 
  <p>
- <a class="m-upgradesUpgradeOptionsPlan__moreInfo" routerLink="/nodes">
+ <a
+ class="m-upgradesUpgradeOptionsPlan__moreInfo"
+ routerLink="/nodes"
+ i18n
+ >
  More info
  </a>
  </p>
  </div>
 
  <div class="m-upgradesUpgradeOptionsPlan__row">
- <p class="m-upgradesUpgradeOptionsPlan__pricing">
+ <p class="m-upgradesUpgradeOptionsPlan__pricing" i18n>
  Contact us for pricing
  </p>
  </div>
@@ -211,6 +228,7 @@
  <a
  class="mf-button m-upgradesUpgradeOptionsPlan__action"
  routerLink="/nodes"
+ i18n
  >
  Contact us
  </a>