components/section/AboutGoldMain.vue

@@ -2,9 +2,7 @@
   <UiContainer class="space-y-[55px] sm:space-y-[75px] md:space-y-[100px]">
     <div class="grid grid-cols-1 xl:grid-cols-2 gap-[10px] sm:gap-[30px]">
       <div class="flex flex-col gap-[10px] sm:gap-[30px]">
-        <div
+        <div class="h-[240px] sm:h-[400px] md:h-[490px] bg-block p-[25px] sm:p-[50px] rounded-2xl flex flex-col justify-between">
-          class="h-[240px] sm:h-[400px] md:h-[490px] bg-block p-[25px] sm:p-[50px] rounded-2xl flex flex-col justify-between"
-        >
           <div>
             <h1 class="h1-big text-accent-green-light mb-6 md:mb-10">
               {{ component.front_section_lang[0].data.title }}
@@ -13,108 +11,52 @@
               {{ component.front_section_lang[0].data.description }}
             </p>
           </div>
-          <UiButtonArrow type="fill"
+          <nuxt-link :to="{ name: `id-slug___${$i18n.locale}`, params: { id: menuStore.getShopMenu()?.id, slug: menuStore.getShopMenu()?.front_menu_lang.at(0)?.link_rewrite } }">
-                         :arrow="true"
+            <UiButtonArrow type="fill" :arrow="true">
-          >
+              {{ $t("buy_gold") }}
-            {{ $t("buy_gold") }}
+            </UiButtonArrow>
-          </UiButtonArrow>
+          </nuxt-link>
         </div>
         <div class="flex gap-[10px] sm:gap-[30px]">
+          <div class="rounded-2xl h-[155px] sm:h-[225px] md:h-[280px] w-full" :style="{ backgroundImage: `url('/api/public/file/${component.img[1]}_l.webp')`, backgroundSize: 'cover', backgroundPosition: 'center' }" />
+          <div class="rounded-2xl h-[155px] sm:h-[225px] md:h-[280px] w-full" :style="{ backgroundImage: `url('/api/public/file/${component.img[2]}_l.webp')`, backgroundSize: 'cover' }" />
           <div
-            class="rounded-2xl h-[155px] sm:h-[225px] md:h-[280px] w-full"
+            class="hidden sm:block xl:hidden h-[225px] md:h-[280px] rounded-2xl w-full border border-block" :style="{ backgroundImage: `url('/api/public/file/${component.img[0]}_l.webp')`, backgroundSize: 'cover', backgroundPosition: 'center' }" />
-            :style="{
-              backgroundImage: `url('/api/public/file/${component.img[1]}_l.webp')`,
-              backgroundSize: 'cover',
-              backgroundPosition: 'center',
-            }"
-          />
-          <div
-            class="rounded-2xl h-[155px] sm:h-[225px] md:h-[280px] w-full"
-            :style="{
-              backgroundImage: `url('/api/public/file/${component.img[2]}_l.webp')`,
-              backgroundSize: 'cover',
-              backgroundPosition: 'center',
-            }"
-          />
-          <div
-            class="hidden sm:block xl:hidden h-[225px] md:h-[280px] rounded-2xl w-full border border-block"
-            :style="{
-              backgroundImage: `url('/api/public/file/${component.img[0]}_l.webp')`,
-              backgroundSize: 'cover',
-              backgroundPosition: 'center',
-            }"
-          />
         </div>
       </div>
-      <div
+      <div class="sm:hidden xl:block h-[326px] md:h-auto min-w-[40%] xl:min-w-[60%] rounded-2xl border border-block" :style="{ backgroundImage: `url('/api/public/file/${component.img[0]}_l.webp')`, backgroundSize: 'cover', backgroundPosition: 'center' }" />
-        class="sm:hidden xl:block h-[326px] md:h-auto min-w-[40%] xl:min-w-[60%] rounded-2xl border border-block"
-        :style="{
-          backgroundImage: `url('/api/public/file/${component.img[0]}_l.webp')`,
-          backgroundSize: 'cover',
-          backgroundPosition: 'center',
-        }"
-      />
     </div>
-    <div
+    <div class="grid md:grid-cols-1 xl:grid-cols-2 gap-[20px] md:auto-rows-fr sm:gap-[30px]">
-      class="grid md:grid-cols-1 xl:grid-cols-2 gap-[20px] md:auto-rows-fr sm:gap-[30px]"
-    >
       <div class="space-25-55-75">
         <h2 class="h2-bold-bounded">
           {{ component.front_section_lang[0].data.section_2.title }}
         </h2>
         <div class="space-y-[40px] sm:space-y-[50px]">
-          <p
+          <p v-for="(item, index) in component.front_section_lang[0].data .section_2.text_blocks" :key="index">
-            v-for="(item, index) in component.front_section_lang[0].data
-              .section_2.text_blocks"
-            :key="index"
-          >
             {{ item }}
           </p>
         </div>
       </div>
-      <div
+      <div class="w-full md:h-full rounded-2xl h-[327px] sm:h-[550px]" :style="{ backgroundImage: `url('/api/public/file/${component.img[3]}_l.webp')`, backgroundSize: 'cover', backgroundPosition: 'center' }" />
-        class="w-full md:h-full rounded-2xl h-[327px] sm:h-[550px]"
-        :style="{
-          backgroundImage: `url('/api/public/file/${component.img[3]}_l.webp')`,
-          backgroundSize: 'cover',
-          backgroundPosition: 'center',
-        }"
-      />
     </div>
-    <div
+    <div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-y-[25px] sm:gap-y-[55px] xl:gap-y-0 gap-x-[30px]">
-      class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-y-[25px] sm:gap-y-[55px] xl:gap-y-0 gap-x-[30px]"
-    >
       <h2 class="h2-bold-bounded sm:col-start-1 sm:col-end-3">
         {{ component.front_section_lang[0].data.section_3.title }}
       </h2>
-      <div
+      <div v-for="(item, index) in component.front_section_lang[0].data.section_3 .text_blocks" :key="index" class="flex flex-col justify-between space-25-55">
-        v-for="(item, index) in component.front_section_lang[0].data.section_3
-          .text_blocks"
-        :key="index"
-        class="flex flex-col justify-between space-25-55"
-      >
         <p class="md:px-4 xl:p-0">
           {{ item }}
         </p>
-        <div
+        <div class="rounded-2xl h-[227px] sm:h-[281px]" :style="{ backgroundImage: `url('/api/public/file/${component.img[index + 4]}_l.webp')`, backgroundSize: 'cover', backgroundPosition: 'center' }" />
-          class="rounded-2xl h-[227px] sm:h-[281px]"
-          :style="{
-            backgroundImage: `url('/api/public/file/${component.img[index + 4]}_l.webp')`,
-            backgroundSize: 'cover',
-            backgroundPosition: 'center',
-          }"
-        />
       </div>
       <div
         class="sm:col-start-1 sm:col-end-3 xl:col-start-3 xl:col-end-5 flex justify-center xl:items-end xl:justify-end"
       >
-        <UiButtonArrow type="fill"
+        <nuxt-link :to="{ name: `id-slug___${$i18n.locale}`, params: { id: menuStore.getShopMenu()?.id, slug: menuStore.getShopMenu()?.front_menu_lang.at(0)?.link_rewrite } }">
-                       :arrow="true"
+          <UiButtonArrow type="fill" :arrow="true">
-        >
+            {{ $t("buy_gold") }}
-          {{
+          </UiButtonArrow>
-            $t("buy_gold")
+        </nuxt-link>
-          }}
-        </UiButtonArrow>
       </div>
     </div>
   </UiContainer>
@@ -147,4 +89,6 @@ defineProps<{
     }[]
   }
 }>()
+
+const menuStore = useMenuStore()
 </script>

components/section/InvestmentSave.vue

@@ -34,25 +34,13 @@
           />
         </div>
       </div>
-      <div class="flex items-center justify-center w-[60%] mx-auto">
+      <div class="flex items-center justify-center w-[100%] xl:w-[90%] mx-auto">
-        <div
+        <div class="flex flex-col items-center p-3 sm:p-6 md:p-8 xl:p-11 border border-block rounded-2xl gap-5">
-          class="flex flex-col items-center p-3 sm:p-6 md:p-8 xl:p-11 border border-block rounded-2xl gap-5"
+          <h4 class="h4-uppercase-bold-inter text-accent-green-light dark:text-accent-green-dark">
-        >
-          <h4
-            class="h4-uppercase-bold-inter text-accent-green-light dark:text-accent-green-dark"
-          >
             20 {{ $t("years") }}
           </h4>
-          <img
+          <img class="dark:hidden" :src="`/api/public/chart?second_color=000&base_color=c7c7c7&width=1800&height=480`" alt="">
-            class="dark:hidden"
+          <img class="hidden dark:block" :src="`/api/public/chart?second_color=fff&base_color=9a7f62&width=1800&height=480`" alt="">
-            :src="`/api/public/file/${component.img[2]}_l.webp`"
-            alt=""
-          >
-          <img
-            class="hidden dark:block"
-            :src="`/api/public/file/${component.img[3]}_l.webp`"
-            alt=""
-          >
         </div>
       </div>
     </div>

components/section/InvestmentZone.vue

@@ -35,52 +35,14 @@
           itemCount === 1 ? 'justify-center' : 'justify-between gap-2',
         ]"
       >
-        <div
+        <Product v-for="product in productStore.productList" :key="product.id" :product="product" />
-          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="`/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>
       </div>
 
-      <UiButtonArrow
+      <nuxt-link :to="{ name: `id-slug___${$i18n.locale}`, params: { id: menuStore.getShopMenu()?.id, slug: menuStore.getShopMenu()?.front_menu_lang.at(0)?.link_rewrite } }">
-        :arrow="true"
+        <UiButtonArrow type="fill" :arrow="true">
-        class="mx-auto"
+          {{ $t("eshop") }}
-        type="fill"
+        </UiButtonArrow>
-        @click="menuStore.navigateToShop"
+      </nuxt-link>
-      >
-        {{ $t("eshop") }}
-      </UiButtonArrow>
     </div>
 
     <!-- calculator-block -->
@@ -173,6 +135,8 @@
 </template>
 
 <script lang="ts" setup>
+import Product from './Product.vue'
+
 defineProps<{
   component: {
     id: number
@@ -211,8 +175,8 @@ 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 >= 1600) itemCount.value = 4
-  else if (width >= 768) itemCount.value = 3
+  else if (width >= 1200) itemCount.value = 3
   else if (width >= 640) itemCount.value = 2
   else itemCount.value = 1
 }

components/section/LoginMain.vue

@@ -46,10 +46,11 @@
         <p>
           {{ $t("no_account") }}
         </p>
-        <p class="text-button cursor-pointer hover:text-button-hover"
+        <nuxt-link :to="{ name: `id-slug___${$i18n.locale}`, params: { id: menuStore.getRegistrationMenu()?.id, slug: menuStore.getRegistrationMenu()?.front_menu_lang.at(0)?.link_rewrite } }">
-           @click="menuStore.navigateToItem(menuStore.menuItems?.find((item) => item.id === 4))">
+          <p class="text-button cursor-pointer hover:text-button-hover">
-          {{ $t("sign_up_now") }}
+            {{ $t("sign_up_now") }}
-        </p>
+          </p>
+        </nuxt-link>
       </div>
     </div>
   </UiContainer>

components/section/MainBlocks.vue

@@ -32,9 +32,11 @@
       </div>
       <UiImgWrapper :src="`/api/public/file/${component.img[index]}_l.webp`">
         <template #button>
-          <UiButtonArrow :arrow="true">
+          <nuxt-link :to="{ name: `id-slug___${$i18n.locale}`, params: { id: linksInfo[index].id, slug: linksInfo[index].slug } }">
-            {{ item.title }}
+            <UiButtonArrow :arrow="true">
-          </UiButtonArrow>
+              {{ item.title }}
+            </UiButtonArrow>
+          </nuxt-link>
         </template>
       </UiImgWrapper>
     </div>
@@ -83,4 +85,29 @@ type Component = {
 defineProps<{
   component: Component
 }>()
+
+const menuStore = useMenuStore()
+
+const linksInfo = ref([
+  {
+    id: menuStore.getInvestitionMenu()?.id,
+    slug: menuStore.getInvestitionMenu()?.front_menu_lang.at(0)?.link_rewrite,
+  },
+  {
+    id: menuStore.getAboutGoldMenu()?.id,
+    slug: menuStore.getAboutGoldMenu()?.front_menu_lang.at(0)?.link_rewrite,
+  },
+  {
+    id: menuStore.getBusinessMenu()?.id,
+    slug: menuStore.getBusinessMenu()?.front_menu_lang.at(0)?.link_rewrite,
+  },
+  {
+    id: menuStore.getAboutUsMenu()?.id,
+    slug: menuStore.getAboutUsMenu()?.front_menu_lang.at(0)?.link_rewrite,
+  },
+  {
+    id: menuStore.getContactMenu()?.id,
+    slug: menuStore.getContactMenu()?.front_menu_lang.at(0)?.link_rewrite,
+  },
+])
 </script>

components/section/MainHero.vue

@@ -19,13 +19,15 @@
           {{ component.front_section_lang[0].data.title_second }}
         </h3>
         <div class="flex w-full items-start justify-center sm:justify-end">
-          <UiButtonArrow :arrow="true"
+          <nuxt-link :to="{ name: `id-slug___${$i18n.locale}`, params: { id: menuStore.getRegistrationMenu()?.id, slug: menuStore.getRegistrationMenu()?.front_menu_lang.at(0)?.link_rewrite } }">
-                         type="fill"
+            <UiButtonArrow :arrow="true"
-          >
+                           type="fill"
-            {{
+            >
-              component.front_section_lang[0].data.button
+              {{
-            }}
+                component.front_section_lang[0].data.button
-          </UiButtonArrow>
+              }}
+            </UiButtonArrow>
+          </nuxt-link>
         </div>
       </div>
     </div>
@@ -52,4 +54,6 @@ defineProps<{
     }[]
   }
 }>()
+
+const menuStore = useMenuStore()
 </script>

components/section/MainProducts.vue

@@ -1,49 +1,17 @@
 <template>
   <UiContainer class="space-y-[40px] sm:space-y-[55px] md:space-y-[75px]">
-    <div
+    <!-- product -->
-      :class="[
+    <div class="space-25-55-75 flex flex-col items-center">
-        '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"
+        :class="[
-        :key="index"
+          'sm:mx-[50px] md:mx-0 xl:mx-[92px] flex items-stretch',
-        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"
+          itemCount === 1 ? 'justify-center' : 'justify-between gap-2',
+        ]"
       >
-        <img
+        <Product v-for="product in productStore.productList" :key="product.id" :product="product" />
-          :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>
     </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%]"
@@ -51,19 +19,18 @@
         Zlato je jistota, která nepodléhá času. Udělejte dnes rozhodnutí, které
         vás ochrání zítra
       </h3>
-      <UiButtonArrow
+      <nuxt-link :to="{ name: `id-slug___${$i18n.locale}`, params: { id: menuStore.getShopMenu()?.id, slug: menuStore.getShopMenu()?.front_menu_lang.at(0)?.link_rewrite } }">
-        type="fill"
+        <UiButtonArrow type="fill" :arrow="true">
-        :arrow="true"
+          {{ $t("eshop") }}
-        @click="menuStore.navigateToShop"
+        </UiButtonArrow>
-      >
+      </nuxt-link>
-        {{ $t("eshop") }}
-      </UiButtonArrow>
     </div>
   </UiContainer>
 </template>
 
 <script lang="ts" setup>
 import { ref, onMounted, onBeforeUnmount } from 'vue'
+import Product from './Product.vue'
 
 defineProps<{
   component: {
@@ -83,8 +50,8 @@ 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 >= 1600) itemCount.value = 4
-  else if (width >= 768) itemCount.value = 3
+  else if (width >= 1200) itemCount.value = 3
   else if (width >= 640) itemCount.value = 2
   else itemCount.value = 1
 }

components/section/RegistrationMain.vue

@@ -199,16 +199,11 @@
         <p class="cursor-pointer hover:underline transition-all">
           {{ $t("is_account") }}
         </p>
-        <p
+        <nuxt-link :to="{ name: `id-slug___${$i18n.locale}`, params: { id: menuStore.getLoginMenu()?.id, slug: menuStore.getLoginMenu()?.front_menu_lang.at(0)?.link_rewrite } }">
-          class="text-button cursor-pointer hover:text-button-hover"
+          <p class="text-button cursor-pointer hover:text-button-hover">
-          @click="
+            {{ $t("login") }}
-            menuStore.navigateToItem(
+          </p>
-              menuStore.menuItems?.find((item) => item.id === 11),
+        </nuxt-link>
-            )
-          "
-        >
-          {{ $t("login") }}
-        </p>
       </div>
     </div>
   </UiContainer>

stores/menuStore.ts

@@ -131,10 +131,42 @@ export const useMenuStore = defineStore('menuStore', () => {
     navigateToItem(menuItems.value?.find(item => item.id === 5))
   }
 
+  function getShopMenu() {
+    return menuItems.value?.find(item => item.id === 5)
+  }
+
   function getProductMenu() {
     return menuItems.value?.find(item => item.id === 14)
   }
 
+  function getRegistrationMenu() {
+    return menuItems.value?.find(item => item.id === 4)
+  }
+
+  function getLoginMenu() {
+    return menuItems.value?.find(item => item.id === 11)
+  }
+
+  function getInvestitionMenu() {
+    return menuItems.value?.find(item => item.id === 6)
+  }
+
+  function getAboutUsMenu() {
+    return menuItems.value?.find(item => item.id === 7)
+  }
+
+  function getBusinessMenu() {
+    return menuItems.value?.find(item => item.id === 8)
+  }
+
+  function getAboutGoldMenu() {
+    return menuItems.value?.find(item => item.id === 9)
+  }
+
+  function getContactMenu() {
+    return menuItems.value?.find(item => item.id === 10)
+  }
+
   const getFirstImage = (size: 'l' | 'm' | 's' = 'm', needbaseurl: boolean) => {
     const req = useRequestEvent()
     const url = useRequestURL()
@@ -149,8 +181,7 @@ export const useMenuStore = defineStore('menuStore', () => {
     }
     if (img.length > 0) {
       if (needbaseurl) {
-        return `${req?.headers.get('x-forwarded-proto') || url.protocol}://${
+        return `${req?.headers.get('x-forwarded-proto') || url.protocol}://${req?.headers.get('x-forwarded-host')
-          req?.headers.get('x-forwarded-host')
           || url.host
           || req?.headers.get('host')
         }${img[0]}`
@@ -265,5 +296,13 @@ export const useMenuStore = defineStore('menuStore', () => {
     getLocales,
     getProductMenu,
     formatPrice,
+    getRegistrationMenu,
+    getLoginMenu,
+    getInvestitionMenu,
+    getAboutUsMenu,
+    getBusinessMenu,
+    getAboutGoldMenu,
+    getContactMenu,
+    getShopMenu,
   }
 })