HTML PRODUCT

<!-- html -->

<ng-template #bottleTemplate let-class="class" let-type="type" let-id="id">
    <div id="{{id}}" class="flex flex-wrap justify-center items-center gap-60 h-full" [ngClass]="class">
        <div class="text-center" *ngFor="let el of type">
            <img src="{{el.imagePath}}" alt="" class="brightness-75 saturate-50 drop-shadow-oil-900 w-max">
            <p class="text-oil-100 text-[1.7rem] text-center pt-3">{{el.name}}</p>
        </div>
    </div>
</ng-template>

<section class="bg-obsidian mb-10 grid gap-y-10 place-items-center py-8">
    <p class="text-oil-50 uppercase text-center text-4xl">I nostri prodotti</p>
    @defer (on viewport) {
        <ng-container
            [ngTemplateOutlet]="bottleTemplate"
            [ngTemplateOutletContext]="{class: 'animate-slide', type: oils, id: 'oils'}">
        </ng-container>
    }
    @placeholder {
        <div>
            <ng-container
                [ngTemplateOutlet]="bottleTemplate"
                [ngTemplateOutletContext]="{type: oils, id: 'oils'}">
            </ng-container>
        </div>
    }
    <div class="container">
        <p class="text-oil-50 uppercase text-center text-4xl">Le bottiglie</p>
        <hr class="h-1 mb-8 mt-2 bg-oil-100 border-0">
    </div>
    @defer (on viewport) {
        <ng-container
            [ngTemplateOutlet]="bottleTemplate"
            [ngTemplateOutletContext]="{class: 'animate-slide', type: bottles, id: 'bottles'}">
        </ng-container>
    }
    @placeholder {
        <div>
            <ng-container
                [ngTemplateOutlet]="bottleTemplate"
                [ngTemplateOutletContext]="{type: bottles, id: 'bottles'}">
            </ng-container>
        </div>
    }
</section>