From 699b732fc0929a1af64e814713b5da5dfa458722 Mon Sep 17 00:00:00 2001
From: Thomas <4159106+dtslvr@users.noreply.github.com>
Date: Sat, 8 Jul 2023 10:07:26 +0200
Subject: [PATCH] Add introduction

---
 .../personal-finance-tools-page.html          | 25 +++++++++++--------
 .../personal-finance-tools-page.scss          | 11 ++++++++
 2 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/apps/client/src/app/pages/resources/personal-finance-tools/personal-finance-tools-page.html b/apps/client/src/app/pages/resources/personal-finance-tools/personal-finance-tools-page.html
index d72e90909..736018a91 100644
--- a/apps/client/src/app/pages/resources/personal-finance-tools/personal-finance-tools-page.html
+++ b/apps/client/src/app/pages/resources/personal-finance-tools/personal-finance-tools-page.html
@@ -4,17 +4,20 @@
       <h3 class="d-none d-sm-block mb-3 text-center" i18n>
         Discover Open Source Alternatives for Personal Finance Tools
       </h3>
-      <p>
-        This overview page features a curated collection of personal finance
-        tools compared to the open source alternative Ghostfolio. If you value
-        transparency, data privacy, and community collaboration, Ghostfolio
-        provides an excellent opportunity to take control of your financial
-        management.
-      </p>
-      <p>
-        Explore the links below to compare a variety of personal finance tools
-        with Ghostfolio.
-      </p>
+      <div class="introduction mb-4">
+        <p>
+          This overview page features a curated collection of personal finance
+          tools compared to the open source alternative
+          <a [routerLink]="['/about']">Ghostfolio</a>. If you value
+          transparency, data privacy, and community collaboration, Ghostfolio
+          provides an excellent opportunity to take control of your financial
+          management.
+        </p>
+        <p>
+          Explore the links below to compare a variety of personal finance tools
+          with Ghostfolio.
+        </p>
+      </div>
       <mat-card
         *ngFor="let product of products"
         appearance="outlined"
diff --git a/apps/client/src/app/pages/resources/personal-finance-tools/personal-finance-tools-page.scss b/apps/client/src/app/pages/resources/personal-finance-tools/personal-finance-tools-page.scss
index 39eb6792e..8e1e178c7 100644
--- a/apps/client/src/app/pages/resources/personal-finance-tools/personal-finance-tools-page.scss
+++ b/apps/client/src/app/pages/resources/personal-finance-tools/personal-finance-tools-page.scss
@@ -1,6 +1,17 @@
 :host {
   color: rgb(var(--dark-primary-text));
   display: block;
+
+  .introduction {
+    a {
+      color: rgba(var(--palette-primary-500), 1);
+      font-weight: 500;
+
+      &:hover {
+        color: rgba(var(--palette-primary-300), 1);
+      }
+    }
+  }
 }
 
 :host-context(.is-dark-theme) {