matsen-tool-fe/matsen-tool/src/app/_views/home/home.component.html

<div class="home-container pb-5">
    <div class="pt-4">
        <div class="container">
            <h1>{{ 'user.hello' | translate }} {{ user?.firstName }}!</h1>
<!--            <p *ngIf="userIsAdmin"><a routerLink="/users">Manage Users</a></p>-->
        </div>
    </div>

    <div class="spt-home-cards">
        <div class="container">
            <div class="row pt-4 pb-4 d-flex">
                <div class="col d-flex">
                    <a class="card" routerLink="/customer" routerLinkActive="active">
                        <div class="card-body position-relative bi bi-emoji-heart-eyes">
                            <h3 class="position-absolute m-0">{{ 'basic.customer' | translate }}</h3>
                        </div>
                    </a>
                </div>
                <div class="col d-flex">
                    <a class="card" routerLink="/supplier" routerLinkActive="active">
                        <div class="card-body position-relative bi bi-emoji-kiss">
                            <h3 class="position-absolute m-0">{{ 'basic.supplier' | translate }}</h3>
                        </div>
                    </a>
                </div>
                <div class="col d-flex">
                    <a class="card" routerLink="/service" routerLinkActive="active">
                        <div class="card-body position-relative bi bi-emoji-smile">
                            <h3 class="position-absolute m-0">{{ 'basic.service' | translate }}</h3>
                        </div>
                    </a>
                </div>
            </div>
        </div>

        <div class="container mb-5">
            <div class="row pt-4 pb-4 d-flex">
                <div class="col d-flex">
                    <a class="card" routerLink="/product" routerLinkActive="active">
                        <div class="card-body position-relative bi bi-droplet-fill">
                            <h3 class="position-absolute m-0">{{ 'basic.products' | translate }}</h3>
                        </div>
                    </a>
                </div>
                <div class="col d-flex">
                    <a class="card" routerLink="/task" routerLinkActive="active">
                        <div class="card-body position-relative bi bi-list-check">
                            <h3 class="position-absolute m-0">{{ 'basic.tasks' | translate }}</h3>
                        </div>
                    </a>
                </div>
                <div class="col d-flex">
                    <a class="card" routerLink="/document" routerLinkActive="active">
                        <div class="card-body position-relative bi bi-journals">
                            <h3 class="position-absolute m-0">{{ 'basic.documents' | translate }}</h3>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>