@extends('homepage.layouts.master')
@section('page-css')
    
@endsection
@section('page-content')
    <div class="container mx-auto w-full bg-white">
        <main class="max-sm:mt-[20px] mt-[72px] p-4">
            @include('homepage.commons.breadcrumb', [
                'link' => _t(strtolower($langCode) . '.global.homepage.home'),
                'title' => _t(strtolower($langCode) . '.global.homepage.collection.title'),
                'subtitle' => getTitleCollection($slug, $langCode, $ingredient),
            ])
            <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
                @foreach ($data as $product)
                    @include('homepage.commons.product', ['product' => $product])
                @endforeach
            </div>

            <div class="max-sm:mt-6 max-sm:mb-10 mt-12 mb-24">
                {{$data->links('vendor.pagination.tailwind')}}
            </div>
        </main>
    </div>
@endsection
@section('page-js')
@endsection