zitadel/console/src/app/pages/home/home.component.html

<div class="wrapper max-width-container">
    <div class="header">
        <h1 class="title">{{'HOME.WELCOME' | translate}}</h1>
        <p class="wlc_stnce">{{'HOME.WELCOMESENTENCE' | translate}}</p>
    </div>

    <div class="gridcontainer">
        <ng-template cnslHasRole [hasRole]="['iam.write']">
            <a matRipple *ngIf="!firstStepsDismissed" class="onboard" [routerLink]="['/firststeps']">
                <p class="first-steps">{{'ONBOARDING.HEADER' | translate}}</p>
                <h2>{{'ONBOARDING.TITLE' | translate}}</h2>
                <p class="desc">{{'ONBOARDING.DESCRIPTION' | translate}}</p>
                <button matTooltip="{{'ACTIONS.CLOSE' | translate}}" (click)="dismissFirstSteps($event)" mat-icon-button
                    class="close">
                    <i class="las la-times"></i>
                </button>
            </a>
        </ng-template>

        <a matRipple *ngIf="!quickstartsDismissed" class="quickstart" target="_blank"
            href="https://docs.zitadel.ch/docs/quickstarts/introduction">
            <p class="first-steps">{{'HOME.QUICKSTARTS.LABEL' | translate}}</p>
            <h2>{{'HOME.QUICKSTARTS.TITLE' | translate}}</h2>
            <p class="desc">{{'HOME.QUICKSTARTS.DESCRIPTION' | translate}}</p>
            <div class="logo-cloud">
                <i class="lab la-angular"></i>
                <i class="lab la-react"></i>
                <i class="lab la-android"></i>
                <i class="lab la-app-store-ios"></i>
            </div>
            <button matTooltip="{{'ACTIONS.CLOSE' | translate}}" (click)="dismissQuickstarts($event)" mat-icon-button
                class="close">
                <i class="las la-times"></i>
            </button>
        </a>

        <ng-template cnslHasRole [hasRole]="['iam.write']">
            <cnsl-card class="griditem" [nomargin]="true">
                <div class="top">
                    <h2>
                        <i class="icon las la-gem"></i>
                        {{'HOME.IAM'| translate}}
                    </h2>
                    <p>{{'HOME.IAM_DESC'| translate}}</p>
                </div>

                <ng-template cnslHasRole [hasRole]="['org.create','iam.write']">
                    <a class="short-link" [routerLink]="[ '/org', 'create']">{{'HOME.IAM_CREATE_ORG' | translate}}<i
                            class="las la-link"></i></a>
                </ng-template>
                <ng-template cnslHasRole [hasRole]="['iam.policy.read']">
                    <a class="short-link" [routerLink]="[ '/iam', 'policy','iam']">{{'HOME.IAM_POLICY_IAM' |
                        translate}}<i class="las la-link"></i></a>
                    <a class="short-link" [routerLink]="[ '/iam', 'policy','complexity']">{{'HOME.IAM_POLICY_COMPLEXITY'
                        | translate}}<i class="las la-link"></i></a>
                    <a class="short-link" [routerLink]="[ '/iam', 'policy','login']">{{'HOME.IAM_POLICY_LOGIN' |
                        translate}}<i class="las la-link"></i></a>
                    <a class="short-link" [routerLink]="[ '/iam', 'policy','privatelabel']">{{'HOME.IAM_POLICY_LABEL' |
                      translate}}<i class="las la-link"></i></a>
                </ng-template>

                <span class="fill-space"></span>
                <div class="footer">
                    <a color="primary" mat-stroked-button [routerLink]="['/iam']">{{'HOME.IAM_BUTTON' | translate}}</a>
                </div>
            </cnsl-card>
        </ng-template>

        <cnsl-card class="griditem" [nomargin]="true">
            <div class="top">
                <h2> <i class="icon las la-user-circle"></i>
                    {{'HOME.SECURITYANDPRIVACY'| translate}}</h2>
                <p>{{'HOME.SECURITYANDPRIVACY_DESC'| translate}}</p>
            </div>
            <a class="short-link" [routerLink]="[ '/users', 'me','password']">{{'HOME.CHANGE_PWD' | translate}}<i
                    class="las la-link"></i></a>

            <span class="fill-space"></span>
            <div class="footer">
                <a color="primary" mat-stroked-button [routerLink]="['/users/me']">{{'HOME.SECURITYANDPRIVACY_BUTTON' |
                    translate}}</a>
            </div>
        </cnsl-card>

        <ng-template cnslHasRole [hasRole]="['project.read']">
            <cnsl-card class="griditem" [nomargin]="true">
                <div class="top">
                    <h2>
                        <i class="icon las la-layer-group"></i>
                        {{'HOME.PROJECTS'| translate}}
                    </h2>
                    <p>{{'HOME.PROJECTS_DESC'| translate}}</p>
                    <ng-template cnslHasRole [hasRole]="['project.create']">
                        <a class="short-link" [routerLink]="[ '/projects', 'create']">{{'HOME.PROJECTS_NEW_LINK' |
                            translate}}<i class="las la-link"></i></a>
                    </ng-template>
                </div>
                <span class="fill-space"></span>
                <div class="footer">
                    <a color="primary" mat-stroked-button [routerLink]="['/projects']">{{'HOME.PROJECTS_BUTTON' |
                        translate}}</a>
                </div>
            </cnsl-card>
        </ng-template>

        <ng-template cnslHasRole [hasRole]="['org.read']">
            <cnsl-card class="griditem" [nomargin]="true">
                <div class="top">
                    <h2> <i class="icon las la-archway"></i>
                        {{'HOME.PROTECTION'| translate}}</h2>
                    <p>{{'HOME.PROTECTION_DESC'| translate}}</p>
                    <ng-template cnslHasRole [hasRole]="['iam.policy.read']">
                        <a class="short-link" [routerLink]="[ '/org', 'policy','iam']">{{'HOME.ORG_POLICY_IAM' |
                            translate}}<i class="las la-link"></i></a>
                    </ng-template>
                    <ng-template cnslHasRole [hasRole]="['policy.read']">
                        <a class="short-link"
                            [routerLink]="[ '/org', 'policy','complexity']">{{'HOME.ORG_POLICY_COMPLEXITY' |
                            translate}}<i class="las la-link"></i></a>
                        <a class="short-link" [routerLink]="[ '/org', 'policy','login']">{{'HOME.ORG_POLICY_LOGIN' |
                            translate}}<i class="las la-link"></i></a>
                      <a class="short-link" [routerLink]="[ '/org', 'policy','privatelabel']">{{'HOME.ORG_POLICY_LABEL' |
                        translate}}<i class="las la-link"></i></a>
                    </ng-template>
                </div>
                <span class="fill-space"></span>
                <div class="footer">
                    <a color="primary" mat-stroked-button [routerLink]="['/org']">{{'HOME.PROTECTION_BUTTON' |
                        translate}}</a>
                </div>
            </cnsl-card>
        </ng-template>

        <ng-template cnslHasRole [hasRole]="['user.read']">
            <cnsl-card class="griditem" [nomargin]="true">
                <div class="top">
                    <h2>
                        <i class="las la-users"></i>
                        {{'HOME.USERS'| translate}}
                    </h2>
                    <p>{{'HOME.USERS_DESC'| translate}}</p>
                    <ng-template cnslHasRole [hasRole]="['user.read(:[0-9]*)?']">
                        <a class="short-link" [routerLink]="[ '/users', 'list', 'humans']">{{'HOME.USERS_HUMANS' |
                            translate}}<i class="las la-link"></i></a>
                        <a class="short-link" [routerLink]="[ '/users', 'list', 'machines']">{{'HOME.USERS_MACHINES' |
                            translate}}<i class="las la-link"></i></a>
                    </ng-template>
                    <ng-template cnslHasRole [hasRole]="['user.read']">
                        <a class="short-link" [routerLink]="[ '/users', 'create']">{{'HOME.USERS_CREATE' | translate}}<i
                                class="las la-link"></i></a>
                    </ng-template>
                </div>
                <span class="fill-space"></span>
                <div class="footer">
                    <a color="primary" mat-stroked-button [routerLink]="['/users/list/humans']">{{'HOME.USERS_BUTTON' |
                        translate}}</a>
                </div>
            </cnsl-card>
        </ng-template>
    </div>

    <p class="disclaimer">{{'HOME.DISCLAIMER' | translate}}
        <!-- TODO: Add doc link to security here -->
        <!-- <a href="https://caos.github.io/site#security"></a> -->
    </p>
</div>