Files
zitadel/console/src/app/pages/home/home.component.html
T
6a1b708ff8 feat: console descriptions (#7552)
* org page descriptions

* feat(console): describe options

* docs: fix bullet

* lint

* refactor: cleanup unused translations

* translate

* translate

* translate

* members

* add links

* translate

* remove scripts

* lint

* remove node-jq

* fix styles

* Update console/src/assets/i18n/it.json

Co-authored-by: Max Peintner <[email protected]>

* Update console/src/assets/i18n/it.json

Co-authored-by: Max Peintner <[email protected]>

* Update console/src/assets/i18n/it.json

Co-authored-by: Max Peintner <[email protected]>

---------

Co-authored-by: peintnermax <[email protected]>
2024-03-13 14:53:48 +00:00

95 lines
3.5 KiB
HTML

<div class="max-width-container">
<h1 class="home-title" data-e2e="authenticated-welcome">{{ 'HOME.WELCOME' | translate }}</h1>
<div class="home-wrapper enlarged-container">
<cnsl-quickstart></cnsl-quickstart>
<ng-container *ngIf="['iam.read$'] | hasRole | async; else defaultHome">
<cnsl-onboarding></cnsl-onboarding>
</ng-container>
<ng-template #defaultHome>
<cnsl-shortcuts></cnsl-shortcuts>
</ng-template>
<p class="disclaimer cnsl-secondary-text">{{ 'HOME.DISCLAIMER' | translate }}</p>
<span class="fill-space"></span>
<h2 class="desc">{{ 'ONBOARDING.MOREDESCRIPTION' | translate }}</h2>
<div class="home-grid-container">
<a href="https://zitadel.com/docs/guides/start/quickstart" target="_blank" rel="noreferrer" class="grid-item">
<div
class="icon-wrapper"
[ngStyle]="{
background: (themeService.isDarkTheme | async) ? greendark + 50 : greenlight + 50
}"
>
<div
class="inner"
[ngStyle]="{
background: (themeService.isDarkTheme | async) ? greendark : greenlight,
color: (themeService.isDarkTheme | async) ? greenlight : greendark
}"
>
<i class="las la-play"></i>
</div>
</div>
<div class="text-block">
<span>{{ 'DESCRIPTIONS.HOME.MORE_SHORTCUTS.GET_STARTED.TITLE' | translate }}</span>
<div class="more-shortcuts-description">
<p class="cnsl-secondary-text">{{ 'DESCRIPTIONS.HOME.MORE_SHORTCUTS.GET_STARTED.DESCRIPTION' | translate }}</p>
</div>
</div>
</a>
<a href="https://zitadel.com/docs" target="_blank" rel="noreferrer" class="grid-item">
<div
class="icon-wrapper"
[ngStyle]="{
background: (themeService.isDarkTheme | async) ? bluedark + 50 : bluelight + 50
}"
>
<div
class="inner"
[ngStyle]="{
background: (themeService.isDarkTheme | async) ? bluedark : bluelight,
color: (themeService.isDarkTheme | async) ? bluelight : bluedark
}"
>
<i class="las la-file-alt"></i>
</div>
</div>
<div class="text-block">
<span>{{ 'DESCRIPTIONS.HOME.MORE_SHORTCUTS.DOCS.TITLE' | translate }}</span>
<div class="more-shortcuts-description">
<p class="cnsl-secondary-text">{{ 'DESCRIPTIONS.HOME.MORE_SHORTCUTS.DOCS.DESCRIPTION' | translate }}</p>
</div>
</div>
</a>
<a href="https://zitadel.com/docs/sdk-examples/introduction" target="_blank" rel="noreferrer" class="grid-item">
<div
class="icon-wrapper"
[ngStyle]="{
background: (themeService.isDarkTheme | async) ? cyandark + 50 : cyanlight + 50
}"
>
<div
class="inner"
[ngStyle]="{
background: (themeService.isDarkTheme | async) ? cyandark : cyanlight,
color: (themeService.isDarkTheme | async) ? cyanlight : cyandark
}"
>
<i class="las la-play"></i>
</div>
</div>
<div class="text-block">
<span>{{ 'DESCRIPTIONS.HOME.MORE_SHORTCUTS.EXAMPLES.TITLE' | translate }}</span>
<div class="more-shortcuts-description">
<p class="cnsl-secondary-text">{{ 'DESCRIPTIONS.HOME.MORE_SHORTCUTS.EXAMPLES.DESCRIPTION' | translate }}</p>
</div>
</div>
</a>
</div>
</div>
</div>