From 77a490a94d5fcbc5400589968f69a4d7f13f8ce6 Mon Sep 17 00:00:00 2001
From: Arina Yakovenko <yakovenko_arina@ma-al.com>
Date: Tue, 17 Jun 2025 15:57:00 +0200
Subject: [PATCH] product page

---
 components/section/shop-page/Product.vue  | 64 +++++++-----------
 components/section/shop-page/ShopMain.vue | 81 +++++++++++++++++------
 components/ui/Container.vue               |  2 +-
 3 files changed, 88 insertions(+), 59 deletions(-)

diff --git a/components/section/shop-page/Product.vue b/components/section/shop-page/Product.vue
index 16fee20..6b090db 100644
--- a/components/section/shop-page/Product.vue
+++ b/components/section/shop-page/Product.vue
@@ -1,43 +1,29 @@
 <template>
-  <NuxtLink>
-    <li class="bg-block rounded-2xl min-h-[420px] w-[330px] list-none overflow-hidden p-5">
-      <article class="group h-full">
-        <div class="h-full flex flex-col">
-          <div class="h-[205px]">
-            <img :src="`https://www.yourgold.cz/api/public/file/${props.product?.cover_picture_uuid}.webp`"
-              :alt="props.product?.description" class="h-full object-contain w-auto block mx-auto">
-          </div>
-
-          <div class="flex flex-col items-start text-start mt-[50px] justify-between h-full">
-            <div class="space-y-[15px]">
-              <h4 class="font-bold">{{ props.product?.name }}</h4>
-              <p class="text-sm font-normal">{{ props.product?.tax_name }}</p>
-            </div>
-            <div class="flex items-center justify-between w-full">
-              <p class="font-bold text-accent-green-light text-sm sm:text-2xl">{{ props.product?.formatted_price }}</p>
-              <div class="w-12 h-12 bg-button flex items-center justify-center rounded-[10px]">
-                <i class="uil uil-shopping-cart text-[31px] cursor-pointer text-white"></i>
-              </div>
-            </div>
-          </div>
-        </div>
-        <!-- <div v-if="!props.product?.is_sale_active"
-          class="absolute top-0 flex items-center justify-center w-full h-full px-4 bg-black bg-opacity-90 cursor-progress">
-          <div class="flex flex-col items-center gap-4">
-            <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100" viewBox="0 0 48 48">
-              <path fill="#ffcc00" d="M5.7 22H42.5V26H5.7z" transform="rotate(-45.001 24.036 24.037)"></path>
-              <path fill="#ffcc00"
-                d="M24,4C13,4,4,13,4,24s9,20,20,20s20-9,20-20S35,4,24,4z M24,40c-8.8,0-16-7.2-16-16S15.2,8,24,8 s16,7.2,16,16S32.8,40,24,40z">
-              </path>
-            </svg>
-            <span class="font-bold text-center uppercase text-yellow">
-              {{ $t("FrontTranslations", "not available") }}
-            </span>
-          </div>
-        </div> -->
-      </article>
-    </li>
-  </NuxtLink>
+  <div
+    class="w-[150px] sm:w-[260px] md:w-[330px] sm:py-5 sm:px-[15px] py-[15px] px-[10px] bg-block rounded-2xl flex flex-col items-center gap-5 sm:gap-[50px]">
+    <img :src="`https://www.yourgold.cz/api/public/file/${props.product?.cover_picture_uuid}.webp`" alt="pics"
+      class="max-h-[95px] sm:max-h-[180px] md:max-h-[205px]" />
+    <div class="flex flex-col justify-between h-full w-full gap-[7px] sm:gap-[15px]">
+      <div class="flex flex-col gap-[7px] sm:gap-[15px] w-full">
+        <h3 class="text-[13px] sm:text-base md:text-lg text-xl font-bold leading-[130%] sm:leading-[150%] text-bg-dark">
+          {{ props.product?.name }}
+        </h3>
+        <p class="text-[10px] sm:text-[12px] text-sm text-bg-dark">
+          {{ props.product?.tax_name }}
+        </p>
+      </div>
+      <div class="flex items-center justify-between">
+        <p class="text-accent-green-light font-inter text-[12px] sm:text-[21px] md:text-2xl leading-[150%] font-bold">
+          {{ props.product?.formatted_price }}
+        </p>
+        <button
+          class="w-[22px] h-[22px] sm:w-9 sm:h-9 md:w-12 md:h-12 rounded-[5px] sm:rounded-xl bg-button cursor-pointer hover:bg-button-hover transition-all flex items-center justify-center p-1">
+          <UButton icon="i-lucide-shopping-cart" variant="ghost"
+            class="text-xl sm:text-[25px] md:text-2xl text-bg-light" />
+        </button>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
diff --git a/components/section/shop-page/ShopMain.vue b/components/section/shop-page/ShopMain.vue
index 5919ea1..4ee2161 100644
--- a/components/section/shop-page/ShopMain.vue
+++ b/components/section/shop-page/ShopMain.vue
@@ -1,13 +1,13 @@
 <template>
     <UiContainer>
-        <div class="flex justify-between mb-[75px] whitespace-nowrap gap-[100px]">
+        <div class="flex justify-between mb-[25px] sm:mb-[55px] xl:mb-[75px] whitespace-nowrap gap-[100px]">
             <p>CZK cena (na EUR). Kč 25,2380 Kč +0,0030 (+0.01%)</p>
             <p>Cena zlata na trhu. 2 852,1450 € -21,6520 € (-0.75%)</p>
             <p>Cena stříbra na trhu. 28,6500 € -0,1570 € (-0.54%)</p>
             <p>PLN cena (na EUR). zł 4,2550</p>
         </div>
-        <div class="flex flex-col gap-16 px-4 xl:flex-row">
-            <!-- <Transition>
+        <div class="flex flex-col gap-10 xl:flex-row">
+            <Transition>
                 <div v-if="openCategories" class="z-40 block w-full pt-8 xl:w-1/4 xl:pt-36 xl:hidden">
                     <BaseTitle>
                         {{ $t("FrontTranslations", "Categories") }}
@@ -46,9 +46,18 @@
                         </div>
                     </div>
                 </div>
-            </Transition> -->
+            </Transition>
 
-            <div class="min-w-[275px]">
+            <!-- button to open categories -->
+            <div class="xl:hidden flex items-center w-full">
+                <button @click="openCategories = !openCategories"
+                    class="h-[40px] w-full cursor-pointer 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">
+                    Otevřené kategorie a filtry
+                </button>
+            </div>
+
+            <!-- categories -->
+            <div class="min-w-[250px] hidden xl:block">
                 <h1 class="font-bounded leading-[140%] font-bold text-[40px] mb-[55px]">
                     {{ $t("category") }}
                 </h1>
@@ -78,8 +87,10 @@
                             </div>
                         </div> -->
 
-                        <div v-for="(item, itemIndex) in filters" :key="itemIndex" :class="['mb-[30px] text-white', visibleFeatures[item.feature] && 'border-b border-block pb-[10px]']">
-                            <span class="flex justify-between items-center font-bold text-black cursor-pointer dark:text-gray mb-[25px]"
+                        <div v-for="(item, itemIndex) in filters" :key="itemIndex"
+                            :class="['mb-[30px] text-white', visibleFeatures[item.feature] && 'border-b border-block pb-[10px]']">
+                            <span
+                                class="flex justify-between items-center font-bold text-black cursor-pointer dark:text-gray mb-[25px]"
                                 @click="toggleFeature(item.feature)">
                                 {{ item.feature }}
                                 <span :class="[visibleFeatures[item.feature] && 'rotate-180', 'transition-all']"> <i
@@ -87,7 +98,8 @@
                             </span>
                             <ul v-show="visibleFeatures[item.feature]"
                                 class="flex flex-col gap-5 text-black dark:text-gray">
-                                <li v-for="filter in item.feature_values" :key="filter.value_id" class="flex gap-[10px] cursor-pointer">
+                                <li v-for="filter in item.feature_values" :key="filter.value_id"
+                                    class="flex gap-[10px] cursor-pointer">
                                     <input :id="`${filter.value_id}`" :value="`${filter.parent}.${filter.value_id}`"
                                         v-model="selectedFilters" type="checkbox" />
                                     <label :for="`${filter.value_id}`" class="cursor-pointer">{{ filter.value }}</label>
@@ -98,21 +110,41 @@
                 </div>
             </div>
 
-            <div class="w-full">
-                <ThePartnerInfo v-if="isInfo" @close-element="closeElement()" />
+            <div class="w-full space-y-10">
+
+                <!-- pop-up -->
+                <div v-if="isInfo"
+                    class="w-full xl:w-[70%] mx-auto border-y border-block py-[15px] sm:p-[30px] flex gap-[55px] relative">
+                    <UButton @click="closeElement()" size="xl" icon="i-lucide-x" variant="ghost"
+                        class="p-0 absolute right-0 top-2 sm:right-2 sm:top-2 cursor-pointer text-button font-light hover:bg-inherit hover:text-button-hover" />
+
+                    <div class="flex flex-col gap-[25px]">
+                        <div class="flex flex-col justify-between gap-[25px ]">
+                            <h4 class="font-inter text-lg sm:text-[24px] leading-[150%] md:leading-[120%] font-bold">
+                                {{ component.section_lang_data.title }}
+                            </h4>
+                            <p>{{ component.section_lang_data.description }}</p>
+                        </div>
+                        <img class="max-w-[150px] mx-auto"
+                            :src="`/api/files/${component.image_collection}/${component.section_id}/${component.section_img[0]}?thumb=640x0')`"
+                            alt="" />
+                    </div>
+                </div>
 
                 <div v-if="products.length < 1" class="grid gap-12 pt-32 pb-16 md:grid-cols-2 2xl:grid-cols-3">
                     <TheProductSkeleton v-for="index in 6"></TheProductSkeleton>
                 </div>
 
-                <div v-else ref="loadingElement" class="grid gap-12 pt-32 pb-16 md:grid-cols-2 2xl:grid-cols-4">
+                <!-- products -->
+                <div v-else ref="loadingElement"
+                    class="xl:grid gap-5 sm:gap-10 grid grid-cols-2 sm:flex sm:flex-wrap justify-center xl:grid-cols-4">
                     <Product v-for="product in products" :key="product.id" :product="product" />
-                    <div v-if="reachedEnd"
-                        class="md:col-span-2 2xl:col-span-3 border-2 border-yellow border-r-0 border-l-0 mt-10">
-                        <p class="text-black dark:text-gray text-center text-lg p-2">
-                            {{ $t("FrontTranslations", "You reached end of the list.") }}
-                        </p>
-                    </div>
+                </div>
+
+                <div v-if="reachedEnd" class="w-full flex justify-center">
+                    <p>
+                        {{ $t("FrontTranslations", "You reached end of the list.") }}
+                    </p>
                 </div>
             </div>
         </div>
@@ -123,6 +155,18 @@ import { ref } from "vue";
 import Product from "./Product.vue";
 import type { Feature, ProductType } from "~/types";
 import CategoryTree from "./CategoryTree.vue";
+
+defineProps<{ component: Component }>();
+type Component = {
+    image_collection: string;
+    section_id: string;
+    section_img: string;
+    section_lang_data: {
+        title: string;
+        description: string
+    };
+};
+
 const openCategories = ref(false);
 const isInfo = ref<boolean>(true);
 const selectedFilters = ref<any>([]);
@@ -234,12 +278,11 @@ async function scrollEvent(e: Event) {
     }
 }
 
-const visibleFeatures = reactive<any>({});
-
 filters.value.forEach((item) => {
     visibleFeatures[item.feature] = false;
 });
 
+const visibleFeatures = reactive<any>({});
 function toggleFeature(feature: any) {
     if (visibleFeatures.hasOwnProperty(feature)) {
         visibleFeatures[feature] = !visibleFeatures[feature];
diff --git a/components/ui/Container.vue b/components/ui/Container.vue
index 5204e31..715d9a0 100644
--- a/components/ui/Container.vue
+++ b/components/ui/Container.vue
@@ -1,6 +1,6 @@
 <template>
     <UContainer
-        class="mx-auto w-full max-w-[360px] px-4 sm:max-w-[768px] sm:px-[17px] md:max-w-[1000px] md:px-6 xl:max-w-[1920px] xl:px-20">
+        class="mx-auto w-full max-w-[380px] px-4 sm:max-w-[768px] sm:px-[17px] md:max-w-[1000px] md:px-6 xl:max-w-[1920px] xl:px-20">
         <slot />
     </UContainer>
 </template>