topaLE
/
ghostfolio
mirror of https://github.com/ghostfolio/ghostfolio
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Improve pricing page

pull/1637/head
Thomas 3 years ago
parent
ed501d41c9
commit
f599704dab
3 changed files with 73 additions and 32 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      apps/client/src/app/components/subscription-interstitial-dialog/subscription-interstitial-dialog.html
  2. 77
      apps/client/src/app/pages/pricing/pricing-page.html
  3. 2
      apps/client/src/app/pages/pricing/pricing-page.scss

4
apps/client/src/app/components/subscription-interstitial-dialog/subscription-interstitial-dialog.html
View File

@ -26,6 +26,10 @@
<ion-icon class="mr-1" name="checkmark-circle-outline"></ion-icon> <ion-icon class="mr-1" name="checkmark-circle-outline"></ion-icon>
<span i18n>FIRE Calculator</span> <span i18n>FIRE Calculator</span>
</li> </li>
<li class="align-items-center d-flex mb-1">
<ion-icon class="mr-1" name="checkmark-circle-outline"></ion-icon>
<a i18n [routerLink]="['/features']">and more Features...</a>
</li>
</ul> </ul>
<p>Refine your personal investment strategy now.</p> <p>Refine your personal investment strategy now.</p>
</div> </div>

77
apps/client/src/app/pages/pricing/pricing-page.html
View File

@ -31,9 +31,9 @@
<mat-card class="d-flex flex-column h-100"> <mat-card class="d-flex flex-column h-100">
<div class="flex-grow-1"> <div class="flex-grow-1">
<h4>Open Source</h4> <h4>Open Source</h4>
<p> <p i18n>
For tech-savvy investors who prefer to run For tech-savvy investors who prefer to run Ghostfolio on their
<strong>Ghostfolio</strong> on their own infrastructure. own infrastructure.
</p> </p>
<ul class="list-unstyled mb-3"> <ul class="list-unstyled mb-3">
<li class="align-items-center d-flex mb-1"> <li class="align-items-center d-flex mb-1">
@ -48,14 +48,14 @@
class="mr-1" class="mr-1"
name="checkmark-circle-outline" name="checkmark-circle-outline"
></ion-icon> ></ion-icon>
<span i18n>Portfolio Performance</span> <span i18n>Unlimited Accounts</span>
</li> </li>
<li class="align-items-center d-flex mb-1"> <li class="align-items-center d-flex mb-1">
<ion-icon <ion-icon
class="mr-1" class="mr-1"
name="checkmark-circle-outline" name="checkmark-circle-outline"
></ion-icon> ></ion-icon>
<span i18n>Zen Mode</span> <span i18n>Portfolio Performance</span>
</li> </li>
<li class="align-items-center d-flex mb-1"> <li class="align-items-center d-flex mb-1">
<ion-icon <ion-icon
@ -85,9 +85,16 @@
></ion-icon> ></ion-icon>
<span i18n>FIRE Calculator</span> <span i18n>FIRE Calculator</span>
</li> </li>
<li class="align-items-center d-flex mb-1">
<ion-icon
class="mr-1"
name="checkmark-circle-outline"
></ion-icon>
<a i18n [routerLink]="['/features']">and more Features...</a>
</li>
</ul> </ul>
</div> </div>
<p>Self-hosted, update manually.</p> <p i18n>Self-hosted, update manually.</p>
<p class="h5 text-right">Free</p> <p class="h5 text-right">Free</p>
<div <div
*ngIf="user?.subscription?.type === 'Basic'" *ngIf="user?.subscription?.type === 'Basic'"
@ -106,8 +113,13 @@
[ngClass]="{ 'active': user?.subscription?.type === 'Basic' }" [ngClass]="{ 'active': user?.subscription?.type === 'Basic' }"
> >
<div class="flex-grow-1"> <div class="flex-grow-1">
<h4 class="align-items-center d-flex">Basic</h4> <div class="align-items-center d-flex mb-2">
<p> <h4 class="flex-grow-1 m-0">Basic</h4>
<div *ngIf="user?.subscription?.type === 'Basic'">
<ion-icon class="mr-1" name="checkmark-outline"></ion-icon>
</div>
</div>
<p i18n>
For new investors who are just getting started with trading. For new investors who are just getting started with trading.
</p> </p>
<ul class="list-unstyled mb-3"> <ul class="list-unstyled mb-3">
@ -123,14 +135,20 @@
class="mr-1" class="mr-1"
name="checkmark-circle-outline" name="checkmark-circle-outline"
></ion-icon> ></ion-icon>
<span i18n>Portfolio Performance</span> <span i18n>Unlimited Accounts</span>
</li> </li>
<li class="align-items-center d-flex mb-1"> <li class="align-items-center d-flex mb-1">
<ion-icon <ion-icon
class="mr-1" class="mr-1"
name="checkmark-circle-outline" name="checkmark-circle-outline"
></ion-icon> ></ion-icon>
<span i18n>Zen Mode</span> <span i18n>Portfolio Performance</span>
</li>
<li>
<ion-icon
class="invisible"
name="checkmark-circle-outline"
></ion-icon>
</li> </li>
<li> <li>
<ion-icon <ion-icon
@ -158,8 +176,8 @@
</li> </li>
</ul> </ul>
</div> </div>
<p>Fully managed <strong>Ghostfolio</strong> cloud offering.</p> <p i18n>Fully managed Ghostfolio cloud offering.</p>
<p class="h5 text-right">Free</p> <p class="h5 text-right" i18n>Free</p>
<div <div
*ngIf="user?.subscription?.type === 'Basic'" *ngIf="user?.subscription?.type === 'Basic'"
class="d-none d-lg-block hidden mt-3 text-center" class="d-none d-lg-block hidden mt-3 text-center"
@ -177,14 +195,19 @@
[ngClass]="{ 'active': user?.subscription?.type === 'Premium' }" [ngClass]="{ 'active': user?.subscription?.type === 'Premium' }"
> >
<div class="flex-grow-1"> <div class="flex-grow-1">
<h4 class="align-items-center d-flex"> <div class="align-items-center d-flex mb-2">
<h4 class="align-items-center d-flex flex-grow-1 m-0">
<span>Premium</span> <span>Premium</span>
<gf-premium-indicator <gf-premium-indicator
class="ml-1" class="ml-1"
[enableLink]="false" [enableLink]="false"
></gf-premium-indicator> ></gf-premium-indicator>
</h4> </h4>
<p> <div *ngIf="user?.subscription?.type === 'Premium'">
<ion-icon class="mr-1" name="checkmark-outline"></ion-icon>
</div>
</div>
<p i18n>
For ambitious investors who need the full picture of their For ambitious investors who need the full picture of their
financial assets. financial assets.
</p> </p>
@ -201,14 +224,14 @@
class="mr-1" class="mr-1"
name="checkmark-circle-outline" name="checkmark-circle-outline"
></ion-icon> ></ion-icon>
<span i18n>Portfolio Performance</span> <span i18n>Unlimited Accounts</span>
</li> </li>
<li class="align-items-center d-flex mb-1"> <li class="align-items-center d-flex mb-1">
<ion-icon <ion-icon
class="mr-1" class="mr-1"
name="checkmark-circle-outline" name="checkmark-circle-outline"
></ion-icon> ></ion-icon>
<span i18n>Zen Mode</span> <span i18n>Portfolio Performance</span>
</li> </li>
<li class="align-items-center d-flex mb-1"> <li class="align-items-center d-flex mb-1">
<ion-icon <ion-icon
@ -238,9 +261,16 @@
></ion-icon> ></ion-icon>
<span i18n>FIRE Calculator</span> <span i18n>FIRE Calculator</span>
</li> </li>
<li class="align-items-center d-flex mb-1">
<ion-icon
class="mr-1"
name="checkmark-circle-outline"
></ion-icon>
<a i18n [routerLink]="['/features']">and more Features...</a>
</li>
</ul> </ul>
</div> </div>
<p>Fully managed <strong>Ghostfolio</strong> cloud offering.</p> <p i18n>Fully managed Ghostfolio cloud offering.</p>
<p class="h5 text-right" [hidden]="!price"> <p class="h5 text-right" [hidden]="!price">
<span class="font-weight-normal"> <span class="font-weight-normal">
<ng-container *ngIf="coupon" <ng-container *ngIf="coupon"
@ -261,11 +291,16 @@
*ngIf="user?.subscription?.type === 'Basic'" *ngIf="user?.subscription?.type === 'Basic'"
class="mt-3 text-center" class="mt-3 text-center"
> >
<a color="primary" mat-flat-button [routerLink]="['/account']"> <a
color="primary"
i18n
mat-flat-button
[routerLink]="['/account']"
>
Upgrade Plan Upgrade Plan
</a> </a>
<p class="m-0 text-muted"> <p class="m-0 text-muted">
<small>One-time payment, no auto-renewal.</small> <small i18n>One-time payment, no auto-renewal.</small>
</p> </p>
</div> </div>
</mat-card> </mat-card>
@ -275,10 +310,10 @@
</div> </div>
<div *ngIf="!user" class="row"> <div *ngIf="!user" class="row">
<div class="col mt-3 text-center"> <div class="col mt-3 text-center">
<a color="primary" mat-flat-button [routerLink]="['/register']"> <a color="primary" i18n mat-flat-button [routerLink]="['/register']">
Get Started Get Started
</a> </a>
<p class="m-0 text-muted"><small>It’s free.</small></p> <p class="m-0 text-muted"><small i18n>It’s free.</small></p>
</div> </div>
</div> </div>
</div> </div>

2
apps/client/src/app/pages/pricing/pricing-page.scss
View File

@ -2,6 +2,7 @@
color: rgb(var(--dark-primary-text)); color: rgb(var(--dark-primary-text));
display: block; display: block;
p {
a { a {
color: rgba(var(--palette-primary-500), 1); color: rgba(var(--palette-primary-500), 1);
font-weight: 500; font-weight: 500;
@ -10,6 +11,7 @@
color: rgba(var(--palette-primary-300), 1); color: rgba(var(--palette-primary-300), 1);
} }
} }
}
.mat-card { .mat-card {
&:hover, &:hover,

Write Preview
Loading…
Cancel
Save