Block Push

<div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
    <div class="w-full lg:col-span-2">
        <div class="relative bg-neutral-150 rounded-lg flex flex-wrap items-end lg:justify-between overflow-hidden">
            <div class="sm:w-1/2 p-8 md:p-20 text-neutral-800 z-10 md:pr-0">
                <h2 class="text-3xl md:text-4xl">
                    Rendez-vous opticien en visio
                </h2>
                <p class="mt-4 text-xl">
                    Découvrez notre service gratuit visio-conférence pour qu'un conseiller vous aide dans votre choix de monture.
                </p>
                <div class="mt-8">
                    <a href="#" class=" btn btn-dark-subtle ">
                        Je découvre

                    </a>
                </div>
            </div>
            <img src="/img/textImage/textimg1.png" alt="Alt" class="w-full  sm:w-1/2 ">
        </div>
    </div>
    <div class="w-full lg:col-span-1">

        <div x-data="initCarouselcarousel1484940600()" x-init="init()" class="relative w-full h-full mx-auto">

            <div class="flex justify-between items-center mb-8  absolute top-6 md:top-10 left-6 md:left-10 right-6 md:right-10 z-10 ">

                <div class="flex items-center justify-center space-x-4  justify-between w-full ">
                    <div x-ref="pagination" class="swiper-pagination-carousel-1484940600 swiper-pagination mt-0 !w-auto " :class="sliderTheme === 'dark' ? 'swiper-dark' : 'swiper-light'"></div>

                    <div class=" flex space-x-2">
                        <button type="button" :class="sliderTheme === 'dark' ? 'btn-light-subtle' : 'btn-dark-subtle'" class="carousel-button-prev-carousel-1484940600 before:border-none  btn btn-dark-subtle  btn-only-icon">
                            <svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" clip-rule="evenodd" d="M9.46967 12.5303C9.17678 12.2374 9.17678 11.7626 9.46967 11.4697L13.4697 7.46967C13.7626 7.17678 14.2374 7.17678 14.5303 7.46967C14.8232 7.76256 14.8232 8.23744 14.5303 8.53033L11.0607 12L14.5303 15.4697C14.8232 15.7626 14.8232 16.2374 14.5303 16.5303C14.2374 16.8232 13.7626 16.8232 13.4697 16.5303L9.46967 12.5303Z" fill="currentColor" />
                            </svg>

                        </button>
                        <button type="button" :class="sliderTheme === 'dark' ? 'btn-light-subtle' : 'btn-dark-subtle'" class="carousel-button-next-carousel-1484940600 before:border-none  btn btn-dark-subtle  btn-only-icon">
                            <svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" clip-rule="evenodd" d="M14.5303 11.4697C14.8232 11.7626 14.8232 12.2374 14.5303 12.5303L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303C9.17678 16.2374 9.17678 15.7626 9.46967 15.4697L12.9393 12L9.46967 8.53033C9.17678 8.23744 9.17678 7.76256 9.46967 7.46967C9.76256 7.17678 10.2374 7.17678 10.5303 7.46967L14.5303 11.4697Z" fill="currentColor" />
                            </svg>

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

            <div x-ref="swiperContainer" id="carousel-1484940600" class="swiper md:h-full">
                <div class="swiper-wrapper ">
                    <div class="swiper-slide !transform-none " data-theme="light" data-hash="index-carousel-1484940600-0">
                        <div class="flex flex-col justify-between gap-12 min-h-80 p-6 md:p-10 rounded-lg
            bg-neutral-800
             text-white         ">
                            <div class="pt-10"></div>
                            <div>
                                <p class="text-xs  text-light-50  mt-2">On vous aide</p>
                                <h3 class="text-xl mb-3">Comment choisir sa monture idéale ?</h3>
                                <p>Trouvez des lunettes adaptées à la forme de votre visage.</p>
                            </div>
                            <a href="https://www.afflelou.com/" class="self-baseline  btn btn-light-subtle ">
                                Démarrer le scan

                            </a>
                        </div>
                    </div>
                    <div class="swiper-slide !transform-none " data-theme="light" data-hash="index-carousel-1484940600-1">
                        <div class="flex flex-col justify-between gap-12 min-h-80 p-6 md:p-10 rounded-lg
            bg-neutral-800
             text-white         ">
                            <div class="pt-10"></div>
                            <div>
                                <p class="text-xs  text-light-50  mt-2">On vous aide</p>
                                <h3 class="text-xl mb-3">Comment choisir sa monture idéale ?</h3>
                                <p>Trouvez des lunettes adaptées à la forme de votre visage.</p>
                            </div>
                            <a href="https://www.afflelou.com/" class="self-baseline  btn btn-light-subtle ">
                                Démarrer le scan

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

            </div>
        </div>

        <script>
            function initCarouselcarousel1484940600() {
                return {
                    swiper: null,
                    options: {
                        "color": "dark",
                        "slidesPerView": {
                            "mobile": 1,
                            "tablet": 1,
                            "desktop": 1
                        },
                        "spaceBetween": 30,
                        "showPagination": true,
                        "showNavigation": true,
                        "showNavigationMobile": true
                    },
                    componentId: 'carousel-1484940600',
                    init() {
                        this.initSwiper();
                        if (typeof this.customFunction === 'function') {
                            this.customFunction();
                        }
                    },
                    initSwiper() {
                        this.swiper = new Swiper(this.$refs.swiperContainer, {
                            slidesPerView: this.options.slidesPerView.mobile,
                            spaceBetween: this.options.spaceBetween,
                            pagination: this.options.showPagination ? {
                                el: '.swiper-pagination-' + this.componentId,
                                clickable: true,
                                bulletClass: 'bullet',
                                bulletActiveClass: 'active',
                            } : false,
                            navigation: this.options.showNavigation ? {
                                nextEl: '.carousel-button-next-' + this.componentId,
                                prevEl: '.carousel-button-prev-' + this.componentId
                            } : false,
                            hashNavigation: {
                                watchState: true,
                            },
                            breakpoints: {
                                640: {
                                    slidesPerView: this.options.slidesPerView.tablet
                                },
                                1024: {
                                    slidesPerView: this.options.slidesPerView.desktop
                                }
                            },
                            on: {
                                slideChange: () => this.updateSliderTheme(),
                            },
                        });
                        this.updateSliderTheme();
                    },
                    updateSliderTheme() {
                        const activeSlide = this.swiper.slides[this.swiper.activeIndex];
                        const theme = activeSlide.getAttribute('data-slider-theme');
                        this.sliderTheme = theme || 'light';
                    },
                    customFunction() {
                        // Custom function can be defined here and overridden outside.
                    }
                };
            }
        </script>
    </div>
</div>