@extends('frontend::layouts.master')

@section('content')

    <section class="pt-16 pb-10 lg:pb-20 bg-[#F3F4F6]">
        <div class="container">
            <div class="flex flex-wrap -mx-4">
                <div class="w-full px-4">
                    <div class="text-center mx-auto mb-12 lg:mb-16 max-w-[510px]">
                        <h2 class="font-bold text-3xl sm:text-4xl md:text-[40px] text-dark mb-4 ">
                            News & Activities
                        </h2>
                        <p class="text-base text-body-color">
                            There are many variations of passages of Lorem Ipsum available
                            but the majority have suffered alteration in some form.
                        </p>
                    </div>
                </div>
            </div>
            <div class="flex flex-wrap -mx-2 2xl:-mx-4">

                @for ($exam = 0; $exam < 3; $exam++)
                    @for ($i = 0; $i < 4; $i++)
                        <div class="w-full xs:w-1/2 lg:w-1/3 2xl:w-1/4 px-2 2xl:px-4">
                            <div class="bg-white rounded-lg overflow-hidden mb-6 2xl:mb-10">
                                <a href="blog-detail">
                                    <img src="{{ Module::asset('frontend:img/blog.jpg') }}" alt="Blog" class="w-full">
                                </a>
                                <div class="p-4 xl:p-7 text-center">
                                    <h3>
                                        <a href="blog-detail" class="leading-6 font-semibold text-dark text-xl sm:text-[22px] md:text-xl lg:text-[22px] xl:text-xl 2xl:text-[22px] mb-4 block hover:text-primary">
                                            Lorem ipsum dolor sit amet pretium consectetur adipiscing elit.
                                        </a>
                                    </h3>
                                    <p class="text-base text-body-color mb-7">
                                        Lorem ipsum dolor sit amet pretium consectetur adipiscing elit. Lorem consectetur adipiscing elit.
                                    </p>
                                    <a href="blog-detail" class="mb-2 inline-block py-2 px-7 border border-[#E5E7EB] rounded-[10px] text-base text-body-color font-medium hover:border-primary hover:bg-primary hover:text-white transition">
                                        View Details
                                    </a>
                                </div>
                            </div>
                        </div>
                    @endfor
                @endfor

            </div>
            <ol class="flex justify-center gap-1 font-medium mx-auto mt-8">
                <li>
                    <a href="#"
                        class="px-2.5 py-3.5 inline-flex size-16 items-center justify-center rounded border border-gray-300 bg-white text-gray-900 rtl:rotate-180">
                        <span class="sr-only">Prev Page</span>
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd"
                                d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
                                clip-rule="evenodd" />
                        </svg>
                    </a>
                </li>
    
                <li>
                    <a href="#"
                        class="px-4 py-1 block size-16 rounded border border-gray-300 bg-white text-center leading-8 text-gray-900">
                        1
                    </a>
                </li>
    
                <li class="px-4 py-1 block size-16 rounded border-primary bg-primary text-center leading-8 text-white">
                    2
                </li>
    
                <li>
                    <a href="#"
                        class="px-4 py-1 block size-16 rounded border border-gray-300 bg-white text-center leading-8 text-gray-900">
                        3
                    </a>
                </li>
    
                <li>
                    <a href="#"
                        class="px-4 py-1 block size-16 rounded border border-gray-300 bg-white text-center leading-8 text-gray-900">
                        4
                    </a>
                </li>
    
                <li>
                    <a href="#"
                        class="px-2.5 py-3.5 inline-flex size-16 items-center justify-center rounded border border-gray-300 bg-white text-gray-900 rtl:rotate-180">
                        <span class="sr-only">Next Page</span>
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd"
                                d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
                                clip-rule="evenodd" />
                        </svg>
                    </a>
                </li>
            </ol>
        </div>
    </section>
@endsection