@section('title'){{ config('app.settings.app_name') }} Blog - Your Guide to the Latest Trends @endsection
<main>
    <flux:heading class="mb-3 truncate" size="xl" level="1">Latest Articles</flux:heading>
    <div class="mb-3"></div>
    <div class="flex justify-center items-center py-3">
        <div class="flex justify-center items-center">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 p-1">

                @foreach(collect(config('app.blogs'))->reverse() as $i => $blog)
                    <a href="{{ route('blog', $blog->slug) }}">
                        <div class="flex items-center">
                            <div class="group relative mx-auto w-96 overflow-hidden rounded-[16px] dark:bg-zinc-800 bg-zinc-200 p-[1px] ease-in-out hover:bg-gradient-to-r hover:from-zinc-600 hover:via-zinc-800 hover:to-zinc-700">
                                <div class="group-hover:animate-spin-slow invisible absolute -top-40 -bottom-40 left-10 right-10 bg-gradient-to-r from-transparent via-gray-600 to-transparent group-hover:visible"></div>
                                <div class="relative rounded-[15px] dark:bg-zinc-900 bg-zinc-100 dark:text-white text-accent-content p-6">
                                    <div class="space-y-4">
                                        <p class="font-md text-slate-500">
                                            <img src="{{ asset('storage/'.$blog->post_image) }}" class="card-img-top" alt="{{ $blog->slug }}">
                                        </p>
                                        <p class="text-lg font-semibold dark:text-white text-accent-content truncate">{{ $blog->post }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>
                @endforeach
            </div>
        </div>
    </div>
</main>