feat: UI/UX, add reset cache to admin

frontend/spa/src/components/MainPage/Blocks/ProductsCarouselBlock.vue

@@ -6,7 +6,7 @@
     :moreText="block.data.all_text"
   >
     <Swiper
-        class="select-none"
+        class="select-none block-products-carousel"
         :slides-per-view="block.data?.carousel?.slides_per_view || 2.5"
         :space-between="block.data?.carousel?.space_between || 20"
         :autoplay="block.data?.carousel?.autoplay || false"
@@ -14,16 +14,24 @@
         :lazy="true"
         @sliderMove="hapticScroll"
     >
-      <SwiperSlide v-for="product in block.data.products.data" :key="product.id">
-        <RouterLink
-            :to="{name: 'product.show', params: {id: product.id}}"
-            @click="slideClick(product)"
-        >
-          <div class="text-center">
-            <img :src="product.images[0].url" :alt="product.name" loading="lazy" class="product-image"/>
-            <PriceTitle :product="product"/>
-          </div>
-        </RouterLink>
+      <SwiperSlide
+          v-for="product in block.data.products.data"
+          :key="product.id"
+
+      >
+        <div class="will-change-transform active:scale-97 transition-transform">
+          <RouterLink
+              :to="{name: 'product.show', params: {id: product.id}}"
+              @click="slideClick(product)"
+
+          >
+            <div class="text-center">
+              <img :src="product.images[0].url" :alt="product.name" loading="lazy" class="product-image"/>
+              <PriceTitle :product="product"/>
+            </div>
+          </RouterLink>
+        </div>
+
       </SwiperSlide>
     </Swiper>
   </BaseBlock>
@@ -32,13 +40,11 @@
 <script setup>
 import {useYaMetrikaStore} from "@/stores/yaMetrikaStore.js";
 import {Swiper, SwiperSlide} from "swiper/vue";
-import ProductTitle from "@/components/ProductItem/ProductTitle.vue";
 import {useHapticScroll} from "@/composables/useHapticScroll.js";
-import Price from "@/components/ProductItem/Price.vue";
 import BaseBlock from "@/components/MainPage/Blocks/BaseBlock.vue";
 import PriceTitle from "@/components/ProductItem/PriceTitle.vue";
 
-const hapticScroll = useHapticScroll(20, 'selectionChanged');
+const hapticScroll = useHapticScroll();
 const yaMetrika = useYaMetrikaStore();
 
 const props = defineProps({

frontend/spa/src/components/Navbar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="navbar bg-neutral text-neutral-content">
+  <div class="navbar">
     <div class="navbar-start">
       <div v-if="false" class="dropdown">
         <button class="btn btn-ghost btn-circle" @click="toggleDrawer">

frontend/spa/src/components/ProductItem/Price.vue

@@ -1,6 +1,6 @@
 <template>
   <div v-if="special">
-    <span class="old-price text-stone-500 line-through mr-1">{{ price }}</span>
+    <span class="old-price text-neutral-content/70 line-through mr-1">{{ price }}</span>
     <span class="curr-price font-medium">{{ special }}</span>
   </div>
   <div v-else class="font-medium">{{ price }}</div>

frontend/spa/src/components/ProductsList.vue

@@ -10,10 +10,11 @@
           <RouterLink
               v-for="(product, index) in products"
               :key="product.id"
-              class="product-grid-card group"
+              class="product-grid-card group will-change-transform active:scale-97 transition-transform"
               :to="`/product/${product.id}`"
               @click="productClick(product, index)"
           >
+
             <ProductImageSwiper :images="product.images"/>
             <PriceTitle :product="product"/>
           </RouterLink>

frontend/spa/src/components/Slider.vue

@@ -2,7 +2,7 @@
   <div v-if="config.slides.length > 0" class="app-banner" :class="classList">
     <Swiper
         :effect="slideEffect"
-        class="select-none"
+        class="mainpage-slider select-none"
         :slides-per-view="1"
         :space-between="config.space_between"
         :pagination="pagination"
@@ -77,7 +77,7 @@ const props = defineProps({
   }
 });
 
-const hapticScroll = useHapticScroll(20, 'impactOccurred', 'soft');
+const hapticScroll = useHapticScroll();
 const yaMetrika = useYaMetrikaStore();
 const modules = [
   Autoplay,
@@ -105,7 +105,7 @@ const classList = computed(() => {
 });
 
 const onSwiper = (swiper) => {
-  console.log(swiper);
+
 };
 const onSlideChange = () => {
 
@@ -195,4 +195,15 @@ onMounted(() => {
 .app-banner .swiper-horizontal .swiper-slide img {
   border-radius: var(--radius-box);
 }
+
+
+.app-banner .mainpage-slider .swiper-pagination-bullet {
+  background-color: var(--color-neutral-content); /* неактивные точки */
+  opacity: 0.6; /* чуть прозрачнее, чтобы не отвлекали */
+}
+
+.app-banner .mainpage-slider .swiper-pagination-bullet-active {
+  background-color: var(--color-primary); /* активная точка */
+  opacity: 1;
+}
 </style>