<section id="services">
<div x-data="{
    swiper: null,
    initSwiper() {
        this.swiper = new Swiper(this.$refs.swiperContainer, {
            loop: true,
            autoplay: {
                delay: 4000,
                disableOnInteraction: false,
            },
            spaceBetween: 20,
            breakpoints: {
                640: { slidesPerView: 1 },
                768: { slidesPerView: 2 },
                1024: { slidesPerView: 3 },
            },
            navigation: {
                nextEl: this.$refs.swiperNext,
                prevEl: this.$refs.swiperPrev,
            },
        });
    },
    goNext() {
        this.swiper.slideNext();
    },
    goPrev() {
        this.swiper.slidePrev();
    }
}"
    x-init="initSwiper()"
    class="relative py-16 bg-gray-100 dark:bg-dark-bg/80">
    <div class="max-w-7xl mx-auto px-6 lg:px-10">
        <h2 class="text-3xl md:text-4xl font-poppins text-center mb-12 font-thin text-transparent bg-clip-text 
    bg-gradient-to-r from-blue-300 via-purple-300 to-primary
">What I Offer</h2>
        <div class="flex items-center justify-between">
            <button x-ref="swiperPrev" @click="goPrev()" class="bg-white dark:bg-gray-800 shadow-lg rounded-full w-10 h-10 flex items-center justify-center text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-primary z-10">
                <svg class="w-5 h-5" 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="M15 19l-7-7 7-7"></path></svg>
            </button>
            <div class="overflow-hidden relative w-full mx-4 lg:mx-6">
                <div class="swiper-container" x-ref="swiperContainer">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide" tabindex="-1">
                            <div class="group p-8 rounded-xl bg-white dark:bg-gray-800 shadow-soft h-[26rem] flex flex-col justify-start space-y-6
                                        transition-all duration-300 ease-in-out
                                        hover:-translate-y-2 hover:bg-gradient-to-br from-purple-500 via-red-500 to-yellow-500 hover:bg-size-200 hover:bg-pos-0 hover:shadow-xl"
                                style="background-size: 200%; transition: background-position 0.8s ease;">
                                <div class="flex items-center">
                                    <div class="w-20 h-20 rounded-full  flex items-center justify-center mr-4 overflow-hidden">
                                        
                                        
                                        <img src="/images/products/abs.png" alt="ABS SOFT Logo" class="w-full h-full object-contain">
                                    </div>
                                    <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100 group-hover:text-white transition-colors"><?php echo e(__('ABS SOFT Company PVT.LTD')); ?></h3>
                                </div>
                                <p class="text-sm text-pink-500 uppercase mb-2 group-hover:text-white transition-colors"><?php echo e(__('Your Digital Innovation Partner')); ?></p>
                                <ul class="list-disc list-inside text-gray-600 dark:text-gray-300 text-sm leading-relaxed space-y-2 group-hover:text-white/90 transition-colors flex-grow">
                                    <li><?php echo e(__('Custom Software & Web Development')); ?></li>
                                    <li><?php echo e(__('Scalable SaaS-Based Solutions')); ?></li>
                                    <li><?php echo e(__('Technical Consulting & Guidance')); ?></li>
                                    <li><?php echo e(__('System Integration & Automation')); ?></li>
                                    <li><?php echo e(__('UI/UX Design & Branding Support')); ?></li>
                                    <li><?php echo e(__('Cloud Hosting & Server Setup')); ?></li>
                                </ul>
                            </div>
                        </div>
                        <div class="swiper-slide" tabindex="-1">
                            <div class="group p-8 rounded-xl bg-white dark:bg-gray-800 shadow-soft h-[26rem] flex flex-col justify-start space-y-6
                                        transition-all duration-300 ease-in-out
                                        hover:-translate-y-2 hover:bg-gradient-to-br from-purple-500 via-red-500 to-yellow-500 hover:bg-size-200 hover:bg-pos-0 hover:shadow-xl"
                                style="background-size: 200%; transition: background-position 0.8s ease;">
                                <div class="flex items-center">
                                    <div class="w-20 h-20 rounded-full  flex items-center justify-center mr-4 overflow-hidden">
                                        
                                        
                                        <img src="/images/products/jaykul.png" alt="Jay Kul Devata Garage Logo" class="w-full h-full object-cover">
                                    </div>
                                    <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100 group-hover:text-white transition-colors"><?php echo e(__('Jay Kul Devata Traders')); ?></h3>
                                </div>
                                <p class="text-sm text-pink-500 uppercase mb-2 group-hover:text-white transition-colors"><?php echo e(__('Your Trusted Auto Parts & Service Provider')); ?></p>
                                <ul class="list-disc list-inside text-gray-600 dark:text-gray-300 text-sm leading-relaxed space-y-2 group-hover:text-white/90 transition-colors flex-grow">
                                    <li><?php echo e(__('High-Quality Spare Parts')); ?></li>
                                    <li><?php echo e(__('Skilled Labor for Repairs & Maintenance')); ?></li>
                                    <li><?php echo e(__('Full Vehicle Diagnostic Services')); ?></li>
                                    <li><?php echo e(__('On-Demand Vehicle Servicing')); ?></li>
                                    <li><?php echo e(__('Leth Service')); ?></li>
                                </ul>
                            </div>
                        </div>
                        <div class="swiper-slide" tabindex="-1">
                            <div class="group p-8 rounded-xl bg-white dark:bg-gray-800 shadow-soft h-[26rem] flex flex-col justify-start space-y-6
                                        transition-all duration-300 ease-in-out
                                        hover:-translate-y-2 hover:bg-gradient-to-br from-purple-500 via-red-500 to-yellow-500 hover:bg-size-200 hover:bg-pos-0 hover:shadow-xl"
                                style="background-size: 200%; transition: background-position 0.8s ease;">
                                <div class="flex items-center">
                                    <div class="w-14 h-14 rounded-full  flex items-center justify-center mr-4 overflow-hidden">
                                        
                                        
                                        <img src="/images/products/infonet.png" alt="Infonet Logo" class="w-full h-full object-cover">
                                    </div>
                                    <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100 group-hover:text-white transition-colors"><?php echo e(__('Infonet Communication')); ?></h3>
                                </div>
                                <p class="text-sm text-pink-500 uppercase mb-2 group-hover:text-white transition-colors"><?php echo e(__('Affordable Internet for All')); ?></p>
                                <ul class="list-disc list-inside text-gray-600 dark:text-gray-300 text-sm leading-relaxed space-y-2 group-hover:text-white/90 transition-colors flex-grow">
                                    <li><?php echo e(__('Reliable Internet Services')); ?></li>
                                    <li><?php echo e(__('Coverage in Remote & Rural Areas')); ?></li>
                                    <li><?php echo e(__('Custom Internet Plans for Homes & Offices')); ?></li>
                                    <li><?php echo e(__('Strong Customer Support Team')); ?></li>
                                    <li><?php echo e(__('Network Setup & On-Site Assistance')); ?></li>
                                </ul>
                            </div>
                        </div>
                        <div class="swiper-slide" tabindex="-1">
                            <div class="group p-8 rounded-xl bg-white dark:bg-gray-800 shadow-soft h-[26rem] flex flex-col justify-start space-y-6
                                        transition-all duration-300 ease-in-out
                                        hover:-translate-y-2 hover:bg-gradient-to-br from-purple-500 via-red-500 to-yellow-500 hover:bg-size-200 hover:bg-pos-0 hover:shadow-xl"
                                style="background-size: 200%; transition: background-position 0.8s ease;">
                                <div class="flex items-center">
                                    <div class="w-16 h-16 rounded-full  flex items-center justify-center mr-4 overflow-hidden">
                                        
                                       
                                        <img src="/images/products/herirakhau.png" alt="Herirakhau News Logo" class="w-full h-full object-cover">
                                    </div>
                                    <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100 group-hover:text-white transition-colors"><?php echo e(__('Herirakhau Media')); ?></h3>
                                </div>
                                <p class="text-sm text-pink-500 uppercase mb-2 group-hover:text-white transition-colors"><?php echo e(__('Voice of the People. Local & National News ')); ?></p>
                                <ul class="list-disc list-inside text-gray-600 dark:text-gray-300 text-sm leading-relaxed space-y-2 group-hover:text-white/90 transition-colors flex-grow">
                                    <li><?php echo e(__('Live Coverage of Events')); ?></li>
                                    <li><?php echo e(__('Video Content Production')); ?></li>
                                    <li><?php echo e(__('Mobile-Friendly News Platform')); ?></li>
                                    <li><?php echo e(__('Social Media Engagement')); ?></li>
                                    <li><?php echo e(__('Online Advertisement')); ?></li>
                                    <li class="text-wrap"><?php echo e(__('Digital Safety, Ethics, and Fact-Checking Practices')); ?></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <button x-ref="swiperNext" @click="goNext()" class="bg-white dark:bg-gray-800 shadow-lg rounded-full w-10 h-10 flex items-center justify-center text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-primary z-10">
                <svg class="w-5 h-5" 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="M9 5l7 7-7 7"></path></svg>
            </button>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
    <style>
        .bg-pos-0 {
          background-position: 0% center;
        }
        .bg-size-200 {
          background-size: 200%;
        }
    </style>
    
</div>
</section><?php /**PATH /home2/kcashok/public_html/portfolio/resources/views/components/services-section.blade.php ENDPATH**/ ?>