feat: added team

assets/css/index.css

@@ -2237,3 +2237,95 @@ h3 {
 .price__list-item--active .price__list-item-title, .price__list-item--active .price__list-item-time, .price__list-item--active .price__list-item-description {
   border-color: rgba(255, 255, 255, 0.2);
 }
+
+.team {
+  margin: 100px 0 90px;
+}
+@media (max-width: 768px) {
+  .team {
+    margin: 90px 0;
+  }
+}
+.team__title {
+  margin: 18px 0 25px;
+}
+@media (max-width: 768px) {
+  .team__title {
+    margin: 18px 0 14px;
+  }
+}
+.team__description {
+  margin: 25px 0;
+  font-weight: 400;
+  font-size: 21px;
+  line-height: 139%;
+  text-align: center;
+  color: #4d4d4d;
+}
+@media (max-width: 768px) {
+  .team__description {
+    margin: 14px 0 37px;
+    font-size: 16px;
+  }
+}
+.team__slider .swiper {
+  overflow: visible;
+}
+.team__slide-figure-image {
+  display: block;
+  max-width: 100%;
+  height: 388px;
+  -o-object-fit: cover;
+     object-fit: cover;
+  border-radius: 10px 40px;
+}
+@media (max-width: 768px) {
+  .team__slide-figure-image {
+    border-radius: 8px 30px;
+  }
+}
+.team__slide-name {
+  margin: 19px 0 9px;
+  font-weight: 500;
+  font-size: 26px;
+  line-height: 129%;
+  letter-spacing: 0.01em;
+  color: #2d2d2d;
+}
+@media (max-width: 768px) {
+  .team__slide-name {
+    font-size: 19px;
+  }
+}
+.team__slide-text {
+  margin: 0 0 26px;
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 129%;
+  color: #878787;
+}
+@media (max-width: 768px) {
+  .team__slide-text {
+    margin-bottom: 13px;
+    font-size: 14px;
+  }
+}
+.team__slide-button {
+  padding: 0;
+  font-weight: 400;
+  font-size: 14px;
+  text-decoration: underline;
+  -webkit-text-decoration-skip-ink: none;
+          text-decoration-skip-ink: none;
+  color: #609eff;
+  border: none;
+  background: none;
+  cursor: pointer;
+}
+.team__controls {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 24px;
+  margin-top: 40px;
+}

assets/js/sliders.js

@@ -98,7 +98,6 @@ window.addEventListener('resize', function () {
   swiperMode();
 });
 
-
 const reviewsSwiper = new Swiper('.reviews .swiper', {
   slidesPerView: 1,
   breakpoints: {
@@ -127,20 +126,47 @@ const reviewsSwiper = new Swiper('.reviews .swiper', {
   },
 });
 
-const conditionsThumbsSwiper = new Swiper(".conditions__sliders-thumbs .swiper", {
+const conditionsThumbsSwiper = new Swiper('.conditions__sliders-thumbs .swiper', {
   spaceBetween: 16,
   slidesPerView: 3,
   freeMode: true,
   watchSlidesProgress: true,
 });
 
-const conditionsSwiper = new Swiper(".conditions__sliders-main .swiper", {
+const conditionsSwiper = new Swiper('.conditions__sliders-main .swiper', {
   spaceBetween: 20,
   navigation: {
-    nextEl: ".conditions__sliders .button--next",
+    nextEl: '.conditions__sliders .button--next',
-    prevEl: ".conditions__sliders .button--prev",
+    prevEl: '.conditions__sliders .button--prev',
   },
   thumbs: {
     swiper: conditionsThumbsSwiper,
   },
 });
+
+const teamSwiper = new Swiper('.team .swiper', {
+  slidesPerView: 1,
+  breakpoints: {
+    320: {
+      slidesPerView: 1.1,
+      spaceBetween: 30,
+    },
+    480: {
+      slidesPerView: 1.3,
+    },
+    576: {
+      slidesPerView: 1.8,
+    },
+    768: {
+      slidesPerView: 2.5,
+    },
+    992: {
+      spaceBetween: 40,
+      slidesPerView: 3,
+    },
+  },
+  navigation: {
+    nextEl: '.team .button--next',
+    prevEl: '.team .button--prev',
+  },
+});

assets/scss/_l-team.scss

@@ -0,0 +1,97 @@
+.team {
+  margin: 100px 0 90px;
+
+  @include tablet {
+    margin: 90px 0;
+  }
+
+  &__title {
+    margin: 18px 0 25px;
+
+    @include tablet {
+      margin: 18px 0 14px;
+    }
+  }
+
+  &__description {
+    margin: 25px 0;
+    font-weight: 400;
+    font-size: 21px;
+    line-height: 139%;
+    text-align: center;
+    color: $darkgrey;
+
+    @include tablet {
+      margin: 14px 0 37px;
+      font-size: 16px;
+    }
+  }
+
+  &__slider {
+    & .swiper {
+      overflow: visible;
+    }
+  }
+
+  &__slide {
+    &-figure {
+      &-image {
+        display: block;
+        max-width: 100%;
+        height: 388px;
+        object-fit: cover;
+        border-radius: 10px 40px;
+
+        @include tablet {
+          border-radius: 8px 30px;
+        }
+      }
+    }
+
+    &-name {
+      margin: 19px 0 9px;
+      font-weight: 500;
+      font-size: 26px;
+      line-height: 129%;
+      letter-spacing: 0.01em;
+      color: $black;
+
+      @include tablet {
+        font-size: 19px;
+      }
+    }
+
+    &-text {
+      margin: 0 0 26px;
+      font-weight: 500;
+      font-size: 16px;
+      line-height: 129%;
+      color: $grey;
+
+      @include tablet {
+        margin-bottom: 13px;
+        font-size: 14px;
+      }
+    }
+
+    &-button {
+      padding: 0;
+      font-weight: 400;
+      font-size: 14px;
+      text-decoration: underline;
+      text-decoration-skip-ink: none;
+      color: #609eff;
+      border: none;
+      background: none;
+      cursor: pointer;
+    }
+  }
+
+  &__controls {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 24px;
+    margin-top: 40px;
+  }
+}

assets/scss/index.scss

@@ -28,3 +28,4 @@
 @import './l-how-it-work';
 @import './l-socialization';
 @import './l-price';
+@import './l-team';

index.html

@@ -1370,6 +1370,167 @@
           </div>
         </div>
       </section>
+
+      <section class="team">
+        <div class="container">
+          <div class="tag">Наша команда</div>
+
+          <h2 class="team__title">
+            Команда опытных специалистов -<br />
+            <span>проводники к жизни без зависимостей</span>
+          </h2>
+
+          <p class="team__description">
+            В нашем центре работают специалисты в области медицины и психологии, накопившие за
+            долгие годы уникальные знания и навыки. У каждого более 5-ти лет опыта, они проходят
+            постоянное обучение и повышение квалификации
+          </p>
+
+          <div class="team__slider">
+            <div class="swiper">
+              <div class="swiper-wrapper">
+                <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-text">
+                      Ведущий психолог реабилитационного центра, стаж более 20 лет
+                    </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-text">
+                      Ведущий психолог реабилитационного центра, стаж более 20 лет
+                    </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-text">
+                      Ведущий психолог реабилитационного центра, стаж более 20 лет
+                    </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-text">
+                      Ведущий психолог реабилитационного центра, стаж более 20 лет
+                    </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-text">
+                      Ведущий психолог реабилитационного центра, стаж более 20 лет
+                    </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-text">
+                      Ведущий психолог реабилитационного центра, стаж более 20 лет
+                    </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-text">
+                      Ведущий психолог реабилитационного центра, стаж более 20 лет
+                    </div>
+                    <div class="team__slide-buttons">
+                      <button class="team__slide-button">Информация о специалисте</button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="team__controls">
+            <button class="button button--prev"></button>
+            <button class="button button--next"></button>
+          </div>
+        </div>
+      </section>
     </main>
 
     <script src="./assets/js/swiper-bundle.min.js" defer></script>