{% 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" %}">
{#  <link rel="stylesheet" href="{% static "css/slick-theme.css" %}">#}
  <script src="{% static "js/slick.min.js" %}"></script>
{% endblock %}
{#{% block before_close %}#}
{#  <script src="{% static "js/slick.min.js" %}"></script>#}
{#  #}
{#{% endblock %}#}

{% block content %}

  <section class="presentation">
    <div class="presentation__top">
      <h1 class="presentation__title 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/webp/image1.webp" %}" alt="img1"/>
            <p class="cards__desc">
              {% translate "Мария, хочет отправить<br class='br1'/> посылку, но её не устраивает<br class='br1'/> цена доставки почтовых<br class='br1'/>" %}
              {% translate "сервисов и она устала искать в<br class='br1'/> чатах тех, кто сможет перевезти<br class='br1'/> посылку." %}
            </p>
          </div>
          <div class="cards__item">
            <div class="cards__arrow"></div>
            <img class="cards__img" src="{% static "img/webp/image2.webp" %}" alt="img1"/>
            <p class="cards__desc">

              {% translate "Мария, узнаёт о нашем сервисе<br class='br1'/>" %}
              <a href="/">TripWB.com. </a>
              {% translate "Регистрируется<br class='br1'/> и очень быстро размещает<br class='br1'/> объявление." %}
            </p>
          </div>
          <div class="cards__item">
            <div class="cards__arrow"></div>
            <img class="cards__img" src="{% static "img/webp/image3.webp" %}" alt="img1"/>
            <p class="cards__desc">
              {% translate "Попутчик Егор увидел<br class='br1'/> объявление Марии, нажал<br class='br1'/> откликнуться и получил<br class='br1'/> возможность связаться с ней,<br class='br1'/> удобным для него способом." %}
            </p>
          </div>
          <div class="cards__item">
            <img class="cards__img" src="{% static "img/webp/image4.webp" %}" alt="img1"/>
            <p class="cards__desc">
              {% translate "Мария и Егор обговорили детали<br class='br1'/> доставки и потом встретились в<br class='br1'/> удобном для всех месте. После<br class='br1'/> чего Мария передала посылку<br class='br1'/> Егору и он её доставил." %}
            </p>
          </div>
        </div>
      </div>
    </div>
  </section>
  {############easy###############}
  <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/webp/sender-card1.webp' %}" 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/webp/sender-card2.webp' %}" alt="sender1">
      </div>
      <div class="easy__item easy__item--thr">
        <p>{% translate "Тебе остаётся только выбрать перевозчика, связаться и&nbsp;обсудить детали перевозки." %}</p>
        <img src="{% static 'img/webp/sender-card3.webp' %}" alt="sender1">

      </div>
    </div>
    <div class="subtitle">
      {% translate "Чтобы разместить объявление - зарегистрируйтесь" %}
    </div>
    <a href="#form" class="easy__btn btn btn--primary">{% translate "Разместить объявление" %}</a>
  </section>
  {############use###############}
  <section class="use">
    <div class="title">{% translate "Уже пользуются сайтом и находят перевозчиков" %}</div>
    <img src="{% static "img/webp/use.webp" %}" alt="list users" class="use__img">
    <div class="h3">
      {% translate "Нужно отправить посылку партнеру, родителям или знакомым?" %}
    </div>
    <a href="#form" class="use__btn btn btn--primary">{% translate "Найти перевозчика" %}</a>
    <br/>
    <a href="#registr" class="use__link">{% translate "Зарегистрироваться" %}</a>
  </section>
  <section class="use use--diff">
    <div class="title">{% translate "Чем мы отличаемся от классических почтовых сервисов" %}</div>
    <img src="{% static "img/webp/diff.webp" %}" alt="list differences" class="use__img">
  </section>
  <section class="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__vicon"></div>
    
            <video src="{{ MEDIA_URL }}{{ media_item.video }}"></video>
    
            </div>
          </div>
      {% endfor %}
{#      <div class="slick-slide">#}
{#        <div class="chatterbox__slide">#}
{#          <div class="chatterbox__vicon"></div>#}
{##}
{#        <video src="https://example.com/hexlet.mp4"></video>#}
{##}
{#        </div>#}
{#      </div>#}
{#      <div class="slick-slide">#}
{#        <div class="chatterbox__slide">#}
{#          <div class="chatterbox__vicon"></div>#}
{##}
{#        <video src="https://example.com/hexlet.mp4"></video>#}
{##}
{#        </div>#}
{#      </div>#}
{#      <div class="slick-slide">#}
{#        <div class="chatterbox__slide">#}
{#          <div class="chatterbox__vicon"></div>#}
{##}
{##}
{#        </div>#}
{#      </div>#}
{#      <div class="slick-slide">#}
{#        <div class="chatterbox__slide">#}
{#          <div class="chatterbox__vicon"></div>#}
{##}
{##}
{#        </div>#}
{#      </div>#}
{#      <div class="slick-slide">#}
{#        <div class="chatterbox__slide">#}
{#          <div class="chatterbox__vicon"></div>#}
{##}
{##}
{#        </div>#}
{#      </div>#}
{#    </div>#}
{#    </div>#}
{#    </div>#}
{#    </div>#}
{#    </div>#}
    </div>
    <script type="text/javascript">
        $(document).ready(function () {
            $('.slick-slider').slick({
                centerMode: true,
                {#centerPadding: '160px',#}
                slidesToShow: 3,
                responsive: [
                    {
                        breakpoint: 768,
                        settings: {
                            arrows: false,
                            centerMode: true,
                            centerPadding: '40px',
                            slidesToShow: 3
                        }
                    },
                    {
                        breakpoint: 480,
                        settings: {
                            arrows: false,
                            centerMode: true,
                            centerPadding: '40px',
                            slidesToShow: 1
                        }
                    }
                ]
            });
        });
    </script>
  </section>







{% endblock %}