<a href="#" class="animate-pulse block ring-1 ring-gray-950/5 dark:bg-gray-700 dark:ring-white/10 md:px-5 md:py-5 p-4 bg-gray-200 rounded-xl {{$homeSettings->enable_hover_animation?'classic-hover-shadow':''}}">
    <div class="flex md:gap-x-3 flex-col md:flex-row items-center md:items-start">
        <!-- Category Icon Placeholder -->
        <div class="h-14 w-14 md:w-20 md:h-20 bg-gray-300 dark:bg-gray-600 rounded-full pb-3"></div>
        <div>
            <!-- Category Name Placeholder -->
            <div class="md:text-lg text-center md:text-left bg-gray-300 dark:bg-gray-600 rounded w-3/4 h-4"></div>
            <!-- Category Description Placeholder -->
            <div class="py-2 hidden md:block bg-gray-300 dark:bg-gray-600 rounded w-full h-4"></div>
            <div class="py-2 hidden md:block bg-gray-300 dark:bg-gray-600 rounded w-2/3 h-4 mt-2"></div>

            <div class="hidden lg:flex gap-x-7 mt-2">
                <!-- Sellers Count Placeholder -->
                <div class="flex gap-x-1.5 items-center">
                    <div class="w-5 h-5 bg-gray-300 dark:bg-gray-600 rounded-full mr-2"></div>
                    <div class="text-sm bg-gray-300 dark:bg-gray-600 rounded w-16 h-4"></div>
                </div>
                <!-- Listings Count Placeholder -->
                <div class="flex gap-x-1.5 items-center">
                    <div class="w-4 h-4 bg-gray-300 dark:bg-gray-600 rounded-full mr-2"></div>
                    <div class="text-sm bg-gray-300 dark:bg-gray-600 rounded w-16 h-4"></div>
                </div>
                <!-- Sales Count Placeholder -->
                <div class="flex gap-x-1.5 items-center">
                    <div class="w-4 h-4 bg-gray-300 dark:bg-gray-600 rounded-full mr-2"></div>
                    <div class="text-sm bg-gray-300 dark:bg-gray-600 rounded w-16 h-4"></div>
                </div>
            </div>
        </div>
    </div>
</a>
