{% 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">

    <div class="home-slider-slide slide-bg-red" id="imparables-slide">
        <style>
            #slider-img-imparables {
                background-image: url(img/home/slider/convencion-imparables/maestria-mobile.jpg);
            }
            @media screen and (min-width: 768px) and (orientation: landscape) {
                #slider-img-imparables {
                    background-image: url(img/home/slider/convencion-imparables/maestria-spanish.jpg);
                }
            }
        </style>
        <a href="https://vidadivina.ticketspice.com/mlmguru-2022" target="_blank">
            <div class="slider-bg-image" id="slider-img-imparables"></div>
        </a>
    </div>

    <div class="home-slider-slide animate-slide slide-bg-red">
        <style>
            #slider-img-5 {
                background-image: url(img/home/slider/new-products/new-products-slide-bg.jpg);
            }
            @media screen and (min-width: 992px) and (orientation: landscape) {
                #slider-img-5 {
                    background-image: url(img/home/slider/new-products/new-products-slide-bg.jpg);
                }
            }
        </style>
        <div class="slider-bg-image" id="slider-img-5">
        </div>
        <div class="container-fluid">
            <div class="row align-items-center justify-content-center">

                <div class="col-10 col-md-6 order-md-2 slide-img-wrapper">
                    <div class="slide-img">
                        <img data-anim="fadeInRight" data-delay="1s" class="fadeInRight animated" src="img/home/slider/new-products/new-products-slide.png" alt="New Products">
                    </div>
                </div>

                <div class="col-10 col-md-6 col-lg-5 col-xl-4 order-md-1 slide-text">
                    <h1 data-anim="fadeInLeft" class="fadeInLeft animated">{{ 'New Products'|t }}</h1>
                    <p data-anim="fadeInLeft" data-delay="1s" class="fadeInLeft animated">{{ '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" data-anim="fadeInLeft" data-delay="2s" class="btn btn-primary fadeInLeft animated">{{ 'Learn more'|t }}</a>
                </div>

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

    <div class="home-slider-slide animate-slide slide-bg-red">
        <style>
            #slider-img-2 {
                background-image: url(img/home/coffee-slide.jpg);
            }
            @media screen and (min-width: 992px) and (orientation: landscape) {
                #slider-img-2 {
                    background-image: url(img/home/coffee-slide.jpg);
                }
            }
        </style>
        <div class="slider-bg-image" id="slider-img-2">
        </div>
        <div class="container-fluid">
            <div class="row align-items-center justify-content-center">

                <div class="col-10 col-md-6 col-lg-6 col-xl-6 order-md-2 slide-img-wrapper">
                    <div class="slide-img">
                        <img data-anim="fadeInRight" data-delay="1s" class="fadeInRight animated" src="img/home/cafedivina-slide.png" alt="Café Divina">
                    </div>
                </div>

                <div class="col-10 col-md-6 col-lg-5 col-xl-4 order-md-1 slide-text">
                    <h1 data-anim="fadeInLeft" class="fadeInLeft animated">Café Divina®</h1>
                    <p data-anim="fadeInLeft" data-delay="1s" class="fadeInLeft animated">{{ '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" data-anim="fadeInLeft" data-delay="2s" class="btn btn-primary fadeInLeft animated">{{ 'Learn more'|t }}</a>
                </div>

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

    <div class="home-slider-slide animate-slide slide-bg-red">
        <style>
            #slider-img-1 {
                background-image: url(img/home/tea-slide.jpg);
            }
            @media screen and (min-width: 992px) and (orientation: landscape) {
                #slider-img-1 {
                    background-image: url(img/home/tea-slide.jpg);
                }
            }
        </style>
        <div class="slider-bg-image" id="slider-img-1">
        </div>
        <div class="container-fluid">
            <div class="row align-items-center justify-content-center">

                <div class="col-10 col-md-6 col-lg-6 col-xl-4 offset-xl-1 order-md-2 slide-img-wrapper">
                    <div class="slide-img">
                        <img data-anim="fadeInRight" data-delay="1s" class="fadeInRight animated" src="img/home/tedivina-slide-2021.png" alt="TeDivina">
                        <img data-anim="fadeIn" data-delay="2s" class="fadeIn animated slide-img-accent" src="img/home/slider/tedivina/slider-tedivina-accent-1.png" style="animation-delay: 1.5s; bottom: 5%; left: -8%; width: 40%; z-index: 3;">
                        <img data-anim="fadeIn" data-delay="2s" class="fadeIn animated slide-img-accent" src="img/home/slider/tedivina/slider-tedivina-accent-2.png" style="animation-delay: 2.25s; top: 35%; right: -13%; width: 40%; z-index: 1;">
                    </div>
                </div>

                <div class="col-10 col-md-6 col-lg-5 col-xl-4 order-md-1 slide-text">
                    <h1 data-anim="fadeInLeft" class="fadeInLeft animated">TeDivina®</h1>
                    <p data-anim="fadeInLeft" data-delay="1s" class="fadeInLeft animated">{{ '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" data-anim="fadeInLeft" data-delay="2s" class="btn btn-primary fadeInLeft animated">{{ 'Learn more'|t }}</a>
                </div>

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

    <div class="home-slider-slide animate-slide slide-bg-red">
        <style>
            #slider-img-6 {
                background-image: url(img/home/slider/factor-divina/factor-divina-slide-bg-new.jpg);
            }
            @media screen and (min-width: 992px) and (orientation: landscape) {
                #slider-img-6 {
                    background-image: url(img/home/slider/factor-divina/factor-divina-slide-bg-new.jpg);
                }
            }
        </style>
        <div class="slider-bg-image" id="slider-img-6">
        </div>
        <div class="container-fluid">
            <div class="row align-items-center justify-content-center">

                <div class="col-10 col-md-6 order-md-2 slide-img-wrapper">
                    <div class="slide-img">
                        <img data-anim="fadeInRight" data-delay="1s" class="fadeInRight animated" src="img/home/factor-slide-wide.png" alt="Factor Divina">
                    </div>
                </div>

                <div class="col-10 col-md-6 col-lg-5 col-xl-4 order-md-1 slide-text">
                    <h1 data-anim="fadeInLeft" class="fadeInLeft animated">Factor Divina</h1>
                    <h4 data-anim="fadeInLeft" class="fadeInLeft animated">{{ 'BACK BY POPULAR DEMAND'|t }}</h4>
                    <p data-anim="fadeInLeft" data-delay="1s" class="fadeInLeft animated">{{ '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" data-anim="fadeInLeft" data-delay="2s" class="btn btn-primary fadeInLeft animated">{{ 'Learn more'|t }}</a>
                </div>

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

    <div class="home-slider-slide animate-slide slide-bg-red">
        <style>
            #slider-img-3 {
                background-image: url(img/home/medicinal-slide.jpg);
            }
            @media screen and (min-width: 992px) and (orientation: landscape) {
                #slider-img-3 {
                    background-image: url(img/home/medicinal-slide.jpg);
                }
            }
        </style>
        <div class="slider-bg-image" id="slider-img-3">
        </div>
        <div class="container-fluid">
            <div class="row align-items-center justify-content-center">

                <div class="col-10 col-md-6 col-xl-5 order-md-2 slide-img-wrapper">
                    <div class="slide-img">
                        <img data-anim="fadeInRight" data-delay="1s" class="fadeInRight animated" src="img/home/mushrooms-slide.png" alt="Medicinal Mushrooms">
                    </div>
                </div>

                <div class="col-10 col-md-6 col-lg-5 col-xl-4 order-md-1 slide-text">
                    <h1 data-anim="fadeInLeft" class="fadeInLeft animated">{{ 'Medicinal Mushrooms'|t }}</h1>
                    <p data-anim="fadeInLeft" data-delay="1s" class="fadeInLeft animated">{{ '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" data-anim="fadeInLeft" data-delay="2s" class="btn btn-primary fadeInLeft animated">{{ 'Learn more'|t }}</a>
                </div>

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

    <div class="home-slider-slide animate-slide slide-bg-red">
        <style>
            #slider-img-4 {
                background-image: url(img/home/slider/vida-lean/vida-lean-slide-bg.jpg);
            }
            @media screen and (min-width: 992px) and (orientation: landscape) {
                #slider-img-4 {
                    background-image: url(img/home/slider/vida-lean/vida-lean-slide-bg.jpg);
                }
            }
        </style>
        <div class="slider-bg-image" id="slider-img-4">
        </div>
        <div class="container-fluid">
            <div class="row align-items-center justify-content-center">

                <div class="col-10 col-md-6 order-md-2 slide-img-wrapper">
                    <div class="slide-img">
                        <img data-anim="fadeInRight" data-delay="1s" class="fadeInRight animated" src="img/home/lean-slide-all.png" alt="Vida Lean">
                    </div>
                </div>

                <div class="col-10 col-md-6 col-lg-5 col-xl-4 order-md-1 slide-text">
                    <h1 data-anim="fadeInLeft" class="fadeInLeft animated">Vida Lean</h1>
                    <p data-anim="fadeInLeft" data-delay="1s" class="fadeInLeft animated">{{ '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" data-anim="fadeInLeft" data-delay="2s" class="btn btn-primary fadeInLeft animated">{{ '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/products/product-box-tedivina.jpg);">
                    <h2>TeDivina</h2>
                </a>
                <a href="{{ esUrl }}products/café-divina" class="home-products-box" style="background-image: url(img/home/products/product-box-cafedivina.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/products/product-box-factor-divina-new.jpg);">
                    <h2>Factor Divina</h2>
                </a>
                <a href="{{ esUrl }}products/supplements" class="home-products-box" style="background-image: url(img/home/products/product-box-supplements.jpg);">
                    <h2>{{ 'Vida Supplements'|t }}</h2>
                </a>
            </div>
            <div class="product-group">
                <a href="{{ esUrl }}products/vida-esssentials" class="home-products-box" style="background-image: url(img/home/products/product-box-essentials.jpg);">
                    <h2>{{ 'Vida Essentials'|t }}</h2>
                </a>
                <a href="{{ esUrl }}products/vida-extracts" class="home-products-box" style="background-image: url(img/home/products/product-box-extracts.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/products/product-box-lean.jpg);">
                    <h2>Vida Lean</h2>
                </a>
                <a href="{{ esUrl }}products/gano-bites" class="home-products-box" style="background-image: url(img/home/products/product-box-gano-bites.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 our humble beginnings, we finally created a company that had one direction and a loving purpose.  We have 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 %}