@extends('layouts.master')
@section('content')

<div class="download-app-div about-div" style="background-image: url({{ asset('img/www/quienes-somos.jpeg') }});">
    <div class="overlay-primary"></div>
    <div class="content content-res">
       <div class="container grid-lg">
            <div class="col-8 col-md-12 col-mx-auto">
                <h1 class="text-center p-centered bold">El club de beneficios más grande de Latinoamérica</h1>
                <p class="text-center p-centered fs-18 fw-600">Conoce más acerca de Nosotros</p>
            </div>
        </div>
    </div>
</div>

<div class="container pt-80">
    <div class="content">
        <div class="col-12 col-mx-center">
            <p class="text-center p-centered fs-32 cl-y fw-600">Objetivo</p>
            <p class="text-center p-centered fs-24 fw-600 mt-minus-17">YekoClub®</p>
            <p class="text-center p-centered fs-18 fw-600" style="max-width:1034px;">“Brindamos una solución tangible de ahorro, generando una red de descuentos para nuestros usuarios y además ofreciendo una plataforma de publicidad y mercadeo directo a nuestros establecimientos y negocios afiliados”</p>
        </div>
    </div>
</div>

<div class="container pt-50 mw-1100 pb-53">
    <div class="columns">
        <div class="col-3 col-md-12 col-mx-auto text-center p-centered">
            <p class="text-center p-centered count fs-69 fw-600 d-ib">108</p>
            <p class="text-center p-centered fs-69 fw-600 d-ib">mil+</p>
            <p class="text-center p-centered fs-19 fw-400 mt-minus-21 cl-m">Socios YekoClub®</p>
        </div>
        <div class="col-3 col-md-12 col-mx-auto text-center p-centered">
            <p class="text-center p-centered count fs-69 fw-600 d-ib">580</p>
            <p class="text-center p-centered fs-69 fw-600 d-ib">+</p>
            <p class="text-center p-centered fs-19 fw-400 mt-minus-21 cl-m">Convenios activos</p>
        </div>
        <div class="col-3 col-md-12 col-mx-auto text-center p-centered">
            <p class="text-center p-centered count fs-69 fw-600 d-ib">30</p>
            <p class="text-center p-centered fs-69 fw-600 d-ib">+</p>
            <p class="text-center p-centered fs-19 fw-400 mt-minus-21 cl-m">Categorías de comercios</p>
        </div>
    </div>
</div>

<div class="bg-c-g">
<div class="container grid-lg bg-c-g">
    <div class="columns bg-c-g pt-40">
        <div class="col-6 col-md-12 col-mx-auto text-center p-centered pr-20 pl-20">
            <p class="text-center cl-y fs-20 fw-600 mb-7">Conoce nuestra</p>
            <p class="fw-600 fs-26">Visión</p>
            <p class="text-center fs-16 lh-30">Consolidarnos como una empresa líder en nuestro ramo, manteniendo e incrementando nuestra versatilidad como marca y brindando cada vez mayores beneficios a nuestra red de usuarios y comercios aliados, basándonos en una filosofía de calidad total en el servicio y apoyándonos en el más estricto seguimiento de nuestros valores empresariales.</p>
        </div>
        <div class="col-6 col-md-12 col-mx-center text-center p-centered pl-20 pr-20">
            <p class="text-center cl-y fs-20 fw-600 mb-7">Conoce nuestra</p>
            <p class="fw-600 fs-26">Misión</p>
            <p class="text-center fs-16 lh-30">Brindar un servicio de calidad total, generando un ahorro tangible para nuestros usuarios y al mismo tiempo una herramienta que contribuya al crecimiento de nuestras marcas y establecimientos aliados; logrando así una mayor y más efectiva relación comercial entre ambos.</p>
        </div>
        <div class="col-6 col-12 col-md-12 col-mx-auto pt-40">
            <p class="text-center fs-20 cl-y fw-600 mb-7">Son fundamentales nuestros</p>
            <p class="text-center fs-26 fw-600">Valores Empresariales</p>
        </div>
    </div>
</div>
</div>

<div class="container bg-c-g pb-40">
    <div class="columns">
        <div class="col-9 col-mx-auto text-center p-centered">
            <div class="card bg-c-g">
                <div class="card-body p-20 scroll">
                    <ul class="tab tab-block tab-sp pb-10 pt-10">
                        <li class="item-about d-ib" id="tabs"><a class="fs-20 fw-600 p-15 text-black" href="javascript:;">Ética</a></li>
                        <li class="item-about d-ib" id="tabs"><a class="fs-20 fw-600 p-15 text-black" href="javascript:;">Respeto</a></li>
                        <li class="item-about d-ib" id="tabs"><a class="fs-20 fw-600 p-15 text-black" href="javascript:;">Disciplina</a></li>
                        <li class="item-about d-ib" id="tabs"><a class="fs-20 fw-600 p-15 text-black" href="javascript:;">Honestidad</a></li>
                        <li class="item-about d-ib" id="tabs"><a class="fs-20 fw-600 p-15 text-black" href="javascript:;">Transparencia</a></li>
                        <li class="item-about d-ib" id="tabs"><a class="fs-20 fw-600 p-15 text-black" href="javascript:;">Responsabilidad</a></li>
                    </ul>
                </div>
            </div>
        </div>        
    </div>
    <div class="text-center pt-40">
        <a href="/general/cards-buy" class="btn btn-primary text-center fs-24 pt-20 pb-20 pl-40 pr-40">Quiero mi tarjeta YekoClub®</a>
    </div>
</div>



@endsection
@section('extra-footer')
<script>
// Animate the element's value from x to y:
// $({someValue: 40000}).animate({someValue: 45000}, {
//       duration: 3000,
//       easing:'swing', // can be anything
//       step: function() { // called on every step
//           // Update the element's text with rounded-up value:
//           $('#tabs').text(commaSeparateNumber(Math.round(this.someValue)));
//       }
//   });
$('.count').each(function () {
    $(this).prop('Counter',0).animate({
        Counter: $(this).text()
    }, {
        duration: 4000,
        easing: 'swing',
        step: function (now) {
            $(this).text(commaSeparateNumber(Math.round(now)));
        }
    });
});

 function commaSeparateNumber(val){
    while (/(\d+)(\d{3})/.test(val.toString())){
      val = val.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
    }
    return val;
  }


</script>

@endsection