From 386dd565908878704acefd16d97cba236fb625b5 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Wed, 22 Nov 2023 08:10:42 +0100
Subject: [PATCH] Feature/extend personal finance tools pages 20231120 (#2678)

* Improve tags

* Add Compound Planning

* Add Whal

* Add De.Fi

* Add Tiller

* Add Empower
---
 apps/api/src/assets/sitemap.xml               | 80 +++++++++++++++++++
 .../middlewares/html-template.middleware.ts   |  3 +
 .../product-page-template.html                | 19 +++--
 .../personal-finance-tools/products.ts        | 49 ++++++++++++
 .../compound-planning-page.component.ts       | 31 +++++++
 .../products/de.fi-page.component.ts          | 31 +++++++
 .../products/empower-page.component.ts        | 31 +++++++
 .../products/tiller-page.component.ts         | 31 +++++++
 .../products/whal-page.component.ts           | 31 +++++++
 9 files changed, 301 insertions(+), 5 deletions(-)
 create mode 100644 apps/client/src/app/pages/resources/personal-finance-tools/products/compound-planning-page.component.ts
 create mode 100644 apps/client/src/app/pages/resources/personal-finance-tools/products/de.fi-page.component.ts
 create mode 100644 apps/client/src/app/pages/resources/personal-finance-tools/products/empower-page.component.ts
 create mode 100644 apps/client/src/app/pages/resources/personal-finance-tools/products/tiller-page.component.ts
 create mode 100644 apps/client/src/app/pages/resources/personal-finance-tools/products/whal-page.component.ts

diff --git a/apps/api/src/assets/sitemap.xml b/apps/api/src/assets/sitemap.xml
index 7ea779053..7e2b64cfc 100644
--- a/apps/api/src/assets/sitemap.xml
+++ b/apps/api/src/assets/sitemap.xml
@@ -82,10 +82,18 @@
     <loc>https://ghostfol.io/de/ressourcen/personal-finance-tools/open-source-alternative-zu-capmon</loc>
     <lastmod>${currentDate}T00:00:00+00:00</lastmod>
   </url>
+  <url>
+    <loc>https://ghostfol.io/de/ressourcen/personal-finance-tools/open-source-alternative-zu-compound-planning</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
   <url>
     <loc>https://ghostfol.io/de/ressourcen/personal-finance-tools/open-source-alternative-zu-copilot-money</loc>
     <lastmod>${currentDate}T00:00:00+00:00</lastmod>
   </url>
+  <url>
+    <loc>https://ghostfol.io/de/ressourcen/personal-finance-tools/open-source-alternative-zu-de.fi</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
   <url>
     <loc>https://ghostfol.io/de/ressourcen/personal-finance-tools/open-source-alternative-zu-delta</loc>
     <lastmod>${currentDate}T00:00:00+00:00</lastmod>
@@ -94,6 +102,10 @@
     <loc>https://ghostfol.io/de/ressourcen/personal-finance-tools/open-source-alternative-zu-divvydiary</loc>
     <lastmod>${currentDate}T00:00:00+00:00</lastmod>
   </url>
+  <url>
+    <loc>https://ghostfol.io/de/ressourcen/personal-finance-tools/open-source-alternative-zu-empower</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
   <url>
     <loc>https://ghostfol.io/de/ressourcen/personal-finance-tools/open-source-alternative-zu-exirio</loc>
     <lastmod>${currentDate}T00:00:00+00:00</lastmod>
@@ -202,6 +214,10 @@
     <loc>https://ghostfol.io/de/ressourcen/personal-finance-tools/open-source-alternative-zu-sumio</loc>
     <lastmod>${currentDate}T00:00:00+00:00</lastmod>
   </url>
+  <url>
+    <loc>https://ghostfol.io/de/ressourcen/personal-finance-tools/open-source-alternative-zu-tiller</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
   <url>
     <loc>https://ghostfol.io/de/ressourcen/personal-finance-tools/open-source-alternative-zu-utluna</loc>
     <lastmod>${currentDate}T00:00:00+00:00</lastmod>
@@ -214,6 +230,10 @@
     <loc>https://ghostfol.io/de/ressourcen/personal-finance-tools/open-source-alternative-zu-wealthica</loc>
     <lastmod>${currentDate}T00:00:00+00:00</lastmod>
   </url>
+  <url>
+    <loc>https://ghostfol.io/de/ressourcen/personal-finance-tools/open-source-alternative-zu-whal</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
   <url>
     <loc>https://ghostfol.io/de/ressourcen/personal-finance-tools/open-source-alternative-zu-yeekatee</loc>
     <lastmod>${currentDate}T00:00:00+00:00</lastmod>
@@ -396,10 +416,18 @@
     <loc>https://ghostfol.io/en/resources/personal-finance-tools/open-source-alternative-to-capmon</loc>
     <lastmod>${currentDate}T00:00:00+00:00</lastmod>
   </url>
+  <url>
+    <loc>https://ghostfol.io/en/resources/personal-finance-tools/open-source-alternative-to-compound-planning</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
   <url>
     <loc>https://ghostfol.io/en/resources/personal-finance-tools/open-source-alternative-to-copilot-money</loc>
     <lastmod>${currentDate}T00:00:00+00:00</lastmod>
   </url>
+  <url>
+    <loc>https://ghostfol.io/en/resources/personal-finance-tools/open-source-alternative-to-de.fi</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
   <url>
     <loc>https://ghostfol.io/en/resources/personal-finance-tools/open-source-alternative-to-delta</loc>
     <lastmod>${currentDate}T00:00:00+00:00</lastmod>
@@ -408,6 +436,10 @@
     <loc>https://ghostfol.io/en/resources/personal-finance-tools/open-source-alternative-to-divvydiary</loc>
     <lastmod>${currentDate}T00:00:00+00:00</lastmod>
   </url>
+  <url>
+    <loc>https://ghostfol.io/en/resources/personal-finance-tools/open-source-alternative-to-empower</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
   <url>
     <loc>https://ghostfol.io/en/resources/personal-finance-tools/open-source-alternative-to-exirio</loc>
     <lastmod>${currentDate}T00:00:00+00:00</lastmod>
@@ -516,6 +548,10 @@
     <loc>https://ghostfol.io/en/resources/personal-finance-tools/open-source-alternative-to-sumio</loc>
     <lastmod>${currentDate}T00:00:00+00:00</lastmod>
   </url>
+  <url>
+    <loc>https://ghostfol.io/en/resources/personal-finance-tools/open-source-alternative-to-tiller</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
   <url>
     <loc>https://ghostfol.io/en/resources/personal-finance-tools/open-source-alternative-to-utluna</loc>
     <lastmod>${currentDate}T00:00:00+00:00</lastmod>
@@ -528,6 +564,10 @@
     <loc>https://ghostfol.io/en/resources/personal-finance-tools/open-source-alternative-to-wealthica</loc>
     <lastmod>${currentDate}T00:00:00+00:00</lastmod>
   </url>
+  <url>
+    <loc>https://ghostfol.io/en/resources/personal-finance-tools/open-source-alternative-to-whal</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
   <url>
     <loc>https://ghostfol.io/en/resources/personal-finance-tools/open-source-alternative-to-yeekatee</loc>
     <lastmod>${currentDate}T00:00:00+00:00</lastmod>
@@ -730,10 +770,18 @@
     <loc>https://ghostfol.io/it/risorse/personal-finance-tools/alternativa-open-source-a-capmon</loc>
     <lastmod>${currentDate}T00:00:00+00:00</lastmod>
   </url>
+  <url>
+    <loc>https://ghostfol.io/it/risorse/personal-finance-tools/alternativa-open-source-a-compound-planning</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
   <url>
     <loc>https://ghostfol.io/it/risorse/personal-finance-tools/alternativa-open-source-a-copilot-money</loc>
     <lastmod>${currentDate}T00:00:00+00:00</lastmod>
   </url>
+  <url>
+    <loc>https://ghostfol.io/it/risorse/personal-finance-tools/alternativa-open-source-a-de.fi</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
   <url>
     <loc>https://ghostfol.io/it/risorse/personal-finance-tools/alternativa-open-source-a-delta</loc>
     <lastmod>${currentDate}T00:00:00+00:00</lastmod>
@@ -742,6 +790,10 @@
     <loc>https://ghostfol.io/it/risorse/personal-finance-tools/alternativa-open-source-a-divvydiary</loc>
     <lastmod>${currentDate}T00:00:00+00:00</lastmod>
   </url>
+  <url>
+    <loc>https://ghostfol.io/it/risorse/personal-finance-tools/alternativa-open-source-a-empower</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
   <url>
     <loc>https://ghostfol.io/it/risorse/personal-finance-tools/alternativa-open-source-a-exirio</loc>
     <lastmod>${currentDate}T00:00:00+00:00</lastmod>
@@ -850,6 +902,10 @@
     <loc>https://ghostfol.io/it/risorse/personal-finance-tools/alternativa-open-source-a-sumio</loc>
     <lastmod>${currentDate}T00:00:00+00:00</lastmod>
   </url>
+  <url>
+    <loc>https://ghostfol.io/it/risorse/personal-finance-tools/alternativa-open-source-a-tiller</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
   <url>
     <loc>https://ghostfol.io/it/risorse/personal-finance-tools/alternativa-open-source-a-utluna</loc>
     <lastmod>${currentDate}T00:00:00+00:00</lastmod>
@@ -862,6 +918,10 @@
     <loc>https://ghostfol.io/it/risorse/personal-finance-tools/alternativa-open-source-a-wealthica</loc>
     <lastmod>${currentDate}T00:00:00+00:00</lastmod>
   </url>
+  <url>
+    <loc>https://ghostfol.io/it/risorse/personal-finance-tools/alternativa-open-source-a-whal</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
   <url>
     <loc>https://ghostfol.io/it/risorse/personal-finance-tools/alternativa-open-source-a-yeekatee</loc>
     <lastmod>${currentDate}T00:00:00+00:00</lastmod>
@@ -910,10 +970,18 @@
     <loc>https://ghostfol.io/nl/bronnen/personal-finance-tools/open-source-alternatief-voor-capmon</loc>
     <lastmod>${currentDate}T00:00:00+00:00</lastmod>
   </url>
+  <url>
+    <loc>https://ghostfol.io/nl/bronnen/personal-finance-tools/open-source-alternatief-voor-compound-planning</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
   <url>
     <loc>https://ghostfol.io/nl/bronnen/personal-finance-tools/open-source-alternatief-voor-copilot-money</loc>
     <lastmod>${currentDate}T00:00:00+00:00</lastmod>
   </url>
+  <url>
+    <loc>https://ghostfol.io/nl/bronnen/personal-finance-tools/open-source-alternatief-voor-de.fi</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
   <url>
     <loc>https://ghostfol.io/nl/bronnen/personal-finance-tools/open-source-alternatief-voor-delta</loc>
     <lastmod>${currentDate}T00:00:00+00:00</lastmod>
@@ -922,6 +990,10 @@
     <loc>https://ghostfol.io/nl/bronnen/personal-finance-tools/open-source-alternatief-voor-divvydiary</loc>
     <lastmod>${currentDate}T00:00:00+00:00</lastmod>
   </url>
+  <url>
+    <loc>https://ghostfol.io/nl/bronnen/personal-finance-tools/open-source-alternatief-voor-empower</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
   <url>
     <loc>https://ghostfol.io/nl/bronnen/personal-finance-tools/open-source-alternatief-voor-exirio</loc>
     <lastmod>${currentDate}T00:00:00+00:00</lastmod>
@@ -1030,6 +1102,10 @@
     <loc>https://ghostfol.io/nl/bronnen/personal-finance-tools/open-source-alternatief-voor-sumio</loc>
     <lastmod>${currentDate}T00:00:00+00:00</lastmod>
   </url>
+  <url>
+    <loc>https://ghostfol.io/nl/bronnen/personal-finance-tools/open-source-alternatief-voor-tiller</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
   <url>
     <loc>https://ghostfol.io/nl/bronnen/personal-finance-tools/open-source-alternatief-voor-utluna</loc>
     <lastmod>${currentDate}T00:00:00+00:00</lastmod>
@@ -1042,6 +1118,10 @@
     <loc>https://ghostfol.io/nl/bronnen/personal-finance-tools/open-source-alternatief-voor-wealthica</loc>
     <lastmod>${currentDate}T00:00:00+00:00</lastmod>
   </url>
+  <url>
+    <loc>https://ghostfol.io/nl/bronnen/personal-finance-tools/open-source-alternatief-voor-whal</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
   <url>
     <loc>https://ghostfol.io/nl/bronnen/personal-finance-tools/open-source-alternatief-voor-yeekatee</loc>
     <lastmod>${currentDate}T00:00:00+00:00</lastmod>
diff --git a/apps/api/src/middlewares/html-template.middleware.ts b/apps/api/src/middlewares/html-template.middleware.ts
index e691bc89d..ac2551a51 100644
--- a/apps/api/src/middlewares/html-template.middleware.ts
+++ b/apps/api/src/middlewares/html-template.middleware.ts
@@ -91,6 +91,9 @@ const isFileRequest = (filename: string) => {
     return true;
   } else if (
     filename.includes('auth/ey') ||
+    filename.includes(
+      'personal-finance-tools/open-source-alternative-to-de.fi'
+    ) ||
     filename.includes(
       'personal-finance-tools/open-source-alternative-to-markets.sh'
     )
diff --git a/apps/client/src/app/pages/resources/personal-finance-tools/product-page-template.html b/apps/client/src/app/pages/resources/personal-finance-tools/product-page-template.html
index 0522915f5..a2daeaf24 100644
--- a/apps/client/src/app/pages/resources/personal-finance-tools/product-page-template.html
+++ b/apps/client/src/app/pages/resources/personal-finance-tools/product-page-template.html
@@ -230,23 +230,26 @@
         <section class="mb-4">
           <ul class="list-inline">
             <li class="list-inline-item">
-              <span class="badge badge-light">{{ product1.name }}</span>
+              <span class="badge badge-light">Alternative</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">{{ product2.name }}</span>
+              <span class="badge badge-light">App</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Alternative</span>
+              <span class="badge badge-light">Budgeting</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">App</span>
+              <span class="badge badge-light">Community</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Community</span>
+              <span class="badge badge-light">Family Office</span>
             </li>
             <li class="list-inline-item">
               <span class="badge badge-light">Fintech</span>
             </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">{{ product1.name }}</span>
+            </li>
             <li class="list-inline-item">
               <span class="badge badge-light">Investment</span>
             </li>
@@ -280,9 +283,15 @@
             <li class="list-inline-item">
               <span class="badge badge-light">Wealth</span>
             </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">WealthTech</span>
+            </li>
             <li class="list-inline-item">
               <span class="badge badge-light">Wealth Management</span>
             </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">{{ product2.name }}</span>
+            </li>
           </ul>
         </section>
         <nav aria-label="breadcrumb">
diff --git a/apps/client/src/app/pages/resources/personal-finance-tools/products.ts b/apps/client/src/app/pages/resources/personal-finance-tools/products.ts
index 0cd32adc3..00e51a273 100644
--- a/apps/client/src/app/pages/resources/personal-finance-tools/products.ts
+++ b/apps/client/src/app/pages/resources/personal-finance-tools/products.ts
@@ -6,10 +6,13 @@ import { BasilFinancePageComponent } from './products/basil-finance-page.compone
 import { BeanvestPageComponent } from './products/beanvest-page.component';
 import { CapitallyPageComponent } from './products/capitally-page.component';
 import { CapMonPageComponent } from './products/capmon-page.component';
+import { CompoundPlanningPageComponent } from './products/compound-planning-page.component';
 import { CopilotMoneyPageComponent } from './products/copilot-money-page.component';
+import { DeFiPageComponent } from './products/de.fi-page.component';
 import { DeltaPageComponent } from './products/delta-page.component';
 import { DivvyDiaryPageComponent } from './products/divvydiary-page.component';
 import { EightFiguresPageComponent } from './products/eightfigures-page.component';
+import { EmpowerPageComponent } from './products/empower-page.component';
 import { ExirioPageComponent } from './products/exirio-page.component';
 import { FinaryPageComponent } from './products/finary-page.component';
 import { FinWisePageComponent } from './products/finwise-page.component';
@@ -37,9 +40,11 @@ import { SnowballAnalyticsPageComponent } from './products/snowball-analytics-pa
 import { StocklePageComponent } from './products/stockle-page.component';
 import { StockMarketEyePageComponent } from './products/stockmarketeye-page.component';
 import { SumioPageComponent } from './products/sumio-page.component';
+import { TillerPageComponent } from './products/tiller-page.component';
 import { UtlunaPageComponent } from './products/utluna-page.component';
 import { VyzerPageComponent } from './products/vyzer-page.component';
 import { WealthicaPageComponent } from './products/wealthica-page.component';
+import { WhalPageComponent } from './products/whal-page.component';
 import { YeekateePageComponent } from './products/yeekatee-page.component';
 import { YnabPageComponent } from './products/ynab-page.component';
 
@@ -125,6 +130,14 @@ export const products: Product[] = [
     note: 'CapMon.org has discontinued in 2023',
     slogan: 'Next Generation Assets Tracking'
   },
+  {
+    component: CompoundPlanningPageComponent,
+    founded: 2019,
+    key: 'compound-planning',
+    name: 'Compound Planning',
+    origin: $localize`United States`,
+    slogan: 'Modern Wealth & Investment Management'
+  },
   {
     component: CopilotMoneyPageComponent,
     founded: 2019,
@@ -136,6 +149,14 @@ export const products: Product[] = [
     pricingPerYear: '$70',
     slogan: 'Do money better with Copilot'
   },
+  {
+    component: DeFiPageComponent,
+    founded: 2020,
+    key: 'de.fi',
+    languages: ['English'],
+    name: 'De.Fi',
+    slogan: 'DeFi Portfolio Tracker'
+  },
   {
     component: DeltaPageComponent,
     founded: 2017,
@@ -159,6 +180,16 @@ export const products: Product[] = [
     pricingPerYear: '€65',
     slogan: 'Your personal Dividend Calendar'
   },
+  {
+    component: EmpowerPageComponent,
+    founded: 2009,
+    hasSelfHostingAbility: false,
+    key: 'empower',
+    name: 'Empower',
+    note: 'Originally named as Personal Capital',
+    origin: $localize`United States`,
+    slogan: 'Get answers to your money questions'
+  },
   {
     alias: '8figures',
     component: EightFiguresPageComponent,
@@ -455,6 +486,17 @@ export const products: Product[] = [
     pricingPerYear: '$20',
     slogan: 'Sum up and build your wealth.'
   },
+  {
+    component: TillerPageComponent,
+    founded: 2016,
+    hasFreePlan: false,
+    key: 'tiller',
+    name: 'Tiller',
+    origin: $localize`United States`,
+    pricingPerYear: '$79',
+    slogan:
+      'Your financial life in a spreadsheet, automatically updated each day'
+  },
   {
     component: UtlunaPageComponent,
     hasFreePlan: true,
@@ -489,6 +531,13 @@ export const products: Product[] = [
     pricingPerYear: '$50',
     slogan: 'See all your investments in one place'
   },
+  {
+    component: WhalPageComponent,
+    key: 'whal',
+    name: 'Whal',
+    origin: $localize`United States`,
+    slogan: 'Manage your investments in one place'
+  },
   {
     component: YeekateePageComponent,
     founded: 2021,
diff --git a/apps/client/src/app/pages/resources/personal-finance-tools/products/compound-planning-page.component.ts b/apps/client/src/app/pages/resources/personal-finance-tools/products/compound-planning-page.component.ts
new file mode 100644
index 000000000..03a7317c4
--- /dev/null
+++ b/apps/client/src/app/pages/resources/personal-finance-tools/products/compound-planning-page.component.ts
@@ -0,0 +1,31 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { RouterModule } from '@angular/router';
+
+import { products } from '../products';
+
+@Component({
+  host: { class: 'page' },
+  imports: [CommonModule, MatButtonModule, RouterModule],
+  selector: 'gf-compound-planning-page',
+  standalone: true,
+  styleUrls: ['../product-page-template.scss'],
+  templateUrl: '../product-page-template.html'
+})
+export class CompoundPlanningPageComponent {
+  public product1 = products.find(({ key }) => {
+    return key === 'ghostfolio';
+  });
+
+  public product2 = products.find(({ key }) => {
+    return key === 'compound-planning';
+  });
+
+  public routerLinkAbout = ['/' + $localize`about`];
+  public routerLinkFeatures = ['/' + $localize`features`];
+  public routerLinkResourcesPersonalFinanceTools = [
+    '/' + $localize`resources`,
+    'personal-finance-tools'
+  ];
+}
diff --git a/apps/client/src/app/pages/resources/personal-finance-tools/products/de.fi-page.component.ts b/apps/client/src/app/pages/resources/personal-finance-tools/products/de.fi-page.component.ts
new file mode 100644
index 000000000..7ece232d1
--- /dev/null
+++ b/apps/client/src/app/pages/resources/personal-finance-tools/products/de.fi-page.component.ts
@@ -0,0 +1,31 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { RouterModule } from '@angular/router';
+
+import { products } from '../products';
+
+@Component({
+  host: { class: 'page' },
+  imports: [CommonModule, MatButtonModule, RouterModule],
+  selector: 'gf-de-fi-page',
+  standalone: true,
+  styleUrls: ['../product-page-template.scss'],
+  templateUrl: '../product-page-template.html'
+})
+export class DeFiPageComponent {
+  public product1 = products.find(({ key }) => {
+    return key === 'ghostfolio';
+  });
+
+  public product2 = products.find(({ key }) => {
+    return key === 'de.fi';
+  });
+
+  public routerLinkAbout = ['/' + $localize`about`];
+  public routerLinkFeatures = ['/' + $localize`features`];
+  public routerLinkResourcesPersonalFinanceTools = [
+    '/' + $localize`resources`,
+    'personal-finance-tools'
+  ];
+}
diff --git a/apps/client/src/app/pages/resources/personal-finance-tools/products/empower-page.component.ts b/apps/client/src/app/pages/resources/personal-finance-tools/products/empower-page.component.ts
new file mode 100644
index 000000000..0abdc5fbf
--- /dev/null
+++ b/apps/client/src/app/pages/resources/personal-finance-tools/products/empower-page.component.ts
@@ -0,0 +1,31 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { RouterModule } from '@angular/router';
+
+import { products } from '../products';
+
+@Component({
+  host: { class: 'page' },
+  imports: [CommonModule, MatButtonModule, RouterModule],
+  selector: 'gf-empower-page',
+  standalone: true,
+  styleUrls: ['../product-page-template.scss'],
+  templateUrl: '../product-page-template.html'
+})
+export class EmpowerPageComponent {
+  public product1 = products.find(({ key }) => {
+    return key === 'ghostfolio';
+  });
+
+  public product2 = products.find(({ key }) => {
+    return key === 'empower';
+  });
+
+  public routerLinkAbout = ['/' + $localize`about`];
+  public routerLinkFeatures = ['/' + $localize`features`];
+  public routerLinkResourcesPersonalFinanceTools = [
+    '/' + $localize`resources`,
+    'personal-finance-tools'
+  ];
+}
diff --git a/apps/client/src/app/pages/resources/personal-finance-tools/products/tiller-page.component.ts b/apps/client/src/app/pages/resources/personal-finance-tools/products/tiller-page.component.ts
new file mode 100644
index 000000000..8f2218434
--- /dev/null
+++ b/apps/client/src/app/pages/resources/personal-finance-tools/products/tiller-page.component.ts
@@ -0,0 +1,31 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { RouterModule } from '@angular/router';
+
+import { products } from '../products';
+
+@Component({
+  host: { class: 'page' },
+  imports: [CommonModule, MatButtonModule, RouterModule],
+  selector: 'gf-tiller-page',
+  standalone: true,
+  styleUrls: ['../product-page-template.scss'],
+  templateUrl: '../product-page-template.html'
+})
+export class TillerPageComponent {
+  public product1 = products.find(({ key }) => {
+    return key === 'ghostfolio';
+  });
+
+  public product2 = products.find(({ key }) => {
+    return key === 'tiller';
+  });
+
+  public routerLinkAbout = ['/' + $localize`about`];
+  public routerLinkFeatures = ['/' + $localize`features`];
+  public routerLinkResourcesPersonalFinanceTools = [
+    '/' + $localize`resources`,
+    'personal-finance-tools'
+  ];
+}
diff --git a/apps/client/src/app/pages/resources/personal-finance-tools/products/whal-page.component.ts b/apps/client/src/app/pages/resources/personal-finance-tools/products/whal-page.component.ts
new file mode 100644
index 000000000..c1a2ddc98
--- /dev/null
+++ b/apps/client/src/app/pages/resources/personal-finance-tools/products/whal-page.component.ts
@@ -0,0 +1,31 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { RouterModule } from '@angular/router';
+
+import { products } from '../products';
+
+@Component({
+  host: { class: 'page' },
+  imports: [CommonModule, MatButtonModule, RouterModule],
+  selector: 'gf-whal-page',
+  standalone: true,
+  styleUrls: ['../product-page-template.scss'],
+  templateUrl: '../product-page-template.html'
+})
+export class WhalPageComponent {
+  public product1 = products.find(({ key }) => {
+    return key === 'ghostfolio';
+  });
+
+  public product2 = products.find(({ key }) => {
+    return key === 'whal';
+  });
+
+  public routerLinkAbout = ['/' + $localize`about`];
+  public routerLinkFeatures = ['/' + $localize`features`];
+  public routerLinkResourcesPersonalFinanceTools = [
+    '/' + $localize`resources`,
+    'personal-finance-tools'
+  ];
+}