@extends("web.layouts.master")

@section("content")
    <section class="cover height-100 imagebg slider" data-paging="true">
        <ul class="slides">
            @foreach ($banners as $banner)
                <li class="imagebg">
                    <div class="background-image-holder background--top hidden-xs hidden-xs">
                        <img alt="background" src="{{ $banner->attachments()->first()->image_url ?? GeneralHelper::PLACEHOLDER }}" />
                    </div>
                    <div class="container pos-vertical-center">
                        <div class="row justify-content-around">
                            <div class="col-12 col-md-7 col-lg-7 mt-0">
                                <h1 class="font-size-50 text-red Font-Manrope-ExtraBold home-header-label-1">
                                    Welcome to MINIAPOLIS
                                </h1>
                                <p class="mb-0 font-size-24 text-dark-grey Font-Manrope-Regular home-header-label-2">Play is the best way to learn for kids.</p>
                                <p class="mb-0 font-size-24 text-dark-grey Font-Manrope-Regular home-header-label-2">The Miniapolis Playground and classroom are</p>
                                <p class="font-size-24 text-dark-grey Font-Manrope-Regular home-header-label-2">filled with fun things to do.</p>
                                <p class="font-size-24 text-dark-grey Font-Manrope-Regular home-header-label-2">We are bringing smiles to everyone!</p>
{{--                                @if (--}}
{{--                                    auth()->user() == null ||--}}
{{--                                    auth()->user()->hasRole(RoleEnum::getString(RoleEnum::GUEST))--}}
{{--                                )--}}
{{--                                    <a class="btn custom-btn custom-btn-secondary type--uppercase home-header-be-a-member-button" href="{{ route("web.be-a-member.index") }}">--}}
{{--                                                <span class="btn__text font-size-18 Font-Manrope-ExtraBold home-header-be-a-member-text">--}}
{{--                                                    <img src="{{ asset("web/assets/icons/credit-card.png") }}" style="margin-top: -3px; margin-right: 10px;" class="home-header-be-a-member-icon" /> BE A MEMBER--}}
{{--                                                </span>--}}
{{--                                    </a>--}}
{{--                                @endif--}}
                                <a class="btn custom-btn custom-btn-danger type--uppercase home-header-get-a-ticket-button" href="{{ route("web.ticket.index") }}">
                                            <span class="btn__text font-size-18 Font-Manrope-ExtraBold home-header-get-a-ticket-text">
                                                <img src="{{ asset("web/assets/icons/ticket.png") }}" style="margin-top: -3px; margin-right: 10px;"  class="home-header-get-a-ticket-icon"/>  GET A TICKET
                                            </span>
                                </a>
                            </div>
                            <div class="col-md-5">
                            </div>
                        </div>
                        <!--end of row-->
                    </div>
                    <!--end of container-->
                </li>
            @endforeach
        </ul>
    </section>
    <section class="space--sm background-orange">
        <div class="container">
            <section class="text-center space--0 pb-5">
                <div class="container">
                    <div class="row justify-content-center">
                        <div class="col-12 col-md-10 col-lg-8">
                            <h2 class="font-size-36 text-dark-grey Font-Manrope-ExtraBold come-and-visit-button-label-1" data-aos="fade-zoom-in" data-aos-duration="500">
                                Come & Visit us
                            </h2>
                            <div class="background-red" style="height: 4px; margin: -10px auto; width: 50px;"></div>
                        </div>
                    </div>
                </div>
            </section>
            <div class="row">
                @foreach ($locations as $key => $location)
                    @if ((new \Jenssegers\Agent\Agent())->isMobile() || (new \Jenssegers\Agent\Agent())->isTablet())
                        @if ((count($locations)) - 1 == $key)
                            <div class="col-3 col-sm-3 col-md-3 col-lg-3 text-center"></div>
                        @endif
                        <div class="col-6 col-sm-6 col-md-6 col-lg-6 text-center {{ (count($locations)) - 1 == $key ? 'mt-3' : '' }}" data-aos="zoom-in" data-aos-duration="1000">
                            <div class="feature custom-feature" style="margin-bottom: 15px !important;">
                                <h4 class="text-center font-size-25 text-dark-grey Font-Manrope-ExtraBold come-and-visit-button-label-2">{{ $location->name }}</h4>
                                <p class="text-center font-size-14 text-dark-grey Font-Manrope-Medium pt-1 pb-1 pr-5 pl-5 come-and-visit-button-label-3" style="max-width: unset !important;">
                                    {{ $location->address }}
                                </p>
                                <a class="btn custom-btn custom-btn-danger type--uppercase come-and-visit-button " href="{{ route("web.ticket.show", ["locationSlug" => $location->code]) }}">
                                    <span class="btn__text font-size-18 Font-Manrope-ExtraBold come-and-visit-text">
                                        GET A TICKET
                                    </span>
                                </a>
                            </div>
                        </div>
                        @if ((count($locations)) - 1 == $key)
                            <div class="col-3 col-sm-3 col-md-3 col-lg-3 text-center"></div>
                        @endif
                    @else
                        <div class="col-4 col-sm-4 col-md-4 col-lg-4 text-center" data-aos="zoom-in" data-aos-duration="1000">
                            <div class="feature custom-feature" style="margin-bottom: 15px !important;">
                                <h4 class="text-center font-size-25 text-dark-grey Font-Manrope-ExtraBold come-and-visit-button-label-2">{{ $location->name }}</h4>
                                <p class="text-center font-size-14 text-dark-grey Font-Manrope-Medium pt-1 pb-1 pr-5 pl-5 come-and-visit-button-label-3" style="max-width: unset !important;">
                                    {{ $location->address }}
                                </p>
                                <a class="btn custom-btn custom-btn-danger type--uppercase come-and-visit-button " href="{{ route("web.ticket.show", ["locationSlug" => $location->code]) }}">
                                    <span class="btn__text font-size-18 Font-Manrope-ExtraBold come-and-visit-text">
                                        GET A TICKET
                                    </span>
                                </a>
                            </div>
                        </div>
                    @endif
                @endforeach
            </div>
            <!--end of row-->
        </div>
        <!--end of container-->
    </section>
    <section class="space--xs background-yellow">
        <div class="container">
            <section class="text-center space--xs">
                <div class="container">
                    <div class="row justify-content-center">
                        <div class="col-md-10 col-lg-8">
                            <h2 class="font-size-48 text-dark-grey Font-Manrope-ExtraBold custom-section-title our-health-protocol-label-1" data-aos="fade-zoom-in" data-aos-duration="500">Our Health Protocol</h2>
                        </div>
                    </div>
                </div>
            </section>
            @if ((new \Jenssegers\Agent\Agent())->isMobile() || (new \Jenssegers\Agent\Agent())->isTablet())
                <div class="row">
                    <div class="col-4 col-md-4 text-center" data-aos="fade-right" data-aos-duration="500">
                        <div class="feature">
                            <img alt="Image" src="{{ asset("web/assets/img/health_protocol_1.png") }}" class="border--round" style="margin-bottom: 1.85714286em;" />
                            <h4 class="text-center font-size-20 text-dark-grey Font-Manrope-ExtraBold our-health-protocol-label-2">Wear mask or face shield, and check body temperature</h4>
                        </div>
                    </div>
                    <div class="col-4 col-md-4 text-center" data-aos="fade-left" data-aos-duration="500">
                        <div class="feature">
                            <img alt="Image" src="{{ asset("web/assets/img/health_protocol_2.png") }}" class="border--round" style="margin-bottom: 1.85714286em;" />
                            <h4 class="text-center font-size-20 text-dark-grey Font-Manrope-ExtraBold our-health-protocol-label-2">Check in via QR code</h4>
                        </div>
                    </div>
                    <div class="col-4 col-md-4 text-center" data-aos="fade-right" data-aos-duration="500">
                        <div class="feature">
                            <img alt="Image" src="{{ asset("web/assets/img/health_protocol_3.png") }}" class="border--round" style="margin-bottom: 1.85714286em;" />
                            <h4 class="text-center font-size-20 text-dark-grey Font-Manrope-ExtraBold our-health-protocol-label-2">Cashless payment</h4>
                        </div>
                    </div>
                    <div class="col-4 col-md-4 text-center" data-aos="fade-left" data-aos-duration="500">
                        <div class="feature">
                            <img alt="Image" src="{{ asset("web/assets/img/health_protocol_4.png") }}" class="border--round" style="margin-bottom: 1.85714286em;" />
                            <h4 class="text-center font-size-20 text-dark-grey Font-Manrope-ExtraBold our-health-protocol-label-2">Use hand sanitizer</h4>
                        </div>
                    </div>

                    <div class="col-4 col-md-4 text-center" data-aos="fade-right" data-aos-duration="500">
                        <div class="feature">
                            <img alt="Image" src="{{ asset("web/assets/img/health_protocol_5.png") }}" class="border--round" style="margin-bottom: 1.85714286em;" />
                            <h4 class="text-center font-size-20 text-dark-grey Font-Manrope-ExtraBold our-health-protocol-label-2">Wear socks</h4>
                        </div>
                    </div>
                    <div class="col-4 col-md-4 text-center" data-aos="fade-left" data-aos-duration="500">
                        <div class="feature">
                            <img alt="Image" src="{{ asset("web/assets/img/health_protocol_6.png") }}" class="border--round" style="margin-bottom: 1.85714286em;" />
                            <h4 class="text-center font-size-20 text-dark-grey Font-Manrope-ExtraBold our-health-protocol-label-2">Every child must be accompanied by an adult</h4>
                        </div>
                    </div>
                    <div class="col-2 col-md-2"></div>
                    <div class="col-4 col-md-4 text-center" data-aos="fade-right" data-aos-duration="500">
                        <div class="feature">
                            <img alt="Image" src="{{ asset("web/assets/img/health_protocol_7.png") }}" class="border--round" style="margin-bottom: 1.85714286em;" />
                            <h4 class="text-center font-size-20 text-dark-grey Font-Manrope-ExtraBold our-health-protocol-label-2">No food & beverage allowed</h4>
                        </div>
                    </div>
                    <div class="col-4 col-md-4 text-center" data-aos="fade-left" data-aos-duration="500">
                        <div class="feature">
                            <img alt="Image" src="{{ asset("web/assets/img/health_protocol_8.png") }}" class="border--round" style="margin-bottom: 1.85714286em;" />
                            <h4 class="text-center font-size-20 text-dark-grey Font-Manrope-ExtraBold our-health-protocol-label-2">Keep your distance</h4>
                        </div>
                    </div>
                    <div class="col-2 col-md-2"></div>
                </div>
            @else
                <div class="row">
                    <div class="col-md-3 text-center" data-aos="fade-right" data-aos-duration="500">
                        <div class="feature">
                            <img alt="Image" src="{{ asset("web/assets/img/health_protocol_1.png") }}" class="border--round" style="margin-bottom: 1.85714286em;" />
                            <h4 class="text-center font-size-20 text-dark-grey Font-Manrope-ExtraBold our-health-protocol-label-2">Wear mask or face shield, and check body temperature</h4>
                        </div>
                    </div>
                    <div class="col-md-3 text-center" data-aos="fade-left" data-aos-duration="500">
                        <div class="feature">
                            <img alt="Image" src="{{ asset("web/assets/img/health_protocol_2.png") }}" class="border--round" style="margin-bottom: 1.85714286em;" />
                            <h4 class="text-center font-size-20 text-dark-grey Font-Manrope-ExtraBold our-health-protocol-label-2">Check in via QR code</h4>
                        </div>
                    </div>
                    <div class="col-md-3 text-center" data-aos="fade-right" data-aos-duration="500">
                        <div class="feature">
                            <img alt="Image" src="{{ asset("web/assets/img/health_protocol_3.png") }}" class="border--round" style="margin-bottom: 1.85714286em;" />
                            <h4 class="text-center font-size-20 text-dark-grey Font-Manrope-ExtraBold our-health-protocol-label-2">Cashless payment</h4>
                        </div>
                    </div>
                    <div class="col-md-3 text-center" data-aos="fade-left" data-aos-duration="500">
                        <div class="feature">
                            <img alt="Image" src="{{ asset("web/assets/img/health_protocol_4.png") }}" class="border--round" style="margin-bottom: 1.85714286em;" />
                            <h4 class="text-center font-size-20 text-dark-grey Font-Manrope-ExtraBold our-health-protocol-label-2">Use hand sanitizer</h4>
                        </div>
                    </div>

                    <div class="col-md-3 text-center" data-aos="fade-right" data-aos-duration="500">
                        <div class="feature">
                            <img alt="Image" src="{{ asset("web/assets/img/health_protocol_5.png") }}" class="border--round" style="margin-bottom: 1.85714286em;" />
                            <h4 class="text-center font-size-20 text-dark-grey Font-Manrope-ExtraBold our-health-protocol-label-2">Wear socks</h4>
                        </div>
                    </div>
                    <div class="col-md-3 text-center" data-aos="fade-left" data-aos-duration="500">
                        <div class="feature">
                            <img alt="Image" src="{{ asset("web/assets/img/health_protocol_6.png") }}" class="border--round" style="margin-bottom: 1.85714286em;" />
                            <h4 class="text-center font-size-20 text-dark-grey Font-Manrope-ExtraBold our-health-protocol-label-2">Every child must be accompanied by an adult</h4>
                        </div>
                    </div>
                    <div class="col-md-3 text-center" data-aos="fade-right" data-aos-duration="500">
                        <div class="feature">
                            <img alt="Image" src="{{ asset("web/assets/img/health_protocol_7.png") }}" class="border--round" style="margin-bottom: 1.85714286em;" />
                            <h4 class="text-center font-size-20 text-dark-grey Font-Manrope-ExtraBold our-health-protocol-label-2">No food & beverage allowed</h4>
                        </div>
                    </div>
                    <div class="col-md-3 text-center" data-aos="fade-left" data-aos-duration="500">
                        <div class="feature">
                            <img alt="Image" src="{{ asset("web/assets/img/health_protocol_8.png") }}" class="border--round" style="margin-bottom: 1.85714286em;" />
                            <h4 class="text-center font-size-20 text-dark-grey Font-Manrope-ExtraBold our-health-protocol-label-2">Keep your distance</h4>
                        </div>
                    </div>
                </div>
            @endif

            <!--end of row-->
        </div>
        <!--end of container-->
    </section>

    <section class="cover height-100 imagebg switchable siwtchable--switch background-light-blue">
        <div class="container pos-vertical-center">
                @if ((new \Jenssegers\Agent\Agent())->isMobile() || (new \Jenssegers\Agent\Agent())->isTablet())
                    <div class="row">
                        <div class="col-12 col-lg-12 col-md-12 text-center">
                            <img alt="Image" src="{{ asset("web/assets/img/merchandise.png") }}" style="width: 500px;"/>
                            <div class="switchable__text">
                                <h1 class="font-size-48 text-dark-grey Font-Manrope-ExtraBold merchandise-label-1">
                                    Merchandise
                                </h1>
                                <p class="font-size-18 text-dark-grey Font-Manrope-Regular merchandise-label-2">
                                    Find exclusive merchandise for gifts, souvenirs, or even for yourself!
                                </p>
                                <a class="btn custom-btn custom-btn-danger type--uppercase see-our-catalog-button" href="{{ route("web.merchandise.index") }}">
                                    <span class="btn__text font-size-18 Font-Manrope-ExtraBold see-our-catalog-text">
                                         <img src="{{ asset("web/assets/icons/cart.png") }}" style="margin-top: -3px; margin-right: 10px;"  class="see-our-catalog-icon"/> See Our Catalog
                                    </span>
                                </a>
                            </div>
                        </div>
                    </div>
                @else
                    <div class="row justify-content-around">
                        <div class="col-12 col-lg-6 col-md-4" data-aos="fade-left" data-aos-duration="500">
                                <div class="background-image-holder">
                                    <img alt="Image" src="{{ asset("web/assets/img/merchandise.png") }}" />
                                </div>
                                <div style="min-height: 450px;"></div>
                            <!--end video cover-->
                        </div>
                        <div class="col-12 col-lg-5 col-md-7" data-aos="fade-right" data-aos-duration="500" style="padding-top: 110px; padding-bottom: 110px;">
                        <div class="switchable__text">
                            <h1 class="font-size-48 text-dark-grey Font-Manrope-ExtraBold merchandise-label-1">
                                Merchandise
                            </h1>
                            <p class="font-size-18 text-dark-grey Font-Manrope-Regular merchandise-label-2">
                                Find exclusive merchandise for gifts, souvenirs, or even for yourself!
                            </p>
                            <a class="btn custom-btn custom-btn-danger type--uppercase see-our-catalog-button" href="{{ route("web.merchandise.index") }}">
                                    <span class="btn__text font-size-18 Font-Manrope-ExtraBold see-our-catalog-text">
                                         <img src="{{ asset("web/assets/icons/cart.png") }}" style="margin-top: -3px; margin-right: 10px;"  class="see-our-catalog-icon"/> See Our Catalog
                                    </span>
                            </a>
                        </div>
                    </div>
                    </div>
                @endif
            </div>
            <!--end of row-->
        </div>
        <!--end of container-->
    </section>
    <section class="cover height-100 imagebg switchable switchable--switch background-red">
        <div class="container pos-vertical-center">
            @if ((new \Jenssegers\Agent\Agent())->isMobile() || (new \Jenssegers\Agent\Agent())->isTablet())
                <div class="row">
                    <div class="col-12 col-lg-12 col-md-12 text-center">
                        <img alt="Image" src="{{ asset("web/assets/img/food_and_beverage.png") }}" style="width: 500px;"/>
                        <div class="switchable__text">
                            <h1 class="font-size-48 text-white Font-Manrope-ExtraBold mb-1 food-and-beverage-label-1">
                                Food & Beverage
                            </h1>
                            <p class="font-size-23 text-white Font-Manrope-SemiBold food-and-beverage-label-2">
                                Quick service for snacks and beverages.
                            </p>
                        </div>
                    </div>
                </div>
            @else
                <div class="row justify-content-around">
                    <div class="col-12 col-lg-5 col-md-4 col-12" data-aos="fade-right" data-aos-duration="1000">
                        <div class="background-image-holder">
                            <img alt="Image" src="{{ asset("web/assets/img/food_and_beverage.png") }}" />
                        </div>
                        <div style="min-height: 450px;"></div>
                        <!--end video cover-->
                    </div>
                    <div class="col-12 col-lg-6 col-md-7" data-aos="fade-left" data-aos-duration="500" style="padding-top: 150px; padding-bottom: 150px;">
                        <div class="switchable__text text-right">
                            <h1 class="font-size-48 text-white Font-Manrope-ExtraBold mb-1">
                                Food & Beverage
                            </h1>
                            <p class="font-size-23 text-white Font-Manrope-SemiBold">
                                Quick service for snacks and beverages.
                            </p>
                        </div>
                    </div>
                </div>
            @endif
            <!--end of row-->
        </div>
        <!--end of container-->
    </section>
    <section class="space--0 background-dark-blue">
        <div class="container">
            <section class="text-center space--xs">
                <div class="container">
                    <div class="row justify-content-center">
                        <div class="col-12 col-md-10 col-lg-8">
                            <h2 class="font-size-48 text-dark-grey Font-Manrope-ExtraBold custom-section-title service-label-1" data-aos="fade-zoom-in" data-aos-duration="500">Service</h2>
                        </div>
                    </div>
                </div>
            </section>
            @if ((new \Jenssegers\Agent\Agent())->isMobile() || (new \Jenssegers\Agent\Agent())->isTablet())
                <div class="row">
                <div class="col-6 col-md-6 text-center" data-aos="zoom-in" data-aos-duration="500">
                    <div class="feature" style="margin-bottom: 50px !important;">
                        <img alt="Image" src="{{ asset("web/assets/img/service_1.png") }}" class="border--round" style="margin-bottom: 1.85714286em;" />
                        <p class="text-center font-size-24 text-dark-grey Font-Manrope-ExtraBold mb-2 service-label-2">BIRTHDAY PARTY</p>
                        <p class="text-center font-size-16 text-dark-grey Font-Manrope-SemiBold service-label-3">Celebrate your birthday party in your own way!</p>
                    </div>
                </div>
                <div class="col-6 col-md-6 text-center" data-aos="zoom-in" data-aos-duration="1000">
                    <div class="feature" style="margin-bottom: 50px !important;">
                        <img alt="Image" src="{{ asset("web/assets/img/service_2.png") }}" class="border--round" style="margin-bottom: 1.85714286em;" />
                        <p class="text-center font-size-24 text-dark-grey Font-Manrope-ExtraBold mb-2 service-label-2">SCHOOL FIELDTRIP</p>
                        <p class="text-center font-size-16 text-dark-grey Font-Manrope-SemiBold service-label-3">Let’s have a tour into Miniapolis. Let’s play and learn in a fun way.</p>
                    </div>
                </div>

                <div class="col-4 col-md-4 text-center" data-aos="zoom-in" data-aos-duration="500">
                    <div class="feature" style="margin-bottom: 50px !important;">
                        <img alt="Image" src="{{ asset("web/assets/img/service_4.png") }}" class="border--round" style="margin-bottom: 1.85714286em;" />
                        <p class="text-center font-size-16 text-dark-grey Font-Manrope-SemiBold service-label-3">Let’s play, learn and grow in a fun classes with various activities daily</p>
                    </div>
                </div>
                <div class="col-4 col-md-4 text-center" data-aos="zoom-in" data-aos-duration="1000">
                    <div class="feature" style="margin-bottom: 50px !important;">
                        <img alt="Image" src="{{ asset("web/assets/img/service_5.png") }}" class="border--round" style="margin-bottom: 1.85714286em;" />
                        <p class="text-center font-size-16 text-dark-grey Font-Manrope-SemiBold service-label-3">Every child is an artist. Painting, drawing, coloring, be creative as much as you can imagine!</p>
                    </div>
                </div>
                <div class="col-4 col-md-4 text-center" data-aos="zoom-in" data-aos-duration="1000">
                    <div class="feature" style="margin-bottom: 50px !important;">
                        <img alt="Image" src="{{ asset("web/assets/img/service_6.png") }}" class="border--round" style="margin-bottom: 1.85714286em;" />
                        <p class="text-center font-size-16 text-dark-grey Font-Manrope-SemiBold service-label-3">The ultimate children’s hair salon with professional stylist for children</p>
                    </div>
                </div>
            </div>
            @else
                <div class="row">
                    <div class="col-12 col-md-6 text-center" data-aos="zoom-in" data-aos-duration="500">
                        <div class="feature" style="margin-bottom: 50px !important;">
                            <img alt="Image" src="{{ asset("web/assets/img/service_1.png") }}" class="border--round" style="margin-bottom: 1.85714286em;" />
                            <p class="text-center font-size-24 text-dark-grey Font-Manrope-ExtraBold mb-2 service-label-2">BIRTHDAY PARTY</p>
                            <p class="text-center font-size-16 text-dark-grey Font-Manrope-SemiBold service-label-3">Celebrate your birthday party in your own way!</p>
                        </div>
                    </div>
                    <div class="col-12 col-md-6 text-center" data-aos="zoom-in" data-aos-duration="1000">
                        <div class="feature" style="margin-bottom: 50px !important;">
                            <img alt="Image" src="{{ asset("web/assets/img/service_2.png") }}" class="border--round" style="margin-bottom: 1.85714286em;" />
                            <p class="text-center font-size-24 text-dark-grey Font-Manrope-ExtraBold mb-2 service-label-2">SCHOOL FIELDTRIP</p>
                            <p class="text-center font-size-16 text-dark-grey Font-Manrope-SemiBold service-label-3">Let’s have a tour into Miniapolis. Let’s play and learn in a fun way.</p>
                        </div>
                    </div>

                    <div class="col-md-1-half-5"></div>

                    <div class="col-12 col-md-3 text-center" data-aos="zoom-in" data-aos-duration="500">
                        <div class="feature" style="margin-bottom: 50px !important;">
                            <img alt="Image" src="{{ asset("web/assets/img/service_4.png") }}" class="border--round" style="margin-bottom: 1.85714286em;" />
                            <p class="text-center font-size-16 text-dark-grey Font-Manrope-SemiBold service-label-3">Let’s play, learn and grow in a fun classes with various activities daily</p>
                        </div>
                    </div>
                    <div class="col-12 col-md-3 text-center" data-aos="zoom-in" data-aos-duration="1000">
                        <div class="feature" style="margin-bottom: 50px !important;">
                            <img alt="Image" src="{{ asset("web/assets/img/service_5.png") }}" class="border--round" style="margin-bottom: 1.85714286em;" />
                            <p class="text-center font-size-16 text-dark-grey Font-Manrope-SemiBold service-label-3">Every child is an artist. Painting, drawing, coloring, be creative as much as you can imagine!</p>
                        </div>
                    </div>
                    <div class="col-12 col-md-3 text-center" data-aos="zoom-in" data-aos-duration="1000">
                        <div class="feature" style="margin-bottom: 50px !important;">
                            <img alt="Image" src="{{ asset("web/assets/img/service_6.png") }}" class="border--round" style="margin-bottom: 1.85714286em;" />
                            <p class="text-center font-size-16 text-dark-grey Font-Manrope-SemiBold service-label-3">The ultimate children’s hair salon with professional stylist for children</p>
                        </div>
                    </div>
                    <div class="col-md-1-half-5"></div>

                </div>
            @endif
            <!--end of row-->
        </div>
        <!--end of container-->
    </section>
    <section class="space--xs background-orange">
        <div class="container">
            <section class="text-center space--xs">
                <div class="container">
                    <div class="row justify-content-center">
                        <div class="col-12 col-md-10 col-lg-8">
                            <h2 class="font-size-48 text-dark-grey Font-Manrope-ExtraBold custom-section-title playground-label-1" data-aos="fade-zoom-in" data-aos-duration="500">Playground</h2>
                        </div>
                    </div>
                </div>
            </section>
            <div class="row">
                <div class="col-6 col-md-6 text-center" data-aos="fade-right" data-aos-duration="500">
                    <div class="feature" style="margin-bottom: 50px !important;">
                        <img alt="Image" src="{{ asset("web/assets/img/playground_1.png") }}" class="border--round" style="margin-bottom: -20px;" />
                        <p class="text-center font-size-24 text-dark-grey Font-Manrope-ExtraBold mt-4 playground-label-2">BALL POOL</p>
                    </div>
                </div>
                <div class="col-6 col-md-6 text-center" data-aos="fade-right" data-aos-duration="500">
                    <div class="feature" style="margin-bottom: 50px !important;">
                        <img alt="Image" src="{{ asset("web/assets/img/playground_2.png") }}" class="border--round" style="margin-bottom: -20px;" />
                        <p class="text-center font-size-24 text-dark-grey Font-Manrope-ExtraBold mt-4 playground-label-2">INDOOR PLAYGROUND</p>
                    </div>
                </div>
                <div class="col-6 col-md-6 text-center" data-aos="fade-left" data-aos-duration="500">
                    <div class="feature" style="margin-bottom: 50px !important;">
                        <img alt="Image" src="{{ asset("web/assets/img/playground_3.png") }}" class="border--round" style="margin-bottom: -20px;" />
                        <p class="text-center font-size-24 text-dark-grey Font-Manrope-ExtraBold mt-4 playground-label-2">ROLE PLAY</p>
                    </div>
                </div>
                <div class="col-6 col-md-6 text-center" data-aos="fade-left" data-aos-duration="500">
                    <div class="feature" style="margin-bottom: 50px !important;">
                        <img alt="Image" src="{{ asset("web/assets/img/playground_4.png") }}" class="border--round" style="margin-bottom: -20px;" />
                        <p class="text-center font-size-24 text-dark-grey Font-Manrope-ExtraBold mt-4 playground-label-2">RIDES</p>
                    </div>
                </div>
            </div>
            <!--end of row-->
        </div>
        <!--end of container-->
    </section>
    <section class="space--xs background-yellow">
        <div class="container">
            <section class="text-center space--xs">
                <div class="container">
                    <div class="row justify-content-center">
                        <div class="col-12 col-md-10 col-lg-8">
                            <h2 class="font-size-48 text-dark-grey Font-Manrope-ExtraBold custom-section-title facilities-label-1" data-aos="fade-zoom-in" data-aos-duration="500">Facilities</h2>
                        </div>
                    </div>
                </div>
            </section>
            @if ((new \Jenssegers\Agent\Agent())->isMobile() || (new \Jenssegers\Agent\Agent())->isTablet())
                <div class="row">
                    <div class="col-4 col-md-4 text-center" data-aos="fade-left" data-aos-duration="500">
                        <div class="feature" style="margin-bottom: 50px !important;">
                            <img alt="Image" src="{{ asset("web/assets/img/facility_1.png") }}" class="border--round" style="margin-bottom: 1.85714286em;" />
                            <h4 class="text-center font-size-20 text-dark-grey Font-Manrope-SemiBold facilities-label-2">Stroller Parking</h4>
                        </div>
                    </div>
                    <div class="col-4 col-md-4 text-center" data-aos="fade-right" data-aos-duration="500">
                        <div class="feature" style="margin-bottom: 50px !important;">
                            <img alt="Image" src="{{ asset("web/assets/img/facility_2.png") }}" class="border--round" style="margin-bottom: 1.85714286em;" />
                            <h4 class="text-center font-size-20 text-dark-grey Font-Manrope-SemiBold facilities-label-2">Kids Toilet</h4>
                        </div>
                    </div>
                    <div class="col-4 col-md-4 text-center" data-aos="fade-left" data-aos-duration="500">
                        <div class="feature" style="margin-bottom: 50px !important;">
                            <img alt="Image" src="{{ asset("web/assets/img/facility_3.png") }}" class="border--round" style="margin-bottom: 1.85714286em;" />
                            <h4 class="text-center font-size-20 text-dark-grey Font-Manrope-SemiBold facilities-label-2">Nursing Room</h4>
                        </div>
                    </div>
                    <div class="col-4 col-md-4 text-center" data-aos="fade-right" data-aos-duration="500">
                        <div class="feature" style="margin-bottom: 50px !important;">
                            <img alt="Image" src="{{ asset("web/assets/img/facility_4.png") }}" class="border--round" style="margin-bottom: 1.85714286em;" />
                            <h4 class="text-center font-size-20 text-dark-grey Font-Manrope-SemiBold facilities-label-2">CCTV</h4>
                        </div>
                    </div>
                    <div class="col-4 col-md-4 text-center" data-aos="fade-left" data-aos-duration="500">
                        <div class="feature" style="margin-bottom: 50px !important;">
                            <img alt="Image" src="{{ asset("web/assets/img/facility_5.png") }}" class="border--round" style="margin-bottom: 1.85714286em;" />
                            <h4 class="text-center font-size-20 text-dark-grey Font-Manrope-SemiBold facilities-label-2">First Aid</h4>
                        </div>
                    </div>
                    <div class="col-4 col-md-4 text-center" data-aos="fade-right" data-aos-duration="500">
                        <div class="feature" style="margin-bottom: 50px !important;">
                            <img alt="Image" src="{{ asset("web/assets/img/facility_6.png") }}" class="border--round" style="margin-bottom: 1.85714286em;" />
                            <h4 class="text-center font-size-20 text-dark-grey Font-Manrope-SemiBold facilities-label-2">Customer Service</h4>
                        </div>
                    </div>
                    <div class="col-2 col-md-2"></div>
                    <div class="col-4 col-md-4 text-center" data-aos="fade-left" data-aos-duration="500">
                        <div class="feature" style="margin-bottom: 50px !important;">
                            <img alt="Image" src="{{ asset("web/assets/img/facility_7.png") }}" class="border--round" style="margin-bottom: 1.85714286em;" />
                            <h4 class="text-center font-size-20 text-dark-grey Font-Manrope-SemiBold facilities-label-2">Waiting Area</h4>
                        </div>
                    </div>
                    <div class="col-4 col-md-4 text-center" data-aos="fade-right" data-aos-duration="500">
                        <div class="feature" style="margin-bottom: 50px !important;">
                            <img alt="Image" src="{{ asset("web/assets/img/facility_8.png") }}" class="border--round" style="margin-bottom: 1.85714286em;" />
                            <h4 class="text-center font-size-20 text-dark-grey Font-Manrope-SemiBold facilities-label-2">Locker</h4>
                        </div>
                    </div>
                    <div class="col-2 col-md-2"></div>
                </div>
            @else
                <div class="row">
                    <div class="col-12 col-md-2"></div>
                    <div class="col-12 col-md-2 text-center" data-aos="fade-left" data-aos-duration="500">
                        <div class="feature" style="margin-bottom: 50px !important;">
                            <img alt="Image" src="{{ asset("web/assets/img/facility_1.png") }}" class="border--round" style="margin-bottom: 1.85714286em;" />
                            <h4 class="text-center font-size-20 text-dark-grey Font-Manrope-SemiBold facilities-label-2">Stroller Parking</h4>
                        </div>
                    </div>
                    <div class="col-12 col-md-2 text-center" data-aos="fade-right" data-aos-duration="500">
                        <div class="feature" style="margin-bottom: 50px !important;">
                            <img alt="Image" src="{{ asset("web/assets/img/facility_2.png") }}" class="border--round" style="margin-bottom: 1.85714286em;" />
                            <h4 class="text-center font-size-20 text-dark-grey Font-Manrope-SemiBold facilities-label-2">Kids Toilet</h4>
                        </div>
                    </div>
                    <div class="col-12 col-md-2 text-center" data-aos="fade-left" data-aos-duration="500">
                        <div class="feature" style="margin-bottom: 50px !important;">
                            <img alt="Image" src="{{ asset("web/assets/img/facility_3.png") }}" class="border--round" style="margin-bottom: 1.85714286em;" />
                            <h4 class="text-center font-size-20 text-dark-grey Font-Manrope-SemiBold facilities-label-2">Nursing Room</h4>
                        </div>
                    </div>
                    <div class="col-12 col-md-2 text-center" data-aos="fade-right" data-aos-duration="500">
                        <div class="feature" style="margin-bottom: 50px !important;">
                            <img alt="Image" src="{{ asset("web/assets/img/facility_4.png") }}" class="border--round" style="margin-bottom: 1.85714286em;" />
                            <h4 class="text-center font-size-20 text-dark-grey Font-Manrope-SemiBold facilities-label-2">CCTV</h4>
                        </div>
                    </div>
                    <div class="col-12 col-md-2"></div>
                    <div class="col-12 col-md-2"></div>
                    <div class="col-12 col-md-2 text-center" data-aos="fade-left" data-aos-duration="500">
                        <div class="feature" style="margin-bottom: 50px !important;">
                            <img alt="Image" src="{{ asset("web/assets/img/facility_5.png") }}" class="border--round" style="margin-bottom: 1.85714286em;" />
                            <h4 class="text-center font-size-20 text-dark-grey Font-Manrope-SemiBold facilities-label-2">First Aid</h4>
                        </div>
                    </div>
                    <div class="col-12 col-md-2 text-center" data-aos="fade-right" data-aos-duration="500">
                        <div class="feature" style="margin-bottom: 50px !important;">
                            <img alt="Image" src="{{ asset("web/assets/img/facility_6.png") }}" class="border--round" style="margin-bottom: 1.85714286em;" />
                            <h4 class="text-center font-size-20 text-dark-grey Font-Manrope-SemiBold facilities-label-2">Customer Service</h4>
                        </div>
                    </div>
                    <div class="col-12 col-md-2 text-center" data-aos="fade-left" data-aos-duration="500">
                        <div class="feature" style="margin-bottom: 50px !important;">
                            <img alt="Image" src="{{ asset("web/assets/img/facility_7.png") }}" class="border--round" style="margin-bottom: 1.85714286em;" />
                            <h4 class="text-center font-size-20 text-dark-grey Font-Manrope-SemiBold facilities-label-2">Waiting Area</h4>
                        </div>
                    </div>
                    <div class="col-12 col-md-2 text-center" data-aos="fade-right" data-aos-duration="500">
                        <div class="feature" style="margin-bottom: 50px !important;">
                            <img alt="Image" src="{{ asset("web/assets/img/facility_8.png") }}" class="border--round" style="margin-bottom: 1.85714286em;" />
                            <h4 class="text-center font-size-20 text-dark-grey Font-Manrope-SemiBold facilities-label-2">Locker</h4>
                        </div>
                    </div>
                    <div class="col-12 col-md-2"></div>
                </div>
            @endif
            <!--end of row-->
        </div>
        <!--end of container-->
    </section>
    <section class="space--xs">
        <div class="container">
            <div class="row">
               <div class="col-md-12 text-center" style="padding: 150px 0px;" data-aos="fade-zoom-in" data-aos-duration="1000">
                   <img src="{{ asset("web/assets/img/instagram_feed_icon.png") }}"/>
               </div>
            </div>
            <!--end of row-->
        </div>
        <!--end of container-->
    </section>
@endsection