@extends('front.layouts.master')

@section('content')

<main class="mb-4 pb-4">
    <section class="blog-page container mt-5">
        <h2 class="d-none">The Blog</h2>
        <div class="blog-grid row row-cols-2 row-cols-md-5 row-cols-xl-6">
            @foreach($main_product_categories as $key => $category)
                <div class="blog-grid__item">
                    <a href="{{ route('front.products.categories.show', $category->getTranslatedAttribute('slug')) }}">
                        <div class="blog-grid__item-image">
                            <img loading="lazy" class="h-auto" src="{{ $category->getCover() }}" width="450" height="400" alt="{{ $category->getTranslatedAttribute('title') }}" />
                        </div>
                        <div class="blog-grid__item-detail text-center">
                            <div class="blog-grid__item-title">
                                {{ $category->getTranslatedAttribute('title') }}
                            </div>
                        </div>
                    </a>
                </div>
            @endforeach
        </div>
    </section>
</main>


@endsection