add featured artists in playlist view

src/assets/css/_variables.scss

@@ -7,4 +7,5 @@ $green: rgb(67, 148, 67);
 $seperator: #ffffff46;
 // sizes
 $small: .5em;
+$smaller: .25em;
 

src/assets/css/global.scss

@@ -2,6 +2,9 @@
   --seperator: #ffffff46;
   --green: #4ad168;
 }
+* {
+  box-sizing: border-box;
+}
 
 body {
   margin: 0;
@@ -129,10 +132,6 @@ a {
   transition: transform 0.3s ease-in-out;
 }
 
-.image:hover {
-  transform: matrix(1.1, 0, 0, 1.1, 0, 0);
-  transition: transform 0.3s ease-in-out;
-}
 
 .ellipsis {
   overflow: hidden;

src/components/PlaylistView/FeaturedArtists.vue

@@ -0,0 +1,136 @@
+<template>
+  <div class="f-artists">
+    <div class="artists">
+      <div class="artist c1">
+        <div class="blur"></div>
+        <div class="s2"></div>
+        <p>Featured Artists</p>
+      </div>
+      <div class="artist" v-for="artist in artists" :key="artist">
+        <div>
+          <div class="artist-image image"></div>
+          <p class="artist-name">{{ artist }}</p>
+          <div class="a-circle"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  setup() {
+    const artists = ["Eminem", "Drake", "Kendrick Lamar"];
+
+    return {
+      artists,
+    };
+  },
+};
+</script>
+
+<style lang="scss">
+.f-artists {
+  height: 10em;
+  width: calc(100% - 1em);
+  background-color: #1f1e1d;
+  padding: $small;
+  border-radius: $small;
+}
+
+.f-artists .heading {
+  color: #fff;
+  margin: 0 0 1em 1em;
+}
+
+.f-artists .artists {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.f-artists .artist {
+  overflow: hidden;
+  position: relative;
+  margin-left: $smaller;
+  margin-right: $smaller;
+  width: 9em;
+  height: 9em;
+  border-radius: $small;
+  background-color: #565066;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.5s ease-in-out;
+}
+
+.f-artists .artist:hover {
+  transform: translateY(-1.5em);
+  transition: all 0.5s ease-in-out;
+}
+
+.f-artists .artist-image {
+  width: 7em;
+  height: 7em;
+  border-radius: 50%;
+  margin-bottom: $small;
+  background: url(../../assets/images/girl1.jpg);
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+.f-artists .c1 {
+  position: relative;
+  background: rgb(145, 42, 56);
+  width: 15em;
+  background-image: url(../../assets/images/gradient1.gif);
+  overflow: hidden;
+  margin-left: -0.1rem;
+}
+
+.f-artists .c1:hover > .s2 {
+  background: rgba(53, 53, 146, 0.8);
+  transition: all 0.5s ease;
+  width: 12em;
+  height: 12em;
+}
+
+.f-artists .c1 p {
+  position: absolute;
+  bottom: -2rem;
+  margin-left: 0.5rem;
+  z-index: 1;
+  font-size: 2rem;
+  font-weight: 700;
+  color: #ffffff;
+}
+
+.f-artists .artist-name {
+  margin: 0;
+  text-align: center;
+  font-size: small;
+}
+
+.f-artists .blur {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0);
+  backdrop-filter: blur(100px);
+  -webkit-backdrop-filter: blur(100px);
+  -moz-backdrop-filter: blur(100px);
+  border-radius: $small;
+}
+
+.f-artists .s2 {
+  position: absolute;
+  left: -2em;
+  bottom: -4em;
+  width: 10em;
+  height: 10em;
+  background: rgba(53, 53, 146, 0.445);
+  border-radius: 50%;
+  transition: all 0.5s ease;
+}
+
+</style>

src/views/PlaylistView.vue

@@ -2,17 +2,22 @@
   <Header />
   <div class="p-bg rounded">
     <SongList />
+    <div class="f-artists-p">
+      <FeaturedArtists />
+    </div>
   </div>
 </template>
 
 <script>
 import Header from "@/components/PlaylistView/Header.vue";
 import SongList from "@/components/FolderView/SongList.vue";
+import FeaturedArtists from "@/components/PlaylistView/FeaturedArtists.vue";
 
 export default {
   components: {
     Header,
     SongList,
+    FeaturedArtists,
   },
   setup() {
     return {};
@@ -22,9 +27,15 @@ export default {
 
 <style lang="scss">
 .p-bg {
+  position: relative;
   background: $card-dark;
-  padding: 20px;
   height: calc(100% - 16em);
-  padding: 0;
+  padding: $small;
+}
+
+.p-bg .f-artists {
+  position: absolute;
+  bottom: 0;
+  margin-top: 1em;
 }
 </style>