sysadminix/tripwithbonus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

TRI-283: add benefits animate about

Browse Source
This commit is contained in:
Artyom Pratsko
2024-11-15 21:00:27 +03:00
parent ad25cc67ec
commit f58038ab90
14 changed files with 264 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
templates/pages/p_mover_landing_page.html
View File

@@ -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 %}