@extends('layouts.website.main')
@push('links')
<link rel="stylesheet" href="{{asset('vendor/css/swiper-slider/swiper-bundle.min.css')}}" />
  <link rel="stylesheet" href="{{ asset('vendor/css/fancybox/fancybox.css') }}" />
@endpush
@section('main-section')
<!-- Page Banner -->
@include('component.Banner', ['pageTitle' => "About Us", "bannerImage" => "https://images.unsplash.com/photo-1520250497591-112f2f40a3f4?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80"])



<section>
    <div class="container">
        <div class="row g-4 g-md-6 justify-content-between">
            <div class="col-lg-6">
                <img src="{{asset('assets/images/about2.png')}}" alt="">
            </div>
            <div class="col-lg-6">
                <div>
                    <h3 class=" font-24px font-lg-32px fw-400 text-primary font-satisfy">About us</h3>
                    <h2 class=" font-28px font-lg-36px fw-600 m-0">Who We Are &amp; What We Do? </h2>
                    <div class="hb-line bg-primary rounded-pill" style="width: 109px;"></div>
                    <p class=" font-16px font-lg-18px tracking-5 mt-3">Discover a world of luxury and unparalleled hospitality with  Holiday Homes. We specialise in curating exceptional vacation rentals in Dubai, offering a handpicked selection of exquisite villas and elegant apartments. From personalised service to prime locations, our commitment to excellence ensures an unforgettable experience. Explore our collection and indulge in the finest accommodations for your dream getaway                        .</p>

                    <ul class="mt-4">
                        <li><a href="#" class=" btn btn-primary extra-btn-padding-30 fw-600 font-16px tracking-3 hover-tracking transition">Contact Us <i class="bi bi-arrow-right font-20px"></i></a></li>
                    </ul>
                </div>
            </div>
        </div>

        @include('component.Counter')
    </div>
</section>




<!-- Why Book With Us? -->

<section style="background: var(--bs-gray-100)  no-repeat center/1162px;">

    <div class="container">
        <div class="text-center width-100 width-lg-55 mx-auto">
            <h3 class=" font-24px font-lg-32px fw-400 text-primary font-satisfy">Why Book With Us?</h3>
            <h2 class=" font-28px font-lg-36px fw-600 mb-3">Convenient and Easy Residential Properties Booking Process</h2>
            <div class="hb-line bg-primary mx-auto rounded-pill" style="width: 109px; height: 3px;"></div>
        </div>
        <br>
        <br>
        <div class="row g-4 g-lg-7">
            <div class="col-lg-4 col-md-6">
                <div>
                    <div class="d-flex align-items-center gap-3 mb-3">
                        <div class="bg-primary rounded-circle border border-primary d-flex align-items-center justify-content-center" style="--bs-bg-opacity: 0.1; width: 28px; height: 28px;">
                            <i class="bi bi-check-lg text-primary font-20px"></i>
                        </div>
                        <h4 class=" font-20px fw-700 m-0 tracking-3">Best Prices</h4>
                    </div>
                    <!--<p class=" font-16px fw-400 m-0" style="line-height: 27px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed velit nisi. Morbi ornare finibus ligula quis ullamcorper. Proin placerat luctus tincidunt. </p>-->
                </div>
            </div>

            <div class="col-lg-4 col-md-6">
                <div>
                    <div class="d-flex align-items-center gap-3 mb-3">
                        <div class="bg-primary rounded-circle border border-primary d-flex align-items-center justify-content-center" style="--bs-bg-opacity: 0.1; width: 28px; height: 28px;">
                            <i class="bi bi-check-lg text-primary font-20px"></i>
                        </div>
                        <h4 class=" font-20px fw-700 m-0 tracking-3">Customer Support</h4>
                    </div>
                    <!--<p class=" font-16px fw-400 m-0" style="line-height: 27px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed velit nisi. Morbi ornare finibus ligula quis ullamcorper. Proin placerat luctus tincidunt. </p>-->
                </div>
            </div>


            <div class="col-lg-4 col-md-6">
                <div>
                    <div class="d-flex align-items-center gap-3 mb-3">
                        <div class="bg-primary rounded-circle border border-primary d-flex align-items-center justify-content-center" style="--bs-bg-opacity: 0.1; width: 28px; height: 28px;">
                            <i class="bi bi-check-lg text-primary font-20px"></i>
                        </div>
                        <h4 class=" font-20px fw-700 m-0 tracking-3">Fast Booking</h4>
                    </div>
                    <!--<p class=" font-16px fw-400 m-0" style="line-height: 27px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed velit nisi. Morbi ornare finibus ligula quis ullamcorper. Proin placerat luctus tincidunt. </p>-->
                </div>
            </div>


            <div class="col-lg-4 col-md-6">
                <div>
                    <div class="d-flex align-items-center gap-3 mb-3">
                        <div class="bg-primary rounded-circle border border-primary d-flex align-items-center justify-content-center" style="--bs-bg-opacity: 0.1; width: 28px; height: 28px;">
                            <i class="bi bi-check-lg text-primary font-20px"></i>
                        </div>
                        <h4 class=" font-20px fw-700 m-0 tracking-3">Customize Package</h4>
                    </div>
                    <!--<p class=" font-16px fw-400 m-0" style="line-height: 27px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed velit nisi. Morbi ornare finibus ligula quis ullamcorper. Proin placerat luctus tincidunt. </p>-->
                </div>
            </div>

            <div class="col-lg-4 col-md-6">
                <div>
                    <div class="d-flex align-items-center gap-3 mb-3">
                        <div class="bg-primary rounded-circle border border-primary d-flex align-items-center justify-content-center" style="--bs-bg-opacity: 0.1; width: 28px; height: 28px;">
                            <i class="bi bi-check-lg text-primary font-20px"></i>
                        </div>
                        <h4 class=" font-20px fw-700 m-0 tracking-3">Free Updates</h4>
                    </div>
                    <!--<p class=" font-16px fw-400 m-0" style="line-height: 27px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed velit nisi. Morbi ornare finibus ligula quis ullamcorper. Proin placerat luctus tincidunt. </p>-->
                </div>
            </div>


            <div class="col-lg-4 col-md-6">
                <div>
                    <div class="d-flex align-items-center gap-3 mb-3">
                        <div class="bg-primary rounded-circle border border-primary d-flex align-items-center justify-content-center" style="--bs-bg-opacity: 0.1; width: 28px; height: 28px;">
                            <i class="bi bi-check-lg text-primary font-20px"></i>
                        </div>
                        <h4 class=" font-20px fw-700 m-0 tracking-3">Transportation</h4>
                    </div>
                    <!--<p class=" font-16px fw-400 m-0" style="line-height: 27px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed velit nisi. Morbi ornare finibus ligula quis ullamcorper. Proin placerat luctus tincidunt. </p>-->
                </div>
            </div>

        </div>
    </div>
    <br class="d-none d-lg-block">
    <br class="d-none d-lg-block">
    <br class="d-none d-lg-block">
</section>


<!-- Our Story -->
{{-- <section>
    <div class="container">
        <div class="text-center width-100 width-lg-55 mx-auto">
            <h3 class=" font-24px font-lg-32px fw-400 text-primary font-satisfy">List your home with Us </h3>
            <h2 class=" font-28px font-lg-36px fw-600 mb-3">Keep Claim And Booked Your Favourite Properties</h2>
            <div class="hb-line bg-primary mx-auto rounded-pill" style="width: 109px; height: 3px;"></div>
        </div>
        <br>
        <br>
        <div class=" position-relative">
            <img src="{{asset('assets/images/video.png')}}" alt="">
            <a href="https://www.youtube.com/watch?v=y9j-BL5ocW8" data-fancybox="gallery" class=" position-absolute top-50 start-50 translate-middle" style="width: 170px; height: 170px;"></a>
        </div>
    </div>
</section> --}}





<!-- Meet The Team -->
<section style="background: var(--bs-gray-100);">
    <div class="container">
        <div class="text-center width-100 width-lg-55 mx-auto">
            <h3 class=" font-24px font-lg-32px fw-400 text-primary font-satisfy">We are listed on </h3>
            {{-- <h2 class=" font-28px font-lg-36px fw-600 mb-3">Our Best Agents</h2> --}}
            <div class="hb-line bg-primary mx-auto rounded-pill" style="width: 109px; height: 3px;"></div>
        </div>
        <br>
        <br>
        <div class="swiper teamMemberSlider">
            <div class="swiper-wrapper">
                <div class="swiper-slide position-relative">
                    <div>
                        <div class="shadow-sm rounded-3 overflow-hidden mb-4" style="height: 368px; ">
                            <img src="{{ asset('assets/images/logos/airbnb.png') }}" alt="" class=" h-100 object-fit-cover ">
                        </div>
                        <div class="text-center">
                            <h4 class=" font-24px fw-600 tracking-2 mb-2">Airbnb</h4>
              
                        </div>
                    </div>
                </div>

                <div class="swiper-slide position-relative">
                    <div>
                        <div class="shadow-sm rounded-3 overflow-hidden mb-4" style="height: 368px; ">
                            <img src="{{ asset('assets/images/logos/Booking.png') }}" alt="" class=" h-100 object-fit-cover ">
                        </div>
                        <div class="text-center">
                            <h4 class=" font-24px fw-600 tracking-2 mb-2">BookingCom </h4>
                
                        </div>
                    </div>
                </div>


                <div class="swiper-slide position-relative">
                    <div>
                        <div class="shadow-sm rounded-3 overflow-hidden mb-4" style="height: 368px; ">
                            <img src="{{ asset('assets/images/logos/Vrbo.jpg') }}" alt="" class=" h-100 object-fit-cover ">
                        </div>
                        <div class="text-center">
                            <h4 class=" font-24px fw-600 tracking-2 mb-2">Vrbo </h4>
                           
                        </div>
                    </div>
                </div>



                <div class="swiper-slide position-relative">
                    <div>
                        <div class="shadow-sm rounded-3 overflow-hidden mb-4" style="height: 368px; ">
                            <img src="{{ asset('assets/images/logos/Agoda.png') }}" alt="" class=" h-100 object-fit-cover ">
                        </div>
                        <div class="text-center">
                            <h4 class=" font-24px fw-600 tracking-2 mb-2">Agoda </h4>
                           
                        </div>
                    </div>
                </div>


                 <div class="swiper-slide position-relative">
                    <div>
                        <div class="shadow-sm rounded-3 overflow-hidden mb-4" style="height: 368px; ">
                            <img src="{{ asset('assets/images/logos/Property_Finder.png') }}" alt="" class=" h-100 object-fit-cover ">
                        </div>
                        <div class="text-center">
                            <h4 class=" font-24px fw-600 tracking-2 mb-2">Property Finder  </h4>
                            
                        </div>
                    </div>
                </div>



                 <div class="swiper-slide position-relative">
                    <div>
                        <div class="shadow-sm rounded-3 overflow-hidden mb-4" style="height: 368px; ">
                            <img src="{{ asset('assets/images/logos/bayut.png') }}" alt="" class=" h-100 object-fit-cover ">
                        </div>
                        <div class="text-center">
                            <h4 class=" font-24px fw-600 tracking-2 mb-2">Bayut   </h4>
                            
                        </div>
                    </div>
                </div>


                <div class="swiper-slide position-relative">
                    <div>
                        <div class="shadow-sm rounded-3 overflow-hidden mb-4" style="height: 368px; ">
                            <img src="{{ asset('assets/images/logos/dubizzle-logo.png') }}" alt="" class=" h-100 object-fit-cover ">
                        </div>
                        <div class="text-center">
                            <h4 class=" font-24px fw-600 tracking-2 mb-2">Dubizzle    </h4>
                            
                        </div>
                    </div>
                </div>


                <div class="swiper-slide position-relative">
                    <div>
                        <div class="shadow-sm rounded-3 overflow-hidden mb-4" style="height: 368px; ">
                            <img src="{{ asset('assets/images/logos/tripcom.png') }}" alt="" class=" h-100 object-fit-cover ">
                        </div>
                        <div class="text-center">
                            <h4 class=" font-24px fw-600 tracking-2 mb-2">TripCom  </h4>
                            
                        </div>
                    </div>
                </div>








            </div>
            {{-- <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div> --}}
        </div>
    </div>

</section>






<!-- List With Us -->
@include('component.ListWithUs')



<!--    Testimonials -->
@include('component.Testimonial')



{{-- <!--  Signup -->
@include('component.Newsletter') --}}








@endsection
@push('scripts')
<script src="{{asset('vendor/js/swiper-slider/swiper-bundle.min.js')}}"></script>
    <script src="{{ asset('vendor/js/fancybox/fancybox.umd.js') }}"></script>
<script>
// ##################################
        //              FANCYBOX
        // #################################
        Fancybox.bind("[data-fancybox]", {
            // Your custom options
        });
    // ##################################
    //              TESTIMONIAL SLIDER
    // #################################
    var teamMemberSlider = new Swiper(".teamMemberSlider", {
        slidesPerView: 1,
        spaceBetween: 20,
        autoplay: {
        delay: 2500,
        disableOnInteraction: false,
      },
        // navigation: {
        //     nextEl: ".swiper-button-next",
        //     prevEl: ".swiper-button-prev",
        // },
        breakpoints: {
            640: {
                slidesPerView: 1,

            },
            768: {
                slidesPerView: 3,

            },
            1024: {
                slidesPerView: 4,

            },
        }
    });


    var testimonialSlider = new Swiper(".testimonialSlider", {
        slidesPerView: 1,
        autoplay: {
        delay: 2500,
        disableOnInteraction: false,
      },
        // navigation: {
        //     nextEl: ".swiper-button-next",
        //     prevEl: ".swiper-button-prev",
        // },
        // pagination: {
        //     el: ".swiper-pagination",
        //     clickable: true,
        // },
        breakpoints: {
            640: {
                slidesPerView: 1,

            },
            768: {
                slidesPerView: 2,

            },
            1024: {
                slidesPerView: 3,

            },
        }
    });
</script>
@endpush