(chore): Blockchain marketing pages content

- Deprecate old Blockchain marketing pages
- Move reusable components outside blockchain marketing module
- /rewards and /tokens content
- Button foundation enhancements

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

@@ -111,7 +111,7 @@
  </li>
 
  <li>
- <a routerLink="/wire" i18n>
+ <a routerLink="/pay" i18n>
  Pay
  </a>
  </li>

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

@@ -96,6 +96,16 @@
  }
  }
 
+ .m-marketing__actionButtons {
+ > * {
+ margin-right: 25px;
+
+ &:last-child {
+ margin-right: initial;
+ }
+ }
+ }
+
  // Style 1
 
  &.m-marketing__section--style-1 {

src/app/foundation/buttons.scss

@@ -17,12 +17,36 @@
  appearance: none;
  text-decoration: none;
 
+ > * {
+ vertical-align: middle;
+ margin-right: 0.35em; // A space
+
+ &:last-child {
+ margin-right: initial;
+ }
+ }
+
+ i.material-icons {
+ line-height: 1em;
+ font-size: 20px;
+ height: auto;
+ color: inherit;
+ opacity: 0.4;
+ }
+
  @include m-theme() {
  background: themed($m-blue);
  color: themed($m-white-always);
  border-color: themed($m-blue);
  }
 
+ &.mf-button--smaller {
+ font-size: 15px;
+ line-height: 21px;
+ padding: 10px 20px;
+ border-radius: 3px;
+ }
+
  &.mf-button--alt {
  @include m-theme() {
  background: themed($m-aqua);
@@ -55,9 +79,17 @@
 
  &.mf-button--hollow {
  @include m-theme() {
- background: themed($m-white);
+ background: transparent; // Within theme because of cascading
  color: themed($m-black);
  border-color: themed($m-blue);
  }
  }
+
+ &.mf-button--hollow-mono {
+ @include m-theme() {
+ background: transparent; // Within theme because of cascading
+ color: themed($m-black);
+ border-color: themed($m-grey-200);
+ }
+ }
 }

src/app/modules/blockchain/blockchain.module.ts

@@ -22,9 +22,11 @@ import { TokenDistributionEventService } from './contracts/token-distribution-ev
 import { LocalWalletService } from './local-wallet.service';
 import { OffchainPaymentService } from './offchain-payment.service';
 import { Client } from '../../services/api/client';
-import { MarketingModule } from '../marketing/marketing.module';
-import { BlockchainMarketingModule } from './marketing/marketing.module';
 import { GetMetamaskComponent } from './metamask/getmetamask.component';
+import { BlockchainEthModalComponent } from './eth-modal/eth-modal.component';
+import { BlockchainMarketingOnboardComponent } from './token-purchase/onboard.component';
+import { BlockchainPurchaseComponent } from './token-purchase/purchase.component';
+import { ModalsModule } from '../modals/modals.module';
 
 const cryptoRoutes: Routes = [
  {
@@ -45,7 +47,7 @@ const cryptoRoutes: Routes = [
  FormsModule,
  ReactiveFormsModule,
  FaqModule,
- // BlockchainMarketingModule,
+ ModalsModule,
  ],
  declarations: [
  BlockchainConsoleComponent,
@@ -54,6 +56,9 @@ const cryptoRoutes: Routes = [
  TransactionOverlayComponent,
  BlockchainTdeBuyComponent,
  GetMetamaskComponent,
+ BlockchainEthModalComponent,
+ BlockchainMarketingOnboardComponent,
+ BlockchainPurchaseComponent,
  ],
  providers: [
  TransactionOverlayService,
@@ -104,6 +109,8 @@ const cryptoRoutes: Routes = [
  TransactionOverlayComponent,
  BlockchainTdeBuyComponent,
  GetMetamaskComponent,
+ BlockchainEthModalComponent,
+ BlockchainPurchaseComponent,
  ],
  entryComponents: [BlockchainTdeBuyComponent],
 })

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

-<div class="m-blockchain--marketing--blogs">
- <m-blog--tile *ngFor="let blog of blogs" [entity]="blog"> </m-blog--tile>
-</div>

src/app/modules/blockchain/marketing/blogs.component.ts

-import { Component } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-
-import { Subscription } from 'rxjs';
-
-import { Client } from '../../../services/api';
-import { MindsBlogListResponse } from '../../../interfaces/responses';
-
-@Component({
- selector: 'm-blockchain--marketing--blogs',
- templateUrl: 'blogs.component.html',
-})
-export class BlockchainMarketingBlogsComponent {
- blogs = [
- {
- guid: '871791809876131840',
- title: 'How to buy MINDS tokens',
- ownerObj: {
- name: 'Minds',
- username: 'minds',
- guid: '100000000000000519',
- },
- thumbnail_src:
- window.Minds.cdn_url + 'fs/v1/banners/871791809876131840/1533585765',
- header_bg: true,
- },
- {
- guid: '871789298595016704',
- title: 'How to buy ETH on Coinbase',
- ownerObj: {
- name: 'Minds',
- username: 'minds',
- guid: '100000000000000519',
- },
- thumbnail_src:
- window.Minds.cdn_url + 'fs/v1/banners/871789298595016704/1533585765',
- header_bg: true,
- },
- {
- guid: '871787065656385536',
- title: 'How to buy ETH on Gemini',
- ownerObj: {
- name: 'Minds',
- username: 'minds',
- guid: '100000000000000519',
- },
- thumbnail_src:
- window.Minds.cdn_url + 'fs/v1/banners/871787065656385536/1533585765',
- header_bg: true,
- },
- {
- guid: '871783126122799104',
- title: 'How to setup your wallet with MetaMask',
- ownerObj: {
- name: 'Minds',
- username: 'minds',
- guid: '100000000000000519',
- },
- thumbnail_src:
- window.Minds.cdn_url + 'fs/v1/banners/871783126122799104/1533585765',
- header_bg: true,
- },
- {
- guid: '871784584725569536',
- title: 'How to setup your wallet without MetaMask',
- ownerObj: {
- name: 'Minds',
- username: 'minds',
- guid: '100000000000000519',
- },
- thumbnail_src:
- window.Minds.cdn_url + 'fs/v1/banners/871784584725569536/1533585765',
- header_bg: true,
- },
- {
- guid: '826188573910073344',
- title: 'Crypto launch, new apps, and more',
- ownerObj: {
- name: 'Minds',
- username: 'minds',
- guid: '100000000000000519',
- },
- thumbnail_src:
- window.Minds.cdn_url + 'fs/v1/banners/826188573910073344/1533585765',
- header_bg: true,
- },
- ];
-
- ngOnInit() {}
-}

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

-<div class="m-blockchain--marketing--countdown">
- <div class="m-blockchain--marketing--countdown--col">
- <span>{{ days }}</span>
- <label>DAYS</label>
- </div>
- <div class="m-blockchain--marketing--countdown--col">
- <span>{{ hours }}</span>
- <label>hours</label>
- </div>
- <div class="m-blockchain--marketing--countdown--col">
- <span>{{ minutes }}</span>
- <label>Minutes</label>
- </div>
- <div class="m-blockchain--marketing--countdown--col">
- <span>{{ seconds }}</span>
- <label>Seconds</label>
- </div>
-</div>

src/app/modules/blockchain/marketing/countdown.component.scss

-.m-blockchain--marketing--countdown {
- display: flex;
- flex-direction: row;
- @include m-theme() {
- color: themed($m-white);
- }
-
- .m-blockchain--marketing--countdown--col {
- flex: 1;
- text-align: center;
-
- span {
- display: block;
- font-size: 42px;
- line-height: 48px;
- font-weight: 600;
- }
-
- label {
- text-transform: uppercase;
- letter-spacing: 1.25px;
- font-weight: 300;
- }
- }
-}

src/app/modules/blockchain/marketing/countdown.component.ts

-import {
- ChangeDetectionStrategy,
- ChangeDetectorRef,
- Component,
- ElementRef,
- Input,
- OnDestroy,
- OnInit,
- ViewChild,
-} from '@angular/core';
-import { Client } from '../../../services/api/client';
-import { MindsTitle } from '../../../services/ux/title';
-import { OverlayModalService } from '../../../services/ux/overlay-modal';
-import { Session } from '../../../services/session';
-import * as BN from 'bn.js';
-
-@Component({
- selector: 'm-blockchain--marketing--countdown',
- templateUrl: 'countdown.component.html',
- changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class BlockchainMarketingCountdownComponent implements OnInit {
- end = new Date('Aug 13, 2018 12:00:00 UTC').getTime();
-
- days: number;
- hours: number;
- minutes: number;
- seconds: number;
-
- interval;
-
- constructor(private cd: ChangeDetectorRef) {}
-
- ngOnInit() {
- this.countDown();
- }
-
- countDown() {
- this.interval = setInterval(() => {
- let now = new Date().getTime();
- let distance = this.end - now;
-
- this.days = Math.floor(distance / (1000 * 60 * 60 * 24));
- this.hours = Math.floor(
- (distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
- );
- this.minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
- this.seconds = Math.floor((distance % (1000 * 60)) / 1000);
-
- this.cd.markForCheck();
- this.cd.detectChanges();
- });
- }
-
- ngOnDestroy() {
- if (this.interval) clearInterval(this.interval);
- }
-}

src/app/modules/blockchain/marketing/marketing.component.scss

-m-blockchain--marketing {
-}
-
-.m-error--text {
- margin-left: 8px;
- font-size: 11px;
- @include m-theme() {
- color: themed($m-red);
- }
-}
-
-.m-blockchain--marketing {
- .m-marketing--hero {
- .m-marketing--hero--inner {
- flex-wrap: wrap;
- }
-
- .m-marketing--hero--slogans {
- h1 {
- font-size: 86px;
- }
- }
-
- .m-marketing--hero--actions {
- text-align: right;
- flex-basis: 85px;
- @media screen and (max-width: 500px) {
- margin-left: 0;
- margin-top: 52px;
- }
-
- .m-blockchain--marketing--pledge--input {
- display: flex;
- align-items: center;
- text-align: right;
-
- i {
- font-size: 36px;
- @include m-theme() {
- color: themed($m-white);
- }
- }
-
- .m-input {
- border: 0;
- padding: 12px 16px;
- font-size: 26px;
- letter-spacing: 2.5px;
- font-weight: 600;
- text-align: right;
- min-width: 105px;
- @include m-theme() {
- color: themed($m-white);
- background-color: rgba(themed($m-white), 0.2);
- }
- }
-
- .m-btn {
- height: auto;
- padding: 20px;
- border: 0;
- margin: 16px 0;
- margin-left: 12px;
- white-space: nowrap;
- @include m-theme() {
- color: themed($m-white) !important;
- background-color: rgba(themed($m-white), 0.3) !important;
- }
- }
-
- .m-blockchain--marketing--pledges--eth-label {
- font-size: 22px;
- margin: 0 0 0 0.35em;
- @include m-theme() {
- color: themed($m-white);
- }
- }
- .m-blockchain--marketing--pledges--eth-subtext {
- font-size: 11px;
- @include m-theme() {
- color: themed($m-white);
- }
- }
- }
-
- .m-marketing--marketing-action-button {
- button.mdl-button {
- width: 200px;
- font-size: 20px;
- @include m-theme() {
- color: themed($m-white);
- background-color: themed($m-blue) !important;
- }
- }
- }
- }
- }
-
- .m-blockchain--marketing--pledges {
- display: flex;
- flex-direction: row;
-
- .m-blockchain--marketing--pledges--amounts {
- padding: 24px 12px;
- text-align: left;
- width: 100%;
-
- tr {
- height: 72px;
- }
-
- .m-blockchain--marketing--pledges--amounts--value {
- line-height: 52px;
- font-size: 52px;
- font-weight: 600;
- text-align: right;
- @include m-theme() {
- color: themed($m-white);
- }
- }
-
- .m-blockchain--marketing--pledges--amounts--label {
- font-size: 14px;
- font-weight: 600;
- width: 100px;
- text-transform: uppercase;
- letter-spacing: 1.5px;
- font-weight: 400;
- @include m-theme() {
- color: themed($m-grey-50);
- }
-
- @media screen and (max-width: 1000px) {
- display: none;
- }
- }
- }
- }
-
- .m-blockchain--marketing--pledges--eth-label {
- font-weight: 300;
- }
-
- m-video--progress-bar .seeker-ball {
- top: 12px;
- }
-
- m-video .minds-video-play-icon {
- @include m-theme() {
- text-shadow: 0 0 3px rgba(themed($m-black-always), 0.6);
- }
- }
-}
-
-.m-blockchain--marketing--links a {
- text-decoration: none;
- line-height: 48px;
- white-space: nowrap;
- margin-right: 8px;
-
- @media screen and (max-width: 420px) {
- font-size: 10px;
- padding: 6px;
- }
-}
-
-.m-blockchain--marketing--modal {
- text-align: left;
- padding: 24px;
-
- h2 {
- font-size: 30px;
- @include m-theme() {
- color: themed($m-grey-800) !important;
- }
- }
-
- m-blockchain--marketing--onboard {
- text-align: left;
-
- h2 {
- display: none;
- }
-
- .m-token--onboarding--slide {
- border: 0;
- padding: 0 !important;
-
- > div:nth-of-type(1) {
- width: 100% !important;
- }
- > div:nth-of-type(2) {
- display: none;
- }
- }
- }
-
- table {
- margin: 16px 0;
- tr {
- height: 50px;
- }
- }
-}
-
-.m-blockchain--marketing--pledge--address-input {
- padding-bottom: 16px;
-
- label {
- display: block;
- margin-bottom: 8px;
- }
-
- input {
- display: block;
- width: 100%;
- border-radius: 4px;
- font-size: 16px;
- padding: 8px;
- letter-spacing: 1px;
- @include m-theme() {
- border: 1px solid themed($m-grey-50);
- }
- }
-}
-
-.m-blockchain--marketing--pledge--address-warn {
- font-size: 0.85em;
- padding-bottom: 16px;
- @include m-theme() {
- color: themed($m-grey-400);
- }
-}
-
-.m-blockchain--marketing--pledge--note {
- margin-bottom: 0;
-}
-
-.m-blockchain--marketing--pledge--note,
-.m-blockchain--marketing--pledge--check-label {
- line-height: 1.35;
- @include m-theme() {
- color: themed($m-grey-800);
- }
-}
-
-.m-blockchain--marketing--pledge--wallet-label {
- font-weight: 500;
-}
-
-.m-blockchain--marketing-tde-stats {
- max-width: 1028px;
-
- > .mdl-cell {
- display: flex;
- justify-content: center;
-
- .m-blockchain--marketing-stats-cell {
- display: flex;
- flex-direction: column;
- }
- }
-
- .m-blockchain--marketing-value,
- .m-blockchain--marketing-label {
- display: block;
- text-align: left;
- }
-
- .m-blockchain--marketing-value {
- font-size: 52px;
- letter-spacing: 2px;
- line-height: 1.5;
- @include m-theme() {
- color: themed($m-blue);
- }
- }
-
- .m-blockchain--marketing-label {
- font-size: 24px;
- letter-spacing: 2px;
- font-weight: 300;
- line-height: 1.5;
- text-transform: uppercase;
- @include m-theme() {
- color: themed($m-grey-400);
- }
- @media screen and (max-width: $max-mobile) {
- text-align: center;
- }
- }
-}
-
-.m-blockchain--marketing--bullets {
- h3 {
- font-weight: 600;
- }
- ul {
- margin: 0;
- padding-left: 0;
- list-style: none;
- }
- li {
- font-size: 16px;
- letter-spacing: 0.25px;
- padding: 16px 0;
- @include m-theme() {
- color: themed($m-grey-700);
- border-bottom: 1px solid themed($m-grey-50);
- }
- }
-}
-
-.m-blockchain--marketing--balloon {
- padding: 200px 0 !important;
- margin-bottom: 100px;
-}
-
-.m-blockchain--marketing--press {
- .m-marketing--section--grid {
- align-items: center;
- @media screen and (max-width: 500px) {
- flex-wrap: wrap;
- flex-direction: row;
- }
- }
- .m-marketing--section--grid-col {
- img {
- max-width: 80%;
- }
- @media screen and (max-width: 500px) {
- flex: 1;
- margin: 4px !important;
- padding: 0 !important;
- img {
- max-width: 80% !important;
- }
- }
- }
-}
-
-.m-blockchain--value-logos {
- padding-bottom: 0;
-
- > img {
- width: auto;
- height: 128px;
- }
-}
-
-.m-blockchain--marketing--team {
- .m-marketing--section--grid {
- justify-content: center;
- }
-
- .m-marketing--section--grid-col {
- padding: 16px 8px;
- text-align: center;
- width: 225px;
- flex-basis: 225px;
- max-width: 225px;
-
- @media screen and (max-width: 500px) {
- width: auto;
- margin: 8px auto !important;
- }
- }
-
- .m-blockchain--marketing-person-image {
- margin: auto;
- width: 125px;
- height: 125px;
- background-position: center;
- background-size: cover;
- border-radius: 50%;
- @include m-theme() {
- border: 1px solid themed($m-grey-50);
- }
- }
-
- .m-blockchain--marketing-person-name,
- .m-blockchain--marketing-person-title {
- display: block;
- font-family: Roboto, sans-serif;
- font-weight: 300;
- letter-spacing: 0.25px;
- line-height: 1.5;
- text-align: center;
- }
-
- .m-blockchain--marketing-person-name {
- font-size: 24px;
- margin-top: 16px;
- font-weight: 800;
-
- img {
- max-width: 16px;
- filter: grayscale(1);
- opacity: 0.62;
- &:hover {
- filter: initial;
- opacity: 1;
- }
- }
- }
-
- .m-blockchain--marketing-person-title {
- font-size: 14px;
- @include m-theme() {
- color: themed($m-grey-400);
- }
- }
-
- &.m-blockchain--marketing--team--more {
- padding-top: 0;
-
- .m-blockchain--marketing-person-image {
- width: 75px;
- height: 75px;
- }
- .m-blockchain--marketing-person-name {
- font-size: 18px;
- }
- }
-}
-
-.m-blockchain--marketing--blogs {
- display: flex;
- flex-direction: row;
- max-width: 1008px;
- margin: auto;
- align-items: center;
- flex-wrap: wrap;
-
- @media screen and (max-width: 1350px) {
- max-width: 1008px;
- }
-
- @media screen and (max-width: 1008px) {
- max-width: 700px;
- }
-
- @media screen and (max-width: 675px) {
- max-width: 360px;
- }
-
- m-blog--tile {
- margin: 8px;
- height: 200px;
- width: 320px;
- display: block;
- text-align: left;
- }
-}
-
-.m-blockchain--marketing-faq {
- padding: 16px;
- margin: auto;
- max-width: 1280px;
-}
-
-m-blockchain--purchase m-modal {
- text-align: left;
-}
-
-m-blockchain--pre-register {
- padding: 0 !important;
-}
-
-.m-marketing--section--subsection-video {
- @include m-theme() {
- border: 1px solid themed($m-grey-100);
- }
-
- m-video {
- @include m-theme() {
- background-color: themed($m-grey-50);
- }
- }
-}
-
-.m-marketing--section-economy {
- @include m-theme() {
- background-color: themed($m-grey-50);
- }
-}

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

-import {
- ChangeDetectionStrategy,
- ChangeDetectorRef,
- Component,
- ElementRef,
- OnDestroy,
- OnInit,
- ViewChild,
-} from '@angular/core';
-import { Client } from '../../../services/api/client';
-import { MindsTitle } from '../../../services/ux/title';
-import { WireCreatorComponent } from '../../wire/creator/creator.component';
-import { OverlayModalService } from '../../../services/ux/overlay-modal';
-import { BlockchainTdeBuyComponent } from '../tde-buy/tde-buy.component';
-
-@Component({
- moduleId: module.id,
- selector: 'm-blockchain--marketing',
- templateUrl: 'marketing.component.html',
- changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class BlockchainMarketingComponent implements OnInit, OnDestroy {
- tdeStats: { tokens; raised; remaining };
-
- isPledgeApproved: boolean = false;
- inProgress: boolean = false;
-
- minds = window.Minds;
-
- private _pollTimer;
-
- videoError: boolean = false;
-
- constructor(
- protected client: Client,
- protected changeDetectorRef: ChangeDetectorRef,
- protected title: MindsTitle,
- protected overlayModal: OverlayModalService
- ) {}
-
- ngOnInit() {
- //this.poll();
-
- this.title.setTitle('The Minds Token');
- this.updatePledgeConfirmation();
- }
-
- async poll() {
- const update = async () => {
- try {
- let result: any = await this.client.get(`api/v2/blockchain/tde/stats`);
-
- this.tdeStats = result.stats;
- this.detectChanges();
- } catch (e) {
- console.error('[TDE Stats]', e);
- }
- };
-
- this._pollTimer = setInterval(update, 60 * 1000);
- update();
- }
-
- async updatePledgeConfirmation() {
- this.inProgress = true;
- this.detectChanges();
-
- try {
- const response: any = await this.client.get('api/v2/blockchain/pledges', {
- brief: 1,
- });
-
- this.isPledgeApproved =
- response.pledge && response.pledge.status === 'approved';
- } catch (e) {
- console.error(e);
- }
-
- this.inProgress = false;
- this.detectChanges();
- }
-
- ngOnDestroy() {
- if (this._pollTimer) {
- clearInterval(this._pollTimer);
- }
- }
-
- detectChanges() {
- this.changeDetectorRef.markForCheck();
- this.changeDetectorRef.detectChanges();
- }
-
- showBuy() {
- const creator = this.overlayModal.create(
- BlockchainTdeBuyComponent,
- {},
- {
- onComplete: (payload: any = {}) => {
- if (payload.changeAmount) {
- this.isPledgeApproved = false;
- this.detectChanges();
- }
- },
- }
- );
- creator.present();
- }
-
- /**
- * When the video source's got an error
- */
- onSourceError() {
- this.videoError = true;
- }
-}

src/app/modules/blockchain/marketing/marketing.module.ts

@@ -3,28 +3,27 @@ import { RouterModule, Routes } from '@angular/router';
 import { CommonModule as NgCommonModule } from '@angular/common';
 
 import { CommonModule } from '../../../common/common.module';
-import { FaqModule } from '../../faq/faq.module';
-import { VideoModule } from '../../media/components/video/video.module';
-import { MarketingModule } from '../../marketing/marketing.module';
-import { OnboardingModule } from '../../onboarding/onboarding.module';
-import { BlogModule } from '../../blogs/blog.module';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { BlockchainMarketingComponent } from './marketing.component';
-import { BlockchainPurchaseComponent } from './purchase.component';
-import { BlockchainMarketingOnboardComponent } from './onboard.component';
-import { BlockchainMarketingBlogsComponent } from './blogs.component';
-import { BlockchainMarketingCountdownComponent } from './countdown.component';
-import { BlockchainEthModalComponent } from './eth-modal.component';
-import { ModalsModule } from '../../modals/modals.module';
+import { BlockchainModule } from '../blockchain.module';
+import { BlockchainMarketingTokenComponent } from './token.component';
+import { BlockchainMarketingRewardsComponent } from './rewards.component';
 
 const routes: Routes = [
  {
  path: 'tokens',
- redirectTo: '/token',
+ redirectTo: 'token',
  },
  {
  path: 'token',
- component: BlockchainMarketingComponent,
+ component: BlockchainMarketingTokenComponent,
+ },
+ {
+ path: 'reward',
+ redirectTo: 'rewards',
+ },
+ {
+ path: 'rewards',
+ component: BlockchainMarketingRewardsComponent,
  },
 ];
 
@@ -35,21 +34,11 @@ const routes: Routes = [
  CommonModule,
  FormsModule,
  ReactiveFormsModule,
- FaqModule,
- MarketingModule,
- ModalsModule,
- BlogModule,
- VideoModule,
+ BlockchainModule,
  ],
  declarations: [
- BlockchainMarketingComponent,
- BlockchainMarketingOnboardComponent,
- BlockchainPurchaseComponent,
- BlockchainMarketingBlogsComponent,
- BlockchainMarketingCountdownComponent,
- BlockchainEthModalComponent,
+ BlockchainMarketingTokenComponent,
+ BlockchainMarketingRewardsComponent,
  ],
- exports: [BlockchainMarketingComponent],
- entryComponents: [BlockchainMarketingComponent],
 })
 export class BlockchainMarketingModule {}

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

+<div class="mf-jumpAnchor" #topAnchor></div>
+
+<m-marketing
+ class="m-nodes__marketing"
+ pageTitle="Minds Rewards"
+ 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 Rewards
+ </h1>
+
+ <h2 ngPreserveWhitespaces i18n>
+ Earn tokens for your
+ <em>contributions to the network</em>
+ </h2>
+
+ <p class="m-marketing__description" i18n>
+ Each day you will receive a contribution score for your activity on
+ the network.
+ </p>
+
+ <p class="m-marketing__description" i18n>
+ This score determines your share of the daily rewards pool and results
+ in a payout of Minds Tokens, which can be used to support other
+ channels or boost your content for more reach.
+ </p>
+
+ <div class="">
+ <button
+ class="mf-button mf-button--alt"
+ (click)="$event.preventDefault()"
+ i18n
+ >
+ Join Rewards
+ </button>
+ </div>
+ </div>
+
+ <div
+ class="m-grid__column-5 m-grid__column-12--mobile m-marketing__image"
+ >
+ <span>
+ <img
+ [src]="
+ cdnAssetsUrl + 'assets/photos/browsing-mobileapp-discovery.jpg'
+ "
+ />
+ </span>
+ </div>
+ </div>
+ </div>
+
+ <ng-container slot="2">
+ <m-marketing__asFeaturedIn></m-marketing__asFeaturedIn>
+
+ <!-- Section 2 -->
+
+ <div class="m-marketing__section m-marketing__section--style-3">
+ <div class="m-grid m-marketing__wrapper">
+ <div
+ class="m-grid__column-6 m-grid__column-12--mobile m-marketing__body"
+ >
+ <h2 i18n>Engagement</h2>
+
+ <p class="m-marketing__description" i18n>
+ We reward you for the amount of unique engagement received on your
+ content. In order to prevent fraud, you can only receive credit once
+ per engagement type per day from verified channels.
+ </p>
+
+ <ul class="m-marketing__points">
+ <li i18n>Votes = <em>TBD</em></li>
+
+ <li i18n>Comments = <em>TBD</em></li>
+
+ <li i18n>Subscribers = <em>TBD</em></li>
+
+ <li i18n>Reminds = <em>TBD</em></li>
+ </ul>
+ </div>
+ <div
+ class="m-grid__column-6 m-grid__column-12--mobile m-marketing__image"
+ >
+ <span>
+ <img
+ class="m-marketing__image--1"
+ [src]="
+ cdnAssetsUrl + 'assets/photos/browsing-mobileapp-discovery.jpg'
+ "
+ />
+
+ <img
+ class="m-marketing__image--2"
+ [src]="cdnAssetsUrl + 'assets/photos/ui-demo-1.png'"
+ />
+ </span>
+ </div>
+ </div>
+ </div>
+
+ <!-- Section 3 -->
+
+ <div class="m-marketing__section m-marketing__section--style-4">
+ <div class="m-grid m-marketing__wrapper">
+ <div
+ class="m-grid__column-6 m-grid__column-12--mobile m-marketing__body"
+ >
+ <h2 i18n>Referrals</h2>
+
+ <p class="m-marketing__description" i18n>
+ You deserve credit for the people you bring to the Minds network. We
+ reward you with 50 points for every new user that signs up through
+ your referral code and joins our Rewards program.
+ </p>
+
+ <ul class="m-marketing__points">
+ <li i18n>Referrals = <em>TBD</em></li>
+ </ul>
+ </div>
+ <div
+ class="m-grid__column-6 m-grid__column-12--mobile m-marketing__image"
+ >
+ <span>
+ <img
+ class="m-marketing__image--1"
+ [src]="
+ cdnAssetsUrl + 'assets/photos/browsing-mobileapp-discovery.jpg'
+ "
+ />
+
+ <img
+ class="m-marketing__image--2"
+ [src]="cdnAssetsUrl + 'assets/photos/ui-demo-2.png'"
+ />
+ </span>
+ </div>
+ </div>
+ </div>
+
+ <!-- Section 4 -->
+
+ <div class="m-marketing__section m-marketing__section--style-3">
+ <div class="m-grid m-marketing__wrapper">
+ <div
+ class="m-grid__column-6 m-grid__column-12--mobile m-marketing__body"
+ >
+ <h2 i18n>Development</h2>
+
+ <p class="m-marketing__description" i18n>
+ All of our development is publicly available on Gitlab. Any
+ contribution you make to the code will be manually reviewed in order
+ to determine appropriate payouts in Minds Tokens, Bitcoin, Ether or
+ USD.
+ </p>
+
+ <div class="m-marketing__actionButtons">
+ <a class="mf-button mf-button--smaller mf-button--hollow-mono" i18n>
+ View Sourcecode
+ </a>
+ </div>
+ </div>
+ <div
+ class="m-grid__column-6 m-grid__column-12--mobile m-marketing__image"
+ >
+ <span>
+ <img
+ class="m-marketing__image--1"
+ [src]="
+ cdnAssetsUrl + 'assets/photos/browsing-mobileapp-discovery.jpg'
+ "
+ />
+
+ <img
+ class="m-marketing__image--2"
+ [src]="cdnAssetsUrl + 'assets/photos/ui-demo-3.png'"
+ />
+ </span>
+ </div>
+ </div>
+ </div>
+
+ <!-- Final section -->
+
+ <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"
+ >
+ <h2 i18n>Other Rewards</h2>
+ </div>
+
+ <div
+ class="m-grid__column-4 m-grid__column-12--mobile m-marketing__body"
+ >
+ <h3 i18n>OnChain Transactions</h3>
+
+ <p class="m-marketing__description" i18n>
+ Earn <em>TBD</em> every time you perform an OnChain transaction with
+ your Minds Tokens.
+ </p>
+ </div>
+
+ <div
+ class="m-grid__column-4 m-grid__column-12--mobile m-marketing__body"
+ >
+ <h3 i18n>Jury Duty</h3>
+
+ <p class="m-marketing__description" i18n>
+ Earn <em>TBD</em> every time you participate in our Jury system to
+ review appeals on content moderation decisions.
+ </p>
+ </div>
+
+ <div
+ class="m-grid__column-4 m-grid__column-12--mobile m-marketing__body"
+ >
+ <h3 i18n>Hourly Check-ins</h3>
+
+ <p class="m-marketing__description" i18n>
+ Earn <em>TBD</em> every hour that you check in to the app and
+ perform an action, such as voting or commenting.
+ </p>
+ </div>
+
+ <div
+ class="m-grid__column-12 m-grid__column-12--mobile m-marketing__body"
+ >
+ <button class="mf-button mf-button--alt" (click)="scrollToTop()" i18n>
+ Join Rewards
+ </button>
+ </div>
+ </div>
+ </div>
+ </ng-container>
+</m-marketing>

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

+import {
+ ChangeDetectionStrategy,
+ ChangeDetectorRef,
+ Component,
+ ElementRef,
+ ViewChild,
+} from '@angular/core';
+
+@Component({
+ selector: 'm-blockchainMarketing__rewards',
+ templateUrl: 'rewards.component.html',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class BlockchainMarketingRewardsComponent {
+ readonly cdnAssetsUrl: string = window.Minds.cdn_assets_url;
+
+ @ViewChild('topAnchor', { static: false })
+ readonly topAnchor: ElementRef;
+
+ constructor(protected cd: ChangeDetectorRef) {}
+
+ scrollToTop() {
+ if (this.topAnchor.nativeElement) {
+ this.topAnchor.nativeElement.scrollIntoView({
+ behavior: 'smooth',
+ block: 'start',
+ inline: 'nearest',
+ });
+ }
+ }
+
+ detectChanges() {
+ this.cd.markForCheck();
+ this.cd.detectChanges();
+ }
+}

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

+<div class="mf-jumpAnchor" #topAnchor></div>
+
+<m-marketing class="m-nodes__marketing" pageTitle="Nodes" 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>
+ Tokens
+ </h1>
+
+ <h2 ngPreserveWhitespaces i18n>
+ The <em>fuel</em> of the Minds network
+ </h2>
+
+ <p class="m-marketing__description" i18n>
+ Buy tokens to support Minds and your favorite channels. Unlock premium
+ features and launch advertising campaigns to expand your reach.
+ </p>
+
+ <div class="">
+ [Buy Tokens]
+ </div>
+ </div>
+
+ <div
+ class="m-grid__column-5 m-grid__column-12--mobile m-marketing__image"
+ >
+ <span>
+ <img
+ [src]="
+ cdnAssetsUrl + 'assets/photos/browsing-mobileapp-discovery.jpg'
+ "
+ />
+ </span>
+ </div>
+ </div>
+ </div>
+
+ <ng-container slot="2">
+ <m-marketing__asFeaturedIn></m-marketing__asFeaturedIn>
+
+ <!-- Section 2 -->
+
+ <div class="m-marketing__section m-marketing__section--style-3">
+ <div class="m-grid m-marketing__wrapper">
+ <div
+ class="m-grid__column-6 m-grid__column-12--mobile m-marketing__body"
+ >
+ <h2 i18n>Expand your reach</h2>
+
+ <p class="m-marketing__description" i18n>
+ 1 token = 1,000 boosted views from the network. Expand your reach
+ and grow your channel to new levels with Minds Tokens.
+ </p>
+
+ <div class="m-marketing__actionButtons">
+ <a class="mf-button mf-button--smaller mf-button--hollow-mono" i18n>
+ <span>Download Whitepaper</span>
+ <i class="material-icons">cloud_download</i>
+ </a>
+
+ <a class="mf-button mf-button--smaller mf-button--hollow-mono" i18n>
+ <span>Setup Wallet</span>
+ </a>
+ </div>
+ </div>
+ <div
+ class="m-grid__column-6 m-grid__column-12--mobile m-marketing__image"
+ >
+ <span>
+ <img
+ class="m-marketing__image--1"
+ [src]="
+ cdnAssetsUrl + 'assets/photos/browsing-mobileapp-discovery.jpg'
+ "
+ />
+
+ <img
+ class="m-marketing__image--2"
+ [src]="cdnAssetsUrl + 'assets/photos/ui-demo-1.png'"
+ />
+ </span>
+ </div>
+ </div>
+ </div>
+
+ <!-- Section 3 -->
+
+ <div class="m-marketing__section m-marketing__section--style-4">
+ <div class="m-grid m-marketing__wrapper">
+ <div
+ class="m-grid__column-6 m-grid__column-12--mobile m-marketing__body"
+ >
+ <h2 i18n>Buy premium subscriptions</h2>
+
+ <p class="m-marketing__description" i18n>
+ Spend your Minds Tokens to upgrade your channel to Pro or Plus. Buy
+ premium subscriptions from your favorite content creators.
+ </p>
+ </div>
+ <div
+ class="m-grid__column-6 m-grid__column-12--mobile m-marketing__image"
+ >
+ <span>
+ <img
+ class="m-marketing__image--1"
+ [src]="
+ cdnAssetsUrl + 'assets/photos/browsing-mobileapp-discovery.jpg'
+ "
+ />
+
+ <img
+ class="m-marketing__image--2"
+ [src]="cdnAssetsUrl + 'assets/photos/ui-demo-2.png'"
+ />
+ </span>
+ </div>
+ </div>
+ </div>
+
+ <!-- Section 4 -->
+
+ <div class="m-marketing__section m-marketing__section--style-3">
+ <div class="m-grid m-marketing__wrapper">
+ <div
+ class="m-grid__column-6 m-grid__column-12--mobile m-marketing__body"
+ >
+ <h2 i18n>Send tips and support other channels</h2>
+
+ <p class="m-marketing__description" i18n>
+ Enjoy a post from another channel? Send them Minds Tokens to show
+ your support and help them Boost it and reach new audiences.
+ </p>
+ </div>
+ <div
+ class="m-grid__column-6 m-grid__column-12--mobile m-marketing__image"
+ >
+ <span>
+ <img
+ class="m-marketing__image--1"
+ [src]="
+ cdnAssetsUrl + 'assets/photos/browsing-mobileapp-discovery.jpg'
+ "
+ />
+
+ <img
+ class="m-marketing__image--2"
+ [src]="cdnAssetsUrl + 'assets/photos/ui-demo-3.png'"
+ />
+ </span>
+ </div>
+ </div>
+ </div>
+
+ <!-- Final section -->
+
+ <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"
+ >
+ <h2 i18n>Other features</h2>
+ </div>
+
+ <div
+ class="m-grid__column-4 m-grid__column-12--mobile m-marketing__body"
+ >
+ <h3 i18n>Decentralized</h3>
+
+ <p class="m-marketing__description" i18n>
+ An ERC-20 token harnessing the Ethereum blockchain to give you full
+ control over your crypto.
+ </p>
+ </div>
+
+ <div
+ class="m-grid__column-4 m-grid__column-12--mobile m-marketing__body"
+ >
+ <h3 i18n>Earn daily rewards</h3>
+
+ <p class="m-marketing__description" i18n>
+ Don’t have the funds to buy tokens? You can also earn them as
+ rewards for your contribution to the network each day.
+ </p>
+ </div>
+
+ <div
+ class="m-grid__column-4 m-grid__column-12--mobile m-marketing__body"
+ >
+ <h3 i18n>Support Minds</h3>
+
+ <p class="m-marketing__description" i18n>
+ Buying tokens is one of the best ways to keep Minds independent and
+ support Internet freedom.
+ </p>
+ </div>
+
+ <div
+ class="m-grid__column-12 m-grid__column-12--mobile m-marketing__body"
+ >
+ <button class="mf-button mf-button--alt" (click)="scrollToTop()" i18n>
+ Buy Tokens
+ </button>
+ </div>
+ </div>
+ </div>
+ </ng-container>
+</m-marketing>

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

+import {
+ ChangeDetectionStrategy,
+ ChangeDetectorRef,
+ Component,
+ ElementRef,
+ ViewChild,
+} from '@angular/core';
+
+@Component({
+ selector: 'm-blockchainMarketing__token',
+ templateUrl: 'token.component.html',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class BlockchainMarketingTokenComponent {
+ readonly cdnAssetsUrl: string = window.Minds.cdn_assets_url;
+
+ @ViewChild('topAnchor', { static: false })
+ readonly topAnchor: ElementRef;
+
+ constructor(protected cd: ChangeDetectorRef) {}
+
+ scrollToTop() {
+ if (this.topAnchor.nativeElement) {
+ this.topAnchor.nativeElement.scrollIntoView({
+ behavior: 'smooth',
+ block: 'start',
+ inline: 'nearest',
+ });
+ }
+ }
+
+ detectChanges() {
+ this.cd.markForCheck();
+ this.cd.detectChanges();
+ }
+}

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

@@ -150,6 +150,7 @@
  </div>
 
  <!-- Final section -->
+
  <div class="m-marketing__section m-marketing__section--tail">
  <div class="m-grid m-marketing__wrapper">
  <div

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

@@ -7,7 +7,7 @@ import {
 } from '@angular/core';
 
 @Component({
- selector: 'm-nodes',
+ selector: 'm-nodes__marketing',
  templateUrl: 'marketing.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
 })

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

@@ -172,6 +172,7 @@
  </div>
 
  <!-- Final section -->
+
  <div class="m-marketing__section m-marketing__section--tail">
  <div class="m-grid m-marketing__wrapper">
  <div

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

@@ -7,7 +7,7 @@ import {
 } from '@angular/core';
 
 @Component({
- selector: 'm-plus--marketing',
+ selector: 'm-plus__marketing',
  templateUrl: 'marketing.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
 })

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

@@ -219,6 +219,7 @@
  </div>
 
  <!-- Final section -->
+
  <div class="m-marketing__section m-marketing__section--tail">
  <div class="m-grid m-marketing__wrapper">
  <div

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

@@ -7,7 +7,7 @@ import {
 import { Router } from '@angular/router';
 
 @Component({
- selector: 'm-pro--marketing',
+ selector: 'm-pro__marketing',
  templateUrl: 'marketing.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
 })

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

-<div class="m-marketing">
- <div class="m-marketing--hero">
- <div class="m-marketing--hero--video">
- <img [src]="minds.cdn_assets_url + 'assets/photos/blown-bulb.jpg'" />
- </div>
-
- <div class="m-marketing--hero--inner">
- <div class="m-marketing--hero--slogans">
- <h1 i18n="@@WIRE__MKT__WIRE_TITLE">Wire</h1>
- <h3 i18n="@@WIRE__MKT__WIRE_DESC">
- Exchange Minds Tokens directly with other channels on the network
- </h3>
- </div>
- <div class="m-marketing--hero--overlay"></div>
- </div>
- </div>
-
- <div class="m-marketing--contents m-layout--row">
- <div
- class="mdl-cell mdl-cell--6-col mdl-cell--6-col-tablet mdl-cell--6-col-phone"
- >
- <i class="ion-icon ion-flash"></i>
- <h2 i18n="@@WIRE__MKT__SUPPORT_TITLE">Support Great Creators</h2>
- <span i18n="@@WIRE__MKT__SUPPORT_DESC"
- >Tap the Wire icon on channels or posts to send points, dollars or
- Tokens to your favorite content creators</span
- >
- </div>
- <div
- class="mdl-cell mdl-cell--6-col mdl-cell--4-col-tablet mdl-cell--6-col-phone"
- >
- <i class="material-icons">favorite</i>
- <h2 i18n="@@WIRE__MKT__REWARD_FANS_TITLE">Reward your fans</h2>
- <span i18n="@@WIRE__MKT__REWARD_FANS_DESC"
- >Build custom reward tiers for your fans to subscribe to your products
- and services, in exchange for points dollars or Tokens.</span
- >
- </div>
- </div>
-
- <div class="m-marketing--contents m-layout--row">
- <div
- class="mdl-cell mdl-cell--6-col mdl-cell--6-col-tablet mdl-cell--6-col-phone"
- >
- <i class="material-icons">group</i>
- <h2 i18n="@@WIRE__MKT__CROWDFUNDING_TITLE">Crowdfunding</h2>
- <span i18n="@@WIRE__MKT__CROWDFUNDING_DESC"
- >Earn monthly recurring payments from your supporters for premium
- subscriptions</span
- >
- </div>
- <div
- class="mdl-cell mdl-cell--6-col mdl-cell--4-col-tablet mdl-cell--6-col-phone"
- >
- <i class="material-icons">loyalty</i>
- <h2 i18n="@@WIRE__MKT__TIPS_TITLE">Tips</h2>
- <span i18n="@@WIRE__MKT__TIPS_DESC"
- >Receive tips from your subscribers on your posts</span
- >
- </div>
- <div
- class="mdl-cell mdl-cell--6-col mdl-cell--4-col-tablet mdl-cell--6-col-phone"
- >
- <i class="material-icons">lock</i>
- <h2 i18n="@@WIRE__MKT__EXCLUSIVE_TITLE">Exclusive</h2>
- <span i18n="@@WIRE__MKT__EXCLUSIVE_DESC"
- >Place any of your blogs, videos, images or statuses behind a
- customizable paywall.</span
- >
- </div>
- </div>
-
- <div class="m-marketing--hero">
- <div class="m-marketing--background-video">
- <img [src]="minds.cdn_assets_url + 'assets/photos/canyon.jpg'" />
- </div>
-
- <div class="m-marketing--hero-inner">
- <h2 i18n="@@WIRE__MKT__DECENT_MON_P2P_DESC">
- Decentralized. Monetized. <br />
- Peer-to-peer. Autonomous.
- </h2>
- </div>
- </div>
-
- <div class="m-wire--marketing-faq mdl-color-text--blue-grey-600">
- <m-faq category="wire"></m-faq>
- </div>
-</div>
-
-<m-footer></m-footer>

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

-@import 'defaults';
-
-m-wire--marketing {
- .m-layout--row {
- @media screen and(max-width: $min-tablet) {
- flex-wrap: wrap;
- }
- }
-}
-
-.m-wire--marketing-header {
- background: url('<%= APP_CDN %>/assets/photos/blown-bulb.jpg') center;
- width: 100%;
- text-align: center;
- display: flex;
- align-content: center;
- flex-direction: column;
- padding: 224px 36px;
- box-sizing: border-box;
- position: relative;
-
- @media only screen and (max-width: 400px) {
- padding: 110px 0;
- }
-
- h1,
- h3 {
- font-family: 'Roboto', Helvetica, sans-serif;
- @include m-theme() {
- color: themed($m-white);
- text-shadow: 0 0 3px themed($m-grey-900);
- }
-
- @media only screen and (max-width: 400px) {
- margin: 0;
- }
- z-index: 1;
- }
-
- h1 {
- word-spacing: 25px;
- letter-spacing: 4px;
- text-transform: uppercase;
-
- @media only screen and (max-width: 400px) {
- font-size: 30px;
- }
- }
- h3 {
- letter-spacing: 2px;
- word-spacing: 3px;
- font-weight: 300;
-
- @media only screen and (max-width: 400px) {
- font-size: 14px;
- }
- }
-
- .m-wire--marketing-action-button {
- margin-bottom: -80px;
- margin-top: 32px;
- button {
- letter-spacing: 3px;
- font-size: 18px;
- line-height: 35px;
- height: 53px;
- padding: 0 24px;
- font-weight: 300;
- font-family: 'Roboto', Helvetica, sans-serif;
- @include m-theme() {
- color: themed($m-white);
- }
- }
- z-index: 2;
- }
-
- .m-wire--overlay {
- display: block;
- position: absolute;
- width: 100%;
- height: 100%;
- top: 0;
- left: 0;
- z-index: 0;
- @include m-theme() {
- background-color: rgba(themed($m-black), 0.5);
- }
- }
-}
-
-.m-wire--marketing-contents {
- max-width: 100%;
- padding: 64px 0 !important;
-
- justify-content: center;
-
- .mdl-cell {
- padding: 32px;
- text-align: center;
- max-width: 500px;
-
- &:nth-of-type(1) {
- @include m-theme() {
- border-right: 1px solid rgba(themed($m-white), 0.15);
- }
- }
-
- i {
- font-size: 64px;
- }
- h2 {
- padding: 0;
- margin: 24px 0;
- text-transform: uppercase;
- font-family: 'Roboto', Helvetica, sans-serif;
- font-weight: 300;
- letter-spacing: 2px;
- font-size: 30px;
- }
- span {
- font-family: 'Roboto', Helvetica, sans-serif;
- letter-spacing: 1px;
- font-weight: 300;
- }
- }
-}
-
-.m-wire--marketing m-wire--onboarding {
- margin: -115px auto 0;
- display: block;
- position: relative;
- max-width: 990px;
-
- form {
- padding: 16px;
- }
-}
-
-.m-wire--marketing-faq {
- max-width: 990px;
- margin: auto;
- padding: 16px;
- font-family: 'Roboto', Helvetica, sans-serif;
-}
-
-.m-wire--marketing m-wire--terms {
- max-width: 600px;
- margin: 16px auto;
- display: block;
- padding: 16px;
- max-height: 600px;
- overflow: scroll;
- @include m-theme() {
- background-color: themed($m-white);
- }
-}

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

+<div class="mf-jumpAnchor" #topAnchor></div>
+
+<m-marketing class="m-nodes__marketing" pageTitle="Minds Pay" 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 Pay
+ </h1>
+
+ <h2 ngPreserveWhitespaces i18n>
+ Send and receive payments in
+ <em>USD, BTC, ETH and Tokens</em>
+ </h2>
+
+ <p class="m-marketing__description" i18n>
+ Enable your channel to receive payments from your supporters in both
+ fiat and crypto. Get paid for tips on your content or different
+ subscription tiers you want to offer.
+ </p>
+
+ <div class="">
+ <button
+ class="mf-button mf-button--alt"
+ (click)="$event.preventDefault()"
+ i18n
+ >
+ Monetize your channel
+ </button>
+ </div>
+ </div>
+
+ <div
+ class="m-grid__column-5 m-grid__column-12--mobile m-marketing__image"
+ >
+ <span>
+ <img
+ [src]="
+ cdnAssetsUrl + 'assets/photos/browsing-mobileapp-discovery.jpg'
+ "
+ />
+ </span>
+ </div>
+ </div>
+ </div>
+
+ <ng-container slot="2">
+ <m-marketing__asFeaturedIn></m-marketing__asFeaturedIn>
+
+ <!-- Section 2 -->
+
+ <div class="m-marketing__section m-marketing__section--style-3">
+ <div class="m-grid m-marketing__wrapper">
+ <div
+ class="m-grid__column-6 m-grid__column-12--mobile m-marketing__body"
+ >
+ <h2 i18n>Multi-currency support</h2>
+
+ <p class="m-marketing__description" i18n>
+ Receive tips and subscription payments in USD, Bitcoin, Ether or
+ Minds Tokens by linking your crypto addresses and bank account.
+ </p>
+
+ <p class="m-marketing__description" i18n>
+ Manage your accounts and keep track of all of your transactions in
+ your Minds Wallet.
+ </p>
+ </div>
+ <div
+ class="m-grid__column-6 m-grid__column-12--mobile m-marketing__image"
+ >
+ <span>
+ <img
+ class="m-marketing__image--1"
+ [src]="
+ cdnAssetsUrl + 'assets/photos/browsing-mobileapp-discovery.jpg'
+ "
+ />
+
+ <img
+ class="m-marketing__image--2"
+ [src]="cdnAssetsUrl + 'assets/photos/ui-demo-1.png'"
+ />
+ </span>
+ </div>
+ </div>
+ </div>
+
+ <!-- Section 3 -->
+
+ <div class="m-marketing__section m-marketing__section--style-4">
+ <div class="m-grid m-marketing__wrapper">
+ <div
+ class="m-grid__column-6 m-grid__column-12--mobile m-marketing__body"
+ >
+ <h2 i18n>Subscription Tiers</h2>
+
+ <p class="m-marketing__description" i18n>
+ Set up different subscription tiers to offer your fans in exchange
+ for recurring monthly payments in USD or Minds Tokens (BTC and ETH
+ not yet supported).
+ </p>
+
+ <p class="m-marketing__description" i18n>
+ Post content behind paywalls that is only accessible to the
+ subscription tiers you select.
+ </p>
+
+ <p class="m-marketing__description" i18n>
+ Start building your own revenue streams today!
+ </p>
+ </div>
+ <div
+ class="m-grid__column-6 m-grid__column-12--mobile m-marketing__image"
+ >
+ <span>
+ <img
+ class="m-marketing__image--1"
+ [src]="
+ cdnAssetsUrl + 'assets/photos/browsing-mobileapp-discovery.jpg'
+ "
+ />
+
+ <img
+ class="m-marketing__image--2"
+ [src]="cdnAssetsUrl + 'assets/photos/ui-demo-2.png'"
+ />
+ </span>
+ </div>
+ </div>
+ </div>
+
+ <!-- Section 4 -->
+
+ <div class="m-marketing__section m-marketing__section--style-3">
+ <div class="m-grid m-marketing__wrapper">
+ <div
+ class="m-grid__column-6 m-grid__column-12--mobile m-marketing__body"
+ >
+ <h2 i18n>Tipping</h2>
+
+ <p class="m-marketing__description" i18n>
+ Every post on Minds has a button to send a tip to the author in
+ Minds Tokens, USD, Bitcoin and Ether. Tipping is a great way to show
+ your support for your favorite channels and allow them to keep
+ creating!
+ </p>
+ </div>
+ <div
+ class="m-grid__column-6 m-grid__column-12--mobile m-marketing__image"
+ >
+ <span>
+ <img
+ class="m-marketing__image--1"
+ [src]="
+ cdnAssetsUrl + 'assets/photos/browsing-mobileapp-discovery.jpg'
+ "
+ />
+
+ <img
+ class="m-marketing__image--2"
+ [src]="cdnAssetsUrl + 'assets/photos/ui-demo-3.png'"
+ />
+ </span>
+ </div>
+ </div>
+ </div>
+
+ <!-- Final section -->
+
+ <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"
+ >
+ <button class="mf-button mf-button--alt" (click)="scrollToTop()" i18n>
+ Monetize your channel
+ </button>
+ </div>
+ </div>
+ </div>
+ </ng-container>
+</m-marketing>

src/app/modules/wire/marketing.component.ts → src/app/modules/wire/marketing/marketing.component.ts

 import {
- Component,
  ChangeDetectionStrategy,
  ChangeDetectorRef,
+ Component,
+ ElementRef,
+ ViewChild,
 } from '@angular/core';
 
-import { Client } from '../../common/api/client.service';
-
 @Component({
- selector: 'm-wire--marketing',
+ selector: 'm-pay__marketing',
  templateUrl: 'marketing.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class WireMarketingComponent {
- minds = window.Minds;
- user = window.Minds.user;
- showSubscription: boolean = false;
- showVerify: boolean = false;
+export class PayMarketingComponent {
+ readonly cdnAssetsUrl: string = window.Minds.cdn_assets_url;
 
- constructor(private client: Client, private cd: ChangeDetectorRef) {}
+ @ViewChild('topAnchor', { static: false })
+ readonly topAnchor: ElementRef;
+
+ constructor(protected cd: ChangeDetectorRef) {}
+
+ scrollToTop() {
+ if (this.topAnchor.nativeElement) {
+ this.topAnchor.nativeElement.scrollIntoView({
+ behavior: 'smooth',
+ block: 'start',
+ inline: 'nearest',
+ });
+ }
+ }
 
  detectChanges() {
  this.cd.markForCheck();

src/app/modules/wire/wire.module.ts

@@ -21,16 +21,17 @@ import { WireConsoleSupporterComponent } from './console/supporter/supporter.com
 import { WireConsoleSettingsComponent } from './console/settings/settings.component';
 import { WireLockScreenComponent } from './lock-screen/wire-lock-screen.component';
 import { WireService } from './wire.service';
-import { WireMarketingComponent } from './marketing.component';
 import { WireConsoleOverviewComponent } from './console/overview/overview.component';
 import { WireConsoleRewardsInputsComponent } from './console/rewards-table/inputs/wire-console-rewards-inputs.component';
 import { WireConsoleRewardsComponent } from './console/rewards-table/rewards.component';
 import { WireSubscriptionTiersComponent } from './channel/tiers.component';
 import { WirePaymentsCreatorComponent } from './creator/payments/payments.creator.component';
 import { WirePaymentHandlersService } from './wire-payment-handlers.service';
+import { PayMarketingComponent } from './marketing/marketing.component';
 
 const wireRoutes: Routes = [
- { path: 'wire', component: WireMarketingComponent },
+ { path: 'wire', redirectTo: 'pay' },
+ { path: 'pay', component: PayMarketingComponent },
 ];
 
 @NgModule({
@@ -60,7 +61,7 @@ const wireRoutes: Routes = [
  WireConsoleLedgerComponent,
  WireConsoleSupporterComponent,
  WireConsoleSettingsComponent,
- WireMarketingComponent,
+ PayMarketingComponent,
  WireConsoleOverviewComponent,
  WireSubscriptionTiersComponent,
  ],
@@ -83,7 +84,6 @@ const wireRoutes: Routes = [
  entryComponents: [
  WireCreatorComponent,
  WireConsoleComponent,
- WireMarketingComponent,
  WirePaymentsCreatorComponent,
  WireLockScreenComponent,
  WireConsoleRewardsInputsComponent,