@extends('layouts.master-second')

@section('content')

<div class="download-app-div" style="background-image: url({{ asset('img/www/conocertarjetas-min.jpg') }});">
    <div class="overlay-primary"></div>
    <div class="content content-cards-res">
       <div class="col-mx-auto">
           <h1 class="text-center p-centered bold">¡Conoce las ediciones autorizadas<br>de nuestra membresía!</h1>
           <p class="text-center p-centered fs-18 fw-600">¡Son las únicas tarjetas autorizadas por nuestros aliados <br /> para redimir tus beneficios!</p>
       </div>
    </div>
</div>

<div class="bg-c-g2">
    <div class="container pt-100 pl-30 pb-20 pr-30">
        <div class="columns">
            <div class="col-6 col-md-12 col-mx-auto">
                <p class="text-center fs-20 text-primary fw-600 mb-10">Adquiere tu tarjeta</p>
                <p class="text-center fs-26 fw-600 mb-10">Y conviértete en un miembro YekoClub®</p>
                <p class="text-center pt-20 pl-80 pb-20 pr-80"><span class="text-primary fw-600">Te presentamos</span> <span class="fw-600">nuestras tarjetas</span>, las creamos pensando en ti</p>
            </div>
        </div>
    </div>

    <div class="container pl-60 pr-60 pb-60 mw-1140">
        <div class="columns">

            <div class="col-4 col-md-12 text-center col-mx-auto">
                <img width="1013" height="657" class="img-cards" src="{{ asset('img/tj-purple.jpeg') }}" alt="">
                <div class="pt-13 pb-20">
                    <h4 class="text-center fw-600 fs-18">YekoClub® <span class="fw-600 text-secondary">Purple</span></h4>
                </div>
            </div>

            <div class="col-4 col-md-12 text-center col-mx-auto">
                <img width="1013" height="657" class="img-cards " src="{{ asset('img/tj-black.jpeg') }}" alt="">
                <div class="pt-20 pb-20">
                    <h4 class="text-center fw-600 fs-18">YekoClub® <span class="fw-600 cb">Black</span></h4>
                </div>
            </div>
            <div class="col-4 col-md-12 text-center col-mx-auto">
                <img width="1013" height="657" class="img-cards" src="{{ asset('img/tj-amway.jpeg') }}" alt="">
                <div class="pt-13 pb-20">
                    <h4 class="text-center fw-600 fs-18">YekoClub®<span class="cbl fw-600">Am</span><span class="cr fw-600">way</span></h4>
                </div>
            </div>
            <div class="col-4 col-md-12 col-mx-auto text-center p-centered">
                <a href="/general/cards-buy" class="btn btn-general">¡Quiero ser socio <br> YekoClub®!</a>
            </div>
        </div>
    </div>


</div>

<div class="container pt-60 pb-30">
    <div class="columns">
        <div class="col-12">
            <p class="text-center text-primary mb-10 fs-20 fw-600">¿Quieres una tarjeta personalizada </p>
            <h2 class="text-center mb-10 fs-26 fw-600">para tu empresa?</h2>
        </div>
    </div>
</div>


<div class="container pb-100 grid-lg">
    <div class="columns">
        <div class="column col-5 col-sm-8 carousel-res">
            <div class="carousel">
                <!-- carousel locator -->
                <input class="carousel-locator" id="slide-1" type="radio" name="carousel-radio" hidden="" checked="">
                <input class="carousel-locator" id="slide-2" type="radio" name="carousel-radio" hidden="">
                <input class="carousel-locator" id="slide-3" type="radio" name="carousel-radio" hidden="">

                <!-- carousel container -->
                <div class="carousel-container">
                    <!-- carousel item -->
                    <figure class="carousel-item">
                        <label class="item-prev btn btn-action btn-lg" for="slide-3"><i class="icon icon-arrow-left"></i></label>
                        <label class="item-next btn btn-action btn-lg" for="slide-2"><i class="icon icon-arrow-right"></i></label>
                        <img class="img-responsive rounded" src="{{ asset('img/tj-amway.jpeg') }}">
                    </figure>
                    <figure class="carousel-item">
                        <label class="item-prev btn btn-action btn-lg" for="slide-1"><i class="icon icon-arrow-left"></i></label>
                        <label class="item-next btn btn-action btn-lg" for="slide-3"><i class="icon icon-arrow-right"></i></label>
                        <img class="img-responsive rounded" src="{{ asset('img/tj-black.jpeg') }}">
                    </figure>
                    <figure class="carousel-item">
                        <label class="item-prev btn btn-action btn-lg" for="slide-2"><i class="icon icon-arrow-left"></i></label>
                        <label class="item-next btn btn-action btn-lg" for="slide-1"><i class="icon icon-arrow-right"></i></label>
                        <img class="img-responsive rounded" src="{{ asset('img/tj-purple.jpeg') }}">
                    </figure>
                </div>
                <!-- carousel navigation -->
                <div class="column col-12 carousel-nav">
                    <label class="nav-item text-hide c-hand" for="slide-1">1</label>
                    <label class="nav-item text-hide c-hand" for="slide-2">2</label>
                    <label class="nav-item text-hide c-hand" for="slide-3">3</label>
                </div>
            </div>
        </div>

        <div class="column col-7 col-md-12 p-10">
            <p class=" text-card-res">Y convertirla en un verdadero programa de lealtad para tus clientes,
                empleados o afiliados.</p>
            <p class="pb-35 text-card-res">Solo haz click en el siguiente botón y nos pondremos en contacto a la
                brevedad para presentarte las distintas opciones que tenemos para ti.</p>

            <div class="float-left btn-card-res">
            <a href="/general/corp" class="btn btn-general">Ir a Ventas Corporativas</a>
            </div>
        </div>

    </div>
</div>

@endsection