TRI-283: save for show p_customer_landing_page

static/css/moover.css

@@ -236,10 +236,6 @@ b {
   }
 }
 
-.hide__md {
-  display: inline-flex;
-}
-
 @media (max-width: 991.98px) {
   .hide__md {
     display: none;

static/css/moover/root.css

@@ -236,10 +236,6 @@ b {
   }
 }
 
-.hide__md {
-  display: inline-flex;
-}
-
 @media (max-width: 991.98px) {
   .hide__md {
     display: none;

styles/moover/root.scss

@@ -210,7 +210,6 @@ b {
   }
 
   &__md {
-    display: inline-flex;
 
     @media (max-width: 991.98px) {
       display: none;

templates/pages/p_customer_landing_page.html

@@ -5,25 +5,20 @@
 {% 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>
+  <script src="{% static "js/push/lazyload.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">
+      <h1 class="presentation__title">
         {% blocktrans %}
           Сервис попутных посылок
         {% endblocktrans %}
       </h1>
       <div class="presentation__subtitle subtitle h4">
-        {% translate "Отправляй посылки с попутчиками в любую точку, быстро и недорого" %}
+        {% translate "Перевози посылки и&nbsp;окупай стоимость дороги, отдыха или топлива" %}
       </div>
       <a class="presentation__btn btn btn--primary" href="#howtowork">{% translate "Узнать подробнее" %}</a>
       <div class="presentation__next">
@@ -50,43 +45,96 @@
         <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"/>
+            <img class="cards__img" src="{% static "img/webp/mover/image1.webp" %}" alt="img1"/>
             <p class="cards__desc">
-              {% translate "Мария, хочет отправить<br class='br1'/> посылку, но её не устраивает<br class='br1'/> цена доставки почтовых<br class='br1'/>" %}
+              {% translate "Олег планирует поездку в&nbsp;другой город, задался вопросом, как окупить стоимость дороги?" %}
-              {% 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"/>
+            <img class="cards__img" src="{% static "img/webp/mover/image2.webp" %}" alt="img1"/>
             <p class="cards__desc">
 
-              {% translate "Мария, узнаёт о нашем сервисе<br class='br1'/>" %}
+              {% translate "Олег зашел на сайт " %}
               <a href="/">TripWB.com. </a>
-              {% translate "Регистрируется<br class='br1'/> и очень быстро размещает<br class='br1'/> объявление." %}
+              {% translate "быстро разместил объявление, что планирует поездку из&nbsp;одного города в&nbsp;другой и&nbsp;готов взять с&nbsp;собой посылку до&nbsp;10&nbsp;кг." %}
             </p>
           </div>
           <div class="cards__item">
             <div class="cards__arrow"></div>
-            <img class="cards__img" src="{% static "img/webp/image3.webp" %}" alt="img1"/>
+            <img class="cards__img" src="{% static "img/webp/mover/image3.webp" %}" alt="img1"/>
             <p class="cards__desc">
-              {% translate "Попутчик Егор увидел<br class='br1'/> объявление Марии, нажал<br class='br1'/> откликнуться и получил<br class='br1'/> возможность связаться с ней,<br class='br1'/> удобным для него способом." %}
+              {% translate "На&nbsp;объявление Олега откликнулась Аня, ей&nbsp;как раз и&nbsp;нужно отправить посылку своему другу в&nbsp;город, куда следует Олег, но&nbsp;обычными почтовыми сервисами очень дорого и&nbsp;долго ждать." %}
             </p>
           </div>
           <div class="cards__item">
-            <img class="cards__img" src="{% static "img/webp/image4.webp" %}" alt="img1"/>
+            <img class="cards__img" src="{% static "img/webp/mover/image4.webp" %}" alt="img1"/>
             <p class="cards__desc">
-              {% translate "Мария и Егор обговорили детали<br class='br1'/> доставки и потом встретились в<br class='br1'/> удобном для всех месте. После<br class='br1'/> чего Мария передала посылку<br class='br1'/> Егору и он её доставил." %}
+              {% translate "Аня с Олегом созвонились, обсудили условия и договорились о месте и времени передачи посылки." %}
             </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 <= 1000) {
+              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>
-  {############easy###############}
   <section class="easy">
     <div class="title">
-      {% translate "Один простой шаг, чтобы отправить посылку" %}
+      {% translate "Один простой шаг, чтобы взять с собой посылку" %}
     </div>
     <div class="subtitle">
       {% translate "Еще легче, чем писать в чаты и группы в социальных сетях" %}
@@ -94,18 +142,22 @@
     <div class="easy__grid">
       <div class="easy__item easy__item--fir">
         <h2>{% translate "Один простой шаг" %}</h2>
-        <p>{% translate "За пару кликов <b>размещаешь объявление</b> на нашем сайте, о том, что необходимо перевезти посылку, а также указываешь удобный способ связи." %}</p>
+        <p>{% translate "За пару кликов <b>размещаешь объявление</b> на нашем сайте, о том, что готов перевезти посылку, а также указываешь удобный способ связи." %}</p>
-        <img src="{% static 'img/webp/sender-card1.webp' %}" alt="sender1">
+        <img src="{% static 'img/png/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>
+        <p>{% translate "Люди, которым нужно отправить посылку по&nbsp;пути твоего следования, видят объявление и&nbsp;откликаются на&nbsp;него или связываются напрямую или оставляют отклики на&nbsp;него." %}</p>
-        <img src="{% static 'img/webp/sender-card2.webp' %}" alt="sender1">
+        <img src="{% static 'img/png/sender-card2.png' %}" alt="sender2">
       </div>
       <div class="easy__item easy__item--thr">
-        <p>{% translate "Тебе остаётся только выбрать перевозчика, связаться и&nbsp;обсудить детали перевозки." %}</p>
+        <p>{% translate "Выбираешь объявление отправителя, посылку которого ты&nbsp;готов перевезти, созваниваетесь или переписываетесь и&nbsp;обсуждаете условия и&nbsp;стоимость, а&nbsp;также удобное время и&nbsp;место для передачи посылки." %}</p>
-        <img src="{% static 'img/webp/sender-card3.webp' %}" alt="sender1">
+
+        <picture class="img">
+          <source srcset="{% static "img/png/sender-card3.png" %}" media="(min-width: 1439.98px)"/>
+          <img src="{% static 'img/png/sender-card3-md.png' %}" alt="sender3">
+        </picture>
 
       </div>
     </div>
@@ -114,10 +166,15 @@
     </div>
     <a href="#form" class="easy__btn btn btn--primary">{% translate "Разместить объявление" %}</a>
   </section>
-  {############use###############}
   <section class="use">
-    <div class="title">{% translate "Уже пользуются сайтом и находят перевозчиков" %}</div>
+    <div class="title">{% translate "Уже пользуются сайтом и находят посылки для перевозок" %}</div>
-    <img src="{% static "img/webp/use.webp" %}" alt="list users" class="use__img">
+    <picture class="img">
+      <source srcset="{% static "img/png/use-1720.png" %}" media="(min-width: 1720px)"/>
+      <source srcset="{% static "img/png/use-1280.png" %}" media="(min-width: 1304px)"/>
+      <source srcset="{% static "img/png/use-1120.png" %}" media="(min-width: 1280px)"/>
+      <source srcset="{% static "img/png/use-640.png" %}" media="(min-width: 768px)"/>
+      <img src="{% static "img/png/use-328.png" %}" alt="list users" class="use__img">
+    </picture>
     <div class="h3">
       {% translate "Нужно отправить посылку партнеру, родителям или знакомым?" %}
     </div>
@@ -125,111 +182,325 @@
     <br/>
     <a href="#registr" class="use__link">{% translate "Зарегистрироваться" %}</a>
   </section>
-  <section class="use use--diff">
+  <section class="diff">
     <div class="title">{% translate "Чем мы отличаемся от классических почтовых сервисов" %}</div>
-    <img src="{% static "img/webp/diff.webp" %}" alt="list differences" class="use__img">
+    <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">
     <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__slide">
-              <div class="chatterbox__vbtn"></div>
+            <div class="chatterbox__vbtn"></div>
-              <div class="chatterbox__wrap">
+            <div class="chatterbox__wrap">
-                <div class="chatterbox__vbox">
+              <div class="chatterbox__vbox">
-                  <img src="{{ MEDIA_URL }}{{ media_item.picture }}" alt="user" class="chatterbox__poster">
+                <img src="{{ MEDIA_URL }}{{ media_item.picture }}" alt="user" class="chatterbox__poster">
-                  <video
+                <video
-                      data-src="{{ MEDIA_URL }}{{ media_item.video }}"
+                    data-src="{{ MEDIA_URL }}{{ media_item.video }}"
-                      poster="{{ MEDIA_URL }}{{ media_item.picture }}"
+                    poster="{{ MEDIA_URL }}{{ media_item.picture }}"
-                      controls
+                    controls
-                      autoplay
+                    autoplay
-                  ></video>
+                ></video>
-                </div>
               </div>
             </div>
-    
+          </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>
+    <div class="chatterbox__mbtns show__md"></div>
+
     <script type="text/javascript">
-        $(document).ready(function () {
+      $(document).ready(function () {
-            $('.slick-slider').slick({
+        function handlerVideos() {
-                centerMode: true,
+          const vtns = $('.chatterbox__vbtn');
-                {#centerPadding: '160px',#}
+          if (!vtns.length) return;
-                slidesToShow: 3,
+          vtns.off('click.load-lazy').on('click.load-lazy', (e) => {
-                responsive: [
+            const vtn = e.target;
-                    {
+            console.log('!!!!!!!', vtn,)
-                        breakpoint: 768,
+            vtn.nextElementSibling.querySelector('video');
-                        settings: {
+            vtn.closest('.slick-slide').classList.contains('slick-current') &&
-                            arrows: false,
+            LazyLoad.load($(vtn).siblings().find('video')[0], {
-                            centerMode: true,
+              callback_loaded: (e) => callbackLoaded(e, vtn),
-                            centerPadding: '40px',
-                            slidesToShow: 3
-                        }
-                    },
-                    {
-                        breakpoint: 480,
-                        settings: {
-                            arrows: false,
-                            centerMode: true,
-                            centerPadding: '40px',
-                            slidesToShow: 1
-                        }
-                    }
-                ]
             });
-        });
+          });
+          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: {
+                  {#slidesToShow: 1,#}
+                  {#slidesToScroll: 1,#}
+                  draggable: true,
+                  appendArrows: $('.chatterbox__mbtns'),
+                },
+              },
+            ],
+          })
+            .on('beforeChange', function (event, slick, currentSlide, nextSlide) {
+              console.log([slick.$slides[currentSlide].querySelector('video')])
+              slick.$slides[currentSlide]?.querySelector('video')?.pause();
+              slick.$slides[nextSlide]?.querySelector('video')?.pause();
+
+
+              console.log('edge was hit', nextSlide, currentSlide, slick.$slides[currentSlide]);
+            });
+        }
+
+        handlerVideos();
+        initSlider();
+
+      });
     </script>
   </section>
+  <section class="use use--lett" id="rewiews">
+    <div class="title">{% translate "Что о нас пишут люди" %}</div>
+    <picture>
+      <source srcset="{% static "img/png/use-letters-1739.png" %}" media="(min-width: 1720px)"/>
+      <source srcset="{% static "img/png/use-letters-1280.png" %}" media="(min-width: 1304px)"/>
+      <source srcset="{% static "img/png/use-letters-1120.png" %}" media="(min-width: 1280px)"/>
+      <source srcset="{% static "img/png/use-letters-640.png" %}" media="(min-width: 768px)"/>
+      <img src="{% static "img/png/use-letters-328.png" %}" alt="list letters" class="use__img">
+    </picture>
+  </section>
+  <section class="animate left">
+    <div class="title">
+      {% translate "Хочешь отправить посылку партнеру, родным или знакомым людям быстро и недорого?" %}
+    </div>
+    <div class="subtitle">
+      {% translate "Зарегистрируйся на <a href='#' class='animate__link'>Trip With Bonus</a> прямо сейчас, размести бесплатно объявление и получи запросы на перевозку твоей посылки" %}
+    </div>
+    <a href="#form" 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 = 'translateX(0)';
+                  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/about-1720.png" %}" media="(min-width: 1720px)"/>
+        <source srcset="{% static "img/png/about-1280.png" %}" media="(min-width: 1304px)"/>
+        <source srcset="{% static "img/png/about-1120.png" %}" media="(min-width: 1280px)"/>
+        <source srcset="{% static "img/png/about-640.png" %}" media="(min-width: 768px)"/>
+        <img src="{% static "/img/png/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/benefits-1720.png" %}" media="(min-width: 1720px)"/>
+          <source srcset="{% static "img/png/benefits-1280.png" %}" media="(min-width: 1280px)"/>
+          <source srcset="{% static "img/png/benefits-1120.png" %}" media="(min-width: 1120px)"/>
+          <source srcset="{% static "img/png/benefits-640.png" %}" media="(min-width: 768px)"/>
+          <img src="{% static "/img/png/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="#form" 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/sore-1720.png" %}" media="(min-width: 1720px)"/>
+      <source srcset="{% static "img/png/sore-1280.png" %}" media="(min-width: 1304px)"/>
+      <source srcset="{% static "img/png/sore-1120.png" %}" media="(min-width: 1280px)"/>
+      <source srcset="{% static "img/png/sore-640.png" %}" media="(min-width: 768px)"/>
+      <img src="{% static "/img/png/sore-328.png" %}" alt="sore image" class="sore__img">
+    </picture>
+    <div class="h3">
+      {% translate "Зарегистрируйте бесплатно прямо сейчас и&nbsp;размести свое первое объявление об&nbsp;отправке посылки" %}
+    </div>
+    <a href="#form" class="sore__btn btn btn--primary">{% translate "Зарегистрироваться и разместить" %}</a>
+    <br/>
+    </div>
+  </section>
 {% endblock %}

templates/pages/p_mover_landing_page.html

@@ -45,7 +45,7 @@
         <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"/>
+            <img class="cards__img" src="{% static "img/webp/mover/image1.webp" %}" 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'/> посылку." %}
@@ -53,7 +53,7 @@
           </div>
           <div class="cards__item">
             <div class="cards__arrow"></div>
-            <img class="cards__img" src="{% static "img/webp/image2.webp" %}" alt="img1"/>
+            <img class="cards__img" src="{% static "img/webp/mover/image2.webp" %}" alt="img1"/>
             <p class="cards__desc">
 
               {% translate "Мария, узнаёт о нашем сервисе<br class='br--sm'/>" %}
@@ -63,13 +63,13 @@
           </div>
           <div class="cards__item">
             <div class="cards__arrow"></div>
-            <img class="cards__img" src="{% static "img/webp/image3.webp" %}" alt="img1"/>
+            <img class="cards__img" src="{% static "img/webp/mover/image3.webp" %}" 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/webp/image4.webp" %}" alt="img1"/>
+            <img class="cards__img" src="{% static "img/webp/mover/image4.webp" %}" 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>