Add support for archived product page

apps/client/src/app/pages/resources/personal-finance-tools/product-page.html

@@ -9,6 +9,11 @@
             >&nbsp;<strong>{{ product2.name }}</strong>
           </h1>
         </div>
+        @if (product2.isArchived) {
+          <div class="info-container my-4 p-2 rounded text-center text-muted">
+            <ng-container i18n>This page has been archived.</ng-container>
+          </div>
+        }
         <section class="mb-4">
           <p i18n>
             Are you looking for an open source alternative to

apps/client/src/app/pages/resources/personal-finance-tools/product-page.scss

@@ -11,7 +11,8 @@
     }
   }
 
-  .call-to-action {
+  .call-to-action,
+  .info-container {
     background-color: rgba(var(--palette-foreground-text), 0.02);
   }
 }
@@ -19,7 +20,8 @@
 :host-context(.theme-dark) {
   color: rgb(var(--light-primary-text));
 
-  .call-to-action {
+  .call-to-action,
+  .info-container {
     background-color: rgba(var(--palette-foreground-text-dark), 0.02);
   }
 }

libs/common/src/lib/interfaces/product.ts

@@ -3,6 +3,7 @@ export interface Product {
   founded?: number;
   hasFreePlan?: boolean;
   hasSelfHostingAbility?: boolean;
+  isArchived?: boolean;
   isOpenSource?: boolean;
   key: string;
   languages?: string[];

libs/common/src/lib/personal-finance-tools.ts

@@ -369,6 +369,7 @@ export const personalFinanceTools: Product[] = [
   {
     founded: 2021,
     hasSelfHostingAbility: false,
+    isArchived: true,
     key: 'maybe-finance',
     languages: ['English'],
     name: 'Maybe Finance',
@@ -678,10 +679,13 @@ export const personalFinanceTools: Product[] = [
     slogan: 'Make Smarter Investments'
   },
   {
+    founded: 2024,
     hasSelfHostingAbility: true,
+    isArchived: true,
     key: 'wealthfolio',
     languages: ['English'],
     name: 'Wealthfolio',
+    origin: 'Canada',
     slogan: 'Desktop Investment Tracker'
   },
   {