страница с ценами

project/templates/lilcity/packages.html

@@ -38,6 +38,40 @@
         </div>
       </div>
       {% endfor %}
+      <div class="mobile-show">&nbsp;</div>
+    </div>
+  </div>
+</div>
+<div class="section section_packages">
+  <div class="section__center center">
+    <div class="subtitle3">
+      Учиться вы можете и бесплатно
+    </div>
+    <div class="text2">
+      <p>
+        Приглашайте друзей и знакомых на платформу и получайте 30% от суммы их первой покупки.<br>
+        Просто отправьте специальную ссылку, по которой ваши друзья могут присоединиться к нам.
+      </p>
+      <p><a href="#">Узнать больше о том, как зарабатывать вместе с Lil School</a></p>
+      <p style="text-align: center; margin: 35px 0;">
+        <a href="#" class="btn btn_white btn_shadow">Получить бесплатный урок 🎁</a>
+      </p>
+      <p></p>
+    </div>
+    <div class="subtitle3">Частые вопросы</div>
+    <div class="text2">
+      <p>
+        <b>Если мы купили на месяц, а хотим приобрести на год?</b><br>
+        Сумма автоматически пересчитается и останется только доплатить разницу
+      </p>
+      <p>
+        <b>Могу ли я перейти на более низкий тариф?</b><br>
+        Можете, но компенсация разницы мы сможем возместить только через 60 дней.
+      </p>
+      <p>
+        <b>Если мы не успели использовать привилегии золотого статуса в течение года?</b><br>
+        Желательно использовать все привелегии в установленный срок, тк платформа автоматически предоставляет доступ. В других случаях администрация школы может рассмотреть сложившуюся ситуацию в индивидуальном порядке.
+      </p>
     </div>
   </div>
 </div>

web/src/sass/_common.sass

@@ -218,6 +218,9 @@ button
     color: $cl
   &_pink-blue
     background-image: linear-gradient(100deg, #8febff, #ffa2cb)
+  &_shadow
+    border-radius: 10px
+    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.05), 0 9px 24px 0 rgba(33, 74, 211, 0.1)
   &_md
     padding: 18px 24px 17px
     +m
@@ -852,6 +855,11 @@ a[name]
   font-size: 18px
   font-weight: bold
 
+.subtitle3
+  margin-bottom: 8px
+  font-size: 20px
+  line-height: 25px
+
 .text
   position: relative
   max-width: 620px
@@ -954,6 +962,12 @@ a[name]
     +f
     font-size: 20px
 
+.text2
+  p
+    font-size: 14px
+    margin-bottom: 20px
+    line-height: 18px
+
 .section
   padding: 50px 0
   +t
@@ -1054,6 +1068,11 @@ a[name]
   &_counters .text_only_curve
     margin-bottom: 0
 
+  &_packages &__center
+    width: 680px
+    +m
+      width: 100%
+
 
 .reviews-section
   background: linear-gradient(to bottom, rgba(248,248,248,1) 0%, rgba(254,244,244,1) 100%)
@@ -4844,6 +4863,8 @@ a
   background: white
   padding: 30px
   margin: -50px
+  +m
+    margin: 0
 
 .package
   border-radius: 10px
@@ -4854,6 +4875,8 @@ a
   display: flex
   flex-direction: column
   text-align: center
+  +m
+    min-width: 240px
 
   &__btn
     width: 100%