You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
ghostfolio/apps/client/src/app/pages/landing/landing-page.html

456 lines
14 KiB

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<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>