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

@@ -204,8 +204,8 @@
 
     .m-marketing__imageTick--left {
       position: absolute;
-      bottom: 8px;
-      left: -45px;
+      bottom: 62px;
+      left: -21px;
 
       @media screen and(min-width: $max-mobile) and (max-width: $m-grid-min-vp) {
         bottom: -23%;

src/app/foundation/grid.scss

@@ -16,7 +16,7 @@
     }
   }
 
-  @media screen and (min-width: $m-grid-max-mobile) and (max-width: $m-grid-min-vp) {
+  @media screen and (min-width: $m-grid-max-mobile) and (max-width: $m-grid-max-tablet) {
     @for $i from 1 through $m-grid-cols {
       .m-grid__column-#{$i}--tablet {
         grid-column: auto / span $i;

src/app/modules/homepage-v2/homepage-v2.component.html

@@ -145,7 +145,7 @@
           </div>
         </div>
         <div
-          class="m-grid__column-6 m-grid__column-6--tablet m-grid__column-12--mobile m-marketing__image"
+          class="m-grid__column-6 m-grid__column-5--tablet m-grid__column-12--mobile m-marketing__image"
         >
           <span>
             <img

src/app/modules/homepage-v2/homepage-v2.component.scss

@@ -43,7 +43,19 @@ m-homepage__v2 {
     .m-marketing__section--style-5 {
       .m-marketing__wrapper {
         .m-marketing__body {
-          padding: 17px 0 0;
+          @media screen and(min-width: $m-grid-max-mobile) {
+            padding: 17px 0 0;
+          }
+        }
+
+        @media screen and(min-width: $m-grid-max-mobile) and (max-width: $m-grid-max-tablet) {
+          .m-marketing__body {
+            padding: 0 0 0 35px;
+
+            h2 {
+              margin: 0 0 29px;
+            }
+          }
         }
 
         .m-marketing__link {
@@ -56,6 +68,9 @@ m-homepage__v2 {
           @media screen and(min-width: $m-grid-max-mobile) and (max-width: $m-grid-min-vp) {
             padding-right: 10px;
           }
+          @media screen and(max-width: $max-mobile) {
+            padding-right: 0;
+          }
         }
 
         .m-marketing__image {
@@ -352,6 +367,68 @@ m-homepage__v2 {
     }
   }
 
+  .m-marketing__section--style-4 {
+    margin-bottom: 205px !important;
+
+    @media screen and(min-width: $m-grid-max-mobile) and(max-width: $m-grid-max-tablet) {
+      margin-bottom: 263px !important;
+    }
+
+    @media screen and(max-width: $m-grid-max-mobile) {
+      margin-bottom: 155px !important;
+    }
+
+    .m-marketing__wrapper {
+      .m-marketing__body {
+        @media screen and(min-width: $m-grid-min-vp) {
+          margin-left: 5em;
+        }
+      }
+    }
+
+    .m-marketing__image {
+      .m-marketing__imageUX {
+        img.m-marketing__image--2 {
+          width: 317px;
+          height: 168.7px;
+
+          @media screen and(min-width: $m-grid-max-tablet) {
+            bottom: 77px;
+            left: 20px;
+          }
+
+          @media screen and(min-width: $m-grid-max-mobile) and(max-width: $m-grid-max-tablet) {
+            bottom: 55px;
+            left: -5px;
+          }
+
+          @media screen and(max-width: $m-grid-max-mobile) {
+            bottom: 0;
+            left: 50%;
+          }
+        }
+
+        .m-marketing__imageTick {
+          background-color: #848484;
+
+          &.m-marketing__imageTick--left {
+            bottom: 48px;
+            left: -26px;
+
+            @media screen and(min-width: $m-grid-max-mobile) and (max-width: $m-grid-max-tablet) {
+              bottom: 25px;
+              left: -46px;
+            }
+            @media screen and(max-width: $m-grid-max-mobile) {
+              bottom: -21%;
+              left: 15%;
+            }
+          }
+        }
+      }
+    }
+  }
+
   .m-homepage__joinButton {
     font-size: 20px;
     line-height: 26px;
@@ -368,8 +445,8 @@ m-homepage__v2 {
     }
 
     &.m-homepage__joinButton--first {
-      margin: 22px 0 74px 0;
-      @media screen and (max-width: 900px) {
+      margin: 22px 0 0 0;
+      @media screen and (max-width: $m-grid-max-mobile) {
         display: none;
       }
     }
@@ -381,14 +458,26 @@ m-homepage__v2 {
     align-items: center;
     //width: 50%;
 
-    margin-top: 50px;
+    margin-top: 120px;
 
-    & > a:first-child {
-      margin-right: 5%;
+    @media screen and(min-width: $m-grid-max-tablet) and (max-width: $m-grid-min-vp) {
+      margin-top: 170px;
+    }
+
+    @media screen and(min-width: 700px) and (max-width: $m-grid-max-tablet) {
+      margin-top: 11vw;
+    }
+
+    @media screen and (min-width: 680px) and (max-width: 700px) {
+      margin-top: 8vw;
+    }
+
+    @media screen and(max-width: 680px) {
+      margin-top: 5vw;
     }
 
-    @media screen and (min-width: $m-grid-max-mobile) and (max-width: $m-grid-min-vp) {
-      margin-top: 30px;
+    & > a:first-child {
+      margin-right: 5%;
     }
 
     @media screen and(max-width: $m-grid-max-mobile) {
@@ -431,6 +520,13 @@ m-homepage__v2 {
   .m-homepage__quotation {
     margin-top: 84px;
     margin-bottom: 78px;
+
+    display: flex;
+    align-items: center;
+
+    .m-marketing__quotation {
+      width: auto !important;
+    }
   }
 
   .m-marketing__asFeaturedIn {
@@ -459,6 +555,18 @@ m-homepage__v2 {
     text-align: left !important;
   }
 
+  .m-marketing__description {
+    @media screen and(min-width: $m-grid-max-mobile) and (max-width: $m-grid-max-tablet) {
+      font-size: 17px !important;
+      line-height: 24px !important;
+    }
+
+    @media screen and (max-width: $m-grid-max-mobile) {
+      font-size: 16px !important;
+      line-height: 22px !important;
+    }
+  }
+
   @media screen and(max-width: $m-grid-max-mobile) {
     display: block;
     margin-top: 55px;
@@ -474,7 +582,7 @@ m-homepage__v2 {
         line-height: 37px;
         color: #4a4a4a;
         white-space: nowrap;
-        margin-bottom: 34px;
+        margin-bottom: 48px;
 
         @media screen and(min-width: $m-grid-max-mobile) and (max-width: $m-grid-max-tablet) {
           font-size: 24px;

src/app/modules/homepage-v2/homepage-v2.component.ts

-import {
-  Component,
-  HostListener,
-  OnDestroy,
-  OnInit,
-  ViewChild,
-} from '@angular/core';
+import { Component, OnDestroy, ViewChild } from '@angular/core';
 import { Client } from '../../services/api/client';
 import { MindsTitle } from '../../services/ux/title';
 import { Router } from '@angular/router';
@@ -19,7 +13,7 @@ import { FeaturesService } from '../../services/features.service';
   selector: 'm-homepage__v2',
   templateUrl: 'homepage-v2.component.html',
 })
-export class HomepageV2Component implements OnInit, OnDestroy {
+export class HomepageV2Component implements OnDestroy {
   @ViewChild('registerForm', { static: false }) registerForm: RegisterForm;
 
   readonly cdnAssetsUrl: string = window.Minds.cdn_assets_url;
@@ -46,10 +40,6 @@ export class HomepageV2Component implements OnInit, OnDestroy {
     this.topbarService.toggleMarketingPages(true, false);
   }
 
-  ngOnInit() {
-    this.onResize();
-  }
-
   ngOnDestroy() {
     this.topbarService.toggleMarketingPages(false);
   }
@@ -62,20 +52,6 @@ export class HomepageV2Component implements OnInit, OnDestroy {
     }
   }
 
-  @HostListener('window:resize')
-  onResize() {
-    const tick: HTMLSpanElement = document.querySelector(
-      '.m-marketing__imageUX > .m-marketing__imageTick'
-    );
-    if (window.innerWidth > 480 && window.innerWidth < 1168) {
-      tick.classList.remove('m-marketing__imageTick--left');
-      tick.classList.add('m-marketing__imageTick--right');
-    } else {
-      tick.classList.add('m-marketing__imageTick--left');
-      tick.classList.remove('m-marketing__imageTick--right');
-    }
-  }
-
   isMobile() {
     return window.innerWidth <= 540;
   }