feat: created basic equalizer animations

components/MobileLanding/Artist/MusicButtons/EqualizerButton/EqualizerBtn.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import { useState } from "react";
+import styles from "./equalizer.module.scss";
+
+export default function EqualizerBtn() {
+  const [isPlaying, setIsPlaying] = useState(false);
+
+  function clickHandler() {
+    setIsPlaying((prev) => !prev);
+  }
+  return (
+    <div
+      className={`${styles.equalizer}  ${
+        isPlaying ? styles.play : styles.pause
+      }`}
+      onClick={clickHandler}
+    >
+      <div className={styles.barContainer}>
+        <div className={styles.bar}></div>
+        <div className={styles.bar}></div>
+        <div className={styles.bar}></div>
+        <div className={styles.bar}></div>
+        <div className={styles.bar}></div>
+      </div>
+    </div>
+  );
+}

components/MobileLanding/Artist/MusicButtons/EqualizerButton/equalizer.module.scss

@@ -0,0 +1,58 @@
+@keyframes growShrink {
+  0%,
+  100% {
+    height: 3.5px;
+  }
+  50% {
+    height: 40%;
+  }
+}
+
+.equalizer {
+  aspect-ratio: 1;
+  width: 50px;
+  background-color: white;
+  border-radius: 50%;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  pointer-events: auto;
+
+  .barContainer {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    gap: 2px;
+
+    .bar {
+      width: 3.5px;
+      height: 3.5px;
+      background-color: black;
+      border-radius: 8px;
+      transition: height 0.65s ease-in-out;
+    }
+  }
+
+  &.play {
+    .barContainer {
+      .bar {
+        animation: growShrink 1s ease-in-out infinite forwards;
+
+        @for $i from 1 to 6 {
+          &:nth-of-type(#{$i}) {
+            animation-delay: calc(($i - 1) * 0.2s);
+          }
+        }
+      }
+    }
+  }
+
+  &.pause {
+    .barContainer {
+      .bar {
+        height: 3.5px;
+      }
+    }
+  }
+}