новая главная и мобильная версия

project/templates/blocks/about.html

@@ -1,12 +1,26 @@
 <div class="anchor" id="about"></div>
-<div class="section section_school">
+<div class="section section_flex section_about">
   <div class="section__center center">
-    <div class="text text_lg">
+    <div class="section__column section__column_img"
+      style="background-image: url(/static/img/child_think.png)">
+    </div>
+    <div class="section__column section__column_text">
+      <div class="title">Для кого?</div>
+      <div class="text text_left">
         <p>Вы житель мегаполиса и&nbsp;у&nbsp;вас нет времени дополнительно развивать своего ребенка?
       Или&nbsp;вы&nbsp;живете в&nbsp;маленьком городе,
         где&nbsp;нет&nbsp;качественных школ и&nbsp;секций для&nbsp;детей?</p>
         <p><b>Lil School</b>&nbsp;это решение для&nbsp;тех&nbsp;родителей, кто&nbsp;стремится дать лучшее своему ребенку.
           Учитесь не&nbsp;выходя из&nbsp;дома!</p>
       </div>
+      <div class="section__buttons">
+        <a class="btn" style="width: auto;"
+        data-popup=".js-popup-buy"
+        class="main__btn btn"
+        data-is-camp="1"
+        href="#">Узнать стоимость</a>
+        <a href="{% url 'gift-certificates' %}" class="btn btn_gray">Подарить другу</a>
+      </div>
+    </div>
   </div>
 </div>

project/templates/blocks/banners.html

@@ -25,7 +25,7 @@
           <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>
+            <a href="{{ banner.url }}" class="banner__link mobile-hide">{{ banner.button_text }}</a>
             {% endif %}
           </div>
           <div class="banner__image-column">
@@ -37,6 +37,9 @@
               <countdown date="{{ banner.future_date|date:'Y-m-d H:i:s' }}"></countdown>
             </div>
             {% endif %}
+            {% if banner.url %}
+            <a href="{{ banner.url }}" class="banner__link mobile-show">{{ banner.button_text }}</a>
+            {% endif %}
           </div>
         </div>
     </div>

project/templates/blocks/counters.html

@@ -1,11 +1,10 @@
 {% load static %}
 {% load ruplural from plural %}
 
-<div class="section section_school">
+<div class="section section_gray section_counters">
   <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">
+      <img class="text__curve text__curve_six" src="{% static 'img/curve-2.svg' %}" width="210">
-      <div class="title">Lil School в цифрах</div>
     </div>
     <div class="school school_main">
       <div class="school__col">
@@ -32,6 +31,5 @@
         <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/footer.html

@@ -1,7 +1,17 @@
 {% load static %}
 <footer class="footer">
   <div class="footer__center center">
-    <div class="footer__row footer__row_first">
+    <div class="footer__row footer__row_subscr mobile-show">
+      <div class="footer__col footer__col_md">
+        <div>Подписаться на&nbsp;самую интересную рассылку на&nbsp;планете</div>
+        <form class="subscribe" method="post" action="{% url 'subscribe' %}">
+          {% csrf_token %}
+          <input class="subscribe__input" name="email" placeholder="Email">
+          <button class="subscribe__btn btn btn_light">ПОДПИСАТЬСЯ</button>
+        </form>
+      </div>
+    </div>
+    <div class="footer__row">
       <div class="footer__col footer__col_md">
         <a class="footer__logo logo" href="/"></a>
         <div class="footer__content">Lil School – первая образовательная онлайн-платформа креативного мышления
@@ -57,15 +67,17 @@
         </nav>
       </div>
     </div>
-    <div class="footer__row footer__row_second">
+    <div class="footer__row footer__row_subscr">
       <div class="footer__col footer__col_md mobile-hide"></div>
       <div class="footer__col footer__col_md">
+        <div class="mobile-hide">
           <div>Подписаться на&nbsp;самую интересную рассылку на&nbsp;планете</div>
           <form class="subscribe" method="post" action="{% url 'subscribe' %}">
             {% csrf_token %}
             <input class="subscribe__input" name="email" placeholder="Email">
             <button class="subscribe__btn btn btn_light">ПОДПИСАТЬСЯ</button>
           </form>
+        </div>
         <div class="footer__copyright">
           Все права защищены ©&nbsp;Lil&nbsp;City,&nbsp;UAB. Все&nbsp;материалы принадлежат компании Lil&nbsp;City,&nbsp;UAB.<br>
           Никакая из&nbsp;частей этого сайта, текстов или&nbsp;изображений, не&nbsp;может быть&nbsp;скопирована, использована или&nbsp;передана

project/templates/blocks/online_school.html

@@ -1,19 +1,11 @@
 <div class="section section_school">
   <div class="section__center center">
     <div class="title title_center">Процесс</div>
-    <div class="text">
+    <div class="school school_main school_three-col">
-      Онлайн-образование &mdash; это очень удобно! Можете учиться в&nbsp;пижаме, без&nbsp;макияжа
-        и&nbsp;с&nbsp;огурцами на&nbsp;лице!)
-    </div>
-    <div class="school school_main">
       <div class="school__col">
         <div class="school__preview">Видеоуроки</div>
         <div class="school__text">Каждый день!</div>
       </div>
-      <div class="school__col">
-        <div class="school__preview">В 17:00</div>
-        <div class="school__text">По московскому времени</div>
-      </div>
       <div class="school__col">
         <div class="school__preview">7 дисциплин</div>
         <div class="school__text">В разных техниках</div>
@@ -23,6 +15,8 @@
         <div class="school__text">Хранится 7 дней</div>
       </div>
     </div>
-    <div class="letsgo"></div>
+    <div style="margin: 50px 0px 15px; text-align: center;">
+      <a class="btn btn_white" href="/faq">Часто задаваемые вопросы</a>
+    </div>
   </div>
 </div>

project/templates/blocks/partners.html

@@ -1,5 +1,5 @@
 {% load static %}
-<div class="section" id="partners">
+<div class="section section_partners" id="partners">
   <div class="section__center center">
     <a name="partners">
       <div class="title title_center">Наши партнеры</div>

project/templates/blocks/reviews.html

@@ -3,12 +3,16 @@
   <div class="reviews-section__center section__center center center_md">
     <div class="reviews-section__title">
       <a id="reviews" name="reviews">
-        <div class="title title_left">Отзывы о Lil School</div>
+        <div class="title">Отзывы о Lil School</div>
       </a>
-      <div class="text">Тёплых отзывов настолько много, что потребуется несколько суток, чтобы их просмотреть
+      <div class="text text_left">
+        <p>Тёплых отзывов настолько много, что потребуется несколько суток, чтобы их просмотреть
         и несколько месяцев чтобы прочитать.<br>
-        P.S.: Но мы читаем их все!)
+        P.S.: Но мы читаем их все!)</p>
       </div>
+      {% if not request.user.is_authenticated and not request.user_agent.is_mobile %}
+      <a class="btn btn_pink-blue" href="#" data-popup=".js-popup-auth">Присоединиться к Lil School</a>
+      {% endif %}
     </div>
     <div class="reviews-section__reviews reviews" data-review-images="{{ review_images|join:',' }}">
       <div class="reviews__wrap">

project/templates/blocks/teachers.html

@@ -1,33 +1,34 @@
 {% load static %}
 <div id="teachers" class="anchor"></div>
-<div class="section">
+<div class="section section_flex">
-  <div class="section__center center center_md">
+  <div class="section__center center">
-    <div class="title title_center">Преподаватели</div>
+    <div class="section__column section__column_text">
-    <div class="text">
+      <div class="title">Преподаватели</div>
-      <p>Преподаватели Lil School имеют большой опыт, поэтому с первых минут детям будет интересно с нами.</p>
+      <div class="text text_left text_only_curve mobile-show"><img src="/static/img/curve-3.svg" class="text__curve" style="
-      <img class="text__curve text__curve_three" src="{% static 'img/curve-3.svg' %}">
+          right: 0px;
+          top: -30px;
+      "></div>
+      <div class="text text_left">
+        <p>Преподаватели Lil School имеют большой опыт, поэтому с первых минут детям будет интересно.</p>
       </div>
+    </div>
+    <div class="section__column mobile-hide" style="padding-left: 100px;">
+      <div class="text text_left text_only_curve">
+        <img class="text__curve" src="{% static 'img/curve-3.svg' %}">
+      </div>
+    </div>
+  </div>
+  <div class="section__center center">
     <div class="teachers">
       {% for teacher in teachers %}
+        {% cycle '<div class="teachers__row">' '' %}
           <div class="teachers__item">
+            <div class="teachers__left-column">
               <div class="teachers__ava ava">
                 {% if teacher.photo %}
                 <img class="ava__pic" src="{{ teacher.photo.url }}"> {% else %}
                 <img class="ava__pic" src="{% static 'img/user_default.jpg' %}"> {% endif %}
               </div>
-        <div class="teachers__wrap">
-          <div class="teachers__title">
-            <div class="teachers__title-name">
-              <a href="{{ teacher.url }}">{{ teacher.get_full_name }}</a>{% if teacher.instagram_hashtag %},
-              <a href='https://www.instagram.com/explore/tags/{{ teacher.instagram_hashtag }}/' target="_blank">
-                {{ teacher.instagram_hashtag }}
-              </a>
-              {% endif %}
-            </div>
-            {% if teacher.trial_lesson %}
-            <a data-video-url="{{ teacher.trial_lesson }}" data-trial-lesson="1" href="#" class="btn btn_light js-video-modal">ПРОБНЫЙ УРОК</a>
-            {% endif %}
-          </div>
               <div class="teachers__social">
                 {% if teacher.facebook %}
                 <a class="social__item" href="{{ teacher.facebook }}" target="_blank">
@@ -61,6 +62,20 @@
                 </a>
                 {% endif %}
               </div>
+            </div>
+            <div class="teachers__right-column">
+              <div class="teachers__title">
+                <div class="teachers__title-name">
+                  <a href="{{ teacher.url }}">{{ teacher.get_full_name }}</a>{% if teacher.instagram_hashtag %},
+                  <a href='https://www.instagram.com/explore/tags/{{ teacher.instagram_hashtag }}/' target="_blank">
+                    {{ teacher.instagram_hashtag }}
+                  </a>
+                  {% endif %}
+                </div>
+                {% if teacher.trial_lesson %}
+                <a data-video-url="{{ teacher.trial_lesson }}" data-trial-lesson="1" href="#" class="btn btn_light js-video-modal">ПРОБНЫЙ УРОК</a>
+                {% endif %}
+              </div>
               {% if teacher.about %}
               <div class="teachers__content">
                 {{ teacher.about }}
@@ -68,8 +83,11 @@
               {% endif %}
             </div>
           </div>
+        {% cycle '' '</div>' %}
       {% endfor %}
     </div>
-    <div class="text text_mb0">Если хотите к нам в команду, то <a href="{% url 'author_request' %}">отправьте</a> нам заявку</div>
+  </div>
+  <div class="section__center center">
+    <div class="text text_mb0 text_left">Если хотите к нам в команду, то <a href="{% url 'author_request' %}">отправьте</a> нам заявку</div>
   </div>
 </div>

project/templates/blocks/video.html

@@ -1,10 +1,22 @@
-<div class="section section_video">
+<div class="section section_gray section_flex section_video">
-  <div class="section__center center center_sm" style="text-align: center;">
+  <div class="section__center center">
-    <div class="title">Пробный урок</div>
+    <div class="section__column section__column_text">
+      <div class="title">Попробуйте бесплатно</div>
+      <div class="text text_left">
+        <p>Тысячи видео-уроков на разные темы для развития творческого мышления уже ждут вас. Учитесь не выходя из дома!</p>
+      </div>
+      <div class="section__buttons mobile-hide">
+        <a href="#" class="btn btn_white js-video-modal" style="width: auto;"
+        data-video-url="{{ config.MAIN_PAGE_VIDEO_URL|safe }}" data-trial-lesson="1">Смотреть бесплатный урок</a>
+      </div>
+    </div>
+    <div class="section__column section__column_img">
       <img class="main-video-preview js-video-modal" data-video-url="{{ config.MAIN_PAGE_VIDEO_URL|safe }}" data-trial-lesson="1"
            src="{{ config.MAIN_PAGE_VIDEO_PREVIEW_IMG.url }}"/>
-    <a href="#" class="btn js-video-modal btn_stroke-black" style="margin: 20px;"
+      <div class="section__buttons mobile-show">
-       data-video-url="{{ config.MAIN_PAGE_VIDEO_URL|safe }}" data-trial-lesson="1">Смотреть бесплатно</a>
+        <a href="#" class="btn btn_white js-video-modal"
-    <div>Много развивающих видео на&nbsp;нашем <a href="{{ config.SERVICE_YOUTUBE_URL|safe }}">YouTube&nbsp;канале</a></div>
+        data-video-url="{{ config.MAIN_PAGE_VIDEO_URL|safe }}" data-trial-lesson="1">Смотреть бесплатный урок</a>
+      </div>
+    </div>
   </div>
 </div>

project/templates/lilcity/home.html

@@ -13,7 +13,6 @@
 {% block title %}School LIL.CITY{% endblock title %}
 {% block content %}
   {% include "templates/blocks/messages.html" %}
-  {% include "templates/blocks/buy.html" %}
   {% include "templates/blocks/about.html" %}
   {% include "templates/blocks/video.html" %}
   {% include "templates/blocks/counters.html" %}

project/views.py

@@ -116,14 +116,11 @@ class IndexView(TemplateView):
             'camp_price': DrawingCampPayment.MONTH_PRICE,
             'min_school_price': SchoolSchedule.objects.aggregate(Min('month_price'))['month_price__min'],
             'school_schedules': SchoolSchedule.objects.filter(weekday__in=DrawingCampPayment.WEEKDAYS, is_camp=True),
-            'school_schedules_purchased': DrawingCampPayment.WEEKDAYS if camp_payment_exists else [], # set(school_schedules_purchased),
+            'school_schedules_purchased': DrawingCampPayment.WEEKDAYS if camp_payment_exists else [],
             'teachers': User.objects.filter(role=User.TEACHER_ROLE, show_in_mainpage=True),
             'works_count': Payment.objects.filter(status__in=Payment.PW_PAID_STATUSES).count() * 7,
-            # 'subscription_ends': school_payment.filter(add_days=False).first().date_end if school_payment_exists else None,
-            # 'subscription_ends_humanize': school_payment.filter(add_days=False).first().date_end_humanize if school_payment_exists else None,
             'subscription_ends': camp_payment.latest('date_end').date_end if camp_payment_exists else None,
             'subscription_ends_humanize': camp_payment.latest('date_end').date_end_humanize if camp_payment_exists else None,
-
             'school_purchased_future': False,
             'is_purchased_future': False,
 

web/src/sass/_common.sass

@@ -872,6 +872,8 @@ a[name]
       margin-bottom: 35px
       +t
         margin: 5px 5px 15px 5px
+      +m
+        margin-bottom: 15px
   &__curve
     position: absolute
     pointer-events: none
@@ -957,9 +959,7 @@ a[name]
 .section
   padding: 50px 0
   +t
-    padding: 30px 0
+    padding: 40px 0
-  +m
-    padding: 20px 0
   &_gray
     background: $bg
   &_pink-light
@@ -1009,22 +1009,76 @@ a[name]
     background: $bg
     +t
       padding: 80px 0 40px
+
   &_video
-  	padding: 70px 0 70px
+    padding: 70px 0
+
+    +m
+      padding: 30px 0
+
+    & img
+      height: 270px
+      border-radius: 10px
+      box-shadow: 0 30px 60px 0 rgba(0, 0, 0, 0.2)
+      width: auto
+
+      +m
+        width: 100%
+
+    & .btn
+      box-shadow: 0 11px 24px 0 rgba(255, 147, 147, 0.3)
+
+  &_video &__column_img
+    text-align: center
+
+  &_video &__center
+    +m
+      flex-direction: column
+
+  &_video &__buttons
+    +m
+      padding-top: 15px;
+
+  &_about
+    padding-bottom: 0
+
+  &_about &__center
+    +m
+      flex-direction: column-reverse
+
+  &_about &__column-img
+    background-image: url(/static/img/child_think.png)
+
+    +m
+      flex: 0 0 300px
+
   &_flex &__center
     display: flex
 
+  &_school .title
+    +m
+      text-align: left
+
+  &_partners
+    .title
+      +m
+        text-align: left
+    .text
+      +m
+        text-align: left
+
   &__column
     flex: 50%
 
     &_img
       background-position: bottom center
       background-size: contain
+      background-repeat: no-repeat
 
     &_text
       padding-right: 20px
 
-  &__column .text
+  & .text
     font-size: 20px
 
   &__title
@@ -1035,25 +1089,27 @@ a[name]
   &__buttons
     margin-bottom: 45px
 
-    & .btn
+    +m
-      border-radius: 10px
-      box-shadow: 0 11px 20px 0 rgba(0, 0, 0, 0.1)
-
-  &_video &__column_img
       text-align: center
+      margin-bottom: 10px
 
-    & img
+    & .btn
-      height: 270px
+      width: 200px
-      border-radius: 10px
+      margin-bottom: 15px
-      box-shadow: 0 30px 60px 0 rgba(0, 0, 0, 0.2)
+      margin-right: 10px
-      width: auto
 
-  &_video .btn
+  & .btn
-    box-shadow: 0 11px 24px 0 rgba(255, 147, 147, 0.3)
+    border-radius: 10px
+    box-shadow: 0 11px 20px 0 rgba(0, 0, 0, 0.1)
 
   &_counters .text_only_curve
     margin-bottom: 0
 
+    & img
+      +m
+        left: -10px
+        bottom: -125px
+
 
 .reviews-section
   background: linear-gradient(to bottom, rgba(248,248,248,1) 0%, rgba(254,244,244,1) 100%)
@@ -1062,7 +1118,6 @@ a[name]
     display: flex
     height: 650px
     +m
-      padding-bottom: 20px
       flex-direction: column
   &__title
     flex: 0 0 60%;
@@ -1071,11 +1126,6 @@ a[name]
     +m
       padding: 20px 0 0
       flex: 0
-      text-align: center
-    .text
-      text-align: left
-      +m
-        text-align: center
 
 .ava
   display: block
@@ -1600,27 +1650,37 @@ a.grey-link
     height: 100%
 
 .teachers
-  margin-bottom: 50px
+  &__row
-  +t
+    display: flex
-    margin-bottom: 0
+    +m
+      flex-direction: column
   &__item
     display: flex
     margin-bottom: 40px
-  &__ava
+    margin-right: 40px
-    height: 140px
+    padding: 30px 35px
-    margin-right: 25px
+    border-radius: 10px
-    flex: 0 0 140px
+    box-shadow: 0 10px 25px 0 rgba(33, 74, 211, 0.2)
+    width: calc(50% - 20px)
+    +m
+      width: 100%
+      margin-bottom: 25px
+      padding: 20px 15px
+    &:nth-child(2)
+      margin-right: 0px
+  &__left-column
+    margin-right: 40px
+    flex: 0 0 80px
     +t
-      height: 100px
       margin-right: 20px
-      flex: 0 0 100px
+  &__ava
-    +m
+    height: 80px
-      height: 95px
-      margin-right: 25px
-      flex: 0 0 95px
   &__title
     margin-bottom: 5px
     display: flex
+    font-family: 'ProximaNova-Regular', sans-serif
+    font-size: 20px
+    letter-spacing: 2px
     +fb
     font-size: 20px
     letter-spacing: 2px
@@ -1632,14 +1692,15 @@ a.grey-link
     &-name
       flex: 1
   &__social
+    margin-top: 15px
     .social__item
-      margin-right: 3px
+      margin-right: 5px
-      font-size: 25px
+      font-size: 20px
     +fb
   &__content
-    font-size: 16px
+    font-size: 15px
     line-height: (22/16)
-  &__wrap
+  &__right-column
     flex: 1
 
 .toggle
@@ -2005,9 +2066,6 @@ a.grey-link
   &_lg &__content
     padding: 0 0 0 30px
     font-size: 16px
-    &:before,
-    &:after
-
 
 .footer
   padding: 50px 0 30px
@@ -2024,7 +2082,7 @@ a.grey-link
     flex: 0 0 25%
     +t
       margin: 10px
-  &__row_second &__col:nth-child(2)
+  &__row_subscr &__col:nth-child(2)
       flex: 1
   &__nav
     +m
@@ -3932,16 +3990,6 @@ a.grey-link
   &_info
     background: $green
 
-
-.mobile-hide
-  +m
-    display: none
-
-.mobile-show
-  display: none
-  +m
-    display: block
-
 .school
   display: flex
   position: relative
@@ -3952,6 +4000,11 @@ a.grey-link
     margin-bottom: -40px
   +m
     margin: 0 -10px -30px
+  &_three-col
+    margin-top: 50px
+    +m
+      flex-direction: column
+      margin-top: 40px
   &__col
     padding: 0 15px
     text-align: center
@@ -3962,6 +4015,10 @@ a.grey-link
     +m
       margin-bottom: 30px
       padding: 0 10px
+  &_three-col &__col
+    flex: 0 0 33%
+    +t
+      flex: 0 0 33%
   &__preview
     margin-bottom: 25px
     font-size: 0
@@ -4438,7 +4495,8 @@ a
       padding-top: 0
     +m
       padding-left: 0
-      height: 220px
+      height: 260px
+      flex-direction: column
   &__text
     font-size: 30px
     text-shadow: none
@@ -4448,7 +4506,6 @@ a
     +m
       font-size: 16px
       width: auto
-      font-weight: bold
   &__link
     font-size: 15px
     color: black
@@ -4467,6 +4524,11 @@ a
       margin-top: 20px
       font-size: 10px
       padding: 10px 14px
+      left: 50%
+      position: absolute
+      margin-left: -114px
+      width: 200px
+      bottom: 35px
   &__link:hover
     background: #ddd
   &__image-column
@@ -4474,6 +4536,8 @@ a
     text-align: center
     position: relative
     padding-right: 20px
+    +m
+      flex: 1
     & img
       position: absolute
       bottom: 0
@@ -4489,6 +4553,7 @@ a
     padding-top: 40px
     +m
       padding-top: 20px
+      flex: 0
   &__countdown-title
     color: black
     font-size: 15px
@@ -4499,6 +4564,11 @@ a
     position: absolute
     transform: translateX(-50%)
     left: 50%
+    padding: 5px
+    background: rgba(255, 255, 255, 0.5)
+    border-radius: 5px
+    +m
+      padding: 5px 20px
   &__countdown
     display: flex
     color: black
@@ -4649,6 +4719,9 @@ a
     height: 200px
     +t
       margin-bottom: 10px
+    +m
+      margin-left: auto
+      margin-right: auto
   &__cover
     object-fit: cover;
     width: 100%;
@@ -4837,3 +4910,12 @@ a
     padding-top: 80px
     min-height: 200px
     padding-bottom: 60px
+
+.mobile-hide
+  +m
+    display: none
+
+.mobile-show
+  display: none
+  +m
+    display: block