feat: improve mainpage ui/ux

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

@@ -10,7 +10,7 @@
         <RouterLink
             :to="{name: 'product.categories.show',
             params: { category_id: block.data.category_id }}"
-            class="btn btn-outline btn-xs"
+            class="btn btn-ghost btn-xs"
         >
           {{ block.data.all_text || 'Смотреть всё' }}
         </RouterLink>
@@ -24,6 +24,7 @@
           :autoplay="block.data?.carousel?.autoplay || false"
           :freeMode="freeModeSettings"
           :lazy="true"
+          @sliderMove="hapticScroll"
       >
         <SwiperSlide v-for="product in block.data.products.data" :key="product.id">
           <RouterLink
@@ -31,14 +32,14 @@
               @click="slideClick(product)"
           >
             <div class="text-center">
-              <img :src="product.images[0].url" :alt="product.name" loading="lazy">
-              <h3 class="product-title mt-4 text-sm">{{ product.name }}</h3>
+              <img :src="product.images[0].url" :alt="product.name" loading="lazy" class="product-image"/>
+              <ProductTitle :title="product.name"/>
 
               <div v-if="product.special" class="mt-1">
-                <p class="text-xs line-through mr-2">{{ product.price }}</p>
-                <p class="text-lg font-medium">{{ product.special }}</p>
+                <span class="text-xs line-through mr-2">{{ product.price }}</span>
+                <span class="text-base font-medium">{{ product.special }}</span>
               </div>
-              <p v-else class="mt-1 text-lg font-medium">{{ product.price }}</p>
+              <p v-else class="font-medium">{{ product.price }}</p>
             </div>
           </RouterLink>
         </SwiperSlide>
@@ -50,13 +51,12 @@
 <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";
 
+const hapticScroll = useHapticScroll(20, 'selectionChanged');
 const yaMetrika = useYaMetrikaStore();
 
-const freeModeSettings = {
-  enabled: false,
-};
-
 const props = defineProps({
   block: {
     type: Object,
@@ -64,6 +64,10 @@ const props = defineProps({
   }
 });
 
+const freeModeSettings = {
+  enabled: props.block.data?.carousel?.freemode?.enabled || false,
+};
+
 function slideClick(product) {
   if (props.block.goal_name) {
     yaMetrika.reachGoal(props.block.goal_name, {
@@ -73,3 +77,9 @@ function slideClick(product) {
   }
 }
 </script>
+
+<style scoped>
+.product-image {
+  border-radius: var(--radius-box);
+}
+</style>

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

@@ -1,8 +1,8 @@
 <template>
-  <section>
-    <header>
-      <div v-if="block.title" class="font-bold uppercase text-center">{{ block.title }}</div>
-      <div v-if="block.description" class="text-sm text-center">{{ block.description }}</div>
+  <section class="px-4">
+    <header class="mb-2">
+      <div v-if="block.title" class="font-bold uppercase">{{ block.title }}</div>
+      <div v-if="block.description" class="text-sm">{{ block.description }}</div>
     </header>
     <main>
       <ProductsList