src/app/modules/mobile/marketing/marketing.component.html

 <div class="m-marketing m-mobile--marketing">
-
+ <!--Top / Hero -->
  <div class="m-marketing--hero">
  <div class="m-marketing--hero--video">
  <img [src]="minds.cdn_assets_url + 'assets/photos/circles.png'">
  </div>
-
  <div class="m-marketing--hero--inner">
-
  <div class="m-marketing--hero--slogans">
-
- <h2>
- Minds Android App
- </h2>
-
+ <h1>
+ Minds Mobile App
+ </h1>
  </div>
-
  <div class="m-marketing--hero--actions">
- <i class="material-icons m-mobile__giantDroid">android</i>
+ <!-- Space for an icon -->
  </div>
-
  </div>
-
  </div>
 
  <section class="m-marketing--section mdl-color--white" style="padding-bottom: 0; padding-top: 0">
-
+ <div class="m-marketing--downloadPlatform">
+ <h2>
+ For Android:
+ </h2>
+ <!--Android APK -->
+ <div class="m-marketing--downloadOption">
+ <div class="m-marketing--downloadButton">
+ <a [href]="latestRelease.href" target="_blank"><img [src]="minds.cdn_assets_url + 'assets/marketing/mobile-dl-button.png'"/></a>
+ <span>(recommended)</span>
+ </div>
+ <p>Download the mobile app directly from Minds for the best experience. All content is accessible.
+ <p>In order to install this version you must:</p>
+ <ul>
+ <li>Update Phone settings to "enable downloads from unverified source"</li>
+ <li>Download and install!</li>
+ </ul>
+ </div>
+ <!--Play Store -->
+ <div class="m-marketing--downloadOption">
+ <div class="m-marketing--downloadButton">
+ <a href='https://play.google.com/store/apps/details?id=com.minds.mobile&pcampaignid=MKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1' target="_blank"><img alt='Get it on Google Play' src='https://play.google.com/intl/en_gb/badges/images/generic/en_badge_web_generic.png'/></a>
+ </div>
+ <p>You may also download the mobile app from the Google Play Store. Due to the Google Play Store terms of service, NSFW content is not accessible in this version.</p>
+ </div>
+ </div>
+ <!--iOS Download -->
+ <div class="m-marketing--downloadPlatform">
+ <h2>
+ For iPhone:
+ </h2>
+ <div class="m-marketing--downloadOption">
+ <div class="m-marketing--downloadButton m-marketing--downloadButton--iOS">
+ <a href="https://geo.itunes.apple.com/us/app/minds-com/id961771928?mt=8&amp;uo=6" target="_blank"><img alt="iOS App" src="https://devimages-cdn.apple.com/app-store/marketing/guidelines/images/badge-download-on-the-app-store.svg"></a>
+ </div>
+ <p>iPhone users may download the mobile app directly from the iOS App Store. All features of the Minds Token (wallet, boost, wire, etc) are not currently supported in this version. All content is accessible.</p>
+ </div>
+ </div>
  <div class="m-marketing--section--subsection m-marketing--section--subsection--first">
  <div class="m-marketing--section--subsection-container">
  <div class="m-marketing--section--subsection-left m-marketing--section--subsection-text">
  <div class="mdl-grid">
+ <h2>
+ Release History:
+ </h2>
  <div class="mdl-cell mdl-cell--12-col m-mobile--marketing--spinner" *ngIf="inProgress">
  <div class="mdl-spinner mdl-js-spinner is-active"></div>
  </div>
@@ -43,7 +75,6 @@
  <ng-container *ngIf="release.unstable">Canary -</ng-container>
  {{release.version}}
  </h2>
-
  <p>Released: {{release.timestamp * 1000 | date:'longDate'}} -
  <a [href]="release.href" target="_blank">
  Download

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

 .m-mobile--marketing {
 
  .m-marketing--hero {
- padding:52px 0 !important;
+ margin-bottom: 32px;
+ padding: 0;
+ @media screen and (min-width: $max-mobile) {
+ padding:52px 0 !important;
+ }
 
  .m-marketing--hero--inner {
- padding-top: 52px;
- padding-bottom: 52px;
  flex-wrap: wrap;
+ padding: 52 0 52 0;
+ 
+ .m-marketing--hero--slogans h1 {
+ text-align: left;
+ padding-left: $minds-padding * 2;
+ font-size: xx-large;
+ font-weight: 700;
+ @media screen and (min-width: $min-tablet) {
+ margin-left: 120px;
+ font-size: 42px;
+ }
+ @include m-theme(){
+ color: themed($m-white-always);
+ }
+ }
  }
 
  img {
@@ -24,7 +41,31 @@
  }
 
  .m-marketing--section--subsection--first .m-marketing--section--subsection-container {
- padding-top: 32px !important;
+ padding-top: 0;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ text-align: left;
+ width: 100%;
+ @media screen and (min-width: $min-tablet) {
+ width: unset;
+ margin: 0 25%;
+ }
+
+ .m-marketing--section--subsection-text {
+ max-width: 100%;
+ min-width: 100%;
+ margin: 0;
+ padding: 0;
+
+ h2 {
+ text-align: left;
+ font-size: x-large;
+ font-weight: 700;
+ padding: $minds-padding * 1.5 0;
+ margin: 0 0 ($minds-padding * 2) ($minds-padding * 2);
+ }
+ }
  }
 
  .m-marketing--hero--actions img {
@@ -47,6 +88,72 @@
  }
  }
 
+ .m-marketing--section {
+ text-align: left;
+ margin-left: $minds-padding * 2;
+
+ h2 {
+ text-align: left;
+ font-size: x-large;
+ font-weight: 700;
+ padding-left: 12px; 
+ }
+
+ .m-marketing--downloadPlatform {
+ @media screen and (min-width: $min-tablet) {
+ margin: 0 25%;
+ }
+
+ .m-marketing--downloadOption {
+ padding-bottom: $minds-padding * 2;
+ @media screen and (max-width: $min-tablet) {
+ padding-bottom: $minds-padding * 1;
+ }
+
+ .m-marketing--downloadButton--iOS {
+ img {
+ padding-left: 14px;
+ }
+ }
+
+ .m-marketing--downloadButton {
+ display: flex;
+ flex-wrap: wrap;
+ padding-bottom: $minds-padding * 4;
+ @media screen and (max-width: $min-tablet) {
+ padding-bottom: $minds-padding * 2;
+ }
+
+ img { 
+ max-width: 200px;
+ min-width: 175px;
+ }
+ }
+
+ span {
+ font-size: large;
+ align-self: center;
+ padding-left: $minds-padding * 2;
+ font-weight: 400;
+ }
+
+ p {
+ padding: 0 ($minds-padding * 1.5);
+ line-height: 24pt;
+ @include m-theme(){
+ color: themed($m-grey-600);
+ }
+ }
+
+ li {
+ @include m-theme(){
+ color: themed($m-grey-600);
+ }
+ }
+ }
+ }
+ }
+
  @media screen and (min-width: 500px) {
  .m-marketing--hero--slogans h2 {
  font-size: 60px !important;
@@ -94,10 +201,3 @@
  }
 
 }
-
-.m-mobile__giantDroid {
- font-size: 152px;
- @include m-theme(){
- color: themed($m-white);
- }
-}

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

@@ -2,6 +2,7 @@ import {ChangeDetectionStrategy, ChangeDetectorRef, Component} from '@angular/co
 import {MindsTitle} from '../../../services/ux/title';
 import {Session} from '../../../services/session';
 import {MobileService} from "../mobile.service";
+import { first } from 'lodash';
 
 @Component({
  selector: 'm-mobile--marketing',
@@ -15,6 +16,9 @@ export class MobileMarketingComponent {
  releases: any[] = [];
  inProgress: boolean = false;
  error: string;
+ latestRelease: any = {
+ href: null,
+ };
 
  constructor(
  protected title: MindsTitle,
@@ -26,18 +30,20 @@ export class MobileMarketingComponent {
 
  ngOnInit() {
  this.title.setTitle('Mobile');
-
  this.user = this.session.getLoggedInUser();
-
  this.load();
  }
 
+ /**
+ * Gets releases for view.
+ */
  async load() {
  try {
  this.inProgress = true;
  this.detectChanges();
 
  this.releases = await this.service.getReleases();
+ this.latestRelease = await first(this.releases.filter(rel => rel.latest && !rel.unstable));
  } catch (e) {
  console.error(e);
  this.error = e.message || 'Unknown error';