From 36bd6164e66f5a2b88648904f44bfd3db4bbbf4b Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Sun, 16 Oct 2022 19:35:09 +0200
Subject: [PATCH] Feature/improve wording on landing page (#1366)

* Improve wording

* Update changelog
---
 CHANGELOG.md                                  |  1 +
 .../pages/landing/landing-page.component.ts   | 11 ++++-
 .../src/app/pages/landing/landing-page.html   | 36 ++++++++++-----
 apps/client/src/assets/sitemap.xml            | 36 +++++++--------
 apps/client/src/index.html                    | 44 +++++++++----------
 5 files changed, 75 insertions(+), 53 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c53af5c02..b1e1b7b8a 100644
--- 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
 
diff --git a/apps/client/src/app/pages/landing/landing-page.component.ts b/apps/client/src/app/pages/landing/landing-page.component.ts
index 7fef8b092..34757b2ca 100644
--- 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();
diff --git a/apps/client/src/app/pages/landing/landing-page.html b/apps/client/src/app/pages/landing/landing-page.html
index 9ddd83106..a56c4de47 100644
--- 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>
diff --git a/apps/client/src/assets/sitemap.xml b/apps/client/src/assets/sitemap.xml
index 58c9b9673..72f35bece 100644
--- 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>
diff --git a/apps/client/src/index.html b/apps/client/src/index.html
index 27ec03287..bc2bdd366 100644
--- 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