@extends('layouts.app')

@php
     $seo =  array (
        'title' =>  App::getLocale() == 'en' ? 'Marival Resorts: Luxury and Experiences in Riviera Nayarit | Inovation Travel' : 'Marival Resorts: Lujo y Experiencias en Riviera Nayarit | Inovation Travel',
        'description' =>  App::getLocale() == 'en' ? 'Experience luxury in Riviera Nayarit. Explore the sophisticated Marival Distinct, the relaxing Armony Resort and the vibrant Marival Emotions - your dream vacation awaits!' : 'Vive el lujo en Riviera Nayarit. Explora el sofisticado Marival Distinct, el relajante Armony Resort y el vibrante Marival Emotions. ¡Tus vacaciones de ensueño te esperan!',
        'imagen' => asset('/storage/images/op/inovations-travel-opengraph.jpg'),
        'url' =>  App::getLocale() == 'en' ? 'https://inovationtravel.com/resorts/' : 'https://inovationtravel.com/es/marival-resorts/',
    );
@endphp

@push('css')
    @vite('resources/sass/website/pages/resorts.scss')
@endpush

@section('content')

<div class="banner">
    <picture>
        <source media="(max-width: 640px)" srcset="{{ asset('storage/images/banner/background-blue.webp') }}">
        <source media="(max-width: 1001px)" srcset="{{ asset('storage/images/banner/background-blue.webp') }}">
        <source media="(max-width: 1600px)" srcset="{{ asset('storage/images/banner/background-blue.webp') }}">
        <img src="{{ asset('storage/images/banner/background-blue.webp') }}" alt="{{ __('resorts.title') }}">
    </picture>
    <div class="banner-text">
        <h1>{{ __('resorts.title') }}</h1>
    </div>
</div>

<section>
    <div class="resorts py-5">
        <div class="container">
            <div class="row d-flex justify-content-center" id="distinct">
                <div class="col-lg-10 col-md-12 text-center mb-5">
                    <div class="title">
                        <p class="subtitle">{!! __('resorts.distinct.subtitle') !!}</p>
                        <h2>{!! __('resorts.distinct.title') !!}</h2>
                    </div>
                </div>
                <div class="col-lg-6 col-md-12 text-center p-0">
                    <img src="{{ asset('storage/images/marival-distinct-handwritten-collection-experince.webp') }}" alt="{!! __('resorts.distinct.title') !!}" width="100%" style="height: 100%; object-fit: cover;">
                </div>
                 <div class="col-lg-6 col-md-12 box-shadow">
                    <div class="box-container">
                        <p>{!! __('resorts.distinct.description') !!}</p>
                        <p class="mt-3"> {!! __('resorts.distinct.description_2') !!}</p>
                        <ul class="mt-2" style="list-style: none; padding-left: 10px;">
                            <li><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-8 me-2" style="width: 20px;">
                                    <path fill-rule="evenodd" d="M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd" />
                                </svg>{!! __('resorts.distinct.listing.1') !!}</li>
                            <li><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-8 me-2" style="width: 20px;">
                                    <path fill-rule="evenodd" d="M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd" />
                                </svg>{!! __('resorts.distinct.listing.2') !!}</li>
                            <li><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-8 me-2" style="width: 20px;">
                                    <path fill-rule="evenodd" d="M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd" />
                                </svg>{!! __('resorts.distinct.listing.3') !!}</li>
                            <li><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-8 me-2" style="width: 20px;">
                                    <path fill-rule="evenodd" d="M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd" />
                                </svg>{!! __('resorts.distinct.listing.4') !!}</li>
                            <li><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-8 me-2" style="width: 20px;">
                                    <path fill-rule="evenodd" d="M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd" />
                                </svg>{!! __('resorts.distinct.listing.5') !!}</li>
                        </ul>
                        <div class="py-4 btn_reservations">
                            <a href="{{ App::getLocale() == 'en' ? 'https://traveladvisors.inovationtravel.com/marival-distinct-nuevo-vallarta' : 'https://asesoresdeviaje.inovationtravel.com/marival-distinct-nuevo-vallarta' }}" target="_blank" class="" 
                            style="background-color: #004d71; color: #fff; padding: 10px 20px; border-radius: 30px; text-decoration:none;">{{ __('resorts.btn_link') }}
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" class="size-2" width="20px">
                                    <path fill-rule="evenodd" d="M16.72 7.72a.75.75 0 0 1 1.06 0l3.75 3.75a.75.75 0 0 1 0 1.06l-3.75 3.75a.75.75 0 1 1-1.06-1.06l2.47-2.47H3a.75.75 0 0 1 0-1.5h16.19l-2.47-2.47a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" />
                                </svg>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <hr class="my-5" style="border-color:transparent;"/>
             <div class="row d-flex justify-content-center" id="armony">
                <div class="title text-center mb-5">
                    <p class="subtitle">{!! __('resorts.armony.subtitle') !!}</p>
                     <h2>{!! __('resorts.armony.title') !!}</h2>
                </div>
                <div class="col-lg-6 col-md-12 text-center order-lg-2 p-0">
                    <img src="{{ asset('storage/images/armony-resort-mgallery-collection-experience.webp') }}" alt="{!! __('resorts.armony.title') !!}" width="100%" style="height: 100%; object-fit: cover;">
                </div>
                 <div class="col-lg-6 col-md-12 order-lg-1 box-shadow">
                    <div class="box-container">
                        <p>{!! __('resorts.armony.description') !!}</p>
                        <p class="mt-3"> {!! __('resorts.armony.description_2') !!}</p>
                        <ul class="mt-2" style="list-style: none; padding-left: 10px;">
                            <li><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-8 me-2" style="width: 20px;">
                                    <path fill-rule="evenodd" d="M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd" />
                                </svg>{!! __('resorts.armony.listing.1') !!}</li>
                            <li><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-8 me-2" style="width: 20px;">
                                    <path fill-rule="evenodd" d="M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd" />
                                </svg>{!! __('resorts.armony.listing.2') !!}</li>
                            <li><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-8 me-2" style="width: 20px;">
                                    <path fill-rule="evenodd" d="M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd" />
                                </svg>{!! __('resorts.armony.listing.3') !!}</li>
                            <li><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-8 me-2" style="width: 20px;">
                                    <path fill-rule="evenodd" d="M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd" />
                                </svg>{!! __('resorts.armony.listing.4') !!}</li>
                            <li><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-8 me-2" style="width: 20px;">
                                    <path fill-rule="evenodd" d="M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd" />
                                </svg>{!! __('resorts.armony.listing.5') !!}</li>
                             <li><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-8 me-2" style="width: 20px;">
                                    <path fill-rule="evenodd" d="M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd" />
                                </svg>{!! __('resorts.armony.listing.6') !!}</li>
                              <li><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-8 me-2" style="width: 20px;">
                                    <path fill-rule="evenodd" d="M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd" />
                                </svg>{!! __('resorts.armony.listing.7') !!}</li>
                        </ul>
                        <div class="py-4 btn_reservations">
                            <a href="{{ App::getLocale() == 'en' ? 'https://traveladvisors.inovationtravel.com/armony-punta-de-mita' : 'https://asesoresdeviaje.inovationtravel.com/armony-punta-de-mita' }}" target="_blank" class="" style="background-color: #004d71; color: #fff; padding: 10px 20px; border-radius: 30px; text-decoration:none;">{{ __('resorts.btn_link') }}
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" class="size-2" width="20px">
                                    <path fill-rule="evenodd" d="M16.72 7.72a.75.75 0 0 1 1.06 0l3.75 3.75a.75.75 0 0 1 0 1.06l-3.75 3.75a.75.75 0 1 1-1.06-1.06l2.47-2.47H3a.75.75 0 0 1 0-1.5h16.19l-2.47-2.47a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" />
                                </svg>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <hr class="my-5" style="border-color:transparent;"/>
            <div class="row d-flex justify-content-center" id="emotions">
                <div class="title text-center mb-5">
                    <p class="subtitle">{!! __('resorts.emotions.subtitle') !!}</p>
                     <h2>{!! __('resorts.emotions.title') !!}</h2>
                </div>
                <div class="col-lg-6 col-md-12 text-center p-0">
                    <img src="{{ asset('storage/images/armony-resort-mgallery-collection-experince.webp') }}" alt="{!! __('resorts.emotions.title') !!}" width="100%" style="height: 100%; object-fit: cover;">
                </div>
                 <div class="col-lg-6 col-md-12 box-shadow">
                    <div class="box-container">
                        <p>{!! __('resorts.emotions.description') !!}</p>
                        <p class="mt-3"> {!! __('resorts.emotions.description_2') !!}</p>
                        <ul class="mt-2" style="list-style: none; padding-left: 10px;">
                            <li><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-8 me-2" style="width: 20px;">
                                    <path fill-rule="evenodd" d="M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd" />
                                </svg>{!! __('resorts.emotions.listing.1') !!}</li>
                            <li><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-8 me-2" style="width: 20px;">
                                    <path fill-rule="evenodd" d="M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd" />
                                </svg>{!! __('resorts.emotions.listing.2') !!}</li>
                            <li><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-8 me-2" style="width: 20px;">
                                    <path fill-rule="evenodd" d="M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd" />
                                </svg>{!! __('resorts.emotions.listing.3') !!}</li>
                            <li><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-8 me-2" style="width: 20px;">
                                    <path fill-rule="evenodd" d="M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd" />
                                </svg>{!! __('resorts.emotions.listing.4') !!}</li>
                            <li><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-8 me-2" style="width: 20px;">
                                    <path fill-rule="evenodd" d="M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd" />
                                </svg>{!! __('resorts.emotions.listing.5') !!}</li>
                        </ul>
                        <div class="py-4 btn_reservations">
                            <a href="{{ App::getLocale() == 'en' ? 'https://traveladvisors.inovationtravel.com/marival-emotions-nuevo-vallarta' : 'https://asesoresdeviaje.inovationtravel.com/marival-emotions-nuevo-vallarta' }}" target="_blank" class="" style="background-color: #004d71; color: #fff; padding: 10px 20px; border-radius: 30px; text-decoration:none;">{{ __('resorts.btn_link') }}
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" class="size-2" width="20px">
                                    <path fill-rule="evenodd" d="M16.72 7.72a.75.75 0 0 1 1.06 0l3.75 3.75a.75.75 0 0 1 0 1.06l-3.75 3.75a.75.75 0 1 1-1.06-1.06l2.47-2.47H3a.75.75 0 0 1 0-1.5h16.19l-2.47-2.47a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" />
                                </svg>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

@endsection