<section class="container py-10">
    <div class="mb-10 text-center text-lg font-medium lg:text-xl">{{ $title }}</div>

    <div class="flex flex-col items-center justify-center">
        <div class="flex w-full flex-wrap items-center justify-center gap-8">
            @foreach ($categories as $category )
            <div class="h-40 w-28">
                <a class="flex w-full select-none flex-col items-center" href="{{ route('shop' , ['category' => $category->id]) }}">
                    <img class="mx-auto inline-block h-25 h-full w-25 w-full object-contain rounded-xl" data-scope="category" onerror="window.app.handleBrokenImage(this)" src="{{ asset('uploads/' . $category->image) }}" alt="{{  $category->name }}" />

                    <p class="mt-2 line-clamp-2 text-center">{{ $category->name }}</p>
                </a>
            </div>
            @endforeach

        </div>
    </div>
</section>
