(feat): Style 3; style 4; style tail

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

+@import '../../../../foundation/grid-values';
+
 .m-marketing__main,
 .m-marketing__section {
  // Common
- overflow-x: hidden;
+ // overflow-x: hidden; // Add back???
+
+ &.m-marketing__section {
+ margin-top: 110px;
+
+ @media screen and (max-width: $m-grid-min-vp) {
+ margin-top: 80px;
+
+ &:first-child {
+ margin-top: 60px;
+ }
+ }
+ }
 
  .m-marketing--hideMobile {
  @media screen and (max-width: $m-grid-min-vp) {
@@ -98,7 +112,11 @@
 
  .m-marketing__actionButtons {
  > * {
- margin-right: 25px;
+ margin: 0 25px 0 0;
+
+ @media screen and (max-width: $m-grid-min-vp) {
+ margin: 0 0 20px;
+ }
 
  &:last-child {
  margin-right: initial;

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

+@import '../../../../foundation/grid-values';
+
 .m-marketing__main,
 .m-marketing__section {
  &.m-marketing__section--style-1 {

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

+@import '../../../../foundation/grid-values';
+
 .m-marketing__main,
 .m-marketing__section {
  &.m-marketing__section--style-2 {

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

+@import '../../../../foundation/grid-values';
+
 .m-marketing__main,
 .m-marketing__section {
  &.m-marketing__section--style-3 {
  .m-marketing__wrapper {
  position: relative;
  z-index: 0;
- padding: 72px 0 32px;
+ padding: 80px 0 80px;
 
  @media screen and (max-width: $m-grid-min-vp) {
  padding: 0;
@@ -13,20 +15,22 @@
 
  .m-marketing__body {
  position: relative;
+ padding: 95px 0 0;
 
  @media screen and (max-width: $m-grid-min-vp) {
- padding: 0 30px 30px;
+ padding: 0 30px 0;
  }
 
  &::before {
  content: '';
  position: absolute;
  top: 0;
- right: -290px;
- bottom: -56px;
+ right: -360px;
  left: 0;
- transform: translate(-86px, -56px);
- clip-path: polygon(0% 0%, 0% 100%, 100% 92%, 100% 0%);
+ bottom: auto;
+ height: calc(100% + 160px);
+ transform: translate(-230px, -80px);
+ clip-path: polygon(0% 6%, 0% 95%, 100% 100%, 100% 0%);
  z-index: -1;
 
  @include m-theme() {
@@ -38,21 +42,8 @@
  }
 
  @media screen and (max-width: $m-grid-min-vp) {
- right: 0;
- bottom: -3vw;
- transform: none;
- clip-path: none;
- }
- }
-
- h1 {
- @include m-on-theme(dark) {
- color: #ffffff;
- }
-
- @media screen and (max-width: $m-grid-min-vp) {
- margin: 15px 0 15px;
- text-align: center;
+ content: initial;
+ display: none;
  }
  }
 
@@ -64,7 +55,7 @@
  @media screen and (max-width: $m-grid-min-vp) {
  font-size: 28px;
  line-height: 32px;
- margin: 0 0 17px;
+ margin: 20px 0 17px;
  text-align: center;
  }
  }
@@ -94,53 +85,57 @@
  .m-marketing__image {
  position: relative;
  z-index: 0;
+ grid-column-start: 1;
+ grid-row: 1;
 
- img {
+ img.m-marketing__image--1 {
  object-fit: contain;
- clip-path: polygon(0% 1%, 0% 97%, 100% 100%, 100% 0%);
+ clip-path: polygon(0% 1%, 0% 100%, 100% 96%, 100% 0%);
 
  @media screen and (max-width: $m-grid-min-vp) {
  width: 100vw;
  height: 100vw;
  object-fit: cover;
- clip-path: polygon(0% 2%, 0% 97%, 100% 100%, 100% 0%);
+ clip-path: polygon(0% 1%, 0% 100%, 100% 97%, 100% 0%);
+ }
+ }
+
+ img.m-marketing__image--2 {
+ position: absolute;
+ right: 0;
+ bottom: 35px;
+
+ @media screen and (max-width: $m-grid-min-vp) {
+ right: auto;
+ left: 50%;
+ bottom: 0;
+ transform: translate(-50%, 40px);
+ max-width: 75vw;
+ max-height: 50vw;
+ object-fit: contain;
  }
  }
 
  span {
  display: inline-block;
  position: relative;
+ width: 100%;
 
- // 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;
-
- @media screen and (max-width: $m-grid-min-vp) {
- content: initial;
- display: none;
- }
+ @media screen and (max-width: $m-grid-min-vp) {
+ margin-bottom: 40px;
  }
 
+ // Deco
+
  &::after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
- right: 0;
+ left: 0;
  width: 284px;
  height: 262px;
- transform: translate(35px, -35px);
+ transform: translate(-60px, -50px);
  background: url('<%= APP_CDN %>/assets/marketing/deco_2-straight.svg')
  no-repeat;
  z-index: -1;

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

+@import '../../../../foundation/grid-values';
+
+.m-marketing__main,
+.m-marketing__section {
+ &.m-marketing__section--style-4 {
+ .m-marketing__wrapper {
+ position: relative;
+ z-index: 0;
+ padding: 80px 0 80px;
+
+ @media screen and (max-width: $m-grid-min-vp) {
+ padding: 0;
+ }
+ }
+
+ .m-marketing__body {
+ position: relative;
+ padding: 95px 0 0;
+
+ @media screen and (max-width: $m-grid-min-vp) {
+ padding: 0 30px 0;
+ }
+
+ h2 {
+ @include m-on-theme(dark) {
+ color: #ffffff;
+ }
+
+ @media screen and (max-width: $m-grid-min-vp) {
+ font-size: 28px;
+ line-height: 32px;
+ margin: 20px 0 17px;
+ text-align: center;
+ }
+ }
+ }
+
+ p.m-marketing__description {
+ margin-bottom: 42px;
+ padding-right: 200px;
+
+ @include m-theme() {
+ color: themed($m-grey-300);
+ }
+
+ @include m-on-theme(dark) {
+ color: #ffffff;
+ }
+
+ @media screen and (max-width: $m-grid-min-vp) {
+ padding-right: 0;
+ margin-bottom: 30px;
+ font-size: 16px;
+ line-height: 23px;
+ text-align: center;
+ }
+ }
+
+ .m-marketing__image {
+ position: relative;
+ z-index: 0;
+
+ @media screen and (max-width: $m-grid-min-vp) {
+ grid-row: 1;
+ }
+
+ img.m-marketing__image--1 {
+ object-fit: contain;
+ clip-path: polygon(0% 1%, 0% 96%, 100% 100%, 100% 0%);
+
+ @media screen and (max-width: $m-grid-min-vp) {
+ width: 100vw;
+ height: 100vw;
+ object-fit: cover;
+ clip-path: polygon(0% 1%, 0% 97%, 100% 100%, 100% 0%);
+ }
+ }
+
+ img.m-marketing__image--2 {
+ position: absolute;
+ left: 0;
+ bottom: 35px;
+
+ @media screen and (max-width: $m-grid-min-vp) {
+ right: auto;
+ left: 50%;
+ bottom: 0;
+ transform: translate(-50%, 40px);
+ max-width: 75vw;
+ max-height: 50vw;
+ object-fit: contain;
+ }
+ }
+
+ span {
+ display: inline-block;
+ position: relative;
+ width: 100%;
+ text-align: right;
+
+ @media screen and (max-width: $m-grid-min-vp) {
+ margin-bottom: 40px;
+ }
+
+ // Deco
+
+ &::after {
+ content: '';
+ display: block;
+ position: absolute;
+ right: 0;
+ bottom: 0;
+ width: 284px;
+ height: 262px;
+ transform: translate(50px, 50px);
+ background: url('<%= APP_CDN %>/assets/marketing/deco_2-straight.svg')
+ no-repeat;
+ z-index: -1;
+
+ @media screen and (max-width: $m-grid-min-vp) {
+ content: initial;
+ display: none;
+ }
+ }
+ }
+ }
+ }
+}

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

+@import '../../../../foundation/grid-values';
+
+.m-marketing__main,
+.m-marketing__section {
+ &.m-marketing__section--tail {
+ h2 {
+ font-size: 24px;
+ line-height: 32px;
+ font-weight: 700;
+ margin: 0 0 70px;
+
+ @include m-theme() {
+ color: themed($m-grey-300);
+ }
+
+ @media screen and (max-width: $m-grid-min-vp) {
+ margin: 0 0 35px;
+ }
+ }
+
+ .m-marketing__body {
+ text-align: center;
+ padding: 0 36px;
+
+ @media screen and (max-width: $m-grid-min-vp) {
+ margin-bottom: 45px;
+ }
+
+ h3 {
+ margin: 0 0 24px;
+ font-size: 24px;
+ line-height: 32px;
+ font-weight: 900;
+
+ @media screen and (max-width: $m-grid-min-vp) {
+ margin: 0 0 12px;
+ }
+ }
+
+ p.m-marketing__description {
+ font-size: 16px;
+ line-height: 21px;
+
+ @include m-theme() {
+ color: themed($m-grey-300);
+ }
+ }
+
+ &.m-marketing__body--extra {
+ margin-top: 135px;
+
+ @media screen and (max-width: $m-grid-min-vp) {
+ margin-top: 0;
+ }
+ }
+ }
+ }
+}

src/app/modules/blockchain/marketing/rewards.component.html

@@ -226,7 +226,7 @@
  </div>
 
  <div
- class="m-grid__column-12 m-grid__column-12--mobile m-marketing__body"
+ class="m-grid__column-12 m-grid__column-12--mobile m-marketing__body m-marketing__body--extra"
  >
  <button class="mf-button mf-button--alt" (click)="scrollToTop()" i18n>
  Join Rewards

src/app/modules/blockchain/marketing/token.component.html

@@ -196,7 +196,7 @@
  </div>
 
  <div
- class="m-grid__column-12 m-grid__column-12--mobile m-marketing__body"
+ class="m-grid__column-12 m-grid__column-12--mobile m-marketing__body m-marketing__body--extra"
  >
  <button class="mf-button mf-button--alt" (click)="scrollToTop()" i18n>
  Buy Tokens

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

@@ -194,7 +194,7 @@
  </div>
 
  <div
- class="m-grid__column-12 m-grid__column-12--mobile m-marketing__body"
+ class="m-grid__column-12 m-grid__column-12--mobile m-marketing__body m-marketing__body--extra"
  >
  <button class="mf-button mf-button--alt" (click)="scrollToTop()" i18n>
  Contact us for details

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

@@ -204,7 +204,7 @@
  </div>
 
  <div
- class="m-grid__column-12 m-grid__column-12--mobile m-marketing__body"
+ class="m-grid__column-12 m-grid__column-12--mobile m-marketing__body m-marketing__body--extra"
  >
  <button class="mf-button mf-button--alt" (click)="scrollToTop()" i18n>
  Upgrade to Plus

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

@@ -23,9 +23,18 @@ import { OverlayModalService } from '../../../services/ux/overlay-modal';
 import { OverlayModalComponent } from '../../../common/components/overlay-modal/overlay-modal.component';
 import { SessionsStorageService } from '../../../services/session-storage.service';
 import { SiteService } from '../../../common/services/site.service';
+import { ScrollService } from '../../../services/ux/scroll';
 
 @Component({
- providers: [ProChannelService, OverlayModalService, SignupModalService],
+ providers: [
+ ProChannelService,
+ OverlayModalService,
+ {
+ provide: SignupModalService,
+ useFactory: SignupModalService._,
+ deps: [Router, ScrollService],
+ },
+ ],
  selector: 'm-pro--channel',
  templateUrl: 'channel.component.html',
  changeDetection: ChangeDetectionStrategy.Default,

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

@@ -260,7 +260,7 @@
  </div>
 
  <div
- class="m-grid__column-12 m-grid__column-12--mobile m-marketing__body"
+ class="m-grid__column-12 m-grid__column-12--mobile m-marketing__body m-marketing__body--extra"
  >
  <button class="mf-button mf-button--alt" (click)="scrollToTop()" i18n>
  Upgrade to Pro

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

@@ -171,7 +171,7 @@
  <div class="m-marketing__section m-marketing__section--tail">
  <div class="m-grid m-marketing__wrapper">
  <div
- class="m-grid__column-12 m-grid__column-12--mobile m-marketing__body"
+ class="m-grid__column-12 m-grid__column-12--mobile m-marketing__body m-marketing__body--extra"
  >
  <button class="mf-button mf-button--alt" (click)="scrollToTop()" i18n>
  Monetize your channel