zitadel/console/src/app/pages/home/home.component.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>