add paegs/icons/routing/stores

components/HeaderBlock.vue

@@ -6,7 +6,8 @@
       <div class="hidden h-[120px] w-full items-center justify-between xl:flex">
         <ul class="flex items-center gap-20 whitespace-nowrap">
           <li
-            v-for="(item, index) in menu.items"
+            v-for="(item, index) in menuStore.menu"
+            @click="menuStore.navigateToItem(item);"
             :key="index"
             class="hover:text-text-light/80 dark:hover:text-text-dark/70 cursor-pointer text-lg transition-all"
           >
@@ -14,21 +15,14 @@
             {{ item.name }}
           </li>
         </ul>
-        <img src="/logo.png" alt="Frame" />
+        <img class="dark:hidden" src="/logo.png" alt="Frame" />
+        <img class="hidden dark:block" src="/logo-dark.png" alt="Frame" />
         <div class="flex items-center gap-[30px]">
-          <img
-            class="h-8 w-8 cursor-pointer"
-            src="/icons/Account.svg"
-            alt="Account"
-          />
-          <i class="uil uil-user h-8 w-8 text-text-light cursor-pointer"></i>
-          <img
-            class="h-8 w-8 cursor-pointer"
-            src="/icons/Cart.svg"
-            alt="Cart"
-          />
+          <i class="uil uil-user text-[35px] cursor-pointer"></i>
+          <i class="uil uil-shopping-cart text-[35px] cursor-pointer"></i>
         </div>
         <ThemeSwitcher />
+        <LangSwitcher />
         <button
           class="hover:bg-button-hover bg-button cursor-pointer rounded-xl px-6 py-3 font-medium text-white transition-all"
         >
@@ -40,22 +34,10 @@
       >
         <img src="/logo.png" alt="Frame" />
         <div class="flex items-center gap-6">
-          <img
-            class="h-8 w-8 cursor-pointer"
-            src="/icons/Account.svg"
-            alt="Account"
-          />
-          <img
-            class="h-8 w-8 cursor-pointer"
-            src="/icons/Cart.svg"
-            alt="Cart"
-          />
+          <i class="uil uil-user text-[35px] cursor-pointer"></i>
+          <i class="uil uil-shopping-cart text-[35px] cursor-pointer"></i>
           <ThemeSwitcher />
-          <img
-            class="h-8 w-8 cursor-pointer"
-            src="/icons/Menu.svg"
-            alt="Cart"
-          />
+          <i class="uil uil-apps text-[35px] cursor-pointer"></i>
         </div>
       </div>
       <div
@@ -63,139 +45,23 @@
       >
         <img src="/logo.png" alt="Frame" />
         <div class="flex items-center gap-6">
-          <img
-            class="h-8 w-8 cursor-pointer"
-            src="/icons/Account.svg"
-            alt="Account"
-          />
-          <img
-            class="h-8 w-8 cursor-pointer"
-            src="/icons/Cart.svg"
-            alt="Cart"
-          />
-          <img
-            class="h-8 w-8 cursor-pointer"
-            src="/icons/Menu.svg"
-            alt="Cart"
-          />
+          <i class="uil uil-user text-[35px] cursor-pointer"></i>
+          <i class="uil uil-shopping-cart text-[35px] cursor-pointer"></i>
+          <i class="uil uil-apps text-[35px] cursor-pointer"></i>
         </div>
       </div>
       <div class="flex h-[84px] w-full items-center justify-between sm:hidden">
         <img src="/logo.png" alt="Frame" />
         <div class="flex items-center gap-6">
-          <!-- <img
-            class="h-8 w-8 cursor-pointer"
-            src="/icons/Account.svg"
-            alt="Account"
-          /> -->
-          <i class="uil uil-user h-8 w-8 cursor-pointer"></i>
-          <img
-            class="h-8 w-8 cursor-pointer"
-            src="/icons/Menu.svg"
-            alt="Cart"
-          />
+          <i class="uil uil-user text-[35px] cursor-pointer"></i>
+          <i class="uil uil-apps text-[35px] cursor-pointer"></i>
         </div>
       </div>
     </UContainer>
   </div>
 </template>
 <script lang="ts" setup>
-const menu = {
-  items: [
-    {
-      active: true,
-      created: "2025-04-29 14:21:16.980Z",
-      id: "l10y982y139ep7u",
-      id_lang: "en",
-      id_page: "",
-      id_parent: "",
-      is_default: false,
-      is_root: true,
-      link_rewrite: "",
-      link_title: "",
-      meta_description: "",
-      meta_title: "",
-      name: "Investice",
-      page_name: "",
-      position_id: 0,
-      updated: "2025-05-09 08:34:06.650Z",
-    },
-    {
-      active: true,
-      created: "2025-04-29 14:21:16.980Z",
-      id: "l10y982y139ep7u",
-      id_lang: "en",
-      id_page: "",
-      id_parent: "",
-      is_default: false,
-      is_root: true,
-      link_rewrite: "",
-      link_title: "",
-      meta_description: "",
-      meta_title: "",
-      name: "O zlotě",
-      page_name: "",
-      position_id: 0,
-      updated: "2025-05-09 08:34:06.650Z",
-    },
-    {
-      active: true,
-      created: "2025-04-29 14:21:16.980Z",
-      id: "l10y982y139ep7u",
-      id_lang: "en",
-      id_page: "",
-      id_parent: "",
-      is_default: false,
-      is_root: true,
-      link_rewrite: "",
-      link_title: "",
-      meta_description: "",
-      meta_title: "",
-      name: "Podnikání",
-      page_name: "",
-      position_id: 0,
-      updated: "2025-05-09 08:34:06.650Z",
-    },
-    {
-      active: true,
-      created: "2025-04-29 14:21:16.980Z",
-      id: "l10y982y139ep7u",
-      id_lang: "en",
-      id_page: "",
-      id_parent: "",
-      is_default: false,
-      is_root: true,
-      link_rewrite: "",
-      link_title: "",
-      meta_description: "",
-      meta_title: "",
-      name: "O Nás",
-      page_name: "",
-      position_id: 0,
-      updated: "2025-05-09 08:34:06.650Z",
-    },
-    {
-      active: true,
-      created: "2025-04-29 14:21:16.980Z",
-      id: "l10y982y139ep7u",
-      id_lang: "en",
-      id_page: "",
-      id_parent: "",
-      is_default: false,
-      is_root: true,
-      link_rewrite: "",
-      link_title: "",
-      meta_description: "",
-      meta_title: "",
-      name: "Kontakt",
-      page_name: "",
-      position_id: 0,
-      updated: "2025-05-09 08:34:06.650Z",
-    },
-  ],
-  page: 1,
-  perPage: 50,
-  totalItems: 14,
-  totalPages: 1,
-};
+import LangSwitcher from './langSwitcher.vue';
+
+const menuStore = useMenuStore()
 </script>

components/ThemeSwitcher.vue

@@ -14,13 +14,8 @@ const isDark = computed({
 <template>
   <ClientOnly v-if="!colorMode?.forced">
     <div class="flex h-8 w-8 cursor-pointer items-center justify-center">
-      <img
-        class="h-8 w-8"
-        :src="`/icons/${isDark ? 'Moon' : 'Light'}.svg`"
-        @click="isDark = !isDark"
-      />
+        <i  @click="isDark = !isDark" :class="['uil text-[35px] cursor-pointer', isDark ? 'uil-moon' : 'uil-sun']"></i>
     </div>
-
     <template #fallback>
       <div class="size-20" />
     </template>

components/langSwitcher.vue

@@ -0,0 +1,41 @@
+<template>
+    <USelectMenu
+      v-model="selectedLocale"
+      :items="locales"
+      label-key="name"
+      :search-input="{ icon: 'i-lucide-search' }"
+      placeholder="Select country"
+      class="w-48 bg-block-light dark:bg-block-dark border-border-light dark:border-border-dark"
+      @update:model-value="setLocaleManually($event)"
+    >
+      <template #leading="{ modelValue, ui }">
+        <span v-if="modelValue" class="size-5 text-center">
+          <UIcon
+            :name="(modelValue?.icon as string) || 'i-lucide-earth'"
+            :class="[ui.leadingIcon(), 'border border-border-light dark:border-border-dark rounded-full']"
+          />
+        </span>
+      </template>
+      <template #item-leading="{ item }">
+        <span class="size-5 text-center">
+          <!-- {{ item.name }} -->
+          <UIcon :name="item.icon as string" class="size-5 text-accent" />
+        </span>
+      </template>
+    </USelectMenu>
+  </template>
+  
+  <script setup lang="ts">
+  import type { LocaleObject } from "@nuxtjs/i18n";
+  const { setLocale, locales, locale } = useI18n();
+  
+  const selectedLocale = ref(
+    locales.value.find((item) => item.code === locale.value)
+  );
+  
+  function setLocaleManually(newLocale: LocaleObject) {
+    locale.value = newLocale.code;
+    locales.value.find((item) => item.code === locale.value);
+    setLocale(newLocale.code);
+  }
+  </script>

components/section/main-page/MainHero.vue

@@ -5,7 +5,7 @@
     <div class="">
       <div class="mt-[75px] space-y-[30px] sm:space-y-[53px]">
         <h1 class="h1">
-          {{ data.title }}
+          {{ component.section_lang_data.title }}
         </h1>
         <div
           class="hidden h-[509px] w-full rounded-[20px] bg-cover bg-center transition-transform duration-300 group-hover:scale-105 xl:block"
@@ -23,10 +23,10 @@
           class="flex flex-col items-center space-y-[30px] sm:flex-row sm:items-start md:space-y-0 xl:items-center"
         >
           <h3 class="h4-uppercase sm:min-w-[45%]">
-            {{ data.title_second }}
+            {{ component.section_lang_data.title_second }}
           </h3>
           <div class="flex w-full items-start justify-center sm:justify-end">
-            <ButtonArrow type="fill">Začít investovat</ButtonArrow>
+            <ButtonArrow type="fill">{{ component.section_lang_data.button }}</ButtonArrow>
           </div>
         </div>
       </div>
@@ -35,10 +35,15 @@
 </template>
 
 <script lang="ts" setup>
-const data = {
-  title: "INVESTUJTE CHYTŘE. CHRAŇTE SVÉ PENÍZE ZLATEM",
-  button: "Začít investovat",
-  title_second:
-    "Spoření i jednorázová investice do zlata jednoduše a bezpečně s YourGold",
+const props = defineProps<{ component: Component }>();
+type Component = {
+  image_collection: string;
+  section_id: string;
+  section_img: string;
+  section_lang_data: {
+    title: string;
+    title_second: string;
+    button: string;
+  };
 };
 </script>