Feature/add testimonial (#479)

* Add testimonials

* Update changelog

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+### Added
+
+- Added a testimonial section to the landing page
+
 ### Fixed
 
 - Fixed the footer row border of the accounts table in dark mode

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

@@ -14,6 +14,28 @@ import { Subject } from 'rxjs';
 export class LandingPageComponent implements OnDestroy, OnInit {
   public currentYear = format(new Date(), 'yyyy');
   public demoAuthToken: string;
+  public testimonials = [
+    {
+      author: 'Philipp',
+      country: 'Germany 🇩🇪',
+      quote: `Super slim app with a great user interface. On top of that, it's open source.`
+    },
+    {
+      author: 'Onur',
+      country: 'Switzerland 🇨🇭',
+      quote: `Ghostfolio looks like the perfect portfolio tracker that I've been searching for all these years.`
+    },
+    {
+      author: 'Ivo',
+      country: 'Netherlands 🇳🇱',
+      quote: `A fantastic open source app to track my investments across platforms. Love the simplicity of its design and the depth of the insights.`
+    },
+    {
+      author: 'Damjan',
+      country: 'Slovenia 🇸🇮',
+      quote: `Ghostfolio helps me track all my investments in one place, it has a built-in portfolio analyzer and a very neat, seamless user interface.`
+    }
+  ];
 
   private unsubscribeSubject = new Subject<void>();
 

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

@@ -107,6 +107,31 @@
     </div>
   </div>
 
+  <div class="row my-5">
+    <div class="col-12">
+      <h2 class="h4 mb-1 text-center">
+        What our <strong>users</strong> are saying
+      </h2>
+    </div>
+    <div *ngFor="let testimonial of testimonials" class="col-md-6">
+      <div class="d-flex flex-row py-3">
+        <div class="d-flex justify-content-center">
+          <gf-logo
+            class="mr-3 mt-2 pt-1"
+            size="medium"
+            [hideName]="true"
+          ></gf-logo>
+        </div>
+        <div>
+          <div>{{ testimonial.quote }}</div>
+          <div class="mt-2 text-muted">
+            — {{ testimonial.author }}, {{ testimonial.country }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
   <div class="row my-5">
     <div class="col-md-6 offset-md-3">
       <h2 class="h4 mb-1 text-center">