@php
        $grouped = $links->groupBy('categoria_id');
    @endphp

    @foreach ($grouped as $categoriaId => $linksDaCategoria)
        <div class="container mx-auto my-10 px-4">
            <h5 class="mb-8 flex items-center justify-center gap-2 text-center text-xl font-semibold text-red-600">
                <i class=""></i> {{ $linksDaCategoria->first()->categoria->nome }}
            </h5>
            <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
                @foreach ($linksDaCategoria as $link)
                    <div
                        class="flex flex-col justify-between rounded-2xl bg-white p-6 shadow-md transition-shadow duration-300 hover:shadow-lg">
                        <div class="flex flex-col items-center">
                            <i class="{{ $link->icone }} mb-4 text-4xl text-blue-600"></i>
                            <h6 class="mb-2 text-center text-lg font-bold">{!! $link->titulo !!}</h6>
                            <p class="mb-6 text-center text-sm text-gray-600">{!! $link->descricao !!}</p>
                        </div>
                        <a href="{{ $link->link }}" target="_blank"
                            class="inline-block rounded-lg border border-blue-600 px-4 py-2 text-center text-sm font-bold text-blue-600 transition-colors hover:bg-blue-600 hover:text-white hover:no-underline">
                            ACESSAR
                        </a>
                    </div>
                @endforeach
            </div>
            <a href="ancora" name="ancora"></a>
        </div>
    @endforeach