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

TRI-283: вёрстка лендинга

Browse Source
This commit is contained in:
Artyom Pratsko
2024-11-14 21:05:15 +03:00
parent 9dd3fbe47d
commit 1151744247
21 changed files with 970 additions and 457 deletions
Download Patch File Download Diff File Expand all files Collapse all files

166
static/css/moover.css
View File

@@ -1,162 +1,8 @@
/*.container {*/
/* margin: 0 auto;*/
/* width: 1260px*/
/*}*/
/*@media (max-width: 1339.98px) {*/
/* .container {*/
/* width: 992px*/
/* }*/
/*}*/
/*@media (max-width: 1019.98px) {*/
/* .container {*/
/* width: 720px*/
/* }*/
/*}*/
/*@media (max-width: 767.98px) {*/
/* .container {*/
/* margin: 0 15px;*/
/* width: auto*/
/* }*/
/*}*/
:root {
--color-primary: #FF613A;
--color-white: #FFFFFF;
--color-black: #000000;
}
@import url('./moover/root.css');
@import url('./moover/presentation.css');
@import url('./moover/cards.css');
@import url('./moover/easy.css');
@import url('./moover/use.css');
@import url('./moover/chatterbox.css');
.btn {
display: inline-flex;
text-decoration: none;
color: black;
line-height: 22px;
border-radius: 10px;
padding: 20px 76px;
justify-content: center;
align-items: center;
margin: 0px 3px;
letter-spacing: 0.2px;
font-size: 18px;
}
.btn--primary {
background: var(--color-primary);
color: var(--color-white);
}
/***********************presentation******************************************/
.presentation {
text-align: center;
margin: 0 -65px 20px;
}
.presentation__top {
position: relative;
min-height: 270px;
margin: 0 auto 116px;
padding: 29px 0 40px;
background-image: url(/static/img/webp/Box9.webp),
url(/static/img/webp/Box10.webp),
url(/static/img/webp/Box11.webp),
url(/static/img/webp/Box12.webp);
background-position: top -6px left 27px,
top -29px right -37px,
bottom 70px left 258px,
bottom 67px right 252px;
background-repeat: no-repeat,
no-repeat,
no-repeat,
no-repeat;
}
.presentation__title {
font-size: 44px;
font-style: normal;
font-weight: 700;
line-height: 52px;
margin-bottom: 20px;
}
.presentation__subtitle {
text-align: center;
padding-left: 5px;
margin-bottom: 40px;
font-size: 18px;
font-weight: 600;
line-height: 26px;
}
.presentation__btn {
margin-bottom: 38px;
}
.presentation__next {
font-weight: 500;
line-height: 22px;
}
.presentation__arrows {
padding-top: 2px;
animation: jump 2s ease-in-out infinite;
}
.presentation__desc {
margin-bottom: 50px;
}
@keyframes jump {
0% {
transform: translateY(0px);
}
50% {
/*transform: translateY(20px);*/
transform: translateY(-5px);
}
60% {
transform: translateY(20px);
}
70% {
transform: translateY(0px);
}
80% {
transform: translateY(20px);
}
100% {
transform: translateY(0px);
}
}
/***********************cards*********************/
.cards {
}
.cards__list {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 5px;
}
.cards__item {
position: relative;
}
.cards__img {
}
.cards__desc {
}
.cards__arrow {
width: 62px;
height: 20px;
position: absolute;
right: -30px;
top: -13px;
background-image: url("/static/img/svg/Arrow23.svg");
}

34
static/css/moover/cards.css Normal file
View File

@@ -0,0 +1,34 @@
.cards {
}
.cards__list {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.cards__item {
position: relative;
}
.cards__img:hover {
scale: 1.05;
transition: scale 0.15s linear;
}
.cards__img {
margin-bottom: 5px;
}
.cards__desc {
font-weight: 500;
line-height: 22px;
}
.cards__arrow {
width: 62px;
height: 20px;
position: absolute;
right: -30px;
top: -21px;
background-image: url("/static/img/svg/Arrow23.svg");
}

90
static/css/moover/chatterbox.css Normal file
View File

@@ -0,0 +1,90 @@
.chatterbox {
}
.chatterbox .title {
margin-bottom: 60px;
}
.chatterbox__slider {
/*max-width: 977px;*/
max-width: 1200px;
margin: 0 auto;
}
.slick-slide {
/*padding: 50px;*/
}
.chatterbox__slide {
width: 335px;
height: 615px;
background: url("/static/img/webp/phone-border.webp") center no-repeat;
transition: scale 0.2s ease-in-out;
margin: auto;
position: relative;
}
.slick-slide:not(.slick-center) .chatterbox__slide {
scale: 0.72;
}
.slick-center .chatterbox__vicon {
opacity: 1;
}
.chatterbox__vicon {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
opacity: 0;
transition: opacity 0.2s ease-in-out;
}
.chatterbox__vicon::before {
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-primary);
border: 0;
border-radius: 50%;
transition: opacity 100ms linear;
}
.chatterbox__vicon::before {
width: 80px;
height: 80px;
}
.chatterbox__vicon::before, .chatterbox__vicon::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
cursor: pointer;
}
.chatterbox__vicon::after {
border-color: transparent transparent transparent #ffffff;
border-style: solid;
border-width: 15px 0 15px 25px;
display: inline-block;
margin-left: 2px;
}
.chatterbox .slick-next {
right: -40px;
}
.chatterbox .slick-prev {
left: -40px;
}

105
static/css/moover/easy.css Normal file
View File

@@ -0,0 +1,105 @@
.easy {
margin-bottom: 162px;
}
.easy .title {
max-width: 55%;
margin-bottom: 21px;
}
.easy .subtitle {
margin-bottom: 42px;
}
.easy__grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: repeat(2, minmax(186px, auto));
grid-template-areas:
'a b'
'a c';
grid-column-gap: 20px;
grid-row-gap: 80px;
margin-bottom: 48px;
}
.easy__item {
border-radius: 30px;
background-color: var(--color-grey);
/*background-color: #a72525;*/
text-align: left;
padding: 21px;
box-shadow: var(--box-shadow-primary);
}
.easy__item--fir {
grid-area: a;
margin-right: 60px;
padding-bottom: 0;
}
.easy__item--fir p {
width: 93%;
margin-bottom: 29px;
}
.easy__item--sec img {
margin-bottom: -10px;
margin-right: -5px;
}
.easy__item--thr img {
margin-bottom: -10px;
margin-right: 24px;
}
.easy__item--sec {
grid-area: b;
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
}
.easy__item--sec p,
.easy__item--thr p,
.easy__item--sec,
.easy__item--thr {
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
}
.easy__item--thr {
grid-area: c;
display: flex;
align-items: center;
justify-content: space-between;
}
.easy__item--thr p {
max-width: 50%;
}
.easy__arrow {
width: 68px;
height: 18px;
background-image: url("/static/img/svg/Arrow08.svg");
position: absolute;
z-index: 1;
}
.easy__arrow--fir {
top: 46%;
right: 101%;
}
.easy__arrow--sec {
top: 117%;
left: 30%;
transform: rotate(90deg);
}
.easy__btn {
margin-top: -21px;
}

76
static/css/moover/presentation.css Normal file
View File

@@ -0,0 +1,76 @@
.presentation {
margin: 20px -65px 140px;
}
.presentation__top {
position: relative;
min-height: 270px;
margin: 0 auto 116px;
padding: 29px 0 40px;
background-image: url(/static/img/webp/Box9.webp),
url(/static/img/webp/Box10.webp),
url(/static/img/webp/Box11.webp),
url(/static/img/webp/Box12.webp);
background-position: top -5px left 44px,
top -30px right -15px,
bottom 70px left 276px,
bottom 67px right 274px;
background-repeat: no-repeat,
no-repeat,
no-repeat,
no-repeat;
}
.presentation__title {
margin-bottom: 21px;
}
.presentation__subtitle {
margin-bottom: 39px;
font-weight: 600;
}
.presentation__btn {
margin-bottom: 40px;
}
.presentation__next {
font-weight: 500;
line-height: 22px;
padding-right: 5px;
}
.presentation__arrows {
padding-top: 2px;
animation: jump 2s ease-in-out infinite;
}
@keyframes jump {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-5px);
}
60% {
transform: translateY(20px);
}
70% {
transform: translateY(0px);
}
80% {
transform: translateY(20px);
}
100% {
transform: translateY(0px);
}
}
.presentation__bottom .presentation__title {
margin-bottom: 13px;
}
.presentation__cards {
max-width: 1300px;
margin: 0 auto;
}

102
static/css/moover/root.css Normal file
View File

@@ -0,0 +1,102 @@
.container {
margin: 0 auto;
max-width: 1280px;
position: relative;
min-height: 695px;
}
/*@media (max-width: 1339.98px) {*/
/* .container {*/
/* width: 992px*/
/* }*/
/*}*/
/*@media (max-width: 1019.98px) {*/
/* .container {*/
/* width: 720px*/
/* }*/
/*}*/
/*@media (max-width: 767.98px) {*/
/* .container {*/
/* margin: 0 15px;*/
/* width: auto*/
/* }*/
/*}*/
:root {
--color-primary: #FF613A;
--color-white: #FFFFFF;
--color-black: #000000;
--color-grey: #F1F1F1;
--color-grey2: #7A7979;
--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;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
font-weight: 700;
}
h1, .title {
font-size: 44px;
line-height: 52px;
}
h2, .h2 {
font-size: 24px;
line-height: 36px;
margin-bottom: 10px;
}
h3, .h3 {
font-size: 20px;
line-height: 28px;
margin-bottom: 12px;
}
h4, .h4 {
font-size: 18px;
line-height: 26px;
margin-bottom: 20px;
}
p {
line-height: 22px;
margin-bottom: 20px;
}
.btn {
display: inline-flex;
text-decoration: none;
color: black;
line-height: 22px;
border-radius: 10px;
padding: 20px 76px 18px;
justify-content: center;
align-items: center;
margin: 0 3px;
letter-spacing: 0.2px;
font-size: 18px;
}
.btn--primary {
background: var(--color-primary);
color: var(--color-white);
}
.title {
font-size: 44px;
font-weight: 700;
line-height: 52px;
margin-bottom: 13px;
margin-left: auto;
margin-right: auto;
}
.subtitle {
margin-bottom: 81px;
}

41
static/css/moover/use.css Normal file
View File

@@ -0,0 +1,41 @@
.use {
margin-bottom: 123px;
}
.use .title {
max-width: 80%;
margin-bottom: 49px;
}
.use__img {
width: 67.5%;
margin-left: 16px;
margin-bottom: 31px;
}
.use__btn {
margin-bottom: 11px;
}
.use__link {
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;
}

204
static/css/slick-theme.css Normal file
View File

@@ -0,0 +1,204 @@
@charset 'UTF-8';
/* Slider */
.slick-loading .slick-list
{
background: #fff url('./ajax-loader.gif') center center no-repeat;
}
/* Icons */
@font-face
{
font-family: 'slick';
font-weight: normal;
font-style: normal;
src: url('./fonts/slick.eot');
src: url('./fonts/slick.eot?#iefix') format('embedded-opentype'), url('./fonts/slick.woff') format('woff'), url('./fonts/slick.ttf') format('truetype'), url('./fonts/slick.svg#slick') format('svg');
}
/* Arrows */
.slick-prev,
.slick-next
{
font-size: 0;
line-height: 0;
position: absolute;
top: 50%;
display: block;
width: 20px;
height: 20px;
padding: 0;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
cursor: pointer;
color: transparent;
border: none;
outline: none;
background: transparent;
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus
{
color: transparent;
outline: none;
background: transparent;
}
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before
{
opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before
{
opacity: .25;
}
.slick-prev:before,
.slick-next:before
{
font-family: 'slick';
font-size: 20px;
line-height: 1;
opacity: .75;
color: white;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.slick-prev
{
left: -25px;
}
[dir='rtl'] .slick-prev
{
right: -25px;
left: auto;
}
.slick-prev:before
{
content: '←';
}
[dir='rtl'] .slick-prev:before
{
content: '→';
}
.slick-next
{
right: -25px;
}
[dir='rtl'] .slick-next
{
right: auto;
left: -25px;
}
.slick-next:before
{
content: '→';
}
[dir='rtl'] .slick-next:before
{
content: '←';
}
/* Dots */
.slick-dotted.slick-slider
{
margin-bottom: 30px;
}
.slick-dots
{
position: absolute;
bottom: -25px;
display: block;
width: 100%;
padding: 0;
margin: 0;
list-style: none;
text-align: center;
}
.slick-dots li
{
position: relative;
display: inline-block;
width: 20px;
height: 20px;
margin: 0 5px;
padding: 0;
cursor: pointer;
}
.slick-dots li button
{
font-size: 0;
line-height: 0;
display: block;
width: 20px;
height: 20px;
padding: 5px;
cursor: pointer;
color: transparent;
border: 0;
outline: none;
background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus
{
outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before
{
opacity: 1;
}
.slick-dots li button:before
{
font-family: 'slick';
font-size: 6px;
line-height: 20px;
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
content: '•';
text-align: center;
opacity: .25;
color: black;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before
{
opacity: .75;
color: black;
}

142
static/css/slick.css Normal file
View File

@@ -0,0 +1,142 @@
/* Slider */
.slick-slider {
position: relative;
display: block;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
.slick-list {
position: relative;
display: block;
overflow: hidden;
margin: 0;
padding: 0;
}
.slick-list:focus {
outline: none;
}
.slick-list.dragging {
cursor: pointer;
cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.slick-track {
position: relative;
top: 0;
left: 0;
display: block;
margin-left: auto;
margin-right: auto;
}
.slick-track:before,
.slick-track:after {
display: table;
content: '';
}
.slick-track:after {
clear: both;
}
.slick-loading .slick-track {
visibility: hidden;
}
.slick-slide {
display: none;
float: left;
height: 100%;
min-height: 1px;
}
[dir='rtl'] .slick-slide {
float: right;
}
.slick-slide img {
display: block;
}
.slick-slide.slick-loading img {
display: none;
}
.slick-slide.dragging img {
pointer-events: none;
}
.slick-initialized .slick-slide {
display: block;
}
.slick-loading .slick-slide {
visibility: hidden;
}
.slick-vertical .slick-slide {
display: block;
height: auto;
border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
display: none;
}
.slick-prev, .slick-next {
font-size: 0;
line-height: 0;
position: absolute;
top: 50%;
display: block;
width: 80px;
height: 80px;
padding: 0;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
cursor: pointer;
color: transparent;
outline: none;
background: transparent;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 1px solid var(--color-primary);
outline: 0;
border-radius: 50%;
box-sizing: border-box;
text-indent: -9999px;
z-index: 1;
background: var(--color-primary) url("/static/img/svg/slick-arrow.svg") no-repeat center;
transition: background-color .2s ease-in-out;
}
.slick-next {
right: 0;
transform: rotate(180deg) translate(0, 50%);
}

3
static/img/svg/Arrow08.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="68" height="18" viewBox="0 0 68 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M54.5455 2.94981C52.766 1.91497 50.7812 0.832029 50.1346 0.543456C48.2971 -0.276928 46.5619 -0.157082 46.0488 0.825723C45.351 2.16215 46.6527 3.4895 50.8124 5.68494C52.8468 6.75803 54.4597 7.6888 54.3974 7.75267C54.2493 7.90445 35.6219 5.73738 28.188 4.70333C25.0146 4.26219 18.1492 3.28688 12.9317 2.53588C7.71422 1.78488 2.84561 1.17067 2.11246 1.17067C0.627678 1.17067 -0.472054 2.11365 0.203789 2.80631C1.35891 3.99017 43.0138 10.8158 56.6476 12.0552L59.7199 12.3347L58.0351 13.068C55.8895 14.0019 52.6137 16.4548 52.6137 17.1277C52.6137 18.5099 56.4795 18.2249 61.8455 16.4473C66.0379 15.0585 68 13.4902 68 11.5286C68 9.87083 66.8087 8.92115 61.9936 6.7399C59.6768 5.69008 56.3249 3.98465 54.5455 2.94981Z" fill="#FF613A" fill-opacity="0.8"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 860 B

3
static/img/svg/slick-arrow.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="24" height="44" viewBox="0 0 24 44" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M22 42L2 22L22 2" stroke="white" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 211 B

BIN
static/img/webp/diff.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

BIN
static/img/webp/image2.webp
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 13 KiB

BIN
static/img/webp/phone-border.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
static/img/webp/sender-card1.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
static/img/webp/sender-card2.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
static/img/webp/sender-card3.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.4 KiB

BIN
static/img/webp/use.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 851 KiB

1
static/js/slick.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

453
templates/pages/p_mover_landing_page.html
View File

@@ -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 "Попутчики видят твое объявление и&nbsp;оставляют отклики на&nbsp;него." %}</p>
<img src="{% static 'img/webp/sender-card2.webp' %}" alt="sender1">
</div>
<div class="easy__item easy__item--thr">
<p>{% translate "Тебе остаётся только выбрать перевозчика, связаться и&nbsp;обсудить детали перевозки." %}</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 %}

7
templates/tb_base.html
View File

@@ -213,7 +213,7 @@ function gtag_report_conversion(url) {
</div>
</div>
{% endif %}
<div class="wrapper_content {% if page.url == 'customer_service'%} m_h_0 {% elif page.url == 'contacts' %}m_h_0{% elif request.path == '/test_404' %}m_h_0{% endif %}">
<div class="{% if page.url == "landing_mover" %}container{% else %}wrapper_content{% endif %} {% if page.url == 'customer_service'%} m_h_0 {% elif page.url == 'contacts' %}m_h_0{% elif request.path == '/test_404' %}m_h_0{% endif %}">
{% block content %}
{% endblock %}
@@ -232,8 +232,7 @@ function gtag_report_conversion(url) {
}
document.cookie = "user_tz=" + tz + ";path=/";
</script>
{% block before_close %}
{% endblock %}
</body>
</body>
</html>