main pages/styles

components/section/main-page/MainProducts.vue

@@ -0,0 +1,82 @@
+<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-center',
+        itemCount === 1 ? 'justify-center' : 'justify-between',
+      ]"
+    >
+      <div
+        v-for="item in itemCount"
+        :key="item"
+        class="w-[200px] sm:w-[260px] md:w-[290px] py-[15px] px-[10px] sm:py-5 sm:px-[14px] bg-button-white rounded-2xl flex flex-col items-center gap-5 sm:gap-7"
+      >
+        <img src="/pics.png" alt="pics" class="max-w-[150px]" />
+        <div class="flex flex-col gap-[10px] sm:gap-[15px] w-full">
+          <h3 class="text-[13px] sm:text-[16px] text-xl font-bold">
+            50g Zlatý slitek: PAMP Suisse
+          </h3>
+          <p class="text-[10px] sm:text-[12px] text-sm text-bg-dark">
+            Osvobozená sazba DPH PL
+          </p>
+          <div class="flex items-center justify-between">
+            <p class="text-accent-green text-bold-24">€ 4,825.44</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>
+      <ButtonArrow type="fill">E-shop</ButtonArrow>
+    </div>
+  </UiContainer>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted, onBeforeUnmount } from "vue";
+
+const props = 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 itemCount = ref(1);
+
+function updateItemCount() {
+  const width = window.innerWidth;
+  if (width >= 1280) itemCount.value = 5;
+  else if (width >= 768) itemCount.value = 3;
+  else if (width >= 640) itemCount.value = 2;
+  else itemCount.value = 1;
+}
+
+onMounted(() => {
+  updateItemCount();
+  window.addEventListener("resize", updateItemCount);
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener("resize", updateItemCount);
+});
+</script>