Feature/setup faq page (#1106)

* Set up FAQ page

* Update changelog

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- Set up a Frequently Asked Questions (FAQ) page
 - Added the savings rate to the investment timeline grouped by month
 
 ### Fixed

apps/client/src/app/app-routing.module.ts

@@ -92,6 +92,11 @@ const routes: Routes = [
         './pages/blog/2022/07/how-do-i-get-my-finances-in-order/how-do-i-get-my-finances-in-order-page.module'
       ).then((m) => m.HowDoIGetMyFinancesInOrderPageModule)
   },
+  {
+    path: 'faq',
+    loadChildren: () =>
+      import('./pages/faq/faq-page.module').then((m) => m.FaqPageModule)
+  },
   {
     path: 'features',
     loadChildren: () =>

apps/client/src/app/core/auth.guard.ts

@@ -21,6 +21,7 @@ export class AuthGuard implements CanActivate {
     '/de/blog',
     '/demo',
     '/en/blog',
+    '/faq',
     '/features',
     '/markets',
     '/p',

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

@@ -173,8 +173,18 @@
   </div>
 
   <div class="row">
+    <div *ngIf="hasPermissionForSubscription" class="col-md-3 col-xs-12 my-2">
+      <a
+        class="py-2 w-100"
+        color="primary"
+        i18n
+        mat-stroked-button
+        [routerLink]="['/faq']"
+        >FAQ</a
+      >
+    </div>
     <div
-      class="col-md-4 col-xs-12 my-2"
+      class="col-md-3 col-xs-12 my-2"
       [ngClass]="{ 'offset-md-4': !hasPermissionForBlog }"
     >
       <a
@@ -186,7 +196,7 @@
         >Changelog & License</a
       >
     </div>
-    <div *ngIf="hasPermissionForSubscription" class="col-md-4 col-xs-12 my-2">
+    <div *ngIf="hasPermissionForSubscription" class="col-md-3 col-xs-12 my-2">
       <a
         class="py-2 w-100"
         color="primary"
@@ -196,7 +206,7 @@
         >Privacy Policy</a
       >
     </div>
-    <div *ngIf="hasPermissionForBlog" class="col-md-4 col-xs-12 my-2">
+    <div *ngIf="hasPermissionForBlog" class="col-md-3 col-xs-12 my-2">
       <a
         class="py-2 w-100"
         color="primary"

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

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { AuthGuard } from '@ghostfolio/client/core/auth.guard';
+
+import { FaqPageComponent } from './faq-page.component';
+
+const routes: Routes = [
+  { path: '', component: FaqPageComponent, canActivate: [AuthGuard] }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class FaqPageRoutingModule {}

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

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

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

@@ -0,0 +1,143 @@
+<div class="container">
+  <div class="mb-5 row">
+    <div class="col">
+      <h3 class="mb-3 text-center" i18n>Frequently Asked Questions (FAQ)</h3>
+      <mat-card class="mb-3">
+        <mat-card-title i18n>What is Ghostfolio?</mat-card-title>
+        <mat-card-content i18n>
+          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 class="mb-3">
+        <mat-card-title i18n
+          >What assets can I track with Ghostfolio?</mat-card-title
+        >
+        <mat-card-content i18n>
+          With Ghostfolio, you can keep track of various assets like stocks,
+          ETFs or cryptocurrencies.
+        </mat-card-content>
+      </mat-card>
+      <mat-card class="mb-3">
+        <mat-card-title i18n
+          >What else is included in Ghostfolio?</mat-card-title
+        >
+        <mat-card-content i18n>
+          Please find a feature overview to manage your wealth
+          <a [routerLink]="['/features']">here</a>.
+        </mat-card-content>
+      </mat-card>
+      <mat-card class="mb-3">
+        <mat-card-title i18n>How do I start?</mat-card-title>
+        <mat-card-content i18n>
+          You can sign up via the “<a [routerLink]="['/register']"
+            >Get Started</a
+          >” button at the top of the page. You have multiple options to join
+          Ghostfolio: Create an account with a security token, using
+          <a
+            [routerLink]="['/en', 'blog', '2022', '07', 'ghostfolio-meets-internet-identity']"
+            >Internet Identity</a
+          >
+          or <i>Google Sign</i>. We will guide you to set up your portfolio.
+        </mat-card-content>
+      </mat-card>
+      <mat-card class="mb-3">
+        <mat-card-title i18n>Can I use Ghostfolio anonymously?</mat-card-title>
+        <mat-card-content i18n>
+          Yes, the authentication systems (via security token or
+          <a
+            [routerLink]="['/en', 'blog', '2022', '07', 'ghostfolio-meets-internet-identity']"
+            >Internet Identity</a
+          >) enable you to sign in securely and anonymously to Ghostfolio. There
+          is no need for an email address, phone number, or a username.
+        </mat-card-content>
+      </mat-card>
+      <mat-card class="mb-3">
+        <mat-card-title i18n>How can Ghostfolio be free?</mat-card-title>
+        <mat-card-content i18n
+          >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). Our
+          <a [routerLink]="['/pricing']">Ghostfolio Premium</a> users and
+          <a href="https://www.buymeacoffee.com/ghostfolio">sponsors</a> allow
+          us to run a free, limited plan for new investors.</mat-card-content
+        >
+      </mat-card>
+      <mat-card class="mb-3">
+        <mat-card-title i18n>Is it really free?</mat-card-title>
+        <mat-card-content i18n
+          >Yes, it is! Our
+          <a [routerLink]="['/pricing']">pricing page</a> details everything you
+          get for free.</mat-card-content
+        >
+      </mat-card>
+      <mat-card class="mb-3">
+        <mat-card-title i18n>What is Ghostfolio Premium?</mat-card-title>
+        <mat-card-content i18n
+          ><a [routerLink]="['/pricing']">Ghostfolio Premium</a> is a fully
+          managed Ghostfolio cloud offering for ambitious investors. The revenue
+          is used to cover the hosting infrastructure. It is the Open Source
+          code base with some extras like the market overview.</mat-card-content
+        >
+      </mat-card>
+      <mat-card class="mb-3">
+        <mat-card-title i18n>Can I start with a trial version?</mat-card-title>
+        <mat-card-content i18n
+          >Yes, you can try
+          <a [routerLink]="['/pricing']">Ghostfolio Premium</a> by signing up
+          for Ghostfolio and applying for a trial (see “My Ghostfolio”). It’s
+          easy, free and there is no commitment. You can stop using it at any
+          time.</mat-card-content
+        >
+      </mat-card>
+      <mat-card class="mb-3">
+        <mat-card-title i18n>Which devices are supported?</mat-card-title>
+        <mat-card-content i18n
+          >Ghostfolio works in every modern web browser on smartphones, tablets
+          and desktop computers (where you have even more analysis options and
+          statistics). For Android 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 class="mb-3">
+        <mat-card-title i18n
+          >Ghostfolio sounds cool, how can I get involved?</mat-card-title
+        >
+        <mat-card-content i18n
+          >Any support for Ghostfolio is welcome. Be it with a
+          <a [routerLink]="['/pricing']">Ghostfolio Premium</a> subscription to
+          finance the hosting, 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 by email at
+          <a href="mailto:hi@ghostfol.io">hi@ghostfol.io</a> or on Twitter
+          <a href="https://twitter.com/ghostfolio_">@ghostfolio_</a
+          >.</mat-card-content
+        >
+      </mat-card>
+      <mat-card class="mb-3">
+        <mat-card-title i18n>Got any other questions?</mat-card-title>
+        <mat-card-content i18n
+          >Join the Ghostfolio
+          <a
+            href="https://join.slack.com/t/ghostfolio/shared_invite/zt-vsaan64h-F_I0fEo5M0P88lP9ibCxFg"
+            >Slack community</a
+          >, tweet to
+          <a href="https://twitter.com/ghostfolio_">@ghostfolio_</a> or send an
+          e-mail to
+          <a href="mailto:hi@ghostfol.io">hi@ghostfol.io</a>.</mat-card-content
+        >
+      </mat-card>
+    </div>
+  </div>
+</div>

apps/client/src/app/pages/faq/faq-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 { FaqPageRoutingModule } from './faq-page-routing.module';
+import { FaqPageComponent } from './faq-page.component';
+
+@NgModule({
+  declarations: [FaqPageComponent],
+  imports: [CommonModule, FaqPageRoutingModule, MatCardModule],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class FaqPageModule {}

apps/client/src/app/pages/faq/faq-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/assets/sitemap.xml

@@ -6,62 +6,66 @@
             http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
   <url>
     <loc>https://ghostfol.io</loc>
-    <lastmod>2022-07-23T00:00:00+00:00</lastmod>
+    <lastmod>2022-07-29T00:00:00+00:00</lastmod>
   </url>
   <url>
     <loc>https://ghostfol.io/about</loc>
-    <lastmod>2022-07-23T00:00:00+00:00</lastmod>
+    <lastmod>2022-07-29T00:00:00+00:00</lastmod>
   </url>
   <url>
     <loc>https://ghostfol.io/about/changelog</loc>
-    <lastmod>2022-07-23T00:00:00+00:00</lastmod>
+    <lastmod>2022-07-29T00:00:00+00:00</lastmod>
   </url>
   <url>
     <loc>https://ghostfol.io/blog</loc>
-    <lastmod>2022-07-23T00:00:00+00:00</lastmod>
+    <lastmod>2022-07-29T00:00:00+00:00</lastmod>
   </url>
   <url>
     <loc>https://ghostfol.io/de/blog/2021/07/hallo-ghostfolio</loc>
-    <lastmod>2022-07-23T00:00:00+00:00</lastmod>
+    <lastmod>2022-07-29T00:00:00+00:00</lastmod>
   </url>
   <url>
     <loc>https://ghostfol.io/demo</loc>
-    <lastmod>2022-07-23T00:00:00+00:00</lastmod>
+    <lastmod>2022-07-29T00:00:00+00:00</lastmod>
   </url>
   <url>
     <loc>https://ghostfol.io/en/blog/2021/07/hello-ghostfolio</loc>
-    <lastmod>2022-07-23T00:00:00+00:00</lastmod>
+    <lastmod>2022-07-29T00:00:00+00:00</lastmod>
   </url>
   <url>
     <loc>https://ghostfol.io/en/blog/2022/01/ghostfolio-first-months-in-open-source</loc>
-    <lastmod>2022-07-23T00:00:00+00:00</lastmod>
+    <lastmod>2022-07-29T00:00:00+00:00</lastmod>
   </url>
   <url>
     <loc>https://ghostfol.io/en/blog/2022/07/ghostfolio-meets-internet-identity</loc>
-    <lastmod>2022-07-23T00:00:00+00:00</lastmod>
+    <lastmod>2022-07-29T00: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-07-23T00:00:00+00:00</lastmod>
+    <lastmod>2022-07-29T00:00:00+00:00</lastmod>
+  </url>
+  <url>
+    <loc>https://ghostfol.io/faq</loc>
+    <lastmod>2022-07-29T00:00:00+00:00</lastmod>
   </url>
   <url>
     <loc>https://ghostfol.io/features</loc>
-    <lastmod>2022-07-23T00:00:00+00:00</lastmod>
+    <lastmod>2022-07-29T00:00:00+00:00</lastmod>
   </url>
   <url>
     <loc>https://ghostfol.io/markets</loc>
-    <lastmod>2022-07-23T00:00:00+00:00</lastmod>
+    <lastmod>2022-07-29T00:00:00+00:00</lastmod>
   </url>
   <url>
     <loc>https://ghostfol.io/pricing</loc>
-    <lastmod>2022-07-23T00:00:00+00:00</lastmod>
+    <lastmod>2022-07-29T00:00:00+00:00</lastmod>
   </url>
   <url>
     <loc>https://ghostfol.io/register</loc>
-    <lastmod>2022-07-23T00:00:00+00:00</lastmod>
+    <lastmod>2022-07-29T00:00:00+00:00</lastmod>
   </url>
   <url>
     <loc>https://ghostfol.io/resources</loc>
-    <lastmod>2022-07-23T00:00:00+00:00</lastmod>
+    <lastmod>2022-07-29T00:00:00+00:00</lastmod>
   </url>
 </urlset>