From af0a3df06806fa672c25e1865343796771b6b655 Mon Sep 17 00:00:00 2001
From: Arina Yakovenko <yakovenko_arina@ma-al.com>
Date: Fri, 4 Jul 2025 13:00:53 +0200
Subject: [PATCH] product page

---
 components/section/MainBlocks.vue   |  15 +-
 components/section/MainProducts.vue |  17 +-
 components/section/ProductBlock.vue | 278 +++++++++++++---------------
 3 files changed, 142 insertions(+), 168 deletions(-)

diff --git a/components/section/MainBlocks.vue b/components/section/MainBlocks.vue
index 87cce5b..336e63f 100644
--- a/components/section/MainBlocks.vue
+++ b/components/section/MainBlocks.vue
@@ -1,12 +1,7 @@
 <template>
-  <UiContainer
-    class="flex flex-wrap items-center justify-between gap-[30px] sm:gap-y-[55px] xl:gap-y-[100px]"
-  >
-    <div
-      v-for="(item, index) in component.front_section_lang[0].data"
-      :key="index"
-      class="w-full flex flex-col gap-[25px] xl:max-w-[48%] md:mx-10 xl:m-0"
-    >
+  <UiContainer class="flex flex-wrap items-center justify-between gap-[30px] sm:gap-y-[55px] xl:gap-y-[100px]">
+    <div v-for="(item, index) in component.front_section_lang[0].data" :key="index"
+         class="w-full flex flex-col gap-[25px] xl:max-w-[48%] md:mx-10 xl:m-0">
       <!-- xl -->
       <div class="hidden xl:flex xl:h-[330px] flex-col justify-between">
         <div class="space-y-[55px]">
@@ -42,9 +37,7 @@
     </div>
 
     <!-- Map block with same layout rules -->
-    <div
-      class="w-full xl:max-w-[48%] md:mx-10 xl:m-0 flex flex-col gap-4 items-center"
-    >
+    <div class="w-full xl:max-w-[48%] md:mx-10 xl:m-0 flex flex-col gap-4 items-center">
       <h1 class="text-sm sm:text-xl uppercase">
         Jsme tu pro vás napříč Evropou
       </h1>
diff --git a/components/section/MainProducts.vue b/components/section/MainProducts.vue
index 248e1b8..baa8ae0 100644
--- a/components/section/MainProducts.vue
+++ b/components/section/MainProducts.vue
@@ -2,24 +2,21 @@
   <UiContainer class="space-y-[40px] sm:space-y-[55px] md:space-y-[75px]">
     <!-- product -->
     <div class="space-25-55-75 flex flex-col items-center">
-      <div
-        :class="[
-          'sm:mx-[50px] md:mx-0 xl:mx-[92px] flex items-stretch',
-          itemCount === 1 ? 'justify-center' : 'justify-between gap-2',
-        ]"
-      >
+      <div :class="[
+        'sm:mx-[50px] md:mx-0 xl:mx-[92px] flex items-stretch',
+        itemCount === 1 ? 'justify-center' : 'justify-between gap-2',
+      ]">
         <Product v-for="product in productStore.productList" :key="product.id" :product="product" />
       </div>
     </div>
 
     <div class="flex flex-col gap-6 md:flex-row items-center justify-between">
-      <h3
-        class="h4-uppercase-bold-inter w-full text-center md:text-start xl:max-w-[50%]"
-      >
+      <h3 class="h4-uppercase-bold-inter w-full text-center md:text-start xl:max-w-[50%]">
         Zlato je jistota, která nepodléhá času. Udělejte dnes rozhodnutí, které
         vás ochrání zítra
       </h3>
-      <nuxt-link :to="{ name: `id-slug___${$i18n.locale}`, params: { id: menuStore.getShopMenu()?.id, slug: menuStore.getShopMenu()?.front_menu_lang.at(0)?.link_rewrite } }">
+      <nuxt-link
+        :to="{ name: `id-slug___${$i18n.locale}`, params: { id: menuStore.getShopMenu()?.id, slug: menuStore.getShopMenu()?.front_menu_lang.at(0)?.link_rewrite } }">
         <UiButtonArrow type="fill" :arrow="true">
           {{ $t("eshop") }}
         </UiButtonArrow>
diff --git a/components/section/ProductBlock.vue b/components/section/ProductBlock.vue
index ff504f4..8927085 100644
--- a/components/section/ProductBlock.vue
+++ b/components/section/ProductBlock.vue
@@ -2,7 +2,7 @@
   <UiContainer>
     <transition>
       <div v-if="showPopup && curImage" ref="dropdownRef" tabindex="0"
-           class="fixed top-0 left-0 bg-[#000000cc] w-screen h-screen z-50 flex items-center justify-center cursor-pointer"
+           class="fixed top-0 left-0 bg-[#000000cc] w-screen h-screen z-50 flex items-center justify-center cursor-pointer p-10"
            @keyup.esc="showPopup = false" @keyup.left="goLeft" @keyup.right="goRight" @click.self="showPopup = false">
         <div class="border border-white p-4 rounded-2xl shadow-2xl bg-white cursor-auto">
           <img :src="`/api/public/file/${curImage}_l.webp`" class="max-h-[80vh] object-contain" alt=""
@@ -13,149 +13,100 @@
         </button>
       </div>
     </transition>
-    <div class="flex gap-[100px]">
-      <div class="flex gap-[25px]">
-        <div class="flex flex-col gap-[15px]">
-          <div v-for="image in product.picture_uuids" :key="image" class="h-[100px] w-[90px] border border-button py-3 flex items-center justify-center rounded-[8px]"
-               @click="curImage = image">
-            <img :src="`/api/public/file/${image}_m.webp`" :alt="product.name" srcset="" class="h-full w-auto">
+    <div class="space-y-10 sm:space-y-[75px]">
+      <div class="flex flex-col items-start xl:flex-row gap-[40px] sm:gap-[100px] border-b-2 border-block pb-[25px]">
+        <!-- images block -->
+        <button
+          class="xl:hidden h-[40px] sm:h-[43px] px-[10px] sm:px-[17px] border border-gray dark:border-button-disabled text-gray dark:text-button-disabled hover:bg-gray transition-all hover:text-white rounded-[8px] cursor-pointer"
+          @click="menuStore.navigateToItem()">
+          {{ $t("back_to_home") }}
+        </button>
+        <div class="w-full flex-col-reverse sm:flex-row sm:w-[70%] mx-auto justify-center xl:w-auto flex gap-[25px]">
+          <div class="flex justify-center sm:justify-start  sm:flex-col gap-[15px]">
+            <div v-for="image in product.picture_uuids" :key="image"
+                 :class="['cursor-pointer hover:border-button-disabled transition-all h-[100px] w-[90px] border py-3 flex items-center justify-center rounded-[8px]', image === curImage ? 'border-block' : 'border-button']"
+                 @click="curImage = image">
+              <img :src="`/api/public/file/${image}_m.webp`" :alt="product.name" srcset="" class="h-full w-auto">
+            </div>
+          </div>
+          <div class="cursor-pointer h-full flex justify-center sm:items-start" @click="showPopup = true">
+            <img :src="`/api/public/file/${curImage}_m.webp`"
+                 class="sm:min-w-[400px] sm:max-w-[410px] xl:min-w-[300px] xl:max-w-[320px] w-full h-auto" alt="">
           </div>
         </div>
-        <div class="cursor-pointer" @click="showPopup = true">
-          <img :src="`/api/public/file/${curImage}_m.webp`" class="w-72" alt="">
-        </div>
-      </div>
-      <!-- <div class="w-[70%]">
-        <h1 class="font-bold text-2xl">
-          {{ product.name }}
-        </h1>
-        <div>
-          <span class="mx-4">Product reference:</span><span>{{ product.reference }}</span>
-        </div>
-        <div class="my-4" v-html="product.description" />
-        <div class="my-12">
-          <div class="text-2xl font-bold">
-            <span class="mx-4">Price:</span><span>{{ formattedPrice }}</span>
-          </div>
-          <div class="">
-            <span class="mx-4">Tax information:</span><span>{{ product.tax_name }}</span>
-          </div>
-          <div class="font-bold">
-            <span class="mx-4">Buy out price:</span><span>{{ formattedBuyOutPrice }}</span>
-          </div>
 
-          <button :disabled="!product.sale_active"
-            class="btn disabled:bg-gray-500 bg-button text-white px-4 py-4 rounded-2xl cursor-pointer"
-            @click="productStore.incrementCartItem(product.id)">
-            Add to cart
-          </button>
-        </div>
-      </div> -->
-      <div class="w-full space-y-[30px]">
-        <div class="space-y-[15px]">
-          <div class="flex items-center justify-between w-full">
-            <h1 class="h4-uppercase-bold-inter max-w-[450px]">
-              {{ product.name }}
-            </h1>
-            <button
-              class="h-[40px] sm:h-[43px] px-[10px] sm:px-[17px] border border-gray dark:border-button-disabled text-gray dark:text-button-disabled hover:bg-gray transition-all hover:text-white rounded-[8px] cursor-pointer"
-              @click="menuStore.navigateToItem()">
-              {{ $t("back_to_home") }}
-            </button>
-          </div>
-          <p class="text-button font-inter text-base leading-[150%] uppercase sm:text-[20px]">
-            Title: {{
-              product.reference }}
-          </p>
-        </div>
-        <div class="flex flex-col gap-5" v-html="product.description" />
-        <div class="flex items-end justify-between">
-          <div class="">
-            <h4
-              class="text-accent-green-light font-inter text-[12px] sm:text-[21px] md:text-2xl leading-[150%] font-bold">
-              {{ formattedPrice }}
-            </h4>
-            <p>{{ product.tax_name }}</p>
-            <p>{{ formattedBuyOutPrice }}</p>
-          </div>
-          <div class="group flex cursor-pointer items-center justify-start gap-2 whitespace-nowrap">
-            <button
-              class="h-[40px] cursor-pointer min-w-40 rounded-[10px] px-[22px] transition-all sm:h-[50px] md:h-[65px] md:rounded-[15px] md:px-[42px] bg-button text-text-dark group-hover:bg-button-hover">
-              Add to cart
-            </button>
-            <div :disabled="!product.sale_active" class="
+        <!-- info block -->
+        <div class="w-full space-y-[50px]">
+          <div class="w-full space-y-[30px]">
+            <div class="space-y-[15px]">
+              <div class="flex items-center justify-between w-full">
+                <h1 class="h4-uppercase-bold-inter max-w-[450px]">
+                  {{ product.name }}
+                </h1>
+                <button
+                  class="hidden xl:block h-[40px] sm:h-[43px] px-[10px] sm:px-[17px] border border-gray dark:border-button-disabled text-gray dark:text-button-disabled hover:bg-gray transition-all hover:text-white rounded-[8px] cursor-pointer"
+                  @click="menuStore.navigateToItem()">
+                  {{ $t("back_to_home") }}
+                </button>
+              </div>
+              <p class="text-button font-inter text-base leading-[150%] uppercase sm:text-[20px]">
+                Title: {{
+                  product.reference }}
+              </p>
+            </div>
+            <div class="flex flex-col gap-5" v-html="product.description" />
+            <div
+              class="flex flex-col sm:flex-row sm:items-end gap-[25px] sm:justify-between border-t-2 border-block pt-[15px]">
+              <div class="space-y-4">
+                <div class="space-y-2">
+                  <h4 class="text-accent-green-light font-inter text-2xl leading-[150%] font-bold">
+                    {{ formattedPrice }}
+                  </h4>
+                  <p>{{ product.tax_name }}</p>
+                </div>
+                <p class="font-medium">
+                  {{ component.front_section_lang[0].data.purchase_price }}<span
+                    class="text-button">{{ formattedBuyOutPrice
+                  }}</span>
+                </p>
+              </div>
+              <div class="mx-auto sm:mx-0 group flex cursor-pointer items-center justify-start gap-2 whitespace-nowrap">
+                <button
+                  class="h-[40px] cursor-pointer min-w-40 rounded-[10px] px-[22px] transition-all sm:h-[50px] md:h-[65px] md:rounded-[15px] md:px-[42px] bg-button text-text-dark group-hover:bg-button-hover">
+                  Add to cart
+                </button>
+                <div :disabled="!product.sale_active" class="
               flex h-[40px] w-[40px] items-center justify-center rounded-[10px] p-2.5 transition-all sm:h-[50px] sm:w-[50px] md:h-[65px] md:w-[65px] md:rounded-[15px] bg-button text-text-dark group-hover:bg-button-hover
             " @click="productStore.incrementCartItem(product.id)">
-              <svg class="" width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path
-                  d="M25.1274 1.87258C25.1274 1.3203 24.6797 0.872582 24.1274 0.872584L15.1274 0.872583C14.5751 0.872583 14.1274 1.3203 14.1274 1.87258C14.1274 2.42487 14.5751 2.87258 15.1274 2.87258L23.1274 2.87258L23.1274 10.8726C23.1274 11.4249 23.5751 11.8726 24.1274 11.8726C24.6797 11.8726 25.1274 11.4249 25.1274 10.8726L25.1274 1.87258ZM1.5 24.5L2.20711 25.2071L24.8345 2.57969L24.1274 1.87258L23.4203 1.16548L0.792893 23.7929L1.5 24.5Z"
-                  fill="currentColor" />
-              </svg>
+                  <i class="uil uil-shopping-cart text-[23px] sm:text-[33px]"></i>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="flex flex-col gap-5">
+            <h1 class="h4-uppercase-bold-inter max-w-[450px]">
+              {{ component.front_section_lang[0].data.product_details }}
+            </h1>
+            <div class="flex flex-col gap-5 mx-[50px]">
+              <div v-for="feature in product.features" :key="feature.feature" class="flex gap-4 justify-between">
+                <span class="mx-4">{{ feature.feature }}:</span>
+                <span class="mx-4">
+                  {{ feature.value }}
+                </span>
+              </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
-  </UiContainer>
 
-  <!-- <div>
-    <UiContainer>
-      <transition>
-        <div v-if="showPopup && curImage" ref="dropdownRef" tabindex="0"
-          class="fixed top-0 left-0 bg-[#000000cc] w-screen h-screen z-50 flex items-center justify-center cursor-pointer"
-          @keyup.esc="showPopup = false" @keyup.left="goLeft" @keyup.right="goRight" @click.self="showPopup = false">
-          <div class="border border-white p-4 rounded-2xl shadow-2xl bg-white cursor-auto">
-            <img :src="`/api/public/file/${curImage}_l.webp`" class="max-h-[80vh] object-contain" alt=""
-              @load="focusOnImgLoad">
-          </div>
-          <button class="absolute top-8 p-8 right-8 text-4xl rotate-45 text-white" @click="showPopup = false">
-            +
-          </button>
-        </div>
-      </transition>
-      <div class="flex w-full gap-1">
-        <div class="w-[50%] min-w-150px">
-          <div class="flex gap-2">
-            <div v-for="image in product.picture_uuids" :key="image" class="flex justify-center h-20 cursor-pointer"
-              @click="curImage = image">
-              <img :src="`/api/public/file/${image}_m.webp`" :alt="product.name" srcset="">
-            </div>
-            <div class="cursor-pointer" @click="showPopup = true">
-              <img :src="`/api/public/file/${curImage}_m.webp`" class="w-72" alt="">
-            </div>
-          </div>
-        </div>
+      <div class="space-y-[55px]">
+        <h1 class="h4-uppercase-bold-inter max-w-[450px]">
+          {{ component.front_section_lang[0].data.recommendations }}
+        </h1>
 
-        <div class="w-[50%]">
-          <h1 class="font-bold text-2xl">
-            {{ product.name }}
-          </h1>
-          <div>
-            <span class="mx-4">Product reference:</span><span>{{ product.reference }}</span>
-          </div>
-          <div class="my-4" v-html="product.description" />
-          <div class="my-12">
-            <div class="text-2xl font-bold">
-              <span class="mx-4">Price:</span><span>{{ formattedPrice }}</span>
-            </div>
-            <div class="">
-              <span class="mx-4">Tax information:</span><span>{{ product.tax_name }}</span>
-            </div>
-            <div class="font-bold">
-              <span class="mx-4">Buy out price:</span><span>{{ formattedBuyOutPrice }}</span>
-            </div>
-
-            <button :disabled="!product.sale_active"
-              class="btn disabled:bg-gray-500 bg-button text-white px-4 py-4 rounded-2xl cursor-pointer"
-              @click="productStore.incrementCartItem(product.id)">
-              Add to cart
-            </button>
-          </div>
-        </div>
-      </div>
-      <div class="flex gap-4">
-        <div class="w-1/2 flex cursor-pointer">
-          <div v-for="rel in product.recommendations" :key="rel.id">
+        <!-- products -->
+        <div class="flex flex-wrap justify-center gap-5 sm:gap-10">
+          <div v-for="(item, index) in product.recommendations" :key="index">
             <nuxt-link :to="{
               name: `id-slug___${$i18n.locale}`,
               params: {
@@ -163,31 +114,64 @@
                 slug: menuStore.getProductMenu()?.front_menu_lang[0]
                   .link_rewrite,
               },
-              query: { prod_id: rel?.id, name: rel?.link_rewrite },
+              query: { prod_id: item?.id, name: item?.link_rewrite },
             }">
-              <div class="w-1/3">
-                {{ rel.name }}
-                <img :src="`/api/public/file/${rel.cover_picture_uuid}_m.webp`" class="h-24" alt="">
+              <div
+                class="w-[200px] sm:w-[260px] md:w-[290px] sm:py-5 sm:px-[15px] py-[15px] px-[10px] bg-block rounded-2xl flex flex-col items-center gap-5 sm:gap-7 h-full">
+                <img :src="`/api/public/file/${item.cover_picture_uuid}.webp`" alt="pics"
+                     class="max-h-[150px] sm:max-h-[180px] md:max-h-[205px]">
+                <div class="flex flex-col justify-between h-full">
+                  <div class="flex flex-col gap-[10px] sm:gap-[15px] w-full">
+                    <h3 class="text-[13px] sm:text-base md:text-lg text-xl font-bold leading-[150%] text-bg-dark">
+                      {{ item.name }}
+                    </h3>
+                    <p class="text-[10px] sm:text-[12px] text-sm text-bg-dark">
+                      {{ item.tax_name }}
+                    </p>
+                  </div>
+                  <div class="flex items-center justify-between">
+                    <p class="text-accent-green-light text-bold-24">
+                      {{ item.formatted_price }}
+                    </p>
+                    <button
+                      class="w-9 h-9 md:w-12 md:h-12 rounded-xl bg-button cursor-pointer hover:bg-button-hover transition-all flex items-center justify-center"
+                      @click="productStore.incrementCartItem(item.id)">
+                      <i class="uil uil-shopping-cart text-[25px] md:text-[24px] text-bg-light" />
+                    </button>
+                  </div>
+                </div>
               </div>
             </nuxt-link>
           </div>
         </div>
-        <div class="w-1/2">
-          <div v-for="feature in product.features" :key="feature.feature" class="flex gap-4 justify-around border-b">
-            <span class="mx-4">{{ feature.feature }}:</span>
-            <span class="mx-4">
-              {{ feature.value }}
-            </span>
-          </div>
-        </div>
       </div>
-    </UiContainer>
-  </div> -->
+    </div>
+  </UiContainer>
 </template>
 
 <script setup lang="ts">
 import type { GenericResponse, ProductItem } from '~/types'
 
+defineProps<{
+  component: {
+    id: number
+    name: string
+    img: string[]
+    component_name: string
+    is_no_lang: boolean
+    page_name: string
+    front_section_lang: {
+      data: {
+        purchase_price: string
+        product_details: string
+        recommendations: string
+      }
+      id_front_section: number
+      id_lang: number
+    }[]
+  }
+}>()
+
 const menuStore = useMenuStore()
 const { $session } = useNuxtApp()
 const productStore = useProductStore()