ghostfolio/apps/client/src/app/pages/pricing/pricing-page.html

<div class="container">
  <div class="row">
    <div class="col">
      <h3 class="d-flex justify-content-center mb-3 text-center" i18n>
        Pricing Plans
      </h3>
      <mat-card class="mb-4">
        <mat-card-content>
          <p>
            Our official
            <strong>Ghostfolio</strong> cloud offering is the easiest way to get
            started. Due to the time it saves, this will be the best option for
            most people. The revenue is used for covering the hosting costs.
          </p>
          <p>
            If you prefer to run <strong>Ghostfolio</strong> on your own
            infrastructure, please find the source code and further instructions
            on <a href="https://github.com/ghostfolio/ghostfolio">GitHub</a>.
          </p>
        </mat-card-content>
      </mat-card>
      <div class="row">
        <div class="col-xs-12 col-md-4 mb-3">
          <mat-card class="d-flex flex-column h-100">
            <div class="flex-grow-1">
              <h4 i18n>Open Source</h4>
              <p>
                For tech-savvy investors who prefer to run
                <strong>Ghostfolio</strong> on their own infrastructure.
              </p>
              <ul class="list-unstyled mb-3">
                <li class="align-items-center d-flex mb-1">
                  <ion-icon
                    class="mr-1 text-muted"
                    name="checkmark-circle-outline"
                  ></ion-icon>
                  <span>Unlimited Transactions</span>
                </li>
                <li class="align-items-center d-flex mb-1">
                  <ion-icon
                    class="mr-1 text-muted"
                    name="checkmark-circle-outline"
                  ></ion-icon>
                  <span>Portfolio Performance</span>
                </li>
                <li class="align-items-center d-flex mb-1">
                  <ion-icon
                    class="mr-1 text-muted"
                    name="checkmark-circle-outline"
                  ></ion-icon>
                  <span>Zen Mode</span>
                </li>
                <li class="align-items-center d-flex mb-1">
                  <ion-icon
                    class="mr-1 text-muted"
                    name="checkmark-circle-outline"
                  ></ion-icon>
                  <span>Portfolio Summary</span>
                </li>
                <li class="align-items-center d-flex mb-1">
                  <ion-icon
                    class="mr-1 text-muted"
                    name="checkmark-circle-outline"
                  ></ion-icon>
                  <span>Advanced Insights</span>
                </li>
              </ul>
            </div>
            <p>Self-hosted.</p>
            <p class="h5 text-right">Free</p>
          </mat-card>
        </div>
        <div class="col-xs-12 col-md-4 mb-3">
          <mat-card
            class="d-flex flex-column h-100"
            [ngClass]="{ 'active': user?.subscription?.type === 'Basic' }"
          >
            <div class="flex-grow-1">
              <h4 class="align-items-center d-flex" i18n>Basic</h4>
              <p>
                For new investors who are just getting started with trading.
              </p>
              <ul class="list-unstyled mb-3">
                <li class="align-items-center d-flex mb-1">
                  <ion-icon
                    class="mr-1 text-muted"
                    name="checkmark-circle-outline"
                  ></ion-icon>
                  <span>Unlimited Transactions</span>
                </li>
                <li class="align-items-center d-flex mb-1">
                  <ion-icon
                    class="mr-1 text-muted"
                    name="checkmark-circle-outline"
                  ></ion-icon>
                  <span>Portfolio Performance</span>
                </li>
                <li class="align-items-center d-flex mb-1">
                  <ion-icon
                    class="mr-1 text-muted"
                    name="checkmark-circle-outline"
                  ></ion-icon>
                  <span>Zen Mode</span>
                </li>
                <li>
                  <ion-icon
                    class="invisible"
                    name="checkmark-circle-outline"
                  ></ion-icon>
                </li>
                <li>
                  <ion-icon
                    class="invisible"
                    name="checkmark-circle-outline"
                  ></ion-icon>
                </li>
              </ul>
            </div>
            <p>Fully managed <strong>Ghostfolio</strong> cloud offering.</p>
            <p class="h5 text-right">Free</p>
          </mat-card>
        </div>
        <div class="col-xs-12 col-md-4 mb-3">
          <mat-card
            class="d-flex flex-column h-100"
            [ngClass]="{ 'active': user?.subscription?.type === 'Premium' }"
          >
            <div class="flex-grow-1">
              <h4 class="align-items-center d-flex" i18n>
                Premium
                <ion-icon
                  class="ml-1 text-muted"
                  name="diamond-outline"
                ></ion-icon>
              </h4>
              <p>
                For ambitious investors who need the full picture of their
                financial assets.
              </p>
              <ul class="list-unstyled mb-3">
                <li class="align-items-center d-flex mb-1">
                  <ion-icon
                    class="mr-1 text-muted"
                    name="checkmark-circle-outline"
                  ></ion-icon>
                  <span>Unlimited Transactions</span>
                </li>
                <li class="align-items-center d-flex mb-1">
                  <ion-icon
                    class="mr-1 text-muted"
                    name="checkmark-circle-outline"
                  ></ion-icon>
                  <span>Portfolio Performance</span>
                </li>
                <li class="align-items-center d-flex mb-1">
                  <ion-icon
                    class="mr-1 text-muted"
                    name="checkmark-circle-outline"
                  ></ion-icon>
                  <span>Zen Mode</span>
                </li>
                <li class="align-items-center d-flex mb-1">
                  <ion-icon
                    class="mr-1 text-muted"
                    name="checkmark-circle-outline"
                  ></ion-icon>
                  <span>Portfolio Summary</span>
                </li>
                <li class="align-items-center d-flex mb-1">
                  <ion-icon
                    class="mr-1 text-muted"
                    name="checkmark-circle-outline"
                  ></ion-icon>
                  <span>Advanced Insights</span>
                </li>
              </ul>
            </div>
            <p>Fully managed <strong>Ghostfolio</strong> cloud offering.</p>
            <p class="h5 text-right" [hidden]="!price">
              <span class="font-weight-normal"
                >{{ user?.settings.baseCurrency || baseCurrency }}
                <ng-container *ngIf="coupon"
                  ><strong>{{ price - coupon }} </strong>
                  <del
                    >{{ user?.settings.baseCurrency || baseCurrency }} {{ price
                    }}</del
                  >
                </ng-container>
                <ng-container *ngIf="!coupon"
                  ><strong>{{ price }}</strong></ng-container
                >
                <span i18n> per year</span></span
              >
            </p>
          </mat-card>
        </div>
      </div>
    </div>
  </div>
  <div *ngIf="user?.subscription?.type === 'Basic'" class="row">
    <div class="col mt-3 text-center">
      <a color="primary" i18n mat-flat-button [routerLink]="['/account']">
        Upgrade Plan
      </a>
    </div>
  </div>
  <div *ngIf="!user" class="row">
    <div class="col mt-3 text-center">
      <a color="primary" i18n mat-flat-button [routerLink]="['/register']">
        Get Started
      </a>
      <p class="text-muted"><small>It's free</small></p>
    </div>
  </div>
</div>