.angular-cli.json

@@ -7,17 +7,14 @@
     {
       "root": "src",
       "outDir": "dist",
-      "assets": [
-        "assets",
-        "favicon.ico"
-      ],
+      "assets": ["assets", "favicon.ico"],
       "index": "index.php",
       "main": "main.ts",
       "polyfills": "polyfills.ts",
       "test": "test.ts",
       "tsconfig": "tsconfig.app.json",
       "testTsconfig": "tsconfig.spec.json",
-      "prefix": "app",
+      "prefix": "m",
       "styles": [
         "../node_modules/material-design-lite/dist/material.blue_grey-amber.min.css",
         "../node_modules/material-design-icons/iconfont/material-icons.css",

angular.json

@@ -16,10 +16,7 @@
             "main": "src/main.ts",
             "tsConfig": "src/tsconfig.app.json",
             "polyfills": "src/polyfills.ts",
-            "assets": [
-              "src/assets",
-              "src/favicon.ico"
-            ],
+            "assets": ["src/assets", "src/favicon.ico"],
             "styles": [
               "node_modules/material-design-lite/dist/material.blue_grey-amber.min.css",
               "node_modules/material-design-icons/iconfont/material-icons.css",
@@ -52,6 +49,14 @@
                   "with": "src/environments/environment.prod.ts"
                 }
               ]
+            },
+            "hmr": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.hmr.ts"
+                }
+              ]
             }
           }
         },
@@ -63,6 +68,10 @@
           "configurations": {
             "production": {
               "browserTarget": "v5.x:build:production"
+            },
+            "hmr": {
+              "hmr": true,
+              "browserTarget": "v5.x:build:hmr"
             }
           }
         },
@@ -83,22 +92,14 @@
               "node_modules/medium-editor/dist/js/medium-editor.min.js",
               "src/shims/jitsi-api.min.js"
             ],
-            "assets": [
-              "src/assets",
-              "src/favicon.ico"
-            ]
+            "assets": ["src/assets", "src/favicon.ico"]
           }
         },
         "lint": {
           "builder": "@angular-devkit/build-angular:tslint",
           "options": {
-            "tsConfig": [
-              "src/tsconfig.app.json",
-              "src/tsconfig.spec.json"
-            ],
-            "exclude": [
-              "**/node_modules/**"
-            ]
+            "tsConfig": ["src/tsconfig.app.json", "src/tsconfig.spec.json"],
+            "exclude": ["**/node_modules/**"]
           }
         }
       }
@@ -118,12 +119,8 @@
         "lint": {
           "builder": "@angular-devkit/build-angular:tslint",
           "options": {
-            "tsConfig": [
-              "e2e/tsconfig.e2e.json"
-            ],
-            "exclude": [
-              "**/node_modules/**"
-            ]
+            "tsConfig": ["e2e/tsconfig.e2e.json"],
+            "exclude": ["**/node_modules/**"]
           }
         }
       }
@@ -132,11 +129,11 @@
   "defaultProject": "v5.x",
   "schematics": {
     "@schematics/angular:component": {
-      "prefix": "app",
+      "prefix": "m",
       "styleext": "scss"
     },
     "@schematics/angular:directive": {
-      "prefix": "app"
+      "prefix": "m"
     }
   }
 }

package.json

@@ -10,6 +10,7 @@
     "build": "ng build --prod",
     "prebuild-dev": "gulp build.sass --deploy-url=http://localhost/en",
     "build-dev": "ng build --output-path dist/en --deploy-url=/en/ --watch=true --poll=800",
+    "serve-dev": "ng serve --host=0.0.0.0 --deploy-url=/en/ --configuration=hmr --hmr --poll=800 --progress",
     "test": "ng test",
     "lint": "ng lint",
     "e2e": "cypress run --debug",
@@ -57,6 +58,7 @@
     "@angular/cli": "^7.2.1",
     "@angular/compiler-cli": "~8.0.3",
     "@angular/language-service": "~8.0.3",
+    "@angularclass/hmr": "^2.1.3",
     "@types/jasmine": "~2.8.8",
     "@types/jasminewd2": "~2.0.4",
     "@types/node": "~10.12.18",
@@ -88,7 +90,7 @@
   },
   "husky": {
     "hooks": {
-      "pre-commit": ".githooks/pre-commit && pretty-quick --staged --bail --pattern '**/*.*(ts|html|scss)'"
+      "pre-commit": "sh .githooks/pre-commit && pretty-quick --staged --bail --pattern \"**/*.*(ts|html|scss)\""
     }
   }
 }

src/app/app.component.ts

@@ -35,8 +35,6 @@ export class Minds {
 
   showTOSModal: boolean = false;
 
-  paramsSubscription;
-
   protected router$: Subscription;
 
   constructor(
@@ -125,7 +123,6 @@ export class Minds {
   ngOnDestroy() {
     this.loginReferrer.unlisten();
     this.scrollToTop.unlisten();
-    this.paramsSubscription.unsubscribe();
   }
 
   @HostBinding('class') get cssColorSchemeOverride() {

src/app/app.module.ts

@@ -70,6 +70,7 @@ import { HttpClientModule } from '@angular/common/http';
 import { AnalyticsModule } from './modules/analytics/analytics.module';
 import { ProModule } from './modules/pro/pro.module';
 import { ChannelContainerModule } from './modules/channel-container/channel-container.module';
+import { UpgradesModule } from './modules/upgrades/upgrades.module';
 
 import * as Sentry from '@sentry/browser';
 
@@ -147,6 +148,7 @@ export class SentryErrorHandler implements ErrorHandler {
     IssuesModule,
     CanaryModule,
     ChannelsModule,
+    UpgradesModule,
 
     //last due to :username route
     ChannelContainerModule,

src/app/common/common.module.ts

@@ -109,6 +109,10 @@ import { RouterHistoryService } from './services/router-history.service';
 import { DraggableListComponent } from './components/draggable-list/list.component';
 import { DndModule } from 'ngx-drag-drop';
 import { SiteService } from './services/site.service';
+import { MarketingComponent } from './components/marketing/marketing.component';
+import { MarketingFooterComponent } from './components/marketing/footer.component';
+import { ToggleComponent } from './components/toggle/toggle.component';
+import { MarketingAsFeaturedInComponent } from './components/marketing/as-featured-in.component';
 
 @NgModule({
   imports: [
@@ -207,6 +211,10 @@ import { SiteService } from './services/site.service';
     FeaturedContentComponent,
     PosterDateSelectorComponent,
     DraggableListComponent,
+    ToggleComponent,
+    MarketingComponent,
+    MarketingFooterComponent,
+    MarketingAsFeaturedInComponent,
   ],
   exports: [
     MINDS_PIPES,
@@ -294,6 +302,9 @@ import { SiteService } from './services/site.service';
     PosterDateSelectorComponent,
     ChannelModeSelectorComponent,
     DraggableListComponent,
+    ToggleComponent,
+    MarketingComponent,
+    MarketingAsFeaturedInComponent,
   ],
   providers: [
     SiteService,

src/app/common/components/marketing/as-featured-in.component.html

+<div class="m-grid m-marketing__asFeaturedIn">
+  <div class="m-grid__column-2 m-marketingAsFeaturedIn__title" i18n>
+    As featured in
+  </div>
+
+  <ul class="m-grid__column-10">
+    <li>
+      <a
+        href="https://www.independent.co.uk/news/business/indyventure/minds-facebook-alternative-deletefacebook-social-network-data-a8475841.html"
+        target="_blank"
+      >
+        <img
+          [src]="cdnAssetsUrl + 'assets/marketing/press-logos/independent.png'"
+          alt="Independent"
+        />
+      </a>
+    </li>
+    <li>
+      <a
+        href="https://www.foxnews.com/tech/alternate-social-media-squash-extremist-content-without-violating-first-amendment"
+        target="_blank"
+      >
+        <img
+          [src]="cdnAssetsUrl + 'assets/marketing/foxnews.png'"
+          alt="Fox News"
+        />
+      </a>
+    </li>
+    <li *ngIf="false">
+      <img [src]="cdnAssetsUrl + 'assets/marketing/forbes.png'" alt="Forbes" />
+    </li>
+    <li>
+      <a
+        href="https://techcrunch.com/2018/04/16/minds-aims-to-decentralize-the-social-network/"
+        target="_blank"
+      >
+        <img
+          [src]="cdnAssetsUrl + 'assets/marketing/techcrunch.png'"
+          alt="TechCrunch"
+        />
+      </a>
+    </li>
+    <li>
+      <a
+        href="https://mobile.reuters.com/article/amp/idUSKBN1K7147"
+        target="_blank"
+      >
+        <img
+          [src]="cdnAssetsUrl + 'assets/marketing/reuters.png'"
+          alt="Reuters"
+        />
+      </a>
+    </li>
+    <li>
+      <a
+        href="https://www.wired.com/story/minds-anti-facebook/"
+        target="_blank"
+      >
+        <img [src]="cdnAssetsUrl + 'assets/marketing/wired.png'" alt="Wired" />
+      </a>
+    </li>
+    <li>
+      <a
+        href="http://podcasts.joerogan.net/podcasts/bill-ottman"
+        target="_blank"
+      >
+        <img
+          [src]="cdnAssetsUrl + 'assets/marketing/tjre.png'"
+          alt="The Joe Rogan Experience"
+        />
+      </a>
+    </li>
+  </ul>
+</div>

src/app/common/components/marketing/as-featured-in.component.scss

+@import '../../../foundation/grid-values';
+
+.m-marketing__asFeaturedIn {
+  max-width: 1084px;
+  margin: 40px auto 0;
+
+  @media screen and (max-width: $m-grid-min-vp) {
+    &.m-grid {
+      display: block;
+    }
+
+    margin: 20px 0 45px;
+    padding: 0 12px;
+  }
+
+  .m-marketingAsFeaturedIn__title {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    @include m-theme() {
+      color: themed($m-grey-400);
+    }
+
+    @media screen and (max-width: $m-grid-min-vp) {
+      text-align: center;
+      margin: 0 0 20px;
+    }
+  }
+
+  ul {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+
+    > li {
+      img {
+        width: 55px;
+        height: 55px;
+        object-fit: contain;
+
+        @media screen and (max-width: $m-grid-min-vp) {
+          width: 40px;
+          height: 40px;
+        }
+      }
+
+      &.m-marketingAsFeaturedIn__item--bigger {
+        img {
+          width: 96px;
+          height: 96px;
+
+          @media screen and (max-width: $m-grid-min-vp) {
+            width: 40px;
+            height: 40px;
+          }
+        }
+      }
+    }
+  }
+}

src/app/common/components/marketing/as-featured-in.component.ts

+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'm-marketing__asFeaturedIn',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  templateUrl: 'as-featured-in.component.html',
+})
+export class MarketingAsFeaturedInComponent {
+  readonly cdnAssetsUrl: string = window.Minds.cdn_assets_url;
+}

src/app/common/components/marketing/footer.component.html

+<div class="m-marketing__footer">
+  <div class="m-grid m-marketingFooter__columns">
+    <div
+      class="m-grid__column-3 m-grid__column-12--mobile m-marketingFooter__column"
+    >
+      <h4 i18n>About</h4>
+
+      <ul>
+        <li hidden>
+          <a href="#" i18n>
+            Company
+          </a>
+        </li>
+
+        <li hidden>
+          <a href="#" i18n>
+            Mission
+          </a>
+        </li>
+
+        <li hidden>
+          <a href="#" i18n>
+            Features
+          </a>
+        </li>
+
+        <li>
+          <a routerLink="/mobile" i18n>
+            Mobile
+          </a>
+        </li>
+
+        <li>
+          <a routerLink="/jobs" i18n>
+            Jobs
+          </a>
+        </li>
+
+        <li hidden>
+          <a href="https://carta.com/minds" i18n>
+            Investors
+          </a>
+        </li>
+
+        <li>
+          <a routerLink="/blog/minds" i18n>
+            Blog
+          </a>
+        </li>
+
+        <li>
+          <a
+            href="https://cdn-assets.minds.com/front/dist/assets/whitepapers/03_27_18_Minds%20Whitepaper%20V0.1.pdf"
+            target="_blank"
+            i18n
+          >
+            Whitepaper
+          </a>
+        </li>
+
+        <li>
+          <a href="https://irl.minds.com/" target="_blank" i18n>
+            Minds IRL
+          </a>
+        </li>
+      </ul>
+    </div>
+
+    <div
+      class="m-grid__column-3 m-grid__column-12--mobile m-marketingFooter__column"
+    >
+      <h4 i18n>Business</h4>
+
+      <ul>
+        <li>
+          <a routerLink="/upgrades" i18n>
+            Upgrade
+          </a>
+        </li>
+
+        <li>
+          <a routerLink="/token" i18n>
+            Token
+          </a>
+        </li>
+
+        <li>
+          <a routerLink="/plus" i18n>
+            Plus
+          </a>
+        </li>
+
+        <li>
+          <a routerLink="/pro" i18n>
+            Pro
+          </a>
+        </li>
+
+        <li>
+          <a routerLink="/nodes" i18n>
+            Nodes
+          </a>
+        </li>
+
+        <li>
+          <a routerLink="/boost" i18n>
+            Boost
+          </a>
+        </li>
+
+        <li>
+          <a routerLink="/wire" i18n>
+            Pay
+          </a>
+        </li>
+
+        <li>
+          <a href="https://teespring.com/stores/minds" i18n>
+            Store
+          </a>
+        </li>
+      </ul>
+    </div>
+
+    <div
+      class="m-grid__column-3 m-grid__column-12--mobile m-marketingFooter__column"
+    >
+      <h4>Developers</h4>
+
+      <ul>
+        <li>
+          <a href="https://developers.minds.com" target="_blank" i18n>
+            Documentation
+          </a>
+        </li>
+
+        <li>
+          <a routerLink="/groups/profile/365903183068794880" i18n>
+            Community
+          </a>
+        </li>
+
+        <li>
+          <a href="https://gitlab.com/minds" target="_blank" i18n>
+            Code
+          </a>
+        </li>
+
+        <li>
+          <a routerLink="/canary" i18n>
+            Canary
+          </a>
+        </li>
+
+        <li>
+          <a routerLink="/branding" i18n>
+            Branding
+          </a>
+        </li>
+      </ul>
+    </div>
+
+    <div
+      class="m-grid__column-3 m-grid__column-12--mobile m-marketingFooter__column"
+    >
+      <h4>Support</h4>
+
+      <ul>
+        <li>
+          <a routerLink="/help" i18n>
+            Help Desk
+          </a>
+        </li>
+
+        <li>
+          <a routerLink="/groups/profile/100000000000000681" i18n>
+            Community
+          </a>
+        </li>
+
+        <li>
+          <a routerLink="/localization" i18n>
+            Languages
+          </a>
+        </li>
+
+        <li>
+          <a href="https://status.minds.com" target="_blank" i18n>
+            Status
+          </a>
+        </li>
+
+        <li hidden>
+          <a routerLink="/p/contact" i18n>
+            Contact
+          </a>
+        </li>
+      </ul>
+    </div>
+  </div>
+
+  <div class="m-marketing__sep m-marketing__sep--big"></div>
+
+  <div class="m-grid m-marketingFooter__columns">
+    <div
+      class="m-grid__column-2 m-grid__column-12--mobile m-marketingFooter__column m-marketingFooter__column--noMobileSpacing"
+      i18n
+    >
+      <div class="m-marketingFooter__text">&copy; {{ year }} Minds, Inc.</div>
+    </div>
+
+    <div
+      class="m-grid__column-10 m-grid__column-12--mobile m-marketingFooter__column"
+    >
+      <ul class="m-marketingFooter__inlineList">
+        <li>
+          <a routerLink="/p/terms" i18n>
+            Terms of Service
+          </a>
+        </li>
+
+        <li>
+          <a routerLink="/p/privacy" i18n>
+            Privacy Policy
+          </a>
+        </li>
+
+        <li>
+          <a routerLink="/content-policy" i18n>
+            Content Policy
+          </a>
+        </li>
+
+        <li>
+          <a routerLink="/p/dmca" i18n>
+            DMCA
+          </a>
+        </li>
+      </ul>
+    </div>
+  </div>
+</div>

src/app/common/components/marketing/footer.component.scss

+@import '../../../foundation/grid-values';
+
+m-marketing__footer {
+  display: block;
+  margin-top: 105px;
+
+  @media screen and (max-width: $m-grid-min-vp) {
+    margin-top: 80px;
+  }
+
+  @include m-theme() {
+    background: linear-gradient(
+      180deg,
+      themed($m-marketing-bg-gradient-start) 0%,
+      themed($m-white) 100%
+    );
+  }
+}
+
+.m-marketing__footer {
+  padding: 60px 0 48px;
+
+  @media screen and (max-width: $m-grid-min-vp) {
+    padding: 32px 0;
+  }
+
+  @include m-theme() {
+    color: themed($m-grey-800);
+  }
+
+  .m-marketingFooter__columns {
+    max-width: 1084px;
+    margin: 0 auto;
+
+    @media screen and (max-width: $m-grid-min-vp) {
+      padding: 0 32px;
+    }
+  }
+
+  .m-marketingFooter__column {
+    @media screen and (max-width: $m-grid-min-vp) {
+      margin-bottom: 32px;
+
+      &:last-child,
+      &.m-marketingFooter__column--noMobileSpacing {
+        margin-bottom: 0;
+      }
+    }
+
+    h4 {
+      font-weight: 500;
+      font-size: 16px;
+      line-height: 21px;
+      margin: 0 0 26px;
+
+      @media screen and (max-width: $m-grid-min-vp) {
+        margin: 0 0 8px;
+      }
+
+      @include m-theme() {
+        color: themed($m-grey-800);
+      }
+    }
+
+    .m-marketingFooter__text {
+      font-size: 14px;
+      line-height: 26px;
+    }
+
+    ul {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+
+      > li {
+        @extend .m-marketingFooter__text;
+
+        @include m-theme() {
+          color: themed($m-grey-300);
+        }
+
+        @media screen and (max-width: $m-grid-min-vp) {
+          display: inline-block;
+          margin-right: 1em;
+
+          &:last-child {
+            margin-right: 0;
+          }
+        }
+
+        a {
+          color: inherit;
+          font-weight: 300;
+          text-decoration: none;
+        }
+      }
+
+      &.m-marketingFooter__inlineList {
+        > li {
+          display: inline-block;
+          margin-right: 40px;
+
+          @media screen and (max-width: $m-grid-min-vp) {
+            margin-right: 1em;
+          }
+
+          &:last-child {
+            margin-right: 0;
+          }
+        }
+      }
+    }
+  }
+}

src/app/common/components/marketing/footer.component.ts

+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'm-marketing__footer',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  templateUrl: 'footer.component.html',
+})
+export class MarketingFooterComponent {
+  readonly year: number = new Date().getFullYear();
+}

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

+.m-marketing__main,
+.m-marketing__section {
+  // Common
+  overflow-x: hidden;
+
+  .m-marketing--hideMobile {
+    @media screen and (max-width: $m-grid-min-vp) {
+      display: none;
+    }
+  }
+
+  .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;
+      line-height: 34px;
+      margin: 0 0 18px;
+    }
+
+    &.m-marketing__subtitle--asTitle {
+      font-size: 48px;
+      line-height: 53px;
+      margin: 0 0 26px;
+
+      @media screen and (max-width: $m-grid-min-vp) {
+        font-size: 38px;
+        line-height: 46px;
+        margin: 0 0 21px;
+      }
+    }
+
+    em {
+      font-style: inherit;
+      text-decoration: inherit;
+      white-space: nowrap;
+      position: relative;
+
+      &::after {
+        content: '';
+        display: inline-block;
+        position: absolute;
+        background: rgba(80, 226, 195, 0.3);
+        top: 0.36em;
+        left: -0.03em;
+        right: -0.03em;
+        bottom: 0.22em;
+        pointer-events: none;
+        z-index: -1;
+      }
+    }
+
+    em + em::after {
+      left: -0.25em;
+    }
+  }
+
+  p.m-marketing__description {
+    font-size: 18px;
+    line-height: 27px;
+    margin: 0 0 36px;
+  }
+
+  ul.m-marketing__points {
+    list-style: disc;
+    margin: 0 0 45px;
+    padding: 0 0 0 1em;
+    font-size: 16px;
+    line-height: 21px;
+
+    > li {
+      margin-bottom: 19px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  // Style 1
+
+  &.m-marketing__section--style-1 {
+    @include m-theme() {
+      background: linear-gradient(
+        180deg,
+        themed($m-white) 0%,
+        themed($m-marketing-bg-gradient-start) 100%
+      );
+    }
+
+    .m-marketing__wrapper {
+      position: relative;
+      z-index: 0;
+      padding: 95px 0 85px;
+
+      @media screen and (max-width: $m-grid-min-vp) {
+        padding: 30px 0;
+        margin: 0 20px;
+      }
+    }
+
+    .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;
+        }
+      }
+    }
+  }
+
+  // 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: 0;
+      }
+    }
+
+    .m-marketing__body {
+      position: relative;
+
+      @media screen and (max-width: $m-grid-min-vp) {
+        padding: 0 30px 30px;
+      }
+
+      &::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%);
+        z-index: -1;
+
+        @include m-theme() {
+          background: linear-gradient(
+            180deg,
+            themed($m-marketing-bg-colored-gradient-start) 0%,
+            themed($m-marketing-bg-colored-gradient-end) 99.99%
+          );
+        }
+
+        @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;
+        }
+      }
+
+      h2 {
+        @include m-on-theme(dark) {
+          color: #ffffff;
+        }
+
+        @media screen and (max-width: $m-grid-min-vp) {
+          font-size: 28px;
+          line-height: 32px;
+          margin: 0 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;
+
+      img {
+        object-fit: contain;
+        clip-path: polygon(0% 1%, 0% 97%, 100% 100%, 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%);
+        }
+      }
+
+      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;
+
+          @media screen and (max-width: $m-grid-min-vp) {
+            content: initial;
+            display: none;
+          }
+        }
+
+        &::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;
+
+          @media screen and (max-width: $m-grid-min-vp) {
+            content: initial;
+            display: none;
+          }
+        }
+      }
+    }
+  }
+}

src/app/common/components/marketing/marketing.component.html

+<div class="m-marketing">
+  <div class="m-marketing__mainWrapper">
+    <ng-content select=".m-marketing__main"></ng-content>
+  </div>
+
+  <ng-content select="[slot=2]"></ng-content>
+
+  <div class="m-marketing__sep" *ngIf="bodyWrapper?.children?.length > 0"></div>
+
+  <div class="m-marketing__extrasWrapper" #bodyWrapper>
+    <ng-content select=".m-marketing__extras"></ng-content>
+  </div>
+</div>
+
+<m-marketing__footer></m-marketing__footer>

src/app/common/components/marketing/marketing.component.scss

+@import '../../../foundation/grid-values';
+
+m-marketing {
+  display: block;
+  font-family: Roboto, sans-serif;
+
+  @include m-theme() {
+    background: themed($m-white);
+    color: themed($m-grey-800);
+  }
+
+  .m-marketing {
+    font-family: Roboto, sans-serif;
+    font-weight: 400;
+  }
+
+  .m-marketing__sep {
+    border-top: 1px solid;
+    height: 0;
+    width: 100%;
+    margin: 40px 0;
+
+    &.m-marketing__sep--big {
+      margin: 60px 0;
+    }
+
+    @media screen and (max-width: $m-grid-min-vp) {
+      margin: 20px 0;
+
+      &.m-marketing__sep--big {
+        margin: 30px 0;
+      }
+    }
+
+    @include m-theme() {
+      border-color: themed($m-grey-50);
+    }
+  }
+
+  .m-marketing__wrapper,
+  .m-marketing__extras > * > * {
+    max-width: 1084px;
+    margin: 0 auto;
+    box-sizing: border-box;
+  }
+}

src/app/common/components/marketing/marketing.component.ts

+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  OnInit,
+} from '@angular/core';
+import { MindsTitle } from '../../../services/ux/title';
+
+@Component({
+  selector: 'm-marketing',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  templateUrl: 'marketing.component.html',
+})
+export class MarketingComponent implements OnInit {
+  @Input() pageTitle: string = '';
+
+  constructor(protected title: MindsTitle) {}
+
+  ngOnInit() {
+    if (this.pageTitle) {
+      this.title.setTitle(this.pageTitle);
+    }
+  }
+}

src/app/common/components/toggle/toggle.component.html

+<div class="m-toggle__track"></div>
+<div
+  class="m-toggle__switch"
+  [class.m-toggle__switch--left]="mModel === leftValue"
+  [class.m-toggle__switch--right]="mModel === rightValue"
+></div>

src/app/common/components/toggle/toggle.component.scss

+m-toggle {
+  position: relative;
+  display: inline-block;
+  width: 27px;
+  height: 19px;
+  margin: 0 0.35em;
+  cursor: pointer;
+
+  .m-toggle__track {
+    display: inline-block;
+    position: absolute;
+    top: 50%;
+    left: 0;
+    right: 0;
+    height: 10px;
+    z-index: 1;
+    transform: translateY(-50%);
+    border-radius: 6px;
+
+    @include m-theme() {
+      background: themed($m-grey-100);
+    }
+  }
+
+  .m-toggle__switch {
+    display: inline-block;
+    position: absolute;
+    top: 0;
+    left: 50%;
+    width: 19px;
+    height: 19px;
+    z-index: 2;
+    transform: translateX(-50%);
+    border-radius: 50%;
+
+    @include m-theme() {
+      background: themed($m-grey-100);
+      box-shadow: 1px 1px 1px -1px rgba(themed($m-black), 0.3);
+    }
+
+    &.m-toggle__switch--left,
+    &.m-toggle__switch--right {
+      transform: none;
+
+      @include m-theme() {
+        background: themed($m-blue);
+      }
+    }
+
+    &.m-toggle__switch--left {
+      left: 0;
+      right: auto;
+    }
+
+    &.m-toggle__switch--right {
+      right: 0;
+      left: auto;
+    }
+  }
+}

src/app/common/components/toggle/toggle.component.ts

+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  HostListener,
+  Input,
+  Output,
+} from '@angular/core';
+
+@Component({
+  selector: 'm-toggle',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  templateUrl: 'toggle.component.html',
+})
+export class ToggleComponent {
+  @Input('leftValue') leftValue: any;
+
+  @Input('rightValue') rightValue: any;
+
+  @Input('mModel') mModel: any;
+
+  @Output('mModelChange') mModelChange: EventEmitter<any> = new EventEmitter<
+    any
+  >();
+
+  @HostListener('click') toggle() {
+    if (this.mModel === this.leftValue) {
+      this.mModelChange.emit(this.rightValue);
+    } else {
+      this.mModelChange.emit(this.leftValue);
+    }
+  }
+}