(wip): /pro page

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

@@ -8,12 +8,27 @@
  }
  }
 
- .m-marketing--title,
+ .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;
@@ -21,7 +36,7 @@
  margin: 0 0 18px;
  }
 
- &.m-marketing--title__bigger-title {
+ &.m-marketing__subtitle--asTitle {
  font-size: 48px;
  line-height: 53px;
  margin: 0 0 26px;
@@ -49,6 +64,7 @@
  right: -0.03em;
  bottom: 0.22em;
  pointer-events: none;
+ z-index: -1;
  }
  }
  }
@@ -101,4 +117,98 @@
  }
  }
  }
+
+ // 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: 30px 0;
+ //margin: 0 20px;
+ }
+ }
+
+ .m-marketing__body {
+ position: relative;
+
+ &::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%);
+ background: linear-gradient(
+ 180deg,
+ #f6eded 0%,
+ #f5f5fe 99.99%
+ ); // TODO: Theme
+ z-index: -1;
+ }
+ }
+
+ p.m-marketing__description {
+ margin-bottom: 42px;
+ padding-right: 200px;
+
+ @include m-theme() {
+ color: themed($m-grey-300);
+ }
+
+ @media screen and (max-width: $m-grid-min-vp) {
+ padding-right: 0;
+ }
+ }
+
+ .m-marketing__image {
+ position: relative;
+ z-index: 0;
+
+ img {
+ object-fit: contain;
+ clip-path: polygon(0% 1%, 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;
+ }
+
+ &::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;
+ }
+ }
+ }
+ }
 }

src/app/modules/pro/channel/subscription/subscription.component.html

 <div *ngIf="isLoggedIn">
  <ng-container *ngIf="!inProgress; else inProgressSpinner">
  <button
- [hidden]="true"
  *ngIf="!active"
  class="mdl-button mdl-button--colored mdl-color--green"
  [disabled]="inProgress || criticalError"

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

-<div class="m-marketing m-marketing__Pro">
- <div class="m-marketing--hero">
- <div class="m-marketing--hero--video">
- <img [src]="minds.cdn_assets_url + 'assets/photos/fractal.jpg'" />
- </div>
-
- <div class="m-marketing--hero--inner">
- <div class="m-marketing--hero--overlay"></div>
+<m-marketing class="m-pro__marketing" pageTitle="Minds Pro" 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 Pro
+ </h1>
 
- <div class="m-marketing--hero--slogans">
- <h1 i18n>Minds Pro</h1>
+ <h2 i18n>
+ The ultimate platform for
+ <em>independent content creators</em>
+ </h2>
 
- <h3 i18n>
- The ultimate platform for independent content creators on the
- Internet.
- </h3>
+ <p class="m-marketing__description" i18n>
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci
+ doloremque eveniet incidunt magnam possimus quibusdam rem veritatis
+ voluptate! Aperiam, eum.
+ </p>
 
- <ul>
- <li i18n>Unlimited HD video</li>
- <li i18n>Custom domains</li>
- <li i18n>Complete monetization</li>
- <li i18n>Full analytics console</li>
- <li i18n>Access to every Minds user</li>
- <li i18n>Custom branding</li>
- </ul>
+ <div class="">
+ <m-pro--subscription
+ (onEnable)="goToSettings()"
+ ></m-pro--subscription>
+ </div>
  </div>
 
- <div class="m-marketing--hero--actions m-marketing--action-button">
- <m-pro--subscription (onEnable)="goToSettings()"></m-pro--subscription>
+ <div
+ class="m-grid__column-5 m-grid__column-12--mobile m-marketing__image"
+ >
+ <span>
+ <img [src]="cdnAssetsUrl + 'assets/photos/podcast-people.jpg'" />
+ </span>
  </div>
  </div>
  </div>
-</div>
 
-<m-footer></m-footer>
+ <m-marketing__asFeaturedIn slot="2"></m-marketing__asFeaturedIn>
+</m-marketing>

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

@@ -7,7 +7,7 @@ import { Router } from '@angular/router';
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ProMarketingComponent {
- minds = window.Minds;
+ readonly cdnAssetsUrl: string = window.Minds.cdn_assets_url;
 
  constructor(protected router: Router) {}
 

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

-<m-marketing class="m-upgrades" pageTitle="Upgrade your account" i18n-pageTitle>
+<m-marketing
+ class="m-upgrades"
+ pageTitle="Upgrade your Minds experience"
+ i18n-pageTitle
+>
  <div class="m-marketing__main m-marketing__section--style-1">
  <div class="m-grid m-marketing__wrapper">
  <div class="m-grid__column-5 m-grid__column-12--mobile m-upgrades__body">
- <h1 class="m-marketing--title__bigger-title" i18n>
+ <h2 class="m-marketing__subtitle--asTitle" i18n>
  Upgrade your Minds experience
- </h1>
+ </h2>
 
  <p class="m-marketing__description" i18n>
  Minds offers a unique range of powerful upgrades that will supercharge