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

<div class="container">
  <div class="row">
    <div class="col text-center">
      <div>
        <h1 class="font-weight-bold intro" i18n>
          Manage your wealth like a boss
        </h1>
      </div>
      <p class="lead mb-4" i18n>
        Ghostfolio is a privacy-first, open source dashboard for your personal
        finances. Break down your asset allocation, know your net worth and make
        solid, data-driven investment decisions.
      </p>
      <div class="mb-4">
        <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 mb-5 row">
    <div class="align-items-center col d-flex justify-content-center">
      <ng-container *ngIf="hasPermissionToCreateUser">
        <a
          color="primary"
          i18n
          mat-flat-button
          [routerLink]="routerLinkRegister"
        >
          Get Started
        </a>
      </ng-container>
      <ng-container *ngIf="hasPermissionForDemo">
        <div *ngIf="hasPermissionToCreateUser" class="mx-3 text-muted" i18n>
          or
        </div>
        <a i18n mat-stroked-button [routerLink]="['/demo']">Live Demo</a>
      </ng-container>
    </div>
  </div>

  <div *ngIf="hasPermissionForStatistics" class="row mb-5">
    <div
      class="col-md-4 d-flex my-1"
      [ngClass]="{ 'justify-content-center': deviceType !== 'mobile' }"
    >
      <a
        class="d-block"
        title="Ghostfolio in Numbers: Monthly Active Users (MAU)"
        [routerLink]="['/open']"
      >
        <gf-value
          i18n
          icon="people-outline"
          size="large"
          [value]="statistics?.activeUsers30d ?? '-'"
          >Monthly Active Users</gf-value
        >
      </a>
    </div>
    <div
      class="col-md-4 d-flex my-1"
      [ngClass]="{ 'justify-content-center': deviceType !== 'mobile' }"
    >
      <a
        class="d-block"
        title="Ghostfolio in Numbers: Stars on GitHub"
        [routerLink]="['/open']"
      >
        <gf-value
          i18n
          icon="star-outline"
          size="large"
          [value]="statistics?.gitHubStargazers ?? '-'"
          >Stars on GitHub</gf-value
        >
      </a>
    </div>
    <div
      class="col-md-4 d-flex my-1"
      [ngClass]="{ 'justify-content-center': deviceType !== 'mobile' }"
    >
      <a
        class="d-block"
        title="Ghostfolio in Numbers: Pulls on Docker Hub"
        [routerLink]="['/open']"
      >
        <gf-value
          i18n
          icon="cloud-download-outline"
          size="large"
          [value]="statistics?.dockerHubPulls ?? '-'"
          >Pulls on Docker Hub</gf-value
        >
      </a>
    </div>
  </div>

  <div class="row mb-5">
    <div class="col-12 text-center text-muted">
      <small i18n>As seen in</small>
    </div>
    <div class="col-md-3 d-flex justify-content-center my-1">
      <a
        class="d-block logo logo-alternative-to mask"
        href="https://alternativeto.net"
        target="_blank"
        title="AlternativeTo - Crowdsourced software recommendations"
      ></a>
    </div>
    <div class="col-md-3 d-flex justify-content-center my-1">
      <a
        class="d-block logo logo-awesome"
        href="https://github.com/awesome-selfhosted/awesome-selfhosted"
        target="_blank"
        title="Awesome-Selfhosted: A list of Free Software network services and web applications which can be hosted on your own servers"
      ></a>
    </div>
    <div class="col-md-3 d-flex justify-content-center my-1">
      <a
        class="d-block logo logo-dev-community mask"
        href="https://dev.to"
        target="_blank"
        title="DEV Community - A constructive and inclusive social network for software developers"
      ></a>
    </div>
    <div class="col-md-3 d-flex justify-content-center my-1">
      <a
        class="d-block logo logo-hacker-news mask"
        href="https://news.ycombinator.com"
        target="_blank"
        title="Hacker News"
      ></a>
    </div>
    <div class="col-md-3 d-flex justify-content-center my-1">
      <a
        class="d-block logo logo-openalternative mask"
        href="https://openalternative.co"
        target="_blank"
        title="OpenAlternative: Open Source Alternatives to Popular Software"
      ></a>
    </div>
    <div class="col-md-3 d-flex justify-content-center my-1">
      <a
        class="d-block logo logo-privacy-tools mask"
        href="https://www.privacytools.io"
        target="_blank"
        title="Privacy Tools: Software Alternatives and Encryption"
      ></a>
    </div>
    <div class="col-md-3 d-flex justify-content-center my-1">
      <a
        class="d-block logo logo-product-hunt"
        href="https://www.producthunt.com"
        target="_blank"
        title="Product Hunt – The best new products in tech."
      ></a>
    </div>
    <div class="align-items-center col-md-3 d-flex justify-content-center my-1">
      <a
        class="d-block logo logo-reddit mask"
        href="https://www.reddit.com"
        target="_blank"
        title="Reddit - Dive into anything"
      ></a>
    </div>
    <div class="col-md-3 d-flex justify-content-center my-1">
      <a
        class="d-block logo logo-sackgeld mask"
        href="https://www.sackgeld.com"
        target="_blank"
        title="Sackgeld.com – Apps für ein höheres Sackgeld"
      ></a>
    </div>
    <div class="col-md-3 d-flex justify-content-center my-1">
      <a
        class="d-block logo logo-sourceforge mask"
        href="https://sourceforge.net"
        target="_blank"
        title="SourceForge: The Complete Open-Source and Business Software Platform"
      ></a>
    </div>
    <div class="align-items-center col-md-3 d-flex justify-content-center my-1">
      <a
        class="d-block logo logo-umbrel mask"
        href="https://umbrel.com"
        target="_blank"
        title="Umbrel — A personal server OS for self-hosting"
      ></a>
    </div>
    <div class="col-md-3 d-flex justify-content-center my-1">
      <a
        class="d-block logo logo-unraid mask"
        href="https://unraid.net"
        target="_blank"
        title="Unraid | Unleash Your Hardware"
      ></a>
    </div>
  </div>

  <div class="pt-3 row">
    <div class="col text-center">
      <h2 class="h4 mb-1 text-center" i18n>
        Protect your <strong>assets</strong>. Refine your
        <strong>personal investment strategy</strong>.
      </h2>
      <p class="lead m-0" i18n>
        Ghostfolio empowers busy people to keep track of stocks, ETFs or
        cryptocurrencies without being tracked.
      </p>
    </div>
  </div>

  <div class="row my-3">
    <div class="col-md-4 my-2">
      <mat-card appearance="outlined">
        <mat-card-header>
          <mat-card-title i18n>360° View</mat-card-title>
        </mat-card-header>
        <mat-card-content i18n>
          Get the full picture of your personal finances across multiple
          platforms.
        </mat-card-content>
      </mat-card>
    </div>
    <div class="col-md-4 my-2">
      <mat-card appearance="outlined">
        <mat-card-header>
          <mat-card-title i18n>Web3 Ready</mat-card-title>
        </mat-card-header>
        <mat-card-content i18n>
          Use Ghostfolio anonymously and own your financial data.
        </mat-card-content>
      </mat-card>
    </div>
    <div class="col-md-4 my-2">
      <mat-card appearance="outlined">
        <mat-card-header>
          <mat-card-title i18n>Open Source</mat-card-title>
        </mat-card-header>
        <mat-card-content i18n>
          Benefit from continuous improvements through a strong community.
        </mat-card-content>
      </mat-card>
    </div>
  </div>

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

  <div class="row my-5">
    <div class="col-12">
      <h2 class="h4 mb-3 text-center" i18n>
        What our <strong>users</strong> are saying
      </h2>
    </div>
    <div class="col-md-8 offset-md-2">
      <gf-carousel [aria-label]="'Testimonials'">
        <div *ngFor="let testimonial of testimonials" gf-carousel-item>
          <div class="d-flex px-4">
            <gf-logo class="mr-3 mt-2 pt-1" size="medium" [showLabel]="false" />
            <div>
              <div>{{ testimonial.quote }}</div>
              <div class="mt-2 text-muted">
                —
                <a
                  *ngIf="testimonial.url"
                  target="_blank"
                  [href]="testimonial.url"
                  >{{ testimonial.author }}</a
                >
                <span *ngIf="!testimonial.url">{{ testimonial.author }}</span
                >,
                {{ testimonial.country }}
              </div>
            </div>
          </div>
        </div>
      </gf-carousel>
    </div>
  </div>

  <div *ngIf="hasPermissionForSubscription" class="row my-5">
    <div class="col-12">
      <h2 class="h4 text-center" i18n>
        Members from around the globe are using
        <a href="pricing"><strong>Ghostfolio Premium</strong></a>
      </h2>
    </div>
    <div class="col-md-8 customer-map-container offset-md-2">
      <gf-world-map-chart format="👻" [countries]="countriesOfSubscribersMap" />
    </div>
  </div>

  <div *ngIf="hasPermissionForSubscription" class="row my-3">
    <div class="col-12">
      <h2 class="h4 mb-1 text-center" i18n>
        How does <strong>Ghostfolio</strong> work?
      </h2>
      <p class="lead mb-3 text-center" i18n>Get started in only 3 steps</p>
    </div>
    <div class="col-md-4 my-2">
      <mat-card appearance="outlined" class="h-100">
        <mat-card-content class="d-flex flex-row">
          <div class="flex-grow-1">
            <div class="font-weight-bold" i18n>Sign up anonymously*</div>
            <div class="text-muted" i18n>
              <small>* no e-mail address nor credit card required</small>
            </div>
          </div>
          <div class="pl-2 text-muted text-right">1</div>
        </mat-card-content>
      </mat-card>
    </div>
    <div class="col-md-4 my-2">
      <mat-card appearance="outlined" class="h-100">
        <mat-card-content class="d-flex flex-row">
          <div class="flex-grow-1">
            <div class="font-weight-bold" i18n>
              Add any of your historical transactions
            </div>
          </div>
          <div class="pl-2 text-muted text-right">2</div>
        </mat-card-content>
      </mat-card>
    </div>
    <div class="col-md-4 my-2">
      <mat-card appearance="outlined" class="h-100">
        <mat-card-content class="d-flex flex-row">
          <div class="flex-grow-1">
            <div class="font-weight-bold" i18n>
              Get valuable insights of your portfolio composition
            </div>
          </div>
          <div class="pl-2 text-muted text-right">3</div>
        </mat-card-content>
      </mat-card>
    </div>
  </div>

  <div *ngIf="hasPermissionToCreateUser" class="row my-5">
    <div class="col">
      <h2 class="h4 mb-1 text-center" i18n>Are <strong>you</strong> ready?</h2>
      <p class="lead mb-3 text-center" i18n>
        Join now<ng-container *ngIf="hasPermissionForDemo">
          or check out the example account</ng-container
        >
      </p>
      <div class="align-items-center d-flex justify-content-center py-2">
        <a
          color="primary"
          i18n
          mat-flat-button
          [routerLink]="routerLinkRegister"
        >
          Get Started
        </a>
        <ng-container *ngIf="hasPermissionForDemo">
          <div class="mx-3 text-muted" i18n>or</div>
          <a i18n mat-stroked-button [routerLink]="['/demo']">Live Demo</a>
        </ng-container>
      </div>
    </div>
  </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 mb-4">
    <div
      class="align-items-center d-flex flex-column justify-content-center w-100"
    >
      <gf-logo size="medium" />
      <div>Wealth Management Software</div>
    </div>
  </div>
  <div class="row">
    <div class="align-items-center d-flex flex-column w-100">
      <a
        class="logo logo-agplv3 mask"
        href="https://www.gnu.org/licenses/agpl-3.0.html"
        target="_blank"
        title="GNU Affero General Public License Version 3"
      ></a>
    </div>
  </div>
</div>