{% 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">
        <a href="https://github.com/organicmaps/organicmaps/issues" target="_blank" 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 }}
                <span class="section-community__title-color"> {{ page.extra.community_card_title_sub_1 | safe }}</span>
            </h2>
            <div class="section-community__line"></div>
            <p class="p-card  section-community__description">
                {{ page.extra.community_card_description_1 | safe }}
            </p>
        </a>

        <a href="https://github.com/organicmaps/organicmaps" target="_blank" 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 }}
                <span class="section-community__title-color">
                    {{ page.extra.community_card_title_sub_2 | safe }}

                </span>
            </h2>
            <div class="section-community__line"></div>
            <p class="p-card  section-community__description">
                {{ page.extra.community_card_description_2 | safe }}
            </p>
        </a>

        <a href="/faq/" target="_blank" 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 }}
                <span class="section-community__title-color">
                     {{ page.extra.community_card_title_sub_3 | safe }}
                    </span>
            </h2>
            <div class="section-community__line"></div>
            <p class="p-card  section-community__description">
                {{ page.extra.community_card_description_3 | safe }}
            </p>
        </a>
        <a href="#Stay-Connected" target="_blank" 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 }}
                <span class="section-community__title-color">
                           {{ page.extra.community_card_title_sub_4 | safe }}
                   </span>
            </h2>
            <div class="section-community__line"></div>
            <p class="p-card  section-community__description">
                {{ page.extra.community_card_description_4 | safe }}
            </p>

        </a>
        <a href="/faq" target="_blank" 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>

        </a>
        <a href="https://preprod.organicmaps.pages.dev/volunteering/" target="_blank" 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>
        </a>
        <a href="https://preprod.organicmaps.pages.dev/volunteering/" target="_blank" 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/Volunteer-banner.png" alt="img">
            </div>
            <h2 id="Stay-Connected" class="h5 section-community__title">
                {{ page.extra.community_card_title_7 | safe }}

            </h2>
            <div class="section-community__line"></div>
            <p class="p-card  section-community__description">
                {{ page.extra.community_card_description_7 | safe }}
            </p>
        </a>
    </div>
</section>
<section class="section-social">
    <h2  class="h1-inter section-social__title">
        {{ page.extra.stay_connected_section_title | safe }}
    </h2>
    {% include 'section/social-icon.html' %}
</section>
{% include 'section/solo-donate.html' %}
{%- endblock content %}