Feature/add boringly getting rich guide to resources page (#836)

* Add "Boringly Getting Rich" guide

* Update changelog

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - Added support to export a single future activity (draft) as an `.ics` file
+- Added the _Boringly Getting Rich_ guide to the resources section
 
 ## 1.137.0 - 15.04.2022
 

apps/client/src/app/pages/resources/resources-page.html

@@ -1,18 +1,35 @@
 <div class="container">
   <div class="row">
     <div class="col">
-      <h3 class="d-flex justify-content-center mb-3" i18n>Resources</h3>
-      <mat-card class="mb-3">
-        <mat-card-content>
-          <h4 class="mb-3">Market</h4>
+      <h1 class="d-flex h3 justify-content-center mb-3" i18n>Resources</h1>
+      <h2 class="h4 mb-3">Guides</h2>
       <div class="mb-5">
         <div class="mb-4 media">
           <div class="media-body">
-                <h5 class="mt-0">Fear & Greed Index</h5>
+            <h3 class="h5 mt-0">Boringly Getting Rich</h3>
+            <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
+              diversified, low-cost portfolio excluding the risks of individual
+              stocks.
+            </div>
+            <div>
+              <a href="https://herget.me/investing-guide" target="_blank"
+                >Boringly Getting Rich →</a
+              >
+            </div>
+          </div>
+        </div>
+      </div>
+      <h2 class="h4 mb-3">Market</h2>
+      <div class="mb-5">
+        <div class="mb-4 media">
+          <div class="media-body">
+            <h3 class="h5 mt-0">Fear & Greed Index</h3>
             <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 investors are willing to pay for stocks.
+              measure the primary emotions (fear and greed) that influence how
+              much investors are willing to pay for stocks.
             </div>
             <div>
               <a
@@ -25,12 +42,12 @@
         </div>
         <div class="media">
           <div class="media-body">
-                <h5 class="mt-0">Inflation Chart</h5>
+            <h3 class="h5 mt-0">Inflation Chart</h3>
             <div class="mb-1">
               Inflation Chart helps you find the intrinsic value of stock
-                  markets, stock prices, goods and services by adjusting them to
-                  the amount of the money supply (M0, M1, M2) or price of other
-                  goods (food or oil).
+              markets, stock prices, goods and services by adjusting them to the
+              amount of the money supply (M0, M1, M2) or price of other goods
+              (food or oil).
             </div>
             <div>
               <a href="https://inflationchart.com" target="_blank"
@@ -40,16 +57,15 @@
           </div>
         </div>
       </div>
-          <h4 class="mb-3">Glossary</h4>
+      <h2 class="h4 mb-3">Glossary</h2>
       <div>
         <div class="mb-4 media">
-              <!--<img src="" class="mr-3" />-->
           <div class="media-body">
-                <h5 class="mt-0">Buy and Hold</h5>
+            <h3 class="h5 mt-0">Buy and Hold</h3>
             <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 market.
+              Buy and hold is a passive investment strategy where you buy assets
+              and hold them for a long period regardless of fluctuations in the
+              market.
             </div>
             <div>
               <a
@@ -61,14 +77,13 @@
           </div>
         </div>
         <div class="mb-4 media">
-              <!--<img src="" class="mr-3" />-->
           <div class="media-body">
-                <h5 class="mt-0">Dollar-Cost Averaging (DCA)</h5>
+            <h3 class="h5 mt-0">Dollar-Cost Averaging (DCA)</h3>
             <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 target asset to reduce the impact of volatility
-                  on the overall purchase.
+              Dollar-cost averaging is an investment strategy where you split
+              the total amount to be invested across periodic purchases of a
+              target asset to reduce the impact of volatility on the overall
+              purchase.
             </div>
             <div>
               <a
@@ -80,13 +95,12 @@
           </div>
         </div>
         <div class="media">
-              <!--<img src="" class="mr-3" />-->
           <div class="media-body">
-                <h5 class="mt-0">Financial Independence</h5>
+            <h3 class="h5 mt-0">Financial Independence</h3>
             <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 expenses for the rest of your life.
+              Financial independence is the status of having enough income, for
+              example with a passive income like dividends, to cover your living
+              expenses for the rest of your life.
             </div>
             <div>
               <a
@@ -98,8 +112,6 @@
           </div>
         </div>
       </div>
-        </mat-card-content>
-      </mat-card>
     </div>
   </div>
 </div>

apps/client/src/app/pages/resources/resources-page.scss

@@ -2,7 +2,6 @@
   color: rgb(var(--dark-primary-text));
   display: block;
 
-  .mat-card {
   a {
     color: rgba(var(--palette-primary-500), 1);
     font-weight: 500;
@@ -12,7 +11,6 @@
     }
   }
 }
-}
 
 :host-context(.is-dark-theme) {
   color: rgb(var(--light-primary-text));