@extends('client.raffles.layouts.app')
@section('content')
    <div class="services-banner">
        <img src="{{ asset('raffles/assets/assets/images/backgrounds_general/events-banner.png') }}" width="1425"
            height="356" alt="events ">

    </div>
    <section class="section ">
        <div class="flex flex-col gap-5 justify-center items-center text-center">
            <h2 class="text-60 md:text-30 text-sec">Events</h2>
            <div class="title-line mx-auto"></div>


        </div>
    </section>
    <div class="py-20 container events">
        <div class="sm:block flex justify-between items-center mb-40 mt-40">
            <h2 class="ld-fh-element inline-block relative mt-10 mb-0 section-heading-sec">
                Upcoming Events
            </h2>
            <!-- <div class="flex gap-10 mt-10">
                            <select name="" id="weekdays">
                                <option value="" selected hidden>select category</option>
                                <option value=""></option>
                            </select>
                            <select name="" id="eventType">
                                <option value="" selected hidden>select category</option>
                                <option value=""></option>
                            </select>
                        </div> -->
        </div>

        <div class="swiper swiper-events mt-40 mb-40">
            <div class="swiper-wrapper">
                <a href="" class="swiper-slide">
                    <div class="event-block relative w-full">
                        <div class="w-full rounded-30">
                            <img src="assets/images/general/event1.jfif" alt="">
                        </div>
                        <div class="flex items-center gap-20 py-20 px-20 bg-white rounded-30">
                            <div>
                                <h4 class="text-16  text-ter">Apr</h4>
                                <h4 class="text-18 font-bold text-black">14</h4>
                            </div>
                            <div>
                                <h3 class="text-16 text-black">Free ilets Class: Raffles Educare Associates</h3>
                                <p class="text-14 p-0 m-0 text-grey">Join the free ilets Classes </p>
                                <p class="text-14 text-grey">Starting from 5 pm - 7 pm </p>
                            </div>
                        </div>
                    </div>

                </a>

                <a href="" class="swiper-slide">
                    <div class="event-block relative w-full">
                        <div class="w-full rounded-30">
                            <img src="assets/images/general/event1.jfif" alt="">
                        </div>
                        <div class="flex items-center gap-20 py-20 px-20 bg-white rounded-30">
                            <div>
                                <h4 class="text-16  text-ter">Apr</h4>
                                <h4 class="text-18 font-bold text-black">14</h4>
                            </div>
                            <div>
                                <h3 class="text-16 text-black">Free ilets Class: Raffles Educare Associates</h3>
                                <p class="text-14 p-0 m-0 text-grey">Join the free ilets Classes </p>
                                <p class="text-14 text-grey">Starting from 5 pm - 7 pm </p>
                            </div>
                        </div>
                    </div>

                </a>
                <a href="" class="swiper-slide">
                    <div class="event-block relative w-full">
                        <div class="w-full rounded-30">
                            <img src="assets/images/general/event1.jfif" alt="">
                        </div>
                        <div class="flex items-center gap-20 py-20 px-20 bg-white rounded-30">
                            <div>
                                <h4 class="text-16  text-ter">Apr</h4>
                                <h4 class="text-18 font-bold text-black">14</h4>
                            </div>
                            <div>
                                <h3 class="text-16 text-black">Free ilets Class: Raffles Educare Associates</h3>
                                <p class="text-14 p-0 m-0 text-grey">Join the free ilets Classes </p>
                                <p class="text-14 text-grey">Starting from 5 pm - 7 pm </p>
                            </div>
                        </div>
                    </div>

                </a>
                <a href="" class="swiper-slide">
                    <div class="event-block relative w-full">
                        <div class="w-full rounded-30">
                            <img src="assets/images/general/event1.jfif" alt="">
                        </div>
                        <div class="flex items-center gap-20 py-20 px-20 bg-white rounded-30">
                            <div>
                                <h4 class="text-16  text-ter">Apr</h4>
                                <h4 class="text-18 font-bold text-black">14</h4>
                            </div>
                            <div>
                                <h3 class="text-16 text-black">Free ilets Class: Raffles Educare Associates</h3>
                                <p class="text-14 p-0 m-0 text-grey">Join the free ilets Classes </p>
                                <p class="text-14 text-grey">Starting from 5 pm - 7 pm </p>
                            </div>
                        </div>
                    </div>

                </a>
                <a href="" class="swiper-slide">
                    <div class="event-block relative w-full">
                        <div class="w-full rounded-30">
                            <img src="assets/images/general/event1.jfif" alt="">
                        </div>
                        <div class="flex items-center gap-20 py-20 px-20 bg-white rounded-30">
                            <div>
                                <h4 class="text-16  text-ter">Apr</h4>
                                <h4 class="text-18 font-bold text-black">14</h4>
                            </div>
                            <div>
                                <h3 class="text-16 text-black">Free ilets Class: Raffles Educare Associates</h3>
                                <p class="text-14 p-0 m-0 text-grey">Join the free ilets Classes </p>
                                <p class="text-14 text-grey">Starting from 5 pm - 7 pm </p>
                            </div>
                        </div>
                    </div>

                </a>
            </div>
            <!-- Pagination -->
            <!-- <div class="swiper-pagination"></div> -->
            <!-- Navigation Buttons -->
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>


        <!-- past events  -->

        <div class="sm:block flex justify-between items-center mb-40 mt-40">
            <h2 class="ld-fh-element inline-block relative mt-10 mb-0 section-heading-sec">
                Past Events
            </h2>

        </div>

        <div class="swiper swiper-events mt-40">
            <div class="swiper-wrapper">
                <a href="" class="swiper-slide">
                    <div class="event-block relative w-full">
                        <div class="w-full rounded-30">
                            <img src="assets/images/general/event1.jfif" alt="">
                        </div>
                        <div class="flex items-center gap-20 py-20 px-20 bg-white rounded-30">
                            <div>
                                <h4 class="text-16  text-ter">Apr</h4>
                                <h4 class="text-18 font-bold text-black">14</h4>
                            </div>
                            <div>
                                <h3 class="text-16 text-black">Free ilets Class: Raffles Educare Associates</h3>
                                <p class="text-14 p-0 m-0 text-grey">Join the free ilets Classes </p>
                                <p class="text-14 text-grey">Starting from 5 pm - 7 pm </p>
                            </div>
                        </div>
                    </div>

                </a>

                <a href="" class="swiper-slide">
                    <div class="event-block relative w-full">
                        <div class="w-full rounded-30">
                            <img src="assets/images/general/event1.jfif" alt="">
                        </div>
                        <div class="flex items-center gap-20 py-20 px-20 bg-white rounded-30">
                            <div>
                                <h4 class="text-16  text-ter">Apr</h4>
                                <h4 class="text-18 font-bold text-black">14</h4>
                            </div>
                            <div>
                                <h3 class="text-16 text-black">Free ilets Class: Raffles Educare Associates</h3>
                                <p class="text-14 p-0 m-0 text-grey">Join the free ilets Classes </p>
                                <p class="text-14 text-grey">Starting from 5 pm - 7 pm </p>
                            </div>
                        </div>
                    </div>

                </a>
                <a href="" class="swiper-slide">
                    <div class="event-block relative w-full">
                        <div class="w-full rounded-30">
                            <img src="assets/images/general/event1.jfif" alt="">
                        </div>
                        <div class="flex items-center gap-20 py-20 px-20 bg-white rounded-30">
                            <div>
                                <h4 class="text-16  text-ter">Apr</h4>
                                <h4 class="text-18 font-bold text-black">14</h4>
                            </div>
                            <div>
                                <h3 class="text-16 text-black">Free ilets Class: Raffles Educare Associates</h3>
                                <p class="text-14 p-0 m-0 text-grey">Join the free ilets Classes </p>
                                <p class="text-14 text-grey">Starting from 5 pm - 7 pm </p>
                            </div>
                        </div>
                    </div>

                </a>
                <a href="" class="swiper-slide">
                    <div class="event-block relative w-full">
                        <div class="w-full rounded-30">
                            <img src="assets/images/general/event1.jfif" alt="">
                        </div>
                        <div class="flex items-center gap-20 py-20 px-20 bg-white rounded-30">
                            <div>
                                <h4 class="text-16  text-ter">Apr</h4>
                                <h4 class="text-18 font-bold text-black">14</h4>
                            </div>
                            <div>
                                <h3 class="text-16 text-black">Free ilets Class: Raffles Educare Associates</h3>
                                <p class="text-14 p-0 m-0 text-grey">Join the free ilets Classes </p>
                                <p class="text-14 text-grey">Starting from 5 pm - 7 pm </p>
                            </div>
                        </div>
                    </div>

                </a>
                <a href="" class="swiper-slide">
                    <div class="event-block relative w-full">
                        <div class="w-full rounded-30">
                            <img src="assets/images/general/event1.jfif" alt="">
                        </div>
                        <div class="flex items-center gap-20 py-20 px-20 bg-white rounded-30">
                            <div>
                                <h4 class="text-16  text-ter">Apr</h4>
                                <h4 class="text-18 font-bold text-black">14</h4>
                            </div>
                            <div>
                                <h3 class="text-16 text-black">Free ilets Class: Raffles Educare Associates</h3>
                                <p class="text-14 p-0 m-0 text-grey">Join the free ilets Classes </p>
                                <p class="text-14 text-grey">Starting from 5 pm - 7 pm </p>
                            </div>
                        </div>
                    </div>

                </a>
            </div>
            <!-- Pagination -->
            <!-- <div class="swiper-pagination"></div> -->
            <!-- Navigation Buttons -->
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>


        <!-- Blog -->

        <div class=" flex flex-col gap-20 justify-center items-center mb-40 mt-40">
            <h2 class="ld-fh-element inline-block relative mt-10 mb-0 section-heading-sec">
                Blog
            </h2>
            <p class="text-18 text-center">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate, assumenda.
            </p>

        </div>

        <div class="swiper swiper-events mt-40 mb-20">
            <div class="swiper-wrapper">
                <a href="" class="swiper-slide flex flex-col gap-20 p-10  blog-post">
                    <div class="w-100percent h-210 overflow-hidden rounded-16">
                        <img class="w-full h-full object-cover rounded-16" src="assets/images/general/blog1.jfif"
                            alt="">
                    </div>
                    <div>
                        <span class="bg-gray text-sec rounded-30 text-10 py-5 px-10 mt-10">20 min read</span>
                        <h2 class="text-20 text-ter pt-10">How Successfully Used Paid Marketing to Drive Incremental
                            Ticket Sales</h2>
                    </div>
                    <div class="flex flex-col gap-10">
                        <p class="text-14 text-black">Lorem ipsum dolor sit amet consectetur adipisicing elit.
                            Inventore reprehenderit, dolor ad quis dignissimos aliquid nesciunt distinctio suscipit
                            ipsam voluptatum.</p>
                        <p class="text-12">12 Mar - Jhon Doe</p>

                    </div>

                </a>

                <a href="" class="swiper-slide flex flex-col gap-20 p-10 blog-post">
                    <div class="w-100percent h-210 overflow-hidden rounded-16">
                        <img class="w-full h-full object-cover rounded-16" src="assets/images/general/blog1.jfif"
                            alt="">
                    </div>
                    <div>
                        <span class="bg-gray text-sec rounded-30 text-10 py-5 px-10 mt-10">20 min read</span>
                        <h2 class="text-20 text-ter pt-10">How Successfully Used Paid Marketing to Drive Incremental
                            Ticket Sales</h2>
                    </div>
                    <div class="flex flex-col gap-10">
                        <p class="text-14 text-black">Lorem ipsum dolor sit amet consectetur adipisicing elit.
                            Inventore reprehenderit, dolor ad quis dignissimos aliquid nesciunt distinctio suscipit
                            ipsam voluptatum.</p>
                        <p class="text-12">12 Mar - Jhon Doe</p>

                    </div>

                </a>
                <a href="" class="swiper-slide flex flex-col gap-20 p-10 blog-post">
                    <div class="w-100percent h-210 overflow-hidden rounded-16">
                        <img class="w-full h-full object-cover rounded-16" src="assets/images/general/blog1.jfif"
                            alt="">
                    </div>
                    <div>
                        <span class="bg-gray text-sec rounded-30 text-10 py-5 px-10 mt-10">20 min read</span>
                        <h2 class="text-20 text-ter pt-10">How Successfully Used Paid Marketing to Drive Incremental
                            Ticket Sales</h2>
                    </div>
                    <div class="flex flex-col gap-10">
                        <p class="text-14 text-black">Lorem ipsum dolor sit amet consectetur adipisicing elit.
                            Inventore reprehenderit, dolor ad quis dignissimos aliquid nesciunt distinctio suscipit
                            ipsam voluptatum.</p>
                        <p class="text-12">12 Mar - Jhon Doe</p>

                    </div>

                </a>
                <a href="" class="swiper-slide flex flex-col gap-20 p-10 blog-post">
                    <div class="w-100percent h-210 overflow-hidden rounded-16">
                        <img class="w-full h-full object-cover rounded-16" src="assets/images/general/blog1.jfif"
                            alt="">
                    </div>
                    <div>
                        <span class="bg-gray text-sec rounded-30 text-10 py-5 px-10 mt-10">20 min read</span>
                        <h2 class="text-20 text-ter pt-10">How Successfully Used Paid Marketing to Drive Incremental
                            Ticket Sales</h2>
                    </div>
                    <div class="flex flex-col gap-10">
                        <p class="text-14 text-black">Lorem ipsum dolor sit amet consectetur adipisicing elit.
                            Inventore reprehenderit, dolor ad quis dignissimos aliquid nesciunt distinctio suscipit
                            ipsam voluptatum.</p>
                        <p class="text-12">12 Mar - Jhon Doe</p>

                    </div>

                </a>
                <a href="" class="swiper-slide flex flex-col gap-20 p-10 blog-post">
                    <div class="w-100percent h-210 overflow-hidden rounded-16">
                        <img class="w-full h-full object-cover rounded-16" src="assets/images/general/blog1.jfif"
                            alt="">
                    </div>
                    <div>
                        <span class="bg-gray text-sec rounded-30 text-10 py-5 px-10 mt-10">20 min read</span>
                        <h2 class="text-20 text-ter pt-10">How Successfully Used Paid Marketing to Drive Incremental
                            Ticket Sales</h2>
                    </div>
                    <div class="flex flex-col gap-10">
                        <p class="text-14 text-black">Lorem ipsum dolor sit amet consectetur adipisicing elit.
                            Inventore reprehenderit, dolor ad quis dignissimos aliquid nesciunt distinctio suscipit
                            ipsam voluptatum.</p>
                        <p class="text-12">12 Mar - Jhon Doe</p>

                    </div>

                </a>
            </div>
            <!-- Pagination -->
            <!-- <div class="swiper-pagination"></div> -->
            <!-- Navigation Buttons -->
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>
        <div class="flex  justify-center items-center ">
            <button class="text-center bg-white  text-ter rounded-30 text-14">Load More</button>


        </div>


    </div>
@endsection