From 448da9c40010267c7aa7839d414a239f3f10886d Mon Sep 17 00:00:00 2001
From: Thomas <4159106+dtslvr@users.noreply.github.com>
Date: Wed, 21 Sep 2022 22:13:44 +0200
Subject: [PATCH] Extend landing page

---
 .../src/app/pages/landing/landing-page.html   | 64 ++++++++++++++++---
 .../app/pages/landing/landing-page.module.ts  |  2 +
 2 files changed, 57 insertions(+), 9 deletions(-)

diff --git a/apps/client/src/app/pages/landing/landing-page.html b/apps/client/src/app/pages/landing/landing-page.html
index 7527faa13..f2f287940 100644
--- a/apps/client/src/app/pages/landing/landing-page.html
+++ b/apps/client/src/app/pages/landing/landing-page.html
@@ -55,6 +55,28 @@
     </div>
   </div>
 
+  <div class="row my-3">
+    <div class="col-md-4 my-2">
+      <mat-card>
+        <mat-card-title class="text-center">360° View</mat-card-title>
+        Get the full picture of your personal finances across multiple
+        platforms.
+      </mat-card>
+    </div>
+    <div class="col-md-4 my-2">
+      <mat-card>
+        <mat-card-title class="text-center">Web3 Ready</mat-card-title>
+        Use Ghostfolio anonymously and own your financial data.
+      </mat-card>
+    </div>
+    <div class="col-md-4 my-2">
+      <mat-card>
+        <mat-card-title class="text-center">Open Source</mat-card-title>
+        Benefit from continuous improvements through a strong community.
+      </mat-card>
+    </div>
+  </div>
+
   <div class="row my-5">
     <div class="col-md-6 offset-md-3">
       <h2 class="h4 mb-1 text-center">Why <strong>Ghostfolio</strong>?</h2>
@@ -133,19 +155,43 @@
     </div>
   </div>
 
-  <div class="row my-5">
-    <div class="col-md-6 offset-md-3">
+  <div class="row my-3">
+    <div class="col-12">
       <h2 class="h4 mb-1 text-center">
         How does <strong>Ghostfolio</strong> work?
       </h2>
       <p class="lead mb-3 text-center">Get started in only 3 steps</p>
-      <ol class="m-0 pl-3">
-        <li class="mb-2">
-          Sign up anonymously<br />(no e-mail address nor credit card required)
-        </li>
-        <li class="mb-2">Add any of your historical transactions</li>
-        <li>Get valuable insights of your portfolio composition</li>
-      </ol>
+    </div>
+    <div class="col-md-4 my-2">
+      <mat-card class="d-flex flex-row h-100">
+        <div class="flex-grow-1">
+          <div class="font-weight-bold">Sign up anonymously*</div>
+          <div class="text-muted">
+            <small>* no e-mail address nor credit card required</small>
+          </div>
+        </div>
+        <div class="pl-2 text-muted text-right">1</div>
+      </mat-card>
+    </div>
+    <div class="col-md-4 my-2">
+      <mat-card class="d-flex flex-row h-100">
+        <div class="flex-grow-1">
+          <div class="font-weight-bold">
+            Add any of your historical transactions
+          </div>
+        </div>
+        <div class="pl-2 text-muted text-right">2</div>
+      </mat-card>
+    </div>
+    <div class="col-md-4 my-2">
+      <mat-card class="d-flex flex-row h-100">
+        <div class="flex-grow-1">
+          <div class="font-weight-bold">
+            Get valuable insights of your portfolio composition
+          </div>
+        </div>
+        <div class="pl-2 text-muted text-right">3</div>
+      </mat-card>
     </div>
   </div>
 
diff --git a/apps/client/src/app/pages/landing/landing-page.module.ts b/apps/client/src/app/pages/landing/landing-page.module.ts
index d0d02b480..2116d972d 100644
--- a/apps/client/src/app/pages/landing/landing-page.module.ts
+++ b/apps/client/src/app/pages/landing/landing-page.module.ts
@@ -1,6 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
 import { RouterModule } from '@angular/router';
 import { GfLogoModule } from '@ghostfolio/ui/logo';
 
@@ -14,6 +15,7 @@ import { LandingPageComponent } from './landing-page.component';
     GfLogoModule,
     LandingPageRoutingModule,
     MatButtonModule,
+    MatCardModule,
     RouterModule
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]