From 8a777cd4d280b7049b60fdd0d3fa0586561e0a65 Mon Sep 17 00:00:00 2001
From: Nikita Kiselev <kiselev2008@gmail.com>
Date: Sun, 14 Dec 2025 18:35:07 +0300
Subject: [PATCH] feat: update design for product and product cards

---
 .../MainPageConfigurator/availableBlocks.js         |  6 +++---
 frontend/spa/src/App.vue                            |  1 -
 .../src/components/MainPage/Blocks/BaseBlock.vue    |  6 +++---
 .../MainPage/Blocks/ProductsCarouselBlock.vue       |  5 ++---
 frontend/spa/src/components/ProductImageSwiper.vue  |  6 ------
 frontend/spa/src/components/ProductItem/Price.vue   |  6 +++---
 frontend/spa/src/components/ProductsList.vue        | 13 ++++++++-----
 frontend/spa/src/style.css                          |  8 ++++++++
 frontend/spa/src/views/Product.vue                  |  6 +++---
 .../console/Commands/ImagesCacheClearCommand.php    |  0
 .../console/Commands/ImagesWarmupCacheCommand.php   |  0
 .../framework/Cache/SymfonyRedisCache.php           |  0
 12 files changed, 30 insertions(+), 27 deletions(-)
 mode change 100644 => 100755 module/oc_telegram_shop/upload/oc_telegram_shop/console/Commands/ImagesCacheClearCommand.php
 mode change 100644 => 100755 module/oc_telegram_shop/upload/oc_telegram_shop/console/Commands/ImagesWarmupCacheCommand.php
 mode change 100644 => 100755 module/oc_telegram_shop/upload/oc_telegram_shop/framework/Cache/SymfonyRedisCache.php

diff --git a/frontend/admin/src/components/MainPageConfigurator/availableBlocks.js b/frontend/admin/src/components/MainPageConfigurator/availableBlocks.js
index 2ec0d99..aa6ac85 100644
--- a/frontend/admin/src/components/MainPageConfigurator/availableBlocks.js
+++ b/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,
-        }
+        },
       },
     },
   },
diff --git a/frontend/spa/src/App.vue b/frontend/spa/src/App.vue
index f78e082..69c0b7f 100644
--- a/frontend/spa/src/App.vue
+++ b/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
diff --git a/frontend/spa/src/components/MainPage/Blocks/BaseBlock.vue b/frontend/spa/src/components/MainPage/Blocks/BaseBlock.vue
index be49f88..25b8134 100644
--- a/frontend/spa/src/components/MainPage/Blocks/BaseBlock.vue
+++ b/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" />
diff --git a/frontend/spa/src/components/MainPage/Blocks/ProductsCarouselBlock.vue b/frontend/spa/src/components/MainPage/Blocks/ProductsCarouselBlock.vue
index cfe384d..e8501e0 100644
--- a/frontend/spa/src/components/MainPage/Blocks/ProductsCarouselBlock.vue
+++ b/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"/>
diff --git a/frontend/spa/src/components/ProductImageSwiper.vue b/frontend/spa/src/components/ProductImageSwiper.vue
index 816ec9d..970965c 100644
--- a/frontend/spa/src/components/ProductImageSwiper.vue
+++ b/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>
diff --git a/frontend/spa/src/components/ProductItem/Price.vue b/frontend/spa/src/components/ProductItem/Price.vue
index d07016b..c07cefd 100644
--- a/frontend/spa/src/components/ProductItem/Price.vue
+++ b/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>
diff --git a/frontend/spa/src/components/ProductsList.vue b/frontend/spa/src/components/ProductsList.vue
index e492702..2991202 100644
--- a/frontend/spa/src/components/ProductsList.vue
+++ b/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>
diff --git a/frontend/spa/src/style.css b/frontend/spa/src/style.css
index 5c604af..28978af 100644
--- a/frontend/spa/src/style.css
+++ b/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);
+}
\ No newline at end of file
diff --git a/frontend/spa/src/views/Product.vue b/frontend/spa/src/views/Product.vue
index 8e87d03..3e6aa87 100644
--- a/frontend/spa/src/views/Product.vue
+++ b/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">
diff --git a/module/oc_telegram_shop/upload/oc_telegram_shop/console/Commands/ImagesCacheClearCommand.php b/module/oc_telegram_shop/upload/oc_telegram_shop/console/Commands/ImagesCacheClearCommand.php
old mode 100644
new mode 100755
diff --git a/module/oc_telegram_shop/upload/oc_telegram_shop/console/Commands/ImagesWarmupCacheCommand.php b/module/oc_telegram_shop/upload/oc_telegram_shop/console/Commands/ImagesWarmupCacheCommand.php
old mode 100644
new mode 100755
diff --git a/module/oc_telegram_shop/upload/oc_telegram_shop/framework/Cache/SymfonyRedisCache.php b/module/oc_telegram_shop/upload/oc_telegram_shop/framework/Cache/SymfonyRedisCache.php
old mode 100644
new mode 100755