Skip to content

Minds Frontend
Minds Frontend
Commit 74276743 authored by Emiliano Balbuena's avatar Emiliano Balbuena
Browse files
Options
  • Download

(chore): Update product pages copy; new links style

parent 270fe964
goal/product-pages-update-1
1 merge request!608WIP: Product pages update
Pipeline #93589777 running with stages
Hide whitespace changes
Inline Side-by-side
Showing with 188 additions and 55 deletions
src/app/common/components/marketing/styles/general.scss
View file @ 74276743
......@@ -2,6 +2,16 @@
.m-marketing__main,
.m-marketing__section {
a {
font: inherit;
text-decoration: none;
cursor: pointer;
@include m-theme() {
color: themed($m-blue);
}
}
.m-marketing--hideMobile {
@media screen and (max-width: $m-grid-min-vp) {
display: none;
......@@ -108,4 +118,55 @@
}
}
}
.m-marketing__links {
@media screen and (max-width: $m-grid-min-vp) {
text-align: center;
}
h3 {
margin: 0;
font-size: 15px;
line-height: 20px;
opacity: 0.5;
font-weight: normal;
@include m-theme() {
color: themed($m-grey-800);
}
}
ul {
margin: 13px 0 0 0;
padding: 0;
list-style: none;
> li {
margin: 0 0 10px;
font-size: 15px;
line-height: 20px;
&:last-child {
margin: 0;
}
}
}
a {
> * {
vertical-align: middle;
}
i.material-icons {
margin-left: 0.35em;
font-size: 16px;
line-height: 16px;
opacity: 0.4;
@include m-theme() {
color: themed($m-grey-800);
}
}
}
}
}
src/app/modules/blockchain/marketing/token.component.html
View file @ 74276743
......@@ -19,6 +19,7 @@
<div class="m-tokenMarketing__purchase">
<m-blockchain--purchase
[hasTitle]="true"
(onComplete)="onPurchaseComplete($event)"
></m-blockchain--purchase>
</div>
......@@ -49,28 +50,35 @@
<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.
1 token = 1,000 views from the network. Launch advertising
campaigns, send offers to other channels for more exposure and grow
your audience to new levels.
</p>
<div class="m-marketing__actionButtons">
<a
class="mf-button mf-button--smaller mf-button--hollow-mono"
[href]="cdnAssetsUrl + 'assets/documents/Whitepaper-v0.5.pdf'"
target="_blank"
i18n
>
<span>Download Whitepaper</span>
<i class="material-icons">cloud_download</i>
</a>
<a
class="mf-button mf-button--smaller mf-button--hollow-mono"
(click)="setupWalletAction(); $event.preventDefault()"
i18n
>
<span>Setup Wallet</span>
</a>
<div class="m-marketing__links">
<h3>Useful links</h3>
<ul>
<li>
<a
[href]="cdnAssetsUrl + 'assets/documents/Whitepaper-v0.5.pdf'"
target="_blank"
>
<span i18n>Download Whitepaper</span>
<i class="material-icons">cloud_download</i>
</a>
</li>
<li>
<a routerLink="/wallet" target="_blank" i18n>
Setup Wallet
</a>
</li>
<li>
<a routerLink="/boost" target="_blank" i18n>
Learn About Boost
</a>
</li>
</ul>
</div>
</div>
<div
......@@ -101,9 +109,27 @@
<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.
Spend tokens to upgrade your channel to Pro or Plus. Access
exclusive content and other custom offerings from your favorite
creators.
</p>
<div class="m-marketing__links">
<h3>Useful links</h3>
<ul>
<li>
<a routerLink="/pro" target="_blank" i18n>
Learn About Pro
</a>
</li>
<li>
<a routerLink="/plus" target="_blank" i18n>
Learn About Plus
</a>
</li>
</ul>
</div>
</div>
<div
class="m-grid__column-6 m-grid__column-12--mobile m-marketing__image"
......@@ -133,8 +159,9 @@
<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.
Enjoy a post from another channel? Send them tokens to show your
support. Tokens help other creators promote their content and build
their network.
</p>
</div>
<div
......@@ -173,8 +200,12 @@
<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.
An
<a href="https://eips.ethereum.org/EIPS/eip-20" target="_blank"
>ERC-20</a
>
token harnessing the Ethereum blockchain to give you full control
over your crypto.
</p>
</div>
......@@ -185,7 +216,8 @@
<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.
<a routerLink="/rewards" target="_blank">rewards</a> for your
contribution to the network each day.
</p>
</div>
......
src/app/modules/blockchain/marketing/token.component.scss
View file @ 74276743
......@@ -7,5 +7,9 @@
@media screen and (max-width: $m-grid-min-vp) {
max-width: 100%;
}
.m-blockchainTokenPurchase {
box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.07);
}
}
}
src/app/modules/blockchain/marketing/token.component.ts
View file @ 74276743
......@@ -32,10 +32,6 @@ export class BlockchainMarketingTokenComponent {
onPurchaseComplete(purchase: any) {}
setupWalletAction() {
this.router.navigate(['/wallet']);
}
detectChanges() {
this.cd.markForCheck();
this.cd.detectChanges();
......
src/app/modules/blockchain/token-purchase/purchase.component.html
View file @ 74276743
<h4 *ngIf="hasTitle" i18n>Purchase Tokens</h4>
<div class="m-blockchainTokenPurchase">
<div class="m-blockchainTokenPurchase__amount">
<input
......
src/app/modules/blockchain/token-purchase/purchase.component.scss
View file @ 74276743
@import '../../../foundation/grid-values';
m-blockchain--purchase {
h4 {
font-size: 16px;
line-height: 44px;
font-weight: bold;
opacity: 0.7;
@include m-theme() {
color: themed($m-grey-800);
}
}
}
.m-blockchainTokenPurchase {
display: flex;
flex-direction: row;
......
src/app/modules/blockchain/token-purchase/purchase.component.ts
View file @ 74276743
......@@ -61,6 +61,8 @@ export class BlockchainPurchaseComponent implements OnInit {
paramsSubscription: Subscription;
@Input() hasTitle: boolean = false;
constructor(
protected client: Client,
protected changeDetectorRef: ChangeDetectorRef,
......@@ -77,6 +79,7 @@ export class BlockchainPurchaseComponent implements OnInit {
this.loadWalletAddress();
this.load().then(() => {
this.amount = 0.25;
this.detectChanges();
});
this.paramsSubscription = this.route.params.subscribe(params => {
if (params.purchaseEth) {
......
src/app/modules/nodes/marketing/marketing.component.html
View file @ 74276743
......@@ -82,7 +82,7 @@
<p class="m-marketing__description" i18n>
The platform includes a wide variety of features, such as analytics,
wallet, encrypted messaging, newsfeed, content hosting, blog
wallet, encyrpted messaging, newsfeed, content hosting, blog
editing, groups, hashtags, search, payments, advertising and more.
</p>
</div>
......@@ -115,7 +115,8 @@
<p class="m-marketing__description" i18n>
The Minds platform is built for all platforms, including Android,
iOS and major web browsers such as Firefox, Chrome, Safari and Brave
iOS and major web browsers such as Firefox, Chrome, Safari and
Brave.
</p>
</div>
<div
......@@ -176,9 +177,12 @@
<h3 i18n>Open source contribution</h3>
<p class="m-marketing__description" i18n>
All of your work will contrubute to the greater Minds open source
project of building free and open source social networking
technology for the world.
All of your work will contribute to the greater
<a href="https://gitlab.com/minds" target="_blank"
>Minds open source project</a
>
of building free and open source social networking technology for
the world.
</p>
</div>
</div>
......
src/app/modules/plus/marketing.component.html
View file @ 74276743
......@@ -134,8 +134,11 @@
<h2 i18n>Verify your channel</h2>
<p class="m-marketing__description" i18n>
Plus members are able to request to verify their channel and receive
a verified badge.
Plus members are able to request to
<a (click)="scrollToTop(); $event.preventDefault()"
>verify their channel</a
>
and receive a verified badge.
</p>
<p class="m-marketing__description" i18n>
......
src/app/modules/pro/marketing.component.html
View file @ 74276743
......@@ -13,9 +13,8 @@
</h2>
<p class="m-marketing__description" i18n>
Earn revenue for your content and upgrade your channel into an
independent website with all the professional tools you need to do
what you love.
Earn revenue for your content and upgrade your channel into a full
blown website with professional tools you need to do what you love.
</p>
<div class="m-proMarketing__subscription">
......@@ -95,8 +94,8 @@
<h2 i18n>Build your own website</h2>
<p class="m-marketing__description" i18n>
Morph your channel into a full blown website with your own
sub-domain or custom domain, logo, theme, categories and footer.
Morph your channel into a full blown website with your own subdomain
or custom domain, logo, theme, categories and footer.
</p>
<ul class="m-marketing__points">
......@@ -174,18 +173,30 @@
<div
class="m-grid__column-6 m-grid__column-12--mobile m-marketing__body"
>
<h2 i18n>If we make money, you make money.</h2>
<h2 i18n>A sustainable revenue model for everyone.</h2>
<p class="m-marketing__description" i18n>
Minds is initially putting $250,000 directly towards compensating
Pro sites, initially without any ads.
We are you. We are sharing our revenue with you to directly
compensate for contributions to the network. As a community-owned
company, it is essential to keep everyone's incentives aligned and
inspired.
</p>
<p class="m-marketing__description" i18n>
In order for this program to continue, we need your help in growing
both revenue and the Minds Token economy so that there is a constant
source of funding.
The more traffic and revenue that you drive, the more you earn and
the healthier the ecosystem becomes.
</p>
<div class="m-marketing__actionButtons">
<a
class="mf-button mf-button--smaller mf-button--hollow-mono"
routerLink="/upgrades"
target="_blank"
i18n
>
Learn About Upgrades
</a>
</div>
</div>
<div
class="m-grid__column-6 m-grid__column-12--mobile m-marketing__image"
......@@ -236,15 +247,20 @@
Turn off ads, verify your channel, earn a badge and access exclusive
content.
</p>
<p class="m-marketing__description">
<a routerLink="/plus" target="_blank" i18n>Learn About Plus</a>
</p>
</div>
<div
class="m-grid__column-4 m-grid__column-12--mobile m-marketing__body"
>
<h3 i18n>Expand your reach</h3>
<h3 i18n>Harness the network</h3>
<p class="m-marketing__description" i18n>
Get free promotion for your website and access millions of minds.
Why separate your website from your social network? Join forces with
our community of millions of minds.
</p>
</div>
</div>
......
src/app/modules/upgrades/upgrade-options.component.html
View file @ 74276743
......@@ -110,7 +110,7 @@
<div class="m-upgradesUpgradeOptionsPlan__row">
<p class="m-upgradesUpgradeOptionsPlan__description" i18n>
The ultimate platform for independent content creators on the Internet.
The ultimate platform for independent creators and brands.
</p>
</div>
......
src/app/modules/wire/marketing/marketing.component.html
View file @ 74276743
......@@ -14,9 +14,8 @@
</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.
Enable your supporters or friends to pay you in dollars or
cryptocurrency. Get tips and monthly subscriptions for your content.
</p>
<div class="">
......
Please register or to comment