Feature/improve content of faq and landing page (#1687)

* Conditionally show content

* Update changelog

CHANGELOG.md

@@ -9,6 +9,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Improved the content of the landing page
+- Improved the content of the Frequently Asked Questions (FAQ) page
 - Set the exposed port as an environment variable (`PORT`) in `Dockerfile`
 - Upgraded `chart.js` from version `4.0.1` to `4.2.0`
 - Upgraded `ionicons` from version `6.0.4` to `6.1.2`

apps/client/src/app/pages/faq/faq-page.component.ts

@@ -1,5 +1,7 @@
-import { Component, OnDestroy } from '@angular/core';
+import { ChangeDetectorRef, Component, OnDestroy } from '@angular/core';
-import { Subject } from 'rxjs';
+import { UserService } from '@ghostfolio/client/services/user/user.service';
+import { User } from '@ghostfolio/common/interfaces';
+import { Subject, takeUntil } from 'rxjs';
 
 @Component({
   host: { class: 'page' },
@@ -8,9 +10,26 @@ import { Subject } from 'rxjs';
   templateUrl: './faq-page.html'
 })
 export class FaqPageComponent implements OnDestroy {
+  public user: User;
+
   private unsubscribeSubject = new Subject<void>();
 
-  public constructor() {}
+  public constructor(
+    private changeDetectorRef: ChangeDetectorRef,
+    private userService: UserService
+  ) {}
+
+  public ngOnInit() {
+    this.userService.stateChanged
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe((state) => {
+        if (state?.user) {
+          this.user = state.user;
+
+          this.changeDetectorRef.markForCheck();
+        }
+      });
+  }
 
   public ngOnDestroy() {
     this.unsubscribeSubject.next();

apps/client/src/app/pages/faq/faq-page.html

@@ -115,7 +115,7 @@
           >.</mat-card-content
         >
       </mat-card>
-      <mat-card class="mb-3">
+      <mat-card *ngIf="user?.subscription?.type === 'Premium'" class="mb-3">
         <mat-card-title
           >I cannot find my broker in the list of platforms. What can I
           do?</mat-card-title

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

@@ -52,6 +52,7 @@
 
   <div *ngIf="hasPermissionForStatistics" class="row mb-5">
     <div
+      *ngIf="hasPermissionForSubscription"
       class="col-md-4 d-flex my-1"
       [ngClass]="{ 'justify-content-center': this.deviceType !== 'mobile' }"
     >
@@ -68,6 +69,24 @@
         >
       </a>
     </div>
+    <div
+      *ngIf="!hasPermissionForSubscription"
+      class="col-md-4 d-flex my-1"
+      [ngClass]="{ 'justify-content-center': this.deviceType !== 'mobile' }"
+    >
+      <a
+        class="d-block"
+        title="Ghostfolio in Numbers: Contributors on GitHub"
+        [routerLink]="['/about']"
+      >
+        <gf-value
+          icon="people-outline"
+          size="large"
+          [value]="statistics?.gitHubContributors ?? '-'"
+          >Contributors on GitHub</gf-value
+        >
+      </a>
+    </div>
     <div
       class="col-md-4 d-flex my-1"
       [ngClass]="{ 'justify-content-center': this.deviceType !== 'mobile' }"
@@ -300,7 +319,7 @@
     </div>
   </div>
 
-  <div class="row my-3">
+  <div *ngIf="hasPermissionForSubscription" class="row my-3">
     <div class="col-12">
       <h2 class="h4 mb-1 text-center">
         How does <strong>Ghostfolio</strong> work?