From c25f5324873df39854ae3c0bb7e47845933bf880 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Tue, 11 Jul 2023 21:40:45 +0200
Subject: [PATCH] Improve product pages (#2143)

---
 .../product-page-template.html                | 71 ++++++++++++++-----
 .../product-page-template.scss                |  8 +++
 .../personal-finance-tools/products.ts        | 30 +++++---
 libs/common/src/lib/interfaces/product.ts     |  3 +-
 4 files changed, 83 insertions(+), 29 deletions(-)

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 a2e1b3955..1bc19ec7b 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
@@ -21,9 +21,15 @@
             financial future.
           </p>
           <p>
-            Ghostfolio is open source software (OSS) where a community of
-            developers, contributors, and enthusiasts collaborate to enhance its
-            capabilities, security, and user experience.
+            Ghostfolio is an open source software (OSS), providing a
+            cost-effective alternative to {{ product2.name }} making it
+            particularly suitable for individuals on a tight budget, such as
+            those
+            <a href="../en/blog/2023/07/exploring-the-path-to-fire"
+              >pursuing Financial Independence, Retire Early (FIRE)</a
+            >. By leveraging the collective efforts of a community of developers
+            and personal finance enthusiasts, Ghostfolio continuously enhances
+            its capabilities, security, and user experience.
           </p>
           <p>
             Let’s dive deeper into the detailed comparison table below to gain a
@@ -69,8 +75,18 @@
                 <td class="mat-mdc-cell px-3 py-2 text-right" i18n>
                   Available in
                 </td>
-                <td class="mat-mdc-cell px-1 py-2">{{ product1.languages }}</td>
-                <td class="mat-mdc-cell px-1 py-2">{{ product2.languages }}</td>
+                <td class="mat-mdc-cell px-1 py-2">
+                  <ng-container
+                    *ngFor="let language of product1.languages; last as isLast"
+                    >{{ language }}{{ isLast ? '' : ', ' }}</ng-container
+                  >
+                </td>
+                <td class="mat-mdc-cell px-1 py-2">
+                  <ng-container
+                    *ngFor="let language of product2.languages; last as isLast"
+                    >{{ language }}{{ isLast ? '' : ', ' }}</ng-container
+                  >
+                </td>
               </tr>
               <tr class="mat-mdc-row">
                 <td class="mat-mdc-cell px-3 py-2 text-right" i18n>
@@ -118,6 +134,25 @@
                   >
                 </td>
               </tr>
+              <tr class="mat-mdc-row">
+                <td class="mat-mdc-cell px-3 py-2 text-right" i18n>
+                  Use anonymously
+                </td>
+                <td class="mat-mdc-cell px-1 py-2">
+                  <ng-container *ngIf="product1.useAnonymously === true" i18n
+                    >✅ Yes</ng-container
+                  ><ng-container *ngIf="product1.useAnonymously === false" i18n
+                    >❌ No</ng-container
+                  >
+                </td>
+                <td class="mat-mdc-cell px-1 py-2">
+                  <ng-container *ngIf="product2.useAnonymously === true" i18n
+                    >✅ Yes</ng-container
+                  ><ng-container *ngIf="product2.useAnonymously === false" i18n
+                    >❌ No</ng-container
+                  >
+                </td>
+              </tr>
               <tr class="mat-mdc-row">
                 <td class="mat-mdc-cell px-3 py-2 text-right" i18n>
                   Free Plan
@@ -157,7 +192,19 @@
             </tbody>
           </table>
         </section>
-        <section class="mb-4 py-3">
+        <section class="mb-4">
+          <p>
+            Please note that the information provided is based on our
+            independent research and analysis. This website is not affiliated
+            with {{ product2.name }} or any other product mentioned in the
+            comparison. As the landscape of personal finance tools evolves, it
+            is essential to verify any specific details or changes directly from
+            the respective product page. Data needs a refresh? Help us maintain
+            accurate data on
+            <a href="https://github.com/ghostfolio/ghostfolio">GitHub</a>.
+          </p>
+        </section>
+        <section class="call-to-action mb-4 py-3 rounded">
           <h2 class="h4 mb-0 text-center">
             Ready to take your <strong>investments</strong> to the
             <strong>next level</strong>?
@@ -172,18 +219,6 @@
             </a>
           </div>
         </section>
-        <section class="mb-4">
-          <small>
-            Please note that the information provided is based on our
-            independent research and analysis. This website is not affiliated
-            with {{ product2.name }} or any other product mentioned in the
-            comparison. As the landscape of personal finance tools evolves, it
-            is essential to verify any specific details or changes directly from
-            the respective product page. Data needs a refresh? Help us maintain
-            accurate data on
-            <a href="https://github.com/ghostfolio/ghostfolio">GitHub</a>.
-          </small>
-        </section>
         <section class="mb-4">
           <ul class="list-inline">
             <li class="list-inline-item">
diff --git a/apps/client/src/app/pages/resources/personal-finance-tools/product-page-template.scss b/apps/client/src/app/pages/resources/personal-finance-tools/product-page-template.scss
index 4a8680714..9726e095f 100644
--- a/apps/client/src/app/pages/resources/personal-finance-tools/product-page-template.scss
+++ b/apps/client/src/app/pages/resources/personal-finance-tools/product-page-template.scss
@@ -10,8 +10,16 @@
       color: rgba(var(--palette-primary-300), 1);
     }
   }
+
+  .call-to-action {
+    background-color: rgba(var(--palette-foreground-text), 0.02);
+  }
 }
 
 :host-context(.is-dark-theme) {
   color: rgb(var(--light-primary-text));
+
+  .call-to-action {
+    background-color: rgba(var(--palette-foreground-text-dark), 0.02);
+  }
 }
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 861851baf..2dc29ee1e 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
@@ -33,12 +33,21 @@ export const products: Product[] = [
     hasSelfHostingAbility: true,
     isOpenSource: true,
     key: 'ghostfolio',
-    languages: 'Dutch, English, French, German, Italian, Portuguese, Spanish',
+    languages: [
+      'Dutch',
+      'English',
+      'French',
+      'German',
+      'Italian',
+      'Portuguese',
+      'Spanish'
+    ],
     name: 'Ghostfolio',
     origin: 'Switzerland',
     pricingPerYear: '$19',
     region: 'Global',
-    slogan: 'Open Source Wealth Management'
+    slogan: 'Open Source Wealth Management',
+    useAnonymously: true
   },
   {
     component: AltooPageComponent,
@@ -81,7 +90,7 @@ export const products: Product[] = [
     hasSelfHostingAbility: false,
     isOpenSource: false,
     key: 'divvydiary',
-    languages: 'English, German',
+    languages: ['English', 'German'],
     name: 'DivvyDiary',
     origin: 'Germany',
     pricingPerYear: '€65',
@@ -105,7 +114,7 @@ export const products: Product[] = [
     hasSelfHostingAbility: false,
     isOpenSource: false,
     key: 'folishare',
-    languages: 'English, German',
+    languages: ['English', 'German'],
     name: 'folishare',
     origin: 'Austria',
     pricingPerYear: '$65',
@@ -118,7 +127,7 @@ export const products: Product[] = [
     hasSelfHostingAbility: false,
     isOpenSource: false,
     key: 'getquin',
-    languages: 'English, German',
+    languages: ['English', 'German'],
     name: 'getquin',
     origin: 'Germany',
     pricingPerYear: '€48',
@@ -164,7 +173,7 @@ export const products: Product[] = [
     hasSelfHostingAbility: false,
     isOpenSource: false,
     key: 'maybe-finance',
-    languages: 'English',
+    languages: ['English'],
     name: 'Maybe Finance',
     note: 'Sunset in 2023',
     origin: 'United States',
@@ -212,7 +221,7 @@ export const products: Product[] = [
     hasSelfHostingAbility: false,
     isOpenSource: false,
     key: 'portfolio-dividend-tracker',
-    languages: 'English, Dutch',
+    languages: ['English', 'Dutch'],
     name: 'Portfolio Dividend Tracker',
     origin: 'Netherlands',
     pricingPerYear: '€60',
@@ -225,7 +234,7 @@ export const products: Product[] = [
     hasSelfHostingAbility: false,
     isOpenSource: false,
     key: 'portseido',
-    languages: 'Dutch, English, French, German',
+    languages: ['Dutch', 'English', 'French', 'German'],
     name: 'Portseido',
     origin: 'Thailand',
     pricingPerYear: '$96',
@@ -308,11 +317,12 @@ export const products: Product[] = [
     hasSelfHostingAbility: false,
     isOpenSource: false,
     key: 'utluna',
-    languages: 'English, French, German',
+    languages: ['English', 'French', 'German'],
     name: 'Utluna',
     origin: 'Switzerland',
     pricingPerYear: '$300',
-    slogan: 'Your Portfolio. Revealed.'
+    slogan: 'Your Portfolio. Revealed.',
+    useAnonymously: true
   },
   {
     component: YeekateePageComponent,
diff --git a/libs/common/src/lib/interfaces/product.ts b/libs/common/src/lib/interfaces/product.ts
index 22067b7b7..d488f9f0b 100644
--- a/libs/common/src/lib/interfaces/product.ts
+++ b/libs/common/src/lib/interfaces/product.ts
@@ -5,11 +5,12 @@ export interface Product {
   hasSelfHostingAbility?: boolean;
   isOpenSource: boolean;
   key: string;
-  languages?: string;
+  languages?: string[];
   name: string;
   note?: string;
   origin?: string;
   pricingPerYear?: string;
   region?: string;
   slogan?: string;
+  useAnonymously?: boolean;
 }