Add introduction

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>
+      <div class="introduction mb-4">
-        This overview page features a curated collection of personal finance
+        <p>
-        tools compared to the open source alternative Ghostfolio. If you value
+          This overview page features a curated collection of personal finance
-        transparency, data privacy, and community collaboration, Ghostfolio
+          tools compared to the open source alternative
-        provides an excellent opportunity to take control of your financial
+          <a [routerLink]="['/about']">Ghostfolio</a>. If you value
-        management.
+          transparency, data privacy, and community collaboration, Ghostfolio
-      </p>
+          provides an excellent opportunity to take control of your financial
-      <p>
+          management.
-        Explore the links below to compare a variety of personal finance tools
+        </p>
-        with Ghostfolio.
+        <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"

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) {