website/templates/new-donate.html

{% extends "base.html" %}

{%- block content %}

    <section class="hero-sub hero-sub--big" 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>
            <h1 class="h1 hero-sub__title">{{ page.extra.hero_title | safe }}</h1>
            <p class="h2-sub_v2 hero-sub__description">{{ page.extra.hero_description | safe }}</p>
            <button class="button button--main"> {{ trans(key='donate-title', lang=lang) }}</button>
        </div>
    </section>

    <section class="support-benefit">
        <div class="container support-benefit__container">

            <div class="support-benefit__item">
                <div class="support-benefit__icon">
                    {% include 'ui/icons/new-support/icon01.html' %}
                </div>
                <p class="p-15 support-benefit__text">{{ page.extra.info_section_card_description_1 | safe }}</p>
            </div>

            <div class="support-benefit__item">
                <div class="support-benefit__icon">
                    {% include 'ui/icons/new-support/icon02.html' %}
                </div>
                <p class="p-15 support-benefit__text">{{ page.extra.info_section_card_description_2 | safe }}</p>
            </div>
            <div class="support-benefit__item">
                <div class="support-benefit__icon">
                    {% include 'ui/icons/new-support/icon03.html' %}
                </div>
                <p class="p-15 support-benefit__text">{{ page.extra.info_section_card_description_3 | safe }}</p>
            </div>
        </div>
    </section>

    <section class="services-support">
        <div class="container services-support__container">
            <h2 class="h6 services-support__title">{{ page.extra.funding_section_title | safe }}</h2>
            <div class="line services-support__line"></div>
            <div class="services-support__row">
                <div class="services-support__item">
                    <img class="services-support__img" src="/images/donate/first-card-banner.png" alt="img">
                    <div class="services-support__item-content">
                        <div class="services-support__title-row">
                            <div class="services-support__count">
                                <span class="icon-count services-support__number">01</span>
                                <div class="services-support__icon">
                                    {% include 'ui/icons/new-support/pin.html' %}
                                </div>
                            </div>
                            <h2 class="h5 services-support__sub-title">{{ page.extra.funding_section_card_title_1 | safe }}</h2>
                        </div>
                        <p class="p-card services-support__text">{{ page.extra.funding_section_card_description_1 | safe }}</p>
                    </div>
                </div>
                <div class="services-support__item">
                    <img class="services-support__img" src="/images/donate/second-card-banner.png" alt="img">
                    <div class="services-support__item-content">
                        <div class="services-support__title-row">
                            <div class="services-support__count">
                                <span class="icon-count services-support__number">02</span>
                                <div class="services-support__icon">
                                    {% include 'ui/icons/new-support/pin.html' %}
                                </div>
                            </div>
                            <h2 class="h5 services-support__sub-title">{{ page.extra.funding_section_card_title_2 | safe }}</h2>
                        </div>
                        <p class="p-card services-support__text">{{ page.extra.funding_section_card_description_2 | safe }}</p>
                    </div>
                </div>
                <div class="services-support__item">
                    <img class="services-support__img" src="/images/donate/third-card-banner.png" alt="img">
                    <div class="services-support__item-content">
                        <div class="services-support__title-row">
                            <div class="services-support__count">
                                <span class="icon-count services-support__number">03</span>
                                <div class="services-support__icon">
                                    {% include 'ui/icons/new-support/pin.html' %}
                                </div>
                            </div>
                            <h2 class="h5 services-support__sub-title">{{ page.extra.funding_section_card_title_3 | safe }}</h2>
                        </div>
                        <p class="p-card services-support__text">{{ page.extra.funding_section_card_description_3 | safe }}</p>
                    </div>

                </div>
            </div>
            <button class="button button--main"> {{ trans(key='donate-title', lang=lang) }}</button>
        </div>
    </section>

    <section class="reviews">
        <h2 class="reviews__title">{{ page.extra.users_way_section_title | safe }}</h2>
        <div class="line reviews__line"></div>

        <div class="swiper container reviews__carusel">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="reviews__item">
                        <p class="p reviews__text">{{ page.extra.users_way_donation_description_1 | safe }}</p>
                        <h3 class="p-md-bold reviews__s-title">{{ page.extra.users_way_donation_name_1| safe }} <br>
                            <br> </h3>
                        <img class="reviews__icon" src="/images/donate/first-donate-ico.png" alt="img">
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="reviews__item">
                        <p class="p reviews__text">{{ page.extra.users_way_donation_description_2 | safe }}</p>
                        <h3 class="p-md-bold reviews__s-title">{{ page.extra.users_way_donation_name_2| safe }}</h3>
                        <img class="reviews__icon" src="/images/donate/icon01.png" alt="img">
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="reviews__item">
                        <p class="p reviews__text">{{ page.extra.users_way_donation_description_3 | safe }}</p>
                        <h3 class="p-md-bold reviews__s-title">{{ page.extra.users_way_donation_name_3| safe }} <br><br> </h3>
                        <img class="reviews__icon" src="/images/donate/icon02.png" alt="img">
                    </div>
                </div>


            </div>
            <div class="reviews__pag">
                <div class="swiper-pagination"></div>
            </div>

        </div>
    </section>

    {% include 'section/donate.html' %}

    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
    <script>
        let swiper = new Swiper(".reviews__carusel", {
            slidesPerView: 1,
            spaceBetween: 0,
            loop: true,
            pagination: {
                el: ".swiper-pagination",
                clickable: true,
            },
            autoplay: {
                delay: 2000,
                pauseOnMouseEnter: true,

            },
            breakpoints: {
                768: {
                    slidesPerView: 2,
                }
            }
        });
    </script>
{%- endblock content %}