CORE: highlite tutorial (#1133) (#1134)

oacore · Apr 4, 2024 · 3f4a07a · 3f4a07a
1 parent 76ed7c9
commit 3f4a07a
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 0 deletions.
diff --git a/pages/services/index.jsx b/pages/services/index.jsx
@@ -46,6 +46,7 @@ const FeaturesSection = ({ id, description, title, video, features }) => {
             type="button"
             onClick={() => setVisibleVideo(true)}
           >
+            <div className={styles.pulse} />
             <img src="/images/services/video_placeholder.svg" alt="video" />
           </button>
         )}

diff --git a/pages/services/services.module.scss b/pages/services/services.module.scss
@@ -28,6 +28,7 @@
   }
   &-video-img {
     margin-right: 1rem;
+    position: relative;
     &:hover,
     &:focus {
       --button-overlay: none;
@@ -37,6 +38,28 @@
       width: 100%;
       height: auto;
     }
+    .pulse {
+      position: absolute;
+      top: 18%;
+      left: 22%;
+      width: 100px;
+      height: 100px;
+      border-radius: 50%;
+      background-color: rgba(255, 0, 0, 0.5);
+      animation: pulse 2s infinite;
+      z-index: -1;
+    }
+
+    @keyframes pulse {
+      0% {
+        transform: scale(0);
+        opacity: 1;
+      }
+      100% {
+        transform: scale(2);
+        opacity: 0;
+      }
+    }
   }
   &-title {
     display: block;