@extends('components.master')
@section('admin')
    <div class="breadcumb-wrapper background-image"
        style="background-image: url(&quot;assets/img/bg/breadcumb-bg.jpg&quot;);">
        <div class="container">
            <div class="breadcumb-content">
                <h1 class="breadcumb-title">About Us</h1>
                <ul class="breadcumb-menu">
                    <li><a href="{{ route('index') }}">Home</a></li>
                    <li>About Us</li>
                </ul>
            </div>
        </div>
    </div>





    <section class="overflow-hidden space">
        <div class="container">
            <div class="row">
                <div class="col-lg">
                    <div class="title-area text-center text-lg-center">
                        <h2 class="sec-title">Our Vision & Mission</h2>
                    </div>
                </div>
            </div>
            <div class="row gx-24 gy-30">
                @foreach ($vision as $show)
                <div class="col-xl-6">
                    <div class="blog-grid2 style2 th-ani">
                        {{-- <div class="blog-img global-img">
                            <img src="assets/img/about/vision.jpg" alt="blog image">
                        </div> --}}
                        <div class="blog-grid2_content">
                            <h2 class="box-title">{{ $show->name}}</h2>
                            <p class="team-about_text">{{ $show->des}}</p>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </section>



    {{-- team --}}
    <section class="bg-smoke pt-5 pb-5" data-bg-src="assets/img/bg/team_bg_1.png">
        <div class="container z-index-common">
            <div class="title-area text-center">
                {{-- <span class="sub-title">Our Team</span> --}}
                <h2 class="sec-title">Our Team</h2>
            </div>
            <div class="slider-area">
                <div class="swiper th-slider teamSlider1 has-shadow" id="teamSlider1"
                    data-slider-options='{"breakpoints":{"0":{"slidesPerView":1},"576":{"slidesPerView":"1"},"768":{"slidesPerView":"2"},"992":{"slidesPerView":"3"},"1200":{"slidesPerView":"4"}}}'>
                    <div class="swiper-wrapper">
                        @foreach ($team as $show)
                        <div class="swiper-slide">
                            <div class="th-team team-box">
                                <div class="team-img"><img src="{{ asset('dashboard_assets/team') }}/{{ $show->image }}" alt="Team"></div>
                                <div class="team-content">
                                    <div class="media-body">
                                        <h3 class="box-title"><a href="#">{{ $show->name}}</a></h3>
                                        <span class="team-desig">{{ $show->designation }}</span>
                                        <div class="th-social"><a target="_blank" href="https://facebook.com/"><i
                                                    class="fab fa-facebook-f"></i></a> <a target="_blank"
                                                href="https://twitter.com/"><i class="fab fa-twitter"></i></a> <a
                                                target="_blank" href="https://instagram.com/"><i
                                                    class="fab fa-instagram"></i></a> <a target="_blank"
                                                href="https://linkedin.com/"><i class="fab fa-linkedin-in"></i></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endforeach

                    </div>
                    <div class="slider-pagination"></div>
                </div>
            </div>
        </div>
    </section>
    {{-- team --}}




    {{-- Trusted Partners --}}

    <section class="category-area3 space-top arrow-wrap">
        <div class="container th-container">
            <div class="title-area text-center">
                {{-- <span class="sub-title">Trusted Partners</span> --}}
                <h2 class="sec-title">Trusted Partners</h2>
            </div>
            <div class="slider-area">
                <div class="swiper th-slider has-shadow categorySlider4 swiper-initialized swiper-horizontal swiper-backface-hidden"
                    id="categorySlider4"
                    data-slider-options="{&quot;breakpoints&quot;:{&quot;0&quot;:{&quot;slidesPerView&quot;:1},&quot;576&quot;:{&quot;slidesPerView&quot;:&quot;1&quot;},&quot;768&quot;:{&quot;slidesPerView&quot;:&quot;2&quot;},&quot;992&quot;:{&quot;slidesPerView&quot;:&quot;3&quot;},&quot;1200&quot;:{&quot;slidesPerView&quot;:&quot;3&quot;},&quot;1400&quot;:{&quot;slidesPerView&quot;:&quot;5&quot;}}}">
                    <div class="swiper-wrapper" id="swiper-wrapper-aa64fa54897e3335" aria-live="off"
                        style="transition-duration: 0ms; transform: translate3d(-1349px, 0px, 0px); transition-delay: 0ms;">
                        @foreach ($partner as $show)
                        <div class="swiper-slide" role="group" aria-label="1 / 10" data-swiper-slide-index="0"
                            style="width: 425.667px; margin-right: 24px;">
                            <div class="category-card style2">
                                <div class="box-img global-img"><img src="{{ asset('dashboard_assets/partner') }}/{{ $show->image }}"
                                        alt="Image"></div>
                                <h3 class="box-title"><a href="#">{{ $show->name}}</a></h3>
                            </div>
                        </div>
                        @endforeach
                        <div class="swiper-slide" role="group" aria-label="2 / 10" data-swiper-slide-index="1"
                            style="width: 425.667px; margin-right: 24px;">
                            <div class="category-card style2">
                                <div class="box-img global-img"><img src="assets/img/category/category_2_2.jpg"
                                        alt="Image"></div>
                                <h3 class="box-title"><a href="#">Boulders Beach</a></h3>
                            </div>
                        </div>
                        <div class="swiper-slide swiper-slide-prev" role="group" aria-label="3 / 10"
                            data-swiper-slide-index="2" style="width: 425.667px; margin-right: 24px;">
                            <div class="category-card style2">
                                <div class="box-img global-img"><img src="assets/img/category/category_2_3.jpg"
                                        alt="Image"></div>
                                <h3 class="box-title"><a href="#">Bondi Beach</a></h3><a class="line-btn"
                                    href="#">See more</a>
                            </div>
                        </div>
                        <div class="swiper-slide swiper-slide-active" role="group" aria-label="4 / 10"
                            data-swiper-slide-index="3" style="width: 425.667px; margin-right: 24px;">
                            <div class="category-card style2">
                                <div class="box-img global-img"><img src="assets/img/category/category_2_4.jpg"
                                        alt="Image"></div>
                                <h3 class="box-title"><a href="#">Copacabana Beach</a></h3>
                            </div>
                        </div>
                        <div class="swiper-slide swiper-slide-next" role="group" aria-label="5 / 10"
                            data-swiper-slide-index="4" style="width: 425.667px; margin-right: 24px;">
                            <div class="category-card style2">
                                <div class="box-img global-img"><img src="assets/img/category/category_2_5.jpg"
                                        alt="Image"></div>
                                <h3 class="box-title"><a href="#">Maldives Beach</a></h3>
                            </div>
                        </div>
                        <div class="swiper-slide" role="group" aria-label="6 / 10" data-swiper-slide-index="5"
                            style="width: 425.667px; margin-right: 24px;">
                            <div class="category-card style2">
                                <div class="box-img global-img"><img src="assets/img/category/category_2_1.jpg"
                                        alt="Image"></div>
                                <h3 class="box-title"><a href="#">Maldives Beach</a></h3>
                            </div>
                        </div>
                        <div class="swiper-slide" role="group" aria-label="7 / 10" data-swiper-slide-index="6"
                            style="width: 425.667px; margin-right: 24px;">
                            <div class="category-card style2">
                                <div class="box-img global-img"><img src="assets/img/category/category_2_2.jpg"
                                        alt="Image"></div>
                                <h3 class="box-title"><a href="#">Boulders Beach</a></h3>
                            </div>
                        </div>
                        <div class="swiper-slide" role="group" aria-label="8 / 10" data-swiper-slide-index="7"
                            style="width: 425.667px; margin-right: 24px;">
                            <div class="category-card style2">
                                <div class="box-img global-img"><img src="assets/img/category/category_2_3.jpg"
                                        alt="Image"></div>
                                <h3 class="box-title"><a href="#">Bondi Beach</a></h3><a class="line-btn"
                                    href="#">See more</a>
                            </div>
                        </div>
                        <div class="swiper-slide" role="group" aria-label="9 / 10" data-swiper-slide-index="8"
                            style="width: 425.667px; margin-right: 24px;">
                            <div class="category-card style2">
                                <div class="box-img global-img"><img src="assets/img/category/category_2_4.jpg"
                                        alt="Image"></div>
                                <h3 class="box-title"><a href="#">Copacabana Beach</a></h3>
                            </div>
                        </div>
                        <div class="swiper-slide" role="group" aria-label="10 / 10" data-swiper-slide-index="9"
                            style="width: 425.667px; margin-right: 24px;">
                            <div class="category-card style2">
                                <div class="box-img global-img"><img src="assets/img/category/category_2_5.jpg"
                                        alt="Image"></div>
                                <h3 class="box-title"><a href="#">Maldives Beach</a></h3>
                            </div>
                        </div>
                    </div>
                    <div
                        class="slider-pagination swiper-pagination-clickable swiper-pagination-bullets swiper-pagination-horizontal">
                        <span class="swiper-pagination-bullet" aria-label="Go to Slide 01" tabindex="0"></span><span
                            class="swiper-pagination-bullet" aria-label="Go to Slide 02" tabindex="0"></span><span
                            class="swiper-pagination-bullet" aria-label="Go to Slide 03" tabindex="0"></span><span
                            class="swiper-pagination-bullet swiper-pagination-bullet-active" aria-label="Go to Slide 04"
                            tabindex="0" aria-current="true"></span><span class="swiper-pagination-bullet"
                            aria-label="Go to Slide 05" tabindex="0"></span><span class="swiper-pagination-bullet"
                            aria-label="Go to Slide 06" tabindex="0"></span><span class="swiper-pagination-bullet"
                            aria-label="Go to Slide 07" tabindex="0"></span><span class="swiper-pagination-bullet"
                            aria-label="Go to Slide 08" tabindex="0"></span><span class="swiper-pagination-bullet"
                            aria-label="Go to Slide 09" tabindex="0"></span><span class="swiper-pagination-bullet"
                            aria-label="Go to Slide 10" tabindex="0"></span>
                    </div><span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
                </div>
            </div>
        </div>
    </section>

    {{-- Trusted Partners --}}


    {{-- Services --}}

    <section class="arrow-wrap">
        <div class="container mt-5 mb-5">
            <div class="row">
                <div class="col-md-12 mt-5 mb-5 text-center">
                    <div class="title-area text-center">
                        {{-- <span class="sub-title">Services</span> --}}
                        <h2 class="sec-title">Services</h2>
                    </div>
                </div>
                @foreach ($services as $show)
                <div class="col-xxl-4 col-lg-4">
                    <aside class="sidebar-area style2">
                        <div class="widget widget_offer background-image"
                            style="background-image: url('dashboard_assets/services') }}/{{ $show->image }}; background-color: rgb(0 0 0 / 63%); background-blend-mode: overlay;">



                            <div class="offer-banner">
                                <div class="offer">
                                    <div class="banner-logo">
                                        <h6 class="">{{ $show->name}}</h6>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </aside>
                </div>
                @endforeach

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

    {{-- Services --}}
@endsection