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

 <div class="m-marketing m-mobile--marketing">
 
  <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
+ Minds Mobile App
  </h2>
-
  </div>
-
  <div class="m-marketing--hero--actions">
- <i class="material-icons m-mobile__giantDroid">android</i>
+ <div class="m-marketing--hero--logos">
+ <img [src]="minds.cdn_assets_url + 'assets/logos/bulb.svg'">
+ </div>
+ <div class="mdl-card__supporting-text m-marketing--section--downloadContainer">
+ <a href="https://geo.itunes.apple.com/us/app/minds-com/id961771928?mt=8&amp;uo=6" target="_blank">
+ <img class="m-marketing--section--downloadButton m-marketing--section--downloadButton--ios" 
+ src="https://devimages-cdn.apple.com/app-store/marketing/guidelines/images/badge-download-on-the-app-store.svg"/>
+ </a>
+ <a [href]="latestUrl">
+ <img alt='Get it for Android' 
+ [src]="minds.cdn_assets_url + 'assets/photos/android-download.png'"
+ class="m-marketing--section--downloadButton m-marketing--section--downloadButton--android"/>
+ </a>
+ </div>
  </div>
-
  </div>
-
  </div>
 
  <section class="m-marketing--section mdl-color--white" style="padding-bottom: 0; padding-top: 0">
@@ -32,7 +40,12 @@
  <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>
-
+ <span class="m-mobile--marketing--play-store">
+ A limited version is also available via
+ <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">
+ Google Play.</a>
+ </span>
  <div class="mdl-cell mdl-cell--12-col" *ngIf="error">
  <p class="m-mobile--marketing--error">Oops! There was an issue retrieving mobile releases: <i>{{error}}</i></p>
  </div>

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

@@ -27,8 +27,14 @@
  padding-top: 32px !important;
  }
 
- .m-marketing--hero--actions img {
- max-height: 250px;
+ .m-marketing--hero--actions {
+ text-align: center;
+
+ img {
+ max-width: 180px;
+ max-height: 160px;
+ margin: 0 4px;
+ }
  }
 
  @media screen and (max-width: 662px) {
@@ -41,6 +47,7 @@
  margin-top: 16px;
  margin-left: 0;
  text-align: center;
+
  }
  .m-marketing--section {
  padding: 16px;
@@ -93,6 +100,16 @@
  }
  }
 
+ .m-mobile--marketing--play-store {
+ color: #444;
+ margin: 16px 0;
+ font-size: 56px;
+ line-height: 1;
+ font-weight: 600;
+ letter-spacing: 1.25px;
+ font-size: 12pt;
+ margin-left: 12px;
+ }
 }
 
 .m-mobile__giantDroid {
@@ -101,3 +118,18 @@
  color: themed($m-white);
  }
 }
+
+.m-marketing--section--downloadContainer {
+
+ .m-marketing--section--downloadButton--ios {
+ width: 165px;
+ }
+ .m-marketing--section--downloadButton--android {
+ width: 165px;
+ }
+ a .m-marketing--section--downloadButton {
+ max-width: 200px;
+ max-height: 55px;
+ min-width: unset !important;
+ }
+}

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

@@ -15,7 +15,8 @@ export class MobileMarketingComponent {
  releases: any[] = [];
  inProgress: boolean = false;
  error: string;
-
+ latestUrl: string;
+ 
  constructor(
  protected title: MindsTitle,
  protected session: Session,
@@ -38,6 +39,7 @@ export class MobileMarketingComponent {
  this.detectChanges();
 
  this.releases = await this.service.getReleases();
+ this.latestUrl = this.releases[0].href;
  } catch (e) {
  console.error(e);
  this.error = e.message || 'Unknown error';