443 lines
22 KiB
HTML
443 lines
22 KiB
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 %}
|
||
<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>
|
||
<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 "Попутчики видят твое объявление и оставляют отклики на него." %}</p>
|
||
<img src="{% static 'img/webp/sender-card2.webp' %}" alt="sender1">
|
||
</div>
|
||
<div class="easy__item easy__item--thr">
|
||
<p>{% translate "Тебе остаётся только выбрать перевозчика, связаться и обсудить детали перевозки." %}</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>
|
||
<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__vbtn"></div>#}
|
||
{# <div class="chatterbox__wrap">#}
|
||
{# <div class="chatterbox__vbox">#}
|
||
{##}
|
||
{# <video data-src="{{ MEDIA_URL }}{{ media_item.video }}" autoplay></video>#}
|
||
{# </div>#}
|
||
{# </div>#}
|
||
{# </div>#}
|
||
{# </div>#}
|
||
{# {% endfor %}#}
|
||
<div class="slick-slide">
|
||
<div class="chatterbox__slide">
|
||
<div class="chatterbox__vbtn"></div>
|
||
<div class="chatterbox__wrap">
|
||
<div class="chatterbox__vbox">
|
||
<img src="/media/media_items/image/ava1.jpg" alt="user" class="chatterbox__poster">
|
||
<video
|
||
data-src="/media/media_items/video/1.mp4"
|
||
poster="/media/media_items/image/ava1.jpg"
|
||
controls
|
||
autoplay
|
||
></video>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="slick-slide">
|
||
<div class="chatterbox__slide">
|
||
<div class="chatterbox__vbtn"></div>
|
||
<div class="chatterbox__wrap">
|
||
<div class="chatterbox__vbox">
|
||
<img src="/media/media_items/image/ava2.jpg" alt="user" class="chatterbox__poster">
|
||
<video
|
||
data-src="/media/media_items/video/2.mp4"
|
||
poster="/media/media_items/image/ava2.jpg"
|
||
controls
|
||
autoplay
|
||
></video>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="slick-slide">
|
||
<div class="chatterbox__slide">
|
||
<div class="chatterbox__vbtn"></div>
|
||
<div class="chatterbox__wrap">
|
||
<div class="chatterbox__vbox">
|
||
<img src="/media/media_items/image/ava3.jpg" alt="user" class="chatterbox__poster">
|
||
<video
|
||
data-src="/media/media_items/video/3.mp4"
|
||
poster="/media/media_items/image/ava3.jpg"
|
||
controls
|
||
autoplay
|
||
>
|
||
</video>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="slick-slide">
|
||
<div class="chatterbox__slide">
|
||
<div class="chatterbox__vbtn"></div>
|
||
<div class="chatterbox__wrap">
|
||
<div class="chatterbox__vbox">
|
||
<img src="/media/media_items/image/ava1.jpg" alt="user" class="chatterbox__poster">
|
||
<video
|
||
data-src="/media/media_items/video/4.mp4"
|
||
poster="/media/media_items/image/ava1.jpg"
|
||
controls
|
||
autoplay
|
||
>
|
||
</video>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="slick-slide">
|
||
<div class="chatterbox__slide">
|
||
<div class="chatterbox__vbtn"></div>
|
||
<div class="chatterbox__wrap">
|
||
<div class="chatterbox__vbox">
|
||
<img src="/media/media_items/image/ava2.jpg" alt="user" class="chatterbox__poster">
|
||
<video
|
||
data-src="/media/media_items/video/5.mp4"
|
||
poster="/media/media_items/image/ava2.jpg"
|
||
controls
|
||
autoplay
|
||
>
|
||
</video>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</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;
|
||
vtn.nextElementSibling.querySelector('video');
|
||
window.d = vtn;
|
||
{#console.log($(vtn).siblings().find('video')[0]);#}
|
||
{#console.log(vtn, e.target)#}
|
||
LazyLoad.load($(vtn).siblings().find('video')[0], {
|
||
callback_loaded: (e) => callbackLoaded(e, vtn),
|
||
});
|
||
});
|
||
const callbackLoaded = function (elm, vtn) {
|
||
vtn.classList.add('hide');
|
||
const imgWrap = elm.closest('.chatterbox__slide');
|
||
imgWrap?.classList.add('loaded');
|
||
};
|
||
}
|
||
|
||
handlerVideos();
|
||
$('.slick-slider')
|
||
.slick({
|
||
centerMode: true,
|
||
{#centerPadding: '160px',#}
|
||
slidesToShow: 3,
|
||
infinite: false,
|
||
initialSlide: 1,
|
||
{#lazyLoad: 'ondemand',#}
|
||
{#lazyLoad: 'progressive',#}
|
||
responsive: [
|
||
{
|
||
breakpoint: 768,
|
||
settings: {
|
||
arrows: false,
|
||
centerMode: true,
|
||
centerPadding: '40px',
|
||
slidesToShow: 3
|
||
}
|
||
},
|
||
{
|
||
breakpoint: 480,
|
||
settings: {
|
||
arrows: false,
|
||
centerMode: true,
|
||
centerPadding: '40px',
|
||
slidesToShow: 1
|
||
}
|
||
}
|
||
]
|
||
})
|
||
.on('beforeChange', function (event, slick, currentSlide, nextSlide) {
|
||
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 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">
|
||
<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 - это сервис попутных посылок, который <b>соединяет отправителя посылки</b> того, кому нужно что-то передать в другой город или страну, и <b>перевозчика посылки</b>, а именно попутчика или путешественника, который следует по пути назначения." %}</p>
|
||
<p>{% translate "<b>Тебе не нужно больше бежать в чаты и группы</b> в социальных сетях и искать тех, кто сможет перевезти посылку, а достаточно просто зайти на сайт, разместить объявление в пару кликов и дождаться откликов от попутчиков." %}
|
||
<p class="about__half">{% translate "Мы <b>не являемся почтовым сервисом</b>, т.к. мы не доставляем посылки, а только даем возможность отправителю и перевозчику найти друг друга." %}</p>
|
||
<p class="about__half">{% translate "Если не хочешь размещать объявление и ждать, то можешь <b>самостоятельно на нашем сайте найти перевозчика</b> через удобную систему поиска" %}</p>
|
||
</div>
|
||
</div>
|
||
{# </div>#}
|
||
</section>
|
||
<section class="benefits">
|
||
<div class="title">{% translate "Преимущества сервиса" %}</div>
|
||
<div class="benefits__grid">
|
||
<div class="benefits__first">
|
||
<div class="benefits__item">
|
||
<h2>{% translate "Прямой контакт" %}</h2>
|
||
<p>{% translate "Общаешься напрямую с перевозчиком, никаких посредников" %}</p>
|
||
</div>
|
||
<div class="benefits__item">
|
||
<h2>{% translate "Своя цена" %}</h2>
|
||
<p>{% translate "Стоимость перевозки самостоятельно обговариваете с перевозчиком." %}</p>
|
||
</div>
|
||
<div class="benefits__item">
|
||
<h2>{% translate "Нет доп. расходов" %}</h2>
|
||
<p>{% translate "Никаких комиссий, переплат и дополнительных расходов за отправку." %}</p>
|
||
</div>
|
||
</div>
|
||
<div class="benefits__second">
|
||
<img src="{% static "/img/png/benefits.png" %}" alt="benefits">
|
||
</div>
|
||
<div class="benefits__third">
|
||
<div class="benefits__item">
|
||
<h2>{% translate "Уведомления" %}</h2>
|
||
<p>{% translate "Можешь самостоятельно найти перевозчиков или разместить объявление на сайте." %}</p>
|
||
</div>
|
||
<div class="benefits__item">
|
||
<h2>{% translate "Удобный поиск" %}</h2>
|
||
<p>{% translate "Как только по твоему объявлению найдется перевозчик мы сообщим на E-mail." %}</p>
|
||
</div>
|
||
<div class="benefits__item">
|
||
<h2>{% translate "Экономия времени" %}</h2>
|
||
<p>{% translate "Не нужно искать группы, чаты, и кидать «клич», а просто достаточно разместить объявление на сайте." %}</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">
|
||
<div class="uses__desc">
|
||
{% translate "Когда нужно отправить документы партнеру или родственнику" %}
|
||
</div>
|
||
</div>
|
||
<div class="uses__item">
|
||
<img class="uses__icon" src="{% static "img/svg/box.svg" %}" alt="image icon">
|
||
<div class="uses__desc">
|
||
{% translate "Когда необходимо отправить посылку в другую страну" %}
|
||
</div>
|
||
</div>
|
||
<div class="uses__item">
|
||
<img class="uses__icon" src="{% static "img/svg/present.svg" %}" alt="image icon">
|
||
<div class="uses__desc">
|
||
{% translate "Когда нужно отправить подарок семье, друзьям или знакомым" %}
|
||
</div>
|
||
</div>
|
||
<div class="uses__item">
|
||
<img class="uses__icon" src="{% static "img/svg/bax.svg" %}" alt="image icon">
|
||
<div class="uses__desc">
|
||
{% translate "Когда стоимость пересылки через почтовый сервис высокая или перевозка занимает длительное время" %}
|
||
</div>
|
||
</div>
|
||
<div class="uses__item">
|
||
<img class="uses__icon" src="{% static "img/svg/books.svg" %}" alt="image icon">
|
||
<div class="uses__desc">
|
||
{% translate "Когда нужно отправить не только маленькую посылку, но и крупногабаритный груз" %}
|
||
</div>
|
||
</div>
|
||
<div class="uses__item">
|
||
<img class="uses__icon" src="{% static "img/svg/earth.svg" %}" alt="image icon">
|
||
<div class="uses__desc">
|
||
{% translate "Когда нет прямого сообщения из пункта А в пункт Б обычными сервисами доставки" %}
|
||
</div>
|
||
</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 "Мы знаем, каково это без конца и края закидывать сообщения в чаты и группы в социальных сетях, в надежде найти человека, который едет или летит в нужном направлении, чтобы передать посылоку своим родным или близким. Очень часто ещё и стоимость пересылки в обычных почтовых сервисах выше стоимости самой посылки." %}
|
||
</div>
|
||
<img src="{% static "img/png/sore2.png" %}" alt="sore image" class="sore__img">
|
||
<div class="h3">
|
||
{% translate "Зарегистрируйте бесплатно прямо сейчас и размести свое первое объявление об отправке посылки" %}
|
||
</div>
|
||
<a href="#form" class="sore__btn btn btn--primary">{% translate "Зарегистрироваться и разместить" %}</a>
|
||
<br/>
|
||
</div>
|
||
</section>
|
||
{% endblock %} |