{% 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.hero_title | lower }}">{{ page.extra.hero_title }}</a>
                    </li>
                </ul>
            </nav>
            <div class="hero-sub__content">
                <h1 class="h1 hero-sub__title">
                    {{ page.extra.hero_title | safe }}
                </h1>
                <p class="h2-sub_v2 hero-sub__description">
                    {{ page.extra.hero_description_1 | safe }}
                    {{ page.extra.hero_description_2 | safe }}
                </p>

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

    <section class="free-open">
        <div class="container free-open__container">
            <div class="free-open__content">
                <h2 class="h6 free-open__title">{{ page.extra.project_info_section_title | safe }}</h2>
                <div class="line free-open__line"></div>
                <div class="free-open__img-row">
                <img class="free-open__img" src="/images/about-us/project-info-main-banner.png" alt="img">
            </div>
                <p class="p-15 free-open__text">{{ page.extra.project_info_section_description | safe }}</p>
            </div>

        </div>
    </section>

    <section class="about-us">
        <div class="container about-us__container">
            <div class="about-us__item">
                <img class="about-us__img" src="/images/about-us/info-card-banner-1.png" alt="img">
                <div class="about-us__content">
                    <div class="about-us__title-row">
                        <div class="about-us__icon">
                            {% include 'ui/icons/about/icon01.html' %}
                        </div>
                        <h3 class="h5 about-us__title">{{ page.extra.project_info_card_title_1 | safe }}</h3>
                    </div>
                    <p class="p-card about-us__text">{{ page.extra.project_info_card_description_1 | safe }}</p>
                </div>
            </div>
            <div class="about-us__item">
                <img class="about-us__img" src="/images/about-us/info-card-banner-2.png" alt="img">
                <div class="about-us__content">

                    <div class="about-us__title-row">
                        <div class="about-us__icon">
                            {% include 'ui/icons/about/icon02.html' %}
                        </div>
                        <h3 class="h5 about-us__title">{{ page.extra.project_info_card_title_2 | safe }}</h3>
                    </div>

                    <p class="p-card about-us__text">{{ page.extra.project_info_card_description_2 | safe }}</p>
                </div>
            </div>
        </div>
    </section>

    <section class="about-history">
        <div class="container about-history__container">
            <h2 class="h6-bold about-history__title">{{ page.extra.history_section_title | safe }}</h2>
            <div class="about-history__row">
                <div class="about-history__item">
                    <div class="about-history__count">
                        <div class="h6-date about-history__number">2011</div>
                        <div class="about-history__circle"></div>
                    </div>
                    <p class="p-sm about-history__text">{{ page.extra.history_section_20_11 | safe }}</p>
                </div>
                <div class="about-history__item">
                    <div class="about-history__count">
                        <div class="h6-date about-history__number ">2015</div>
                        <div class="about-history__circle"></div>
                    </div>
                    <p class="p-sm about-history__text">{{ page.extra.history_section_20_15 | safe }}</p>
                </div>
                <div class="about-history__item">
                    <div class="about-history__count">
                        <div class="h6-date about-history__number about-history__number--green">2021</div>
                        <div class="about-history__circle"></div>
                    </div>
                    <p class="p-sm about-history__text">{{ page.extra.history_section_20_21 | safe }}</p>
                </div>
                <div class="about-history__item">
                    <div class="about-history__count">
                        <div class="h6-date about-history__number about-history__number--green">2022</div>
                        <div class="about-history__circle"></div>
                    </div>
                    <p class="p-sm about-history__text">{{ page.extra.history_section_20_22 | safe }}</p>
                </div>
                <div class="about-history__item">
                    <div class="about-history__count">
                        <div class="h6-date about-history__number about-history__number--green">2023</div>
                        <div class="about-history__circle"></div>
                    </div>
                    <p class="p-sm about-history__text">{{ page.extra.history_section_20_23 | safe }}</p>
                </div>
            </div>
        </div>
    </section>

    <section class="about-links">
        <div class="container about-links__container">
            <h2 class="h6-bold about-links__title">{{ page.extra.integration_section_title | safe }}</h2>
            <div class="about-links__buttons">
                <a class="about-links__link" href="#" target="_blank">
                    <img class="about-links__img" src="/images/about-us/open-maps-banner.png" alt="img">
                </a>
                <a class="about-links__link" href="#" target="_blank">
                    <img class="about-links__img" src="/images/about-us/wikipedia-banner.png" alt="img">
                </a>
            </div>
        </div>

    </section>
    {% include 'section/donate.html' %}
{%- endblock content %}