(feat): Upgrades page imagery

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

@@ -107,6 +107,8 @@
  }
 
  .m-marketing__wrapper {
+ position: relative;
+ z-index: 0;
  padding: 95px 0 85px;
 
  @media screen and (max-width: $m-grid-min-vp) {
@@ -115,10 +117,158 @@
  }
  }
 
+ .m-marketing__body {
+ position: relative;
+
+ &::after {
+ content: '';
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 383px;
+ height: 388px;
+ transform: translate(-290px, 97px);
+ background: url('<%= APP_CDN %>/assets/marketing/deco_2.svg') no-repeat;
+ z-index: -1;
+ opacity: 0.6;
+
+ @media screen and (max-width: $m-grid-min-vp) {
+ transform: translate(170px, -180px);
+ left: auto;
+ right: 0;
+ }
+ }
+ }
+
+ h2,
+ .m-marketing__subtitle {
+ @media screen and (max-width: $m-grid-min-vp) {
+ padding: 0 30px;
+ }
+ }
+
  p.m-marketing__description {
  @include m-theme() {
  color: themed($m-grey-300);
  }
+
+ @media screen and (max-width: $m-grid-min-vp) {
+ padding: 0 30px;
+ }
+ }
+
+ ul.m-marketing__points {
+ @media screen and (max-width: $m-grid-min-vp) {
+ padding: 0 30px;
+ }
+ }
+
+ .m-marketing__image {
+ position: relative;
+ align-self: center;
+ z-index: 0;
+
+ span {
+ display: block;
+ position: relative;
+ width: 528px;
+ height: 415px;
+
+ @media screen and (max-width: $m-grid-min-vp) {
+ width: 313px;
+ height: 237px;
+ margin: 0 auto;
+ }
+
+ // Deco
+
+ &::before {
+ content: '';
+ display: block;
+ position: absolute;
+ width: 393px;
+ height: 193px;
+ top: 0;
+ left: 0;
+ transform: translate(61px, 179px);
+ background: url('<%= APP_CDN %>/assets/marketing/deco_1.svg')
+ no-repeat;
+ z-index: -1;
+
+ @media screen and (max-width: $m-grid-min-vp) {
+ top: 0;
+ left: 0;
+ width: 377px;
+ height: 193px;
+ transform: translate(-32px, 18px);
+ background-size: cover;
+ }
+ }
+
+ &::after {
+ content: '';
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 383px;
+ height: 383px;
+ transform: translate(178px, -95px);
+ background: url('<%= APP_CDN %>/assets/marketing/deco_2.svg')
+ no-repeat;
+ z-index: -1;
+
+ @media screen and (max-width: $m-grid-min-vp) {
+ content: initial;
+ display: none;
+ }
+ }
+ }
+
+ img {
+ position: absolute;
+ object-fit: cover;
+ }
+
+ .m-marketing__image--1 {
+ top: 0;
+ left: 90px;
+ width: 327px;
+ height: 327px;
+
+ @media screen and (max-width: $m-grid-min-vp) {
+ top: 0;
+ left: 0;
+ width: 190px;
+ height: 190px;
+ }
+ }
+
+ .m-marketing__image--2 {
+ top: 295px;
+ left: 0;
+ width: 181px;
+ height: 120px;
+
+ @media screen and (max-width: $m-grid-min-vp) {
+ display: none;
+ }
+ }
+
+ .m-marketing__image--3 {
+ top: 163px;
+ left: 358px;
+ width: 170px;
+ height: 198px;
+
+ @media screen and (max-width: $m-grid-min-vp) {
+ top: 65px;
+ left: 165px;
+ width: 148px;
+ height: 172px;
+ }
+ }
  }
  }
 

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

@@ -5,7 +5,7 @@
 >
  <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">
+ <div class="m-grid__column-5 m-grid__column-12--mobile m-marketing__body">
  <h2 class="m-marketing__subtitle--asTitle" i18n>
  Upgrade your Minds experience
  </h2>
@@ -32,8 +32,25 @@
  </a>
  </div>
 
- <div class="m-grid__column-7 m-grid__column-12--mobile m-upgrades__image">
- <!-- Image -->
+ <div
+ class="m-grid__column-7 m-grid__column-12--mobile m-marketing__image"
+ >
+ <span>
+ <img
+ class="m-marketing__image--1"
+ [src]="cdnAssetsUrl + 'assets/marketing/upgrades-1.jpg'"
+ />
+
+ <img
+ class="m-marketing__image--2"
+ [src]="cdnAssetsUrl + 'assets/marketing/upgrades-2.jpg'"
+ />
+
+ <img
+ class="m-marketing__image--3"
+ [src]="cdnAssetsUrl + 'assets/marketing/upgrades-3.jpg'"
+ />
+ </span>
  </div>
  </div>
  </div>

src/app/modules/upgrades/upgrades.component.ts

@@ -11,6 +11,8 @@ import {
  templateUrl: 'upgrades.component.html',
 })
 export class UpgradesComponent {
+ readonly cdnAssetsUrl: string = window.Minds.cdn_assets_url;
+
  @ViewChild('upgradeOptionsAnchor', { static: false })
  readonly upgradeOptionsAnchor: ElementRef;