From 835bde6662c2aa5118fc0dccb38aa972caffb640 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Thu, 16 Oct 2025 20:51:14 +0200
Subject: [PATCH] Feature/extend pricing page (#5761)

* Extend pricing page

* Update changelog
---
 CHANGELOG.md                                  |  1 +
 .../pages/pricing/pricing-page.component.ts   | 10 +++++
 .../src/app/pages/pricing/pricing-page.html   | 43 +++++++++++++++----
 3 files changed, 46 insertions(+), 8 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index adc9dbf53..0fb55409a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - Extended the glossary of the resources page by _Stealth Wealth_
+- Extended the content of the pricing page
 - Added a _Storybook_ story for the holdings table component
 
 ### Changed
diff --git a/apps/client/src/app/pages/pricing/pricing-page.component.ts b/apps/client/src/app/pages/pricing/pricing-page.component.ts
index 170d70914..8bc3e3a67 100644
--- a/apps/client/src/app/pages/pricing/pricing-page.component.ts
+++ b/apps/client/src/app/pages/pricing/pricing-page.component.ts
@@ -69,6 +69,16 @@ export class GfPricingPageComponent implements OnDestroy, OnInit {
   public professionalDataProviderTooltipPremium = translate(
     'PROFESSIONAL_DATA_PROVIDER_TOOLTIP_PREMIUM'
   );
+  public referralBrokers = [
+    'DEGIRO',
+    'finpension',
+    'frankly',
+    'Interactive Brokers',
+    'Mintos',
+    'Swissquote',
+    'VIAC',
+    'Zak'
+  ];
   public routerLinkFeatures = publicRoutes.features.routerLink;
   public routerLinkRegister = publicRoutes.register.routerLink;
   public user: User;
diff --git a/apps/client/src/app/pages/pricing/pricing-page.html b/apps/client/src/app/pages/pricing/pricing-page.html
index ea68b74eb..ee006b2d6 100644
--- a/apps/client/src/app/pages/pricing/pricing-page.html
+++ b/apps/client/src/app/pages/pricing/pricing-page.html
@@ -326,16 +326,43 @@
     <div class="row">
       <div class="col mt-3">
         <p>
-          If you plan to open an account at <i>DEGIRO</i>, <i>finpension</i>,
-          <i>frankly</i>, <i>Interactive Brokers</i>, <i>Swissquote</i>,
-          <i>VIAC</i>, or <i>Zak</i>, please
-          <a href="mailto:hi@ghostfol.io?Subject=Referral link for..."
+          <ng-container i18n>If you plan to open an account at</ng-container>
+          <ng-container>&nbsp;</ng-container>
+          @for (
+            broker of referralBrokers;
+            track broker;
+            let i = $index;
+            let last = $last
+          ) {
+            <i>{{ broker }}</i>
+            @if (last) {
+              <span>, </span>
+            } @else {
+              @if (i === referralBrokers.length - 2) {
+                <ng-container>&nbsp;</ng-container>
+                <ng-container i18n>or</ng-container>
+                <ng-container>&nbsp;</ng-container>
+              } @else {
+                <span>, </span>
+              }
+            }
+          }
+          <ng-container i18n>please</ng-container>
+          <ng-container>&nbsp;</ng-container>
+          <a href="mailto:hi@ghostfol.io?Subject=Referral link for..." i18n
             >contact us</a
           >
-          to use our referral link and get a Ghostfolio Premium membership for
-          one year. Looking for a student discount? Request it
-          <a href="mailto:hi@ghostfol.io?Subject=Student Discount">here</a>
-          with your university e-mail address.
+          <ng-container>&nbsp;</ng-container>
+          <ng-container i18n
+            >to use our referral link and get a Ghostfolio Premium membership
+            for one year</ng-container
+          >. <ng-container i18n>Looking for a student discount?</ng-container>
+          <ng-container>&nbsp;</ng-container>
+          <ng-container i18n>Request it</ng-container>
+          <ng-container>&nbsp;</ng-container>
+          <a href="mailto:hi@ghostfol.io?Subject=Student Discount" i18n>here</a>
+          <ng-container>&nbsp;</ng-container>
+          <ng-container i18n>with your university e-mail address</ng-container>.
         </p>
       </div>
     </div>