TRI-283: вёрстка лендинга
This commit is contained in:
@@ -4,354 +4,221 @@
|
||||
|
||||
{% 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" >
|
||||
{% blocktrans %}
|
||||
Сервис попутных посылок
|
||||
{% endblocktrans %}
|
||||
</h1>
|
||||
<div class="presentation__subtitle">
|
||||
{% translate "Отправляй посылки с попутчиками в любую точку, быстро и недорого" %}
|
||||
</div>
|
||||
<button class="presentation__btn btn btn--primary">Узнать подробнее</button>
|
||||
<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"/>
|
||||
<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">
|
||||
<div class="presentation__title">
|
||||
<div class="presentation__bottom" id="howtowork">
|
||||
<div class="title">
|
||||
{% translate "Как это работает" %}
|
||||
</div>
|
||||
<p class="presentation__desc">
|
||||
<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 "Мария, хочет отправить посылку, но её не устраивает цена доставки почтовых сервисов и она устала искать в чатах тех, кто сможет перевезти посылку." %}
|
||||
{% 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 "Мария, узнаёт о нашем сервисе TripWB.com. Регистрируется и очень быстро размещает объявление." %}
|
||||
|
||||
{% 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 "Попутчик Егор увидел объявление Марии, нажал откликнуться и получил возможность связаться с ней, удобным для него способом." %}
|
||||
{% 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 "Мария и Егор обговорили детали доставки и потом встретились в удобном для всех месте. После чего Мария передала посылку Егору и он её доставил." %}
|
||||
{% 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="switch">#}
|
||||
{# <div><a class="active" href="#">Перевозчик</a></div>#}
|
||||
{# <div><a class="deadctive" href="#">Отправитель</a></div>#}
|
||||
{# </div>#}
|
||||
|
||||
<div class="subtitle">
|
||||
{% translate "Чтобы разместить объявление - зарегистрируйтесь" %}
|
||||
</div>
|
||||
<div class="presentaition__bottom search_form_main">
|
||||
<div class="cut-width">
|
||||
{% include "blocks/b_find_route_form.html" %}
|
||||
<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>
|
||||
</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>
|
||||
|
||||
<div class="switch">
|
||||
<div class="form_radio_btn">
|
||||
<input onclick="set_right_btn_owner_type(this)" class="btns_owner el_form_find_route" id="radio-1" type="radio"
|
||||
name="owner_type" value="mover" checked>
|
||||
<label for="radio-1">{% translate "Найти перевозчика" %}</label>
|
||||
</div>
|
||||
|
||||
<div class="form_radio_btn">
|
||||
<input onclick="set_right_btn_owner_type(this)" class="btns_owner el_form_find_route" id="radio-2" type="radio"
|
||||
name="owner_type" value="customer">
|
||||
<label for="radio-2">{% translate "Найти отправителя" %}</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="search_form_main">
|
||||
<div class="cut-width">
|
||||
{% include "blocks/b_find_route_form.html" %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mid_block_static">
|
||||
|
||||
<h2 id="title_static">{% translate "О сервисе Trip With Bonus" %}</h2>
|
||||
<span id="sub_title_static">
|
||||
<p>
|
||||
{% translate "TripWithBonus — это сервис, созданный для того, чтобы отправитель и перевозчик нашли друг-друга!" %}
|
||||
{% translate "Наш сервис предлагает вам прямые контакты, а не является посредником!" %}
|
||||
</p>
|
||||
</span>
|
||||
|
||||
|
||||
<div class="tabs">
|
||||
|
||||
<div class="wrapper_tab_button">
|
||||
<div
|
||||
class="tab-btn-1 tab-btn-active"
|
||||
onclick="showTabBtn(this)"
|
||||
>
|
||||
{% translate "Как отправить?" %}
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="tab-btn-2"
|
||||
onclick="showTabBtn(this)"
|
||||
>
|
||||
{% translate "Как перевезти?" %}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="content-1" class="show ">
|
||||
<h2 id="title_static">{% translate "Вам нужно отправить посылку быстро и недорого?" %}</h2>
|
||||
<div class="benefit_img">
|
||||
|
||||
<div class="benefit_img_item">
|
||||
<img src="/static/img/svg/Find_carrier.svg" alt="">
|
||||
<h3>{% translate "Найдите перевозчика" %}</h3>
|
||||
<span>{% translate "Зайдите на сайт Trip With Bonus и в форме вверху страницы, заполните данные для поиска перевозчика." %}</span>
|
||||
</div>
|
||||
|
||||
<img src="/static/img/svg/Arrow_direction.svg" alt="">
|
||||
|
||||
<div class="benefit_img_item">
|
||||
<img src="/static/img/svg/Contact_carrier.svg" alt="">
|
||||
<h3>{% translate "Свяжитесь с перевозчиком" %}</h3>
|
||||
<span>{% translate "Откройте контакты на сайте и договоритесь о месте встречи и условиях перевозки. В случае, если Вы не нашли объявления о перевозчиках по Вашему запросу, Вы можете разместить свое объявление воспользовавшись формой в личном кабинете." %}</span>
|
||||
</div>
|
||||
|
||||
<img src="/static/img/svg/Arrow_direction.svg" alt="">
|
||||
|
||||
<div class="benefit_img_item">
|
||||
<img src="/static/img/svg/Pass_package.svg" alt="">
|
||||
<h3>{% translate "Передайте посылку" %}</h3>
|
||||
<span>{% translate "Встречайтесь, знакомьтесь и передавайте посылку" %}</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="button_container">
|
||||
<a class="a_btn_standart"
|
||||
href="{% url 'profile_page' 'create_route_for_customer' %}"
|
||||
id="more_button">{% translate "Отправить посылку" %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div id="content-2">
|
||||
<h2 id="title_static">{% translate "Вы путешествуете и можете взять посылку по-пути?" %}</h2>
|
||||
<div class="benefit_img">
|
||||
|
||||
<div class="benefit_img_item">
|
||||
<img src="/static/img/svg/Find_carrier.svg" alt="">
|
||||
<h3>{% translate "Найдите отправителя" %}</h3>
|
||||
<span>{% translate "Зайдите на сайт Trip With Bonus и в форме вверху страницы, заполните данные для поиска отправителя посылки." %}</span>
|
||||
|
||||
</div>
|
||||
|
||||
<img src="/static/img/svg/Arrow_direction.svg" alt="">
|
||||
|
||||
<div class="benefit_img_item">
|
||||
<img src="/static/img/svg/Contact_carrier.svg" alt="">
|
||||
<h3>{% translate "Свяжитесь с отправителем" %}</h3>
|
||||
<span>{% translate "Откройте контакты на сайте и договоритесь о месте встречи и условиях перевозки. В случае, если Вы не нашли объявления об отправителях по Вашему запросу, Вы можете разместить свое объявление воспользовавшись формой в личном кабинете." %}</span>
|
||||
|
||||
</div>
|
||||
|
||||
<img src="/static/img/svg/Arrow_direction.svg" alt="">
|
||||
|
||||
<div class="benefit_img_item">
|
||||
<img src="/static/img/svg/Pass_package.svg" alt="">
|
||||
<h3>{% translate "Принимайте посылку" %}</h3>
|
||||
<span>{% translate "Встречайтесь, знакомьтесь и принимайте посылку" %}</span>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="button_container">
|
||||
<a class="a_btn_standart"
|
||||
href="{% url 'profile_page' 'create_route_for_mover' %}"
|
||||
id="more_button">{% translate "Перевезти посылку" %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="pre_bottom_block_static">
|
||||
<h2 id=title_static>{% translate "Trip With Bonus это комфорт и эффективность!" %}</h2>
|
||||
|
||||
<div class="cards_wrapper">
|
||||
<div class="cards_item_1">
|
||||
|
||||
<div class="cards_item_img">
|
||||
<img src="/static/img/png/cards_item_1.png" alt="">
|
||||
</div>
|
||||
|
||||
<div class="cards_item_text">
|
||||
<div class="card_title_1">{% translate "+5%" %}</div>
|
||||
<div class="card_title_2">{% translate "рост путешествий ежегодно" %}</div>
|
||||
<div
|
||||
class="card_title_3">{% translate "В среднем на 5% растёт количество путешествий ежегодно. Просто путешествуй и получай бонусы." %}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cards_item_2">
|
||||
|
||||
<div class="cards_item_img">
|
||||
<img src="/static/img/png/cards_item_2.png" alt="">
|
||||
</div>
|
||||
|
||||
<div class="cards_item_text">
|
||||
<div class="card_title_1">{% translate "в 3 раза" %}</div>
|
||||
<div class="card_title_2">{% translate "быстрее других сервисов" %}</div>
|
||||
<div
|
||||
class="card_title_3">{% translate "Почтовые сервисы доставляет посылки в среднем за 10 дней. С нами - быстрее!" %}</div>
|
||||
</div>
|
||||
|
||||
|
||||
{# <div class="card_gradient"></div>#}
|
||||
</div>
|
||||
<div class="cards_item_3">
|
||||
|
||||
<div class="cards_item_img">
|
||||
<img src="/static/img/png/cards_item_3.png" alt="">
|
||||
</div>
|
||||
|
||||
<div class="cards_item_text">
|
||||
<div class="card_title_1">{% translate "+142" %}</div>
|
||||
<div class="card_title_2">{% translate "заявки ежедневно" %}</div>
|
||||
<div class="card_title_3">{% translate "На перевозку или отправку посылок в разные уголки мира" %}</div>
|
||||
</div>
|
||||
|
||||
|
||||
{# <div class="cards_item_3_right">#}
|
||||
{# <div class="card_gradient"></div>#}
|
||||
{# </div>#}
|
||||
</div>
|
||||
<div class="cards_item_4">
|
||||
|
||||
<div class="cards_item_img">
|
||||
<img src="/static/img/png/cards_item_4.png" alt="">
|
||||
</div>
|
||||
|
||||
<div class="cards_item_text">
|
||||
<div class="card_title_1">{% translate "30+" %}</div>
|
||||
<div class="card_title_2">{% translate "стран" %}</div>
|
||||
<div class="card_title_3">{% translate "С TripWB отправляй посылки по всему миру! С нами нет границ!" %}</div>
|
||||
</div>
|
||||
|
||||
|
||||
{# <div class="cards_item_4_right">#}
|
||||
{# <div class="card_gradient_black"></div>#}
|
||||
{# </div>#}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
{% if page.get_FAQ_items %}
|
||||
<div class="faq_main_page">
|
||||
<h2 id=title_static>
|
||||
{% if page.FAQ_title %}{{ page.FAQ_title }}{% else %}{% translate "Частые вопросы" %}{% endif %}
|
||||
</h2>
|
||||
{% for faq_item in page.get_FAQ_items %}
|
||||
<details>
|
||||
<summary>{{ faq_item.question }}</summary>
|
||||
<p>{{ faq_item.answer }}</p>
|
||||
</details>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="news_block_main">
|
||||
<h2 class="ta_center" id=title_static>{% translate "Последние новости" %}</h2>
|
||||
{# {% for art in articles %}#}
|
||||
{##}
|
||||
{# <div class="news_item">#}
|
||||
{# <div class="news_img"><img src="{{ MEDIA_URL }}{{ art.picture }}" /></div>#}
|
||||
{# <div class="news_header">{{ art.name }}</div>#}
|
||||
{# <div class="news_description">#}
|
||||
{# {{ art.description|truncatechars:100 }}#}
|
||||
{# <div class="news_gradient"></div>#}
|
||||
{# </div>#}
|
||||
{# </div>#}
|
||||
{##}
|
||||
{# {% endfor %}#}
|
||||
{# <div class="three_pinned_news">#}
|
||||
<div class="news_block">
|
||||
{% for art in articles %}
|
||||
<a class="cont_one_news" href="{% url "article_one" art.url %}">
|
||||
<div class="cont_img_one_news">
|
||||
<img class="img_one_news" src="{{ MEDIA_URL }}{{ art.picture }}">
|
||||
</div>
|
||||
<div class="cont_content_one_news">
|
||||
<div class="container_name_one_news">
|
||||
{{ art.name|truncatechars:100 }}
|
||||
</div>
|
||||
<div class="container_descript_one_news">
|
||||
{{ art.description|truncatechars:100 }}
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
|
||||
{# {% url "article_one" art.url %}#}
|
||||
{# {{ MEDIA_URL }}{{ art.picture }}#}
|
||||
{# {{ art.description|truncatechars:100 }}#}
|
||||
|
||||
|
||||
{# </div>#}
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user