tripwithbonus/templates/pages/p_mover_landing_page.html

{% extends 'tb_base.html' %}
{% load static %}
{% load i18n %}

{% block meta %}
  <link rel="stylesheet" href="{% static "css/moover.css" %}">
  <link rel="stylesheet" href="{% static "css/slick.css" %}">
  <script src="{% static "js/slick.min.js" %}"></script>
  <script src="{% static "js/push/lazyload.min.js" %}"></script>
{% endblock %}

{% block content %}

    <meta name="facebook-domain-verification" content="e9xtao0o9fvuc3gbturkp57qi2upqb" />

<!-- Meta Pixel Code -->
<script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', '1009253847591455');
fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=1009253847591455&ev=PageView&noscript=1"
/></noscript>
<!-- End Meta Pixel Code -->

    <!-- Meta Pixel Code -->
<script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', '600144342749399');
fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=600144342749399&ev=PageView&noscript=1"
/></noscript>
<!-- End Meta Pixel Code -->

    <!-- Meta Pixel Code -->
<script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', '600144342749399');
fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=600144342749399&ev=PageView&noscript=1"
/></noscript>
<!-- End Meta Pixel Code -->



    <!-- Yandex.Metrika counter -->
<script type="text/javascript" >
   (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
   m[i].l=1*new Date();
   for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }}
   k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
   (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");

   ym(97070898, "init", {
        clickmap:true,
        trackLinks:true,
        accurateTrackBounce:true,
        webvisor:true,
        ecommerce:"dataLayer"
   });
</script>
<noscript><div><img src="https://mc.yandex.ru/watch/97070898" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
<!-- /Yandex.Metrika counter -->


  <section class="presentation">
    <div class="presentation__top">
      <h1 class="presentation__title">
        {% blocktrans %}
          Сервис попутных посылок
        {% endblocktrans %}
      </h1>
      <div class="presentation__subtitle subtitle h4">
        {% translate "Отправляй посылки с попутчиками в любую точку, быстро и недорого" %}
      </div>
      <a class="presentation__btn btn btn--primary" href="#howtowork">{% translate "Узнать подробнее" %}</a>
      <div class="presentation__next">
        {% translate "Как это работает?" %}
        <div class="presentation__arrows">
          <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
            <path d="M26 16L16 26L6 16" stroke="#272424" stroke-opacity="0.6" stroke-width="1.5" stroke-linecap="round"
                  stroke-linejoin="round"/>
            <path d="M26 6L16 16L6 6" stroke="#272424" stroke-opacity="0.6" stroke-width="1.5" stroke-linecap="round"
                  stroke-linejoin="round"/>
          </svg>
        </div>
      </div>
    </div>
    <div class="presentation__bottom" id="howtowork">
      <div class="title">
        {% translate "Как это работает" %}
      </div>
      <p class="subtitle">
        {% translate "Маленькая история о том, как работает наш сервис" %}
      </p>
      {############cards###############}
      <div class="presentation__cards cards">
        <div class="cards__list">
          <div class="cards__item">
            <div class="cards__arrow"></div>
            <img class="cards__img" src="{% static "img/png/mover/image1.png" %}" alt="img1"/>
            <p class="cards__desc">
              {% translate "Мария, хочет отправить<br class='br--xxl'/> посылку, но её не устраивает<br class='br--xxl br--sm'/> цена доставки почтовых<br class='br--sm'/>" %}
              {% translate "сервисов и она устала искать в<br class='br--xxl br--sm'/> чатах тех, кто сможет перевезти<br class='br--xxl br--md'/> посылку." %}
            </p>
          </div>
          <div class="cards__item">
            <div class="cards__arrow"></div>
            <img class="cards__img" src="{% static "img/png/mover/image2.png" %}" alt="img1"/>
            <p class="cards__desc">

              {% translate "Мария, узнаёт о нашем сервисе<br class='br--sm'/>" %}
              <a href="/">TripWB.com. </a>
              {% translate "Регистрируется<br class='br--xxl br--sm'/> и очень быстро размещает<br class='br--xxl' br--sm/> объявление." %}
            </p>
          </div>
          <div class="cards__item">
            <div class="cards__arrow"></div>
            <img class="cards__img" src="{% static "img/png/mover/image3.png" %}" alt="img1"/>
            <p class="cards__desc">
              {% translate "Попутчик Егор увидел<br class='br--xxl br--sm'/> объявление Марии, нажал<br class='br--xxl br--sm'/> откликнуться и получил<br class='br--sm'/> возможность связаться с ней,<br class='br--xxl br--sm'/> удобным для него способом." %}
            </p>
          </div>
          <div class="cards__item">
            <img class="cards__img" src="{% static "img/png/mover/image4.png" %}" alt="img1"/>
            <p class="cards__desc">
              {% translate "Мария и Егор обговорили детали<br class='br--sm'/> доставки и потом встретились в<br class='br--sm'/> удобном для всех месте. После<br class='br--xxl br--sm'/> чего Мария передала посылку<br class='br--xxl br--sm'/> Егору и он её доставил." %}
            </p>
          </div>
        </div>
      </div>
      <script>
        $(function () {
          var timer = 0;
          var cards = $('.cards');
          var list = $('.cards__list');
          var items = $('.cards__item');
          if (!cards.length && !list.length && !items.length) {
            return false;
          }

          function checkAdaptive() {
            if (window.innerWidth <= 991.98) {
              {#console.log('init check')#}
              initStagesSlider();
            } else {
              {#console.log('rem')#}
              removeSlider();
            }
          }

          function removeSlider() {
            if (list.hasClass('slick-slider')) {
              list[0].slick.unslick();
              list[0].slick = null;
            }
            list.addClass('js-not-slider');
          }

          function initStagesSlider() {
            if (!list[0].slick) {
              {#console.log('init')#}
              list.slick({
                autoplay: false,
                dots: true,
                arrows: false,
                infinite: false,
                variableWidth: true,
                slidesToScroll: 1,

                touchMove: true,
                draggable: true,
              });
            }
            list.removeClass('js-not-slider');
          }

          window.addEventListener('resize', () => {
            clearTimeout(timer);
            timer = setTimeout(() => {
              checkAdaptive();
            }, 400);
          });
          checkAdaptive();
        });
      </script>
    </div>
  </section>
  <section class="easy">
    <div class="title">
      {% translate "Один простой шаг, чтобы отправить посылку" %}
    </div>
    <div class="subtitle">
      {% translate "Еще легче, чем писать в чаты и группы в социальных сетях" %}
    </div>
    <div class="easy__grid">
      <div class="easy__item easy__item--fir">
        <h2>{% translate "Один простой шаг" %}</h2>
        <p>{% translate "За пару кликов <b>размещаешь объявление</b> на нашем сайте, о том, что необходимо перевезти посылку, а также указываешь удобный способ связи." %}</p>
        <img src="{% static 'img/png/mover/sender-card1.png' %}" alt="sender1">
      </div>
      <div class="easy__item easy__item--sec">
        <div class="easy__arrow easy__arrow--fir"></div>
        <div class="easy__arrow easy__arrow--sec"></div>
        <p>{% translate "Попутчики видят твое объявление и&nbsp;оставляют отклики на&nbsp;него." %}</p>
        <img src="{% static 'img/png/mover/sender-card2.png' %}" alt="sender2">
      </div>
      <div class="easy__item easy__item--thr">
        <p class="hide__xxl">{% translate "Тебе остаётся только выбрать перевозчика, связаться и&nbsp;обсудить детали перевозки." %}</p>
        <p class="show__xxl">{% translate "Попутчики видят твое объявление и&nbsp;оставляют отклики на&nbsp;него." %}</p>

        <picture class="img">
          <source srcset="{% static "img/png/mover/sender-card3.png" %}" media="(min-width: 1439.98px)"/>
          <img src="{% static 'img/png/mover/sender-card3-md.png' %}" alt="sender3">
        </picture>

      </div>
    </div>
    <div class="subtitle">
      {% translate "Чтобы разместить объявление - зарегистрируйтесь" %}
    </div>
    <a href="{% url "registration_page" %}" onclick="ym(97070898,'reachGoal','Registration'); return true;"
       class="easy__btn btn btn--primary">{% translate "Разместить объявление" %}</a>
  </section>
  <section class="use">
    <div class="title">{% translate "Уже пользуются сайтом и находят перевозчиков" %}</div>
    <a href="{% url "registration_page" %}">
      <picture>
        <source srcset="{% static "img/png/mover/use-1720.png" %}" media="(min-width: 1720px)"/>
        <source srcset="{% static "img/png/mover/use-1280.png" %}" media="(min-width: 1304px)"/>
        <source srcset="{% static "img/png/mover/use-1120.png" %}" media="(min-width: 1280px)"/>
        <source srcset="{% static "img/png/mover/use-640.png" %}" media="(min-width: 768px)"/>
        <img src="{% static "img/png/mover/use-328.png" %}" alt="list users" class="use__img">
      </picture>
    </a>

    <div class="h3">
      {% translate "Нужно отправить посылку партнеру, родителям или знакомым?" %}
    </div>
    <a href="{% url "registration_page" %}" onclick="ym(97070898,'reachGoal','Registration'); return true;" class="use__btn btn btn--primary">{% translate "Найти перевозчика" %}</a>
    <br/>
    <a href="{% url "registration_page" %}" onclick="ym(97070898,'reachGoal','Registration'); return true;" class="use__link">{% translate "Зарегистрироваться" %}</a>
  </section>
  <section class="diff">
    <div class="title">{% translate "Чем мы отличаемся от классических почтовых сервисов" %}</div>
    <div class="diff__grid">
      <div class="diff__coll left">
        <div class="diff__coll-title h2">
          Trip With Bonus
        </div>
        <div class="diff__item diff__item--done">
          <div class="diff__status"></div>
          Стоимость перевозки назначаете сами
        </div>
        <div class="diff__item diff__item--done">
          <div class="diff__status"></div>
          Возможность контакта с перевозчиком в режиме онлайн
        </div>
        <div class="diff__item diff__item--done">
          <div class="diff__status"></div>
          Встреча с перевозчиком в удобном для вас месте
        </div>
        <div class="diff__item diff__item--done">
          <div class="diff__status"></div>
          Без дополнительных платежей и комиссий за параметры посылки
        </div>
        <div class="diff__item diff__item--done">
          <div class="diff__status"></div>
          Вы сами выбираете оптимальный маршрут и время доставки
        </div>
      </div>
      <div class="diff__coll right">
        <div class="diff__coll-title h2">
          Другие почтовые сервисы
        </div>
        <div class="diff__item diff__item--error">
          <div class="diff__status"></div>
          Стоимость перевозки назначает сервис
        </div>
        <div class="diff__item diff__item--error">
          <div class="diff__status"></div>
          Автоматический трекинг не всегда даёт актуальную информацию
        </div>
        <div class="diff__item diff__item--error">
          <div class="diff__status"></div>

          Нужно ехать только в пункт отправки посылки
        </div>
        <div class="diff__item diff__item--error">
          <div class="diff__status"></div>
          Дополнительная стоимость за разные параметры посылки
        </div>
        <div class="diff__item diff__item--error">
          <div class="diff__status"></div>
          Посылка может перевозиться долго и с большим количеством перегрузок
        </div>

      </div>
    </div>
  </section>
  <section class="chatterbox" id="chatterbox">
    <div class="title">{% translate "Что о нас говорят люди" %}</div>
    <div class="chatterbox__slider slick-slider">
      {% for media_item in page.get_media_items %}
        <div class="slick-slide">
          <div class="chatterbox__slide">
            <div class="chatterbox__vbtn"></div>
            <div class="chatterbox__wrap">
              <div class="chatterbox__vbox">
                <img src="{{ MEDIA_URL }}{{ media_item.picture }}" alt="user" class="chatterbox__poster">
                <video
                    data-src="{{ MEDIA_URL }}{{ media_item.video }}"
                    poster="{{ MEDIA_URL }}{{ media_item.picture }}"
                    playsinline="false"
                    controls
                    autoplay
                ></video>
              </div>
            </div>
          </div>

        </div>
      {% endfor %}
    </div>
    <div class="chatterbox__mbtns show__md"></div>

    <script type="text/javascript">
      $(document).ready(function () {
        function handlerVideos() {
          const vtns = $('.chatterbox__vbtn');
          if (!vtns.length) return;
          vtns.off('click.load-lazy').on('click.load-lazy', (e) => {
            const vtn = e.target;
            {#console.log('!!!!!!!', vtn,)#}
            vtn.nextElementSibling.querySelector('video');
            vtn.closest('.slick-slide').classList.contains('slick-current') &&
            LazyLoad.load($(vtn).siblings().find('video')[0], {
              callback_loaded: (e) => callbackLoaded(e, vtn),
            });
          });
          const callbackLoaded = function (elm, vtn) {
            {#vtn.closest('.slick-slide').classList.contains('slick-current')#}
            vtn.classList.add('hide');
            const imgWrap = elm.closest('.chatterbox__slide');
            imgWrap?.classList.add('loaded');
          };
        }

        function initSlider() {
          {#console.log($('.slick-slider'))#}
          $('.slick-slider')
            .not('.slick-initialized').slick({
            centerMode: true,
            draggable: false,
            slidesToShow: 3,
            infinite: false,
            initialSlide: 1,
            responsive: [
              {
                breakpoint: 768,
                settings: {
                  draggable: true,
                  appendArrows: $('.chatterbox__mbtns'),
                },
              },
            ],
          })
            .on('beforeChange', function (event, slick, currentSlide, nextSlide) {
              slick.$slides[currentSlide]?.querySelector('video')?.pause();
              slick.$slides[nextSlide]?.querySelector('video')?.pause();
            });
        }

        handlerVideos();
        initSlider();

      });
    </script>
  </section>
  <section class="use use--lett" id="rewiews">
    <div class="title">{% translate "Что о нас пишут люди" %}</div>
    <picture class="hide__xs">
      <source srcset="{% static "img/png/mover/use-letters-1739.png" %}" media="(min-width: 1720px)"/>
      <source srcset="{% static "img/png/mover/use-letters-1280.png" %}" media="(min-width: 1280px)"/>
      <source srcset="{% static "img/png/mover/use-letters-1120.png" %}" media="(min-width: 992px)"/>
      <source srcset="{% static "img/png/mover/use-letters-640.png" %}" media="(min-width: 768px)"/>
      <img src="{% static "img/png/mover/use-letters-328.png" %}" alt="list letters"
           class="use__img">
    </picture>
    <div class="show__xs">
      <picture>
        <source srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
                media="(min-width: 480px)"/>
        <img src="{% static "img/png/mover/use-letters-s1.png" %}" alt="list letters"
             class="use__img">
      </picture>
      <picture>
        <source srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
                media="(min-width: 480px)"/>
        <img src="{% static "img/png/mover/use-letters-s2.png" %}" alt="list letters"
             class="use__img">
      </picture>
      <picture>
        <source srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
                media="(min-width: 480px)"/>
        <img src="{% static "img/png/mover/use-letters-s3.png" %}" alt="list letters"
             class="use__img">
      </picture>
      <picture>
        <source srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
                media="(min-width: 480px)"/>
        <img src="{% static "img/png/mover/use-letters-s4.png" %}" alt="list letters"
             class="use__img">
      </picture>
      <picture>
        <source srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
                media="(min-width: 480px)"/>
        <img src="{% static "img/png/mover/use-letters-s5.png" %}" alt="list letters"
             class="use__img">
      </picture>
      <picture>
        <source srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
                media="(min-width: 480px)"/>
        <img src="{% static "img/png/mover/use-letters-s6.png" %}" alt="list letters"
             class="use__img">
      </picture>
      <picture>
        <source srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
                media="(min-width: 480px)"/>
        <img src="{% static "img/png/mover/use-letters-s7.png" %}" alt="list letters"
             class="use__img">
      </picture>
      <picture>
        <source srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
                media="(min-width: 480px)"/>
        <img src="{% static "img/png/mover/use-letters-s8.png" %}" alt="list letters"
             class="use__img">
      </picture>
    </div>
  </section>
  <section class="animate left">
    <div class="title">
      {% translate "Хочешь отправить посылку партнеру, родным или знакомым людям быстро и недорого?" %}
    </div>
    <div class="subtitle">
      {% translate "Зарегистрируйся на <a href='https://tripwb.com/' class='animate__link'>Trip With Bonus</a> прямо сейчас, размести бесплатно объявление и получи запросы на перевозку твоей посылки" %}
    </div>
    <a href="{% url "registration_page" %}" onclick="ym(97070898,'reachGoal','Registration'); return true;"
       class="use__btn btn btn--primary">{% translate "Разместить объявление" %}</a>
    <script>
      document.addEventListener("DOMContentLoaded", () => {
        const animate = document.querySelectorAll('.animate');
        let counter = 0;
        const observer = new IntersectionObserver(
          (entries, interserctionObserver) => {
            entries.forEach(entry => {
              {#console.log('or', entry)#}
              if (entry.isIntersecting) {
                counter++;
                const el = entry.target;
                if (animate.length === counter) {
                  interserctionObserver.disconnect();
                }
                (() => {
                  el.style.opacity = 1;
                  el.style.transform = 'scale(1)';
                  el.style.transition = 'opacity 1.3s ease, transform 1.5s ease';
                })();
              }
            });
          }, {root: null, rootMargin: '0px'},
        );
        animate.forEach(item => observer.observe(item));
      });
    </script>
  </section>
  <section class="about" id="about">
    <div class="title">{% translate "О сервисе Trip With Bonus" %}</div>
    <div class="about__grid">
      <picture class="about__img">
        <source srcset="{% static "img/png/mover/about-1720.png" %}" media="(min-width: 1720px)"/>
        <source srcset="{% static "img/png/mover/about-1280.png" %}" media="(min-width: 1304px)"/>
        <source srcset="{% static "img/png/mover/about-1120.png" %}" media="(min-width: 1280px)"/>
        <source srcset="{% static "img/png/mover/about-640.png" %}" media="(min-width: 768px)"/>
        <img src="{% static "/img/png/mover/about-328.png" %}" alt="about">
      </picture>
      {#      <img src="{% static "/img/png/about.png" %}" alt="about" class="about__img">#}
      <div class="about__right">
        <p>{% translate "TripWB&nbsp;- это сервис попутных посылок, который <b>соединяет отправителя посылки</b> того, кому нужно что-то передать в&nbsp;другой город или страну, и&nbsp;<b>перевозчика посылки</b>, а&nbsp;именно попутчика или путешественника, который следует по&nbsp;пути назначения." %}</p>
        <p>{% translate "<b>Тебе не&nbsp;нужно больше бежать в&nbsp;чаты и&nbsp;группы</b> в&nbsp;социальных сетях и&nbsp;искать тех, кто сможет перевезти посылку, а&nbsp;достаточно просто зайти на&nbsp;сайт, разместить объявление в&nbsp;пару кликов и&nbsp;дождаться откликов от&nbsp;попутчиков." %}
        <p class="about__half">{% translate "Мы&nbsp;<b>не&nbsp;являемся почтовым сервисом</b>, т.к.&nbsp;мы&nbsp;не&nbsp;доставляем посылки, а&nbsp;только даем возможность отправителю и&nbsp;перевозчику найти друг друга." %}</p>
        <p class="about__half">{% translate "Если не&nbsp;хочешь размещать объявление и&nbsp;ждать, то&nbsp;можешь <b>самостоятельно на&nbsp;нашем сайте найти перевозчика</b> через удобную систему поиска" %}</p>
      </div>
    </div>

  </section>
  <section class="benefits" id="benefits">
    <div class="title">{% translate "Преимущества сервиса" %}</div>
    <div class="benefits__grid">
      <div class="benefits__first">
        <div class="benefits__item">
          <h2>{% translate "Прямой контакт" %}</h2>
          <p>{% translate "Общаешься напрямую с&nbsp;перевозчиком, никаких посредников" %}</p>
        </div>
        <div class="benefits__item">
          <h2>{% translate "Своя цена" %}</h2>
          <p>{% translate "Стоимость перевозки самостоятельно обговариваете с&nbsp;перевозчиком." %}</p>
        </div>
        <div class="benefits__item">
          <h2>{% translate "Нет доп. расходов" %}</h2>
          <p>{% translate "Никаких комиссий, переплат и&nbsp;дополнительных расходов за&nbsp;отправку." %}</p>
        </div>
      </div>
      <div class="benefits__second">
        <picture>
          <source srcset="{% static "img/png/mover/benefits-1720.png" %}" media="(min-width: 1720px)"/>
          <source srcset="{% static "img/png/mover/benefits-1280.png" %}" media="(min-width: 1280px)"/>
          <source srcset="{% static "img/png/mover/benefits-1120.png" %}" media="(min-width: 1120px)"/>
          <source srcset="{% static "img/png/mover/benefits-640.png" %}" media="(min-width: 768px)"/>
          <img src="{% static "/img/png/mover/benefits-328.png" %}" alt="benefits">
        </picture>
      </div>
      <div class="benefits__third">
        <div class="benefits__item">
          <h2>{% translate "Удобный поиск" %}</h2>
          <p>{% translate "Можешь самостоятельно найти перевозчиков или разместить объявление на&nbsp;сайте." %}</p>
        </div>
        <div class="benefits__item">
          <h2>{% translate "Уведомления" %}</h2>
          <p>{% translate "Как только по&nbsp;твоему объявлению найдется перевозчик мы&nbsp;сообщим на&nbsp;E-mail." %}</p>
        </div>
        <div class="benefits__item">
          <h2>{% translate "Экономия времени" %}</h2>
          <p>{% translate "Не&nbsp;нужно искать группы, чаты, и&nbsp;кидать &laquo;клич&raquo;, а&nbsp;просто достаточно разместить объявление на&nbsp;сайте." %}</p>
        </div>
      </div>
    </div>
  </section>
  <section class="uses">
    <div class="title">{% translate "Для каких целей можно использовать наш сервис" %}</div>

    <div class="uses__grid">
      <div class="uses__item">
        <img class="uses__icon" src="{% static "img/svg/files.svg" %}" alt="image icon">
        <p class="uses__desc">
          {% translate "Когда нужно отправить документы партнеру или родственнику" %}
        </p>
      </div>
      <div class="uses__item">
        <img class="uses__icon" src="{% static "img/svg/box.svg" %}" alt="image icon">
        <p class="uses__desc">
          {% translate "Когда необходимо отправить посылку в&nbsp;другую страну" %}
        </p>
      </div>
      <div class="uses__item">
        <img class="uses__icon" src="{% static "img/svg/present.svg" %}" alt="image icon">
        <p class="uses__desc">
          {% translate "Когда нужно отправить подарок семье, друзьям или знакомым" %}
        </p>
      </div>
      <div class="uses__item">
        <img class="uses__icon" src="{% static "img/svg/bax.svg" %}" alt="image icon">
        <p class="uses__desc">
          {% translate "Когда стоимость пересылки через почтовый сервис высокая или перевозка занимает длительное время" %}
        </p>
      </div>
      <div class="uses__item">
        <img class="uses__icon" src="{% static "img/svg/books.svg" %}" alt="image icon">
        <p class="uses__desc">
          {% translate "Когда нужно отправить не&nbsp;только маленькую посылку, но&nbsp;и&nbsp;крупногабаритный груз" %}
        </p>
      </div>
      <div class="uses__item">
        <img class="uses__icon" src="{% static "img/svg/earth.svg" %}" alt="image icon">
        <p class="uses__desc">
          {% translate "Когда нет прямого сообщения из&nbsp;пункта&nbsp;А в&nbsp;пункт&nbsp;Б обычными сервисами доставки" %}
        </p>
      </div>
    </div>
  </section>
  <section class="animate right">
    <div class="title">
      {% translate "Размести свое объявление о необходимости перевозки посылки прямо сейчас" %}
    </div>
    <div class="subtitle">
      {% translate "Достаточно просто зайти на сайт, разместить объявление в пару кликов и дождаться откликов от попутчиков." %}
    </div>
    <a href="{% url "registration_page" %}" onclick="ym(97070898,'reachGoal','Registration'); return true;"
       class="use__btn btn btn--primary">{% translate "Разместить объявление" %}</a>
  </section>
  <section class="sore">
    <div class="title">
      {% translate "О наболевшем..." %}
    </div>
    <div class="subtitle">
      {% translate "Мы&nbsp;знаем, каково это без конца и&nbsp;края закидывать сообщения в&nbsp;чаты и&nbsp;группы в&nbsp;социальных сетях, в&nbsp;надежде найти человека, который едет или летит в&nbsp;нужном направлении, чтобы передать посылку своим родным или близким. Очень часто ещё и&nbsp;стоимость пересылки в&nbsp;обычных почтовых сервисах выше стоимости самой посылки." %}
    </div>
    <picture>
      <source srcset="{% static "img/png/mover/sore-1720.png" %}" media="(min-width: 1720px)"/>
      <source srcset="{% static "img/png/mover/sore-1280.png" %}" media="(min-width: 1304px)"/>
      <source srcset="{% static "img/png/mover/sore-1120.png" %}" media="(min-width: 1280px)"/>
      <source srcset="{% static "img/png/mover/sore-640.png" %}" media="(min-width: 768px)"/>
      <img src="{% static "/img/png/mover/sore-328.png" %}" alt="sore image" class="sore__img">
    </picture>
    <div class="h3">
      {% translate "Зарегистрируйте бесплатно прямо сейчас и&nbsp;размести свое первое объявление об&nbsp;отправке посылки" %}
    </div>
    <a href="{% url "registration_page" %}" onclick="ym(97070898,'reachGoal','Registration'); return true;"
       class="sore__btn btn btn--primary">{% translate "Зарегистрироваться и разместить" %}</a>
    <br/>
    </div>
  </section>
{% endblock %}