feat: design update, show avatar in navbar

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

@@ -0,0 +1,35 @@
+<template>
+  <section class="px-4">
+    <header class="flex justify-between items-center mb-4">
+      <div>
+        <div v-if="title" class="font-bold uppercase">{{ title }}</div>
+        <div v-if="description" class="text-sm">{{ description }}</div>
+      </div>
+
+      <div v-if="moreLink">
+        <RouterLink :to="moreLink" class="btn btn-ghost btn-xs" @click="haptic.selectionChanged">
+          {{ moreText || 'Смотреть всё' }}
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
+            <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
+          </svg>
+        </RouterLink>
+      </div>
+    </header>
+    <main>
+      <slot></slot>
+    </main>
+  </section>
+</template>
+
+<script setup>
+import {useHapticFeedback} from "@/composables/useHapticFeedback.js";
+
+const props = defineProps({
+  title: String,
+  description: String,
+  moreLink: [String, Object],
+  moreText: String,
+});
+
+const haptic = useHapticFeedback();
+</script>

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

@@ -1,51 +1,32 @@
 <template>
-  <section class="px-4">
-    <header class="flex justify-between items-center mb-2">
-      <div>
-        <div v-if="block.title" class="font-bold uppercase">{{ block.title }}</div>
-        <div v-if="block.description" class="text-sm">{{ block.description }}</div>
-      </div>
-
-      <div>
+  <BaseBlock
+    :title="block.title"
+    :description="block.description"
+    :moreLink="{name: 'product.categories.show', params: { category_id: block.data.category_id }}"
+    :moreText="block.data.all_text"
+  >
+    <Swiper
+        class="select-none"
+        :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"
+        :freeMode="freeModeSettings"
+        :lazy="true"
+        @sliderMove="hapticScroll"
+    >
+      <SwiperSlide v-for="product in block.data.products.data" :key="product.id">
         <RouterLink
-            :to="{name: 'product.categories.show',
-            params: { category_id: block.data.category_id }}"
-            class="btn btn-ghost btn-xs"
+            :to="{name: 'product.show', params: {id: product.id}}"
+            @click="slideClick(product)"
         >
-          {{ block.data.all_text || 'Смотреть всё' }}
+          <div class="text-center">
+            <img :src="product.images[0].url" :alt="product.name" loading="lazy" class="product-image"/>
+            <PriceTitle :product="product"/>
+          </div>
         </RouterLink>
-      </div>
-    </header>
-    <main>
-      <Swiper
-          class="select-none"
-          :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"
-          :freeMode="freeModeSettings"
-          :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"/>
-              <ProductTitle :title="product.name"/>
-
-              <div v-if="product.special" class="mt-1">
-                <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="font-medium">{{ product.price }}</p>
-            </div>
-          </RouterLink>
-        </SwiperSlide>
-      </Swiper>
-    </main>
-  </section>
+      </SwiperSlide>
+    </Swiper>
+  </BaseBlock>
 </template>
 
 <script setup>
@@ -53,6 +34,9 @@ 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 yaMetrika = useYaMetrikaStore();

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

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

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

@@ -1,6 +1,6 @@
 <template>
-  <section>
-    <header>
+  <section class="mainpage-block">
+    <header class="mainpage-block__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 mb-2">{{ block.description }}</div>
     </header>