Feature/restructure landing page (#1021)

* Restructure landing page

* Update changelog

CHANGELOG.md

@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Improved the landing page
 - Upgraded `angular` from version `13.3.6` to `14.0.2`
 - Upgraded `Nx` from version `14.1.4` to `14.3.5`
 - Upgraded `storybook` from version `6.4.22` to `6.5.9`

apps/client/src/app/components/header/header.component.html

@@ -229,13 +229,7 @@
       mat-button
       [routerLink]="['/']"
     >
-      <gf-logo
+      <gf-logo [hideName]="currentRoute === 'register'"></gf-logo>
-        [hideName]="
-          !currentRoute ||
-          currentRoute === 'register' ||
-          currentRoute === 'start'
-        "
-      ></gf-logo>
     </a>
     <span class="spacer"></span>
     <a

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

@@ -1,19 +1,28 @@
-<div class="intro-container mb-5">
-  <div class="intro-inner-container mx-auto">
-    <div class="h-100 intro w-100"></div>
-  </div>
-</div>
-
 <div class="container">
   <div class="row">
-    <div
+    <div class="col text-center">
-      class="align-items-center d-flex flex-column justify-content-center w-100"
+      <h1 class="font-weight-bold intro my-5" i18n>
-    >
+        Manage your wealth like a boss
-      <gf-logo size="large"></gf-logo>
+      </h1>
-      <p class="lead m-0">Wealth Management Software</p>
+      <div>
+        <a
+          href="https://www.youtube.com/watch?v=yY6ObSQVJZk"
+          target="_blank"
+          title="Watch the Ghostfol.io Trailer on YouTube"
+        >
+          <img
+            alt="Ghostfol.io Trailer"
+            class="rounded video"
+            src="./assets/images/video-preview.jpg"
+            style="max-width: 100%; width: 40rem"
+          />
+        </a>
+      </div>
     </div>
   </div>
+</div>
 
+<div class="container">
   <div class="button-container row">
     <div class="align-items-center col d-flex justify-content-center">
       <div class="py-5 text-center">
@@ -43,7 +52,7 @@
   <div class="row my-5">
     <div class="col text-center">
       <h2 class="h4 mb-1 text-center">
-        Protect your <strong>wealth</strong>. Refine your
+        Protect your <strong>assets</strong>. Refine your
         <strong>personal investment strategy</strong>.
       </h2>
       <p class="lead">
@@ -51,18 +60,6 @@
         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>
 
@@ -198,3 +195,19 @@
     </a>
   </div>
 </div>
+
+<div class="container">
+  <div class="d-block row">
+    <div class="outro-inner-container mx-auto">
+      <div class="h-100 w-100"></div>
+    </div>
+  </div>
+  <div class="row">
+    <div
+      class="align-items-center d-flex flex-column justify-content-center w-100"
+    >
+      <gf-logo size="medium"></gf-logo>
+      <div>Wealth Management Software</div>
+    </div>
+  </div>
+</div>

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

@@ -1,3 +1,5 @@
+@import '~apps/client/src/styles/ghostfolio-style';
+
 :host {
   display: block;
 
@@ -13,19 +15,32 @@
     }
   }
 
-  .intro-container {
+  .intro {
-    margin-top: -5rem;
+    font-size: 4vw;
+    line-height: 1;
+
+    @media (max-width: 575.98px) {
+      font-size: 10vw;
+    }
+  }
+
+  .outro-inner-container {
+    aspect-ratio: 16 / 9;
+    max-height: 66vh;
 
-    .intro-inner-container {
+    div {
-      aspect-ratio: 16 / 9;
+      background-image: url('/assets/intro.jpg');
-      max-height: 66vh;
+      background-position: top left;
+      background-repeat: no-repeat;
+      background-size: contain;
+    }
+  }
+
+  .video {
+    border: 1px solid rgba(var(--dark-dividers));
 
-      .intro {
+    &:hover {
-        background-image: url('/assets/intro.jpg');
+      border-color: rgba(var(--palette-primary-500), 1);
-        background-position: top left;
-        background-repeat: no-repeat;
-        background-size: contain;
-      }
     }
   }
 }
@@ -37,9 +52,13 @@
     }
   }
 
-  .intro-container {
+  .outro-inner-container {
-    .intro {
+    div {
       background-image: url('/assets/intro-dark.jpg') !important;
     }
   }
+
+  .video {
+    border-color: rgba(var(--light-dividers));
+  }
 }