From b0ab8d0706c28868729f95bcd95842983cca8ca7 Mon Sep 17 00:00:00 2001
From: Ihor Orlovskyi <ihororlovskyi@gmail.com>
Date: Mon, 11 Aug 2025 00:34:38 +0300
Subject: [PATCH] hello-tailwind

---
 assets/css/tailwind.css         |  24 ++++
 assets/scss/item.scss           |  68 +++++------
 assets/scss/swiper-restyle.scss |  28 ++++-
 components/Donate.vue           |  33 +++---
 components/Footr.vue            |  72 ++++--------
 components/SwiperTop.vue        |   4 +-
 components/SwiperTop_copy.vue   | 134 ++++++++++++++++++++++
 layouts/default.vue             |  37 ++++--
 nuxt.config.js                  |  93 +++++++--------
 package-lock.json               | 195 +++++++++++++++++++++++++-------
 package.json                    |   9 +-
 pages/artists.vue               | 141 +++++++++++++++--------
 pages/playlists.vue             |  47 +++++---
 pages/releases.vue              |  49 ++++----
 pages/videos.vue                |  36 +++---
 plugins/tailwindcss.js          |   4 +
 static/sentimony-db-export.json |  44 ++++++-
 tailwind.config.js              |  34 ++++++
 18 files changed, 728 insertions(+), 324 deletions(-)
 create mode 100644 assets/css/tailwind.css
 create mode 100644 components/SwiperTop_copy.vue
 create mode 100644 plugins/tailwindcss.js
 create mode 100644 tailwind.config.js

diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css
new file mode 100644
index 00000000..3ea55787
--- /dev/null
+++ b/assets/css/tailwind.css
@@ -0,0 +1,24 @@
+/* @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital@0;1&display=swap'); */
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* @tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@theme {
+  --font-montserrat: 'Montserrat', sans-serif;
+}
+body {
+  @apply font-montserrat antialiased text-[12px]\/[1.4] md:text-[15px]/[1.5] text-white text-center bg-green-950 bg-[url(https://content.sentimony.com/assets/img/backgrounds/trees-green_v5.jpg?01)] bg-center bg-no-repeat bg-cover bg-fixed;
+}
+h1, h2, h3, h4, h5, h6, p { @apply mb-[.3rem] md:mb-[.5rem]; }
+h1, h2, h3, h4, h5, h6 { @apply font-normal; }
+h1 { @apply text-[18px] md:text-[32px] my-[.5em]; }
+h2 { @apply text-[1.5em]; }
+h3 { @apply text-[1.17em]; }
+h4 { @apply text-[1em]; }
+h5 { @apply text-[0.83em]; }
+h6 { @apply text-[0.67em]; } */
diff --git a/assets/scss/item.scss b/assets/scss/item.scss
index 6c626f9a..3bcdca9f 100644
--- a/assets/scss/item.scss
+++ b/assets/scss/item.scss
@@ -2,9 +2,9 @@
   position: relative;
   width: 76px;
 
-  @include media(M) {
-    width: 180px;
-  }
+  // @include media(M) {
+  //   width: 180px;
+  // }
 
   &__link {
     display: block;
@@ -21,10 +21,10 @@
     margin: 0 auto 4px;
     transition: background-color 0.2s ease-in-out;
 
-    @include media(M) {
-      width: 140px;
-      height: 140px;
-    }
+    // @include media(M) {
+    //   width: 140px;
+    //   height: 140px;
+    // }
 
     .item__link.is-selected &,
     .item__link:hover & {
@@ -36,13 +36,13 @@
     width: 60px;
     height: 60px;
     border-radius: 2px;
-    background-color: $colorBgBlack;
-    box-shadow: $shadow;
+    // background-color: $colorBgBlack;
+    // box-shadow: $shadow;
 
-    @include media(M) {
-      width: 120px;
-      height: 120px;
-    }
+    // @include media(M) {
+    //   width: 120px;
+    //   height: 120px;
+    // }
   }
 
   &__img {
@@ -62,11 +62,11 @@
     text-align: left;
     box-sizing: border-box;
 
-    @include media(M) {
-      font-size: 10px;
-      line-height: 1.5;
-      padding: 0.6em 1em;
-    }
+    // @include media(M) {
+    //   font-size: 10px;
+    //   line-height: 1.5;
+    //   padding: 0.6em 1em;
+    // }
   }
 
   &__status {
@@ -77,13 +77,13 @@
     z-index: 40;
     padding: 0.2em 0.8em;
     border-radius: 0 2px;
-    box-shadow: $shadow;
+    // box-shadow: $shadow;
 
-    @include media(M) {
-      top: 0;
-      right: 0;
-      font-size: 10px;
-    }
+    // @include media(M) {
+    //   top: 0;
+    //   right: 0;
+    //   font-size: 10px;
+    // }
 
     &--green {
       @extend .item__status;
@@ -103,10 +103,10 @@
     margin-bottom: 0.5rem;
     // height: 42px;
 
-    @include media(M) {
-      // height: 60px;
-      font-size: 12px;
-    }
+    // @include media(M) {
+    //   // height: 60px;
+    //   font-size: 12px;
+    // }
   }
 }
 
@@ -114,16 +114,16 @@
   .item__wrapper {
     height: 43.75px !important;
 
-    @include media(M) {
-      height: 87.5px !important;
-    }
+    // @include media(M) {
+    //   height: 87.5px !important;
+    // }
   }
 
   .item__cover {
     height: 33.75px !important;
 
-    @include media(M) {
-      height: 67.5px !important;
-    }
+    // @include media(M) {
+    //   height: 67.5px !important;
+    // }
   }
 }
diff --git a/assets/scss/swiper-restyle.scss b/assets/scss/swiper-restyle.scss
index fe9582cc..17f072ef 100644
--- a/assets/scss/swiper-restyle.scss
+++ b/assets/scss/swiper-restyle.scss
@@ -1,8 +1,20 @@
+@import '../../node_modules/coriolan-ui/tools/variables';
+
+@import '../../node_modules/coriolan-ui/mixins/media';
+
 // custom
 .swiper-list {
+  height: 164px;
+  // height: 296px;
+
   position: relative;
   overflow: hidden;
-  height: 164px;
+
+  // @media (min-width: 754px) {
+  //   & {
+  //     height: 296px;
+  //   }
+  // }
 
   @include media(M) {
     height: 296px;
@@ -14,9 +26,15 @@
   overflow: visible;
 }
 
+// .swiper-slide {
+//   width: 180px;
+// }
+
 .swiper-button-prev,
 .swiper-button-next {
-  display: none;
+  // display: none;
+  display: block;
+
   background-color: #fff;
   background-position: center;
   background-size: 20px;
@@ -32,9 +50,9 @@
   transition: opacity .2s ease;
   opacity: .7;
 
-  @include media(M) {
-    display: block;
-  }
+  // @include media(M) {
+  //   display: block;
+  // }
 
   &:hover {
     opacity: 1;
diff --git a/components/Donate.vue b/components/Donate.vue
index b6139b96..52168852 100644
--- a/components/Donate.vue
+++ b/components/Donate.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="donate">
+  <div class="donate relative">
     <img class="donate__bg" src="~/static/donate-bg.svg" alt="donate bg" />
-    <div class="donate__wrapper">
+    <div class="donate__wrapper px-2 py-[30px] md:py-[60px]">
       <p>My fellow artists and I always love reading your feedback.</p>
       <p>
         Find your favorite track and share your thoughts in the comments on our
@@ -12,7 +12,6 @@
         pages.
       </p>
       <p>Thank you — I truly appreciate it ❤️</p>
-      <!-- <p><i>—Ihor</i></p> -->
       <p>— Ihor</p>
     </div>
   </div>
@@ -21,20 +20,19 @@
 <script>
   export default {
     data: () => ({
-      youtube_url:
-        'https://www.youtube.com/@SentimonyRecords?sub_confirmation=1',
+      youtube_url: 'https://www.youtube.com/@SentimonyRecords?sub_confirmation=1',
       soundcloud_url: 'https://soundcloud.com/sentimony',
-      bandcamp_url: 'https://sentimony.bandcamp.com/follow_me'
+      bandcamp_url: 'https://sentimony.bandcamp.com/follow_me',
     })
   }
 </script>
 
 <style lang="scss">
-  @import '../node_modules/coriolan-ui/tools/variables';
-  @import '../node_modules/coriolan-ui/mixins/media';
+  // @import '../node_modules/coriolan-ui/tools/variables';
+  // @import '../node_modules/coriolan-ui/mixins/media';
 
   .donate {
-    position: relative;
+    // position: relative;
     color: #000;
     background-color: #fff;
     // background-color: #e0ebe0;
@@ -45,6 +43,7 @@
       bottom: 0;
       left: 50%;
       transform: translateX(-50%);
+      display: inline-block;
     }
 
     &__wrapper {
@@ -53,15 +52,15 @@
       box-sizing: border-box;
       position: relative;
       text-align: left;
-      padding-left: 0.6em;
-      padding-right: 0.6em;
-      padding-top: 30px;
-      padding-bottom: 30px;
+      // padding-left: 0.6em;
+      // padding-right: 0.6em;
+      // padding-top: 30px;
+      // padding-bottom: 30px;
 
-      @include media(M) {
-        padding-top: 60px;
-        padding-bottom: 60px;
-      }
+      // @include media(M) {
+      //   padding-top: 60px;
+      //   padding-bottom: 60px;
+      // }
 
       p {
         text-shadow: 0 2px 2px #fff, 0 -2px 2px #fff, 2px 0 2px #fff,
diff --git a/components/Footr.vue b/components/Footr.vue
index 85b8f6a4..f86331a1 100644
--- a/components/Footr.vue
+++ b/components/Footr.vue
@@ -1,59 +1,31 @@
 <template>
-  <div class="footr">
-
-    <MenuMain/>
-    <MenuSocial/>
+  <div class="relative z-100 bg-black text-white/50 text-xs leading-[1.4] md:leading-[1.5] px-1 py-[100px]">
+    <div class="flex flex-col items-center">
+
+      <MenuMain/>
+      <MenuSocial/>
+
+      <div class="mb-[24px]">
+        <div>2006 - {{ new Date().getFullYear() }} © Sentimony Records</div>
+        <div>All Rights Reserved</div>
+        <div>
+          <img 
+            class="w-[30px] block mx-auto mt-[4px]" 
+            src="https://content.sentimony.com/assets/img/svg-icons/sentimony-records-logo-v3.2.svg?01" 
+            alt="Sentimony Records Logo SVG"
+          />
+        </div>
+      </div>
 
-    <div class="footr__copyright">
-      <div>2006 - {{ new Date().getFullYear() }} © Sentimony Records</div>
-      <div>All Rights Reserved</div>
-      <div>
-        <img class="footr__copyright-logo" src="https://content.sentimony.com/assets/img/svg-icons/sentimony-records-logo-v3.2.svg?01" alt="Sentimony Records Logo SVG">
+      <div class="text-[10px] mb-[20px]">
+        <div>Design by <a class="text-white" href="https://www.facebook.com/apivniuk" target="_blank" rel="noopener">Anton Pivniuk</a></div>
+        <div>Development by <a class="text-white" href="https://github.com/sentimony/sentimony-nuxt" target="_blank" rel="noopener">Ihor Orlovskyi</a></div>
       </div>
-    </div>
 
-    <div class="footr__powered">
-      <div>Design by <a href="https://www.facebook.com/apivniuk" target="_blank" rel="noopener">Anton Pivniuk</a></div>
-      <div>Development by <a href="https://github.com/sentimony/sentimony-nuxt" target="_blank" rel="noopener">Ihor Orlovskyi</a></div>
     </div>
-
   </div>
 </template>
 
-<script>
-  import MenuMain from '~/components/MenuMain.vue'
-  import MenuSocial from '~/components/MenuSocial.vue'
-
-  export default {
-    components: {
-      MenuMain,
-      MenuSocial
-    }
-  }
-</script>
-
-<style lang="scss">
-  .footr {
-    padding: 100px .6em;
-    background-color: #000;
-    font-size: 12px;
-    color: rgba(#fff,.5);
-    position: relative;
-
-    &__copyright {
-      margin: 0 auto 2em;
-
-      &-logo {
-        display: block;
-        margin: .5em auto 0;
-        max-width: 30px;
-        height: auto;
-      }
-    }
+<script setup></script>
 
-    &__powered {
-      margin: 0 auto 2em;
-      font-size: 10px;
-    }
-  }
-</style>
+<style lang="scss"></style>
diff --git a/components/SwiperTop.vue b/components/SwiperTop.vue
index 4ce80a91..d28079c8 100644
--- a/components/SwiperTop.vue
+++ b/components/SwiperTop.vue
@@ -38,9 +38,7 @@
                 v-html="coming()"
               />
             </div>
-            <div v-if="i.coming_soon" class="item__status--green">
-              Coming Soon
-            </div>
+            <div v-if="i.coming_soon" class="item__status--green">Coming Soon</div>
             <div v-if="i.new" class="item__status--red">Out Now</div>
           </div>
           <div v-if="i.title" class="item__title">{{ i.title }}</div>
diff --git a/components/SwiperTop_copy.vue b/components/SwiperTop_copy.vue
new file mode 100644
index 00000000..b07751dd
--- /dev/null
+++ b/components/SwiperTop_copy.vue
@@ -0,0 +1,134 @@
+<template>
+  <div class="swiper-list">
+    <style type="text/tailwindcss">
+      .swiper-wrapper {
+        @apply flex flex-wrap justify-center w-full pb-[30px] md:pb-[60px];
+      }
+      /* .swiperTop .swiper-container {
+        @apply overflow-visible;
+      } */
+    </style>
+    <div v-if="title" class="title">{{ title }}</div>
+
+    <swiper
+      :class="{ 'swiper swiperTop': true, isShown }"
+      :options="swiperOption"
+    >
+      <swiper-slide
+        :class="'item w-[76px] md:w-[180px] ' + rectangle()"
+        v-for="(i, index) in list"
+        :key="index"
+        v-if="i.visible"
+      >
+        <router-link
+          v-ripple
+          class="item__link block group"
+          active-class="is-selected"
+          v-if="i.slug"
+          :to="'../../' + item + '/' + i.slug + '/'"
+        >
+          <div class="item__cover relative mb-[4px] flex items-center justify-center w-[70px] md:w-[140px] h-[70px] md:h-[140px] mx-auto rounded-[2px] transition-[background-color] duration-200 ease-in-out group-hover:bg-white/30">
+            <div class="w-[60px] md:w-[120px] h-[60px] md:h-[120px] shadow-[0_2px_10px_0_rgba(0,0,0,0.5)] text-left rounded-[2px] bg-black/50">
+              <img
+                v-if="i.cover_th"
+                class="item__img swiper-lazy block rounded-[2px] swiper-lazy"
+                :src="i.cover_th"
+                :alt="i.title + ' Small Thumbnail'"
+              />
+              <img
+                v-if="i.photo_th"
+                class="item__img swiper-lazy block rounded-[2px] swiper-lazy"
+                :src="i.photo_th"
+                :alt="i.title + ' Small Thumbnail'"
+              />
+              <div
+                v-if="!i.cover_xl && !i.photo_xl"
+                class="item__soon text-[7px]/[1.25] md:text-[10px]/[1.5] py-[0.3em] px-[0.5em] md:py-[0.6em] md:px-[1em] text-white/50"
+                v-html="coming()"
+              />
+            </div>
+            <div v-if="i.coming_soon" class="item__status--green text-[7px] md:text-[10px] absolute top-[-5px] md:top-[0] right-[-5px] md:right-[0] bg-green-600 shadow-[0_2px_10px_0_rgba(0,0,0,0.5)] px-[.8em] py-[.2em]">Coming Soon</div>
+            <div v-if="i.new" class="item__status--red text-[7px] md:text-[10px] absolute top-[-5px] md:top-[0] right-[-5px] md:right-[0] bg-red-600 shadow-[0_2px_10px_0_rgba(0,0,0,0.5)] px-[.8em] py-[.2em]">Out Now</div>
+          </div>
+          <div class="item__title text-[8px] md:text-[12px] mb-[.5rem] px-[2px]">{{ i.title }}</div>
+        </router-link>
+      </swiper-slide>
+      <!-- <div class="swiper-pagination" slot="pagination"></div> -->
+      <div class="swiper-button-next" slot="button-next"></div>
+      <div class="swiper-button-prev" slot="button-prev"></div>
+      <!-- <div class="swiper-scrollbar" slot="scrollbar"></div> -->
+    </swiper>
+  </div>
+</template>
+
+<script>
+  import AppContent from '~/plugins/app-content'
+
+  export default {
+    props: ['title', 'list', 'category', 'item'],
+    data() {
+      return {
+        isShown: false,
+        texts: AppContent.texts,
+        swiperOption: {
+          lazy: true,
+          // scrollbar: {
+          //   el: '.swiper-scrollbar',
+          //   hide: true
+          // },
+          mousewheelControl: true,
+          mousewheelForceToAxis: true,
+          freeMode: true,
+          slidesPerView: 'auto',
+          speed: 350,
+          // slidesPerGroup: 4,
+          slideToClickedSlide: true,
+          centeredSlides: true,
+          //  pagination: {
+          //   el: '.swiper-pagination',
+          //   clickable: true
+          // },
+          navigation: {
+            nextEl: '.swiper-button-next',
+            prevEl: '.swiper-button-prev'
+          }
+        }
+      }
+    },
+    mounted() {
+      setTimeout(() => {
+        this.isShown = true
+      }, 1000)
+    },
+    methods: {
+      coming(category) {
+        return this.category == 'artists' ? this.texts.comingPhoto : this.texts.comingCover
+      },
+      rectangle(category) {
+        return this.category == 'videos' ? 'item--rectangle' : ''
+      }
+    }
+  }
+</script>
+
+<style lang="scss">
+  .swiperTop {
+    opacity: 0;
+    // filter: blur(4px);
+    // backdrop-filter: blur(2px);
+    transition: opacity 0.4s ease;
+
+    &.isShown {
+      opacity: 1;
+      // filter: blur(0px);
+    }
+
+    // & .swiper-wrapper {
+    //   @apply flex flex-wrap justify-center w-full pb-[30px] md:pb-[60px];
+    // }
+  }
+
+  // .swiper-container {
+  //   overflow: visible;
+  // }
+</style>
diff --git a/layouts/default.vue b/layouts/default.vue
index 1dba556e..fdce78dd 100755
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,5 +1,24 @@
 <template>
   <div class="flex-sticky">
+    <!-- <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script> -->
+    <style type="text/tailwindcss">
+      /* @tailwind base;
+      @tailwind components;
+      @tailwind utilities; */
+      @theme {
+        --font-montserrat: 'Montserrat', sans-serif;
+        /*  */
+      }
+      body { @apply font-montserrat antialiased text-[12px]/[1.4] md:text-[15px]/[1.5] text-white text-center bg-green-950 bg-[url(https://content.sentimony.com/assets/img/backgrounds/trees-green_v5.jpg?01)] bg-center bg-no-repeat bg-cover bg-fixed; }
+      h1, h2, h3, h4, h5, h6, p { @apply mb-[.3rem] md:mb-[.5rem]; }
+      h1, h2, h3, h4, h5, h6 { @apply font-normal; }
+      h1 { @apply text-[18px] md:text-[32px] my-[.5em]; }
+      h2 { @apply text-[1.5em]; }
+      h3 { @apply text-[1.17em]; }
+      h4 { @apply text-[1em]; }
+      h5 { @apply text-[0.83em]; }
+      h6 { @apply text-[0.67em]; }
+    </style>
     <!-- <BaseBg/> -->
     <div class="flex-sticky__fractal">
       <Fractal />
@@ -15,12 +34,12 @@
       <div style="display: flex; flex-direction: column; justify-content: center;">
         <!-- <div :class="showHero ? 'sen-dn' : 'sen-db'"> -->
         <div style="order: 0;">
-          <Hero v-if="isIndex" />
+          <!-- <Hero v-if="isIndex" /> -->
         </div>
 
         <!-- </div> -->
 
-        <div :class="showReleases || isIndex ? 'sen-o1' : 'sen-o0'" style="order: 1;">
+        <div :class="showReleases || isIndex ? 'opacity-100 h-[inherit]' : 'opacity-0 h-[0px]'" style="order: 1;">
           <SwiperTop
             title="Releases"
             :list="releasesSortedByDate"
@@ -29,7 +48,7 @@
           />
         </div>
 
-        <div :class="showArtists || isIndex ? 'sen-o1' : 'sen-o0'" :style="isIndex ? 'order: 3;' : 'order: 1;'">
+        <div :class="showArtists || isIndex ? 'opacity-100 h-[inherit]' : 'opacity-0 h-[0px]'" :style="isIndex ? 'order: 3;' : 'order: 1;'">
           <SwiperTop
             title="Artists"
             :list="artistsSortedByCategoryId"
@@ -38,7 +57,7 @@
           />
         </div>
 
-        <div :class="showVideos ? 'sen-o1' : 'sen-o0'" style="order: 1;">
+        <div :class="showVideos ? 'opacity-100 h-[inherit]' : 'opacity-0 h-[0px]'" style="order: 1;">
           <SwiperTop
             title="Videos"
             :list="videosSortedByDate"
@@ -47,9 +66,9 @@
           />
         </div>
 
-        <div :class="showPlaylists ? 'sen-o1' : 'sen-o0'" style="order: 1;">
-          <SwiperTop
-            title="Playlists"
+        <div :class="showPlaylists ? 'opacity-100 h-[inherit]' : 'opacity-0 h-[0px]'" style="order: 1;">
+          <SwiperTop_copy
+            title="Playlists11!"
             :list="playlistsSortedByDate"
             category="playlists"
             item="playlist"
@@ -85,6 +104,7 @@
   import Footr from '~/components/Footr.vue'
   // import AppPlayerDraggable from '../components/AppPlayerDraggable.vue'
   import SwiperTop from '../components/SwiperTop.vue'
+  import SwiperTop_copy from '../components/SwiperTop_copy.vue'
 
   export default {
     components: {
@@ -97,7 +117,8 @@
       Donate,
       // AppPlayerDraggable,
       Footr,
-      SwiperTop
+      SwiperTop,
+      SwiperTop_copy,
     },
     data: () => ({
       releases: [],
diff --git a/nuxt.config.js b/nuxt.config.js
index d0e101fd..6a67dc13 100755
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -7,44 +7,17 @@ module.exports = {
       { name: 'viewport', content: 'width=device-width, initial-scale=1' }
     ],
     link: [
-      {
-        rel: 'stylesheet',
-        href:
-          'https://fonts.googleapis.com/css2?family=Montserrat:ital@0;1&display=swap'
-      },
-      {
-        rel: 'stylesheet',
-        href:
-          'https://fonts.googleapis.com/css2?family=Julius+Sans+One&display=swap'
-      },
-      // {
-      //   rel: 'stylesheet',
-      //   href: 'https://fonts.googleapis.com/css2?family=Lekton&display=swap'
-      // },
-      // {
-      //   rel: 'stylesheet',
-      //   href:
-      //     'https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap'
-      // },
-      {
-        rel: 'apple-touch-icon',
-        sizes: '180x180',
-        href: '/favicon-v2-green/apple-touch-icon.png'
-      },
-      {
-        rel: 'icon',
-        type: 'image/svg+xml',
-        href: '/favicon-v2-green/favicon.svg'
-      },
-      {
-        rel: 'alternate icon',
-        type: 'image/x-icon',
-        href: '/favicon-v2-green/favicon.ico'
-      },
-      {
-        rel: 'manifest',
-        href: '/favicon-v2-green/site.webmanifest'
-      }
+      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Montserrat:ital@0;1&display=swap' },
+      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Julius+Sans+One&display=swap' },
+      // { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Lekton&display=swap' },
+      // { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap' },
+      { rel: 'apple-touch-icon', sizes: '180x180', href: '/favicon-v2-green/apple-touch-icon.png' },
+      { rel: 'icon', type: 'image/svg+xml', href: '/favicon-v2-green/favicon.svg' },
+      { rel: 'alternate icon', type: 'image/x-icon', href: '/favicon-v2-green/favicon.ico' },
+      { rel: 'manifest', href: '/favicon-v2-green/site.webmanifest' },
+    ],
+    script: [
+      { src: 'https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4' }
     ]
   },
   components: true,
@@ -63,38 +36,52 @@ module.exports = {
     { src: '~/plugins/vue-ripple-directive.js', ssr: false },
     { src: '~/plugins/vue-mq.js', ssr: true },
     '~/plugins/pinia.js',
+    // '~/plugins/tailwindcss.js',
   ],
   css: [
-    'normalize.css/normalize.css',
+    // 'normalize.css/normalize.css',
+    // '~/assets/css/tailwind.css',
     'swiper/css/swiper.css',
-    'assets/scss/base.scss',
+    '@/assets/scss/swiper-restyle.scss',
+    '@/assets/scss/item.scss',
+    // 'assets/scss/base.scss',
+    'assets/scss/flex-sticky.scss',
     // 'swiper/swiper-bundle.css',
-    '@/assets/scss/transitions.scss'
+    '@/assets/scss/transitions.scss',
+  ],
+  modules: [
+    'nuxt-facebook-pixel-module',
+    // '@nuxtjs/tailwindcss',
   ],
-  modules: ['nuxt-facebook-pixel-module'],
   facebook: {
     track: 'PageView',
     pixelId: 168167750758036,
     version: '2.0',
     disabled: false
   },
+  // tailwindcss: {
+  //   cssPath: '~/assets/css/tailwind.css'
+  // },
+  buildModules: [
+    '@nuxtjs/composition-api/module',
+    // '@nuxt/postcss8',
+    // '@nuxtjs/tailwindcss',
+  ],
   build: {
-    // loaders: {
-    //   scss: {
-    //     implementation: require('sass'),
-    //   },
-    //   sass: {
-    //     implementation: require('sass'),
-    //   },
+    // postcss: {
+    //   postcssOptions: {
+    //     plugins: {
+    //       // tailwindcss: {},
+    //       '@tailwindcss/postcss': {},
+    //       autoprefixer: {},
+    //     }
+    //   }
     // },
-    vendor: ['axios'],
+    // vendor: ['axios'],
     // analyze: {
     //   analyzerMode: 'static'
     // }
   },
-  buildModules: [
-    '@nuxtjs/composition-api/module',
-  ],
   router: {
     scrollBehavior: function(to, from, savedPosition) {
       return { x: 0, y: 0 }
diff --git a/package-lock.json b/package-lock.json
index c5c68426..880b753a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,16 +9,15 @@
       "version": "1.0.0",
       "dependencies": {
         "@nuxtjs/composition-api": "^0.34.0",
-        "axios": "^0.21.2",
-        "core-js": "^3.6.5",
+        "axios": "^1.11.0",
+        "core-js": "^3.44.0",
         "coriolan-ui": "^0.1.20",
         "firebase": "^7.18.0",
-        "moment": "^2.29.1",
+        "moment": "^2.30.1",
         "normalize.css": "^8.0.1",
         "nuxt": "^2.18.1",
-        "nuxt-facebook-pixel-module": "^1.3.0",
+        "nuxt-facebook-pixel-module": "^1.6.0",
         "pinia": "^2.0.14",
-        "swiper": "^5.4.5",
         "v-img": "^0.2.0",
         "vue-awesome-swiper": "^4.1.1",
         "vue-mq": "^1.0.1",
@@ -5253,6 +5252,12 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "license": "MIT"
+    },
     "node_modules/atob": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
@@ -5318,12 +5323,14 @@
       }
     },
     "node_modules/axios": {
-      "version": "0.21.4",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.4.tgz",
-      "integrity": "sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==",
+      "version": "1.11.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.11.0.tgz",
+      "integrity": "sha512-1Lx3WLFQWm3ooKDYZD1eXmoGO9fxYQjrycfHFC8P0sCfQVXyROp0p9PFWBehewBOdCwHc+f/b8I0fMto5eSfwA==",
       "license": "MIT",
       "dependencies": {
-        "follow-redirects": "^1.14.0"
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.4",
+        "proxy-from-env": "^1.1.0"
       }
     },
     "node_modules/babel-loader": {
@@ -5664,14 +5671,29 @@
       }
     },
     "node_modules/buffer": {
-      "version": "4.9.2",
-      "resolved": "https://registry.npmjs.org/buffer/-/buffer-4.9.2.tgz",
-      "integrity": "sha512-xq+q3SRMOxGivLhBNaUdC64hDTQwejJ+H0T/NB1XMtTVEwNTrfFF3gAxiyW0Bu/xWEGhjVKgUcMhCrUy2+uCWg==",
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
+      "integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
       "license": "MIT",
+      "optional": true,
+      "peer": true,
       "dependencies": {
-        "base64-js": "^1.0.2",
-        "ieee754": "^1.1.4",
-        "isarray": "^1.0.0"
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.2.1"
       }
     },
     "node_modules/buffer-from": {
@@ -6247,6 +6269,18 @@
       "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==",
       "license": "MIT"
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "license": "MIT",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/commander": {
       "version": "10.0.1",
       "resolved": "https://registry.npmjs.org/commander/-/commander-10.0.1.tgz",
@@ -7154,6 +7188,15 @@
       "integrity": "sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==",
       "license": "MIT"
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/depd": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
@@ -7284,6 +7327,7 @@
       "resolved": "https://registry.npmjs.org/dom7/-/dom7-2.1.5.tgz",
       "integrity": "sha512-xnhwVgyOh3eD++/XGtH+5qBwYTgCm0aW91GFgPJ3XG+jlsRLyJivnbP0QmUBFhI+Oaz9FV0s7cxgXHezwOEBYA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "ssr-window": "^2.0.0"
       }
@@ -7406,9 +7450,9 @@
       "license": "MIT"
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.5.192",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.192.tgz",
-      "integrity": "sha512-rP8Ez0w7UNw/9j5eSXCe10o1g/8B1P5SM90PCCMVkIRQn2R0LEHWz4Eh9RnxkniuDe1W0cTSOB3MLlkTGDcuCg==",
+      "version": "1.5.194",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.194.tgz",
+      "integrity": "sha512-SdnWJwSUot04UR51I2oPD8kuP2VI37/CADR1OHsFOUzZIvfWJBO6q11k5P/uKNyTT3cdOsnyjkrZ+DDShqYqJA==",
       "license": "ISC"
     },
     "node_modules/elliptic": {
@@ -8242,9 +8286,9 @@
       }
     },
     "node_modules/follow-redirects": {
-      "version": "1.15.9",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz",
-      "integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==",
+      "version": "1.15.11",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.11.tgz",
+      "integrity": "sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==",
       "funding": [
         {
           "type": "individual",
@@ -8285,6 +8329,22 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/form-data": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.4.tgz",
+      "integrity": "sha512-KrGhL9Q4zjj0kiUt5OO4Mr/A/jlI2jDYs5eHBpYHPcBEVSiipAvn2Ko2HnPe20rmcuuvMHNdZFp+4IlGTMF0Ow==",
+      "license": "MIT",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "es-set-tostringtag": "^2.1.0",
+        "hasown": "^2.0.2",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/fraction.js": {
       "version": "4.3.7",
       "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
@@ -10441,9 +10501,9 @@
       "license": "CC0-1.0"
     },
     "node_modules/memfs": {
-      "version": "4.23.0",
-      "resolved": "https://registry.npmjs.org/memfs/-/memfs-4.23.0.tgz",
-      "integrity": "sha512-SucHN2lcWf0jrnw+jP6FoVW6l/zGJiXfNMdApZzG0x/0mAIMdwAeR5mjfsCH5U3BoqpUEtqzz+dSQSO0H/eqxg==",
+      "version": "4.34.0",
+      "resolved": "https://registry.npmjs.org/memfs/-/memfs-4.34.0.tgz",
+      "integrity": "sha512-grcxk6xaTzKOJggz8H+rjN7IMPvMZkH3VbRzjOqfGUUqCrdKStCvD77pvpArqZQzyiNB1HWRmyijzmLQlyQyfw==",
       "license": "Apache-2.0",
       "dependencies": {
         "@jsonjoy.com/json-pack": "^1.0.3",
@@ -10475,13 +10535,30 @@
         "tslib": "2"
       }
     },
+    "node_modules/memfs/node_modules/@jsonjoy.com/buffers": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@jsonjoy.com/buffers/-/buffers-1.0.0.tgz",
+      "integrity": "sha512-NDigYR3PHqCnQLXYyoLbnEdzMMvzeiCWo1KOut7Q0CoIqg9tUAPKJ1iq/2nFhc5kZtexzutNY0LFjdwWL3Dw3Q==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=10.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/streamich"
+      },
+      "peerDependencies": {
+        "tslib": "2"
+      }
+    },
     "node_modules/memfs/node_modules/@jsonjoy.com/json-pack": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/@jsonjoy.com/json-pack/-/json-pack-1.4.0.tgz",
-      "integrity": "sha512-Akn8XZqN3xO9YGcgvIiTauBBXTP92QSvw6EcGha+p5nm7brhbwvev5gw4fi+ouLGrBpfPpb72+S5pxl4mkMIGQ==",
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/@jsonjoy.com/json-pack/-/json-pack-1.7.0.tgz",
+      "integrity": "sha512-XHjFn3QhP8uMak/Mm+0W+f7XPBk1f10LWe1Ba/IoOtd+tRJtNU4m9g5UJpJESVQMousq9BdBNNDNqOFiRnyj5g==",
       "license": "Apache-2.0",
       "dependencies": {
         "@jsonjoy.com/base64": "^1.1.1",
+        "@jsonjoy.com/json-pointer": "^1.0.1",
         "@jsonjoy.com/util": "^1.1.2",
         "hyperdyperid": "^1.2.0",
         "thingies": "^1.20.0"
@@ -10497,11 +10574,33 @@
         "tslib": "2"
       }
     },
+    "node_modules/memfs/node_modules/@jsonjoy.com/json-pointer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@jsonjoy.com/json-pointer/-/json-pointer-1.0.1.tgz",
+      "integrity": "sha512-tJpwQfuBuxqZlyoJOSZcqf7OUmiYQ6MiPNmOv4KbZdXE/DdvBSSAwhos0zIlJU/AXxC8XpuO8p08bh2fIl+RKA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@jsonjoy.com/util": "^1.3.0"
+      },
+      "engines": {
+        "node": ">=10.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/streamich"
+      },
+      "peerDependencies": {
+        "tslib": "2"
+      }
+    },
     "node_modules/memfs/node_modules/@jsonjoy.com/util": {
-      "version": "1.8.0",
-      "resolved": "https://registry.npmjs.org/@jsonjoy.com/util/-/util-1.8.0.tgz",
-      "integrity": "sha512-HeR0JQNEdBozt+FrfyM5T0X3R+fIN0D+BRDkxPP5o41fTWzHfeZEqtK16aTW8haU+h+SG7XYq9PP5kobvOmkSA==",
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/@jsonjoy.com/util/-/util-1.8.1.tgz",
+      "integrity": "sha512-26hOMkQx15sYBpt/bCK3/S7Bep8vMy+VKGBhWQax7GXYd+mwP5mc0HNX5oqLws/JQZ9GRjn9rvXoDbcq1OC2xA==",
       "license": "Apache-2.0",
+      "dependencies": {
+        "@jsonjoy.com/buffers": "^1.0.0"
+      },
       "engines": {
         "node": ">=10.0"
       },
@@ -10629,9 +10728,9 @@
       }
     },
     "node_modules/mime-db": {
-      "version": "1.54.0",
-      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.54.0.tgz",
-      "integrity": "sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==",
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
       "license": "MIT",
       "engines": {
         "node": ">= 0.6"
@@ -10649,15 +10748,6 @@
         "node": ">= 0.6"
       }
     },
-    "node_modules/mime-types/node_modules/mime-db": {
-      "version": "1.52.0",
-      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
-      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
     "node_modules/mimic-fn": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
@@ -11018,6 +11108,17 @@
         "vm-browserify": "^1.0.1"
       }
     },
+    "node_modules/node-libs-browser/node_modules/buffer": {
+      "version": "4.9.2",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-4.9.2.tgz",
+      "integrity": "sha512-xq+q3SRMOxGivLhBNaUdC64hDTQwejJ+H0T/NB1XMtTVEwNTrfFF3gAxiyW0Bu/xWEGhjVKgUcMhCrUy2+uCWg==",
+      "license": "MIT",
+      "dependencies": {
+        "base64-js": "^1.0.2",
+        "ieee754": "^1.1.4",
+        "isarray": "^1.0.0"
+      }
+    },
     "node_modules/node-libs-browser/node_modules/punycode": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
@@ -14100,6 +14201,12 @@
       "integrity": "sha512-hHVTzba3wboROl0/aWRRG9dMytgH6ow//STBZh43l/wQgmMhYhOFi0EHWAPtoCz9IAUymsyP0TSBHkhgMEGNnQ==",
       "license": "MIT"
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
+      "license": "MIT"
+    },
     "node_modules/prr": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
@@ -15654,7 +15761,8 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-2.0.0.tgz",
       "integrity": "sha512-NXzN+/HPObKAx191H3zKlYomE5WrVIkoCB5IaSdvKokxTpjBdWfr0RaP+1Z5KOfDT0ZVz+2tdtiBkhsEQ9p+0A==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/ssri": {
       "version": "8.0.1",
@@ -16068,6 +16176,7 @@
       "integrity": "sha512-7QjA0XpdOmiMoClfaZ2lYN6ICHcMm72LXiY+NF4fQLFidigameaofvpjEEiTQuw3xm5eksG5hzkaRsjQX57vtA==",
       "hasInstallScript": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "dom7": "^2.1.5",
         "ssr-window": "^2.0.0"
diff --git a/package.json b/package.json
index 903b7e1d..29f96809 100644
--- a/package.json
+++ b/package.json
@@ -5,16 +5,15 @@
   "author": "Ihor Orlovskyi",
   "dependencies": {
     "@nuxtjs/composition-api": "^0.34.0",
-    "axios": "^0.21.2",
-    "core-js": "^3.6.5",
+    "axios": "^1.11.0",
+    "core-js": "^3.44.0",
     "coriolan-ui": "^0.1.20",
     "firebase": "^7.18.0",
-    "moment": "^2.29.1",
+    "moment": "^2.30.1",
     "normalize.css": "^8.0.1",
     "nuxt": "^2.18.1",
-    "nuxt-facebook-pixel-module": "^1.3.0",
+    "nuxt-facebook-pixel-module": "^1.6.0",
     "pinia": "^2.0.14",
-    "swiper": "^5.4.5",
     "v-img": "^0.2.0",
     "vue-awesome-swiper": "^4.1.1",
     "vue-mq": "^1.0.1",
diff --git a/pages/artists.vue b/pages/artists.vue
index 01d91759..4d487d14 100755
--- a/pages/artists.vue
+++ b/pages/artists.vue
@@ -1,96 +1,145 @@
 <template>
-  <div class="page">
+  <div class="px-1 pb-[30px] md:pb-[60px]">
 
-    <h1>Artists</h1>
+    <h1>{{ pageTitle }}</h1>
 
     <h2>Producers & Musicians</h2>
 
-    <div class="list">
-      <div class="item"
-        v-for="(i, index) in sortByCategoryId"
+    <div class="flex flex-wrap justify-center w-full pb-[30px] md:pb-[60px]">
+
+      <div
+        class="w-[76px] md:w-[180px]"
+        v-for="(i, index) in artistsSortByCategoryId"
         :key="index"
         v-if="i.visible && i.category == 'musician'"
       >
-        <router-link v-ripple :to="'/artist/' + i.slug + '/'" class="item__link">
-          <div class="item__wrapper">
-            <div class="item__cover">
-              <img v-if="i.photo_th" class="item__img"
+        <router-link
+          v-ripple
+          class="block group"
+          v-if="i.slug"
+          :to="'/artist/' + i.slug + '/'"
+        >
+
+          <div class="relative mb-[4px] flex items-center justify-center w-[70px] md:w-[140px] h-[70px] md:h-[140px] mx-auto rounded-[2px] transition-[background-color] duration-200 ease-in-out group-hover:bg-white/30">
+            <div class="w-[60px] md:w-[120px] h-[60px] md:h-[120px] shadow-[0_2px_10px_0_rgba(0,0,0,0.5)] text-left rounded-[2px] bg-black/50">
+              <img
+                class="block rounded-[2px]"
+                v-if="i.photo_th"
                 :src="i.photo_th"
                 :alt="i.title + ' Small Thumbnail'"
-              >
-              <div v-else class="item__soon" v-html="texts.comingPhoto"/>
+              />
+              <div v-else class="text-[7px]/[1.25] md:text-[10px]/[1.5] py-[0.3em] px-[0.5em] md:py-[0.6em] md:px-[1em] text-white/50" v-html="texts.comingPhoto"/>
             </div>
           </div>
-          <div class="item__title">{{ i.title }}</div>
+
+          <div class="text-[8px] md:text-[12px] mb-[.5rem] px-[2px]">{{ i.title }}</div>
+
         </router-link>
       </div>
+    
     </div>
 
     <h2>Djs</h2>
 
-    <div class="list">
-      <div class="item"
-        v-for="(i, index) in sortByCategoryId"
+    <div class="flex flex-wrap justify-center w-full pb-[30px] md:pb-[60px]">
+
+      <div
+        class="w-[76px] md:w-[180px]"
+        v-for="(i, index) in artistsSortByCategoryId"
         :key="index"
         v-if="i.visible && i.category == 'dj'"
       >
-        <router-link v-ripple :to="'/artist/' + i.slug + '/'" class="item__link">
-          <div class="item__wrapper">
-            <div class="item__cover">
-              <img v-if="i.photo_th" class="item__img"
+        <router-link
+          v-ripple
+          class="block group"
+          v-if="i.slug"
+          :to="'/artist/' + i.slug + '/'"
+        >
+
+          <div class="relative mb-[4px] flex items-center justify-center w-[70px] md:w-[140px] h-[70px] md:h-[140px] mx-auto rounded-[2px] transition-[background-color] duration-200 ease-in-out group-hover:bg-white/30">
+            <div class="w-[60px] md:w-[120px] h-[60px] md:h-[120px] shadow-[0_2px_10px_0_rgba(0,0,0,0.5)] text-left rounded-[2px] bg-black/50">
+              <img
+                class="block rounded-[2px]"
+                v-if="i.photo_th"
                 :src="i.photo_th"
                 :alt="i.title + ' Small Thumbnail'"
-              >
-              <div v-else class="item__soon" v-html="texts.comingPhoto"/>
+              />
+              <div v-else class="text-[7px]/[1.25] md:text-[10px]/[1.5] py-[0.3em] px-[0.5em] md:py-[0.6em] md:px-[1em] text-white/50" v-html="texts.comingPhoto"/>
             </div>
           </div>
-          <div class="item__title">{{ i.title }}</div>
+
+          <div class="text-[8px] md:text-[12px] mb-[.5rem] px-[2px]">{{ i.title }}</div>
+
         </router-link>
       </div>
     </div>
 
     <h2>Sound Engineers & Mastering Services</h2>
 
-    <div class="list">
-      <div class="item"
-        v-for="(i, index) in sortByCategoryId"
+    <div class="flex flex-wrap justify-center w-full pb-[30px] md:pb-[60px]">
+
+      <div
+        class="w-[76px] md:w-[180px]"
+        v-for="(i, index) in artistsSortByCategoryId"
         :key="index"
         v-if="i.visible && i.category == 'mastering'"
       >
-        <router-link v-ripple :to="'/artist/' + i.slug + '/'" class="item__link">
-          <div class="item__wrapper">
-            <div class="item__cover">
-              <img v-if="i.photo_th" class="item__img"
+        <router-link
+          v-ripple
+          class="block group"
+          v-if="i.slug"
+          :to="'/artist/' + i.slug + '/'"
+        >
+
+          <div class="relative mb-[4px] flex items-center justify-center w-[70px] md:w-[140px] h-[70px] md:h-[140px] mx-auto rounded-[2px] transition-[background-color] duration-200 ease-in-out group-hover:bg-white/30">
+            <div class="w-[60px] md:w-[120px] h-[60px] md:h-[120px] shadow-[0_2px_10px_0_rgba(0,0,0,0.5)] text-left rounded-[2px] bg-black/50">
+              <img
+                class="block rounded-[2px]"
+                v-if="i.photo_th"
                 :src="i.photo_th"
                 :alt="i.title + ' Small Thumbnail'"
-              >
-              <div v-else class="item__soon" v-html="texts.comingPhoto"/>
+              />
+              <div v-else class="text-[7px]/[1.25] md:text-[10px]/[1.5] py-[0.3em] px-[0.5em] md:py-[0.6em] md:px-[1em] text-white/50" v-html="texts.comingPhoto"/>
             </div>
           </div>
-          <div class="item__title">{{ i.title }}</div>
+
+          <div class="text-[8px] md:text-[12px] mb-[.5rem] px-[2px]">{{ i.title }}</div>
+
         </router-link>
       </div>
     </div>
 
     <h2>Visual Artists & Designers</h2>
 
-    <div class="list">
-      <div class="item"
-        v-for="(i, index) in sortByCategoryId"
+    <div class="flex flex-wrap justify-center w-full pb-[30px] md:pb-[60px]">
+
+      <div
+        class="w-[76px] md:w-[180px]"
+        v-for="(i, index) in artistsSortByCategoryId"
         :key="index"
         v-if="i.visible && i.category == 'designer'"
       >
-        <router-link v-ripple :to="'/artist/' + i.slug + '/'" class="item__link">
-          <div class="item__wrapper">
-            <div class="item__cover">
-              <img v-if="i.photo_th" class="item__img"
+        <router-link
+          v-ripple
+          class="block group"
+          v-if="i.slug"
+          :to="'/artist/' + i.slug + '/'"
+        >
+
+          <div class="relative mb-[4px] flex items-center justify-center w-[70px] md:w-[140px] h-[70px] md:h-[140px] mx-auto rounded-[2px] transition-[background-color] duration-200 ease-in-out group-hover:bg-white/30">
+            <div class="w-[60px] md:w-[120px] h-[60px] md:h-[120px] shadow-[0_2px_10px_0_rgba(0,0,0,0.5)] text-left rounded-[2px] bg-black/50">
+              <img
+                class="block rounded-[2px]"
+                v-if="i.photo_th"
                 :src="i.photo_th"
                 :alt="i.title + ' Small Thumbnail'"
-              >
-              <div v-else class="item__soon" v-html="texts.comingPhoto"/>
+              />
+              <div v-else class="text-[7px]/[1.25] md:text-[10px]/[1.5] py-[0.3em] px-[0.5em] md:py-[0.6em] md:px-[1em] text-white/50" v-html="texts.comingPhoto"/>
             </div>
           </div>
-          <div class="item__title">{{ i.title }}</div>
+
+          <div class="text-[8px] md:text-[12px] mb-[.5rem] px-[2px]">{{ i.title }}</div>
+
         </router-link>
       </div>
     </div>
@@ -105,8 +154,9 @@
 
   export default {
     layout: 'default',
-    data () {
+    data() {
       return {
+        pageTitle: 'Artists',
         texts: AppContent.texts,
       }
     },
@@ -115,7 +165,7 @@
       return { artists: data }
     },
     computed: {
-      sortByCategoryId () {
+      artistsSortByCategoryId() {
         return sortBy(this.artists, 'category_id')
       }
     },
@@ -129,5 +179,4 @@
   }
 </script>
 
-<style lang="scss">
-</style>
+<style lang="scss"></style>
diff --git a/pages/playlists.vue b/pages/playlists.vue
index c2e10cfc..b5a220bc 100644
--- a/pages/playlists.vue
+++ b/pages/playlists.vue
@@ -1,29 +1,40 @@
 <template>
-  <div class="page">
+  <div class="px-1 pb-[30px] md:pb-[60px]">
 
-    <h1>Playlists</h1>
+    <h1>{{ pageTitle }}</h1>
 
-    <div class="list">
-      <div class="item"
-        v-for="(i, index) in sortByDate"
+    <div class="flex flex-wrap justify-center w-full pb-[30px] md:pb-[60px]">
+
+      <div 
+        class="w-[76px] md:w-[180px]"
+        v-for="(i, index) in playlistsSortedByDate"
         :key="index"
         v-if="i.visible"
       >
-        <router-link v-ripple v-if="i.slug" :to="'/playlist/' + i.slug + '/'" class="item__link">
-          <div class="item__wrapper">
-            <div class="item__cover">
-              <img v-if="i.cover_th" class="item__img"
+        <router-link 
+          v-ripple 
+          class="block group"
+          v-if="i.slug" 
+          :to="'/playlist/' + i.slug + '/'" 
+        >
+          
+          <div class="relative mb-[4px] flex items-center justify-center w-[70px] md:w-[140px] h-[70px] md:h-[140px] mx-auto rounded-[2px] transition-[background-color] duration-200 ease-in-out group-hover:bg-white/30">
+            <div class="w-[60px] md:w-[120px] h-[60px] md:h-[120px] shadow-[0_2px_10px_0_rgba(0,0,0,0.5)] text-left rounded-[2px] bg-black/50">
+              <img 
+                class="block rounded-[2px]"
+                v-if="i.cover_th" 
                 :src="i.cover_th"
                 :alt="i.title + ' Small Thumbnail'"
-              >
-              <div v-else class="item__soon" v-html="texts.comingCover"/>
+              />
+              <div v-else class="text-[7px]/[1.25] md:text-[10px]/[1.5] py-[0.3em] px-[0.5em] md:py-[0.6em] md:px-[1em] text-white/50" v-html="texts.comingCover"/>
             </div>
-            <div v-if="i.coming_soon" class="item__status--green">Coming Soon</div>
-            <div v-if="i.new" class="item__status--red">Out Now</div>
           </div>
-          <div class="item__title">{{ i.title }}</div>
+
+          <div class="text-[8px] md:text-[12px] mb-[.5rem] px-[2px]">{{ i.title }}</div>
+
         </router-link>
       </div>
+      
     </div>
 
   </div>
@@ -36,8 +47,9 @@
 
   export default {
     layout: 'default',
-    data () {
+    data() {
       return {
+        pageTitle: 'Playlists',
         texts: AppContent.texts,
       }
     },
@@ -46,7 +58,7 @@
       return { playlists: data }
     },
     computed: {
-      sortByDate () {
+      playlistsSortedByDate() {
         return sortBy(this.playlists, 'date').reverse().reverse()
       }
     },
@@ -60,5 +72,4 @@
   }
 </script>
 
-<style lang="scss">
-</style>
+<style lang="scss"></style>
diff --git a/pages/releases.vue b/pages/releases.vue
index fb70a70a..2d41d0aa 100644
--- a/pages/releases.vue
+++ b/pages/releases.vue
@@ -1,42 +1,44 @@
 <template>
-  <div class="page">
-    <h1>Releases</h1>
+  <div class="px-1 pb-[30px] md:pb-[60px]">
+
+    <h1>{{ pageTitle }}</h1>
+
+    <div class="flex flex-wrap justify-center w-full pb-[30px] md:pb-[60px]">
 
-    <div class="list">
       <div
-        class="item"
-        v-for="(i, index) in sortByDate"
+        class="w-[76px] md:w-[180px]"
+        v-for="(i, index) in releasesSortedByDate"
         :key="index"
         v-if="i.visible"
       >
         <router-link
           v-ripple
+          class="block group"
           v-if="i.slug"
           :to="'/release/' + i.slug + '/'"
-          class="item__link"
         >
-          <div class="item__wrapper">
-            <div class="item__cover">
+          
+          <div class="relative mb-[4px] flex items-center justify-center w-[70px] md:w-[140px] h-[70px] md:h-[140px] mx-auto rounded-[2px] transition-[background-color] duration-200 ease-in-out group-hover:bg-white/30">
+            <div class="w-[60px] md:w-[120px] h-[60px] md:h-[120px] shadow-[0_2px_10px_0_rgba(0,0,0,0.5)] text-left rounded-[2px] bg-black/50">
               <img
+                class="block rounded-[2px]"
                 v-if="i.cover_th"
-                class="item__img"
                 :src="i.cover_th"
                 :alt="i.title + ' Small Thumbnail'"
               />
-              <div v-else class="item__soon" v-html="texts.comingCover" />
+              <div v-else class="text-[7px]/[1.25] md:text-[10px]/[1.5] py-[0.3em] px-[0.5em] md:py-[0.6em] md:px-[1em] text-white/50" v-html="texts.comingCover"/>
             </div>
-            <div v-if="i.coming_soon" class="item__status--green">
-              Coming Soon
-            </div>
-            <div v-if="i.new" class="item__status--red">Out Now</div>
-          </div>
-          <div class="item__title">
-            {{ i.title }}
-            <!-- <small>{{ i.format }}</small> -->
+            <div v-if="i.coming_soon" class="text-[7px] md:text-[10px] absolute top-[-5px] md:top-[0] right-[-5px] md:right-[0] bg-green-600 shadow-[0_2px_10px_0_rgba(0,0,0,0.5)] px-[.8em] py-[.2em]">Coming Soon</div>
+            <div v-if="i.new" class="text-[7px] md:text-[10px] absolute top-[-5px] md:top-[0] right-[-5px] md:right-[0] bg-red-600 shadow-[0_2px_10px_0_rgba(0,0,0,0.5)] px-[.8em] py-[.2em]">Out Now</div>
           </div>
+
+          <div class="text-[8px] md:text-[12px] mb-[.5rem] px-[2px]">{{ i.title }}</div>
+
         </router-link>
       </div>
+
     </div>
+
   </div>
 </template>
 
@@ -49,7 +51,8 @@
     layout: 'default',
     data() {
       return {
-        texts: AppContent.texts
+        pageTitle: 'Releases',
+        texts: AppContent.texts,
       }
     },
     async asyncData() {
@@ -57,7 +60,7 @@
       return { releases: data }
     },
     computed: {
-      sortByDate() {
+      releasesSortedByDate() {
         return sortBy(this.releases, 'date').reverse()
       }
     },
@@ -65,11 +68,7 @@
       title: 'Releases',
       meta: [
         { name: 'description', content: 'Releases of Sentimony Records' },
-        {
-          property: 'og:image',
-          content:
-            'https://content.sentimony.com/assets/img/og-images/sentimony/og-releases.jpg?01'
-        }
+        { property: 'og:image', content: 'https://content.sentimony.com/assets/img/og-images/sentimony/og-releases.jpg?01' }
       ]
     }
   }
diff --git a/pages/videos.vue b/pages/videos.vue
index 81a57966..b985f1fb 100644
--- a/pages/videos.vue
+++ b/pages/videos.vue
@@ -1,29 +1,36 @@
 <template>
-  <div class="page">
+  <div class="px-1 pb-[30px] md:pb-[60px]">
 
     <h1>{{ pageTitle }}</h1>
 
-    <div class="list">
+    <div class="flex flex-wrap justify-center w-full pb-[30px] md:pb-[60px]">
 
-      <div class="item item--rectangle"
+      <div 
+        class="w-[76px] md:w-[180px]"
         v-for="(i, index) in videosSortedByDate"
         :key="index"
         v-if="i.visible"
       >
-        <router-link v-ripple v-if="i.slug" :to="'/video/' + i.slug + '/'" class="item__link">
+        <router-link 
+          v-ripple 
+          class="block group"
+          v-if="i.slug" 
+          :to="'/video/' + i.slug + '/'" 
+        >
           
-          <div class="item__wrapper">
-            <div class="item__cover">
-              <img v-if="i.cover_th" class="item__img"
+          <div class="relative mb-[4px] flex items-center justify-center w-[70px] md:w-[140px] h-[43.75px] md:h-[87.5px] mx-auto rounded-[2px] transition-[background-color] duration-200 ease-in-out group-hover:bg-white/30">
+            <div class="w-[60px] md:w-[120px] h-[33.75px] md:h-[67.5px] shadow-[0_2px_10px_0_rgba(0,0,0,0.5)] text-left rounded-[2px] bg-black/50">
+              <img 
+                class="block rounded-[2px]"
+                v-if="i.cover_th"
                 :src="i.cover_th"
                 :alt="i.title + ' Small Thumbnail'"
-              >
-              <div v-if="!i.cover_th"
-                class="item__soon" v-html="texts.comingCover"
               />
+              <div v-else class="text-[7px]/[1.25] md:text-[10px]/[1.5] py-[0.3em] px-[0.5em] md:py-[0.6em] md:px-[1em] text-white/50" v-html="texts.comingCover"/>
             </div>
           </div>
-          <div class="item__title">{{ i.title }}</div>
+
+          <div class="text-[8px] md:text-[12px] mb-[.5rem] px-[2px]">{{ i.title }}</div>
 
         </router-link>
       </div>
@@ -40,7 +47,7 @@
 
   export default {
     layout: 'default',
-    data () {
+    data() {
       return {
         pageTitle: 'Videos',
         texts: AppContent.texts,
@@ -51,7 +58,7 @@
       return { videos: data }
     },
     computed: {
-      videosSortedByDate () {
+      videosSortedByDate() {
         return sortBy(this.videos, 'date').reverse()
       }
     },
@@ -65,5 +72,4 @@
   }
 </script>
 
-<style lang="scss">
-</style>
+<style lang="scss"></style>
diff --git a/plugins/tailwindcss.js b/plugins/tailwindcss.js
new file mode 100644
index 00000000..319e6c03
--- /dev/null
+++ b/plugins/tailwindcss.js
@@ -0,0 +1,4 @@
+// import Vue from 'vue'
+// import tailwindcss from 'tailwindcss'
+
+// Vue.use(tailwindcss)
diff --git a/static/sentimony-db-export.json b/static/sentimony-db-export.json
index d712daeb..770bd264 100644
--- a/static/sentimony-db-export.json
+++ b/static/sentimony-db-export.json
@@ -2219,7 +2219,7 @@
       "slug": "sphingida",
       "visible": false,
       "category": "musician",
-      "category_id": "",
+      "category_id": "120",
       "name": "Ihor Orlovskyi & Yulia Levchenko",
       "location": "Kyiv, Ukraine",
       "style": "Psychill",
@@ -9072,7 +9072,7 @@
       "cover_og": "https://content.sentimony.com/assets/img/playlists/goa_og.jpg",
       "cover_th": "https://content.sentimony.com/assets/img/playlists/goa_th.jpg",
       "cover_xl": "https://content.sentimony.com/assets/img/playlists/goa_xl.jpg",
-      "info": "<p>Goa Trance and Experimental Neo Goa releases of Sentimony Records released from 2011 to 2018.</p>",
+      "info": "<p>Goa Trance and Experimental Neo Goa releases of Sentimony Records at chronological order. Updates every new release.</p>",
       "links": {
         "spotify": "https://open.spotify.com/playlist/2vjEzwo7trlHcH74fnq8jb",
         "apple_music": "https://music.apple.com/ua/playlist/goa-trance-sentimony/pl.u-jV89bojTDoZBgpR",
@@ -9087,6 +9087,31 @@
         "napster": "https://app.napster.com/playlists/playlist/mp.276678980",
         "qobuz": ""
       }
+    },
+    "psydnb": {
+      "slug": "psydnb",
+      "title": "Psy DnB | Sentimony",
+      "style": "Psy DnB",
+      "date": "2017-01-01T12:05:00.000Z",
+      "visible": true,
+      "cover_og": "",
+      "cover_th": "",
+      "cover_xl": "",
+      "info": "<p>Psy DnB releases of Sentimony Records at chronological order. Updates every new release.</p>",
+      "links": {
+        "spotify": "",
+        "apple_music": "",
+        "googleplay_music": "",
+        "youtube": "",
+        "youtube_music": "",
+        "deezer": "",
+        "amazon_music": "",
+        "tidal": "",
+        "soundcloud_url": "",
+        "soundcloud_playlist_id": "",
+        "napster": "",
+        "qobuz": ""
+      }
     }
   },
   "videos": {
@@ -9179,6 +9204,21 @@
       "links": {
         "youtube": "https://youtu.be/ujmtrQXK1RI"
       }
+    },
+    "irukanji-from-my-nerves": {
+      "slug": "irukanji-from-my-nerves",
+      "title": "Irukanji - From My Nerves",
+      "visible": false,
+      "date": "2022-11-04T12:00:00.000Z",
+      "format": "clip",
+      "cover_og": "",
+      "cover_th": "",
+      "cover_xl": "",
+      "information": "<p>Information here</p>",
+      "credits": "<p>Credits here</p>",
+      "links": {
+        "youtube": ""
+      }
     }
   }
 }
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 00000000..64b6c38e
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,34 @@
+// module.exports = {
+//   content: [
+//     './components/**/*.{vue,js,ts}',
+//     './layouts/**/*.vue',
+//     './pages/**/*.vue',
+//     './plugins/**/*.{js,ts}',
+//     './nuxt.config.{js,ts}',
+//   ],
+//   mode: 'jit',
+//   theme: {
+//     extend: {
+//       fontFamily: {
+//         montserrat: ['Montserrat', 'sans-serif'],
+//       },
+//     },
+//   },
+// }
+
+// tailwind.config.js
+// /** @type {import('tailwindcss').Config} */
+// module.exports = {
+//   theme: {
+//     extend: {
+//       fontFamily: {
+//         montserrat: ['Montserrat', 'sans-serif'],
+//       },
+//       // ...інші розширення
+//     },
+//   },
+//   // plugins: [
+//   //   require('@tailwindcss/forms'),
+//   //   require('@tailwindcss/typography'),
+//   // ],
+// }
\ No newline at end of file