feat: added team modals

assets/css/index.css

@@ -2272,6 +2272,14 @@ h3 {
 .team__slider .swiper {
   overflow: visible;
 }
+.team__slider .swiper-slide {
+  height: auto;
+}
+.team__slide {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
 .team__slide-figure-image {
   display: block;
   max-width: 100%;
@@ -2298,7 +2306,7 @@ h3 {
     font-size: 19px;
   }
 }
-.team__slide-text {
+.team__slide-position {
   margin: 0 0 26px;
   font-weight: 500;
   font-size: 16px;
@@ -2306,11 +2314,33 @@ h3 {
   color: #878787;
 }
 @media (max-width: 768px) {
-  .team__slide-text {
+  .team__slide-position {
     margin-bottom: 13px;
     font-size: 14px;
   }
 }
+.team__slide-text {
+  display: none;
+  flex-direction: column;
+  gap: 16px;
+  font-weight: 400;
+  font-size: 15px;
+  line-height: 145%;
+  color: #878787;
+}
+@media (max-width: 768px) {
+  .team__slide-text {
+    font-size: 14px;
+  }
+}
+.team__slide-text > p {
+  margin: 0;
+}
+.team__slide-buttons {
+  flex: 1 1 auto;
+  display: flex;
+  align-items: flex-end;
+}
 .team__slide-button {
   padding: 0;
   font-weight: 400;
@@ -2323,6 +2353,63 @@ h3 {
   background: none;
   cursor: pointer;
 }
+.team__modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1000;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(45, 45, 45, 0.25);
+  -webkit-backdrop-filter: blur(10px);
+          backdrop-filter: blur(10px);
+}
+.team__modal.active {
+  display: flex;
+}
+.team__modal-body {
+  position: relative;
+  max-height: calc(100vh - 100px);
+  max-width: calc(100% - 30px);
+  width: 580px;
+  padding: 40px 32px;
+  box-sizing: border-box;
+  border-radius: 8px 30px;
+  background-color: #ffffff;
+}
+.team__modal-body::before {
+  content: "";
+  position: absolute;
+  top: -26px;
+  right: -26px;
+  z-index: 1001;
+  display: block;
+  width: 28px;
+  height: 28px;
+  background: url(../img/icons/close.svg) center no-repeat;
+  cursor: pointer;
+}
+.team__modal-content {
+  max-height: calc(100vh - 180px);
+  padding-right: 4px;
+  overflow: auto;
+  /* Handle */
+}
+.team__modal-content::-webkit-scrollbar {
+  width: 4px;
+}
+.team__modal-content::-webkit-scrollbar-track {
+  background: rgba(45, 45, 45, 0.05);
+}
+.team__modal-content::-webkit-scrollbar-thumb {
+  background: rgba(45, 45, 45, 0.1);
+}
+.team__modal .team__slide-text {
+  display: flex;
+}
 .team__controls {
   display: flex;
   justify-content: center;

assets/img/icons/close.svg

@@ -0,0 +1,5 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.7">
+<path d="M4.18321 3.59293C3.59805 3.89918 3.34649 4.54996 3.58164 5.12965C3.6418 5.27184 4.97071 6.63356 8.00039 9.66871L12.3316 14L8.02774 18.3093C3.53789 22.7992 3.50508 22.8375 3.49961 23.2914C3.49414 23.9531 4.04649 24.5054 4.70821 24.5C5.16211 24.4945 5.20039 24.4617 9.69024 19.9718L13.9996 15.6679L18.309 19.9718C22.7988 24.4617 22.8371 24.4945 23.291 24.5C23.9527 24.5054 24.5051 23.9531 24.4996 23.2914C24.4941 22.8375 24.4613 22.7992 19.9715 18.3093L15.6676 14L19.9988 9.66871C23.0285 6.63356 24.3574 5.27184 24.4176 5.12965C24.5816 4.72496 24.4777 4.15621 24.177 3.84449C23.8652 3.52184 23.2965 3.40699 22.8699 3.58199C22.7277 3.64215 21.366 4.97106 18.3363 8.00074L13.9996 12.332L9.66836 8.00074C6.63321 4.97106 5.27149 3.64215 5.1293 3.58199C4.8668 3.47809 4.39649 3.47809 4.18321 3.59293Z" fill="white"/>
+</g>
+</svg>

assets/js/main.js

@@ -1,2 +1,3 @@
 import './sliders.js';
 import './step-by-step.js';
+import './team.js';

assets/js/team.js

@@ -0,0 +1,31 @@
+const teamModal = document.querySelector('.team__modal');
+const teamSlides = document.querySelectorAll('.team__slide');
+
+teamSlides.forEach((slide) => {
+  slide.addEventListener('click', (event) => {
+    const isMoreButton = event.target.classList.contains('team__slide-button');
+    if (teamModal && isMoreButton) {
+      const parentSlide = event.target.closest('.team__slide');
+      const slideChildElems = [...parentSlide.children]
+        .filter((element) => !element.classList.contains('team__slide-buttons'))
+        .map((element) => element.cloneNode(true));
+      const teamModalBody = teamModal.querySelector('.team__modal-body');
+      if (teamModalBody) {
+        teamModalBody.innerHTML = '';
+        const teamModalContent = document.createElement('div');
+        teamModalContent.classList.add('team__modal-content');
+        teamModalContent.append(...slideChildElems);
+        teamModalBody.append(teamModalContent);
+        teamModal.classList.add('active');
+      }
+    }
+  });
+});
+
+if (teamModal) {
+  teamModal.addEventListener('click', (event) => {
+    const isModal = event.target.classList.contains('team__modal');
+    const isModalBody = event.target.classList.contains('team__modal-body');
+    if (isModal || isModalBody) event.currentTarget.classList.remove('active');
+  });
+}

assets/scss/_l-team.scss

@@ -31,10 +31,18 @@
   &__slider {
     & .swiper {
       overflow: visible;
+
+      &-slide {
+        height: auto;
+      }
     }
   }
 
   &__slide {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+
     &-figure {
       &-image {
         display: block;
@@ -62,7 +70,7 @@
       }
     }
 
-    &-text {
+    &-position {
       margin: 0 0 26px;
       font-weight: 500;
       font-size: 16px;
@@ -75,6 +83,30 @@
       }
     }
 
+    &-text {
+      display: none;
+      flex-direction: column;
+      gap: 16px;
+      font-weight: 400;
+      font-size: 15px;
+      line-height: 145%;
+      color: $grey;
+
+      @include tablet {
+        font-size: 14px;
+      }
+
+      & > p {
+        margin: 0;
+      }
+    }
+
+    &-buttons {
+      flex: 1 1 auto;
+      display: flex;
+      align-items: flex-end;
+    }
+
     &-button {
       padding: 0;
       font-weight: 400;
@@ -88,6 +120,71 @@
     }
   }
 
+  &__modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 1000;
+    display: none;
+    align-items: center;
+    justify-content: center;
+    background-color: rgba($color: $black, $alpha: 0.25);
+    backdrop-filter: blur(10px);
+
+    &.active {
+      display: flex;
+    }
+
+    &-body {
+      position: relative;
+      max-height: calc(100vh - 100px);
+      max-width: calc(100% - 30px);
+      width: 580px;
+      padding: 40px 32px;
+      box-sizing: border-box;
+      border-radius: 8px 30px;
+      background-color: $white;
+
+      &::before {
+        content: '';
+        position: absolute;
+        top: -26px;
+        right: -26px;
+        z-index: 1001;
+        display: block;
+        width: 28px;
+        height: 28px;
+        background: url(../img/icons/close.svg) center no-repeat;
+        cursor: pointer;
+      }
+    }
+
+    &-content {
+      max-height: calc(100vh - 180px);
+      padding-right: 4px;
+      overflow: auto;
+
+      &::-webkit-scrollbar {
+        width: 4px;
+      }
+
+      &::-webkit-scrollbar-track {
+        background: rgba($color: $black, $alpha: 0.05);
+      }
+
+      /* Handle */
+      &::-webkit-scrollbar-thumb {
+        background: rgba($color: $black, $alpha: 0.1);
+      }
+    }
+  }
+
+  &__modal &__slide-text {
+    display: flex;
+  }
+
   &__controls {
     display: flex;
     justify-content: center;

index.html

@@ -1398,10 +1398,38 @@
                         alt="doctor"
                       />
                     </figure>
-                    <div class="team__slide-name">Андрей Владимирович Гынгазов</div>
+                    <div class="team__slide-name">Алексей Петрович Красноперов</div>
+                    <div class="team__slide-position">
+                      Консультант по алкогольной зависимости, бывший зависимый
+                    </div>
                     <div class="team__slide-text">
-                      Ведущий психолог реабилитационного центра, стаж более 20 лет
+                      <p>
+                        Алексей является консультантом в реабилитационном центре для людей,
+                        страдающих алкогольной зависимостью.
+                      </p>
+
+                      <p>
+                        Он сам прошел через трудный путь борьбы с алкоголизмом и знает, насколько
+                        это сложно и болезненно. Но он также знает, что выздоровление возможно, и
+                        посвятил себя помощи другим людям, столкнувшимся с этой проблемой.
+                      </p>
+
+                      <p>
+                        После прохождения курса реабилитации, Алексей решил получить дополнительное
+                        образование в области психологии. Это помогло ему лучше понять механизмы
+                        развития зависимости и методы эффективной терапии. Теперь он может не только
+                        делиться своим личным опытом, но и применять профессиональные знания и
+                        навыки для поддержки и сопровождения наших пациентов.
+                      </p>
+
+                      <p>
+                        “Моя главная цель - помочь людям вернуть контроль над своей жизнью,
+                        восстановить здоровье и отношения с близкими. Я знаю, что это непростой
+                        путь, но я верю, что вместе мы сможем преодолеть любые трудности”, - делится
+                        Алексей.
+                      </p>
                     </div>
+
                     <div class="team__slide-buttons">
                       <button class="team__slide-button">Информация о специалисте</button>
                     </div>
@@ -1418,8 +1446,13 @@
                       />
                     </figure>
                     <div class="team__slide-name">Андрей Владимирович Гынгазов</div>
+                    <div class="team__slide-position">Ведущий психолог, стаж более 20 лет</div>
                     <div class="team__slide-text">
-                      Ведущий психолог реабилитационного центра, стаж более 20 лет
+                      Групповая психотерапия, направленная на сплоченность группы на работу с
+                      отрицанием и защитами. Вырабатка мотивации для трезвости индивидуально для
+                      каждого, умение работать со своими чувствами, встречаться с ними, осознавать
+                      свои желания. Учится ставить реалистичные цели в жизни, что необходимо для
+                      химически зависимого человека
                     </div>
                     <div class="team__slide-buttons">
                       <button class="team__slide-button">Информация о специалисте</button>
@@ -1436,9 +1469,35 @@
                         alt="doctor"
                       />
                     </figure>
-                    <div class="team__slide-name">Андрей Владимирович Гынгазов</div>
+                    <div class="team__slide-name">Александр Владимирович Михайлов</div>
+                    <div class="team__slide-position">
+                      Консультант по химической зависимости, бывший зависимый
+                    </div>
                     <div class="team__slide-text">
-                      Ведущий психолог реабилитационного центра, стаж более 20 лет
+                      <p>
+                        Александр является консультантом по химической зависимости в
+                        реабилитационном центре. Он прошел непростой путь борьбы с наркотической
+                        зависимостью, но сейчас чист и полон сил помогать другим людям, оказавшимся
+                        в такой же ситуации. “Я понимаю, насколько тяжело бороться с химической
+                        зависимостью. Это настоящая война с самим собой, со своими страхами и
+                        демонами. Но я могу с уверенностью сказать, что победить эту болезнь
+                        возможно. Главное - не сдаваться и верить в себя”, - говорит Александр
+                      </p>
+
+                      <p>
+                        После реабилитации Александр прошел специальные курсы консультантов по
+                        зависимостям, изучил методики и техники, которые помогают человеку
+                        избавиться от пагубной привычки и начать новую жизнь. Сейчас он применяет
+                        этот опыт в работе с нашими клиентами.
+                      </p>
+
+                      <p>
+                        “Моя задача - поддержать, вдохновить и направить человека на правильный
+                        путь. Я знаю, как важно иметь рядом того, кто понимает тебя, кто прошел
+                        через то же самое. Я готов выслушать, дать совет и помочь в любой ситуации.
+                        Вместе мы обязательно справимся с этой проблемой. Я верю в каждого, кто
+                        решил бороться. Добро пожаловать в новую жизнь!”
+                      </p>
                     </div>
                     <div class="team__slide-buttons">
                       <button class="team__slide-button">Информация о специалисте</button>
@@ -1455,9 +1514,32 @@
                         alt="doctor"
                       />
                     </figure>
-                    <div class="team__slide-name">Андрей Владимирович Гынгазов</div>
+                    <div class="team__slide-name">Сергей Валерьевич Михайлов</div>
+                    <div class="team__slide-position">
+                      Консультант по химической зависимости, бывший зависимый
+                    </div>
                     <div class="team__slide-text">
-                      Ведущий психолог реабилитационного центра, стаж более 20 лет
+                      <p>
+                        Михайлов Сергей Валерьевич ему 37 лет. Несколько лет назад он боролся с
+                        тяжелой наркотической зависимостью, которая разрушала его жизнь. Но
+                        благодаря прохождению реабилитационной программы, он смог победить свою
+                        болезнь и вернуться к нормальной жизни.
+                      </p>
+                      <p>
+                        Теперь Сергей работает консультантом в том же реабилитационном центре, где
+                        когда-то проходил лечение. Он делится своим опытом и помогает другим людям,
+                        страдающим от алкогольной и наркотической зависимости, найти путь к
+                        выздоровлению.
+                      </p>
+                      <p>
+                        Сергей понимает, через что проходят ребята, потому что сам прошел этот
+                        непростой путь. Он умеет находить подход к каждому человеку, вселяет в них
+                        надежду и веру в свои силы. Сергей знает, что жить с зависимостью можно, и
+                        своим примером доказывает это. Его искренность, сочувствие и профессионализм
+                        вдохновляют клиентов двигаться вперед и не сдаваться. Сергей - живое
+                        доказательство того, что выздоровление возможно, и это придает его работе
+                        особый смысл.
+                      </p>
                     </div>
                     <div class="team__slide-buttons">
                       <button class="team__slide-button">Информация о специалисте</button>
@@ -1474,10 +1556,38 @@
                         alt="doctor"
                       />
                     </figure>
-                    <div class="team__slide-name">Андрей Владимирович Гынгазов</div>
+                    <div class="team__slide-name">Алексей Петрович Красноперов</div>
+                    <div class="team__slide-position">
+                      Консультант по алкогольной зависимости, бывший зависимый
+                    </div>
                     <div class="team__slide-text">
-                      Ведущий психолог реабилитационного центра, стаж более 20 лет
+                      <p>
+                        Алексей является консультантом в реабилитационном центре для людей,
+                        страдающих алкогольной зависимостью.
+                      </p>
+
+                      <p>
+                        Он сам прошел через трудный путь борьбы с алкоголизмом и знает, насколько
+                        это сложно и болезненно. Но он также знает, что выздоровление возможно, и
+                        посвятил себя помощи другим людям, столкнувшимся с этой проблемой.
+                      </p>
+
+                      <p>
+                        После прохождения курса реабилитации, Алексей решил получить дополнительное
+                        образование в области психологии. Это помогло ему лучше понять механизмы
+                        развития зависимости и методы эффективной терапии. Теперь он может не только
+                        делиться своим личным опытом, но и применять профессиональные знания и
+                        навыки для поддержки и сопровождения наших пациентов.
+                      </p>
+
+                      <p>
+                        “Моя главная цель - помочь людям вернуть контроль над своей жизнью,
+                        восстановить здоровье и отношения с близкими. Я знаю, что это непростой
+                        путь, но я верю, что вместе мы сможем преодолеть любые трудности”, - делится
+                        Алексей.
+                      </p>
                     </div>
+
                     <div class="team__slide-buttons">
                       <button class="team__slide-button">Информация о специалисте</button>
                     </div>
@@ -1494,8 +1604,13 @@
                       />
                     </figure>
                     <div class="team__slide-name">Андрей Владимирович Гынгазов</div>
+                    <div class="team__slide-position">Ведущий психолог, стаж более 20 лет</div>
                     <div class="team__slide-text">
-                      Ведущий психолог реабилитационного центра, стаж более 20 лет
+                      Групповая психотерапия, направленная на сплоченность группы на работу с
+                      отрицанием и защитами. Вырабатка мотивации для трезвости индивидуально для
+                      каждого, умение работать со своими чувствами, встречаться с ними, осознавать
+                      свои желания. Учится ставить реалистичные цели в жизни, что необходимо для
+                      химически зависимого человека
                     </div>
                     <div class="team__slide-buttons">
                       <button class="team__slide-button">Информация о специалисте</button>
@@ -1512,9 +1627,77 @@
                         alt="doctor"
                       />
                     </figure>
-                    <div class="team__slide-name">Андрей Владимирович Гынгазов</div>
+                    <div class="team__slide-name">Александр Владимирович Михайлов</div>
+                    <div class="team__slide-position">
+                      Консультант по химической зависимости, бывший зависимый
+                    </div>
                     <div class="team__slide-text">
-                      Ведущий психолог реабилитационного центра, стаж более 20 лет
+                      <p>
+                        Александр является консультантом по химической зависимости в
+                        реабилитационном центре. Он прошел непростой путь борьбы с наркотической
+                        зависимостью, но сейчас чист и полон сил помогать другим людям, оказавшимся
+                        в такой же ситуации. “Я понимаю, насколько тяжело бороться с химической
+                        зависимостью. Это настоящая война с самим собой, со своими страхами и
+                        демонами. Но я могу с уверенностью сказать, что победить эту болезнь
+                        возможно. Главное - не сдаваться и верить в себя”, - говорит Александр
+                      </p>
+
+                      <p>
+                        После реабилитации Александр прошел специальные курсы консультантов по
+                        зависимостям, изучил методики и техники, которые помогают человеку
+                        избавиться от пагубной привычки и начать новую жизнь. Сейчас он применяет
+                        этот опыт в работе с нашими клиентами.
+                      </p>
+
+                      <p>
+                        “Моя задача - поддержать, вдохновить и направить человека на правильный
+                        путь. Я знаю, как важно иметь рядом того, кто понимает тебя, кто прошел
+                        через то же самое. Я готов выслушать, дать совет и помочь в любой ситуации.
+                        Вместе мы обязательно справимся с этой проблемой. Я верю в каждого, кто
+                        решил бороться. Добро пожаловать в новую жизнь!”
+                      </p>
+                    </div>
+                    <div class="team__slide-buttons">
+                      <button class="team__slide-button">Информация о специалисте</button>
+                    </div>
+                  </div>
+                </div>
+
+                <div class="swiper-slide">
+                  <div class="team__slide">
+                    <figure class="team__slide-figure">
+                      <img
+                        class="team__slide-figure-image"
+                        src="./assets/img/doctor.jpg"
+                        alt="doctor"
+                      />
+                    </figure>
+                    <div class="team__slide-name">Сергей Валерьевич Михайлов</div>
+                    <div class="team__slide-position">
+                      Консультант по химической зависимости, бывший зависимый
+                    </div>
+                    <div class="team__slide-text">
+                      <p>
+                        Михайлов Сергей Валерьевич ему 37 лет. Несколько лет назад он боролся с
+                        тяжелой наркотической зависимостью, которая разрушала его жизнь. Но
+                        благодаря прохождению реабилитационной программы, он смог победить свою
+                        болезнь и вернуться к нормальной жизни.
+                      </p>
+                      <p>
+                        Теперь Сергей работает консультантом в том же реабилитационном центре, где
+                        когда-то проходил лечение. Он делится своим опытом и помогает другим людям,
+                        страдающим от алкогольной и наркотической зависимости, найти путь к
+                        выздоровлению.
+                      </p>
+                      <p>
+                        Сергей понимает, через что проходят ребята, потому что сам прошел этот
+                        непростой путь. Он умеет находить подход к каждому человеку, вселяет в них
+                        надежду и веру в свои силы. Сергей знает, что жить с зависимостью можно, и
+                        своим примером доказывает это. Его искренность, сочувствие и профессионализм
+                        вдохновляют клиентов двигаться вперед и не сдаваться. Сергей - живое
+                        доказательство того, что выздоровление возможно, и это придает его работе
+                        особый смысл.
+                      </p>
                     </div>
                     <div class="team__slide-buttons">
                       <button class="team__slide-button">Информация о специалисте</button>
@@ -1529,6 +1712,10 @@
             <button class="button button--prev"></button>
             <button class="button button--next"></button>
           </div>
+
+          <div class="team__modal">
+            <div class="team__modal-body"></div>
+          </div>
         </div>
       </section>
     </main>