sudacode/ghostfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases Activity

Feature/restructure landing page (#1021)

Browse Source 
* Restructure landing page

* Update changelog
This commit is contained in:
Thomas Kaul 2022-06-16 16:29:35 +02:00 committed by GitHub
parent a996dd7ed5
commit 03f2f33344
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 72 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -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`

8
apps/client/src/app/components/header/header.component.html
View File

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

63
apps/client/src/app/pages/landing/landing-page.html
View File

@ -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 class="container">
<div class="row">
<div class="col text-center">
<h1 class="font-weight-bold intro my-5" i18n>
Manage your wealth like a boss
</h1>
<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="row">
<div
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>
</div>
</div>
<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>

31
apps/client/src/app/pages/landing/landing-page.scss
View File

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