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

<div class="wrapper">
    <div class="header">
        <img alt="zitadel logo" *ngIf="dark; else lighttheme"
            src="../assets/images/zitadel-logo-oneline-darkdesign.svg" />
        <ng-template #lighttheme>
            <img alt="zitadel logo" src="../assets/images/zitadel-logo-oneline-lightdesign.svg" />
        </ng-template>
    </div>

    <div class="container">
        <ng-template appHasRole [appHasRole]="['iam.write']">
            <div class="item card">
                <div class="top">
                    <h2>
                        <i class="icon las la-gem"></i>
                        {{'HOME.IAM'| translate}}</h2>
                    <p>{{'HOME.IAM_DESC'| translate}}</p>
                </div>
                <span class="fill-space"></span>
                <div class="footer">
                    <a color="accent" mat-button [routerLink]="['/iam']">{{'HOME.IAM_BUTTON' | translate}}</a>
                </div>
            </div>
        </ng-template>

        <div class="item card">
            <div class="top">
                <h2> <i class="icon las la-user-circle"></i>
                    {{'HOME.SECURITYANDPRIVACY'| translate}}</h2>
                <p>{{'HOME.SECURITYANDPRIVACY_DESC'| translate}}</p>
            </div>
            <span class="fill-space"></span>
            <div class="footer">
                <a color="accent" mat-button
                    [routerLink]="['/users/me']">{{'HOME.SECURITYANDPRIVACY_BUTTON' | translate}}</a>
            </div>
        </div>

        <ng-template appHasRole [appHasRole]="['project.read']">
            <div class="item card">
                <div class="top">
                    <h2>
                        <i class="icon las la-layer-group"></i>
                        {{'HOME.PROJECTS'| translate}}</h2>
                    <p>{{'HOME.PROJECTS_DESC'| translate}}</p>
                </div>
                <span class="fill-space"></span>
                <div class="footer">
                    <a color="accent" mat-button [routerLink]="['/projects']">{{'HOME.PROJECTS_BUTTON' | translate}}</a>
                </div>
            </div>
        </ng-template>

        <ng-template appHasRole [appHasRole]="['org.read']">
            <div class="item card">
                <div class="top">
                    <h2> <i class="icon las la-archway"></i>
                        {{'HOME.PROTECTION'| translate}}</h2>
                    <p>{{'HOME.PROTECTION_DESC'| translate}}</p>
                </div>
                <span class="fill-space"></span>
                <div class="footer">
                    <a color="accent" mat-button [routerLink]="['/org']">{{'HOME.PROTECTION_BUTTON' | translate}}</a>
                </div>
            </div>
        </ng-template>

        <ng-template appHasRole [appHasRole]="['user.read']">
            <div class="item card">
                <div class="top">
                    <h2>
                        <i class="las la-crosshairs"></i>
                        {{'HOME.USERS'| translate}}</h2>
                    <p>{{'HOME.USERS_DESC'| translate}}</p>
                </div>
                <span class="fill-space"></span>
                <div class="footer">
                    <a color="accent" mat-button [routerLink]="['/users/me']">{{'HOME.USERS_BUTTON' | translate}}</a>
                </div>
            </div>
        </ng-template>
    </div>
</div>