TRI-283: add benefits animate about

static/css/moover.css

@@ -4,5 +4,8 @@
 @import url('./moover/easy.css');
 @import url('./moover/use.css');
 @import url('./moover/chatterbox.css');
+@import url('./moover/animate.css');
+@import url('./moover/about.css');
+@import url('./moover/benefits.css');
 
 

static/css/moover/about.css

@@ -0,0 +1,42 @@
+.about {
+  margin-bottom: 168px;
+}
+
+.about .title {
+  margin-bottom: 60px;
+}
+
+.about__grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  
+}
+
+.about__img {
+  box-shadow: inset 18.19px 1.21px 18.19px 0 #FFFFFFCC,
+  inset -18.19px -1.21px 18.19px 0 #4052801A,
+  48.5px 36.38px 36.38px 0 #6B7F9933;
+  border-radius: 31px;
+  margin-left: 8px;
+  margin-top: 8px;
+}
+
+.about__right {
+  text-align: left;
+  padding-top: 43px;
+  padding-left: 50px;
+}
+
+.about__half {
+  max-width: 50%;
+  float: left;
+}
+
+.about__half:last-child {
+  padding-left: 16px;
+  max-width: 47%;
+}
+
+.about b {
+  letter-spacing: 0.4px;
+}

static/css/moover/animate.css

@@ -0,0 +1,24 @@
+.animate {
+  padding: 60px 40px 49px;
+  opacity: 0;
+  transform: translateX(-180px);
+  background-color: var(--color-black2);
+  border-radius: 30px;
+  color: white;
+  margin-bottom: 160px;
+}
+
+.animate .title {
+  margin-bottom: 25px;
+  max-width: 87%;
+  /*width: 90%;*/
+}
+.animate .subtitle {
+  width: 47%;
+  margin: 0 auto 23px;
+}
+
+.animate__link {
+  color: var(--color-orange);
+  text-decoration: underline !important;
+}

static/css/moover/benefits.css

@@ -0,0 +1,37 @@
+.benefits {
+  /*padding: 0 50px;*/
+  
+}
+
+.benefits .title {
+  margin-bottom: 76px;
+}
+
+.benefits__grid {
+  text-align: left;
+  display: grid;
+  grid-template-columns: 1.5fr 3fr 1.5fr;
+}
+
+.benefits__col {
+
+}
+
+.benefits__item {
+  margin-bottom: 54px;
+  padding-right: 5px;
+}
+
+.benefits img {
+  position: relative;
+  top: 14px;
+  right: -11px;
+}
+
+.benefits__third {
+  padding-left: 16px;
+}
+
+.benefits__third .benefits__item {
+  margin-bottom: 22px;
+}

static/css/moover/chatterbox.css

@@ -1,4 +1,6 @@
-.chatterbox {}
+.chatterbox {
+  margin-bottom: 160px;
+}
 
 .chatterbox .title {
   margin-bottom: 60px;
@@ -52,6 +54,11 @@
   z-index: 1;
 }
 
+.slick-center .chatterbox__vbox video {
+  pointer-events: initial;
+  cursor: pointer;
+}
+
 .chatterbox__vbtn {
   position: absolute;
   left: 0;
@@ -63,10 +70,6 @@
   pointer-events: none;
 }
 
-.loaded .chatterbox__vbtn {
- display: none;
-}
-
 .chatterbox__vbtn::before {
   width: 20px;
   height: 20px;
@@ -113,5 +116,17 @@
 
 .chatterbox video {
   max-width: 100%;
+  opacity: 0;
+  transition: opacity 0.2s ease-in-out;
+  pointer-events: none;
+  
+}
+
+.loaded .chatterbox__vbtn {
+ display: none;
+}
+
+.loaded video {
+  opacity: 1;
 }
 

static/css/moover/easy.css

@@ -8,7 +8,7 @@
 }
 
 .easy .subtitle {
-  margin-bottom: 42px;
+  margin-bottom: 41px;
 }
 
 .easy__grid {
@@ -20,7 +20,7 @@
         'a  c';
   grid-column-gap: 20px;
   grid-row-gap: 80px;
-  margin-bottom: 48px;
+  margin-bottom: 46px;
 }
 
 .easy__item {

static/css/moover/presentation.css

@@ -22,11 +22,11 @@
 }
 
 .presentation__title {
-  margin-bottom: 21px;
+  margin-bottom: 23px;
 }
 
 .presentation__subtitle {
-  margin-bottom: 39px;
+  margin-bottom: 41px;
   font-weight: 600;
 }
 

static/css/moover/root.css

@@ -27,17 +27,23 @@
   --color-primary: #FF613A;
   --color-white: #FFFFFF;
   --color-black: #000000;
+  --color-black2: #272424;
   --color-grey: #F1F1F1;
   --color-grey2: #7A7979;
+  --color-orange: #FF613A;
+
+
   
   
   --box-shadow-primary: -1px 4px 10px 0 rgba(198, 199, 203, 0.20),
   0 -1px 10px 0 rgba(198, 199, 203, 0.20);
   text-align: center;
+  color: var(--color-black2);
 }
 
 .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
   font-weight: 700;
+
 }
 
 h1, .title {
@@ -68,6 +74,10 @@ p {
   margin-bottom: 20px;
 }
 
+b {
+  font-weight: 500;
+}
+
 
 .btn {
   display: inline-flex;
@@ -99,6 +109,7 @@ p {
 
 .subtitle {
   margin-bottom: 81px;
+  line-height: 22px;
 }
 
 .hide {

static/css/moover/use.css

@@ -18,22 +18,39 @@
 }
 
 .use__link {
-font-size: 18px;
-font-weight: 600;
-line-height: 26px;
-  color:var(--color-grey2);
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 26px;
+  color: var(--color-grey2);
 }
 
 .use.use--diff .title {
   width: 60%;
   margin-bottom: 60px;
 }
+
 .use.use--diff .use__img {
   width: 100%;
   margin-left: 0;
   margin-bottom: 17px;
 }
 
+.use.use--lett {
+  margin-bottom: 120px;
+}
+
+.use.use--lett .title {
+  margin-bottom: 51px;
+}
+
+.use.use--lett .use__img {
+  margin-left: -5px;
+  margin-right: -5px;
+  max-width: 110%;
+  width: 1290px;
+  
+}
+
 
 
 

static/css/slick.css

@@ -140,3 +140,7 @@
   right: 0;
   transform: rotate(180deg) translate(0, 50%);
 }
+
+.slick-disabled {
+  display: none !important;
+}

templates/pages/p_mover_landing_page.html

@@ -136,12 +136,15 @@
         {% for media_item in page.get_media_items %}
           <div class="slick-slide">
             <div class="chatterbox__slide">
-              <div class="chatterbox__vicon"></div>
+              <div class="chatterbox__vbtn"></div>
+          <div class="chatterbox__wrap">
+            <div class="chatterbox__vbox">
 
-              <video src="{{ MEDIA_URL }}{{ media_item.video }}"></video>
-
-            </div>
+              <video data-src="{{ MEDIA_URL }}{{ media_item.video }}" autoplay></video>
+ </div>
           </div>
+        </div>
+      </div>
       {% endfor %}
 {#      <div class="slick-slide">#}
 {#        <div class="chatterbox__slide">#}
@@ -203,8 +206,6 @@
     </div>
     <script type="text/javascript">
         $(document).ready(function () {
-            console.log('run');
-
             function handlerVideos() {
                 const vtns = $('.chatterbox__vbtn');
                 if (!vtns.length) return;
@@ -226,13 +227,14 @@
             }
 
             handlerVideos();
-
             $('.slick-slider')
                 .slick({
                     centerMode: true,
                     {#centerPadding: '160px',#}
                     slidesToShow: 3,
-                    lazyLoad: 'ondemand',
+                    infinite: false,
+                    initialSlide: 1,
+                    {#lazyLoad: 'ondemand',#}
                     {#lazyLoad: 'progressive',#}
                     responsive: [
                         {
@@ -259,15 +261,101 @@
                     slick.$slides[currentSlide]?.querySelector('video')?.pause();
                     console.log('edge was hit', slick.$slides[currentSlide]);
                 });
-
         });
     </script>
   </section>
+  <section class="use use--lett">
+    <div class="title">{% translate "Что о нас пишут люди" %}</div>
+    <img src="{% static "img/png/use-letterss.png" %}" alt="list letters" class="use__img">
+  </section>
+  <section class="animate">
+    <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.querySelector('.animate');
+                const observer = new IntersectionObserver(
+                    (entries, interserctionObserver) => {
+                        entries.forEach(entry => {
+                            console.log('or', entry)
+                            if (entry.isIntersecting) {
+                                const el = entry.target;
+                                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'},
+                );
+                observer.observe(animate);
+            }
+        )
+        ;
+    </script>
+  </section>
+  <section class="about">
+    <div class="title">{% translate "О сервисе Trip With Bonus" %}</div>
+    <div class="about__grid">
+      <img src="{% static "/img/png/about.png" %}" alt="" 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>
+{#    </div>#}
+  </section>
+
+  <section class="benefits">
+    <div class="title">{% translate "Преимущества сервиса" %}</div>
+    <div class="benefits__grid">
+      <div class="benefits__first benefits__col">
+        <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">
+        <img src="{% static "/img/png/benefits.png" %}" alt="benefits">
+      </div>
+      <div class="benefits__third benefits__col">
+        <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>
 
 
 
 
 
 
-
 {% endblock %}