diff --git a/assets/css/index.css b/assets/css/index.css index 7cc7e96..336913f 100644 --- a/assets/css/index.css +++ b/assets/css/index.css @@ -1331,4 +1331,235 @@ h3 { .twelve-steps__step-text { text-align: center; } +} + +.why-program { + margin: 111px 0 114px; +} +@media (max-width: 768px) { + .why-program { + margin: 74px 0 89px; + } +} +.why-program .container { + position: relative; +} +.why-program__title { + margin: 21px 0 27px; +} +@media (max-width: 768px) { + .why-program__title { + margin: 21px 0 23px; + } +} +.why-program__video { + position: absolute; + top: 515px; + left: 16px; + right: 16px; + padding: 0 48px 32px; + overflow: hidden; + border-radius: 80px 40px; + background: url(../img/12-steps-bg.svg) right 12px bottom -70px no-repeat; + background-color: #609eff; +} +@media (max-width: 1240px) { + .why-program__video { + position: static; + margin: 0 0 30px; + } +} +@media (max-width: 992px) { + .why-program__video { + padding: 0 24px 24px; + border-radius: 30px 11px; + background: #609eff; + } +} +@media (max-width: 768px) { + .why-program__video { + font-size: 17px; + text-align: center; + } +} +.why-program__video-content { + height: 573px; + margin: 0 -48px 30px; + background-color: #878787; +} +@media (max-width: 992px) { + .why-program__video-content { + margin: 0 -24px 30px; + height: auto; + width: calc(100% + 48px); + aspect-ratio: 16/9; + } +} +.why-program__video-content > * { + display: block; + height: 100%; + width: 100%; +} +.why-program__video-text { + max-width: 812px; + font-weight: 500; + font-size: 24px; + line-height: 146%; + color: #ffffff; +} +@media (max-width: 992px) { + .why-program__video-text { + max-width: none; + } +} +@media (max-width: 768px) { + .why-program__video-text { + font-size: 17px; + text-align: center; + } +} +.why-program__video-text > b { + font-weight: 700; +} +.why-program__slider .swiper { + overflow: visible; +} +@media (max-width: 992px) { + .why-program__slider .swiper { + overflow: hidden; + } +} +.why-program__slider .swiper-wrapper { + position: static; + flex-wrap: wrap; +} +@media screen and (min-width: 992.1px) { + .why-program__slider .swiper-wrapper { + gap: 40px 30px; + } +} +@media (max-width: 992px) { + .why-program__slider .swiper-wrapper { + position: relative; + flex-wrap: nowrap; + } +} +.why-program__slider .swiper-slide { + position: static; + height: auto; +} +@media screen and (min-width: 992.1px) { + .why-program__slider .swiper-slide { + flex: 0 0 calc(33.3333333333% - 20px); + } +} +@media (max-width: 992px) { + .why-program__slider .swiper-slide { + position: relative; + } +} +.why-program__slider .swiper-slide:nth-child(-n+3) { + margin-bottom: 812px; +} +@media (max-width: 1240px) { + .why-program__slider .swiper-slide:nth-child(-n+3) { + margin: 0; + } +} +@media screen and (min-width: 1240.1px) { + .why-program__slider .swiper-slide:nth-child(1) { + flex: 0 1 27%; + } +} +@media screen and (min-width: 1240.1px) { + .why-program__slider .swiper-slide:nth-child(2) { + flex: 0 1 30%; + } +} +@media screen and (min-width: 1240.1px) { + .why-program__slider .swiper-slide:nth-child(3) { + flex: 1 1 30%; + } +} +@media screen and (min-width: 1240.1px) { + .why-program__slider .swiper-slide:nth-child(4) { + flex: 0 1 31%; + } +} +@media screen and (min-width: 1240.1px) { + .why-program__slider .swiper-slide:nth-child(5) { + flex: 0 1 33%; + } +} +@media screen and (min-width: 1240.1px) { + .why-program__slider .swiper-slide:nth-child(6) { + flex: 1 1 27%; + } +} +.why-program__slide { + height: 100%; + padding: 31px 38px; + box-sizing: border-box; + border-radius: 22px 40px; + background-color: #ffffff; +} +@media (max-width: 992px) { + .why-program__slide { + padding: 24px; + } +} +.why-program__slide-count { + margin: 0 0 6px; + font-weight: 700; + font-size: 59px; + line-height: 127%; + letter-spacing: 0.05em; + color: #ffffff; + -webkit-text-stroke: 1px #609eff; +} +@media (max-width: 992px) { + .why-program__slide-count { + text-align: center; + } +} +@media (max-width: 576px) { + .why-program__slide-count { + font-size: 50px; + } +} +.why-program__slide-title { + margin: 0 0 9px; +} +@media (max-width: 992px) { + .why-program__slide-title { + text-align: center; + } +} +.why-program__slide-text { + margin: 0; + font-weight: 400; + font-size: 17px; + line-height: 146%; + color: #878787; +} +.why-program__slide-text > b { + font-weight: 600; +} +@media (max-width: 992px) { + .why-program__slide-text { + font-size: 15px; + text-align: center; + } +} +.why-program__slider-controls { + display: none; + justify-content: center; + align-items: center; + gap: 24px; + margin: 35px 0 0; +} +@media (max-width: 992px) { + .why-program__slider-controls { + display: flex; + } } \ No newline at end of file diff --git a/assets/img/12-steps-bg.svg b/assets/img/12-steps-bg.svg new file mode 100644 index 0000000..f695850 --- /dev/null +++ b/assets/img/12-steps-bg.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/assets/js/sliders.js b/assets/js/sliders.js index b24688f..69b1cc4 100644 --- a/assets/js/sliders.js +++ b/assets/js/sliders.js @@ -1,4 +1,5 @@ let factsSwiper = null; +let whyProgramSwiper = null; let init = false; @@ -31,9 +32,34 @@ function swiperMode() { prevEl: '.facts .button--prev', }, }); + + whyProgramSwiper = new Swiper('.why-program .swiper', { + loop: true, + slidesPerView: 1, + spaceBetween: 30, + breakpoints: { + 320: { + slidesPerView: 1.2, + }, + 480: { + slidesPerView: 1.4, + }, + 576: { + slidesPerView: 2, + }, + 700: { + slidesPerView: 2.4, + }, + }, + navigation: { + nextEl: '.why-program .button--next', + prevEl: '.why-program .button--prev', + }, + }); } } else { if (factsSwiper !== null) factsSwiper.destroy(); + if (whyProgramSwiper !== null) whyProgramSwiper.destroy(); init = false; } } diff --git a/assets/scss/_l-why-program.scss b/assets/scss/_l-why-program.scss new file mode 100644 index 0000000..864ef52 --- /dev/null +++ b/assets/scss/_l-why-program.scss @@ -0,0 +1,235 @@ +.why-program { + margin: 111px 0 114px; + + @include tablet { + margin: 74px 0 89px; + } + + & .container { + position: relative; + } + + &__title { + margin: 21px 0 27px; + + @include tablet { + margin: 21px 0 23px; + } + } + + &__video { + position: absolute; + top: 515px; + left: 16px; + right: 16px; + padding: 0 48px 32px; + overflow: hidden; + border-radius: 80px 40px; + background: url(../img/12-steps-bg.svg) right 12px bottom -70px no-repeat; + background-color: $blue; + + @include desktop { + position: static; + margin: 0 0 30px; + } + + @include laptop { + padding: 0 24px 24px; + border-radius: 30px 11px; + background: $blue; + } + + @include tablet { + font-size: 17px; + text-align: center; + } + + &-content { + height: 573px; + margin: 0 -48px 30px; + background-color: $grey; + + @include laptop { + margin: 0 -24px 30px; + height: auto; + width: calc(100% + 48px); + aspect-ratio: 16 / 9; + } + + & > * { + display: block; + height: 100%; + width: 100%; + } + } + + &-text { + max-width: 812px; + font-weight: 500; + font-size: 24px; + line-height: 146%; + color: $white; + + @include laptop { + max-width: none; + } + + @include tablet { + font-size: 17px; + text-align: center; + } + + & > b { + font-weight: 700; + } + } + } + + &__slider { + & .swiper { + overflow: visible; + + @include laptop { + overflow: hidden; + } + + &-wrapper { + position: static; + flex-wrap: wrap; + + @media screen and (min-width: 992.1px) { + gap: 40px 30px; + } + + @include laptop { + position: relative; + flex-wrap: nowrap; + } + } + + &-slide { + position: static; + height: auto; + + @media screen and (min-width: 992.1px) { + flex: 0 0 calc(100% / 3 - 30px / 3 * 2); + } + + @include laptop { + position: relative; + } + + &:nth-child(-n + 3) { + margin-bottom: 812px; + + @include desktop { + margin: 0; + } + } + + &:nth-child(1) { + @media screen and (min-width: 1240.1px) { + flex: 0 1 27%; + } + } + + &:nth-child(2) { + @media screen and (min-width: 1240.1px) { + flex: 0 1 30%; + } + } + + &:nth-child(3) { + @media screen and (min-width: 1240.1px) { + flex: 1 1 30%; + } + } + + &:nth-child(4) { + @media screen and (min-width: 1240.1px) { + flex: 0 1 31%; + } + } + + &:nth-child(5) { + @media screen and (min-width: 1240.1px) { + flex: 0 1 33%; + } + } + + &:nth-child(6) { + @media screen and (min-width: 1240.1px) { + flex: 1 1 27%; + } + } + } + } + } + + &__slide { + height: 100%; + padding: 31px 38px; + box-sizing: border-box; + border-radius: 22px 40px; + background-color: $white; + + @include laptop { + padding: 24px; + } + + &-count { + margin: 0 0 6px; + font-weight: 700; + font-size: 59px; + line-height: 127%; + letter-spacing: 0.05em; + color: $white; + -webkit-text-stroke: 1px $blue; + + @include laptop { + text-align: center; + } + + @include mobile { + font-size: 50px; + } + } + + &-title { + margin: 0 0 9px; + + @include laptop { + text-align: center; + } + } + + &-text { + margin: 0; + font-weight: 400; + font-size: 17px; + line-height: 146%; + color: $grey; + + & > b { + font-weight: 600; + } + + @include laptop { + font-size: 15px; + text-align: center; + } + } + } + + &__slider-controls { + display: none; + justify-content: center; + align-items: center; + gap: 24px; + margin: 35px 0 0; + + @include laptop { + display: flex; + } + } +} diff --git a/assets/scss/index.scss b/assets/scss/index.scss index e730ad5..397852f 100644 --- a/assets/scss/index.scss +++ b/assets/scss/index.scss @@ -23,3 +23,4 @@ @import './l-reviews'; @import './l-step-by-step'; @import './l-twelve-steps'; +@import './l-why-program'; diff --git a/index.html b/index.html index 8953c00..0758d69 100644 --- a/index.html +++ b/index.html @@ -833,6 +833,115 @@ + +
+
+
Эффективность программы
+ +

+ Почему программа 12 шагов
+ эффективна для лечения зависимостей +

+ +
+
+ +
+
+ + Ее принципы основаны на самопомощи, взаимной поддержке и укреплении силы воли через + самовнушение или веру во внешние силы по выбору человека. + + Программа нацелена не только на избавление от конкретной зависимости, но и на + выработку новых сценариев жизни, в которых нет места пагубной привычке +
+
+ +
+
+
+
+
+

Компклесный подход

+

+ Участник программы проходит детоксикацию организма под наблюдением врача, а + также избавляется от триггеров провоцирующих зависимость +

+
+
+ +
+
+

Восстановление личности

+

+ Повышается самооценка, восстанавливается гармония и баланс в жизни, + вырабатываются новые здоровые жизненные ценности и приоритеты +

+
+
+ +
+
+

Формирование новых стратегий

+

+ Участники учатся управлять желаниями и эмоциями, распознавать триггеры, + провоцирующие тягу. Они вырабатывают новые здоровые стратегии построения жизни + без зависимостей +

+
+
+ +
+
+

Устранение первопричин

+

+ Человек осознает истоки зависимого поведения: деструктивные внутренние + убеждения, психологические травмы, стрессовые ситуации из прошлого. Это + помогает предотвратить будущие срывы после реабилитации +

+
+
+ +
+
+

Пожизненное сопровождение

+

+ После завершения программы центр продолжает сопровождать выпускников, помогая + им с ресоциализацией, трудоустройством, налаживанием быта. Организуются + регулярные встречи, консультации в случае рецидивов +

+
+
+ +
+
+

Групповая поддержка

+

+ Участники мотивируют и вдохновляют друг друга. На примере реальных ситуаций + они отрабатывают навыки преодоления тяги и могут получить помощь тех, кто уже + прошел этот путь +

+
+
+
+
+
+ +
+ + +
+
+