feat: added play buttons

assets/css/index.css

@@ -1308,6 +1308,7 @@ h3 {
   }
 }
 .reviews__slide-video {
+  position: relative;
   height: 205px;
   margin: 0 0 15px;
   overflow: hidden;
@@ -1329,6 +1330,48 @@ h3 {
   width: 100%;
   height: 100%;
 }
+.reviews__slide-video::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 10;
+  background-color: rgba(0, 0, 0, 0.1);
+  -webkit-backdrop-filter: blur(10px);
+          backdrop-filter: blur(10px);
+  cursor: pointer;
+}
+.reviews__slide-video::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  z-index: 11;
+  display: block;
+  width: 88px;
+  aspect-ratio: 1/1;
+  background: url(../img/icons/play.svg) center no-repeat;
+  background-size: cover;
+  transform: translateX(-50%) translateY(-50%);
+  transition: transform ease-in-out 0.1s;
+  cursor: pointer;
+}
+@media (max-width: 768px) {
+  .reviews__slide-video::after {
+    width: 64px;
+  }
+}
+.reviews__slide-video.active::before, .reviews__slide-video.active::after {
+  display: none;
+}
+.reviews__slide-video:hover::after {
+  transform: translateX(-50%) translateY(-50%) scale(1.06);
+}
+.reviews__slide-video:active::after {
+  transform: translateX(-50%) translateY(-50%) scale(0.98);
+}
 .reviews__slide-name {
   margin: 0 0 8px;
   font-weight: 600;
@@ -1721,6 +1764,7 @@ h3 {
   }
 }
 .why-program__video-content {
+  position: relative;
   height: 573px;
   margin: 0 -48px 30px;
   background-color: #878787;
@@ -1738,6 +1782,48 @@ h3 {
   height: 100%;
   width: 100%;
 }
+.why-program__video-content::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 10;
+  background-color: rgba(0, 0, 0, 0.1);
+  -webkit-backdrop-filter: blur(10px);
+          backdrop-filter: blur(10px);
+  cursor: pointer;
+}
+.why-program__video-content::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  z-index: 11;
+  display: block;
+  width: 88px;
+  aspect-ratio: 1/1;
+  background: url(../img/icons/play.svg) center no-repeat;
+  background-size: cover;
+  transform: translateX(-50%) translateY(-50%);
+  transition: transform ease-in-out 0.1s;
+  cursor: pointer;
+}
+@media (max-width: 768px) {
+  .why-program__video-content::after {
+    width: 64px;
+  }
+}
+.why-program__video-content.active::before, .why-program__video-content.active::after {
+  display: none;
+}
+.why-program__video-content:hover::after {
+  transform: translateX(-50%) translateY(-50%) scale(1.06);
+}
+.why-program__video-content:active::after {
+  transform: translateX(-50%) translateY(-50%) scale(0.98);
+}
 .why-program__video-text {
   max-width: 812px;
   font-weight: 500;

assets/js/main.js

@@ -4,6 +4,7 @@ import './team.js';
 import './faq.js';
 import './nav.js';
 import './modals.js';
+import './reviews.js';
 
 const maskOptions = {
   mask: '+{7} (000) 000 00 00',
@@ -16,3 +17,4 @@ const phoneInputs = phoneInputClassNames
   .reduce((acc, array) => [...acc, ...array], []);
 
 phoneInputs.forEach((inputElement) => IMask(inputElement, maskOptions));
+

assets/js/reviews.js

@@ -0,0 +1,22 @@
+const reviewsSlideVideos = document.querySelectorAll('.reviews__slide-video');
+const whyProgramVideoContent = document.querySelector('.why-program__video-content');
+
+reviewsSlideVideos.forEach((videoEl) => {
+  videoEl.addEventListener('click', (event) => {
+    if (whyProgramVideoContent) whyProgramVideoContent.classList.remove('active');
+    reviewsSlideVideos.forEach((video) => {
+      if (video === event.currentTarget) {
+        video.classList.add('active');
+      } else {
+        video.classList.remove('active');
+      }
+    });
+  });
+});
+
+if (whyProgramVideoContent) {
+  whyProgramVideoContent.addEventListener('click', (event) => {
+    event.currentTarget.classList.add('active');
+    reviewsSlideVideos.forEach((video) => video.classList.remove('active'));
+  });
+}

assets/scss/_l-reviews.scss

@@ -31,6 +31,7 @@
     }
 
     &-video {
+      position: relative;
       height: 205px;
       margin: 0 0 15px;
       overflow: hidden;
@@ -50,6 +51,52 @@
         width: 100%;
         height: 100%;
       }
+
+      &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: 10;
+        background-color: rgba($color: #000000, $alpha: 0.1);
+        backdrop-filter: blur(10px);
+        cursor: pointer;
+      }
+
+      &::after {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        z-index: 11;
+        display: block;
+        width: 88px;
+        aspect-ratio: 1 / 1;
+        background: url(../img/icons/play.svg) center no-repeat;
+        background-size: cover;
+        transform: translateX(-50%) translateY(-50%);
+        transition: transform ease-in-out 0.1s;
+        cursor: pointer;
+
+        @include tablet {
+          width: 64px;
+        }
+      }
+
+      &.active::before,
+      &.active::after {
+        display: none;
+      }
+
+      &:hover::after {
+        transform: translateX(-50%) translateY(-50%) scale(1.06);
+      }
+
+      &:active::after {
+        transform: translateX(-50%) translateY(-50%) scale(0.98);
+      }
     }
 
     &-name {

assets/scss/_l-why-program.scss

@@ -45,6 +45,7 @@
     }
 
     &-content {
+      position: relative;
       height: 573px;
       margin: 0 -48px 30px;
       background-color: $grey;
@@ -61,6 +62,52 @@
         height: 100%;
         width: 100%;
       }
+
+      &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: 10;
+        background-color: rgba($color: #000000, $alpha: 0.1);
+        backdrop-filter: blur(10px);
+        cursor: pointer;
+      }
+
+      &::after {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        z-index: 11;
+        display: block;
+        width: 88px;
+        aspect-ratio: 1 / 1;
+        background: url(../img/icons/play.svg) center no-repeat;
+        background-size: cover;
+        transform: translateX(-50%) translateY(-50%);
+        transition: transform ease-in-out 0.1s;
+        cursor: pointer;
+
+        @include tablet {
+          width: 64px;
+        }
+      }
+
+      &.active::before,
+      &.active::after {
+        display: none;
+      }
+
+      &:hover::after {
+        transform: translateX(-50%) translateY(-50%) scale(1.06);
+      }
+
+      &:active::after {
+        transform: translateX(-50%) translateY(-50%) scale(0.98);
+      }
     }
 
     &-text {