remove folder pages

2025-06-24 09:32:59 +02:00
parent 7d0a449a1e
commit 26e7467f7f
24 changed files with 1 additions and 1 deletions
--- a/components/section/MainProducts.vue
+++ b/components/section/MainProducts.vue
@ -0,0 +1,85 @@
+<template>
+  <UiContainer class="space-y-[40px] sm:space-y-[55px] md:space-y-[75px]">
+    <div :class="[
+      'sm:mx-[50px] md:mx-0 xl:mx-[92px] flex items-stretch',
+      itemCount === 1 ? 'justify-center' : 'justify-between gap-2',
+    ]">
+      <!-- product -->
+      <div v-for="(item, index) in productStore.productList" :key="index"
+        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">
+        <img :src="`https://www.yourgold.cz/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">
+              <i class="uil uil-shopping-cart text-[25px] md:text-[24px] text-bg-light"></i>
+            </button>
+          </div>
+        </div>
+      </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%]">
+        Zlato je jistota, která nepodléhá času. Udělejte dnes rozhodnutí, které
+        vás ochrání zítra
+      </h3>
+      <UiButtonArrow @click="menuStore.navigateToShop" type="fill" :arrow="true">{{ $t('eshop') }}</UiButtonArrow>
+    </div>
+  </UiContainer>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted, onBeforeUnmount } from "vue";
+
+defineProps<{ component: Component }>();
+type Component = {
+  image_collection: string;
+  section_id: string;
+  section_img: string;
+  section_lang_data: [
+    {
+      title: string;
+      description: string;
+      sub_title: string;
+    }
+  ];
+};
+
+const menuStore = useMenuStore()
+const itemCount = ref(4);
+const productStore = useProductStore();
+
+async function updateItemCount() {
+  const width = window.innerWidth;
+  if (width >= 1800) itemCount.value = 5;
+  else if (width >= 1200) itemCount.value = 4;
+  else if (width >= 768) itemCount.value = 3;
+  else if (width >= 640) itemCount.value = 2;
+  else itemCount.value = 1;
+}
+
+watch(itemCount, async () => {
+  await productStore.getList(itemCount.value);
+});
+
+onMounted(async () => {
+  await updateItemCount();
+  window.addEventListener("resize", updateItemCount);
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener("resize", updateItemCount);
+});
+</script>