{% extends "_layouts/main" %}

{% if currentSite.language == 'es' %}
    {% set esUrl = 'es/' %}
{% 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 %}

    {% for slide in slides %}

        {% if slide.type == "imparablesSlide" %}

            <div class="home-slider-slide animate-slide" id="imparables-slide">
                <style>
                    #slider-bg-imparables {
                        background-image: url({{ slide.slideBackground.one().getUrl() }});
                    }
                </style>


                {# Slide Background #}
                <div class="slider-bg-image" id="slider-bg-imparables"></div>

                <div class="container-fluid">
                    <div class="row align-items-center justify-content-center">

                        {# Slide Layers #}
                        <div class="col-12 col-md-6 col-lg-6 col-xl-4 offset-xl-1 order-md-2 slide-img-wrapper">
                            <div class="slide-img d-flex flex-column align-items-center text-center">
                                <h4 class="text-spaced animate__animated animate__fadeInDown">{{ slide.headline }}</h4>
                                <img id="imparables-vida-logo" class="animate__animated animate__fadeInDown animate__delay-1s" src="img/logo.svg" alt="Vida Divina">
                                <img class="animate__animated animate__fadeInUp animate__delay-2s" src="{{ slide.imparablesImage.one().getUrl() }}" alt="Imparables logo">
                                <img class="animate__animated animate__fadeInUp animate__delay-2s" src="{{ slide.losAngelesImage.one().getUrl() }}" style="width: 70%;" alt="Los Angeles, CA">
                                <h3 class="animate__animated animate__fadeInUp animate__delay-3s">{{ slide.dateText }}</h3>
                            </div>
                        </div>

                    </div>
                </div>

                {# Slide Link #}
                <a class="slider-slide-link" href="https://vidadivina.regfox.com/2022" target="_blank"></a>

            </div>

        {% elseif slide.type == "productSlide" %}

            <div class="home-slider-slide">

                {# Slide Background #}
                <div class="slider-bg-image" style="background-image: url({{ slide.slideBackground.one().getUrl() }});"></div>

                <div class="container-fluid">
                    <div class="row align-items-center justify-content-center">

                        {# Slide Layers #}
                        <div class="col-11 col-md-6 col-lg-6 col-xl-4 offset-xl-1 order-md-2 slide-img-wrapper">
                            <div class="slide-img">
                                <div class="slide-img-circ animate__animated animate__fadeIn animate__delay-1s"></div>
                                <img class="animate__animated animate__fadeIn animate__delay-1s" src="{{ slide.productImage.one().getUrl() }}" alt="{{ slide.headline }}">
                            </div>
                        </div>

                        {# Slide Text #}
                        <div class="col-10 col-md-6 col-lg-5 col-xl-4 order-md-1 slide-text">
                            <h1 class="animate__animated animate__fadeInLeft animate__delay-2s">{{ slide.headline }}</h1>
                            <p class="animate__animated animate__fadeInLeft animate__delay-3s">{{ slide.bodyText }}</p>
                            <a href="{{ slide.buttonLink.one().getUrl() }}" class="btn btn-primary animate__animated animate__fadeInLeft animate__delay-4s">{{ 'Learn more'|t }}</a>
                        </div>

                    </div>
                </div>
            </div>

        {% endif %}

    {% endfor %}
            

    {# SLIDE - TEDIVINA #}
    <div class="home-slider-slide">

        {# Responsive Background Styles #}
        <style>
            #slider-bg-1 {
                background-image: url(img/home/new-2022/slide-tedivina-bg.jpg);
            }
            @media screen and (min-width: 992px) and (orientation: landscape) {
                #slider-bg-1 {
                    background-image: url(img/home/new-2022/slide-tedivina-bg.jpg);
                }
            }
        </style>

        {# Slide Background #}
        <div class="slider-bg-image" id="slider-bg-1"></div>

        <div class="container-fluid">
            <div class="row align-items-center justify-content-center">

                {# Slide Layers #}
                <div class="col-11 col-md-6 col-lg-6 col-xl-4 offset-xl-1 order-md-2 slide-img-wrapper">
                    <div class="slide-img">
                        <div class="slide-img-circ animate__animated animate__fadeIn animate__delay-1s"></div>
                        <img class="animate__animated animate__fadeIn animate__delay-1s" src="img/home/tedivina-slide-2021.png" alt="TeDivina">
                        <img class="slide-img-accent animate__animated animate__fadeIn animate__delay-3s" src="img/home/slider/tedivina/slider-tedivina-accent-1.png" style="bottom: 5%; left: -8%; width: 40%; z-index: 3;">
                        <img class="slide-img-accent animate__animated animate__fadeIn animate__delay-3s" src="img/home/slider/tedivina/slider-tedivina-accent-2.png" style="top: 35%; right: -13%; width: 40%; z-index: 1;">
                    </div>
                </div>

                {# Slide Text #}
                <div class="col-10 col-md-6 col-lg-5 col-xl-4 order-md-1 slide-text">
                    <h1 class="animate__animated animate__fadeInLeft animate__delay-2s">TeDivina®</h1>
                    <p class="animate__animated animate__fadeInLeft animate__delay-3s">{{ 'Our flagship product TeDivina® will cleanse your body and mind, creating the foundation for your own “Divine Life.” With its rich amber color, Dr. Ramos’ original formula provides 12 essential herbs and antioxidants that help optimize your healthy, balanced lifestyle. Drink to your health with TeDivina®!'|t }}</p>
                    <a href="{{ esUrl }}products/tedivina/tedivina-original" class="btn btn-primary animate__animated animate__fadeInLeft animate__delay-4s">{{ 'Learn more'|t }}</a>
                </div>

            </div>
        </div>
    </div>

    {# SLIDE - NEW PRODUCTS #}
    <div class="home-slider-slide">

        {# Responsive Background Styles #}
        <style>
            #slider-img-5 {
                background-image: url(img/home/new-2022/slide-new-products-bg.jpg);
            }
            @media screen and (min-width: 992px) and (orientation: landscape) {
                #slider-img-5 {
                    background-image: url(img/home/new-2022/slide-new-products-bg.jpg);
                }
            }
        </style>

        {# Slide Background #}
        <div class="slider-bg-image" id="slider-img-5"></div>

        <div class="container-fluid">
            <div class="row align-items-center justify-content-center">

                {# Slide Layers #}
                <div class="col-12 col-md-6 order-md-2 slide-img-wrapper">
                    <div class="slide-img">
                        <div class="slide-img-circ animate__animated animate__fadeIn animate__delay-1s"></div>
                        <img class="animate__animated animate__fadeIn animate__delay-1s" src="img/home/slider/new-products/new-products-slide.png" alt="New Products">
                    </div>
                </div>

                {# Slide Text #}
                <div class="col-10 col-md-6 col-lg-5 col-xl-4 order-md-1 slide-text">
                    <h1 class="animate__animated animate__fadeInLeft animate__delay-2s">{{ 'New Products'|t }}</h1>
                    <p class="animate__animated animate__fadeInLeft animate__delay-3s">{{ 'At Vida Divina, our mission is to always strive to produce innovative products for our Customers, which signifies our commitment to health and wellness excellence.  Whether we are adding an existing product line or creating new ones, our thoughts will always be on you and your family’s overall healthy lifestyle.'|t }}</p>
                    <a href="{{ esUrl }}products" class="btn btn-primary animate__animated animate__fadeInLeft animate__delay-4s">{{ 'Learn more'|t }}</a>
                </div>

            </div>
        </div>
    </div>

    {# SLIDE - CAFE DIVINA #}
    <div class="home-slider-slide">

        {# Responsive Background Styles #}
        <style>
            #slider-img-2 {
                background-image: url(img/home/new-2022/slide-cafe-divina-bg.jpg);
            }
            @media screen and (min-width: 992px) and (orientation: landscape) {
                #slider-img-2 {
                    background-image: url(img/home/new-2022/slide-cafe-divina-bg.jpg);
                }
            }
        </style>

        {# Slide Background #}
        <div class="slider-bg-image" id="slider-img-2"></div>

        <div class="container-fluid">
            <div class="row align-items-center justify-content-center">

                {# Slide Layers #}
                <div class="col-12 col-md-6 col-lg-6 col-xl-6 order-md-2 slide-img-wrapper">
                    <div class="slide-img">
                        <div class="slide-img-circ animate__animated animate__fadeIn animate__delay-1s"></div>
                        <img class="animate__animated animate__fadeIn animate__delay-1s" src="img/home/cafedivina-slide.png" alt="Café Divina">
                    </div>
                </div>

                {# Slide Text #}
                <div class="col-10 col-md-6 col-lg-5 col-xl-4 order-md-1 slide-text">
                    <h1 class="animate__animated animate__fadeInLeft animate__delay-2s">Café Divina®</h1>
                    <p class="animate__animated animate__fadeInLeft animate__delay-3s">{{ 'With two billion cups of coffee consumed every day, Café Divina™ provides you with a powerful brand-building opportunity. Enjoy a cup of our coffee or tea from a variety of house-style healthy beverages infused with 100% Certified Organic Reishi any time of the day—hot or cold!'|t }}</p>
                    <a href="{{ esUrl }}products/café-divina" class="btn btn-primary animate__animated animate__fadeInLeft animate__delay-4s">{{ 'Learn more'|t }}</a>
                </div>

            </div>
        </div>
    </div>

    {# SLIDE - FACTOR DIVINA #}
    <div class="home-slider-slide">

        {# Responsive Background Styles #}
        <style>
            #slider-img-6 {
                background-image: url(img/home/new-2022/slide-factor-divina-bg.jpg);
            }
            @media screen and (min-width: 992px) and (orientation: landscape) {
                #slider-img-6 {
                    background-image: url(img/home/new-2022/slide-factor-divina-bg.jpg);
                }
            }
        </style>

        {# Slide Background #}
        <div class="slider-bg-image" id="slider-img-6"></div>

        <div class="container-fluid">
            <div class="row align-items-center justify-content-center">

                {# Slide Layers #}
                <div class="col-12 col-md-6 order-md-2 slide-img-wrapper">
                    <div class="slide-img">
                        <div class="slide-img-circ animate__animated animate__fadeIn animate__delay-1s"></div>
                        <img class="animate__animated animate__fadeIn animate__delay-1s" src="img/home/factor-slide-wide.png" alt="Factor Divina">
                    </div>
                </div>

                {# Slide Text #}
                <div class="col-10 col-md-6 col-lg-5 col-xl-4 order-md-1 slide-text">
                    <h1 class="animate__animated animate__fadeInLeft animate__delay-2s">Factor Divina</h1>
                    <h4 class="animate__animated animate__fadeInLeft animate__delay-3s">{{ 'BACK BY POPULAR DEMAND'|t }}</h4>
                    <p class="animate__animated animate__fadeInLeft animate__delay-4s">{{ 'You asked for it, well now you got it!  We are pleased to relaunch our fruit and vegetable based healthy beverage Factor Divina.  Factor Divina is a get tasting power-packed beverage that is high in antioxidants formulated for your overall health and wellness lifestyle.  Your entire family can now Drink To Your Health!'|t }}</p>
                    <a href="{{ esUrl }}products/factor/factor-divina" class="btn btn-primary animate__animated animate__fadeInLeft animate__delay-5s">{{ 'Learn more'|t }}</a>
                </div>

            </div>
        </div>
    </div>

    {# SLIDE - MUSHROOMS #}
    <div class="home-slider-slide">

        {# Responsive Background Styles #}
        <style>
            #slider-img-3 {
                background-image: url(img/home/new-2022/slide-mushrooms-bg.jpg);
            }
            @media screen and (min-width: 992px) and (orientation: landscape) {
                #slider-img-3 {
                    background-image: url(img/home/new-2022/slide-mushrooms-bg.jpg);
                }
            }
        </style>

        {# Slide Background #}
        <div class="slider-bg-image" id="slider-img-3"></div>

        <div class="container-fluid">
            <div class="row align-items-center justify-content-center">

                {# Slide Layers #}
                <div class="col-12 col-md-6 col-xl-5 order-md-2 slide-img-wrapper">
                    <div class="slide-img">
                        <div class="slide-img-circ animate__animated animate__fadeIn animate__delay-1s"></div>
                        <img class="animate__animated animate__fadeIn animate__delay-1s" src="img/home/mushrooms-slide.png" alt="Medicinal Mushrooms">
                    </div>
                </div>

                {# Slide Text #}
                <div class="col-10 col-md-6 col-lg-5 col-xl-4 order-md-1 slide-text">
                    <h1 class="animate__animated animate__fadeInLeft animate__delay-2s">{{ 'Medicinal Mushrooms'|t }}</h1>
                    <p class="animate__animated animate__fadeInLeft animate__delay-3s">{{ 'At Vida Divina we proudly infuse all our products with 100% Certified Organic medicinal mushrooms, so you and your family can benefit from their long history of supporting a healthy lifestyle.'|t }}</p>
                    <a href="{{ esUrl }}products/supplements" class="btn btn-primary animate__animated animate__fadeInLeft animate__delay-4s">{{ 'Learn more'|t }}</a>
                </div>

            </div>
        </div>
    </div>

    {# SLIDE - LEAN #}
    <div class="home-slider-slide">

        {# Responsive Background Styles #}
        <style>
            #slider-img-4 {
                background-image: url(img/home/new-2022/slide-lean-bg.jpg);
            }
            @media screen and (min-width: 992px) and (orientation: landscape) {
                #slider-img-4 {
                    background-image: url(img/home/new-2022/slide-lean-bg.jpg);
                }
            }
        </style>

        {# Slide Background #}
        <div class="slider-bg-image" id="slider-img-4"></div>

        <div class="container-fluid">
            <div class="row align-items-center justify-content-center">

                {# Slide Layers #}
                <div class="col-12 col-md-6 order-md-2 slide-img-wrapper">
                    <div class="slide-img">
                        <div class="slide-img-circ animate__animated animate__fadeIn animate__delay-1s"></div>
                        <img class="animate__animated animate__fadeIn animate__delay-1s" src="img/home/lean-slide-all.png" alt="Vida Lean">
                    </div>
                </div>

                {# Slide Text #}
                <div class="col-10 col-md-6 col-lg-5 col-xl-4 order-md-1 slide-text">
                    <h1 class="animate__animated animate__fadeInLeft animate__delay-2s">Vida Lean</h1>
                    <p class="animate__animated animate__fadeInLeft animate__delay-3s">{{ 'Our delicious meal replacement shake is designed to support a healthy lifestyle. Whether you want to lose weight or build lean muscle, Lean provides optimal nutritional support for your everyday needs.'|t }}</p>
                    <a href="{{ esUrl }}products/weight-control" class="btn btn-primary animate__animated animate__fadeInLeft animate__delay-4s">{{ 'Learn more'|t }}</a>
                </div>

            </div>
        </div>
    </div>

</div>



<div id="home-about" class="container main-section">
    <div class="row justify-content-center">
        <div class="col-10 text-center">
            {% if currentSite.language == 'es' %}
            <img src="img/home/leadwithlove-es.png" alt="#LeadWithLove" style="width: 640px; max-width: 80vw;">
            {% else %}
            <img src="img/home/leadwithlove.png" alt="#LiderarConAmor" style="width: 640px; max-width: 80vw;">
            {% endif %}
        </div>
    </div>
</div>


<div id="home-products" class="container-fluid wow fadeIn">

    <div class="row bg-fade bg-fade-red bg-fade-left" id="home-products-text">
        <div class="col-12 col-md-7 col-lg-5 offset-lg-1">
            <img src="img/logo.svg" alt="Vida Divina">
            <h1 class="text-spaced">{{ 'Our Products'|t }}</h1>
            <p>{{ 'Our mission is to provide the highest quality health and wellness solutions for our customers, helping them achieve and maintain a healthy lifestyle.  We are also dedicated to creating a worldwide community centered around love and teamwork, offering everyone an equal chance to live a healthy life.'|t }}</p>
            <a href="products" class="btn btn-primary">{{ 'View All'|t }}</a>
        </div>
    </div>
    <div class="row position-relative">
        <i id="home-products-prev" class="fas fa-chevron-left"></i>
        <i id="home-products-next" class="fas fa-chevron-right"></i>
        <div id="home-products-boxes">
            <div class="product-group">
                <a href="{{ esUrl }}products/tedivina/tedivina-original" class="home-products-box" style="background-image: url(img/home/new-2022/product-tedivina-tile.jpg);">
                    <h2>TeDivina</h2>
                </a>
                <a href="{{ esUrl }}products/café-divina" class="home-products-box" style="background-image: url(img/home/new-2022/product-cafe-divina-tile.jpg);">
                    <h2>CaféDivina</h2>
                </a>
            </div>
            <div class="product-group">
                <a href="{{ esUrl }}products/factor/factor-divina" class="home-products-box" style="background-image: url(img/home/new-2022/product-factor-divina-tile.jpg);">
                    <h2>Factor Divina</h2>
                </a>
                <a href="{{ esUrl }}products/supplements" class="home-products-box" style="background-image: url(img/home/new-2022/product-supplements-tile.jpg);">
                    <h2>{{ 'Vida Supplements'|t }}</h2>
                </a>
            </div>
            <div class="product-group">
                <a href="{{ esUrl }}products/vida-essentials" class="home-products-box" style="background-image: url(img/home/new-2022/product-essentials-tile.jpg);">
                    <h2>{{ 'Vida Essentials'|t }}</h2>
                </a>
                <a href="{{ esUrl }}products/vida-extracts" class="home-products-box" style="background-image: url(img/home/new-2022/product-extracts-tile.jpg);">
                    <h2>{{ 'Vida Extracts'|t }}</h2>
                </a>
            </div>
            <div class="product-group">
                <a href="{{ esUrl }}products/weight-control" class="home-products-box" style="background-image: url(img/home/new-2022/product-lean-tile.jpg);">
                    <h2>Vida Lean</h2>
                </a>
                <a href="{{ esUrl }}products/gano-bites" class="home-products-box" style="background-image: url(img/home/new-2022/product-gano-bites-tile.jpg);">
                    <h2>Gano Bites</h2>
                </a>
            </div>
        </div>
    </div>

</div>



<div id="home-products-pre" class="container main-section">
    <div class="row justify-content-center">
        <div class="col-10 text-center">
            <h3><span>{{ 'Products Are Made In The Factory'|t }}</span>{{ 'But Brands Are Created In The Heart'|t }}</h3>
        </div>
    </div>
</div>



<div id="home-our-founders" class="container-fluid home-block bg-fade bg-fade-red bg-fade-left">
    <div class="row">
        <div class="col-12 col-sm-6 col-md-5 col-lg-4">
            <h1>{{ 'Meet Our Founders'|t }}</h1>
            <p>{{ 'From humble beginnings, I finally created a company that had one direction and a loving purpose. Vida Divina has created transformative products that has given individuals an equal chance to obtain not only financial success but total health and wellness. We invite you to join us on our journey.'|t }}</p>
            <a href="{{ esUrl }}brand/our-story" class="btn btn-default">{{ 'Learn more'|t }}</a>
        </div>
    </div>
</div>



<div id="home-live-healthy" class="container main-section">
    <div class="row justify-content-center">
        <div class="col-10 text-center">
            {% if currentSite.language == 'es' %}
            <img src="img/home/live-healthy-es.png" alt="Live Healthy, Live Wealthy, Live Free" style="width: 640px; max-width: 80vw;">
            {% else %}
            <img src="img/home/live-healthy.png" alt="Vive Sano, Vive Próspero, Vive Feliz" style="width: 640px; max-width: 80vw;">
            {% endif %}
        </div>
    </div>
</div>



<div id="home-affiliate-opportunities" class="container-fluid home-block bg-fade bg-fade-red bg-fade-right">
    <div class="row justify-content-end">
        <div class="col-12 col-sm-6 col-md-5 col-lg-4">
            <h1>{{ 'Affiliate Opportunity'|t }}</h1>
            <p>{{ 'At Vida Divina, we believe in helping each other succeed. Our rewards and benefits include but are not restricted to financial compensation and high-quality products. We are also committed to building a worldwide community of success-minded individuals who aim to grow beyond their limitations.'|t }}</p>
            <p>{{ 'We offer the entrepreneur a unique opportunity to earn an unlimited income by enhancing the lives of everyone we touch. We realize that the true measure of a company’s success is reflected in the health and wealth achieved by the many, not just a few.'|t }}</p>
            <a href="{{ esUrl }}rewards/ways-to-earn" class="btn btn-default">{{ 'Learn more'|t }}</a>
        </div>
    </div>
</div>

{% endblock %}