feat: added callback

assets/css/index.css

@@ -407,6 +407,48 @@ h3 {
   background-color: white;
 }
 
+.input {
+  display: block;
+  padding: 27px 24px 25px;
+  box-sizing: border-box;
+  font-weight: 400;
+  font-size: 20px;
+  line-height: 140%;
+  color: #ffffff;
+  border: 1px solid #ffffff;
+  border-radius: 60px;
+  background-color: #609eff;
+  outline-color: rgba(255, 255, 255, 0.1);
+}
+@media (max-width: 768px) {
+  .input {
+    padding: 21px 24px 18px;
+    font-size: 17px;
+    line-height: 140%;
+  }
+}
+.input::-moz-placeholder {
+  color: #ffffff;
+}
+.input::placeholder {
+  color: #ffffff;
+}
+.input--name {
+  background: url(../img/icons/accountInput.svg) center left 31px no-repeat;
+}
+.input--phone {
+  background: url(../img/icons/phoneInput.svg) center left 31px no-repeat;
+}
+.input--name, .input--phone {
+  padding-left: 80px;
+}
+@media (max-width: 768px) {
+  .input--name, .input--phone {
+    padding-left: 60px;
+    background-position: center left 20px;
+  }
+}
+
 .header {
   padding: 26px 0 29px;
 }
@@ -2569,3 +2611,88 @@ h3 {
   display: block;
   height: 20px;
 }
+
+.callback {
+  position: relative;
+  z-index: 100;
+  margin: 100px 0 0;
+}
+@media (max-width: 768px) {
+  .callback {
+    margin: 60px 0 0;
+  }
+}
+.callback__title {
+  margin: 21px 0;
+  color: #ffffff;
+}
+@media (max-width: 768px) {
+  .callback__title {
+    margin: 21px 0 15px;
+  }
+}
+.callback__title > span {
+  color: #ffffff;
+}
+.callback__wrapper {
+  padding: 42px 64px;
+  border-radius: 60px 10px;
+  background: url(../img/grid.svg) center no-repeat;
+  background-color: #609eff;
+}
+@media (max-width: 1240px) {
+  .callback__wrapper {
+    padding: 40px 16px;
+    margin: 0 -15px;
+  }
+}
+.callback__description {
+  max-width: 900px;
+  margin: 0 auto 35px;
+  font-weight: 400;
+  font-size: 21px;
+  line-height: 139%;
+  text-align: center;
+  color: #ffffff;
+}
+@media (max-width: 768px) {
+  .callback__description {
+    margin: 14px 0 37px;
+    font-size: 16px;
+  }
+}
+.callback__form {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 20px;
+  margin: 0 0 27px;
+}
+.callback__form > * {
+  flex: 0 0 calc(33.3333333333% - 13.3333333333px);
+}
+@media (max-width: 1240px) {
+  .callback__form > * {
+    flex: 0 0 calc(50% - 10px);
+  }
+}
+@media (max-width: 768px) {
+  .callback__form > * {
+    flex: 1 1 100%;
+  }
+}
+.callback__form > .button {
+  max-width: none;
+  justify-content: center;
+  padding-left: 24px;
+  padding-right: 24px;
+}
+.callback__disclaimer {
+  font-weight: 300;
+  font-size: 14px;
+  line-height: 138%;
+  letter-spacing: 0.01em;
+  text-align: center;
+  color: rgba(255, 255, 255, 0.4);
+}

assets/img/icons/accountInput.svg

@@ -0,0 +1,5 @@
+<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="13" cy="13" r="13" fill="white"/>
+<path opacity="0.99" fill-rule="evenodd" clip-rule="evenodd" d="M13.2841 7.05407C14.6263 7.03715 15.6038 7.62113 16.2167 8.80602C16.6729 9.94855 16.529 11.0065 15.7851 11.9798C14.8318 12.9936 13.6934 13.2772 12.3701 12.8304C11.3979 12.4139 10.7928 11.6903 10.5546 10.6595C10.3398 9.24878 10.8349 8.16969 12.04 7.42223C12.4344 7.21871 12.8491 7.09599 13.2841 7.05407Z" fill="#609EFF"/>
+<path opacity="0.99" fill-rule="evenodd" clip-rule="evenodd" d="M10.4148 13.7412C10.4447 13.7356 10.4701 13.7441 10.491 13.7665C11.2996 14.6277 12.2983 15.0763 13.4871 15.1123C14.6753 15.0749 15.674 14.6263 16.4832 13.7665C17.3529 14.0301 18.0512 14.5379 18.5779 15.29C19.0519 16.0822 19.035 16.8609 18.5271 17.6259C18.0715 18.1099 17.5172 18.4273 16.8641 18.5781C16.1635 18.7507 15.4525 18.8523 14.7312 18.8828C13.7743 18.9367 12.818 18.9282 11.8621 18.8574C11.0305 18.8146 10.2265 18.6454 9.44999 18.3496C8.17761 17.7726 7.78406 16.8289 8.26933 15.5185C8.60364 14.9134 9.07336 14.4436 9.67851 14.1093C9.92548 13.9858 10.1709 13.8631 10.4148 13.7412Z" fill="#609EFF"/>
+</svg>

assets/img/icons/phoneInput.svg

@@ -0,0 +1,13 @@
+<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="13" cy="13" r="13" fill="white"/>
+<g clip-path="url(#clip0_141_7832)">
+<path d="M13.5029 6.5203C13.5029 6.53554 13.475 6.7412 13.4395 6.98241C13.4039 7.22363 13.376 7.43945 13.376 7.46484C13.376 7.50038 13.4141 7.51562 13.574 7.54101C14.351 7.66542 15.2879 8.03105 15.9658 8.48046C16.3822 8.75722 16.6463 8.9705 16.9916 9.31327C17.8854 10.1969 18.4719 11.2658 18.7461 12.5049C18.7918 12.7232 18.807 12.7588 18.8502 12.7537C18.9746 12.7435 19.7643 12.609 19.7795 12.5963C19.7896 12.5887 19.7693 12.4541 19.7363 12.2992C19.2564 10.0826 17.7889 8.20116 15.7576 7.20331C15.1152 6.88593 14.4652 6.66757 13.8584 6.56347C13.7264 6.54062 13.5918 6.51523 13.5613 6.50761C13.5283 6.49999 13.5029 6.50507 13.5029 6.5203Z" fill="#609EFF"/>
+<path d="M8.79062 7.76963C8.54433 7.82041 8.43261 7.90673 7.78007 8.5542C7.43476 8.89697 7.10976 9.2372 7.06406 9.31084C6.60703 10.0116 6.74414 11.1745 7.46523 12.7411C8.27519 14.4931 9.72753 16.2603 11.3957 17.5196C12.3783 18.261 13.5488 18.8983 14.5187 19.2233C15.3211 19.4899 16.0752 19.5661 16.5551 19.4265C16.9156 19.3224 16.9943 19.2614 17.7103 18.5505C18.3121 17.9513 18.3832 17.87 18.4568 17.7126C18.5279 17.5603 18.5406 17.5069 18.5406 17.3419C18.5406 17.1769 18.5279 17.1235 18.4568 16.9712C18.3807 16.8087 18.307 16.7274 17.4564 15.8794C16.7074 15.1329 16.5119 14.9501 16.3977 14.8968C16.2047 14.8028 16.0244 14.7724 15.8594 14.8028C15.5852 14.8561 15.4811 14.9323 14.8463 15.5569C14.5162 15.8819 14.2268 16.1485 14.2039 16.1485C14.1404 16.1485 13.5437 15.8413 13.3127 15.689C12.4139 15.105 11.3957 14.1122 10.7432 13.188C10.5197 12.8706 10.4156 12.6954 10.2658 12.3856C10.1719 12.1927 10.149 12.1241 10.1643 12.0683C10.1744 12.0226 10.3877 11.789 10.7609 11.4132C11.2814 10.8901 11.3525 10.8089 11.4211 10.654C11.5557 10.362 11.5252 10.0827 11.3348 9.79326C11.2865 9.71963 10.8549 9.27021 10.375 8.79287C9.59296 8.01338 9.48632 7.91689 9.33906 7.84834C9.15878 7.76455 8.95312 7.73662 8.79062 7.76963Z" fill="#609EFF"/>
+<path d="M13.3686 9.16352C13.333 9.34633 13.2416 10.0801 13.2518 10.0903C13.2568 10.0979 13.3533 10.1207 13.465 10.1436C14.7676 10.4127 15.8061 11.4258 16.1184 12.7309C16.1463 12.8401 16.1691 12.934 16.1742 12.9366C16.1869 12.9467 17.134 12.7791 17.1467 12.7665C17.1645 12.7512 17.1213 12.5354 17.0527 12.3018C16.5957 10.6844 15.2348 9.44536 13.5742 9.13305L13.3813 9.09751L13.3686 9.16352Z" fill="#609EFF"/>
+</g>
+<defs>
+<clipPath id="clip0_141_7832">
+<rect width="13" height="13" fill="white" transform="translate(6.7998 6.5)"/>
+</clipPath>
+</defs>
+</svg>

assets/scss/_l-callback.scss

@@ -0,0 +1,86 @@
+.callback {
+  position: relative;
+  z-index: 100;
+  margin: 100px 0 0;
+
+  @include tablet {
+    margin: 60px 0 0;
+  }
+
+  &__title {
+    margin: 21px 0;
+    color: $white;
+
+    @include tablet {
+      margin: 21px 0 15px;
+    }
+
+    & > span {
+      color: $white;
+    }
+  }
+
+  &__wrapper {
+    padding: 42px 64px;
+    border-radius: 60px 10px;
+    background: url(../img/grid.svg) center no-repeat;
+    background-color: $blue;
+
+    @include desktop {
+      padding: 40px 16px;
+      margin: 0 -15px;
+    }
+  }
+
+  &__description {
+    max-width: 900px;
+    margin: 0 auto 35px;
+    font-weight: 400;
+    font-size: 21px;
+    line-height: 139%;
+    text-align: center;
+    color: $white;
+
+    @include tablet {
+      margin: 14px 0 37px;
+      font-size: 16px;
+    }
+  }
+
+  &__form {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: 20px;
+    margin: 0 0 27px;
+
+    & > * {
+      flex: 0 0 calc(100% / 3 - 20px / 3 * 2);
+
+      @include desktop {
+        flex: 0 0 calc(100% / 2 - 20px / 2);
+      }
+
+      @include tablet {
+        flex: 1 1 100%;
+      }
+    }
+
+    & > .button {
+      max-width: none;
+      justify-content: center;
+      padding-left: 24px;
+      padding-right: 24px;
+    }
+  }
+
+  &__disclaimer {
+    font-weight: 300;
+    font-size: 14px;
+    line-height: 138%;
+    letter-spacing: 0.01em;
+    text-align: center;
+    color: rgba($color: $white, $alpha: 0.4);
+  }
+}

assets/scss/_m-input.scss

@@ -0,0 +1,43 @@
+.input {
+  display: block;
+  padding: 27px 24px 25px;
+  box-sizing: border-box;
+  font-weight: 400;
+  font-size: 20px;
+  line-height: 140%;
+  color: $white;
+  border: 1px solid $white;
+  border-radius: 60px;
+  background-color: $blue;
+  outline-color: rgba($color: $white, $alpha: 0.1);
+
+  @include tablet {
+    padding: 21px 24px 18px;
+    font-size: 17px;
+    line-height: 140%;
+  }
+
+  &::placeholder {
+    color: $white;
+  }
+
+  
+
+  &--name {
+    background: url(../img/icons/accountInput.svg) center left 31px no-repeat;
+  }
+
+  &--phone {
+    background: url(../img/icons/phoneInput.svg) center left 31px no-repeat;
+  }
+
+  &--name,
+  &--phone {
+    padding-left: 80px;
+
+    @include tablet {
+      padding-left: 60px;
+      background-position: center left 20px ;
+    }
+  }
+}

assets/scss/index.scss

@@ -11,6 +11,7 @@
 @import './m-social-link';
 @import './m-button';
 @import './m-tag';
+@import './m-input';
 
 // Layouts
 
@@ -30,3 +31,4 @@
 @import './l-price';
 @import './l-team';
 @import './l-faq';
+@import './l-callback';

index.html

@@ -487,6 +487,44 @@
         </div>
       </section>
 
+      <section class="callback">
+        <div class="container">
+          <div class="callback__wrapper">
+            <div class="tag tag--light">Получите помощь</div>
+
+            <h2 class="callback__title">
+              Оставьте заявку
+              <span>и получите помощь прямо сейчас!</span>
+            </h2>
+
+            <p class="callback__description">
+              Наши специалисты проконсультируют вас по любым вопросам. А если требуется срочная и принудительная транспортировка, то мы организуем трансфер в течении 2 часов
+            </p>
+
+            <form class="callback__form">
+              <input
+                class="input input--name"
+                name="name"
+                type="text"
+                placeholder="Введите ваше имя"
+              />
+              <input
+                class="input input--phone"
+                name="phone"
+                type="text"
+                placeholder="Введите ваш телефон"
+              />
+              <button class="button button--lg button--light">Получить помощь</button>
+            </form>
+
+            <div class="callback__disclaimer">
+              Оставляя заявку на нашем сайте, вы соглашаетесь с политикой обработки персональных
+              данных и получение новостей компании, скидках и акциях
+            </div>
+          </div>
+        </div>
+      </section>
+
       <section class="step-by-step">
         <div class="container">
           <div class="tag">Этапы реабилитации</div>
@@ -1816,6 +1854,45 @@
           </div>
         </div>
       </section>
+
+      <section class="callback">
+        <div class="container">
+          <div class="callback__wrapper">
+            <div class="tag tag--light">Момент принятия решения</div>
+
+            <h2 class="callback__title">
+              Мы рассказали о программе, <br />
+              <span>теперь ваша очередь действовать</span>
+            </h2>
+
+            <p class="callback__description">
+              Оставьте заявку и получите консультацию специалиста по Вашей ситуации и возможности
+              посещения программы
+            </p>
+
+            <form class="callback__form">
+              <input
+                class="input input--name"
+                name="name"
+                type="text"
+                placeholder="Введите ваше имя"
+              />
+              <input
+                class="input input--phone"
+                name="phone"
+                type="text"
+                placeholder="Введите ваш телефон"
+              />
+              <button class="button button--lg button--light">Получить помощь</button>
+            </form>
+
+            <div class="callback__disclaimer">
+              Оставляя заявку на нашем сайте, вы соглашаетесь с политикой обработки персональных
+              данных и получение новостей компании, скидках и акциях
+            </div>
+          </div>
+        </div>
+      </section>
     </main>
 
     <script src="./assets/js/swiper-bundle.min.js" defer></script>