{% set bodyClass = 'main-np' %}
{% extends 'layout.twig' %}
{% block content %}


    <section class="hero">
        <div class="cont">
            <div class="hero_block">
                <h1 class="hero_title">{{title}}</h1>
                <a href="#about" class="home_link main_link scroll_link">{{ function('pll_e', 'Узнать больше') }}</a>
            </div>
        </div>
        <img class="hero_image" src="{{ theme.link }}/static/img/hero_image_desctop.png" alt="hero image">
        <img class="hero_image_mobile" src="{{ theme.link }}/static/img/hero_image_mobile.png" alt="hero image">
        <img src="{{ theme.link }}/static/img/home-line2.svg" alt="" class="home_line2">
    </section>
    <section class="about">
        <div class="cont">
            <div class="section_top">
                <img src="{{ theme.link }}/static/img/about_top_image.png" alt="E-protein" class="about_top_image">
                <img src="{{ theme.link }}/static/img/about_top_image2.png" alt="E-protein" class="about_top_image2">
                <div class="block_title">{{text}}</div>
            </div>
            <h2 class="section_title2" id="about">{{ adv_title }}</h2>
            <p class="description">{{adv_text}}</p>
            <div class="advantage_row">
                {% for item in adv %}
                <div class="advantage_item">
                    <img src="{{ item.img }}" alt="" class="advantage_image">
                    <div class="advantage_title">{{item.title}}</div>
                    <p class="description">{{item.text}}</p>
                </div>
                {% endfor %}
                <div class="for_border">
                    <div class="advantage_item">
                        <p class="description">{{ adv_sum }}</p>
                    </div>
                </div>
            </div>
            <div class="advantage_row2">
            {% for item in adv_2 %}
                <div class="advantage_item">
                    <div class="advantage_title">{{item.title}}</div>
                    {% if item.img %}
                    <img src="{{item.img}}" alt="" class="advantage_image2">
                    {% endif %}
                    <p class="description">{{item.text}}</p>
                </div>
                 {% endfor %}
 
            </div>
            <h2 class="section_title">{{about_title}}</h2>
            <div class="description">{{about_text}}</div>
            <div class="protein">
            {% for item in about_points %}
                <p class="description">{{item.text}}</p>
            {% endfor %}
               
            <img src="{{ about_img.url }}" alt="{{ about_img.alt }}">
            </div>
            <h3 class="block_title">{{ diag_title }}</h3>
            <div class="diagram">
                <div class="diagram_texts">
                            {% for item in diag_points %}
                <p class="description">{{item.text}}</p>
            {% endfor %}
                    
                </div>
                <img src="{{ diag_img.url }}" alt="{{ diag_img.alt }}">
            </div>
            <h2 class="section_title2">{{e_title}}</h2>
            <div class="etaps_row">

                <div class="etaps_col">
                    {% for item in e_points %}
                    <div class="etap_item">
                        <img src="{{item.img}}"">
                        <p class="description">
                            {{item.text}}
                        </p>
                    </div>
                    {% endfor %}
                </div>

                <img class="etaps_anim" src="{{ theme.link }}/static/img/etaps_right.svg" alt="4">
            </div>
            <div class="w-100 d-flex justify-content-center mobile_none2">
                <a href="#" class="main_link main_link_black">К продукции</a>
            </div>
        </div>
    </section>
    <section class="faq_section">
        <div class="cont">
            <div class="section_title2">FAQ</div>
            <div class="faq_block">
            {% for item in faq %}
                <div class="faq_item">
                    <div class="faq_top">
                        <div class="faq_title">{{item.q}}</div>
                        <span class="faq_arr_down">
                            <img src="{{ theme.link }}/static/img/icons/arrdown.svg" alt="">
                        </span>
                    </div>
                    <p class="faq_body">{{item.answ}}</p>
             </div>
             {% endfor %}
            </div>
        </div>
    </section>



{% endblock %}