@extends('frontend.layout.navbar')
@section('content')
 <div class="relative w-full h-full">
        <video autoplay loop muted playsinline class="absolute inset-0 object-contain md:object-cover w-full h-full ">
            <source src="{{ asset('image/amenities/reception/Porte Cochere and Reception Area.mp4') }}" type="video/mp4">
            Your browser does not support the video tag.
        </video>

        <div class="relative container mx-auto py-[10rem] md:py-[25rem]">
            <div class="flex flex-col justify-center">
                <p class="md:text-6xl text-2xl text-[#3e4424] font-bold p-5"></p>
            </div>
        </div>
    </div>





    <div class="container max-w-screen-xl mx-auto mb-10">
        <p class="lg:text-5xl text-[#3f4424] text-center font-bold text-2xl dancing-script mt-10">Porte Cochere and
            Reception Area </p>
<div class=" text-center mt-3 mb-5 text-[#3f4424]">Residents and guests are conveniently dropped off at the adjacent porte cochere where they
            can step directly into the reception building providing them a warm welcome to the Greenhouse Clubhouse
            Complex
        </div>

        <div class="relative">
            <div class="w-auto  h-full swiper shadow-2xl shadow-[#accb81] mx-20">
                <!-- Additional required wrapper -->
            
                <div class="swiper-wrapper ">
                    <!-- Slides -->
                    <div class="swiper-slide">
                        <img src="{{ asset('image/amenities/reception/Reception-Area-01-1600x1067 (1).jpg') }}"
                            class="w-full h-full zoomable-image" />
                    </div>
                    <div class="swiper-slide">
                        <img src="{{ asset('image/amenities/reception/Reception-Area-02-1600x1067 (1).jpg') }}"
                            class="w-full h-full zoomable-image" />
                    </div>
                    <div class="swiper-slide">
                        <img src="{{ asset('image/amenities/reception/Reception-Area-03-1600x1067 (1).jpg') }}"
                            class="w-full h-full zoomable-image" />
                    </div>
                    <div class="swiper-slide">
                        <img src="{{ asset('image/amenities/reception/Reception-Area-04-1600x1067 (1).jpg') }}"
                            class="w-full h-full zoomable-image" />
                    </div>
                    <div class="swiper-slide">
                        <img src="{{ asset('image/amenities/reception/Reception-Area-05-1600x1067 (1).jpg') }}"
                            class="w-full h-full zoomable-image" />
                    </div>
                    <div class="swiper-slide">
                        <img src="{{ asset('image/amenities/reception/Reception-Area-06-1600x1067 (1).jpg') }}"
                            class="w-full h-full zoomable-image" />
                    </div>
                    <div class="swiper-slide">
                        <img src="{{ asset('image/amenities/reception/Reception-Area-07-1600x1067 (1).jpg') }}"
                            class="w-full h-full zoomable-image" />
                    </div>

                </div>
               
                <!-- If we need pagination -->
                <div class="swiper-pagination"></div>

                <!-- If we need navigation buttons -->


                <!-- If we need scrollbar -->
                <div class="swiper-scrollbar"></div>
            </div>
            <div id="swiper-button-prev"
                class=" absolute top-1/2 left-0 z-50 bg-[#649d14] px-4  py-3 rounded-full  text-white">< </div>
                    <div id="swiper-button-next"
                        class="absolute top-1/2 right-0 z-50 bg-[#649d14] px-4  py-3 rounded-full text-white"> ></div>


                    <script>
                        const swiper = new Swiper('.swiper', {
                            // Optional parameters
                            direction: 'horizontal',
                            loop: true,

                            // If we need pagination
                            pagination: {
                                el: '.swiper-pagination',
                            },

                            // Navigation arrows
                            navigation: {
                                nextEl: '#swiper-button-next',
                                prevEl: '#swiper-button-prev',
                            },

                            // And if we need scrollbar
                            scrollbar: {
                                el: '.swiper-scrollbar',
                            },
                        });
                    </script>


            </div>
        </div>
    @endsection
    {{-- <img src="{{ asset('image/invest/Map.png') }}" class="absolute inset-0 "> --}}