From 8c80086da168f9eaf5be240852ba3a2656729bdd Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Tue, 28 Oct 2025 18:31:16 +0100
Subject: [PATCH] Bugfix/fix typography hierarchy in resources pages (#5863)

* Fix hierarchy
---
 .../glossary/resources-glossary.component.html | 18 +++++++++---------
 .../guides/resources-guides.component.html     |  4 ++--
 .../markets/resources-markets.component.html   |  8 ++++----
 .../overview/resources-overview.component.html |  2 +-
 4 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/apps/client/src/app/pages/resources/glossary/resources-glossary.component.html b/apps/client/src/app/pages/resources/glossary/resources-glossary.component.html
index b65054bba..fa74cd084 100644
--- a/apps/client/src/app/pages/resources/glossary/resources-glossary.component.html
+++ b/apps/client/src/app/pages/resources/glossary/resources-glossary.component.html
@@ -5,7 +5,7 @@
       <div>
         <div class="mb-4 media">
           <div class="media-body">
-            <h3 class="h5 mt-0">Buy and Hold</h3>
+            <h2 class="h5 mb-1 mt-0">Buy and Hold</h2>
             <div class="mb-1">
               Buy and hold is a passive investment strategy where you buy assets
               and hold them for a long period regardless of fluctuations in the
@@ -22,7 +22,7 @@
         </div>
         <div class="mb-4 media">
           <div class="media-body">
-            <h3 class="h5 mt-0">Deflation</h3>
+            <h2 class="h5 mb-1 mt-0">Deflation</h2>
             <div class="mb-1">
               Deflation is a decrease of the general price level for goods and
               services in an economy over a period of time.
@@ -38,7 +38,7 @@
         </div>
         <div class="mb-4 media">
           <div class="media-body">
-            <h3 class="h5 mt-0">Dollar-Cost Averaging (DCA)</h3>
+            <h2 class="h5 mb-1 mt-0">Dollar-Cost Averaging (DCA)</h2>
             <div class="mb-1">
               Dollar-cost averaging is an investment strategy where you split
               the total amount to be invested across periodic purchases of a
@@ -56,7 +56,7 @@
         </div>
         <div class="mb-4 media">
           <div class="media-body">
-            <h3 class="h5 mt-0">Financial Independence</h3>
+            <h2 class="h5 mb-1 mt-0">Financial Independence</h2>
             <div class="mb-1">
               Financial independence is the status of having enough income, for
               example with a passive income like dividends, to cover your living
@@ -73,7 +73,7 @@
         </div>
         <div class="mb-4 media">
           <div class="media-body">
-            <h3 class="h5 mt-0">FIRE</h3>
+            <h2 class="h5 mb-1 mt-0">FIRE</h2>
             <div class="mb-1">
               FIRE is a movement that promotes saving and investing to achieve
               financial independence and early retirement.
@@ -85,7 +85,7 @@
         </div>
         <div class="mb-4 media">
           <div class="media-body">
-            <h3 class="h5 mt-0">Inflation</h3>
+            <h2 class="h5 mb-1 mt-0">Inflation</h2>
             <div class="mb-1">
               Inflation is an increase of the general price level for goods and
               services in an economy over a period of time.
@@ -102,7 +102,7 @@
         @if (hasPermissionForSubscription) {
           <div class="mb-4 media">
             <div class="media-body">
-              <h3 class="h5 mt-0">Personal Finance Tools</h3>
+              <h2 class="h5 mb-1 mt-0">Personal Finance Tools</h2>
               <div class="mb-1">
                 Personal finance tools are software applications that help
                 manage your money, track expenses, set budgets, monitor
@@ -118,7 +118,7 @@
         }
         <div class="mb-4 media">
           <div class="media-body">
-            <h3 class="h5 mt-0">Stagflation</h3>
+            <h2 class="h5 mb-1 mt-0">Stagflation</h2>
             <div class="mb-1">
               Stagflation describes a situation in which there is a stagnant
               economy with high unemployment and high inflation.
@@ -134,7 +134,7 @@
         </div>
         <div class="mb-4 media">
           <div class="media-body">
-            <h3 class="h5 mt-0">Stealth Wealth</h3>
+            <h2 class="h5 mb-1 mt-0">Stealth Wealth</h2>
             <div class="mb-1">
               Stealth wealth is a lifestyle choice where you don’t openly show
               off your wealth, but instead live quietly to maintain privacy and
diff --git a/apps/client/src/app/pages/resources/guides/resources-guides.component.html b/apps/client/src/app/pages/resources/guides/resources-guides.component.html
index 3bd8efec6..54b3d1f3e 100644
--- a/apps/client/src/app/pages/resources/guides/resources-guides.component.html
+++ b/apps/client/src/app/pages/resources/guides/resources-guides.component.html
@@ -5,7 +5,7 @@
       <div class="mb-5">
         <div class="mb-4 media">
           <div class="media-body">
-            <h3 class="h5 mt-0">Boringly Getting Rich</h3>
+            <h2 class="h5 mb-1 mt-0">Boringly Getting Rich</h2>
             <div class="mb-1">
               The <i>Boringly Getting Rich</i> guide supports you to get started
               with investing. It introduces a strategy utilizing a broadly
@@ -21,7 +21,7 @@
         </div>
         <div class="mb-4 media">
           <div class="media-body">
-            <h3 class="h5 mt-0">How do I get my finances in order?</h3>
+            <h2 class="h5 mb-1 mt-0">How do I get my finances in order?</h2>
             <div class="mb-1">
               Before you can think of long-term investing, you have to get your
               finances in order. Learn how you can reach your financial goals
diff --git a/apps/client/src/app/pages/resources/markets/resources-markets.component.html b/apps/client/src/app/pages/resources/markets/resources-markets.component.html
index 74d4bb82b..ce780aedf 100644
--- a/apps/client/src/app/pages/resources/markets/resources-markets.component.html
+++ b/apps/client/src/app/pages/resources/markets/resources-markets.component.html
@@ -3,7 +3,7 @@
   <div class="mb-5">
     <div class="mb-4 media">
       <div class="media-body">
-        <h3 class="h5 mt-0">Crypto Coins Heatmap</h3>
+        <h2 class="h5 mb-1 mt-0">Crypto Coins Heatmap</h2>
         <div class="mb-1">
           With the <i>Crypto Coins Heatmap</i> you can track the daily market
           movements of cryptocurrencies as a visual snapshot.
@@ -17,7 +17,7 @@
     </div>
     <div class="mb-4 media">
       <div class="media-body">
-        <h3 class="h5 mt-0">Fear & Greed Index</h3>
+        <h2 class="h5 mb-1 mt-0">Fear & Greed Index</h2>
         <div class="mb-1">
           The fear and greed index was developed by <i>CNNMoney</i> to measure
           the primary emotions (fear and greed) that influence how much
@@ -32,7 +32,7 @@
     </div>
     <div class="media">
       <div class="mb-4 media">
-        <h3 class="h5 mt-0">Inflation Chart</h3>
+        <h2 class="h5 mb-1 mt-0">Inflation Chart</h2>
         <div class="mb-1">
           <i>Inflation Chart</i> helps you find the intrinsic value of stock
           markets, stock prices, goods and services by adjusting them to the
@@ -48,7 +48,7 @@
     </div>
     <div class="media">
       <div class="media-body">
-        <h3 class="h5 mt-0">Stock Heatmap</h3>
+        <h2 class="h5 mb-1 mt-0">Stock Heatmap</h2>
         <div class="mb-1">
           With the <i>Stock Heatmap</i> you can track the daily market movements
           of stocks as a visual snapshot.
diff --git a/apps/client/src/app/pages/resources/overview/resources-overview.component.html b/apps/client/src/app/pages/resources/overview/resources-overview.component.html
index 39d7c1e62..3a6f18d40 100644
--- a/apps/client/src/app/pages/resources/overview/resources-overview.component.html
+++ b/apps/client/src/app/pages/resources/overview/resources-overview.component.html
@@ -5,7 +5,7 @@
       <div class="overview-list">
         @for (item of overviewItems; track item) {
           <div class="mb-4">
-            <h3 class="h5 mt-0">{{ item.title }}</h3>
+            <h2 class="h5 mb-1 mt-0">{{ item.title }}</h2>
             <p class="mb-1">{{ item.description }}</p>
             <a [routerLink]="item.routerLink">Explore {{ item.title }} →</a>
           </div>