@extends('layouts.main-app')

@section('title', 'Dashboard')

@section('content')

    @include('layouts.navbar')

    <div>
        <!-- Banner -->
        <div class="swiper-container relative w-full h-full overflow-hidden">
            <div class="swiper-wrapper w-full ">
                @foreach ($banner as $banner)
                    <div class="swiper-slide relative">
                        <img src="{{ asset($banner->image_path) }}" alt="Banner" class="w-full h-full object-cover absolute">
                        <div class="relative container mx-auto md:py-32 2xl:py-32">
                            <div class="text-white flex flex-col">
                                <div class="w-1/2 2xl:pb-14 py-4">
                                    <!-- Title -->
                                    <div class="px-2 2xl:pr-14">
                                        <h1 class="text-xs md:text-3xl lg:text-6xl font-semibold py-2">{{ $banner->title }}
                                        </h1>
                                    </div>
                                    <!-- SubTitle -->
                                    <div class="px-2 pr-8 pb-14 lg:pb-32 md:pr-14 lg:pr-24">
                                        <p class="text-[0.5rem] md:text-base lg:text-lg">{{ $banner->subtitle }}</p>
                                    </div>
                                    <div class="px-2">
                                        <button
                                            class="text-white bg-[#FBAF43] focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-full text-[0.5rem] px-2 py-1 md:text-base lg:text-xl lg:px-14 lg:py-4">GET
                                            STARTED</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>

            <!-- Add Navigation -->
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>


        <!-- Content -->
        <div class="container mx-auto w-full h-full mt-8">
            <div class="grid grid-cols-1 xl:grid-cols-2">
                <div>
                    <h1 class="text-6xl font-bold text-center lg:text-start">Who We Are</h1>
                    <p class="py-10 2xl:mr-24 text-center lg:text-start">Lorem ipsum odor amet, consectetuer adipiscing
                        elit.
                        Varius vivamus
                        a eget
                        dictumst
                        magnis sem.
                        Mattis finibus metus taciti sapien rhoncus senectus neque enim. At vestibulum sapien pharetra
                        convallis penatibus curae commodo. Duis pharetra finibus lectus, sem proin aliquam condimentum
                        molestie? Aenean platea ex posuere et fusce elit feugiat. Himenaeos maecenas natoque conubia
                        tristique sollicitudin auctor.</p>
                    <div class=" py-14 lg:py-2 flex justify-center lg:justify-start">
                        <button class="bg-[#FBAF43] text-white shadow-lg px-8 py-4 rounded-full">KNOW MORE ABOUT US</button>
                    </div>
                </div>
                <div>
                    <img src="{{ asset('images/img-about-1.webp') }}" alt="Banner" class="w-full h-auto">
                </div>
                <div class="py-14">
                    <img src="{{ asset('images/img-about-2.webp') }}" alt="Banner" class="w-full h-auto">
                </div>
                <div class="lg:py-14">
                    <h1 class="text-6xl font-bold flex justify-center md:justify-end mb-8">Why Us</h1>
                    <div class="grid grid-cols-1 md:grid-cols-2 ml-6">
                        <div>
                            <div class="flex gap-2 py-4">
                                <img src="{{ asset('images/icon-check.webp') }}" alt="Banner" class="w-8 h-8">
                                <span class="flex items-center">VAT Exempted</span>
                            </div>
                            <hr>
                            <div class="flex gap-2 py-4">
                                <img src="{{ asset('images/icon-check.webp') }}" alt="Banner" class="w-8 h-8">
                                <span class="flex items-center">Member-Owner Benefits</span>
                            </div>
                            <hr>
                            <div class="flex gap-2 py-4">
                                <img src="{{ asset('images/icon-check.webp') }}" alt="Banner" class="w-8 h-8">
                                <span class="flex items-center">DO 174 Complaint</span>
                            </div>
                            <hr>
                            <div class="flex gap-2 py-4">
                                <img src="{{ asset('images/icon-check.webp') }}" alt="Banner" class="w-8 h-8">
                                <span class="flex items-center">Interest on share capital and Patronage Refunds</span>
                            </div>
                        </div>
                        <div class="md:pl-6">
                            <div class="flex gap-2 py-4">
                                <img src="{{ asset('images/icon-check.webp') }}" alt="Banner" class="w-8 h-8">
                                <span class="flex items-center">In-house Industrial Engineering Team</span>
                            </div>
                            <hr>
                            <div class="flex gap-2 py-4">
                                <img src="{{ asset('images/icon-check.webp') }}" alt="Banner" class="w-8 h-8">
                                <span class="flex items-center">Partner Credit Cooperative Loans</span>
                            </div>
                            <hr>
                            <div class="flex gap-2 py-4">
                                <img src="{{ asset('images/icon-check.webp') }}" alt="Banner" class="w-8 h-8">
                                <span class="flex items-center">In-house Medical Benefits</span>
                            </div>
                            <hr>
                            <div class="flex gap-2 py-4">
                                <img src="{{ asset('images/icon-check.webp') }}" alt="Banner" class="w-8 h-8">
                                <span class="flex items-center">High-yield Investment Opportunities</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="relative">
            <img src="{{ asset('images/bg-services.webp') }}" alt="Banner"
                class="w-full h-full hidden lg:block absolute">
            <div class="relative  flex justify-center px-4">
                <div class="container mx-auto">
                    <div class=" py-14">
                        <h1 class="text-center text-[#0D78BC] lg:text-white text-2xl lg:text-6xl font-bold">Multi-Industry
                            Services</h1>
                        <p class="text-center text-sm text-[#0D78BC] lg:text-white">Lorem ipsum odor amet, consectetuer
                            adipiscing elit.
                            Varius
                            vivamus a
                            eget dictumst magnis sem.</p>
                    </div>
                    <div class="container mx-auto relative py-4 data-aos="fade-up" data-aos-duration="3000">
                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 ">
                            <div class="container mx-auto relative data-aos="fade-up" data-aos-duration="3000"">
                                <img src="{{ asset('images/card-service-1.webp') }}" alt="Card Service 1" class="">
                                <div class="absolute inset-0 grid grid-rows-2 items-center p-8 gap-y-6">
                                    <h1
                                        class="text-white text-lg xl:text-2xl p-2 rounded flex justify-center px-10 py-6 xl:py-10">
                                        AGRIBUSINESS
                                    </h1>
                                    <p class="text-white text-xs">Lorem ipsum odor amet, consectetuer adipiscing elit.
                                        Varius
                                        vivamus a
                                        eget dictumst magnis sem.</p>
                                </div>
                            </div>

                            <div class="container mx-auto relative data-aos="fade-up" data-aos-duration="3000"">
                                <img src="{{ asset('images/card-service-2.webp') }}" alt="Card Service 1" class="">
                                <div class="absolute inset-0 grid grid-rows-2 items-center p-8 gap-y-6">
                                    <h1
                                        class="text-white text-lg xl:text-2xl p-2 rounded flex justify-center px-10 py-6 xl:py-10 2xl:px-14">
                                        AVIATION SUPPORT
                                    </h1>
                                    <p class="text-white text-xs">Lorem ipsum odor amet, consectetuer adipiscing elit.
                                        Varius
                                        vivamus a
                                        eget dictumst magnis sem.</p>
                                </div>
                            </div>

                            <div class="container mx-auto relative data-aos="fade-up" data-aos-duration="3000"">
                                <img src="{{ asset('images/card-service-3.webp') }}" alt="Card Service 1"
                                    class="">
                                <div class="absolute inset-0 grid grid-rows-2 items-center p-8 gap-y-6">
                                    <h1
                                        class="text-white text-lg xl:text-2xl p-2 rounded flex justify-center px-10 py-6 xl:py-10">
                                        CONSTRUCTION
                                    </h1>
                                    <p class="text-white text-xs">Lorem ipsum odor amet, consectetuer adipiscing elit.
                                        Varius
                                        vivamus a
                                        eget dictumst magnis sem.</p>
                                </div>
                            </div>

                            <div class="container mx-auto relative data-aos="fade-up" data-aos-duration="3000"">
                                <img src="{{ asset('images/card-service-4.webp') }}" alt="Card Service 1"
                                    class="">
                                <div class="absolute inset-0 grid grid-rows-2 items-center p-8 gap-y-6">
                                    <h1
                                        class="text-white text-sm xl:text-base 2xl:text-lg p-2 rounded flex justify-center text-center xl:text-start px-10 py-6 xl:py-10 2xl:px-14">
                                        FACILITIES MAINTENANCE AND MANAGEMENT
                                    </h1>
                                    <p class="text-white text-xs">Lorem ipsum odor amet, consectetuer adipiscing elit.
                                        Varius
                                        vivamus a
                                        eget dictumst magnis sem.</p>
                                </div>
                            </div>

                            <div class="container mx-auto relative data-aos="fade-up" data-aos-duration="3000"">
                                <img src="{{ asset('images/card-service-5.webp') }}" alt="Card Service 1"
                                    class="">
                                <div class="absolute inset-0 grid grid-rows-2 items-center p-8 gap-y-6">
                                    <h1
                                        class="text-white text-lg xl:text-2xl p-2 rounded flex justify-center px-10 py-6 xl:py-10">
                                        MANUFACTURING
                                    </h1>
                                    <p class="text-white text-xs">Lorem ipsum odor amet, consectetuer adipiscing elit.
                                        Varius
                                        vivamus a
                                        eget dictumst magnis sem.</p>
                                </div>
                            </div>

                            <div class="container mx-auto relative data-aos="fade-up" data-aos-duration="3000"">
                                <img src="{{ asset('images/card-service-6.webp') }}" alt="Card Service 1"
                                    class="">
                                <div class="absolute inset-0 grid grid-rows-2 items-center p-8 gap-y-6">
                                    <h1
                                        class="text-white text-lg xl:text-2xl p-2 rounded flex justify-center px-10 py-6 xl:py-10 2xl:px-14">
                                        HOTEL & HOSPITALITY
                                    </h1>
                                    <p class="text-white text-xs">Lorem ipsum odor amet, consectetuer adipiscing elit.
                                        Varius
                                        vivamus a
                                        eget dictumst magnis sem.</p>
                                </div>
                            </div>

                            <div class="container mx-auto relative data-aos="fade-up" data-aos-duration="3000"">
                                <img src="{{ asset('images/card-service-7.webp') }}" alt="Card Service 1"
                                    class="">
                                <div class="absolute inset-0 grid grid-rows-2 items-center p-8 gap-y-6">
                                    <h1
                                        class="text-white text-lg xl:text-2xl p-2 rounded flex justify-center text-center xl:text-start px-14 py-6 xl:py-10">
                                        RETAIL AND MERCHANDISING
                                    </h1>
                                    <p class="text-white text-xs px-4 2xl:px-0">Lorem ipsum odor amet, consectetuer
                                        adipiscing elit.
                                        Varius
                                        vivamus a
                                        eget dictumst magnis sem.</p>
                                </div>
                            </div>

                            <div class="container mx-auto relative data-aos="fade-up" data-aos-duration="3000"">
                                <img src="{{ asset('images/card-service-8.webp') }}" alt="Card Service 1"
                                    class="">
                                <div class="absolute inset-0 grid grid-rows-2 items-center p-8 gap-y-6">
                                    <h1
                                        class="text-white text-lg xl:text-2xl p-2 rounded flex justify-center px-10 py-6 xl:py-10 2xl:px-14">
                                        RESTAURANT & QSR
                                    </h1>
                                    <p class="text-white text-xs">Lorem ipsum odor amet, consectetuer adipiscing elit.
                                        Varius
                                        vivamus a
                                        eget dictumst magnis sem.</p>
                                </div>
                            </div>
                            <div class="md:hidden xl:block">
                            </div>
                            <div class="container mx-auto relative data-aos="fade-up" data-aos-duration="3000"">
                                <img src="{{ asset('images/card-service-9.webp') }}" alt="Card Service 1"
                                    class="">
                                <div class="absolute inset-0 grid grid-rows-2 items-center p-8 gap-y-6">
                                    <h1
                                        class="text-white text-lg xl:text-2xl p-2 rounded flex justify-center px-10 py-6 xl:py-10">
                                        SOLAR FARM
                                    </h1>
                                    <p class="text-white text-xs">Lorem ipsum odor amet, consectetuer adipiscing elit.
                                        Varius
                                        vivamus a
                                        eget dictumst magnis sem.</p>
                                </div>
                            </div>
                            <div class="container mx-auto relative data-aos="fade-up" data-aos-duration="3000"">
                                <img src="{{ asset('images/card-service-10.webp') }}" alt="Card Service 1"
                                    class="">
                                <div class="absolute inset-0 grid grid-rows-2 items-center p-8 gap-y-6">
                                    <h1
                                        class="text-white text-lg xl:text-xl p-2 rounded flex justify-center text-center xl:text-start 2xl:text-center px-10 py-6 xl:py-10">
                                        WAREHOUSE & SUPPLY CHAIN
                                    </h1>
                                    <p class="text-white text-xs">Lorem ipsum odor amet, consectetuer adipiscing elit.
                                        Varius
                                        vivamus a
                                        eget dictumst magnis sem.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div>
            <div class="h-full ">
                <div class="pt-12 bg-gray-50  sm:pt-20">
                    <div class="max-w-screen-xl px-4 mx-auto sm:px-6 lg:px-8">
                        <div class="max-w-4xl mx-auto text-center">
                            <h2
                                class="lg:text-3xl font-extrabold leading-9 text-gray-900 dark:text-black sm:text-sm sm:leading-10">
                                Your Partner for Sustainable Growth
                            </h2>
                            <p class="mt-3 text-base leading-7 text-black sm:mt-4">
                                Lorem ipsum odor amet, consectetuer adipiscing elit. Varius vivamus a eget dictumst magnis
                                sem. Mattis finibus metus taciti sapien rhoncus senectus neque enim. At vestibulum sapien
                                pharetra convallis penatibus curae commodo.
                            </p>
                        </div>

                        <div class="mt-10 grid grid-cols-1 gap-4 lg:grid-cols-3">
                            <div class="bg-white rounded-lg shadow-lg p-6 text-center">
                                <dd class="text-5xl font-extrabold leading-none text-[#FBAF43]" id="starsCount">
                                    50,000+
                                </dd>
                                <dt class="mt-2 text-lg font-medium leading-6 text-black">
                                    WORKERS
                                </dt>
                            </div>
                            <div class="bg-white rounded-lg shadow-lg p-6 text-center">
                                <dd class="text-5xl font-extrabold leading-none text-[#FBAF43]" id="downloadsCount">
                                    25+
                                </dd>
                                <dt class="mt-2 text-lg font-medium leading-6 text-black">
                                    YEARS OF EXPERTISE
                                </dt>
                            </div>
                            <div class="bg-white rounded-lg shadow-lg p-6 text-center">
                                <dd class="text-5xl font-extrabold leading-none text-[#FBAF43]" id="sponsorsCount">
                                    300+
                                </dd>
                                <dt class="mt-2 text-lg font-medium leading-6 text-black">
                                    INDUSTRIES SERVED
                                </dt>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bg-gray-50">
                <div class="container mx-auto py-32 ">
                    <div class="flex justify-between flex-col lg:flex-row gap-4">
                        <h1 class="text-4xl lg:text-6xl text-center lg:text-start font-semibold">Join Our Growing Team</h1>
                        <div class="flex items-center px-8 justify-center lg:justify-start">
                            <button class=" bg-[#FBAF43] rounded-full text-white font-semibold shadow-xl p-2 px-4">VIEW
                                ALL JOB
                                OPPORTUNITIES</button>
                        </div>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 py-8">
                        @foreach ($jobs as $job)
                            <div class="max-w-sm rounded-lg shadow-2xl p-6 bg-white m-4">
                                <h2 class="text-xl font-bold mb-2">{{ $job->title }}</h2>
                                <div class="flex items-center text-gray-600 mb-4">
                                    <svg class="w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none"
                                        viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M17.657 16.657A8 8 0 113.343 2.343 8 8 0 0117.657 16.657z" />
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M15 11a4 4 0 11-8 0 4 4 0 018 0z" />
                                    </svg>
                                    <span>{{ $job->location }}</span>
                                </div>
                                <p class="text-gray-500 mb-6">{{ Str::limit($job->description, 100, '...') }}</p>
                                <button class="bg-[#FBAF43] text-white font-semibold py-2 px-4 rounded-full">
                                    APPLY NOW
                                </button>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
            <div class="relative">
                <img src="{{ asset('images/bg-map.webp') }}" alt="Banner"
                    class="w-full h-full object-cover absolute ">
                <div class="relative  container mx-auto grid grid-cols-1 lg:grid-cols-2">
                    <div class="py-4">
                        <h1 class="text-3xl text-center lg:text-start  lg:text-6xl text-white font-semibold py-14">
                            Nationwide Capabilities
                        </h1>
                        <img src="{{ asset('images/obj-map.webp') }}" alt="Banner" class="w-full h-auto px-2">
                    </div>
                    <div class="pb-8">
                        <div class="max-w-4xl mx-auto p-6 bg-white shadow-lg rounded-lg border border-t lg:ml-4 py-4">
                            <h2 class="text-2xl font-bold text-center text-[#115D8D] mb-6">Let's Discuss Your Needs Today
                            </h2>

                            <form class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <!-- Full Name -->
                                <div class="col-span-1 md:col-span-2">
                                    <label class="text-sm text-gray-500">Full Name</label>
                                    <input type="text" placeholder="John Doe"
                                        class="w-full border border-gray-300 rounded-lg p-3 mt-1">
                                </div>

                                <!-- Phone Number -->
                                <div>
                                    <input type="text" placeholder="Phone Number"
                                        class="w-full border border-gray-300 rounded-lg p-3 mt-1">
                                </div>

                                <!-- Email -->
                                <div>
                                    <input type="email" placeholder="Email"
                                        class="w-full border border-gray-300 rounded-lg p-3 mt-1">
                                </div>

                                <!-- Job Title -->
                                <div>
                                    <input type="text" placeholder="Job Title"
                                        class="w-full border border-gray-300 rounded-lg p-3 mt-1">
                                </div>

                                <!-- Company Name -->
                                <div>
                                    <input type="text" placeholder="Company Name"
                                        class="w-full border border-gray-300 rounded-lg p-3 mt-1">
                                </div>

                                <!-- Company Address -->
                                <div class="col-span-1 md:col-span-2">
                                    <input type="text" placeholder="Company Address"
                                        class="w-full border border-gray-300 rounded-lg p-3 mt-1">
                                </div>

                                <!-- Location (Region/State & City) -->
                                <div>
                                    <label class="text-sm text-gray-500">Region/State</label>
                                    <select class="w-full border border-gray-300 rounded-lg p-3 mt-1">
                                        <option>Select Region/State</option>
                                    </select>
                                </div>

                                <div>
                                    <label class="text-sm text-gray-500">City</label>
                                    <select class="w-full border border-gray-300 rounded-lg p-3 mt-1">
                                        <option>Select City</option>
                                    </select>
                                </div>

                                <!-- Number of Headcount and Preferred Start Date -->
                                <div>
                                    <input type="number" placeholder="Number of headcount required"
                                        class="w-full border border-gray-300 rounded-lg p-3 mt-1">
                                </div>

                                <div class="relative">
                                    <input type="text" placeholder="Preferred Start Date"
                                        class="w-full border border-gray-300 rounded-lg p-3 mt-1">
                                    <div class="absolute inset-y-0 right-0 pr-3 flex items-center">
                                        <svg class="w-6 h-6 text-gray-500" fill="none" stroke="currentColor"
                                            viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M8 7V3m8 0v4M3 11h18M4 19h16a2 2 0 002-2V7a2 2 0 00-2-2H4a2 2 0 00-2 2v10a2 2 0 002 2z">
                                            </path>
                                        </svg>
                                    </div>
                                </div>

                                <!-- Type of Service -->
                                <div class="col-span-1 md:col-span-2">
                                    <input type="text" placeholder="Type of service needed"
                                        class="w-full border border-gray-300 rounded-lg p-3 mt-1">
                                </div>

                                <!-- Message -->
                                <div class="col-span-1 md:col-span-2">
                                    <textarea placeholder="Write your message" class="w-full border border-gray-300 rounded-lg p-3 mt-1"></textarea>
                                </div>

                                <!-- CAPTCHA Code -->
                                <div>
                                    <input type="text" placeholder="Enter the code"
                                        class="w-full border border-gray-300 rounded-lg p-3 mt-1">
                                </div>
                                <div class="bg-gray-100 text-center flex items-center justify-center">
                                    <span class="font-mono text-lg">u9iXlp</span>
                                </div>

                                <!-- Submit Button -->
                                <div class="col-span-1 md:col-span-2 mt-4">
                                    <button class="w-full bg-[#FBAF43] text-white font-semibold py-3 rounded-lg">
                                        SUBMIT
                                    </button>
                                </div>
                            </form>
                        </div>

                    </div>
                </div>
            </div>
            <div class=" xl:pl-44 py-32">
                <div class="grid grid-cols-1 lg:grid-cols-3 gap-14 py-2 px-4">
                    <div>
                        <h1 class="font-bold text-5xl">What's New at Asiapro</h1>
                        <p class="pt-4 pb-14 lg:pb-64">Explore our blog to learn more about our news and updates</p>
                        <div class="flex justify-between px-4">
                            <div>
                                <button class="bg-[#FBAF43] px-8 py-2 rounded-full text-white font-bold shadow-full">SEE
                                    ALL ARTICLES</button>
                            </div>
                            <div class="flex gap-4 hidden xl:block">
                                <button class="border-2 border-[#FBAF43] rounded-full px-4 py-2 text-[#FBAF43]">
                                    <- </button>
                                        <button class="border-2 border-[#FBAF43] rounded-full px-4 py-2 text-[#FBAF43]">
                                            ->
                                        </button>
                            </div>
                        </div>
                    </div>
                    <div class="w-full relative col-span-2">
                        <div class="swiper centered-slide-carousel relative pb-14">
                            <div class="swiper-wrapper">
                                @foreach ($newsItems as $news)
                                    <div class="swiper-slide">
                                        <div class="news-item w-full h-full rounded-lg hover:shadow-2xl mb-6">
                                            <img src="{{ asset($news->image_path) }}" alt="News Image"
                                                class="w-full object-cover rounded-t-lg">
                                            <div class="p-4">
                                                <!-- Date Section -->
                                                <div class="flex items-center mb-2 gap-4">
                                                    <div
                                                        class="bg-[#115D8D] text-white text-center rounded-lg p-4 flex flex-col justify-center items-center">
                                                        <span
                                                            class="text-xl font-bold">{{ $news->created_at->format('d') }}</span>
                                                        <span class="text-sm">{{ $news->created_at->format('M') }}</span>
                                                    </div>
                                                    <!-- Content Section -->
                                                    <h4 class="font-bold text-sm">{{ $news->title }}</h4>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                            <div class="items-end">
                                <div class="swiper-pagination"></div>
                            </div>
                        </div>
                    </div>

                </div>

            </div>
        </div>
    </div>

    @include('layouts.footer')

    <!--JAVASCRIPT CODE-->
    <script>
        var swiper = new Swiper(".centered-slide-carousel", {
            centeredSlides: false,
            paginationClickable: true,
            loop: false,
            spaceBetween: 2,
            slideToClickedSlide: true,
            pagination: {
                el: ".centered-slide-carousel .swiper-pagination",
                clickable: true,
            },
            breakpoints: {
                1920: {
                    slidesPerView: 2.5,
                    spaceBetween: 30
                },
                1028: {
                    slidesPerView: 2,
                    spaceBetween: 2
                },
                990: {
                    slidesPerView: 1,
                    spaceBetween: 0
                }
            }
        });
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const swiper = new Swiper('.swiper-container', {
                // Optional parameters
                loop: true,
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true,
                },
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
                // Enable keyboard navigation
                keyboard: {
                    enabled: true,
                    onlyInViewport: false,
                },
                // Add more configurations as needed
            });
        });
    </script>
    <script>
        const targets = [{
                element: document.getElementById('starsCount'),
                count: 50000,
                suffix: '+'
            },
            {
                element: document.getElementById('downloadsCount'),
                count: 25,
                suffix: '+'
            },
            {
                element: document.getElementById('sponsorsCount'),
                count: 300,
                suffix: '+'
            }
        ];

        // Find the maximum count among all targets
        const maxCount = Math.max(...targets.map(target => target.count));

        // Function to animate count-up effect
        function animateCountUp(target, duration) {
            let currentCount = 0;
            const increment = Math.ceil(target.count / (duration / 10));

            const interval = setInterval(() => {
                currentCount += increment;
                if (currentCount >= target.count) {
                    clearInterval(interval);
                    currentCount = target.count;
                    target.element.textContent = currentCount + target.suffix;
                } else {
                    target.element.textContent = currentCount;
                }
            }, 10);
        }

        // Animate count-up for each target with adjusted duration
        targets.forEach(target => {
            animateCountUp(target, maxCount / 100); // Adjust duration based on max count
        });
    </script>

@endsection