From 904dec040ec52bdc2c3146502bf7b4fb9c1221d9 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Sat, 20 Nov 2021 10:28:05 +0100
Subject: [PATCH] Feature/add testimonial (#479)

* Add testimonials

* Update changelog
---
 CHANGELOG.md                                  |  4 +++
 .../pages/landing/landing-page.component.ts   | 22 ++++++++++++++++
 .../src/app/pages/landing/landing-page.html   | 25 +++++++++++++++++++
 3 files changed, 51 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 79bc87a90..014896973 100644
--- a/CHANGELOG.md
+++ b/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
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 4b5d79284..4a05c70c9 100644
--- a/apps/client/src/app/pages/landing/landing-page.component.ts
+++ b/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>();
 
diff --git a/apps/client/src/app/pages/landing/landing-page.html b/apps/client/src/app/pages/landing/landing-page.html
index 37eadd029..816da73ca 100644
--- a/apps/client/src/app/pages/landing/landing-page.html
+++ b/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">