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

<div class="container">
  <div class="row">
    <div class="col text-center">
      <h1 class="font-weight-bold intro my-5" i18n>
        Manage your wealth like a boss
      </h1>
      <div>
        <a
          href="https://www.youtube.com/watch?v=yY6ObSQVJZk"
          target="_blank"
          title="Watch the Ghostfol.io Trailer on YouTube"
        >
          <img
            alt="Ghostfol.io Trailer"
            class="rounded video"
            src="./assets/images/video-preview.jpg"
            style="max-width: 100%; width: 40rem"
          />
        </a>
      </div>
    </div>
  </div>
</div>

<div class="container">
  <div class="button-container row">
    <div class="align-items-center col d-flex justify-content-center">
      <div class="py-5 text-center">
        <a
          class="d-inline-block"
          color="primary"
          i18n
          mat-flat-button
          [disabled]="!demoAuthToken"
          [routerLink]="['/register']"
        >
          Get Started
        </a>
        <div class="d-inline-block mx-3 text-muted" i18n>or</div>
        <button
          class="d-inline-block"
          mat-stroked-button
          [disabled]="!demoAuthToken"
          (click)="setToken(demoAuthToken)"
        >
          <span i18n>Live Demo</span>
        </button>
      </div>
    </div>
  </div>

  <div class="row my-5">
    <div class="col text-center">
      <h2 class="h4 mb-1 text-center">
        Protect your <strong>assets</strong>. Refine your
        <strong>personal investment strategy</strong>.
      </h2>
      <p class="lead">
        Ghostfolio empowers busy people to keep track of stocks, ETFs or
        cryptocurrencies and make solid, data-driven investment decisions.
      </p>
    </div>
  </div>

  <div class="row my-5">
    <div class="col-md-6 offset-md-3">
      <h2 class="h4 mb-1 text-center">Why <strong>Ghostfolio</strong>?</h2>
      <p class="lead mb-3 text-center">Ghostfolio is for you if you are...</p>
      <ul class="list-unstyled">
        <li class="d-flex mb-3">
          <span class="mr-3">💼 </span
          ><span
            >trading stocks, ETFs or cryptocurrencies on multiple
            platforms</span
          >
        </li>
        <li class="d-flex mb-3">
          <span class="mr-3">🏦</span
          ><span>pursuing a buy & hold strategy</span>
        </li>
        <li class="d-flex mb-3">
          <span class="mr-3">🎯</span
          ><span
            >interested in getting insights of your portfolio composition</span
          >
        </li>
        <li class="d-flex mb-3">
          <span class="mr-3">👻</span
          ><span>valuing privacy and data ownership</span>
        </li>
        <li class="d-flex mb-3">
          <span class="mr-3">🧘</span><span>into minimalism</span>
        </li>
        <li class="d-flex mb-3">
          <span class="mr-3">🧺</span
          ><span>caring about diversifying your financial resources</span>
        </li>
        <li class="d-flex mb-3">
          <span class="mr-3">🆓</span
          ><span>interested in financial independence</span>
        </li>
        <li class="d-flex mb-3">
          <span class="mr-3">🙅</span
          ><span>saying no to spreadsheets in {{ currentYear }}</span>
        </li>
        <li class="d-flex mb-3">
          <span class="mr-3">😎</span><span>still reading this list</span>
        </li>
      </ul>
      <div class="mt-4 text-center">
        <a [routerLink]="['/about']" i18n mat-stroked-button
          >Learn more about Ghostfolio</a
        >
      </div>
    </div>
  </div>

  <div class="row my-5">
    <div class="col-12">
      <h2 class="h4 mb-1 text-center">
        What our <strong>users</strong> are saying
      </h2>
    </div>
    <div *ngFor="let testimonial of testimonials" class="col-md-6">
      <div class="d-flex flex-row py-3">
        <div class="d-flex justify-content-center">
          <gf-logo
            class="mr-3 mt-2 pt-1"
            size="medium"
            [hideName]="true"
          ></gf-logo>
        </div>
        <div>
          <div>{{ testimonial.quote }}</div>
          <div class="mt-2 text-muted">
            — {{ testimonial.author }}, {{ testimonial.country }}
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="row my-5">
    <div class="col-md-6 offset-md-3">
      <h2 class="h4 mb-1 text-center">
        How does <strong>Ghostfolio</strong> work?
      </h2>
      <p class="lead mb-3 text-center">Get started in only 3 steps</p>
      <ol class="m-0 pl-3">
        <li class="mb-2">
          Sign up anonymously<br />(no e-mail address nor credit card required)
        </li>
        <li class="mb-2">Add any of your historical transactions</li>
        <li>Get valuable insights of your portfolio composition</li>
      </ol>
    </div>
  </div>

  <div class="row my-5">
    <div class="col-md-6 offset-md-3">
      <h2 class="h4 mb-1 text-center">Are <strong>you</strong> ready?</h2>
      <p class="lead mb-3 text-center">
        Join now or check out the example account
      </p>
      <div class="py-2 text-center">
        <a
          color="primary"
          i18n
          mat-flat-button
          [disabled]="!demoAuthToken"
          [routerLink]="['/register']"
        >
          Get Started
        </a>
        <div class="d-inline-block mx-3 text-muted" i18n>or</div>
        <button
          class="d-inline-block"
          mat-stroked-button
          [disabled]="!demoAuthToken"
          (click)="setToken(demoAuthToken)"
        >
          <span i18n>Live Demo</span>
        </button>
      </div>
    </div>
  </div>

  <div class="downloads my-5 row justify-content-center">
    <a
      href="https://play.google.com/store/apps/details?id=ch.dotsilver.ghostfolio.twa"
      title="Get Ghostfolio on Google Play"
    >
      <img alt="Google Play Badge" src="assets/badge-en-google-play.png" />
    </a>
  </div>
</div>

<div class="container">
  <div class="d-block row">
    <div class="outro-inner-container mx-auto">
      <div class="h-100 w-100"></div>
    </div>
  </div>
  <div class="row">
    <div
      class="align-items-center d-flex flex-column justify-content-center w-100"
    >
      <gf-logo size="medium"></gf-logo>
      <div>Wealth Management Software</div>
    </div>
  </div>
</div>