@props([
    'contents' => [
        0 => [
            'title' => 'Museu do bombeiro',
            'image' => 'images/home/category_1.jpg',
            'url' => 'javascript:void(0)'
        ],
        1 => [
            'title' => 'Publicações e periódicos',
            'image' => 'images/home/category_2.jpg',
            'url' => 'javascript:void(0)'
        ],
        4 => [
            'title' => 'Comendas e reconhecimento',
            'image' => 'images/home/category_5.jpg',
            'url' => 'javascript:void(0)'
        ],
        5 => [
            'title' => 'Viagens de estudo',
            'image' => 'images/home/category_6.jpg',
            'url' => 'javascript:void(0)'
        ],
        6 => [
            'title' => 'Eventos esportivos',
            'image' => 'images/home/category_7.jpg',
            'url' => 'javascript:void(0)'
        ],
        2 => [
            'title' => 'Treinamentos e Brigadas',
            'image' => 'images/home/category_3.jpg',
            'url' => 'javascript:void(0)'
        ],
        3 => [
            'title' => 'Loja e Cafeteria',
            'image' => 'images/home/category_4.jpg',
            'url' => 'javascript:void(0)'
        ],
        7 => [
            'title' => 'Ver todos...',
            'image' => 'images/home/category_8.jpg',
            'url' => 'javascript:void(0)'
        ],
        
    ]
])

<section class="gshop-category-section bg-white py-5 position-relative z-1 overflow-hidden">
    <div class="container">
        <div class="gshop-category-box border-secondary rounded-3 bg-white">
            <div class="text-center section-title">
                <h4 class="d-inline-block px-2 bg-white mb-4">Principais Serviços e Parcerias</h4>
            </div>
            <div class="row justify-content-center g-4">
                @foreach($contents as $content)
                    <div class="col-xxl-2 col-lg-3 col-md-4 col-sm-6">
                        <div class="gshop-animated-iconbox py-5 px-4 text-center border rounded-3 position-relative overflow-hidden">
                            <div class="animated-icon d-inline-flex align-items-center justify-content-center rounded-circle position-relative">
                                <a href="{{$content['url']}}"><img src="{{asset($content['image'])}}" alt="{{asset($content['image'])}}" class="img-fluid"></a>
                            </div>
                            <a href="{{$content['url']}}" class="text-dark fs-sm fw-bold d-block mt-3" style="min-height:45px">{{$content['title']}}</a>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
 
</section>