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-12 col-md-6 col-lg-4 mb-4 d-flex">
                    <a class="card" routerLink="/customer" routerLinkActive="active">
                        <div class="card-body position-relative" data-cat="customer">
                            <h3 class="position-absolute m-0">{{ 'basic.customer' | translate }}</h3>
                        </div>
                    </a>
                </div>
                <div class="col-12 col-md-6 col-lg-4 mb-4 d-flex">
                    <a class="card" routerLink="/supplier" routerLinkActive="active">
                        <div class="card-body position-relative" data-cat="supplier">
                            <h3 class="position-absolute m-0">{{ 'basic.supplier' | translate }}</h3>
                        </div>
                    </a>
                </div>
                <div class="col-12 col-md-6 col-lg-4 mb-4 d-flex">
                    <a class="card" routerLink="/service" routerLinkActive="active">
                        <div class="card-body position-relative" data-cat="service">
                            <h3 class="position-absolute m-0">{{ 'basic.service' | translate }}</h3>
                        </div>
                    </a>
                </div>
                <div class="col-12 col-md-6 col-lg-4 mb-4 d-flex">
                    <a class="card" routerLink="/product" routerLinkActive="active">
                        <div class="card-body position-relative" data-cat="product">
                            <h3 class="position-absolute m-0">{{ 'basic.products' | translate }}</h3>
                        </div>
                    </a>
                </div>
                <div class="col-12 col-md-6 col-lg-4 mb-4 d-flex">
                    <a class="card" routerLink="/task" routerLinkActive="active">
                        <div class="card-body position-relative" data-cat="task">
                            <h3 class="position-absolute m-0">{{ 'basic.tasks' | translate }}</h3>
                        </div>
                    </a>
                </div>
                <div class="col-12 col-md-6 col-lg-4 mb-4 d-flex">
                    <a class="card" routerLink="/document" routerLinkActive="active">
                        <div class="card-body position-relative" data-cat="document">
                            <h3 class="position-absolute m-0">{{ 'basic.documents' | translate }}</h3>
                        </div>
                    </a>
                </div>
                <div class="col-12 col-md-6 col-lg-4 mb-4 d-flex">
                    <a class="card" routerLink="/sale" routerLinkActive="active">
                        <div class="card-body position-relative" data-cat="sale">
                            <h3 class="position-absolute m-0">{{ 'basic.sales' | translate }}</h3>
                        </div>
                    </a>
                </div>
                <div class="col-12 col-md-6 col-lg-4 mb-4 d-flex">
                    <a class="card" routerLink="/profile" routerLinkActive="active">
                        <div class="card-body position-relative" data-cat="profile">
                            <h3 class="position-absolute m-0">{{ 'basic.profile' | translate }}</h3>
                        </div>
                    </a>
                </div>
                <div class="col-12 col-md-6 col-lg-4 mb-4 d-flex">
                    <a class="card" routerLink="/user" routerLinkActive="active">
                        <div class="card-body position-relative" data-cat="user">
                            <h3 class="position-absolute m-0">{{ 'basic.users' | translate }}</h3>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>