{extends file="includes/layout.html"}

{block name="styles"}
<link href="{$templates_dir}css/page-home.min.css?{$global_version}" rel="stylesheet">
{/block}

{block name="main"}
<div role="main" class="main home-page" id="main">


{if !empty($banerHomepageTop)}
    <section class="section-main-banner">
        <div class="swiper main-banner" id="main-banner">
            <div class="swiper-wrapper">
            {foreach $banerHomepageTop as $bht}
                <{if empty($bht.redirect)}div{else}a href="{$bht.redirect}" target="{$bht.target}"{if $bht.link_follow==0} rel="nofollow"{/if}{/if} class="swiper-slide">
                    <div class="main-banner__img">
                        <picture>
                            {if !empty($bht.secondMainImageFilename)}<source media="(max-width: 465px)" srcset="{image f=$bht.secondMainImageFilename w=360 h=650 m=cr r=path}">{/if}
                            <img src="{image f=$bht.mainImageFilename w=1920 h=790 m=cr r=path}" alt="{$bht.mainImageAlt}" width="1920" height="800"
                                class="img-cover">
                        </picture>
                    </div>
                    <div class="main-banner__showcase">
                        <p class="heading-sm">{$bht.name}</p>
                        <h1 class="heading">{$bht.content|nl2br}</h1>
                        <p>
                            <img src="{$templates_dir}gfx/banner_border_241_56.png" alt="" width="241" height="56">
                        </p>
                    </div>
                    </{if empty($bht.redirect)}div{else}a{/if}>
            {/foreach}
            <div class="swiper-pagination"></div>
            {include file="includes/components/swiper-button-prev.html" color="#fff"}
            {include file="includes/components/swiper-button-next.html" color="#fff"}
            </div>
        </div>
    </section>
{/if}

    <section class="section-products">
        <div class="wrapper">
            <div class="section-products__header">
                <img src="{$templates_dir}gfx/box_logo_vital_267_206.png" alt="" width="267" height="206" class="logo">
                <h2 class="heading-md">{$landingPage->homepage_products_category_1|nl2br}</h2>
                <div class="icons">
                    <img src="{$templates_dir}gfx/bez_gluten_95_92.png" alt="" width="95" height="92">
                    <img src="{$templates_dir}gfx/vegan_70_92.png" alt="" width="70" height="92">
                </div>
            </div>
            <div class="section-products__carousel">
                <div class="products-carousel">
                    <div class="swiper" id="productsCarousel">
                        <div class="swiper-wrapper">
                        {foreach $homeProductList1 as $pl}
                            <div class="swiper-slide">
                                <a href="{seoLink id_element=$pl.id withCategories=1 parentLink=$productsLink}" class="products-carousel__item">
                                    <img src="{image f=$pl.mainImageFilename w=168 h=296 m=cr r=path}" alt="" width="168" height="296">
                                    <h3>{$pl.name}</h3>
                                    <p>{$pl.subname}</p>
                                </a>
                            </div>
                        {/foreach}
                        </div>
                    </div>
                </div>
                <div class="swiper-pagination"></div>
                {include file="includes/components/swiper-button-prev.html" color="#e2bb66"}
                {include file="includes/components/swiper-button-next.html" color="#e2bb66"}
            </div>
            <div class="element-center">
                <a href="{seoLink id_element=11184}" class="btn btn--primary">{$landingPage->homepage_products_button}</a>
            </div>
        </div>
    </section>

    <section class="section-category">
        <div class="section-category__header">
            <img src="{$templates_dir}gfx/box_logo_267_214.png" alt="" width="267" height="214" class="logo">
            <h2 class="heading-md">{$landingPage->homepage_products_category_2|nl2br}</h2>
        </div>
        <div class="section-category__category">
        {foreach $homeProductList2 as $pl}
            <a href="{seoLink id_element=$pl.id withCategories=1 parentLink=$productsLink}" class="category-box">
                <img src="{image f=$pl.mainImageFilename w=250 h=332 m=cr r=path}" alt="" width="250" height="332">
                <h3>{$pl.name}</h3>
                <p>{$pl.subname}</p>
            </a>
        {/foreach}
        </div>
        <div class="element-center">
            <a href="{seoLink id_element=10390}" class="btn btn--secondary">{$landingPage->homepage_products_button}</a>
        </div>
    </section>

    <div class="section-about-us">
        <div class="section-about-us__text">
            <p class="heading-sm">{$landingPage->homepage_about_title}</p>
            <h2 class="heading">{$landingPage->homepage_about_header|nl2br}</h2>
            <p class="lead">{$landingPage->homepage_about_content|nl2br}</p>
            <a href="{seoLink id_element=1596 withParents=1}" class="btn btn--secondary">{$landingPage->homepage_about_button}</a>
        </div>
        <div class="section-about-us__img">
            {if is_object($landingPage->homepage_about_image) && count($landingPage->homepage_about_image)>0}<img src="{image f=$landingPage->homepage_about_image->getMain() w=960 h=890 m=cr r=path}" alt="{$landingPage->homepage_about_image->getMain('alt')}" width="960" height="900" class="img-cover">{/if}
        </div>
    </div>

    {include file="includes/sections/section-shops.html"}

</div>
{/block}
{block name="scripts"}
<script src="{$templates_dir}js/page-home.min.js?{$global_version}"></script>
{/block}