Feature/improve landing page (#442)

* Add intro screen

* 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
+
+### Changed
+
+- Improved the landing page
+
 ## 1.65.0 - 25.10.2021
 
 ### Added

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

@@ -1,6 +1,6 @@
 <header>
   <gf-header
-    class="position-fixed px-2 w-100"
+    class="position-fixed w-100"
     [currentRoute]="currentRoute"
     [info]="info"
     [user]="user"

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

@@ -1,6 +1,10 @@
-<mat-toolbar class="p-0">
+<mat-toolbar class="px-2">
   <ng-container *ngIf="user">
-    <a [routerLink]="['/']" class="no-min-width px-2" mat-button>
+    <a
+      [routerLink]="['/']"
+      class="align-items-center d-flex h-100 mx-2 no-min-width px-2 rounded-0"
+      mat-button
+    >
       <gf-logo></gf-logo>
     </a>
     <span class="spacer"></span>
@@ -221,12 +225,11 @@
   </ng-container>
   <ng-container *ngIf="user === null">
     <a
-      *ngIf="currentRoute && currentRoute !== 'start'"
-      class="mx-2 no-min-width px-2"
+      class="align-items-center d-flex h-100 mx-2 no-min-width px-2 rounded-0"
       mat-button
       [routerLink]="['/']"
     >
-      <gf-logo></gf-logo>
+      <gf-logo [hideName]="!currentRoute || currentRoute === 'start'"></gf-logo>
     </a>
     <span class="spacer"></span>
     <a

apps/client/src/app/pages/landing/landing-page.component.ts

@@ -1,8 +1,7 @@
-import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { TokenStorageService } from '@ghostfolio/client/services/token-storage.service';
-import { LineChartItem } from '@ghostfolio/ui/line-chart/interfaces/line-chart.interface';
 import { format } from 'date-fns';
 import { Subject } from 'rxjs';
 
@@ -15,7 +14,6 @@ import { Subject } from 'rxjs';
 export class LandingPageComponent implements OnDestroy, OnInit {
   public currentYear = format(new Date(), 'yyyy');
   public demoAuthToken: string;
-  public historicalDataItems: LineChartItem[];
 
   private unsubscribeSubject = new Subject<void>();
 
@@ -23,7 +21,6 @@ export class LandingPageComponent implements OnDestroy, OnInit {
    * @constructor
    */
   public constructor(
-    private changeDetectorRef: ChangeDetectorRef,
     private dataService: DataService,
     private router: Router,
     private tokenStorageService: TokenStorageService
@@ -36,221 +33,6 @@ export class LandingPageComponent implements OnDestroy, OnInit {
     const { demoAuthToken } = this.dataService.fetchInfo();
 
     this.demoAuthToken = demoAuthToken;
-
-    this.initializeLineChart();
-  }
-
-  public initializeLineChart() {
-    this.historicalDataItems = [
-      {
-        date: '2017-01-01',
-        value: 2561.60376
-      },
-      {
-        date: '2017-02-01',
-        value: 2261.60376
-      },
-      {
-        date: '2017-03-01',
-        value: 2268.68157074
-      },
-      {
-        date: '2017-04-01',
-        value: 2525.2942
-      },
-      {
-        date: '2017-05-01',
-        value: 2929.3595107399997
-      },
-      {
-        date: '2017-06-01',
-        value: 3088.5172438900004
-      },
-      {
-        date: '2017-07-01',
-        value: 3281.2490946300004
-      },
-      {
-        date: '2017-08-01',
-        value: 4714.57822537
-      },
-      {
-        date: '2017-09-01',
-        value: 5717.262455259565
-      },
-      {
-        date: '2017-10-01',
-        value: 5338.742482334544
-      },
-      {
-        date: '2017-11-01',
-        value: 6361.263771554509
-      },
-      {
-        date: '2017-12-01',
-        value: 8373.260491904595
-      },
-      {
-        date: '2018-01-01',
-        value: 9783.208968191562
-      },
-      {
-        date: '2018-02-01',
-        value: 7841.2667100173
-      },
-      {
-        date: '2018-03-01',
-        value: 8582.133039380678
-      },
-      {
-        date: '2018-04-01',
-        value: 5901.8362986766715
-      },
-      {
-        date: '2018-05-01',
-        value: 7367.392976151925
-      },
-      {
-        date: '2018-06-01',
-        value: 6490.164314049853
-      },
-      {
-        date: '2018-07-01',
-        value: 6365.351621654618
-      },
-      {
-        date: '2018-08-01',
-        value: 6614.532706931272
-      },
-      {
-        date: '2018-09-01',
-        value: 6402.052882414409
-      },
-      {
-        date: '2018-10-01',
-        value: 15270.327917651943
-      },
-      {
-        date: '2018-11-01',
-        value: 13929.833891940816
-      },
-      {
-        date: '2018-12-01',
-        value: 12995.832254431414
-      },
-      {
-        date: '2019-01-01',
-        value: 11792.447013828998
-      },
-      {
-        date: '2019-02-01',
-        value: 11988.224284346446
-      },
-      {
-        date: '2019-03-01',
-        value: 13536.39667099519
-      },
-      {
-        date: '2019-04-01',
-        value: 14301.83740090022
-      },
-      {
-        date: '2019-05-01',
-        value: 14902.994910520581
-      },
-      {
-        date: '2019-06-01',
-        value: 15373.418326284132
-      },
-      {
-        date: '2019-07-01',
-        value: 17545.70705465703
-      },
-      {
-        date: '2019-08-01',
-        value: 17206.28500223782
-      },
-      {
-        date: '2019-09-01',
-        value: 17782.445200108898
-      },
-      {
-        date: '2019-10-01',
-        value: 17050.25875252655
-      },
-      {
-        date: '2019-11-01',
-        value: 18517.053521416237
-      },
-      {
-        date: '2019-12-01',
-        value: 17850.649021651363
-      },
-      {
-        date: '2020-01-01',
-        value: 18817.269786559067
-      },
-      {
-        date: '2020-02-01',
-        value: 22769.842312027653
-      },
-      {
-        date: '2020-03-01',
-        value: 23065.56002316582
-      },
-      {
-        date: '2020-04-01',
-        value: 19738.122641884733
-      },
-      {
-        date: '2020-05-01',
-        value: 25112.281463810643
-      },
-      {
-        date: '2020-06-01',
-        value: 28753.054132147452
-      },
-      {
-        date: '2020-07-01',
-        value: 32207.62827031543
-      },
-      {
-        date: '2020-08-01',
-        value: 37837.88816828611
-      },
-      {
-        date: '2020-09-01',
-        value: 50018.740185519295
-      },
-      {
-        date: '2020-10-01',
-        value: 46593.322295801525
-      },
-      {
-        date: '2020-11-01',
-        value: 44440.18743231742
-      },
-      {
-        date: '2020-12-01',
-        value: 57582.23077536893
-      },
-      {
-        date: '2021-01-01',
-        value: 68823.02446077733
-      },
-      {
-        date: '2021-02-01',
-        value: 64516.42092139593
-      },
-      {
-        date: '2021-03-01',
-        value: 82465.97581106682
-      },
-      {
-        date: '2021-03-18',
-        value: 86666.03082624623
-      }
-    ];
   }
 
   public setToken(aToken: string) {

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

@@ -1,14 +1,13 @@
+<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
-      class="
-        align-items-center
-        d-flex
-        flex-column
-        justify-content-center
-        mb-4
-        w-100
-      "
+      class="align-items-center d-flex flex-column justify-content-center w-100"
     >
       <gf-logo size="large"></gf-logo>
       <p class="lead m-0">Wealth Management Software</p>
@@ -16,15 +15,7 @@
   </div>
 
   <div class="button-container row">
-    <div
-      class="
-        align-items-center
-        col
-        d-flex
-        justify-content-center
-        position-relative
-      "
-    >
+    <div class="align-items-center col d-flex justify-content-center">
       <div class="py-5 text-center">
         <a
           class="d-inline-block"
@@ -46,15 +37,6 @@
           <span i18n>Live Demo</span>
         </button>
       </div>
-      <gf-line-chart
-        class="position-absolute"
-        symbol="Performance"
-        [historicalDataItems]="historicalDataItems"
-        [showGradient]="true"
-        [showLoader]="false"
-        [showXAxis]="false"
-        [showYAxis]="false"
-      ></gf-line-chart>
     </div>
   </div>
 

apps/client/src/app/pages/landing/landing-page.module.ts

@@ -2,7 +2,6 @@ import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
-import { GfLineChartModule } from '@ghostfolio/ui/line-chart/line-chart.module';
 import { GfLogoModule } from '@ghostfolio/ui/logo';
 
 import { LandingPageRoutingModule } from './landing-page-routing.module';
@@ -13,7 +12,6 @@ import { LandingPageComponent } from './landing-page.component';
   exports: [],
   imports: [
     CommonModule,
-    GfLineChartModule,
     GfLogoModule,
     LandingPageRoutingModule,
     MatButtonModule,

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

@@ -2,17 +2,6 @@
   display: block;
 
   .button-container {
-    aspect-ratio: 16 / 9;
-
-    gf-line-chart {
-      bottom: 0;
-      left: 0;
-      opacity: 0.67;
-      right: 0;
-      top: 0;
-      z-index: -1;
-    }
-
     .mat-stroked-button {
       background-color: var(--light-background);
     }
@@ -23,6 +12,23 @@
       height: 2.5rem;
     }
   }
+
+  .intro-container {
+    background-color: #ffffff;
+    margin-top: -5rem;
+
+    .intro-inner-container {
+      aspect-ratio: 16 / 9;
+      max-height: 66vh;
+
+      .intro {
+        background-image: url('/assets/intro.jpg');
+        background-position: top left;
+        background-repeat: no-repeat;
+        background-size: contain;
+      }
+    }
+  }
 }
 
 :host-context(.is-dark-theme) {

libs/ui/src/lib/logo/logo.component.scss

@@ -5,7 +5,7 @@
   }
 
   .name {
-    font-weight: 500;
+    font-weight: 600;
   }
 }