@@ -0,0 +1,224 @@
{% 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 "Попутчики видят твое объявление и оставляют отклики на него." %}< / 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 >
{############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" >
< 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 >
< 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 %}