Feature/add ghostfolio trailer to landing page (#952)

* Add link to Ghostfolio trailer

* Update changelog

CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## Unreleased
+
+### Added
+
+- Added the _Ghostfolio_ trailer to the landing page
+
 ## 1.151.0 - 24.05.2022
 
 ### Added

README.md

@@ -9,7 +9,7 @@
 
   <h1>Ghostfolio</h1>
   <p>
-    <strong>Open Source Wealth Management Software made for Humans</strong>
+    <strong>Open Source Wealth Management Software</strong>
   </p>
   <p>
     <a href="https://ghostfol.io"><strong>Live Demo</strong></a> | <a href="https://ghostfol.io/pricing"><strong>Ghostfolio Premium</strong></a> | <a href="https://ghostfol.io/blog"><strong>Blog</strong></a> | <a href="https://join.slack.com/t/ghostfolio/shared_invite/zt-vsaan64h-F_I0fEo5M0P88lP9ibCxFg"><strong>Slack</strong></a> | <a href="https://twitter.com/ghostfolio_"><strong>Twitter</strong></a>
@@ -26,8 +26,9 @@
 
 **Ghostfolio** is an open source wealth management software built with web technology. The application empowers busy people to keep track of stocks, ETFs or cryptocurrencies and make solid, data-driven investment decisions.
 
-<div align="center">
-  <img src="./apps/client/src/assets/images/screenshot.png" width="300">
+<div align="center" style="margin-top: 1rem; margin-bottom: 1rem;">
+  <a href="https://www.youtube.com/watch?v=yY6ObSQVJZk">
+    <img src="./apps/client/src/assets/images/video-preview.jpg" width="600"></a>
 </div>
 
 ## Ghostfolio Premium
@@ -62,6 +63,10 @@ Ghostfolio is for you if you are...
 - ✅ Zen Mode
 - ✅ Mobile-first design
 
+<div align="center" style="margin-top: 1rem; margin-bottom: 1rem;">
+  <img src="./apps/client/src/assets/images/screenshot.png" width="300">
+</div>
+
 ## Technology Stack
 
 Ghostfolio is a modern web application written in [TypeScript](https://www.typescriptlang.org) and organized as an [Nx](https://nx.dev) workspace.

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

@@ -51,6 +51,18 @@
         stocks, ETFs or cryptocurrencies and make solid, data-driven investment
         decisions.
       </p>
+      <p>
+        <a
+          href="https://www.youtube.com/watch?v=yY6ObSQVJZk"
+          title="Watch the Ghostfol.io Trailer on YouTube"
+        >
+          <img
+            alt="Ghostfol.io Trailer"
+            src="./assets/images/video-preview.jpg"
+            style="max-width: 100%; width: 40rem"
+          />
+        </a>
+      </p>
     </div>
   </div>