Merge branch 'feature/banners-slider-24-06-19' into 'master'

Feature/banners slider 24 06 19

See merge request lilschool/site!329

api/v1/serializers/content.py

@@ -37,8 +37,11 @@ class BannerSerializer(serializers.ModelSerializer):
             'image',
             'use',
             'color',
+            'color2',
             'stretch_image',
             'future_date',
+            'pages',
+            'main_banner',
             'created_at',
             'update_at',
         )

apps/content/admin.py

@@ -19,6 +19,10 @@ class BannerAdmin(admin.ModelAdmin):
         'button_text',
         'url',
         'image',
+        'color',
+        'color2',
+        'pages',
+        'main_banner',
     )
 
 

apps/content/migrations/0027_auto_20190621_1107.py

@@ -0,0 +1,29 @@
+# Generated by Django 2.0.7 on 2019-06-21 11:07
+
+import django.contrib.postgres.fields
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('content', '0026_banner_stretch_image'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='banner',
+            name='color2',
+            field=models.CharField(blank=True, default='', max_length=7),
+        ),
+        migrations.AddField(
+            model_name='banner',
+            name='main_banner',
+            field=django.contrib.postgres.fields.ArrayField(base_field=models.IntegerField(), blank=True, default=[], size=None),
+        ),
+        migrations.AddField(
+            model_name='banner',
+            name='pages',
+            field=django.contrib.postgres.fields.ArrayField(base_field=models.IntegerField(), blank=True, default=[], size=None),
+        ),
+    ]

apps/content/models.py

@@ -3,8 +3,10 @@ from urllib.parse import urlparse
 from django.conf import settings
 from django.db import models
 from django.contrib.auth import get_user_model
+from django.db.models.expressions import RawSQL
 from django.urls import reverse_lazy
 from django.utils import timezone
+from django.contrib.postgres.fields import ArrayField
 from imagekit.models import ImageSpecField
 from imagekit.processors import ResizeToCover
 
@@ -141,26 +143,34 @@ class GalleryImage(models.Model):
 
 
 class Banner(models.Model):
+    PAGE_INDEX = 1
+    PAGE_COURSES = 2
+    PAGE_SCHOOL = 3
+
     text = models.TextField()
     button_text = models.CharField(max_length=50)
     url = models.URLField()
     image = models.ImageField()
     use = models.BooleanField(default=False)
     color = models.CharField(max_length=7, blank=True, default='')
+    color2 = models.CharField(max_length=7, blank=True, default='')
     stretch_image = models.BooleanField(default=True)
     future_date = models.DateTimeField(blank=True, null=True)
     created_at = models.DateTimeField(auto_now_add=True)
     update_at = models.DateTimeField(auto_now=True)
+    pages = ArrayField(models.IntegerField(), default=[], blank=True)
+    main_banner = ArrayField(models.IntegerField(), default=[], blank=True)
 
     class Meta:
         verbose_name = 'Банер'
         verbose_name_plural = 'Банеры'
         ordering = ('-created_at',)
 
-    def save(self, *args, **kwargs):
+    @classmethod
-        if self.use:
+    def get_for_page(cls, page):
-            Banner.objects.filter(use=True).update(use=False)
+        return Banner.objects.filter(use=True, pages__contains=[page]).annotate(
-        return super().save(*args, **kwargs)
+            is_main=RawSQL('main_banner @> %s', ([page],))
+        ).order_by('-is_main')
 
 
 class Contest(models.Model):

apps/course/templates/course/courses.html

@@ -4,11 +4,13 @@
 
 {% block ogimage %}http://{{request.META.HTTP_HOST}}{% static 'img/og_courses.jpg' %}{% endblock ogimage %}
 {% block content %}
+  {% if not banners|length %}
   <div class="main" style="background-image: url({% static 'img/bg-1.jpg' %});">
     <div class="main__center center">
       <div class="main__title">Онлайн-курсы LilCity</div>
     </div>
   </div>
+  {% endif %}
   <div class="section">
     <div class="section__center center">
       <div class="text text_lg">

apps/course/views.py

@@ -15,6 +15,7 @@ from django.views.decorators.http import require_http_methods
 from django.utils.translation import gettext as _
 from django.utils.timezone import now
 
+from apps.content.models import Banner
 from apps.payment.models import AuthorBalance, CoursePayment
 from .models import Course, Like, Lesson, CourseComment, LessonComment, Category
 from .filters import CourseFilter
@@ -318,6 +319,7 @@ class CoursesView(ListView):
         context = super().get_context_data()
         filtered = CourseFilter(self.request.GET)
         context.update(filtered.data)
+        context['banners'] = Banner.get_for_page(Banner.PAGE_COURSES)
         context['course_items'] = Course.shuffle(context.get('course_items'))
         context['ages'] = Course.AGE_CHOICES[1:]
         age = context.get('age')

apps/school/templates/drawing_camp/about.html

@@ -9,19 +9,19 @@
       <div class="about__wrap">
         <div class="about__content">
           <p>Что такое «Рисовальный Лагерь»?</p>
-          <p>Это месяц фантазии, красок, карандашей и необычных заданий!</p>
+          <p>Это месяц фантазии, красок, карандашей, пластилина и необычных заданий!</p>
 
-          <p>Старт - 3 июня. По понедельникам, средам и пятницам. Уроки выходят в 17:00 по московскому времени.
+          <p>Старт второй смены - 1 июля. По понедельникам, средам и пятницам. Уроки выходят в 17:00 по московскому времени.
             Запись урока хранится неделю. То есть вы можете заниматься тогда, когда вам удобно.</p>
 
           <p>Любой ребёнок из любой точки мира в удобное время может порисовать с профессиональными преподавателями.</p>
 
-          <p>Мы поговорим о направлениях в живописи. О стилях и жанрах. Рассмотрим великие полотна,
+          <p>Вместе мы отправимся в творческое путешествие! Зарядимся духом авантюризма, раздвинем границы
-            познакомимся с художниками. И, конечно, создадим собственные работы в их стиле.</p>
+            и будем наслаждаться креативным приключением!</p>
 
           <p>На наших занятиях нет понятий «правильно» и «неправильно». Есть только желание и вдохновение.</p>
 
-          <p>Мы зарядим вас и ваших детей творчеством! Присоединяйтесь!</p>
+          <p>Присоединяйтесь!</p>
         </div>
         <div class="about__ceo">- Sasha Kru, CEO и основатель
           <a href='#'>Lil.City</a>

apps/school/templates/school/summer_school.html

@@ -3,14 +3,15 @@
 {% block ogimage %}http://{{request.META.HTTP_HOST}}{% static 'img/og_main.jpg' %}{% endblock %}
 {% block content %}
 {% if not is_purchased and not prev_school_payments_exists %}
-{% include "../summer/promo.html" %}
+{% include "../summer/buy.html" %}
-{% include "../summer/about.html" %}
-{% include "../summer/advantages.html" %}
-{% include "../summer/online.html" %}
 {% include "../blocks/schedule.html" %}
-{% include "templates/blocks/game.html" %}
+{% include "../summer/advantages.html" %}
+{% include "../summer/about.html" %}
 {% include "templates/blocks/partners.html" %}
 {% else %}
+{% include 'templates/blocks/messages.html' %}
+{% include "../summer/online.html" %}
 {% include "../summer/schedule_purchased.html" %}
+{% include "templates/blocks/partners.html" %}
 {% endif %}
 {% endblock %}

apps/school/templates/summer/buy.html

@@ -0,0 +1,18 @@
+<div class="section" style="padding-bottom: 0px;">
+  <div class="section__center center text-center">
+      <a
+        {% if not is_purchased_future %}
+          data-popup=".js-popup-buy"
+        {% endif %}
+          class="main__btn btn"
+          href="#"
+        >
+        {% if not is_purchased and not is_purchased_future %}Купить доступ от {{ min_school_price }} руб./месяц{% endif %}
+        {% if is_purchased_future and not is_purchased %}ваша подписка начинается {{school_purchased_future.date_start}}{% endif %}
+        {% if is_purchased %}ваша подписка истекает {{ subscription_ends_humanize }}<br/>перейти к оплате{% endif %}
+      </a>
+      {% if not is_purchased and not is_purchased_future %}
+      <a class="main__btn btn btn_stroke-black" href="{% url 'gift-certificates' %}">Подарить другу</a>
+      {% endif %}
+  </div>
+</div>

apps/school/templates/summer/online.html

@@ -1,9 +1,7 @@
 {% load static %}
-<a class="online" target="_blank" href="https://www.youtube.com/watch?v=PhZ8qQbIej0" style="background-image: url({% static 'img/video-1.jpg' %});">
+<a class="online" target="_blank" href="https://www.youtube.com/watch?v=PhZ8qQbIej0">
   <div class="online__center center">
-    <div class="online__type">ВИДЕОУРОКИ</div>
+    <div class="online__title">Каждый день в 17:00 (мск)</div>
-    <div class="online__title">В 17.00 (по Мск) </div>
+    <div class="online__text text">Онлайн-школа это ежедневные видео-уроки на разные темы. Уроки хранятся 7 дней.</div>
-    <div class="online__text text">Каждый день</div>
-    <div class="online__action"></div>
   </div>
 </a>

apps/school/templates/summer/schedule_purchased.html

@@ -1,7 +1,7 @@
 {% load static %} {% load thumbnail %}
 <div class="section" id="schedule">
   <div class="section__center center">
-    {% include 'templates/blocks/messages.html' %}
+    <div class="title title_center">Расписание</div>
     <div class="casing">
       <div class="casing__col">
         <div class="casing__subscribe">
@@ -55,4 +55,3 @@
     </div>
   </div>
 </div>
-{% include './last_courses.html' %}

apps/school/views.py

@@ -14,6 +14,7 @@ from django.utils.timezone import now
 from django.views.generic import ListView, UpdateView, TemplateView, DetailView
 from django.conf import settings
 
+from apps.content.models import Banner
 from apps.course.models import Course
 from apps.payment.models import SchoolPayment, DrawingCampPayment
 from .models import LiveLesson, SchoolSchedule
@@ -233,7 +234,9 @@ class SchoolView(TemplateView):
                 school_schedules_dict[0] = school_schedules_dict.get(7)
                 for ll in prev_live_lessons:
                     ll.school_schedule = school_schedules_dict.get(ll.date.isoweekday())
+
         context.update({
+            'banners': Banner.get_for_page(Banner.PAGE_SCHOOL),
             'online': online,
             'prev_live_lessons': prev_live_lessons,
             'prev_live_lessons_exists': prev_live_lessons_exists,

project/templates/blocks/about.html

@@ -1,7 +1,5 @@
-{% load static %}
-{% load ruplural from plural %}
 <div class="anchor" id="about"></div>
-<div class="section section_school" style="padding-top: 0;">
+<div class="section section_school">
   <div class="section__center center">
     <div class="text text_lg">
       <p>Вы житель мегаполиса и&nbsp;у&nbsp;вас нет времени дополнительно развивать своего ребенка?
@@ -12,38 +10,3 @@
     </div>
   </div>
 </div>
-
-<div class="section section_school">
-  <div class="section__center center">
-    <div class="text text_only_curve">
-      <img class="text__curve text__curve_five" src="{% static 'img/curve-2.svg' %}" width="210">
-      <div class="title">Lil School в цифрах</div>
-    </div>
-    <div class="school school_main">
-      <div class="school__col">
-        <div class="school__preview">> {{ config.NUMBER_OF_STUDENTS }}</div>
-        <div class="school__title">{{ config.NUMBER_OF_STUDENTS|ruplural:'ученик,ученика,учеников' }}</div>
-        <div class="school__text">прошли обучение в&nbsp;Lil&nbsp;School</div>
-      </div>
-      <div class="school__col">
-        <div class="school__preview">{{ works_count }}</div>
-        <div class="school__title">{{ works_count|ruplural:'работа,работы,работ' }}</div>
-        <div class="school__text">
-          создано учениками Lil&nbsp;School.<br>
-          Большую часть из&nbsp;них легко найти в&nbsp;<a href="{{ config.SERVICE_INSTAGRAM_URL }}">инстаграм</a>
-        </div>
-      </div>
-      <div class="school__col">
-        <div class="school__preview">{{ config.NUMBER_OF_COUNTRIES }}</div>
-        <div class="school__title">{{ config.NUMBER_OF_COUNTRIES|ruplural:'страна,страны,стран' }}</div>
-        <div class="school__text">где живут талантливые ученики Lil&nbsp;School</div>
-      </div>
-      <div class="school__col">
-        <div class="school__preview">{{ config.NUMBER_OF_CITIES }}</div>
-        <div class="school__title">{{ config.NUMBER_OF_CITIES|ruplural:'город,города,городов' }}</div>
-        <div class="school__text">со&nbsp;всего мира со&nbsp;счастливыми учениками Lil&nbsp;School</div>
-      </div>
-    </div>
-    <div style="margin: 50px 0; text-align: center;"><a class="btn" href="/faq">Часто задаваемые вопросы</a></div>
-  </div>
-</div>

project/templates/blocks/banners.html

@@ -0,0 +1,46 @@
+<swiper class="banners" :options="{
+  effect: 'slide',
+  speed: 700,
+  loop: true,
+  autoplay: {delay: 5000},
+  pagination: {
+    el: '.swiper-pagination',
+    clickable: true,
+  }}">
+  {% for banner in banners %}
+  <swiper-slide>
+    <div class="banner"
+     data-banner="{{banner.id}}" style="display: none;
+        background: {{ banner.color|default:'white' }};
+        {% if banner.color2 %}
+        background: -moz-linear-gradient(-45deg, {{ banner.color }} 0%, {{ banner.color2 }} 100%);
+        background: -webkit-gradient(left top, right bottom, color-stop(0%, {{ banner.color }}), color-stop(100%, {{ banner.color2 }}));
+        background: -webkit-linear-gradient(-45deg, {{ banner.color }} 0%, {{ banner.color2 }} 100%);
+        background: -o-linear-gradient(-45deg, {{ banner.color }} 0%, {{ banner.color2 }} 100%);
+        background: -ms-linear-gradient(-45deg, {{ banner.color }} 0%, {{ banner.color2 }} 100%);
+        background: linear-gradient(135deg, {{ banner.color }} 0%, {{ banner.color2 }} 100%);
+        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='{{ banner.color }}', endColorstr='{{ banner.color2 }}', GradientType=1 );
+        {% endif %}">
+        <div class="banner__content">
+          <div class="banner__text-column">
+            <div class="banner__text">{{ banner.text }}</div>
+            {% if banner.url %}
+            <a href="{{ banner.url }}" class="banner__link">{{ banner.button_text }}</a>
+            {% endif %}
+          </div>
+          <div class="banner__image-column">
+            <img src="{{ banner.image.url }}"/>
+
+            {% if banner.future_date %}
+            <div class="banner__countdown-wrap">
+              <div class="banner__countdown-title">До конца акции осталось</div>
+              <countdown date="{{ banner.future_date|date:'Y-m-d H:i:s' }}"></countdown>
+            </div>
+            {% endif %}
+          </div>
+        </div>
+    </div>
+  </swiper-slide>
+  {% endfor %}
+  <div class="swiper-pagination" slot="pagination"></div>
+</swiper>

project/templates/blocks/buy.html

@@ -0,0 +1,15 @@
+{% if True or not is_purchased and not is_purchased_future %}
+<div class="section" style="padding-bottom: 0px;">
+  <div class="section__center center text-center">
+    <a
+        data-popup=".js-popup-buy"
+        class="main__btn btn"
+        data-is-camp="1"
+        href="#"
+    >
+      купить доступ от {{ camp_price }} руб./месяц
+    </a>
+    <a class="main__btn btn btn_stroke-black" href="{% url 'gift-certificates' %}">Подарить другу</a>
+  </div>
+</div>
+{% endif %}

project/templates/blocks/counters.html

@@ -0,0 +1,37 @@
+{% load static %}
+{% load ruplural from plural %}
+
+<div class="section section_school">
+  <div class="section__center center">
+    <div class="text text_only_curve">
+      <img class="text__curve text__curve_five" src="{% static 'img/curve-2.svg' %}" width="210">
+      <div class="title">Lil School в цифрах</div>
+    </div>
+    <div class="school school_main">
+      <div class="school__col">
+        <div class="school__preview">> {{ config.NUMBER_OF_STUDENTS }}</div>
+        <div class="school__title">{{ config.NUMBER_OF_STUDENTS|ruplural:'ученик,ученика,учеников' }}</div>
+        <div class="school__text">прошли обучение в&nbsp;Lil&nbsp;School</div>
+      </div>
+      <div class="school__col">
+        <div class="school__preview">{{ works_count }}</div>
+        <div class="school__title">{{ works_count|ruplural:'работа,работы,работ' }}</div>
+        <div class="school__text">
+          создано учениками Lil&nbsp;School.<br>
+          Большую часть из&nbsp;них легко найти в&nbsp;<a href="{{ config.SERVICE_INSTAGRAM_URL }}">инстаграм</a>
+        </div>
+      </div>
+      <div class="school__col">
+        <div class="school__preview">{{ config.NUMBER_OF_COUNTRIES }}</div>
+        <div class="school__title">{{ config.NUMBER_OF_COUNTRIES|ruplural:'страна,страны,стран' }}</div>
+        <div class="school__text">где живут талантливые ученики Lil&nbsp;School</div>
+      </div>
+      <div class="school__col">
+        <div class="school__preview">{{ config.NUMBER_OF_CITIES }}</div>
+        <div class="school__title">{{ config.NUMBER_OF_CITIES|ruplural:'город,города,городов' }}</div>
+        <div class="school__text">со&nbsp;всего мира со&nbsp;счастливыми учениками Lil&nbsp;School</div>
+      </div>
+    </div>
+    <div style="margin: 50px 0; text-align: center;"><a class="btn" href="/faq">Часто задаваемые вопросы</a></div>
+  </div>
+</div>

project/templates/lilcity/home.html

@@ -12,17 +12,13 @@
 
 {% block title %}School LIL.CITY{% endblock title %}
 {% block content %}
-  {% include "templates/blocks/promo.html" %}
   {% include "templates/blocks/messages.html" %}
-  {% include "templates/blocks/arts.html" %}
+  {% include "templates/blocks/buy.html" %}
-  {% include "templates/blocks/video.html" %}
   {% include "templates/blocks/about.html" %}
-  {% include "templates/blocks/gallery.html" %}
+  {% include "templates/blocks/video.html" %}
-  {% include "templates/blocks/mobile_apps.html" %}
+  {% include "templates/blocks/counters.html" %}
-  {% include "templates/blocks/online_school.html" %}
   {% include "templates/blocks/reviews.html" %}
+  {% include "templates/blocks/online_school.html" %}
   {% include "templates/blocks/teachers.html" %}
-  {% include "templates/blocks/last_courses.html" %}
   {% include "templates/blocks/partners.html" %}
-  {% include "templates/blocks/game.html" %}
 {% endblock content %}

project/templates/lilcity/index.html

@@ -32,10 +32,12 @@
 
 {% block layer_body %}
     {% include "templates/blocks/social.html" %}
-    {% include "templates/blocks/banner.html" %}
     <div class="outer js-outer">
       {% include "templates/blocks/header.html" %}
       <div id="lilcity-vue-app" class="container">
+        {% if banners %}
+          {% include "templates/blocks/banners.html" %}
+        {% endif %}
         {% block content %}{% endblock content %}
       </div>
       {% include "templates/blocks/footer.html" %}

project/views.py

@@ -11,6 +11,7 @@ from paymentwall.pingback import Pingback
 from apps.course.models import Course
 from apps.school.models import SchoolSchedule
 from apps.payment.models import SchoolPayment, UserGiftCertificate, Payment, DrawingCampPayment
+from apps.content.models import Banner
 
 User = get_user_model()
 
@@ -20,7 +21,7 @@ class AboutView(TemplateView):
 
 
 class IndexView(TemplateView):
-    template_name = 'templates/lilcity/main.html'
+    template_name = 'templates/lilcity/home.html'
 
     def get_context_data(self):
         referrer = self.request.GET.get('referrer')
@@ -99,6 +100,7 @@ class IndexView(TemplateView):
         shuffle(review_images)
 
         context.update({
+            'banners': Banner.get_for_page(Banner.PAGE_INDEX),
             'is_drawing_camp': True,
             'review_images': review_images,
             'gift_certificate': user_gift_certificate.gift_certificate if user_gift_certificate else None,

web/package.json

@@ -61,6 +61,7 @@
     "validator": "^9.2.0",
     "vue": "^2.5.13",
     "vue-autosize": "^1.0.2",
+    "vue-awesome-swiper": "^3.1.3",
     "vuedraggable": "^2.16.0",
     "vuejs-datepicker": "^0.9.25",
     "vuelidate": "^0.6.1"

web/src/js/app.js

@@ -3,6 +3,7 @@
  */
 import 'ilyabirman-likely/release/likely.js';
 import 'ilyabirman-likely/release/likely.css';
+import 'swiper/dist/css/swiper.css';
 import "./modules/common";
 import "./modules/header";
 import "./modules/search";
@@ -27,6 +28,7 @@ import Comments from '../components/Comments';
 import Likes from '../components/blocks/Likes.vue';
 import FAQ from '../components/FAQ.vue';
 import Countdown from '../components/blocks/Countdown.vue';
+import { swiper, swiperSlide } from 'vue-awesome-swiper';
 
 Vue.use(Vuelidate);
 Vue.use(VueAutosize);
@@ -41,6 +43,9 @@ const components = {
     'comments': Comments,
     'faq': FAQ,
     'vue-datepicker': DatePicker,
+    'countdown': Countdown,
+    swiper,
+    swiperSlide,
 };
 
 Object.assign(components, window.LIL_STORE.components);
@@ -54,13 +59,3 @@ const app = new Vue({
     },
     components: components
 });
-
-const bannerApp = new Vue({
-    el: '.banner',
-    data() {
-        return {
-            store: window.LIL_STORE,
-        }
-    },
-    components: {'countdown': Countdown,}
-});

web/src/js/modules/common.js

@@ -23,13 +23,6 @@ $(document).ready(function () {
         }
     });
 
-    // Инициируем начальное состояние шапки
-    updateHeader();
-
-    $(window).on('scroll', function () {
-        updateHeader();
-    });
-
     //===========BANNERS===============
     const $banner = $('[data-banner]');
     const bannerId = $banner.data('banner') + '';
@@ -130,30 +123,3 @@ $(document).ready(function () {
     $popupAuth.find(authPopupActiveTab == 'login' ? '.js-auth-type_login' : '.js-auth-type_registration').addClass('active');
     $popupAuth.find(authPopupActiveTab == 'login' ? '.js-auth-tab_login' : '.js-auth-tab_registration').show();
 });
-
-function updateHeader() {
-    const scrollOffset = $(window).scrollTop();
-    const headerElement = $('header');
-    if (scrollOffset >= 130) {
-        headerElement.css('background-color', '#fff');
-    } else {
-        headerElement.css('background-color', `rgba(255, 255, 255, ${scrollOffset / 130})`);
-    }
-    if (scrollOffset >= 150) {
-        headerElement.addClass('header--shadow');
-    } else {
-        headerElement.removeClass('header--shadow');
-    }
-
-    if($('.banner').is(':visible')) {
-        if(scrollOffset > 0) {
-            if(scrollOffset <= 140) {
-                headerElement.css('top', (140-scrollOffset)+'px');
-            } else {
-                headerElement.css('top', '0px');
-            }
-        } else {
-            headerElement.css('top', '');
-        }
-    }
-}

web/src/sass/_common.sass

@@ -120,6 +120,9 @@ button
   &_xs
     max-width: 540px
 
+.text-center
+  text-align: center
+
 .btn
   position: relative
   padding: 13px 24px 12px
@@ -334,7 +337,7 @@ a.btn
       width: 100%
 
 .header
-  position: fixed
+  position: absolute
   left: 0
   right: 0
   z-index: 100
@@ -664,7 +667,6 @@ a.btn
   display: flex
   position: relative
   min-height: 500px
-  margin-top: -100px
   padding: 120px 0 50px
   background-position: 50% 50%
   background-repeat: no-repeat
@@ -981,11 +983,7 @@ a[name]
   &_confirm
     padding: 30px 0 50px
   &_school
-    padding: 85px 0 20px
+    padding-bottom: 0px
-    +t
-      padding: 65px 0 55px
-    +m
-      padding: 45px 0
   &_benefits
     padding: 95px 0 100px
     background: $bg
@@ -1205,26 +1203,17 @@ a[name]
 .online
   display: block
   position: relative
-  padding: 55px 0 50px
+  padding-top: 55px
   background-position: 50% 50%
   background-repeat: no-repeat
   background-size: cover
-  color: white
+  color: black
   text-align: center
   z-index: 4
   +t
-    padding: 30px 0
+    padding-top: 30px
   +m
-    padding: 20px 0
+    padding-top: 20px
-  &:before
-    content: ''
-    position: absolute
-    top: 0
-    left: 0
-    width: 100%
-    height: 100%
-    background-image: linear-gradient(-1deg, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0.60) 100%)
-    z-index: -2
   &__type
     margin-bottom: 85px
     // +fb
@@ -1237,20 +1226,19 @@ a[name]
     +m
       margin-bottom: 40px
   &__title
-    margin-bottom: 2px
+    margin-bottom: 20px
-    // +fb
+    font-size: 35px
-    font-size: 50px
     line-height: (6/5)
     +t
-      margin-bottom: 6px
+      margin-bottom: 15px
       font-size: 24px
   &__text
     max-width: 600px
-    +t
+    font-size: 20px
-      margin-bottom: 65px
+    font-family: 'ProximaNova-Regular', sans-serif
+    margin-bottom: 0
     +m
       max-width: 80%
-      margin-bottom: 40px
   &__action
     +fb
     font-size: 10px
@@ -4379,142 +4367,83 @@ a
     width: 640px;
     height: 360px;
 
+.banners
+  margin-top: -100px
 
 .banner
-  height: 140px
+  padding-top: 100px
   text-align: center
   color: #fff
   position: relative
-  +m
-    height: auto
-  &__bg
-    background-repeat: no-repeat
-    position: absolute
-    width: 100%
-    height: 100%
-    left: 0
-    top: 0
-  &_countdown
-    +m
-      height: 140px
-  &__image-wrap
-    background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(159,159,159,0) 72%, rgba(221,221,221,0.65) 100%)
-    background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(159,159,159,0) 72%,rgba(221,221,221,0.65) 100%)
-    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(159,159,159,0) 72%,rgba(221,221,221,0.65) 100%)
-    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6dddddd',GradientType=0 )
-    width: 100%
-    height: 100%
-  &__image
-    +m
-      width: 100%
-      display: block
-      margin: 0 auto
-  &_colored &__image
-    +m
-      max-width: 100%
-      width: auto
-      opactiy: 0.8
   &__content
-    position: absolute
-    width: 100%
-    margin-top: 50px
-    +m
-      margin-top: 0px
-      top: 0
-  &_countdown &__content
-    margin-top: 15px
-    +m
-      margin-top: 5px
-  &__content-center
     width: 1024px
-    margin: 0 auto
+    padding-top: 10px
     display: flex
-    padding: 0 40px
+    margin: 0 auto
+    height: 300px
     +t
-      width: 100%
+      width: calc(100% - 40px)
+      padding-top: 0
     +m
-      width: 100%
+      height: 190px
-      padding: 0 10px
-  &_countdown &__content-center
-    +m
-      display: block
   &__text
     font-size: 30px
-    text-shadow: 0px 0px 3px rgba(0, 0, 0, 1)
-    +m
-      font-size: 16px
-  &_countdown &__text
-    font-size: 22px
     text-shadow: none
     color: black
-    width: 300px
+    +t
+      font-size: 25px
     +m
       font-size: 16px
       width: auto
       font-weight: bold
   &__link
-    display: block
-    color: #fff
-    font-size: 20px
-    text-shadow: 0px 0px 3px rgba(0, 0, 0, 1)
-    margin-top: 20px
-    +m
-      margin-top: 0px
-      font-size: 16px
-  &_countdown &__link
     font-size: 15px
     color: black
     text-shadow: none
     background: white
-    font-weight: bold
+    padding: 12px 22px
-    padding: 7px 20px
+    border-radius: 25px
-    border-radius: 20px
     border: 1px solid #ddd
     text-align: center
-    margin-top: 10px
+    margin-top: 50px
     display: inline-block
-    +m
-      margin-top: 25px
-  &_countdown &__link:hover
-    background: #ddd
-  &__hide
-    position: absolute
-    right: 5px
-    top: 5px
-    display: block
-    color: #fff
-    text-shadow: 0px 0px 3px rgba(0, 0, 0, 1)
     text-transform: uppercase
-    border-bottom: 1px dotted #fff
+    font-family: 'ProximaNova-Bold'
-    opacity: 0.3
+    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.05), 0 9px 24px 0 rgba(33, 74, 211, 0.1)
     +m
-      font-size: 11px
+      margin-top: 20px
+      font-size: 10px
+      padding: 10px 14px
+  &__link:hover
+    background: #ddd
+  &__image-column
+    flex: 50%
+    text-align: center
+    position: relative
+    padding-right: 20px
+    & img
+      position: absolute
+      bottom: 0
+      transform: translateX(-50%)
+      left: 50%
+      max-width: 100%
+      max-height: 100%
   &__text-column
-    flex: 1
+    flex: 50%
-  &_countdown &__text-column
     text-align: left
-    +m
+    padding-bottom: 20px
-      text-align: center
+    padding-right: 10px
-  &__countdown-column
+    padding-top: 40px
-    padding: 0 20px
-    +m
-      padding: 0
-      display: flex
-    & > div:nth-child(1)
-      +m
-        padding: 0 10px
-        border-radius: 3px
-        background: rgba(255, 255, 255, 0.3)
-        margin-right: 10px
-    & > div:nth-child(2)
-      +m
-        flex: 1
   &__countdown-title
     color: black
     font-size: 15px
     margin-bottom: 5px
     +m
       font-size: 15px
+  &__countdown-wrap
+    position: absolute
+    transform: translateX(-50%)
+    left: 50%
   &__countdown
     display: flex
     color: black