Feature/divide faq page in three sections (#3003)

* Divide FAQ page in three sections

* General
* Cloud (SaaS)
* Self-Hosting

* Update changelog

CHANGELOG.md

@@ -13,6 +13,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Added a loading indicator to the investment timeline on the analysis page
 - Added support for the cryptocurrency _Jupiter_ (`JUP29210-USD`)
 
+### Changed
+
+- Divided the content of the Frequently Asked Questions (FAQ) page into three sections: _General_, _Cloud (SaaS)_ and _Self-Hosting_
+
 ## 2.51.0 - 2024-02-12
 
 ### Changed

apps/api/src/assets/sitemap.xml

@@ -370,6 +370,14 @@
     <loc>https://ghostfol.io/en/faq</loc>
     <lastmod>${currentDate}T00:00:00+00:00</lastmod>
   </url>
+  <url>
+    <loc>https://ghostfol.io/en/saas</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
+  <url>
+    <loc>https://ghostfol.io/en/self-hosting</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
   <url>
     <loc>https://ghostfol.io/en/features</loc>
     <lastmod>${currentDate}T00:00:00+00:00</lastmod>

apps/client/src/app/app.component.ts

@@ -111,6 +111,7 @@ export class AppComponent implements OnDestroy, OnInit {
 
         this.hasTabs =
           (this.currentRoute === this.routerLinkAbout[0].slice(1) ||
+            this.currentRoute === this.routerLinkFaq[0].slice(1) ||
             this.currentRoute === 'account' ||
             this.currentRoute === 'admin' ||
             this.currentRoute === 'home' ||
@@ -120,7 +121,6 @@ export class AppComponent implements OnDestroy, OnInit {
 
         this.showFooter =
           (this.currentRoute === 'blog' ||
-            this.currentRoute === this.routerLinkFaq[0].slice(1) ||
             this.currentRoute === this.routerLinkFeatures[0].slice(1) ||
             this.currentRoute === this.routerLinkMarkets[0].slice(1) ||
             this.currentRoute === 'open' ||

apps/client/src/app/pages/about/about-page-routing.module.ts

@@ -3,7 +3,6 @@ import { AuthGuard } from '@ghostfolio/client/core/auth.guard';
 
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import * as path from 'path';
 
 import { AboutPageComponent } from './about-page.component';
 

apps/client/src/app/pages/about/about-page.module.ts

@@ -8,7 +8,7 @@ import { AboutPageComponent } from './about-page.component';
 
 @NgModule({
   declarations: [AboutPageComponent],
-  imports: [CommonModule, MatTabsModule, AboutPageRoutingModule, RouterModule],
+  imports: [AboutPageRoutingModule, CommonModule, MatTabsModule, RouterModule],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class AboutPageModule {}

apps/client/src/app/pages/faq/faq-page-routing.module.ts

@@ -8,6 +8,27 @@ import { FaqPageComponent } from './faq-page.component';
 const routes: Routes = [
   {
     canActivate: [AuthGuard],
+    children: [
+      {
+        path: '',
+        loadChildren: () =>
+          import('./overview/faq-overview-page.module').then(
+            (m) => m.FaqOverviewPageModule
+          )
+      },
+      {
+        path: 'saas',
+        loadChildren: () =>
+          import('./saas/saas-page.module').then((m) => m.SaasPageModule)
+      },
+      {
+        path: 'self-hosting',
+        loadChildren: () =>
+          import('./self-hosting/self-hosting-page.module').then(
+            (m) => m.SelfHostingPageModule
+          )
+      }
+    ],
     component: FaqPageComponent,
     path: '',
     title: $localize`Frequently Asked Questions (FAQ)`

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

@@ -1,39 +1,57 @@
-import { UserService } from '@ghostfolio/client/services/user/user.service';
-import { User } from '@ghostfolio/common/interfaces';
+import { DataService } from '@ghostfolio/client/services/data.service';
+import { TabConfiguration, User } from '@ghostfolio/common/interfaces';
+import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 
-import { ChangeDetectorRef, Component, OnDestroy } from '@angular/core';
-import { Subject, takeUntil } from 'rxjs';
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { DeviceDetectorService } from 'ngx-device-detector';
+import { Subject } from 'rxjs';
 
 @Component({
-  host: { class: 'page' },
+  host: { class: 'page has-tabs' },
   selector: 'gf-faq-page',
   styleUrls: ['./faq-page.scss'],
   templateUrl: './faq-page.html'
 })
-export class FaqPageComponent implements OnDestroy {
-  public routerLinkFeatures = ['/' + $localize`features`];
-  public routerLinkMarkets = ['/' + $localize`markets`];
-  public routerLinkPricing = ['/' + $localize`pricing`];
-  public routerLinkRegister = ['/' + $localize`register`];
-  public user: User;
+export class FaqPageComponent implements OnDestroy, OnInit {
+  public deviceType: string;
+  public hasPermissionForSubscription: boolean;
+  public tabs: TabConfiguration[] = [];
 
   private unsubscribeSubject = new Subject<void>();
 
   public constructor(
-    private changeDetectorRef: ChangeDetectorRef,
-    private userService: UserService
-  ) {}
+    private dataService: DataService,
+    private deviceService: DeviceDetectorService
+  ) {
+    const { globalPermissions } = this.dataService.fetchInfo();
+
+    this.hasPermissionForSubscription = hasPermission(
+      globalPermissions,
+      permissions.enableSubscription
+    );
+
+    this.tabs = [
+      {
+        iconName: 'reader-outline',
+        label: $localize`General`,
+        path: ['/' + $localize`faq`]
+      },
+      {
+        iconName: 'cloudy-outline',
+        label: $localize`Cloud` + ' (SaaS)',
+        path: ['/' + $localize`faq`, 'saas'],
+        showCondition: this.hasPermissionForSubscription
+      },
+      {
+        iconName: 'server-outline',
+        label: $localize`Self-Hosting`,
+        path: ['/' + $localize`faq`, $localize`self-hosting`]
+      }
+    ];
+  }
 
   public ngOnInit() {
-    this.userService.stateChanged
-      .pipe(takeUntil(this.unsubscribeSubject))
-      .subscribe((state) => {
-        if (state?.user) {
-          this.user = state.user;
-
-          this.changeDetectorRef.markForCheck();
-        }
-      });
+    this.deviceType = this.deviceService.getDeviceInfo().deviceType;
   }
 
   public ngOnDestroy() {

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

@@ -1,291 +1,29 @@
-<div class="container">
-  <div class="mb-5 row">
-    <div class="col">
-      <h1 class="d-none d-sm-block h3 mb-4 text-center" i18n>
-        Frequently Asked Questions (FAQ)
-      </h1>
-      <p>
-        Find quick answers to commonly asked questions about Ghostfolio in our
-        Frequently Asked Questions (FAQ) section. Discover what Ghostfolio is,
-        explore its features, and learn about our privacy practices. Get all the
-        information you need in one place.
-      </p>
-      <mat-card appearance="outlined" class="mb-3">
-        <mat-card-header>
-          <mat-card-title>What is Ghostfolio?</mat-card-title>
-        </mat-card-header>
-        <mat-card-content>
-          Ghostfolio is a lightweight, open source wealth management application
-          for individuals to keep track of their net worth. The software
-          empowers you to make solid, data-driven investment decisions.
-        </mat-card-content>
-      </mat-card>
-      <mat-card appearance="outlined" class="mb-3">
-        <mat-card-header>
-          <mat-card-title
-            >What assets can I track with Ghostfolio?</mat-card-title
-          >
-        </mat-card-header>
-        <mat-card-content>
-          With Ghostfolio, you can keep track of various assets like stocks,
-          ETFs, bonds, cryptocurrencies and commodities.
-        </mat-card-content>
-      </mat-card>
-      <mat-card appearance="outlined" class="mb-3">
-        <mat-card-header>
-          <mat-card-title
-            >What else is included in Ghostfolio?</mat-card-title
-          ></mat-card-header
-        >
-        <mat-card-content>
-          Please find a feature overview to manage your wealth
-          <a [routerLink]="routerLinkFeatures">here</a>.
-        </mat-card-content>
-      </mat-card>
-      <mat-card appearance="outlined" class="mb-3">
-        <mat-card-header>
-          <mat-card-title>How do I start?</mat-card-title>
-        </mat-card-header>
-        <mat-card-content>
-          You can sign up via the “<a [routerLink]="routerLinkRegister"
-            >Get Started</a
-          >” button at the top of the page. You have multiple options to join
-          Ghostfolio: Create an account with a security token or
-          <i>Google Sign</i>. We will guide you to set up your portfolio.
-        </mat-card-content>
-      </mat-card>
-      <mat-card appearance="outlined" class="mb-3">
-        <mat-card-header>
-          <mat-card-title
-            >Will you spam me with emails once I sign up?</mat-card-title
-          ></mat-card-header
-        >
-        <mat-card-content>
-          No, we do not even collect your email address, so you will not receive
-          any spam emails from us.
-        </mat-card-content>
-      </mat-card>
-      <mat-card appearance="outlined" class="mb-3">
-        <mat-card-header>
-          <mat-card-title
-            >Can I use Ghostfolio anonymously?</mat-card-title
-          ></mat-card-header
-        >
-        <mat-card-content>
-          Yes, the authentication system via security token enables you to sign
-          in securely and anonymously to Ghostfolio. There is no need for an
-          e-mail address, phone number, or a username.
-        </mat-card-content>
-      </mat-card>
-      <mat-card appearance="outlined" class="mb-3">
-        <mat-card-header>
-          <mat-card-title
-            >How can Ghostfolio be free?</mat-card-title
-          ></mat-card-header
-        >
-        <mat-card-content
-          >This project is driven by the efforts of contributors from around the
-          world. The
-          <a href="https://github.com/ghostfolio/ghostfolio">source code</a> is
-          fully available as open source software (OSS). Thanks to our generous
-          <a [routerLink]="routerLinkPricing">Ghostfolio Premium</a> users and
-          <a href="https://www.buymeacoffee.com/ghostfolio">sponsors</a> we have
-          the ability to run a free, limited plan for novice
-          investors.</mat-card-content
-        >
-      </mat-card>
-      <mat-card appearance="outlined" class="mb-3">
-        <mat-card-header>
-          <mat-card-title>Is it really free?</mat-card-title></mat-card-header
-        >
-        <mat-card-content
-          >Yes, it is! Our
-          <a [routerLink]="routerLinkPricing">pricing page</a> details
-          everything you get for free.</mat-card-content
-        >
-      </mat-card>
-      <mat-card appearance="outlined" class="mb-3">
-        <mat-card-header>
-          <mat-card-title
-            >Do you monetize or sell my financial data?</mat-card-title
-          ></mat-card-header
-        >
-        <mat-card-content
-          >No, we value your privacy. We do not sell or share your financial
-          data with any third parties.</mat-card-content
-        >
-      </mat-card>
-      <mat-card appearance="outlined" class="mb-3">
-        <mat-card-header>
-          <mat-card-title
-            >What is your business model?</mat-card-title
-          ></mat-card-header
-        >
-        <mat-card-content
-          >By offering
-          <a [routerLink]="routerLinkPricing">Ghostfolio Premium</a>, a
-          subscription plan with a managed hosting service and enhanced
-          features, we fund our business while providing added value to our
-          users.</mat-card-content
-        >
-      </mat-card>
-      <mat-card appearance="outlined" class="mb-3">
-        <mat-card-header>
-          <mat-card-title
-            >What is Ghostfolio Premium?</mat-card-title
-          ></mat-card-header
-        >
-        <mat-card-content
-          ><a [routerLink]="routerLinkPricing">Ghostfolio Premium</a> is a fully
-          managed Ghostfolio cloud offering for ambitious investors. Revenue is
-          used to cover the costs of the hosting infrastructure and to fund
-          ongoing development. It is the Open Source code base with some extras
-          like the <a [routerLink]="routerLinkMarkets">markets overview</a> and
-          a professional data provider.</mat-card-content
-        >
-      </mat-card>
-      <mat-card appearance="outlined" class="mb-3">
-        <mat-card-header>
-          <mat-card-title
-            >Can I start with a trial version?</mat-card-title
-          ></mat-card-header
-        >
-        <mat-card-content
-          >Yes, you can try
-          <a [routerLink]="routerLinkPricing">Ghostfolio Premium</a> by signing
-          up for Ghostfolio and applying for a trial (see “My Ghostfolio”). It
-          is easy, free and there is no commitment. You can stop using it at any
-          time.</mat-card-content
-        >
-      </mat-card>
-      <mat-card appearance="outlined" class="mb-3">
-        <mat-card-header>
-          <mat-card-title
-            >How can I get a student discount for Ghostfolio
-            Premium?</mat-card-title
-          >
-        </mat-card-header>
-        <mat-card-content
-          >Request your student discount
-          <a href="mailto:hi@ghostfol.io?Subject=Student Discount">here</a> with
-          your university e-mail address.</mat-card-content
-        >
-      </mat-card>
-      <mat-card appearance="outlined" class="mb-3">
-        <mat-card-header>
-          <mat-card-title
-            >Does the Ghostfolio Premium subscription renew
-            automatically?</mat-card-title
-          >
-        </mat-card-header>
-        <mat-card-content
-          >No, <a [routerLink]="routerLinkPricing">Ghostfolio Premium</a> does
-          not include auto-renewal. Upon expiration, you can choose whether to
-          start a new subscription.</mat-card-content
-        >
-      </mat-card>
-      <mat-card appearance="outlined" class="mb-3">
-        <mat-card-header>
-          <mat-card-title>Which devices are supported?</mat-card-title>
-        </mat-card-header>
-        <mat-card-content
-          >Ghostfolio works in every modern web browser on smartphones, tablets
-          and desktop computers. For <i>Android</i> users, there is a dedicated
-          Ghostfolio app available in the
-          <a
-            href="https://play.google.com/store/apps/details?id=ch.dotsilver.ghostfolio.twa"
-            >Google Play Store</a
-          >.</mat-card-content
-        >
-      </mat-card>
-      <mat-card
-        *ngIf="user?.subscription?.type === 'Premium'"
-        appearance="outlined"
-        class="mb-3"
-      >
-        <mat-card-header>
-          <mat-card-title
-            >I cannot find my broker in the list of platforms. What can I
-            do?</mat-card-title
-          >
-        </mat-card-header>
-        <mat-card-content>
-          Please send an e-mail with the web address of your broker to
-          <a href="mailto:hi@ghostfol.io">hi&#64;ghostfol.io</a> and we are
-          happy to add it.
-        </mat-card-content>
-      </mat-card>
-      <mat-card appearance="outlined" class="mb-3">
-        <mat-card-header>
-          <mat-card-title
-            >Ghostfolio sounds cool, how can I get involved?</mat-card-title
-          >
-        </mat-card-header>
-        <mat-card-content
-          >Any support for Ghostfolio is welcome. Be it with a
-          <a [routerLink]="routerLinkPricing">Ghostfolio Premium</a>
-          subscription to finance the hosting infrastructure, a positive rating
-          in the
-          <a
-            href="https://play.google.com/store/apps/details?id=ch.dotsilver.ghostfolio.twa"
-            >Google Play Store</a
-          >, a star on
-          <a href="https://github.com/ghostfolio/ghostfolio">GitHub</a>,
-          feedback, bug reports, feature requests and of course contributions!
-          You can reach us via Ghostfolio
-          <a
-            href="https://join.slack.com/t/ghostfolio/shared_invite/zt-vsaan64h-F_I0fEo5M0P88lP9ibCxFg"
-            title="Join the Ghostfolio Slack community"
-            >Slack</a
-          >
-          community,
-          <a
-            href="https://twitter.com/ghostfolio_"
-            title="Post to Ghostfolio on X (formerly Twitter)"
-            >&#64;ghostfolio_</a
-          ><ng-container *ngIf="user?.subscription?.type === 'Premium'"
-            >,
-            <a href="mailto:hi@ghostfol.io" title="Send an e-mail"
-              >hi&#64;ghostfol.io</a
-            ></ng-container
-          >
-          or
-          <a
-            href="https://github.com/ghostfolio/ghostfolio"
-            title="Find Ghostfolio on GitHub"
-            >GitHub</a
-          >.</mat-card-content
-        >
-      </mat-card>
-      <mat-card appearance="outlined" class="mb-3">
-        <mat-card-header>
-          <mat-card-title>Got any other questions?</mat-card-title>
-        </mat-card-header>
-        <mat-card-content
-          >Please join the Ghostfolio
-          <a
-            href="https://join.slack.com/t/ghostfolio/shared_invite/zt-vsaan64h-F_I0fEo5M0P88lP9ibCxFg"
-            title="Join the Ghostfolio Slack community"
-            >Slack </a
-          >community, post to
-          <a
-            href="https://twitter.com/ghostfolio_"
-            title="Post to Ghostfolio on X (formerly Twitter)"
-            >&#64;ghostfolio_</a
-          ><ng-container *ngIf="user?.subscription?.type === 'Premium'"
-            >, send an e-mail to
-            <a href="mailto:hi@ghostfol.io" title="Send an e-mail"
-              >hi&#64;ghostfol.io</a
-            ></ng-container
-          >
-          or start a discussion at
-          <a
-            href="https://github.com/ghostfolio/ghostfolio"
-            title="Find Ghostfolio on GitHub"
-            >GitHub</a
-          >.</mat-card-content
-        >
-      </mat-card>
-    </div>
-  </div>
-</div>
+<mat-tab-nav-panel #tabPanel class="flex-grow-1 overflow-auto">
+  <router-outlet></router-outlet>
+</mat-tab-nav-panel>
+
+<nav
+  mat-align-tabs="center"
+  mat-tab-nav-bar
+  [disablePagination]="true"
+  [tabPanel]="tabPanel"
+>
+  <ng-container *ngFor="let tab of tabs">
+    <a
+      #rla="routerLinkActive"
+      *ngIf="tab.showCondition !== false"
+      class="no-min-width px-3"
+      mat-tab-link
+      routerLinkActive
+      [active]="rla.isActive"
+      [routerLink]="tab.path"
+      [routerLinkActiveOptions]="{ exact: true }"
+    >
+      <ion-icon
+        [name]="tab.iconName"
+        [size]="deviceType === 'mobile' ? 'large': 'small'"
+      />
+      <div class="d-none d-sm-block ml-2">{{ tab.label }}</div>
+    </a>
+  </ng-container>
+</nav>

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

@@ -1,13 +1,14 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatCardModule } from '@angular/material/card';
+import { MatTabsModule } from '@angular/material/tabs';
+import { RouterModule } from '@angular/router';
 
 import { FaqPageRoutingModule } from './faq-page-routing.module';
 import { FaqPageComponent } from './faq-page.component';
 
 @NgModule({
   declarations: [FaqPageComponent],
-  imports: [CommonModule, FaqPageRoutingModule, MatCardModule],
+  imports: [CommonModule, FaqPageRoutingModule, MatTabsModule, RouterModule],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class FaqPageModule {}

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

@@ -1,12 +1,7 @@
 :host {
-  display: block;
-
-  a {
-    color: rgba(var(--palette-primary-500), 1);
-    font-weight: 500;
-
-    &:hover {
-      color: rgba(var(--palette-primary-300), 1);
-    }
-  }
+  color: rgb(var(--dark-primary-text));
+}
+
+:host-context(.is-dark-theme) {
+  color: rgb(var(--light-primary-text));
 }

apps/client/src/app/pages/faq/overview/faq-overview-page-routing.module.ts

@@ -0,0 +1,21 @@
+import { AuthGuard } from '@ghostfolio/client/core/auth.guard';
+
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { FaqOverviewPageComponent } from './faq-overview-page.component';
+
+const routes: Routes = [
+  {
+    canActivate: [AuthGuard],
+    component: FaqOverviewPageComponent,
+    path: '',
+    title: $localize`Frequently Asked Questions (FAQ)`
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class FaqOverviewPageRoutingModule {}

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

@@ -0,0 +1,41 @@
+import { UserService } from '@ghostfolio/client/services/user/user.service';
+import { User } from '@ghostfolio/common/interfaces';
+
+import { ChangeDetectorRef, Component, OnDestroy } from '@angular/core';
+import { Subject, takeUntil } from 'rxjs';
+
+@Component({
+  host: { class: 'page' },
+  selector: 'gf-faq-overview-page',
+  styleUrls: ['./faq-overview-page.scss'],
+  templateUrl: './faq-overview-page.html'
+})
+export class FaqOverviewPageComponent implements OnDestroy {
+  public routerLinkFeatures = ['/' + $localize`features`];
+  public routerLinkPricing = ['/' + $localize`pricing`];
+  public user: User;
+
+  private unsubscribeSubject = new Subject<void>();
+
+  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();
+    this.unsubscribeSubject.complete();
+  }
+}

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

@@ -0,0 +1,172 @@
+<div class="container">
+  <div class="mb-5 row">
+    <div class="col">
+      <h1 class="d-none d-sm-block h3 mb-4 text-center" i18n>
+        Frequently Asked Questions (FAQ)
+      </h1>
+      <p>
+        Find quick answers to commonly asked questions about Ghostfolio in our
+        Frequently Asked Questions (FAQ) section. Discover what Ghostfolio is,
+        explore its features, and learn about our privacy practices. Get all the
+        information you need in one place.
+      </p>
+      <mat-card appearance="outlined" class="mb-3">
+        <mat-card-header>
+          <mat-card-title>What is Ghostfolio?</mat-card-title>
+        </mat-card-header>
+        <mat-card-content>
+          Ghostfolio is a lightweight, open source wealth management application
+          for individuals to keep track of their net worth. The software
+          empowers you to make solid, data-driven investment decisions.
+        </mat-card-content>
+      </mat-card>
+      <mat-card appearance="outlined" class="mb-3">
+        <mat-card-header>
+          <mat-card-title
+            >What assets can I track with Ghostfolio?</mat-card-title
+          >
+        </mat-card-header>
+        <mat-card-content>
+          With Ghostfolio, you can keep track of various assets like stocks,
+          ETFs, bonds, cryptocurrencies and commodities.
+        </mat-card-content>
+      </mat-card>
+      <mat-card appearance="outlined" class="mb-3">
+        <mat-card-header>
+          <mat-card-title
+            >What else is included in Ghostfolio?</mat-card-title
+          ></mat-card-header
+        >
+        <mat-card-content>
+          Please find a feature overview to manage your wealth
+          <a [routerLink]="routerLinkFeatures">here</a>.
+        </mat-card-content>
+      </mat-card>
+      <mat-card appearance="outlined" class="mb-3">
+        <mat-card-header>
+          <mat-card-title
+            >Can I use Ghostfolio anonymously?</mat-card-title
+          ></mat-card-header
+        >
+        <mat-card-content>
+          Yes, the authentication system via security token enables you to sign
+          in securely and anonymously to Ghostfolio. There is no need for an
+          e-mail address, phone number, or a username.
+        </mat-card-content>
+      </mat-card>
+      <mat-card appearance="outlined" class="mb-3">
+        <mat-card-header>
+          <mat-card-title
+            >How can Ghostfolio be free?</mat-card-title
+          ></mat-card-header
+        >
+        <mat-card-content
+          >This project is driven by the efforts of contributors from around the
+          world. The
+          <a href="https://github.com/ghostfolio/ghostfolio">source code</a> is
+          fully available as open source software (OSS). Thanks to our generous
+          <a [routerLink]="routerLinkPricing">Ghostfolio Premium</a> users and
+          <a href="https://www.buymeacoffee.com/ghostfolio">sponsors</a> we have
+          the ability to run a free, limited plan for novice
+          investors.</mat-card-content
+        >
+      </mat-card>
+      <mat-card appearance="outlined" class="mb-3">
+        <mat-card-header>
+          <mat-card-title
+            >Do you monetize or sell my financial data?</mat-card-title
+          ></mat-card-header
+        >
+        <mat-card-content
+          >No, we value your privacy. We do not sell or share your financial
+          data with any third parties.</mat-card-content
+        >
+      </mat-card>
+      <mat-card appearance="outlined" class="mb-3">
+        <mat-card-header>
+          <mat-card-title
+            >What is your business model?</mat-card-title
+          ></mat-card-header
+        >
+        <mat-card-content
+          >By offering
+          <a [routerLink]="routerLinkPricing">Ghostfolio Premium</a>, a
+          subscription plan with a managed hosting service and enhanced
+          features, we fund our business while providing added value to our
+          users.</mat-card-content
+        >
+      </mat-card>
+      <mat-card appearance="outlined" class="mb-3">
+        <mat-card-header>
+          <mat-card-title
+            >Ghostfolio sounds cool, how can I get involved?</mat-card-title
+          >
+        </mat-card-header>
+        <mat-card-content
+          >Any support for Ghostfolio is welcome. Be it with a
+          <a [routerLink]="routerLinkPricing">Ghostfolio Premium</a>
+          subscription to finance the hosting infrastructure, a positive rating
+          in the
+          <a
+            href="https://play.google.com/store/apps/details?id=ch.dotsilver.ghostfolio.twa"
+            >Google Play Store</a
+          >, a star on
+          <a href="https://github.com/ghostfolio/ghostfolio">GitHub</a>,
+          feedback, bug reports, feature requests and of course contributions!
+          You can reach us via Ghostfolio
+          <a
+            href="https://join.slack.com/t/ghostfolio/shared_invite/zt-vsaan64h-F_I0fEo5M0P88lP9ibCxFg"
+            title="Join the Ghostfolio Slack community"
+            >Slack</a
+          >
+          community,
+          <a
+            href="https://twitter.com/ghostfolio_"
+            title="Post to Ghostfolio on X (formerly Twitter)"
+            >&#64;ghostfolio_</a
+          ><ng-container *ngIf="user?.subscription?.type === 'Premium'"
+            >,
+            <a href="mailto:hi@ghostfol.io" title="Send an e-mail"
+              >hi&#64;ghostfol.io</a
+            ></ng-container
+          >
+          or
+          <a
+            href="https://github.com/ghostfolio/ghostfolio"
+            title="Find Ghostfolio on GitHub"
+            >GitHub</a
+          >.</mat-card-content
+        >
+      </mat-card>
+      <mat-card appearance="outlined" class="mb-3">
+        <mat-card-header>
+          <mat-card-title>Got any other questions?</mat-card-title>
+        </mat-card-header>
+        <mat-card-content
+          >Please join the Ghostfolio
+          <a
+            href="https://join.slack.com/t/ghostfolio/shared_invite/zt-vsaan64h-F_I0fEo5M0P88lP9ibCxFg"
+            title="Join the Ghostfolio Slack community"
+            >Slack </a
+          >community, post to
+          <a
+            href="https://twitter.com/ghostfolio_"
+            title="Post to Ghostfolio on X (formerly Twitter)"
+            >&#64;ghostfolio_</a
+          ><ng-container *ngIf="user?.subscription?.type === 'Premium'"
+            >, send an e-mail to
+            <a href="mailto:hi@ghostfol.io" title="Send an e-mail"
+              >hi&#64;ghostfol.io</a
+            ></ng-container
+          >
+          or start a discussion at
+          <a
+            href="https://github.com/ghostfolio/ghostfolio"
+            title="Find Ghostfolio on GitHub"
+            >GitHub</a
+          >.</mat-card-content
+        >
+      </mat-card>
+    </div>
+  </div>
+</div>

apps/client/src/app/pages/faq/overview/faq-overview-page.module.ts

@@ -0,0 +1,13 @@
+import { CommonModule } from '@angular/common';
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { MatCardModule } from '@angular/material/card';
+
+import { FaqOverviewPageRoutingModule } from './faq-overview-page-routing.module';
+import { FaqOverviewPageComponent } from './faq-overview-page.component';
+
+@NgModule({
+  declarations: [FaqOverviewPageComponent],
+  imports: [CommonModule, FaqOverviewPageRoutingModule, MatCardModule],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class FaqOverviewPageModule {}

apps/client/src/app/pages/faq/overview/faq-overview-page.scss

@@ -0,0 +1,12 @@
+:host {
+  display: block;
+
+  a {
+    color: rgba(var(--palette-primary-500), 1);
+    font-weight: 500;
+
+    &:hover {
+      color: rgba(var(--palette-primary-300), 1);
+    }
+  }
+}

apps/client/src/app/pages/faq/saas/saas-page-routing.module.ts

@@ -0,0 +1,21 @@
+import { AuthGuard } from '@ghostfolio/client/core/auth.guard';
+
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { SaasPageComponent } from './saas-page.component';
+
+const routes: Routes = [
+  {
+    canActivate: [AuthGuard],
+    component: SaasPageComponent,
+    path: '',
+    title: $localize`Cloud` + ' (SaaS) – ' + $localize`FAQ`
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class SaasPageRoutingModule {}

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

@@ -0,0 +1,42 @@
+import { UserService } from '@ghostfolio/client/services/user/user.service';
+import { User } from '@ghostfolio/common/interfaces';
+
+import { ChangeDetectorRef, Component, OnDestroy } from '@angular/core';
+import { Subject, takeUntil } from 'rxjs';
+
+@Component({
+  host: { class: 'page' },
+  selector: 'gf-saas-page',
+  styleUrls: ['./saas-page.scss'],
+  templateUrl: './saas-page.html'
+})
+export class SaasPageComponent implements OnDestroy {
+  public routerLinkMarkets = ['/' + $localize`markets`];
+  public routerLinkPricing = ['/' + $localize`pricing`];
+  public routerLinkRegister = ['/' + $localize`register`];
+  public user: User;
+
+  private unsubscribeSubject = new Subject<void>();
+
+  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();
+    this.unsubscribeSubject.complete();
+  }
+}

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

@@ -0,0 +1,162 @@
+<div class="container">
+  <div class="mb-5 row">
+    <div class="col">
+      <h1 class="d-none d-sm-block h3 mb-4 text-center" i18n>
+        Frequently Asked Questions (FAQ)
+      </h1>
+      <p>
+        Find quick answers to commonly asked questions about the fully managed
+        Ghostfolio cloud offering in our Frequently Asked Questions (FAQ)
+        section.
+      </p>
+      <mat-card appearance="outlined" class="mb-3">
+        <mat-card-header>
+          <mat-card-title>How do I start?</mat-card-title>
+        </mat-card-header>
+        <mat-card-content>
+          You can sign up via the “<a [routerLink]="routerLinkRegister"
+            >Get Started</a
+          >” button at the top of the page. You have multiple options to join
+          Ghostfolio: Create an account with a security token or
+          <i>Google Sign</i>. We will guide you to set up your portfolio.
+        </mat-card-content>
+      </mat-card>
+      <mat-card appearance="outlined" class="mb-3">
+        <mat-card-header>
+          <mat-card-title
+            >Will you spam me with emails once I sign up?</mat-card-title
+          ></mat-card-header
+        >
+        <mat-card-content>
+          No, we do not even collect your email address, so you will not receive
+          any spam emails from us.
+        </mat-card-content>
+      </mat-card>
+      <mat-card appearance="outlined" class="mb-3">
+        <mat-card-header>
+          <mat-card-title>Is it really free?</mat-card-title></mat-card-header
+        >
+        <mat-card-content
+          >Yes, it is! Our
+          <a [routerLink]="routerLinkPricing">pricing page</a> details
+          everything you get for free.</mat-card-content
+        >
+      </mat-card>
+      <mat-card appearance="outlined" class="mb-3">
+        <mat-card-header>
+          <mat-card-title
+            >What is Ghostfolio Premium?</mat-card-title
+          ></mat-card-header
+        >
+        <mat-card-content
+          ><a [routerLink]="routerLinkPricing">Ghostfolio Premium</a> is a fully
+          managed Ghostfolio cloud offering for ambitious investors. Revenue is
+          used to cover the costs of the hosting infrastructure and to fund
+          ongoing development. It is the Open Source code base with some extras
+          like the <a [routerLink]="routerLinkMarkets">markets overview</a> and
+          a professional data provider.</mat-card-content
+        >
+      </mat-card>
+      <mat-card appearance="outlined" class="mb-3">
+        <mat-card-header>
+          <mat-card-title
+            >Can I start with a trial version?</mat-card-title
+          ></mat-card-header
+        >
+        <mat-card-content
+          >Yes, you can try
+          <a [routerLink]="routerLinkPricing">Ghostfolio Premium</a> by signing
+          up for Ghostfolio and applying for a trial (see “My Ghostfolio”). It
+          is easy, free and there is no commitment. You can stop using it at any
+          time.</mat-card-content
+        >
+      </mat-card>
+      <mat-card appearance="outlined" class="mb-3">
+        <mat-card-header>
+          <mat-card-title
+            >How can I get a student discount for Ghostfolio
+            Premium?</mat-card-title
+          >
+        </mat-card-header>
+        <mat-card-content
+          >Request your student discount
+          <a href="mailto:hi@ghostfol.io?Subject=Student Discount">here</a> with
+          your university e-mail address.</mat-card-content
+        >
+      </mat-card>
+      <mat-card appearance="outlined" class="mb-3">
+        <mat-card-header>
+          <mat-card-title
+            >Does the Ghostfolio Premium subscription renew
+            automatically?</mat-card-title
+          >
+        </mat-card-header>
+        <mat-card-content
+          >No, <a [routerLink]="routerLinkPricing">Ghostfolio Premium</a> does
+          not include auto-renewal. Upon expiration, you can choose whether to
+          start a new subscription.</mat-card-content
+        >
+      </mat-card>
+      <mat-card
+        *ngIf="user?.subscription?.type === 'Premium'"
+        appearance="outlined"
+        class="mb-3"
+      >
+        <mat-card-header>
+          <mat-card-title
+            >I cannot find my broker in the list of platforms. What can I
+            do?</mat-card-title
+          >
+        </mat-card-header>
+        <mat-card-content>
+          Please send an e-mail with the web address of your broker to
+          <a href="mailto:hi@ghostfol.io">hi&#64;ghostfol.io</a> and we are
+          happy to add it.
+        </mat-card-content>
+      </mat-card>
+      <mat-card appearance="outlined" class="mb-3">
+        <mat-card-header>
+          <mat-card-title>Which devices are supported?</mat-card-title>
+        </mat-card-header>
+        <mat-card-content
+          >Ghostfolio works in every modern web browser on smartphones, tablets
+          and desktop computers. For <i>Android</i> users of the managed cloud
+          offering, there is a dedicated Ghostfolio app available in the
+          <a
+            href="https://play.google.com/store/apps/details?id=ch.dotsilver.ghostfolio.twa"
+            >Google Play Store</a
+          >.</mat-card-content
+        >
+      </mat-card>
+      <mat-card appearance="outlined" class="mb-3">
+        <mat-card-header>
+          <mat-card-title>Got any other questions?</mat-card-title>
+        </mat-card-header>
+        <mat-card-content
+          >Please join the Ghostfolio
+          <a
+            href="https://join.slack.com/t/ghostfolio/shared_invite/zt-vsaan64h-F_I0fEo5M0P88lP9ibCxFg"
+            title="Join the Ghostfolio Slack community"
+            >Slack </a
+          >community, post to
+          <a
+            href="https://twitter.com/ghostfolio_"
+            title="Post to Ghostfolio on X (formerly Twitter)"
+            >&#64;ghostfolio_</a
+          ><ng-container *ngIf="user?.subscription?.type === 'Premium'"
+            >, send an e-mail to
+            <a href="mailto:hi@ghostfol.io" title="Send an e-mail"
+              >hi&#64;ghostfol.io</a
+            ></ng-container
+          >
+          or start a discussion at
+          <a
+            href="https://github.com/ghostfolio/ghostfolio"
+            title="Find Ghostfolio on GitHub"
+            >GitHub</a
+          >.</mat-card-content
+        >
+      </mat-card>
+    </div>
+  </div>
+</div>

apps/client/src/app/pages/faq/saas/saas-page.module.ts

@@ -0,0 +1,13 @@
+import { CommonModule } from '@angular/common';
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { MatCardModule } from '@angular/material/card';
+
+import { SaasPageRoutingModule } from './saas-page-routing.module';
+import { SaasPageComponent } from './saas-page.component';
+
+@NgModule({
+  declarations: [SaasPageComponent],
+  imports: [CommonModule, MatCardModule, SaasPageRoutingModule],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class SaasPageModule {}

apps/client/src/app/pages/faq/saas/saas-page.scss

@@ -0,0 +1,12 @@
+:host {
+  display: block;
+
+  a {
+    color: rgba(var(--palette-primary-500), 1);
+    font-weight: 500;
+
+    &:hover {
+      color: rgba(var(--palette-primary-300), 1);
+    }
+  }
+}

apps/client/src/app/pages/faq/self-hosting/self-hosting-page-routing.module.ts

@@ -0,0 +1,21 @@
+import { AuthGuard } from '@ghostfolio/client/core/auth.guard';
+
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { SelfHostingPageComponent } from './self-hosting-page.component';
+
+const routes: Routes = [
+  {
+    canActivate: [AuthGuard],
+    component: SelfHostingPageComponent,
+    path: '',
+    title: $localize`Self-Hosting` + ' – ' + $localize`FAQ`
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class SelfHostingPageRoutingModule {}

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

@@ -0,0 +1,21 @@
+import { Component, OnDestroy } from '@angular/core';
+import { Subject } from 'rxjs';
+
+@Component({
+  host: { class: 'page' },
+  selector: 'gf-self-hosting-page',
+  styleUrls: ['./self-hosting-page.scss'],
+  templateUrl: './self-hosting-page.html'
+})
+export class SelfHostingPageComponent implements OnDestroy {
+  private unsubscribeSubject = new Subject<void>();
+
+  public constructor() {}
+
+  public ngOnInit() {}
+
+  public ngOnDestroy() {
+    this.unsubscribeSubject.next();
+    this.unsubscribeSubject.complete();
+  }
+}

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

@@ -0,0 +1,56 @@
+<div class="container">
+  <div class="mb-5 row">
+    <div class="col">
+      <h1 class="d-none d-sm-block h3 mb-4 text-center" i18n>
+        Frequently Asked Questions (FAQ)
+      </h1>
+      <p>
+        Find quick answers to commonly asked questions about self-hosting
+        Ghostfolio in our Frequently Asked Questions (FAQ) section.
+      </p>
+      <mat-card appearance="outlined" class="mb-3">
+        <mat-card-header>
+          <mat-card-title>How do I start?</mat-card-title>
+        </mat-card-header>
+        <mat-card-content>
+          If you prefer to run Ghostfolio on your own infrastructure, please
+          find the source code and further instructions on
+          <a href="https://github.com/ghostfolio/ghostfolio">GitHub</a>.
+        </mat-card-content>
+      </mat-card>
+      <mat-card appearance="outlined" class="mb-3">
+        <mat-card-header>
+          <mat-card-title>Which devices are supported?</mat-card-title>
+        </mat-card-header>
+        <mat-card-content
+          >Ghostfolio works in every modern web browser on smartphones, tablets
+          and desktop computers.</mat-card-content
+        >
+      </mat-card>
+      <mat-card appearance="outlined" class="mb-3">
+        <mat-card-header>
+          <mat-card-title>Got any other questions?</mat-card-title>
+        </mat-card-header>
+        <mat-card-content
+          >Please join the Ghostfolio
+          <a
+            href="https://join.slack.com/t/ghostfolio/shared_invite/zt-vsaan64h-F_I0fEo5M0P88lP9ibCxFg"
+            title="Join the Ghostfolio Slack community"
+            >Slack </a
+          >community, post to
+          <a
+            href="https://twitter.com/ghostfolio_"
+            title="Post to Ghostfolio on X (formerly Twitter)"
+            >&#64;ghostfolio_</a
+          >
+          or start a discussion at
+          <a
+            href="https://github.com/ghostfolio/ghostfolio"
+            title="Find Ghostfolio on GitHub"
+            >GitHub</a
+          >.</mat-card-content
+        >
+      </mat-card>
+    </div>
+  </div>
+</div>

apps/client/src/app/pages/faq/self-hosting/self-hosting-page.module.ts

@@ -0,0 +1,13 @@
+import { CommonModule } from '@angular/common';
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { MatCardModule } from '@angular/material/card';
+
+import { SelfHostingPageRoutingModule } from './self-hosting-page-routing.module';
+import { SelfHostingPageComponent } from './self-hosting-page.component';
+
+@NgModule({
+  declarations: [SelfHostingPageComponent],
+  imports: [CommonModule, MatCardModule, SelfHostingPageRoutingModule],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class SelfHostingPageModule {}

apps/client/src/app/pages/faq/self-hosting/self-hosting-page.scss

@@ -0,0 +1,12 @@
+:host {
+  display: block;
+
+  a {
+    color: rgba(var(--palette-primary-500), 1);
+    font-weight: 500;
+
+    &:hover {
+      color: rgba(var(--palette-primary-300), 1);
+    }
+  }
+}