@php
    $cards = [
        [
            'title' => 'Language Course A',
            'description' => 'Join our Language Course A group.',
            'link' => '#',
        ],
        [
            'title' => 'Language Course B',
            'description' => 'Join our Language Course B group.',
            'link' => '#',
        ],
        [
            'title' => 'Language Course C',
            'description' => 'Join our Language Course C group.',
            'link' => '#',
        ],
        [
            'title' => 'Language Course D',
            'description' => 'Join our Language Course D group.',
            'link' => '#',
        ],
        [
            'title' => 'Language Course E',
            'description' => 'Join our Language Course E group.',
            'link' => '#',
        ],
        [
            'title' => 'Language Course F',
            'description' => 'Join our Language Course F group.',
            'link' => '#',
        ],
        [
            'title' => 'Language Course G',
            'description' => 'Join our Language Course G group.',
            'link' => '#',
        ],
        [
            'title' => 'Language Course H',
            'description' => 'Join our Language Course H group.',
            'link' => '#',
        ],
    ];
@endphp

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
    @foreach ($cards as $card)
        <div class="border border-transparent rounded-lg shadow-lg p-6 bg-white flex flex-col justify-between">
            <div>
                <div class="flex justify-center mb-4">
                    <div class="inline-flex items-center justify-center w-12 h-12 text-2xl text-white bg-main rounded-full">
                        <i class='bx bxl-telegram'></i>
                    </div>
                </div>
                <h2 class="text-lg font-bold text-center">{{ $card['title'] }}</h2>
                <p class="text-sm text-center text-gray-600">{{ $card['description'] }}</p>
            </div>
            <a href="{{ $card['link'] }}" target="_blank" class="block mt-4 bg-gradient-to-r from-main to-[#6e4dff] text-white text-center py-2 rounded-lg hover:bg-secondary transition">
                Join Now
            </a>
        </div>
    @endforeach
</div>