{% extends "base.html" %}

{%- block content %}

    <section class="hero-sub" style="background-image: url({{ page.extra.hero_image | safe }})">
        <div class="container hero-sub__container">
            <nav class="bred-crum">
                <ul class="bred-crum__row">
                    <li class="bred-crum__item">
                        <a class="nav-bred bred-crum__link" href="/">{{ page.extra.menu_title_pre }}</a>
                    </li>
                    <li class="bred-crum__item">
                        <span class="nav-bred">
                            >
                        </span>
                    </li>
                    <li class="bred-crum__item">
                        <a class="nav-bred bred-crum__link bred-crum--active"
                           href="/{{ page.extra.menu_title | lower }}">{{ page.extra.menu_title }}</a>
                    </li>
                </ul>
            </nav>
            <div class="hero-sub__content">
                <h1 class="h1 hero-sub__title">
                    {{ page.extra.menu_title }}
                </h1>
                <p class="h2-sub_v2 hero-sub__description">
                    {{ page.extra.community_hero_description }}
                </p>

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


    <section class="section-community">
        <div class="container section-community__container">
            <div class="section-community__item">
                <div class="section-community__img-row">
                    <div class="icon-green section-community__icon">
                        {% include 'ui/icons/community/icon-01.html' %}
                    </div>
                    <img class="section-community__img" src="/images/community/discussion-card-banner.png" alt="img">
                </div>
                <h2 class="h5 section-community__title">
                    {{ page.extra.community_card_title_1 | safe }}
                </h2>
                <div class="section-community__line"></div>
                <p class="p-card  section-community__description">
                    {{ page.extra.community_card_description_1 | safe }}
                </p>
            </div>

            <div class="section-community__item">
                 <div class="section-community__img-row">
                    <div class="icon-green section-community__icon">
                        {% include 'ui/icons/community/icon-02.html' %}
                    </div>
                   <img class="section-community__img" src="/images/community/contribute-code-banner.png" alt="img">
                </div>
                <h2 class="h5 section-community__title">
                    {{ page.extra.community_card_title_2 | safe }}
                </h2>
                <div class="section-community__line"></div>
                <p class="p-card  section-community__description">
                    {{ page.extra.community_card_description_2 | safe }}
                </p>
            </div>

            <div class="section-community__item">

                 <div class="section-community__img-row">
                    <div class="icon-green section-community__icon">
                        {% include 'ui/icons/community/icon-03.html' %}
                    </div>
                   <img class="section-community__img" src="/images/community/location-info-banner.png" alt="img">
                </div>
                <h2 class="h5 section-community__title">
                    {{ page.extra.community_card_title_3 | safe }}
                </h2>
                <div class="section-community__line"></div>
                <p class="p-card  section-community__description">
                    {{ page.extra.community_card_description_3 | safe }}
                </p>
            </div>
            <div class="section-community__item">

                <div class="section-community__img-row">
                    <div class="icon-green section-community__icon">
                        {% include 'ui/icons/community/icon-04.html' %}
                    </div>
                  <img class="section-community__img" src="/images/community/provide-support-banner.png" alt="img">
                </div>
                <h2 class="h5 section-community__title">
                    {{ page.extra.community_card_title_4 | safe }}
                </h2>
                <div class="section-community__line"></div>
                <p class="p-card  section-community__description">
                    {{ page.extra.community_card_description_4 | safe }}
                </p>

            </div>
            <div class="section-community__item">

                <div class="section-community__img-row">
                    <div class="icon-green section-community__icon">
                        {% include 'ui/icons/community/icon-05.html' %}
                    </div>
                   <img class="section-community__img" src="/images/community/translate-banner.png" alt="img">
                </div>
                <h2 class="h5 section-community__title">
                    {{ page.extra.community_card_title_5 | safe }}
                </h2>
                <div class="section-community__line"></div>
                <p class="p-card  section-community__description">
                    {{ page.extra.community_card_description_5 | safe }}
                </p>

            </div>
            <div class="section-community__item">

                <div class="section-community__img-row">
                    <div class="icon-green section-community__icon">
                        {% include 'ui/icons/community/icon-06.html' %}
                    </div>
                   <img class="section-community__img" src="/images/community/design-product-banner.png" alt="img">
                </div>
                <h2 class="h5 section-community__title">
                    {{ page.extra.community_card_title_6 | safe }}
                </h2>
                <div class="section-community__line"></div>
                <p class="p-card  section-community__description">
                    {{ page.extra.community_card_description_6 | safe }}
                </p>
            </div>
        </div>
    </section>
    <section class="section-social">
        <h2 class="h1-inter section-social__title">
            {{ page.extra.stay_connected_section_title | safe }}
        </h2>
        <ul class="container section-social__row">
            <li class="section-social__item">{% include 'ui/icons/social/instagram.html' %}</li>
              <li class="section-social__item">{% include 'ui/icons/social/telegram.html' %}</li>
             <li class="section-social__item">{% include 'ui/icons/social/linkidin.html' %}</li>
             <li class="section-social__item">{% include 'ui/icons/social/facebook.html' %}</li>
             <li class="section-social__item"> {% include 'ui/icons/social/frame.html' %}</li>
             <li class="section-social__item">{% include 'ui/icons/social/mail.html' %}</li>
            <li class="section-social__item">{% include 'ui/icons/social/matrix.html' %}</li>
             <li class="section-social__item">{% include 'ui/icons/social/reddid.html' %}</li>
            <li class="section-social__item">{% include 'ui/icons/social/git.html' %}</li>
        </ul>
    </section>
   <section class="donate">
     <div class="container donate__container">
         <div class="donate__content">
            <h2 class="h6 donate__title">
                {{ page.extra.donate.title | safe }}
            </h2>
             <div class=" donate__line"></div>
             <p class="h2-sub_v2 donate__description">  {{ page.extra.donate.description | safe }}</p>
             {% include 'components/donate-button.html' %}
         </div>
         <div class="donate__img">
               {% include 'ui/icons/community/donate.html' %}
         </div>
     </div>
 </section>
{%- endblock content %}