feat: update design for product and product cards

frontend/admin/src/components/MainPageConfigurator/availableBlocks.js

@@ -70,12 +70,12 @@ export const blocks = [
       category_id: null,
       all_text: null,
       carousel: {
-        slides_per_view: null,
-        space_between: null,
+        slides_per_view: 2.5,
+        space_between: 10,
         autoplay: false,
         freemode: {
           enabled: false,
-        }
+        },
       },
     },
   },

frontend/spa/src/App.vue

@@ -19,7 +19,6 @@
 
           <PrivacyPolicy v-if="! settings.is_privacy_consented"/>
 
-          <CartButton v-if="settings.store_enabled"/>
           <Dock v-if="isAppDockShown"/>
 
           <div

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

@@ -1,13 +1,13 @@
 <template>
   <section class="px-4">
-    <header class="flex justify-between items-center mb-4">
+    <header class="flex justify-between items-end mb-4">
       <div>
         <div v-if="title" class="font-bold uppercase">{{ title }}</div>
-        <div v-if="description" class="text-sm">{{ description }}</div>
+        <div v-if="description" class="text-sm text-base-content/50">{{ description }}</div>
       </div>
 
       <div v-if="moreLink">
-        <RouterLink :to="moreLink" class="btn btn-ghost btn-xs" @click="haptic.selectionChanged">
+        <RouterLink :to="moreLink" class="btn btn-soft 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" />

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

@@ -17,13 +17,12 @@
       <SwiperSlide
           v-for="product in block.data.products.data"
           :key="product.id"
-
+          class="radius-box bg-base-100 shadow-sm p-2"
       >
-        <div class="will-change-transform active:scale-97 transition-transform">
+        <div>
           <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"/>

frontend/spa/src/components/ProductImageSwiper.vue

@@ -56,9 +56,3 @@ const onLoad = (url) => {
   if (url) loaded.value[url] = true;
 };
 </script>
-
-<style scoped>
-.radius-box {
-  border-radius: var(--radius-box);
-}
-</style>

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

@@ -1,9 +1,9 @@
 <template>
   <div v-if="special">
-    <span class="old-price text-neutral-content/70 line-through mr-1">{{ price }}</span>
-    <span class="curr-price font-medium">{{ special }}</span>
+    <span class="old-price text-base-content/50 line-through mr-1">{{ price }}</span>
+    <span class="curr-price font-bold">{{ special }}</span>
   </div>
-  <div v-else class="font-medium">{{ price }}</div>
+  <div v-else class="font-bold">{{ price }}</div>
 </template>
 
 <script setup>

frontend/spa/src/components/ProductsList.vue

@@ -4,17 +4,14 @@
       <h2 v-if="categoryName" class="text-lg font-bold mb-5">{{ categoryName }}</h2>
 
       <template v-if="products.length > 0">
-        <div
-            class="products-grid grid grid-cols-2 gap-x-2 gap-y-2"
-        >
+        <div class="products-grid grid grid-cols-2 gap-x-3 gap-y-3">
           <RouterLink
               v-for="(product, index) in products"
               :key="product.id"
-              class="product-grid-card group will-change-transform active:scale-97 transition-transform"
+              class="radius-box bg-base-100 shadow-sm p-2"
               :to="`/product/${product.id}`"
               @click="productClick(product, index)"
           >
-
             <ProductImageSwiper :images="product.images"/>
             <PriceTitle :product="product"/>
           </RouterLink>
@@ -152,3 +149,9 @@ function showFilters() {
   router.push({name: 'filters'});
 }
 </script>
+
+<style scoped>
+.product-grid-card {
+
+}
+</style>

frontend/spa/src/style.css

@@ -65,3 +65,11 @@ html, body, #app {
             /*+ 1rem*/
     );
 }
+
+html {
+    background-color: var(--color-base-200);
+}
+
+.radius-box {
+    border-radius: var(--radius-xl);
+}

frontend/spa/src/views/Product.vue

@@ -16,7 +16,7 @@
 
       <SingleProductImageSwiper v-else :images="images"/>
 
-      <div class="mx-auto max-w-2xl px-4 pt-6 pb-32 sm:px-6">
+      <div class="px-4 pt-6 pb-6">
         <!-- Header section -->
         <div class="mb-6">
           <div v-if="product.manufacturer" class="mb-2">
@@ -41,7 +41,7 @@
         </div>
 
         <!-- Price section -->
-        <div class="card bg-base-200/50 rounded-2xl p-5 mb-6 shadow-sm">
+        <div class="card bg-base-100 rounded-xl p-5 mb-6 shadow-sm">
           <div class="flex items-baseline gap-3 flex-wrap">
             <div v-if="product.special" class="flex items-baseline gap-3 flex-wrap">
               <span class="text-3xl sm:text-4xl font-bold text-primary">{{ product.special }}</span>
@@ -76,7 +76,7 @@
         <!-- Description and details -->
         <div class="space-y-6">
           <!-- Description -->
-          <div v-if="product.description" class="card bg-base-100 rounded-2xl p-5 shadow-sm">
+          <div v-if="product.description" class="card bg-base-100 rounded-xl p-5 shadow-sm">
             <h3 class="text-lg font-bold mb-4 flex items-center gap-2">
               <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                    stroke="currentColor" class="w-5 h-5">