From 638ae3f7fa06d82b64611ffd5326788941fcce49 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Sat, 16 Apr 2022 15:35:31 +0200
Subject: [PATCH] Feature/add boringly getting rich guide to resources page
 (#836)

* Add "Boringly Getting Rich" guide

* Update changelog
---
 CHANGELOG.md                                  |   1 +
 .../app/pages/resources/resources-page.html   | 196 ++++++++++--------
 .../app/pages/resources/resources-page.scss   |  12 +-
 3 files changed, 110 insertions(+), 99 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f115e0206..83b8db7a0 100644
--- a/CHANGELOG.md
+++ b/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
 
diff --git a/apps/client/src/app/pages/resources/resources-page.html b/apps/client/src/app/pages/resources/resources-page.html
index e501fe87d..d97cf8952 100644
--- a/apps/client/src/app/pages/resources/resources-page.html
+++ b/apps/client/src/app/pages/resources/resources-page.html
@@ -1,105 +1,117 @@
 <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>
-          <div class="mb-5">
-            <div class="mb-4 media">
-              <div class="media-body">
-                <h5 class="mt-0">Fear & Greed Index</h5>
-                <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.
-                </div>
-                <div>
-                  <a
-                    href="https://money.cnn.com/data/fear-and-greed/"
-                    target="_blank"
-                    >Fear & Greed Index →</a
-                  >
-                </div>
-              </div>
+      <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">
+            <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 class="media">
-              <div class="media-body">
-                <h5 class="mt-0">Inflation Chart</h5>
-                <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).
-                </div>
-                <div>
-                  <a href="https://inflationchart.com" target="_blank"
-                    >Inflation Chart →</a
-                  >
-                </div>
-              </div>
+            <div>
+              <a href="https://herget.me/investing-guide" target="_blank"
+                >Boringly Getting Rich →</a
+              >
             </div>
           </div>
-          <h4 class="mb-3">Glossary</h4>
-          <div>
-            <div class="mb-4 media">
-              <!--<img src="" class="mr-3" />-->
-              <div class="media-body">
-                <h5 class="mt-0">Buy and Hold</h5>
-                <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.
-                </div>
-                <div>
-                  <a
-                    href="https://www.investopedia.com/terms/b/buyandhold.asp"
-                    target="_blank"
-                    >Buy and Hold →</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.
             </div>
-            <div class="mb-4 media">
-              <!--<img src="" class="mr-3" />-->
-              <div class="media-body">
-                <h5 class="mt-0">Dollar-Cost Averaging (DCA)</h5>
-                <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.
-                </div>
-                <div>
-                  <a
-                    href="https://www.investopedia.com/terms/d/dollarcostaveraging.asp"
-                    target="_blank"
-                    >Dollar-Cost Averaging →</a
-                  >
-                </div>
-              </div>
+            <div>
+              <a
+                href="https://money.cnn.com/data/fear-and-greed/"
+                target="_blank"
+                >Fear & Greed Index →</a
+              >
             </div>
-            <div class="media">
-              <!--<img src="" class="mr-3" />-->
-              <div class="media-body">
-                <h5 class="mt-0">Financial Independence</h5>
-                <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.
-                </div>
-                <div>
-                  <a
-                    href="https://en.wikipedia.org/wiki/Financial_independence"
-                    target="_blank"
-                    >Financial Independence →</a
-                  >
-                </div>
-              </div>
+          </div>
+        </div>
+        <div class="media">
+          <div class="media-body">
+            <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).
+            </div>
+            <div>
+              <a href="https://inflationchart.com" target="_blank"
+                >Inflation Chart →</a
+              >
+            </div>
+          </div>
+        </div>
+      </div>
+      <h2 class="h4 mb-3">Glossary</h2>
+      <div>
+        <div class="mb-4 media">
+          <div class="media-body">
+            <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.
+            </div>
+            <div>
+              <a
+                href="https://www.investopedia.com/terms/b/buyandhold.asp"
+                target="_blank"
+                >Buy and Hold →</a
+              >
+            </div>
+          </div>
+        </div>
+        <div class="mb-4 media">
+          <div class="media-body">
+            <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.
+            </div>
+            <div>
+              <a
+                href="https://www.investopedia.com/terms/d/dollarcostaveraging.asp"
+                target="_blank"
+                >Dollar-Cost Averaging →</a
+              >
+            </div>
+          </div>
+        </div>
+        <div class="media">
+          <div class="media-body">
+            <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.
+            </div>
+            <div>
+              <a
+                href="https://en.wikipedia.org/wiki/Financial_independence"
+                target="_blank"
+                >Financial Independence →</a
+              >
             </div>
           </div>
-        </mat-card-content>
-      </mat-card>
+        </div>
+      </div>
     </div>
   </div>
 </div>
diff --git a/apps/client/src/app/pages/resources/resources-page.scss b/apps/client/src/app/pages/resources/resources-page.scss
index 01a013378..4a8680714 100644
--- a/apps/client/src/app/pages/resources/resources-page.scss
+++ b/apps/client/src/app/pages/resources/resources-page.scss
@@ -2,14 +2,12 @@
   color: rgb(var(--dark-primary-text));
   display: block;
 
-  .mat-card {
-    a {
-      color: rgba(var(--palette-primary-500), 1);
-      font-weight: 500;
+  a {
+    color: rgba(var(--palette-primary-500), 1);
+    font-weight: 500;
 
-      &:hover {
-        color: rgba(var(--palette-primary-300), 1);
-      }
+    &:hover {
+      color: rgba(var(--palette-primary-300), 1);
     }
   }
 }