.gitignore

@@ -415,3 +415,7 @@ fabric.properties
 # Android studio 3.1+ serialized cache file
 .idea/caches/build_file_checksums.ser
 
+# packages for node
+package.json
+package-lock.json
+

BaseModels/base_models.py

@@ -29,12 +29,31 @@ class BaseModel(models.Model):
 
     json_data = models.JSONField(verbose_name=_('Дополнительные данные'), default=dict, blank=True)
 
+    media_items = GenericRelation('GeneralApp.MediaItem', related_query_name='grel_%(class)s_for_media_item')
+
     def __str__(self):
         if self.name:
             return self.name
         else:
             return str(self.id)
 
+    def get_media_items(self, exclude_kwargs=None):
+        if not exclude_kwargs:
+            exclude_kwargs = {}
+        return self.media_items.exclude(
+            **exclude_kwargs
+        ).filter(
+            enable=True
+        ).order_by('order')
+
+    def get_video_items(self):
+        exclude_kwargs = {'video': None}
+        return self.get_media_items(exclude_kwargs=exclude_kwargs)
+
+    def get_picture_items(self):
+        exclude_kwargs = {'picture': None}
+        return self.get_media_items(exclude_kwargs=exclude_kwargs)
+
     def pop_node_by_name(self, node_name):
         if not self.json_data or not node_name in self.json_data:
             return None
@@ -108,7 +127,6 @@ class BaseModelViewPage(BaseModel):
     FAQ_title = models.CharField(max_length=250, verbose_name=_(u'FAQ Заголовок'), null=True, blank=True)
     FAQ_items = GenericRelation('GeneralApp.FAQitem', related_query_name='grel_%(class)s_for_faq_item')
 
-
     class Meta:
         abstract = True
 

BillingApp/migrations/0006_alter_subscribeorder_currency.py

@@ -0,0 +1,18 @@
+# Generated by Django 4.2.2 on 2024-07-12 17:23
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('BillingApp', '0005_subscribeorder_last_operation_status'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='subscribeorder',
+            name='currency',
+            field=models.CharField(default='KZT', max_length=3, verbose_name='Валюта'),
+        ),
+    ]

GeneralApp/admin.py

@@ -3,6 +3,8 @@ from .models import *
 from django.contrib import admin
 from django.utils.translation import gettext as _
 
+
+
 class Admin_StaticPage(Admin_Trans_BaseModelViewPage):
 
     fieldsets = [

GeneralApp/migrations/0006_mediaitem.py

@@ -0,0 +1,41 @@
+# Generated by Django 4.2.2 on 2024-11-15 14:50
+
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('contenttypes', '0002_remove_content_type_name'),
+        ('GeneralApp', '0005_option_name_en_option_name_ru_option_prefix_en_and_more'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='MediaItem',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('name', models.TextField(blank=True, help_text='Название', null=True, verbose_name='Название')),
+                ('name_ru', models.TextField(blank=True, help_text='Название', null=True, verbose_name='Название')),
+                ('name_en', models.TextField(blank=True, help_text='Название', null=True, verbose_name='Название')),
+                ('name_plural', models.TextField(blank=True, null=True, verbose_name='Название (множественное число)')),
+                ('order', models.IntegerField(blank=True, null=True, verbose_name='Очередность отображения')),
+                ('createDT', models.DateTimeField(auto_now_add=True, verbose_name='Дата и время создания')),
+                ('modifiedDT', models.DateTimeField(blank=True, null=True, verbose_name='Дата и время последнего изменения')),
+                ('enable', models.BooleanField(db_index=True, default=True, verbose_name='Включено')),
+                ('json_data', models.JSONField(blank=True, default=dict, verbose_name='Дополнительные данные')),
+                ('object_id', models.PositiveIntegerField()),
+                ('picture', models.ImageField(blank=True, null=True, upload_to='media/', verbose_name='Фото')),
+                ('video', models.FileField(blank=True, null=True, upload_to='media/video/', verbose_name='Видео')),
+                ('comment', models.TextField(blank=True, null=True, verbose_name='Комментарий')),
+                ('comment_ru', models.TextField(blank=True, null=True, verbose_name='Комментарий')),
+                ('comment_en', models.TextField(blank=True, null=True, verbose_name='Комментарий')),
+                ('content_type', models.ForeignKey(null=True, on_delete=django.db.models.deletion.SET_NULL, to='contenttypes.contenttype')),
+            ],
+            options={
+                'verbose_name': 'Медиа элемент',
+                'verbose_name_plural': 'Медиа элементы',
+            },
+        ),
+    ]

GeneralApp/migrations/0007_alter_mediaitem_picture_alter_mediaitem_video.py

@@ -0,0 +1,23 @@
+# Generated by Django 4.2.2 on 2024-11-15 15:58
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('GeneralApp', '0006_mediaitem'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='mediaitem',
+            name='picture',
+            field=models.ImageField(blank=True, null=True, upload_to='uploads/', verbose_name='Фото'),
+        ),
+        migrations.AlterField(
+            model_name='mediaitem',
+            name='video',
+            field=models.FileField(blank=True, null=True, upload_to='uploads/video/', verbose_name='Видео'),
+        ),
+    ]

GeneralApp/migrations/0008_alter_mediaitem_picture_alter_mediaitem_video.py

@@ -0,0 +1,23 @@
+# Generated by Django 4.2.2 on 2024-11-15 15:59
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('GeneralApp', '0007_alter_mediaitem_picture_alter_mediaitem_video'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='mediaitem',
+            name='picture',
+            field=models.ImageField(blank=True, null=True, upload_to='media_items/photo/', verbose_name='Фото'),
+        ),
+        migrations.AlterField(
+            model_name='mediaitem',
+            name='video',
+            field=models.FileField(blank=True, null=True, upload_to='media_items/video/', verbose_name='Видео'),
+        ),
+    ]

GeneralApp/models.py

@@ -3,6 +3,26 @@ from BaseModels.base_models import BaseModelViewPage, BaseModel
 from django.utils.translation import gettext_lazy as _
 # from ckeditor.fields import RichTextField
 from ckeditor_uploader.fields import RichTextUploadingField
+from django.contrib.contenttypes.models import ContentType
+from django.contrib.contenttypes.fields import GenericForeignKey
+
+
+class MediaItem(BaseModel):
+
+    content_type = models.ForeignKey(ContentType, on_delete=models.SET_NULL, null=True)
+    object_id = models.PositiveIntegerField()
+    content_object = GenericForeignKey('content_type', 'object_id')
+
+    picture = models.ImageField(upload_to='media_items/photo/', verbose_name=_('Фото'), null=True, blank=True)
+    video = models.FileField(upload_to='media_items/video/', verbose_name=_('Видео'), null=True, blank=True)
+
+    comment = models.TextField(verbose_name=_('Комментарий'), null=True, blank=True)
+
+    class Meta:
+        verbose_name = _('Медиа элемент')
+        verbose_name_plural = _('Медиа элементы')
+
+
 
 class StaticPage(BaseModelViewPage):
     promo_header = models.BooleanField(verbose_name=_('Промо-хэдер'), default=False)
@@ -29,9 +49,6 @@ class Option(BaseModel):
 
 class FAQitem(BaseModel):
 
-    from django.contrib.contenttypes.models import ContentType
-    from django.contrib.contenttypes.fields import GenericForeignKey
-
     content_type = models.ForeignKey(ContentType, on_delete=models.SET_NULL, null=True)
     object_id = models.PositiveIntegerField()
     content_object = GenericForeignKey('content_type', 'object_id')

GeneralApp/translation.py

@@ -27,3 +27,9 @@ class FAQitem_TranslationOptions(TranslationOptions):
     )
 translator.register(FAQitem, FAQitem_TranslationOptions)
 
+class MediaItem_TranslationOptions(TranslationOptions):
+    fields = (
+        'name', 'comment',
+    )
+translator.register(MediaItem, MediaItem_TranslationOptions)
+

GeneralApp/urls.py

@@ -7,6 +7,9 @@ from .views import *
 urlpatterns = [
     path('', MainPage, name='main'),
     path('mover_landing_page/', LandingMoverPage, name='mover_landing_page'),
+    path('customer_landing_page/', LandingCustomerPage, name='customer_landing_page'),
+
+
     path('page/<str:url>/', StaticPageView, name='static_page'),
     path('test_code', test_code, name='test_code'),
     path('generate_routes/<int:routes_count>/', generate_routes, name='generate_routes'),

GeneralApp/views.py

@@ -73,7 +73,7 @@ def test_code(request):
 
     from RoutesApp.search_matches import search_matches
     from RoutesApp.models import Route
-    search_matches(Route.objects.filter(from_city__id=57062))
+    search_matches(Route.objects.filter(id=16))
 
     # from RoutesApp.funcs import get_city_by_type_transport_and_address_point
     # from RoutesApp.models import Route
@@ -172,6 +172,30 @@ def LandingMoverPage(request):
     return get_inter_http_response(t, Dict, request)
 
 
+def LandingCustomerPage(request):
+
+    from .init_options import init_options
+    init_options()
+
+
+    print(f'LOCALE_PATHS = {str(settings.LOCALE_PATHS)}')
+
+    page, is_created = StaticPage.objects.get_or_create(url='landing_customer')
+
+    Dict = {
+        'page': page,
+    }
+
+
+
+    breadcrumbs_Dict = {
+    }
+    Dict.update({'breadcrumbs': breadcrumbs_Dict})
+
+    t = loader.get_template('pages/p_customer_landing_page.html')
+    return get_inter_http_response(t, Dict, request)
+
+
 def MainPage(request):
     from RoutesApp.forms import RouteForm
 

RoutesApp/search_matches.py

@@ -116,10 +116,11 @@ def search_matches(for_routes=None):
                         kwargs.update({f"{field_name}__date": field_val.date()})
                     elif field_name == 'weight':
                         # print(field_name)
-                        params.update({f"{field_name}": field_val})
                         if route.owner_type == 'mover':
+                            # params.update({f"{field_name}__lte": field_val})
                             kwargs.update({f"{field_name}__lte": field_val})
                         else:
+                            # params.update({f"{field_name}__gte": field_val})
                             kwargs.update({f"{field_name}__gte": field_val})
                     elif field_name == 'from_city':
                         params.update({'from_address_point': field_val.id})

sets/admin.py

@@ -1,6 +1,10 @@
-from BaseModels.admin_utils import Admin_GenericBaseIconStackedInline, Admin_BaseIconModel, GenericStackedInline
+from BaseModels.admin_utils import (
+    Admin_GenericBaseIconStackedInline, Admin_BaseIconModel, GenericStackedInline,
+    AdminImageWidget, get_image_thumb
+)
 from copy import deepcopy
-
+from django.db import models
+from django.utils.translation import gettext as _
 
 
 class Admin_BaseModel(Admin_BaseIconModel):
@@ -86,12 +90,17 @@ class AdminTranslationBase(TranslationAdmin):
             'screen': ('modeltranslation/css/tabbed_translation_fields.css',),
         }
 
-from modeltranslation.admin import TranslationGenericStackedInline
-class AdminStacked_FAQitem(TranslationGenericStackedInline):
-    from GeneralApp.models import FAQitem
-    model = FAQitem
-    extra = 0
-    fields = ['order', 'question', 'answer']
+from modeltranslation.admin import TranslationGenericStackedInline, TranslationGenericTabularInline
+class TranslationGenericTabularInlineCustom(TranslationGenericTabularInline):
+    formfield_overrides = {
+        models.ImageField: {'widget': AdminImageWidget},
+    }
+
+    def image_thumb(self, obj):
+        return get_image_thumb(self, obj)
+
+    image_thumb.short_description = _('Миниатюра')
+    image_thumb.allow_tags = True
 
     class Media:
 
@@ -105,6 +114,46 @@ class AdminStacked_FAQitem(TranslationGenericStackedInline):
             'screen': ('modeltranslation/css/tabbed_translation_fields.css',),
         }
 
+class TranslationGenericStackedInlineCustom(TranslationGenericStackedInline):
+    formfield_overrides = {
+        models.ImageField: {'widget': AdminImageWidget},
+    }
+
+    def image_thumb(self, obj):
+        return get_image_thumb(self, obj)
+
+    image_thumb.short_description = _('Миниатюра')
+    image_thumb.allow_tags = True
+
+    class Media:
+
+        js = (
+            'modeltranslation/js/force_jquery.js',
+            'http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js',
+            'http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js',
+            'modeltranslation/js/tabbed_translation_fields.js',
+        )
+        css = {
+            'screen': ('modeltranslation/css/tabbed_translation_fields.css',),
+        }
+
+
+class AdminStacked_FAQitem(TranslationGenericStackedInlineCustom):
+    from GeneralApp.models import FAQitem
+    model = FAQitem
+    extra = 0
+    fields = ['order', 'question', 'answer']
+
+
+
+class AdminTabular_Mediaitem(TranslationGenericTabularInlineCustom):
+    from GeneralApp.models import MediaItem
+    model = MediaItem
+    extra = 0
+    fields = ['order', 'video', 'picture']
+
+
+
 class Admin_BaseModelViewPage(Admin_BaseIconModel):
     pass
     # def get_fieldsets(self, request, obj=None):
@@ -129,7 +178,7 @@ class Admin_BaseModelViewPage(Admin_BaseIconModel):
     #     else:
     #         return {}
     #
-    inlines = [AdminStacked_FAQitem]
+    inlines = [AdminStacked_FAQitem, AdminTabular_Mediaitem]
 
 
 

static/css/moover.css

@@ -1,20 +1,21 @@
-/*.container {*/
-/*  margin: 0 auto;*/
-/*  width: 1260px*/
-/*}*/
+.container {
+  margin: 0 auto;
+  width: 1280px;
+  position: relative;
+  min-height: 695px;
+}
 
-/*@media (max-width: 1339.98px) {*/
-/*  .container {*/
-/*    width: 992px*/
-/*  }*/
-/*}*/
+@media (min-width: 1720px) {
+  .container {
+    width: 1720px;
+  }
+}
 
 /*@media (max-width: 1019.98px) {*/
 /*  .container {*/
 /*    width: 720px*/
 /*  }*/
 /*}*/
-
 /*@media (max-width: 767.98px) {*/
 /*  .container {*/
 /*    margin: 0 15px;*/
@@ -25,8 +26,58 @@
   --color-primary: #FF613A;
   --color-white: #FFFFFF;
   --color-black: #000000;
+  --color-black2: #272424;
+  --color-grey: #F1F1F1;
+  --color-grey2: #7A7979;
+  --color-orange: #FF613A;
+  --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;
+  color: var(--color-black2);
 }
 
+.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
+  font-weight: 700;
+}
+
+h1, .h1 {
+  font-size: 44px;
+  line-height: 52px;
+}
+
+@media (min-width: 1720px) {
+  h1, .h1 {
+    font-size: 48px;
+    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;
+}
+
+b {
+  font-weight: 500;
+}
 
 .btn {
   display: inline-flex;
@@ -34,12 +85,11 @@
   color: black;
   line-height: 22px;
   border-radius: 10px;
-  padding: 20px 76px;
+  padding: 20px 76px 18px;
   justify-content: center;
   align-items: center;
-  margin: 0px 3px;
+  margin: 0 3px;
   letter-spacing: 0.2px;
-  
   font-size: 18px;
 }
 
@@ -48,11 +98,53 @@
   color: var(--color-white);
 }
 
-/***********************presentation******************************************/
+.title {
+  font-size: 44px;
+  font-weight: 700;
+  line-height: 52px;
+  margin-bottom: 13px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+@media (min-width: 1720px) {
+  .title {
+    font-size: 44px;
+    margin-bottom: 22px;
+  }
+}
+
+.subtitle {
+  margin-bottom: 81px;
+  line-height: 22px;
+}
+
+@media (min-width: 1720px) {
+  .subtitle {
+    font-size: 20px;
+    margin-bottom: 97px;
+  }
+}
+
+.hide {
+  display: none;
+}
+
+@media (min-width: 1440px) {
+  .is-container.wrapper_main {
+    max-width: initial;
+  }
+}
+
 .presentation {
-  text-align: center;
-  margin: 0 -65px 20px;
-  
+  margin: 20px -65px 140px;
+}
+
+@media (min-width: 1720px) {
+  .presentation {
+    margin-left: 0;
+    margin-right: 0;
+  }
 }
 
 .presentation__top {
@@ -60,44 +152,38 @@
   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;
+  background-image: url(/static/img/png/Box9.png), url(/static/img/png/Box10.png), url(/static/img/png/Box11.png), url(/static/img/png/Box12.png);
+  background-position: top -4px left 46px, top -30px right -14px, bottom 73px left 278px, bottom 71px right 276px;
+  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
+  background-size: 17.5%,21.8%,8.5%,8.8%;
+}
+
+@media (min-width: 1720px) {
+  .presentation__top {
+    background-size: 18.5%, 22%, 9%, 10.1%;
+    background-position: top -47px left 58px, top -31px right 20px, bottom 8px left 347px, bottom -5px right 352px;
+    padding-top: 95px;
+    margin-bottom: 176px;
+  }
 }
 
 .presentation__title {
-  font-size: 44px;
-  font-style: normal;
-  font-weight: 700;
-  line-height: 52px;
-  margin-bottom: 20px;
+  margin-bottom: 23px;
 }
 
 .presentation__subtitle {
-  text-align: center;
-  padding-left: 5px;
-  margin-bottom: 40px;
-  font-size: 18px;
+  margin-bottom: 41px;
   font-weight: 600;
-  line-height: 26px;
 }
 
 .presentation__btn {
-  margin-bottom: 38px;
+  margin-bottom: 40px;
 }
 
 .presentation__next {
   font-weight: 500;
   line-height: 22px;
+  padding-right: 5px;
 }
 
 .presentation__arrows {
@@ -105,16 +191,11 @@
   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% {
@@ -131,25 +212,36 @@
   }
 }
 
-/***********************cards*********************/
+.presentation__bottom .presentation__title {
+  margin-bottom: 13px;
+}
 
-.cards {
+.presentation__cards {
+  max-width: 1300px;
+  margin: 0 auto;
 }
 
 .cards__list {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
-  gap: 5px;
 }
 
 .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 {
@@ -157,6 +249,445 @@
   height: 20px;
   position: absolute;
   right: -30px;
-  top: -13px;
+  top: -21px;
   background-image: url("/static/img/svg/Arrow23.svg");
 }
+
+.easy {
+  margin-bottom: 162px;
+}
+
+.easy .title {
+  max-width: 55%;
+  margin-bottom: 21px;
+}
+
+.easy .subtitle {
+  margin-bottom: 41px;
+}
+
+.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: 46px;
+}
+
+.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;
+}
+
+.chatterbox {
+  margin-bottom: 160px;
+}
+
+.chatterbox__slider {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.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;
+}
+
+.chatterbox__slide.loaded video {
+  opacity: 1;
+}
+
+.chatterbox__slide.loaded img {
+  z-index: -10;
+}
+
+.chatterbox__slide video {
+  max-width: 100%;
+  opacity: 0;
+  transition: opacity 0.2s ease-in-out;
+  pointer-events: none;
+}
+
+.chatterbox__slide img {
+  position: absolute;
+  scale: 1.32;
+  top: 11%;
+}
+
+.chatterbox__wrap {
+  position: absolute;
+  left: 8px;
+  right: 8px;
+  top: 8px;
+  bottom: 8px;
+  border-radius: 25px;
+  background-color: grey;
+  overflow: hidden;
+}
+
+.chatterbox__vbtn {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  opacity: 0;
+  transition: opacity 0.2s ease-in-out;
+  pointer-events: none;
+}
+
+.loaded .chatterbox__vbtn {
+  display: none;
+}
+
+.chatterbox__vbtn::before {
+  width: 80px;
+  height: 80px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--color-primary);
+  border: 0;
+  border-radius: 50%;
+  transition: opacity 100ms linear;
+}
+
+.chatterbox__vbtn::before, .chatterbox__vbtn::after {
+  content: "";
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  cursor: pointer;
+}
+
+.chatterbox__vbtn::after {
+  border-color: transparent transparent transparent #ffffff;
+  border-style: solid;
+  border-width: 15px 0 15px 25px;
+  display: inline-block;
+  margin-left: 2px;
+}
+
+.chatterbox__vbox {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 600px;
+}
+
+.chatterbox .title {
+  margin-bottom: 60px;
+}
+
+.chatterbox .slick-next {
+  right: -40px;
+}
+
+.chatterbox .slick-prev {
+  left: -40px;
+}
+
+.slick-slide:not(.slick-center) .chatterbox__slide {
+  scale: 0.72;
+}
+
+.slick-center .chatterbox__vbtn {
+  opacity: 1;
+  pointer-events: initial;
+  z-index: 1;
+}
+
+.slick-center .chatterbox__vbox video {
+  pointer-events: initial;
+  cursor: pointer;
+}
+
+.use {
+  margin-bottom: 123px;
+}
+
+.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 .title {
+  max-width: 80%;
+  margin-bottom: 49px;
+}
+
+.use--diff .title {
+  width: 60%;
+  margin-bottom: 60px;
+}
+
+.use--diff .use__img {
+  width: 100%;
+  margin-left: 0;
+  margin-bottom: 17px;
+}
+
+.use--lett {
+  margin-bottom: 120px;
+}
+
+.use--lett .title {
+  margin-bottom: 51px;
+}
+
+.use--lett .use__img {
+  margin-left: -5px;
+  margin-right: -5px;
+  max-width: 110%;
+  width: 1290px;
+}
+
+.animate {
+  padding: 60px 40px 49px;
+  opacity: 0;
+  background-color: var(--color-black2);
+  border-radius: 30px;
+  color: white;
+  margin-bottom: 160px;
+}
+
+.animate.left {
+  transform: translateX(-180px);
+}
+
+.animate.right {
+  transform: translateX(180px);
+}
+
+.animate__link {
+  color: var(--color-orange);
+  text-decoration: underline !important;
+}
+
+.animate .title {
+  margin-bottom: 25px;
+  max-width: 87%;
+  /*width: 90%;*/
+}
+
+.animate .subtitle {
+  width: 47%;
+  margin: 0 auto 23px;
+}
+
+.about {
+  margin-bottom: 168px;
+}
+
+.about .title {
+  margin-bottom: 60px;
+}
+
+.about__grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+}
+
+.about__img {
+  box-shadow: inset 18.19px 1.21px 18.19px 0 #FFFFFFCC, inset -18.19px -1.21px 18.19px 0 #4052801A, 48.5px 36.38px 36.38px 0 #6B7F9933;
+  border-radius: 31px;
+  margin-left: 8px;
+  margin-top: 8px;
+}
+
+.about__right {
+  text-align: left;
+  padding-top: 43px;
+  padding-left: 50px;
+}
+
+.about__half {
+  max-width: 50%;
+  float: left;
+}
+
+.about__half:last-child {
+  padding-left: 16px;
+  max-width: 47%;
+}
+
+.about b {
+  letter-spacing: 0.4px;
+}
+
+.benefits {
+  margin-bottom: 132px;
+}
+
+.benefits__grid {
+  text-align: left;
+  display: grid;
+  grid-template-columns: 1.5fr 3fr 1.5fr;
+}
+
+.benefits__item {
+  min-height: 122px;
+  padding-right: 7px;
+  margin-bottom: 22px;
+}
+
+.benefits__third {
+  padding-left: 16px;
+}
+
+.benefits .title {
+  margin-bottom: 76px;
+}
+
+.benefits img {
+  position: relative;
+  top: 14px;
+  right: -11px;
+}
+
+.uses {
+  margin-bottom: 122px;
+}
+
+.uses__grid {
+  text-align: left;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  /* max-width: 101.5%; */
+  /* width: 101.5%; */
+}
+
+.uses__item {
+  min-height: 50px;
+  margin-bottom: 43px;
+  padding: 0 50px 0 2px;
+}
+
+.uses__icon {
+  margin-bottom: 11px;
+}
+
+.uses .title {
+  max-width: 50%;
+  margin: 0 auto 60px;
+}
+
+.sore {
+  margin-bottom: 160px;
+}
+
+.sore__img {
+  margin: 0 auto 26px;
+  position: relative;
+  left: -17px;
+}
+
+.sore .title {
+  margin-bottom: 40px;
+}
+
+.sore .subtitle {
+  max-width: 62%;
+  margin: 0 auto -1px;
+}
+
+.sore .h3 {
+  max-width: 47%;
+  margin: 0 auto 19px;
+}

static/css/moover/animate.css

@@ -0,0 +1,32 @@
+.animate {
+  padding: 60px 40px 49px;
+  opacity: 0;
+  background-color: var(--color-black2);
+  border-radius: 30px;
+  color: white;
+  margin-bottom: 160px;
+}
+
+.animate.left {
+  transform: translateX(-180px);
+}
+
+.animate.right {
+  transform: translateX(180px);
+}
+
+.animate__link {
+  color: var(--color-orange);
+  text-decoration: underline !important;
+}
+
+.animate .title {
+  margin-bottom: 25px;
+  max-width: 87%;
+  /*width: 90%;*/
+}
+
+.animate .subtitle {
+  width: 47%;
+  margin: 0 auto 23px;
+}

static/css/moover/benefits.css

@@ -0,0 +1,29 @@
+.benefits {
+  margin-bottom: 132px;
+}
+
+.benefits__grid {
+  text-align: left;
+  display: grid;
+  grid-template-columns: 1.5fr 3fr 1.5fr;
+}
+
+.benefits__item {
+  min-height: 122px;
+  padding-right: 7px;
+  margin-bottom: 22px;
+}
+
+.benefits__third {
+  padding-left: 16px;
+}
+
+.benefits .title {
+  margin-bottom: 76px;
+}
+
+.benefits img {
+  position: relative;
+  top: 14px;
+  right: -11px;
+}

static/css/moover/chatterbox.css

@@ -0,0 +1,128 @@
+.chatterbox {
+  margin-bottom: 160px;
+}
+
+.chatterbox__slider {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.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;
+}
+
+.chatterbox__slide.loaded video {
+  opacity: 1;
+}
+
+.chatterbox__slide.loaded img {
+  z-index: -10;
+}
+
+.chatterbox__slide video {
+  max-width: 100%;
+  opacity: 0;
+  transition: opacity 0.2s ease-in-out;
+  pointer-events: none;
+}
+
+.chatterbox__slide img {
+  position: absolute;
+  scale: 1.32;
+  top: 11%;
+}
+
+.chatterbox__wrap {
+  position: absolute;
+  left: 8px;
+  right: 8px;
+  top: 8px;
+  bottom: 8px;
+  border-radius: 25px;
+  background-color: grey;
+  overflow: hidden;
+}
+
+.chatterbox__vbtn {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  opacity: 0;
+  transition: opacity 0.2s ease-in-out;
+  pointer-events: none;
+}
+
+.loaded .chatterbox__vbtn {
+  display: none;
+}
+
+.chatterbox__vbtn::before {
+  width: 80px;
+  height: 80px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--color-primary);
+  border: 0;
+  border-radius: 50%;
+  transition: opacity 100ms linear;
+}
+
+.chatterbox__vbtn::before, .chatterbox__vbtn::after {
+  content: "";
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  cursor: pointer;
+}
+
+.chatterbox__vbtn::after {
+  border-color: transparent transparent transparent #ffffff;
+  border-style: solid;
+  border-width: 15px 0 15px 25px;
+  display: inline-block;
+  margin-left: 2px;
+}
+
+.chatterbox__vbox {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 600px;
+}
+
+.chatterbox .title {
+  margin-bottom: 60px;
+}
+
+.chatterbox .slick-next {
+  right: -40px;
+}
+
+.chatterbox .slick-prev {
+  left: -40px;
+}
+
+.slick-slide:not(.slick-center) .chatterbox__slide {
+  scale: 0.72;
+}
+
+.slick-center .chatterbox__vbtn {
+  opacity: 1;
+  pointer-events: initial;
+  z-index: 1;
+}
+
+.slick-center .chatterbox__vbox video {
+  pointer-events: initial;
+  cursor: pointer;
+}

static/css/moover/presentation.css

@@ -0,0 +1,84 @@
+.presentation {
+  margin: 20px -65px 140px;
+}
+
+@media (min-width: 1720px) {
+  .presentation {
+    margin-left: 0;
+    margin-right: 0;
+  }
+}
+
+.presentation__top {
+  position: relative;
+  min-height: 270px;
+  margin: 0 auto 116px;
+  padding: 29px 0 40px;
+  background-image: url(/static/img/png/Box9.png), url(/static/img/png/Box10.png), url(/static/img/png/Box11.png), url(/static/img/png/Box12.png);
+  background-position: top -4px left 46px, top -30px right -14px, bottom 73px left 278px, bottom 71px right 276px;
+  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
+  background-size: 17.5%,21.8%,8.5%,8.8%;
+}
+
+@media (min-width: 1720px) {
+  .presentation__top {
+    background-size: 18.5%, 22%, 9%, 10.1%;
+    background-position: top -47px left 58px, top -31px right 20px, bottom 8px left 347px, bottom -5px right 352px;
+    padding-top: 95px;
+    margin-bottom: 176px;
+  }
+}
+
+.presentation__title {
+  margin-bottom: 23px;
+}
+
+.presentation__subtitle {
+  margin-bottom: 41px;
+  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;
+}

static/css/moover/root.css

@@ -0,0 +1,137 @@
+.container {
+  margin: 0 auto;
+  width: 1280px;
+  position: relative;
+  min-height: 695px;
+}
+
+@media (min-width: 1720px) {
+  .container {
+    width: 1720px;
+  }
+}
+
+/*@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-black2: #272424;
+  --color-grey: #F1F1F1;
+  --color-grey2: #7A7979;
+  --color-orange: #FF613A;
+  --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;
+  color: var(--color-black2);
+}
+
+.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
+  font-weight: 700;
+}
+
+h1, .h1 {
+  font-size: 44px;
+  line-height: 52px;
+}
+
+@media (min-width: 1720px) {
+  h1, .h1 {
+    font-size: 48px;
+    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;
+}
+
+b {
+  font-weight: 500;
+}
+
+.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;
+}
+
+@media (min-width: 1720px) {
+  .title {
+    font-size: 44px;
+    margin-bottom: 22px;
+  }
+}
+
+.subtitle {
+  margin-bottom: 81px;
+  line-height: 22px;
+}
+
+@media (min-width: 1720px) {
+  .subtitle {
+    font-size: 20px;
+    margin-bottom: 97px;
+  }
+}
+
+.hide {
+  display: none;
+}
+
+@media (min-width: 1440px) {
+  .is-container.wrapper_main {
+    max-width: initial;
+  }
+}

static/css/moover/sore.css

@@ -0,0 +1,23 @@
+.sore {
+  margin-bottom: 160px;
+}
+
+.sore__img {
+  margin: 0 auto 26px;
+  position: relative;
+  left: -17px;
+}
+
+.sore .title {
+  margin-bottom: 40px;
+}
+
+.sore .subtitle {
+  max-width: 62%;
+  margin: 0 auto -1px;
+}
+
+.sore .h3 {
+  max-width: 47%;
+  margin: 0 auto 19px;
+}

static/css/moover/use.css

@@ -0,0 +1,51 @@
+.use {
+  margin-bottom: 123px;
+}
+
+.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 .title {
+  max-width: 80%;
+  margin-bottom: 49px;
+}
+
+.use--diff .title {
+  width: 60%;
+  margin-bottom: 60px;
+}
+
+.use--diff .use__img {
+  width: 100%;
+  margin-left: 0;
+  margin-bottom: 17px;
+}
+
+.use--lett {
+  margin-bottom: 120px;
+}
+
+.use--lett .title {
+  margin-bottom: 51px;
+}
+
+.use--lett .use__img {
+  margin-left: -5px;
+  margin-right: -5px;
+  max-width: 110%;
+  width: 1290px;
+}

static/css/moover/uses.css

@@ -0,0 +1,26 @@
+.uses {
+  margin-bottom: 122px;
+}
+
+.uses__grid {
+  text-align: left;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  /* max-width: 101.5%; */
+  /* width: 101.5%; */
+}
+
+.uses__item {
+  min-height: 50px;
+  margin-bottom: 43px;
+  padding: 0 50px 0 2px;
+}
+
+.uses__icon {
+  margin-bottom: 11px;
+}
+
+.uses .title {
+  max-width: 50%;
+  margin: 0 auto 60px;
+}

static/css/slick-theme.css

@@ -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;
+}

static/css/slick.css

@@ -0,0 +1,146 @@
+/* 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%);
+}
+
+.slick-disabled {
+  display: none !important;
+}

static/img/svg/Arrow08.svg

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

static/img/svg/bax.svg

@@ -0,0 +1,8 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M58 16H6C4.89543 16 4 16.8954 4 18V46C4 47.1046 4.89543 48 6 48H58C59.1046 48 60 47.1046 60 46V18C60 16.8954 59.1046 16 58 16Z" stroke="#FF613A" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M32 40C36.4183 40 40 36.4183 40 32C40 27.5817 36.4183 24 32 24C27.5817 24 24 27.5817 24 32C24 36.4183 27.5817 40 32 40Z" stroke="#FF613A" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M44 16L60 30" stroke="#FF613A" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M44 48L60 34" stroke="#FF613A" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M20 16L4 30" stroke="#FF613A" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M20 48L4 34" stroke="#FF613A" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

static/img/svg/books.svg

@@ -0,0 +1,6 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M56 44.3253V19.6753C55.9981 19.3193 55.9023 18.97 55.7224 18.6627C55.5424 18.3555 55.2846 18.1011 54.975 17.9253L32.975 5.55031C32.6786 5.37916 32.3423 5.28906 32 5.28906C31.6577 5.28906 31.3214 5.37916 31.025 5.55031L9.025 17.9253C8.71538 18.1011 8.45759 18.3555 8.27763 18.6627C8.09768 18.97 8.00191 19.3193 8 19.6753V44.3253C8.00191 44.6814 8.09768 45.0306 8.27763 45.3379C8.45759 45.6451 8.71538 45.8995 9.025 46.0753L31.025 58.4503C31.3214 58.6215 31.6577 58.7116 32 58.7116C32.3423 58.7116 32.6786 58.6215 32.975 58.4503L54.975 46.0753C55.2846 45.8995 55.5424 45.6451 55.7224 45.3379C55.9023 45.0306 55.9981 44.6814 56 44.3253V44.3253Z" stroke="#FF613A" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M44.25 38.125V25.125L20 11.75" stroke="#FF613A" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M55.7249 18.6504L32.2249 32.0004L8.2749 18.6504" stroke="#FF613A" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M32.225 32L32 58.7" stroke="#FF613A" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

static/img/svg/box.svg

@@ -0,0 +1,5 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M56 14H8C6.89543 14 6 14.8954 6 16V22C6 23.1046 6.89543 24 8 24H56C57.1046 24 58 23.1046 58 22V16C58 14.8954 57.1046 14 56 14Z" stroke="#FF613A" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M54 24V48C54 48.5304 53.7893 49.0391 53.4142 49.4142C53.0391 49.7893 52.5304 50 52 50H12C11.4696 50 10.9609 49.7893 10.5858 49.4142C10.2107 49.0391 10 48.5304 10 48V24" stroke="#FF613A" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M26 34H38" stroke="#FF613A" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

static/img/svg/earth.svg

@@ -0,0 +1,5 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M32 56C45.2548 56 56 45.2548 56 32C56 18.7452 45.2548 8 32 8C18.7452 8 8 18.7452 8 32C8 45.2548 18.7452 56 32 56Z" stroke="#FF613A" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.3999 45.8504L15.3249 44.0754C15.615 43.8965 15.8545 43.6464 16.0208 43.3488C16.1871 43.0513 16.2745 42.7162 16.2749 42.3754L16.3249 33.3504C16.3289 32.9762 16.4418 32.6114 16.6499 32.3004L21.5999 24.5254C21.7484 24.2957 21.942 24.0984 22.1688 23.9456C22.3957 23.7927 22.6512 23.6874 22.9199 23.636C23.1886 23.5846 23.4649 23.5882 23.7321 23.6465C23.9994 23.7049 24.2521 23.8167 24.4749 23.9754L29.3749 27.5254C29.7977 27.8201 30.3122 27.9532 30.8249 27.9004L38.6999 26.8254C39.1777 26.7596 39.6141 26.5191 39.9249 26.1504L45.4749 19.7504C45.804 19.3603 45.9737 18.8602 45.9499 18.3504L45.6749 12.2754" stroke="#FF613A" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M46.7752 50.9246L44.0752 48.2246C43.8254 47.975 43.5154 47.7942 43.1751 47.6996L37.8001 46.2996C37.3281 46.1704 36.9198 45.8726 36.6525 45.4625C36.3853 45.0525 36.2777 44.5587 36.3501 44.0746L36.9251 40.0246C36.9822 39.684 37.1245 39.3633 37.3386 39.0923C37.5528 38.8213 37.8319 38.6089 38.1502 38.4746L45.7501 35.2996C46.1031 35.1524 46.4909 35.1095 46.8676 35.1759C47.2442 35.2424 47.5939 35.4155 47.8751 35.6746L54.1001 41.3746" stroke="#FF613A" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

static/img/svg/files.svg

@@ -0,0 +1,6 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M42 56H14C13.4696 56 12.9609 55.7893 12.5858 55.4142C12.2107 55.0391 12 54.5304 12 54V18C12 17.4696 12.2107 16.9609 12.5858 16.5858C12.9609 16.2107 13.4696 16 14 16H34L44 26V54C44 54.5304 43.7893 55.0391 43.4142 55.4142C43.0391 55.7893 42.5304 56 42 56Z" stroke="#FF613A" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M20 16V10C20 9.46957 20.2107 8.96086 20.5858 8.58579C20.9609 8.21071 21.4696 8 22 8H42L52 18V46C52 46.5304 51.7893 47.0391 51.4142 47.4142C51.0391 47.7893 50.5304 48 50 48H44" stroke="#FF613A" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M22 38H34" stroke="#FF613A" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M22 46H34" stroke="#FF613A" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

static/img/svg/present.svg

@@ -0,0 +1,7 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M54 20H10C8.89543 20 8 20.8954 8 22V30C8 31.1046 8.89543 32 10 32H54C55.1046 32 56 31.1046 56 30V22C56 20.8954 55.1046 20 54 20Z" stroke="#FF613A" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M52 32V50C52 50.5304 51.7893 51.0391 51.4142 51.4142C51.0391 51.7893 50.5304 52 50 52H14C13.4696 52 12.9609 51.7893 12.5858 51.4142C12.2107 51.0391 12 50.5304 12 50V32" stroke="#FF613A" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M32 20V52" stroke="#FF613A" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M43.325 17.1754C40.475 20.0004 32 20.0004 32 20.0004C32 20.0004 32 11.5254 34.825 8.67545C35.9522 7.54828 37.4809 6.91504 39.075 6.91504C40.6691 6.91504 42.1978 7.54828 43.325 8.67545C44.4522 9.80262 45.0854 11.3314 45.0854 12.9254C45.0854 14.5195 44.4522 16.0483 43.325 17.1754V17.1754Z" stroke="#FF613A" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M20.675 17.1754C23.525 20.0004 32 20.0004 32 20.0004C32 20.0004 32 11.5254 29.175 8.67545C28.0478 7.54828 26.519 6.91504 24.925 6.91504C23.3309 6.91504 21.8021 7.54828 20.675 8.67545C19.5478 9.80262 18.9146 11.3314 18.9146 12.9254C18.9146 14.5195 19.5478 16.0483 20.675 17.1754V17.1754Z" stroke="#FF613A" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

static/img/svg/slick-arrow.svg

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

styles/moover.scss

@@ -0,0 +1,11 @@
+@import "./moover/root";
+@import "./moover/presentation";
+@import "./moover/cards";
+@import "./moover/easy";
+@import "./moover/chatterbox";
+@import "./moover/use";
+@import "./moover/animate";
+@import "./moover/about";
+@import "./moover/benefits";
+@import "./moover/uses";
+@import "./moover/sore";

styles/moover/about.scss

@@ -0,0 +1,42 @@
+.about {
+  margin-bottom: 168px;
+}
+
+.about .title {
+  margin-bottom: 60px;
+}
+
+.about__grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  
+}
+
+.about__img {
+  box-shadow: inset 18.19px 1.21px 18.19px 0 #FFFFFFCC,
+  inset -18.19px -1.21px 18.19px 0 #4052801A,
+  48.5px 36.38px 36.38px 0 #6B7F9933;
+  border-radius: 31px;
+  margin-left: 8px;
+  margin-top: 8px;
+}
+
+.about__right {
+  text-align: left;
+  padding-top: 43px;
+  padding-left: 50px;
+}
+
+.about__half {
+  max-width: 50%;
+  float: left;
+}
+
+.about__half:last-child {
+  padding-left: 16px;
+  max-width: 47%;
+}
+
+.about b {
+  letter-spacing: 0.4px;
+}

styles/moover/animate.scss

@@ -0,0 +1,32 @@
+.animate {
+  padding: 60px 40px 49px;
+  opacity: 0;
+  background-color: var(--color-black2);
+  border-radius: 30px;
+  color: white;
+  margin-bottom: 160px;
+
+  &.left {
+    transform: translateX(-180px);
+  }
+
+  &.right {
+    transform: translateX(180px);
+  }
+
+  &__link {
+    color: var(--color-orange);
+    text-decoration: underline !important;
+  }
+
+  .title {
+    margin-bottom: 25px;
+    max-width: 87%;
+    /*width: 90%;*/
+  }
+
+  .subtitle {
+    width: 47%;
+    margin: 0 auto 23px;
+  }
+}

styles/moover/benefits.scss

@@ -0,0 +1,29 @@
+.benefits {
+  margin-bottom: 132px;
+
+  &__grid {
+    text-align: left;
+    display: grid;
+    grid-template-columns: 1.5fr 3fr 1.5fr;
+  }
+
+  &__item {
+    min-height: 122px;
+    padding-right: 7px;
+    margin-bottom: 22px;
+  }
+
+  &__third {
+    padding-left: 16px;
+  }
+
+  .title {
+    margin-bottom: 76px;
+  }
+
+  img {
+    position: relative;
+    top: 14px;
+    right: -11px;
+  }
+}

styles/moover/cards.scss

@@ -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");
+}

styles/moover/chatterbox.scss

@@ -0,0 +1,131 @@
+.chatterbox {
+  margin-bottom: 160px;
+
+  &__slider {
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+
+  &__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;
+
+    &.loaded {
+      video {
+        opacity: 1;
+      }
+
+      img {
+        z-index: -10;
+      }
+    }
+
+    video {
+      max-width: 100%;
+      opacity: 0;
+      transition: opacity 0.2s ease-in-out;
+      pointer-events: none;
+    }
+
+    img {
+      position: absolute;
+      scale: 1.32;
+      top: 11%;
+    }
+  }
+
+  &__wrap {
+    position: absolute;
+    left: 8px;
+    right: 8px;
+    top: 8px;
+    bottom: 8px;
+    border-radius: 25px;
+    background-color: grey;
+    overflow: hidden;
+  }
+
+  &__vbtn {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    opacity: 0;
+    transition: opacity 0.2s ease-in-out;
+    pointer-events: none;
+
+    .loaded & {
+      display: none;
+    }
+
+    &::before {
+      width: 80px;
+      height: 80px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: var(--color-primary);
+      border: 0;
+      border-radius: 50%;
+      transition: opacity 100ms linear;
+    }
+
+    &::before,
+    &::after {
+      content: "";
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      cursor: pointer;
+    }
+
+    &::after {
+      border-color: transparent transparent transparent #ffffff;
+      border-style: solid;
+      border-width: 15px 0 15px 25px;
+      display: inline-block;
+      margin-left: 2px;
+    }
+  }
+
+  &__vbox {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 600px;
+  }
+
+  .title {
+    margin-bottom: 60px;
+  }
+
+  .slick-next {
+    right: -40px;
+  }
+
+  .slick-prev {
+    left: -40px;
+  }
+}
+
+.slick-slide:not(.slick-center) .chatterbox__slide {
+  scale: 0.72;
+}
+
+.slick-center .chatterbox__vbtn {
+  opacity: 1;
+  pointer-events: initial;
+  z-index: 1;
+}
+
+.slick-center .chatterbox__vbox video {
+  pointer-events: initial;
+  cursor: pointer;
+}

styles/moover/easy.scss

@@ -0,0 +1,105 @@
+.easy {
+  margin-bottom: 162px;
+}
+
+.easy .title {
+  max-width: 55%;
+  margin-bottom: 21px;
+}
+
+.easy .subtitle {
+  margin-bottom: 41px;
+}
+
+.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: 46px;
+}
+
+.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;
+}

styles/moover/presentation.scss

@@ -0,0 +1,92 @@
+.presentation {
+  margin: 20px -65px 140px;
+
+  @media (min-width: 1720px) {
+    margin-left: 0;
+    margin-right: 0;
+  }
+}
+
+.presentation__top {
+  position: relative;
+  min-height: 270px;
+  margin: 0 auto 116px;
+  padding: 29px 0 40px;
+  background-image: url(/static/img/png/Box9.png),
+  url(/static/img/png/Box10.png),
+  url(/static/img/png/Box11.png),
+  url(/static/img/png/Box12.png);
+  background-position: top -4px left 46px,
+  top -30px right -14px,
+  bottom 73px left 278px,
+  bottom 71px right 276px;
+  background-repeat: no-repeat,
+  no-repeat,
+  no-repeat,
+  no-repeat;
+  background-size: 17.5%,21.8%,8.5%,8.8%;
+
+  @media (min-width: 1720px) {
+    background-size: 18.5%, 22%, 9%, 10.1%;
+    background-position: top -47px left 58px,
+    top -31px right 20px,
+    bottom 8px left 347px,
+    bottom -5px right 352px;
+    padding-top: 95px;
+    margin-bottom: 176px;
+  }
+}
+
+.presentation__title {
+  margin-bottom: 23px;
+}
+
+.presentation__subtitle {
+  margin-bottom: 41px;
+  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;
+}

styles/moover/root.scss

@@ -0,0 +1,138 @@
+.container {
+  margin: 0 auto;
+  width: 1280px;
+  position: relative;
+  min-height: 695px;
+}
+
+@media (min-width: 1720px) {
+  .container {
+    width: 1720px;
+  }
+}
+
+
+/*@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-black2: #272424;
+  --color-grey: #F1F1F1;
+  --color-grey2: #7A7979;
+  --color-orange: #FF613A;
+
+
+  --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;
+  color: var(--color-black2);
+}
+
+.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
+  font-weight: 700;
+
+}
+
+h1, .h1 {
+  font-size: 44px;
+  line-height: 52px;
+
+  @media (min-width: 1720px) {
+    font-size: 48px;
+    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;
+}
+
+b {
+  font-weight: 500;
+}
+
+
+.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;
+
+   @media (min-width: 1720px) {
+    font-size: 44px;
+     margin-bottom: 22px;
+  }
+}
+
+.subtitle {
+  margin-bottom: 81px;
+  line-height: 22px;
+
+   @media (min-width: 1720px) {
+     font-size: 20px;
+     margin-bottom: 97px;
+  }
+}
+
+.hide {
+  display: none;
+}
+
+@media (min-width: 1440px) {
+  .is-container.wrapper_main {
+    max-width: initial;
+  }
+}

styles/moover/sore.scss

@@ -0,0 +1,27 @@
+.sore {
+  margin-bottom: 160px;
+
+  &__img {
+    margin: 0 auto 26px;
+    position: relative;
+    left: -17px;
+
+  }
+
+  .title {
+    margin-bottom: 40px;
+  }
+
+
+  .subtitle {
+    max-width: 62%;
+    margin: 0 auto -1px;
+
+  }
+
+  .h3 {
+    max-width: 47%;
+   margin: 0 auto 19px;
+
+  }
+}

styles/moover/use.scss

@@ -0,0 +1,59 @@
+.use {
+  margin-bottom: 123px;
+
+  &__img {
+    width: 67.5%;
+    margin-left: 16px;
+    margin-bottom: 31px;
+  }
+
+  &__btn {
+    margin-bottom: 11px;
+  }
+
+  &__link {
+    font-size: 18px;
+    font-weight: 600;
+    line-height: 26px;
+    color: var(--color-grey2);
+  }
+
+  .title {
+    max-width: 80%;
+    margin-bottom: 49px;
+  }
+
+  &--diff {
+    .title {
+      width: 60%;
+      margin-bottom: 60px;
+    }
+
+    .use__img {
+      width: 100%;
+      margin-left: 0;
+      margin-bottom: 17px;
+    }
+  }
+
+  &--lett {
+    margin-bottom: 120px;
+
+    .title {
+      margin-bottom: 51px;
+    }
+
+    .use__img {
+      margin-left: -5px;
+      margin-right: -5px;
+      max-width: 110%;
+      width: 1290px;
+    }
+  }
+}
+
+
+
+
+
+

styles/moover/uses.scss

@@ -0,0 +1,28 @@
+.uses {
+  margin-bottom: 122px;
+
+  &__grid {
+    text-align: left;
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    /* max-width: 101.5%; */
+    /* width: 101.5%; */
+  }
+
+
+  &__item {
+    min-height: 50px;
+    margin-bottom: 43px;
+    padding: 0 50px 0 2px;
+  }
+
+  &__icon {
+    margin-bottom: 11px;
+  }
+
+  .title {
+    max-width: 50%;
+    margin: 0 auto 60px;
+  }
+
+}

templates/pages/p_customer_landing_page.html

@@ -0,0 +1,226 @@
+{% 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 "Попутчики видят твое объявление и&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="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">
+
+      {% for media_item in page.get_media_items %}
+          <div class="slick-slide">
+            <div class="chatterbox__slide">
+              <div class="chatterbox__vicon"></div>
+
+              <video src="{{ MEDIA_URL }}{{ media_item.video }}"></video>
+
+            </div>
+          </div>
+      {% endfor %}
+{#      <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 %}

templates/pages/p_mover_landing_page.html

@@ -4,354 +4,440 @@
 
 {% 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" >
-          {% blocktrans %}
-            Сервис попутных посылок
-          {% endblocktrans %}
-        </h1>
-        <div class="presentation__subtitle">
-          {% translate "Отправляй посылки с попутчиками в любую точку, быстро и недорого" %}
-        </div>
-        <button class="presentation__btn btn btn--primary">Узнать подробнее</button>
+      <h1 class="presentation__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>
-
-
-
-
-
-      {#         <div class="switch">#}
-      {#            <div><a class="active" href="#">Перевозчик</a></div>#}
-      {#            <div><a class="deadctive" href="#">Отправитель</a></div>#}
-      {#          </div>#}
-
-    </div>
-    <div class="presentaition__bottom search_form_main">
-    <div class="cut-width">
-      {% include "blocks/b_find_route_form.html" %}
-    </div>
-  </div>
   </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>
+  <section class="easy">
+    <div class="title">
+      {% translate "Один простой шаг, чтобы отправить посылку" %}
     </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 class="subtitle">
+      {% translate "Еще легче, чем писать в чаты и группы в социальных сетях" %}
     </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 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 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 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 id="content-2">
-        <h2 id="title_static">{% translate "Вы путешествуете и можете взять посылку по-пути?" %}</h2>
-        <div class="benefit_img">
+      <div class="easy__item easy__item--thr">
+        <p>{% translate "Тебе остаётся только выбрать перевозчика, связаться и&nbsp;обсудить детали перевозки." %}</p>
+        <img src="{% static 'img/webp/sender-card3.webp' %}" alt="sender1">
 
-          <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 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>
-        </a>
-      {% endfor %}
+        </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&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">
+        <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">
+        <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>
+  <section class="uses">
+    <div class="title">{% translate "Для каких целей можно использовать наш сервис" %}</div>
 
-    {#            {% url "article_one" art.url %}#}
-    {#            {{ MEDIA_URL }}{{ art.picture }}#}
-    {#            {{ art.description|truncatechars:100 }}#}
-
-
-    {#        </div>#}
-  </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 "Когда необходимо отправить посылку в&nbsp;другую страну" %}
+        </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 "Когда нужно отправить не&nbsp;только маленькую посылку, но&nbsp;и&nbsp;крупногабаритный груз" %}
+        </div>
+      </div>
+      <div class="uses__item">
+        <img class="uses__icon" src="{% static "img/svg/earth.svg" %}" alt="image icon">
+        <div class="uses__desc">
+          {% translate "Когда нет прямого сообщения из&nbsp;пункта&nbsp;А в&nbsp;пункт&nbsp;Б обычными сервисами доставки" %}
+        </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 "Мы&nbsp;знаем, каково это без конца и&nbsp;края закидывать сообщения в&nbsp;чаты и&nbsp;группы в&nbsp;социальных сетях, в&nbsp;надежде найти человека, который едет или летит в&nbsp;нужном направлении, чтобы передать посылоку своим родным или близким. Очень часто ещё и&nbsp;стоимость пересылки в&nbsp;обычных почтовых сервисах выше стоимости самой посылки." %}
+    </div>
+    <img src="{% static "img/png/sore2.png" %}" alt="sore image" class="sore__img">
+    <div class="h3">
+      {% translate "Зарегистрируйте бесплатно прямо сейчас и&nbsp;размести свое первое объявление об&nbsp;отправке посылки" %}
+    </div>
+    <a href="#form" class="sore__btn btn btn--primary">{% translate "Зарегистрироваться и разместить" %}</a>
+    <br/>
+    </div>
+  </section>
 {% endblock %}

templates/tb_base.html

@@ -176,7 +176,7 @@ function gtag_report_conversion(url) {
     {% if mobile == 'false' or mobile %}
     {% endif %}
         <div class="block_overlay  {% if page_type == 'profile' %}hidden{% elif page_type == 'routes' %} routes n_profile hidden{% else %}hidden n_profile{% endif %}" onclick="close_open_curtain()"></div>
-        <div class="wrapper_main">
+        <div class="wrapper_main{% if page.url == "landing_mover" %} is-container{% endif %}">
 
             {% include 'blocks/b_header.html' %}
 
@@ -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>