{% extends "_layouts/main" %}

{% if currentSite.language == 'es' %}
    {% set esUrl = 'dev/co/' %}
{% else %}
    {% set esUrl = '' %}
{% endif %}

{% block main %}

<i class="fa fa-chevron-right" id="home-slider-next"></i>
<div id="home-slider">
    {% set slides = entry.homeSlides.all() %}
    {% for slide in slides %}
    <div class="home-slider-slide {% if loop.first %} animate-slide{% endif %}{% if slide.darkenBackground %} dark-slide{% endif %}{% if slide.slideTextColor == 'dark' %} dark-slide-text{% endif %}" {% if slide.redBackground %}id="red-slide"{% endif %}>
        {% if slide.slideBackgroundImage|length %}
        <style>
            #slider-img-{{ slide.id }} {
                background-image: url({{ slide.slideBackgroundImage.one().getUrl('fullCell') }});
            }
            @media screen and (min-width: 992px) and (orientation: landscape) {
                #slider-img-{{ slide.id }} {
                    background-image: url({{ slide.slideBackgroundImage.one().getUrl('fullHd') }});
                }
            }
        </style>
        <div class="slider-bg-image" id="slider-img-{{ slide.id }}">
        </div>
        {% endif %}
        <div class="container-fluid">
            <div class="row align-v">
                {% set contentAlign = slide.slideContentAlignment %}
                {% set contentAnim = slide.contentAnimation %}
                {% if slide.slideContentPosition == 'left' %}
                <div class="col-10 offset-1 col-md-8 col-lg-6 text-{{ contentAlign }} slide-text">
                {% elseif slide.slideContentPosition == 'right' %}
                <div class="col-10 offset-1 col-md-8 offset-md-4 col-lg-6 offset-lg-6 text-{{ contentAlign }} slide-text">
                {% else %}
                <div class="col-10 offset-1 col-md-8 offset-md-2 col-lg-6 offset-lg-3 text-{{ contentAlign }} slide-text">
                {% endif %}

                    {% if slide.includeLogo %}
                    <img data-anim="{{ contentAnim }}" data-delay="3s" class="{{ contentAnim }} delay-2s animated" src="img/logo.svg" alt="Vida Divina">
                    {% endif %}

                    {% if (slide.slideHeadlineLogo|length == 1 or slide.slideHeadlineLogo|length == 2 and currentSite.language == 'en') %}
                    <img data-anim="{{ contentAnim }}" data-delay="1s" class="{{ contentAnim }} animated slide-headline-logo" src="{{ slide.slideHeadlineLogo.one().getUrl() }}" alt="{{ slide.slideHeadline }}">
                    {% elseif (slide.slideHeadlineLogo|length == 2 and currentSite.language == 'es') %}
                    <img data-anim="{{ contentAnim }}" data-delay="1s" class="{{ contentAnim }} animated slide-headline-logo" src="{{ slide.slideHeadlineLogo.nth(1).getUrl() }}" alt="{{ slide.slideHeadline }}">
                    {% else %}
                    <h2 data-anim="{{ contentAnim }}" data-delay="1s" class="{{ contentAnim }} animated">{{ slide.slideHeadline }}</h2>
                    {% endif %}
                    <p data-anim="{{ contentAnim }}" data-delay="2s" class="{{ contentAnim }} delay-1s animated">{{ slide.slideText }}</p>
                </div>
            </div>
        </div>
    </div>
    {% endfor %}
</div>



<div id="home-about-pre" class="main-section red-bg container-fluid">
    <div class="row">
        <div class="container">
            <div class="col-10 offset-1 text-center">
                <h3 class="wow fadeIn">{{ entry.homeAbout }}</h3>
            </div>
        </div>
    </div>
</div>

<div id="home-body-co" class="main-section container">
    <div class="row">
        <div class="col-12 col-lg-4 text-center home-co-col">
            <h3>Acerca de Vida Divina</h3>
            <p>Las alas de nuestro logo para Vida Divina son mas que un logotipo, simboliza la libertad para volar y el espíritu para alcanzar tus sueños.</p>
            <a href="{{ esUrl }}brand/our-story" class="btn btn-primary">Ver Más</a>
        </div>
        <div class="col-12 col-lg-4 text-center home-co-col">
            <h3>Valores Corporativos</h3>
            <p>Nos esforzamos para ser considerados por nuestros Representantes como su segundo hogar, donde se sientan valorados e importantes como miembros de esta gran familia por el amor, respeto, consideración y reconocimiento que se brinda.</p>
            <a href="{{ esUrl }}brand/mission-vision" class="btn btn-primary">Ver Más</a>
        </div>
        <div class="col-12 col-lg-4 text-center home-co-col">
            <h3>Productos</h3>
            <p>Vida Divina presenta su producto estrella “TE DIVINA” con una formula patentada a nivel mundial. El mismo que se ha convertido en un estandarte para muchas naciones.</p>
            <a href="{{ esUrl }}productos/tedivina/tedivina-original" class="btn btn-primary">Ver Más</a>
        </div>
    </div>
</div>



{# {% set rewards = entry.homeRewards.one() %}
<style>
    #home-rewards {
        background-image: url({{ rewards.backgroundImage.one().getUrl('headerCell') }});
    }
    @media screen and (min-width: 992px) and (orientation: landscape) {
        #home-rewards {
            background-image: url({{ rewards.backgroundImage.one().getUrl('headerHd') }});
        }
    }
</style>
<div id="home-rewards" class="main-section photo-bg container-fluid">
    <div class="row">
        <div class="col-lg-5 offset-lg-6 col-sm-10 offset-sm-1 text-center">
            <h2>{{ rewards.headline }}</h2>
            {{ rewards.bodyText }}
            <a href="{{ esUrl }}rewards/ways-to-earn" class="btn btn-secondary">{{ 'Learn more'|t }}</a>
        </div>
    </div>
</div> #}



<!-- <div id="newsletter" class="main-section white-bg container">
    <div class="row">
        <div class="col-12">
            <p>Sign up for our newsletter to receive special offers</p>
            <form action="#">
                <input type="text" placeholder="Email address" class="form-control">
                <button type="submit" class="btn btn-primary">Sign up</button>
            </form>
        </div>
    </div>
</div> -->

{% endblock %}