Shelf_Front/src/app/components/product-item/product-item.component.html

<div class="product-card">
    <div class="card-content">
        <div class="card-img-container">
            <img src={{product.url}} class="card-img" alt="{{product.name}}">
        </div>
        <div class="card-details-container">
            <div class="card-info">
                <span>{{product.name}}</span>
                <span>{{product.description}}</span>
                <span>{{product.price}} $</span>
            </div>
            <div class="card-buttons">
                <button mat-raised-button color="primary" routerLink="/product/{{product.id}}">Details</button>
                <button mat-raised-button color="primary">Add to cart</button>
            </div>
        </div>
    </div>
</div>