@extends('layouts.master-new')
@section('content')
{{-- Hero --}}
@include('partials.'.$account.'.new-home-hero')


<div class="container" style="background: #ece5f9;">
  <div class="columns" style="display: grid;grid-auto-flow: column;gap: 4px;align-items: center;justify-items: center;">
    <div class="column col-3 col-sm-6 mb-10" style="width: auto;height: 200px;">
      <p align="center"><img src="https://www.yekoclub.com/img/images/images/menu.png" width="50px" /></p>
      <p align="center" style="font-size: 40px;font-weight: bold;color: #25034b;">50 + </p>
      <p align="center" style="font-size: 20px;color: #25034b;">Categorías</p>
    </div>
    <div class="column col-3 col-sm-6 mb-10" style="width: auto;height: 200px;">
      <p align="center"><img src="https://www.yekoclub.com/img/images/images/placeholder.png" width="50px" /></p>
      <p align="center" style="font-size: 40px;font-weight: bold;color: #25034b;">2700 + </p>
      <p align="center" style="font-size: 20px;color: #25034b;">Puntos redención</p>
    </div>
    <div class="column col-3 col-sm-6 mb-10" style="width: auto;height: 235px;">
      <p align="center"><img src="https://www.yekoclub.com/img/images/images/handshake.png" width="70px" /></p>
      <p align="center" style="font-size: 40px;font-weight: bold;color: #25034b;">750 + </p>
      <p align="center" style="font-size: 20px;color: #25034b;">Alianzas</p>
    </div>
    <div class="column col-3 col-sm-6 mb-10" style="width: auto;height: 200px;">
      <p align="center"><img src="https://www.yekoclub.com/img/images/images/user.png" width="50px" /></p>
      <p align="center" style="font-size: 40px;font-weight: bold;color: #25034b;">315k + </p>
      <p align="center" style="font-size: 20px;color: #25034b;">Socios Yekoclub®</p>
    </div>
  </div>
</div>

<div class="container" style="background-image:url(https://www.yekoclub.com/img/b2b.png); height: 900px">
  <div class="columns" style="display: grid;grid-auto-flow: column;gap: 4px;align-items: center;justify-items: center;">
    <div class="column col-3 col-sm-6 mb-10" style="width: auto;height: 200px;">
      <img src="https://yekoclub.com/img/b2cheader.png" />
      <p style="color:white; font-size: 30px">¡ Una solución tangible de ahorro y una plataforma <br /> de beneficios pensados especialmente para ti !</p>
      <li style="font-size: 25px; color: white; font-weight: bold;    list-style-image: url('https://yekoclub.com/img/bullet.png');
    list-style-position: inside; font-family: Coolvetica">Descuentos de 5% hasta 50%</li>
      <li style="font-size: 25px; color: white; font-weight: bold;    list-style-image: url('https://yekoclub.com/img/bullet.png');
    list-style-position: inside">Más de 2.700 puntos de redención en Colombia</li>
      <li style="font-size: 25px; color: white; font-weight: bold;    list-style-image: url('https://yekoclub.com/img/bullet.png');
    list-style-position: inside">Más de 50 Categorías.</li>
      <li style="font-size: 25px; color: white; font-weight: bold;    list-style-image: url('https://yekoclub.com/img/bullet.png');
    list-style-position: inside">Asistencia vial + Asistencias Telefónicas + Asistencias Hogar</li>
      <li style="font-size: 25px; color: white; font-weight: bold;    list-style-image: url('https://yekoclub.com/img/bullet.png');
    list-style-position: inside">Bonos de Turismo Nacional e Internacional</li>
    </div>
    <div style="height: 400px; background: white; width: 1px">
    </div>
    <div class="column col-3 col-sm-6 mb-10" style="width: auto;height: 200px;">
      <img src="https://yekoclub.com/img/b2bheader.png" />
      <p style="color:white; font-size: 30px">¡ Una verdadero programa de lealtad y fidelización <br /> para tus empleados, clientes o afiliados !</p>
      <li style="font-size: 25px; color: white; font-weight: bold;    list-style-image: url('https://yekoclub.com/img/bullet.png');
    list-style-position: inside">Construimos tu propio club de beneficios</li>
      <li style="font-size: 25px; color: white; font-weight: bold;    list-style-image: url('https://yekoclub.com/img/bullet.png');
    list-style-position: inside">Personalizamos tu tarjeta, carnet o membresía</li>
      <li style="font-size: 25px; color: white; font-weight: bold;    list-style-image: url('https://yekoclub.com/img/bullet.png');
    list-style-position: inside">Creamos tu plataforma (Página web + App Móvil)</li>
      <li style="font-size: 25px; color: white; font-weight: bold;    list-style-image: url('https://yekoclub.com/img/bullet.png');
    list-style-position: inside">Comunicación directa con tu base de usuarios.</li>
      <li style="font-size: 25px; color: white; font-weight: bold;    list-style-image: url('https://yekoclub.com/img/bullet.png');
    list-style-position: inside">Más de de 13 Años en Latinoamérica.</li>
    </div>
  </div>
</div>

{{-- Destacados --}}
<div class="container pb-20 mt-40 pt-20">
  @include('partials.new-destacados')
</div>
{{-- Mapa --}}
<div class="container my-30 px-0">
  <div class="columns">
    <div class="col-12">
      @component('partials.new-g-map', [
      'divHeight'=>'500px',
      'map' =>[ 'center' => $cityPosition, 'zoom' => 11 ],
      'markers' => $markers,
      'data' => [
      'categories' => $categories,
      'cities' => $cities,
      'slug' => $slug,
      'category' => $category
      ]
      ])@endcomponent
    </div>
  </div>
</div>

<div id="boxes">
  <div style="top: 50%; left: 50%; display: none;" id="dialog" class="window">
    <div id="san">
      <a href="#" class="close agree"><img src="https://www.yekoclub.com/img/close-icon.png" width="25" style="float:right; margin-right: -25px; margin-top: -20px;"></a>
      <a href="https://www.yekoclub.com/2/all/partners/575"><img src="https://www.yekoclub.com/img/banners_jenos_pizza.jpg" width="100%"></a>    </div>
  </div>
  <div style="width: 2478px; font-size: 32pt; color:white; height: 1202px; display: none; opacity: 0.4;" id="mask"></div>
</div>

<style>
  #mask {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 9000;
    background-color: #26262c;
    display: none;
  }

  #boxes .window {
    position: absolute;
    left: 0;
    top: 0;
    width: 440px;
    height: 850px;
    display: none;
    z-index: 9999;
    padding: 20px;
    border-radius: 5px;
    text-align: center;
  }

  #boxes #dialog {
    width: 900px;
    height: auto;
    padding: 10px 10px 10px 10px;
    background-color: #ffffff;
    font-size: 15pt;
  }

  .agree:hover {
    background-color: #D1D1D1;
  }

  .popupoption:hover {
    background-color: #D1D1D1;
    color: green;
  }

  .popupoption2:hover {
    color: red;
  }
</style>

<script>
  $(document).ready(function() {
    var id = '#dialog';
    var maskHeight = $(document).height();
    var maskWidth = $(window).width();
    $('#mask').css({
      'width': maskWidth,
      'height': maskHeight
    });
    $('#mask').fadeIn(500);
    $('#mask').fadeTo("slow", 0.9);
    var winH = $(window).height();
    var winW = $(window).width();
    $(id).css('top', winH / 2 - $(id).height() / 2);
    $(id).css('left', winW / 2 - $(id).width() / 2);
    $(id).fadeIn(2000);
    $('.window .close').click(function(e) {
      e.preventDefault();
      $('#mask').hide();
      $('.window').hide();
    });
    $('#mask').click(function() {
      $(this).hide();
      $('.window').hide();
    });

  });
</script>

{{-- YekoTravel --}}
<div class="container">
  @include('partials.yeko-travel-second')
</div>

<div class="container p-0">
  @include('partials.yeko-conductor')
</div>

<div class="container grid-lg py-35">
  @include('partials.new-categories-grid')
</div>

<style>

</style>
@endsection