Feature/improve wording on landing page (#1366)

* Improve wording * Update changelog
2 years ago · 36bd6164e6
parent eac52a215b
commit 36bd6164e6
5 changed files with 75 additions and 53 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Improved the portfolio evolution chart
 - Removed the data source type `RAKUTEN`
 - Refactored the appearance (dark mode) in user settings (from `appearance` to `colorScheme`)
+- Improved the wording on the landing page

 ## 1.204.1 - 15.10.2022

--- a/apps/client/src/app/pages/landing/landing-page.component.ts
+++ b/apps/client/src/app/pages/landing/landing-page.component.ts
@ -3,6 +3,7 @@ import { DataService } from '@ghostfolio/client/services/data.service';
 import { Statistics } from '@ghostfolio/common/interfaces/statistics.interface';
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import { format } from 'date-fns';
+import { DeviceDetectorService } from 'ngx-device-detector';
 import { Subject } from 'rxjs';

@Component({
@ -14,6 +15,7 @@ import { Subject } from 'rxjs';
 export class LandingPageComponent implements OnDestroy, OnInit {
  public currentYear = format(new Date(), 'yyyy');
  public demoAuthToken: string;
+  public deviceType: string;
  public hasPermissionForStatistics: boolean;
  public statistics: Statistics;
  public testimonials = [
@ -41,7 +43,10 @@ export class LandingPageComponent implements OnDestroy, OnInit {

  private unsubscribeSubject = new Subject<void>();

-  public constructor(private dataService: DataService) {
+  public constructor(
+    private dataService: DataService,
+    private deviceService: DeviceDetectorService
+  ) {
    const { globalPermissions, statistics } = this.dataService.fetchInfo();

    this.hasPermissionForStatistics = hasPermission(
@ -52,7 +57,9 @@ export class LandingPageComponent implements OnDestroy, OnInit {
    this.statistics = statistics;
  }

-  public ngOnInit() {}
+  public ngOnInit() {
+    this.deviceType = this.deviceService.getDeviceInfo().deviceType;
+  }

  public ngOnDestroy() {
    this.unsubscribeSubject.next();
--- a/apps/client/src/app/pages/landing/landing-page.html
+++ b/apps/client/src/app/pages/landing/landing-page.html
@ -1,10 +1,15 @@
 <div class="container">
  <div class="row">
    <div class="col text-center">
-      <h1 class="font-weight-bold intro my-5">
+      <h1 class="font-weight-bold intro mt-5">
        Manage your wealth like a boss
      </h1>
-      <div>
+      <p class="lead mb-4">
+        Ghostfolio is a privacy-first, open source dashboard to manage 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"
@ -23,9 +28,9 @@
 </div>

 <div class="container">
-  <div class="button-container row">
+  <div class="button-container mb-5 row">
    <div class="align-items-center col d-flex justify-content-center">
-      <div class="py-5 text-center">
+      <div class="text-center">
        <a
          class="d-inline-block"
          color="primary"
@ -43,7 +48,10 @@
  </div>

  <div *ngIf="hasPermissionForStatistics" class="row mb-5">
-    <div class="col-md-4 d-flex my-1">
+    <div
+      class="col-md-4 d-flex my-1"
+      [ngClass]="{ 'justify-content-center': this.deviceType !== 'mobile' }"
+    >
      <a
        class="d-block"
        title="Ghostfolio in Numbers: Monthly Active Users (MAU)"
@ -57,7 +65,10 @@
        >
      </a>
    </div>
-    <div class="col-md-4 d-flex my-1">
+    <div
+      class="col-md-4 d-flex my-1"
+      [ngClass]="{ 'justify-content-center': this.deviceType !== 'mobile' }"
+    >
      <a
        class="d-block"
        title="Ghostfolio in Numbers: Stars on GitHub"
@ -71,7 +82,10 @@
        >
      </a>
    </div>
-    <div class="col-md-4 d-flex my-1">
+    <div
+      class="col-md-4 d-flex my-1"
+      [ngClass]="{ 'justify-content-center': this.deviceType !== 'mobile' }"
+    >
      <a
        class="d-block"
        title="Ghostfolio in Numbers: Pulls on Docker Hub"
@ -139,15 +153,15 @@
    </div>
  </div>

-  <div class="row my-5">
+  <div class="pt-3 row">
    <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">
+      <p class="lead m-0">
        Ghostfolio empowers busy people to keep track of stocks, ETFs or
-        cryptocurrencies and make solid, data-driven investment decisions.
+        cryptocurrencies without being tracked.
      </p>
    </div>
  </div>
@ -220,7 +234,7 @@
        </li>
      </ul>
      <div class="mt-4 text-center">
-        <a [routerLink]="['/about']" mat-stroked-button
+        <a mat-stroked-button [routerLink]="['/about']"
          >Learn more about Ghostfolio</a
        >
      </div>
--- a/apps/client/src/assets/sitemap.xml
+++ b/apps/client/src/assets/sitemap.xml
@ -6,74 +6,74 @@
            http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
  <url>
    <loc>https://ghostfol.io</loc>
-    <lastmod>2022-10-01T00:00:00+00:00</lastmod>
+    <lastmod>2022-10-16T00:00:00+00:00</lastmod>
  </url>
  <url>
    <loc>https://ghostfol.io/de/blog/2021/07/hallo-ghostfolio</loc>
-    <lastmod>2022-10-01T00:00:00+00:00</lastmod>
+    <lastmod>2022-10-16T00:00:00+00:00</lastmod>
  </url>
  <url>
    <loc>https://ghostfol.io/en/about</loc>
-    <lastmod>2022-10-01T00:00:00+00:00</lastmod>
+    <lastmod>2022-10-16T00:00:00+00:00</lastmod>
  </url>
  <url>
    <loc>https://ghostfol.io/en/about/changelog</loc>
-    <lastmod>2022-10-01T00:00:00+00:00</lastmod>
+    <lastmod>2022-10-16T00:00:00+00:00</lastmod>
  </url>
  <url>
    <loc>https://ghostfol.io/en/blog</loc>
-    <lastmod>2022-10-01T00:00:00+00:00</lastmod>
+    <lastmod>2022-10-16T00:00:00+00:00</lastmod>
  </url>
  <url>
    <loc>https://ghostfol.io/en/blog/2021/07/hello-ghostfolio</loc>
-    <lastmod>2022-10-01T00:00:00+00:00</lastmod>
+    <lastmod>2022-10-16T00:00:00+00:00</lastmod>
  </url>
  <url>
    <loc>https://ghostfol.io/en/blog/2022/01/ghostfolio-first-months-in-open-source</loc>
-    <lastmod>2022-10-01T00:00:00+00:00</lastmod>
+    <lastmod>2022-10-16T00:00:00+00:00</lastmod>
  </url>
  <url>
    <loc>https://ghostfol.io/en/blog/2022/07/ghostfolio-meets-internet-identity</loc>
-    <lastmod>2022-10-01T00:00:00+00:00</lastmod>
+    <lastmod>2022-10-16T00:00:00+00:00</lastmod>
  </url>
  <url>
    <loc>https://ghostfol.io/en/blog/2022/07/how-do-i-get-my-finances-in-order</loc>
-    <lastmod>2022-10-01T00:00:00+00:00</lastmod>
+    <lastmod>2022-10-16T00:00:00+00:00</lastmod>
  </url>
  <url>
    <loc>https://ghostfol.io/en/blog/2022/08/500-stars-on-github</loc>
-    <lastmod>2022-10-01T00:00:00+00:00</lastmod>
+    <lastmod>2022-10-16T00:00:00+00:00</lastmod>
  </url>
    <url>
    <loc>https://ghostfol.io/en/blog/2022/10/hacktoberfest-2022</loc>
-    <lastmod>2022-10-01T00:00:00+00:00</lastmod>
+    <lastmod>2022-10-16T00:00:00+00:00</lastmod>
  </url>
  <url>
    <loc>https://ghostfol.io/en/demo</loc>
-    <lastmod>2022-10-01T00:00:00+00:00</lastmod>
+    <lastmod>2022-10-16T00:00:00+00:00</lastmod>
  </url>
  <url>
    <loc>https://ghostfol.io/en/faq</loc>
-    <lastmod>2022-10-01T00:00:00+00:00</lastmod>
+    <lastmod>2022-10-16T00:00:00+00:00</lastmod>
  </url>
  <url>
    <loc>https://ghostfol.io/en/features</loc>
-    <lastmod>2022-10-01T00:00:00+00:00</lastmod>
+    <lastmod>2022-10-16T00:00:00+00:00</lastmod>
  </url>
  <url>
    <loc>https://ghostfol.io/en/markets</loc>
-    <lastmod>2022-10-01T00:00:00+00:00</lastmod>
+    <lastmod>2022-10-16T00:00:00+00:00</lastmod>
  </url>
  <url>
    <loc>https://ghostfol.io/en/pricing</loc>
-    <lastmod>2022-10-01T00:00:00+00:00</lastmod>
+    <lastmod>2022-10-16T00:00:00+00:00</lastmod>
  </url>
  <url>
    <loc>https://ghostfol.io/en/register</loc>
-    <lastmod>2022-10-01T00:00:00+00:00</lastmod>
+    <lastmod>2022-10-16T00:00:00+00:00</lastmod>
  </url>
  <url>
    <loc>https://ghostfol.io/en/resources</loc>
-    <lastmod>2022-10-01T00:00:00+00:00</lastmod>
+    <lastmod>2022-10-16T00:00:00+00:00</lastmod>
  </url>
 </urlset>
--- a/apps/client/src/index.html
+++ b/apps/client/src/index.html
@ -6,65 +6,65 @@
    <meta charset="utf-8" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta
+      content="Ghostfolio is a personal finance dashboard to keep track of your assets like stocks, ETFs or cryptocurrencies across multiple platforms."
      name="description"
-      content="Ghostfolio is a lightweight application to keep track of your financial assets like stocks, ETFs or cryptocurrencies across multiple platforms."
    />
    <meta
+      content="app, asset, cryptocurrency, dashboard, etf, finance, management, performance, portfolio, software, stock, trading, wealth, web3"
      name="keywords"
-      content="app, asset, cryptocurrency, etf, finance, management, performance, portfolio, software, stock, tracker, trading, wealth"
    />
-    <meta name="mobile-web-app-capable" content="yes" />
-    <meta name="twitter:card" content="summary_large_image" />
+    <meta content="yes" name="mobile-web-app-capable" />
+    <meta content="summary_large_image" name="twitter:card" />
    <meta
+      content="Ghostfolio is a personal finance dashboard to keep track of your assets like stocks, ETFs or cryptocurrencies"
      name="twitter:description"
-      content="Ghostfolio is a lightweight wealth management application for individuals to keep track of stocks, ETFs or cryptocurrencies"
    />
-    <meta name="twitter:image" content="${rootUrl}/${featureGraphicPath}" />
+    <meta content="${rootUrl}/${featureGraphicPath}" name="twitter:image" />
    <meta
-      name="twitter:title"
      content="Ghostfolio – Open Source Wealth Management Software"
+      name="twitter:title"
    />
    <meta
-      name="viewport"
      content="initial-scale=1, viewport-fit=cover, width=device-width"
+      name="viewport"
    />
-    <meta property="og:description" content="" />
+    <meta content="" property="og:description" />
    <meta
-      property="og:title"
      content="Ghostfolio – Open Source Wealth Management Software"
+      property="og:title"
    />
-    <meta property="og:type" content="website" />
-    <meta property="og:url" content="${rootUrl}${path}" />
-    <meta property="og:image" content="${rootUrl}/${featureGraphicPath}" />
-    <meta property="og:updated_time" content="2022-08-18T00:00:00+00:00" />
+    <meta content="website" property="og:type" />
+    <meta content="${rootUrl}${path}" property="og:url" />
+    <meta content="${rootUrl}/${featureGraphicPath}" property="og:image" />
+    <meta content="2022-10-16T00:00:00+00:00" property="og:updated_time" />
    <meta
-      property="og:site_name"
      content="Ghostfolio – Open Source Wealth Management Software"
+      property="og:site_name"
    />

    <link
+      href="../assets/apple-touch-icon.png"
      rel="apple-touch-icon"
      sizes="180x180"
-      href="../assets/apple-touch-icon.png"
    />
    <link
+      href="../assets/favicon-32x32.png"
      rel="icon"
-      type="image/png"
      sizes="32x32"
-      href="../assets/favicon-32x32.png"
+      type="image/png"
    />
    <link
+      href="../assets/favicon-16x16.png"
      rel="icon"
-      type="image/png"
      sizes="16x16"
-      href="../assets/favicon-16x16.png"
+      type="image/png"
    />
-    <link rel="manifest" href="../assets/site.webmanifest" />
+    <link href="../assets/site.webmanifest" rel="manifest" />
  </head>
  <body>
    <gf-root></gf-root>

-    <script type="module" src="../ionicons/ionicons.esm.js"></script>
+    <script src="../ionicons/ionicons.esm.js" type="module"></script>
    <script nomodule="" src="ionicons.js"></script>

    <noscript