init project

components/HeaderBlock.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="container mx-auto h-[120px] border-b border-border">
+    <div class="w-full h-full flex items-center justify-between">
+      <ul class="flex items-center gap-20 whitespace-nowrap">
+        <li
+          class="cursor-pointer hover:text-text-light/80 dark:hover:text-text-dark/70 transition-all"
+        >
+          01 <br />
+          Investice
+        </li>
+        <li
+          class="cursor-pointer hover:text-text-light/80 dark:hover:text-text-dark/70 transition-all"
+        >
+          02 <br />
+          O zlotě
+        </li>
+        <li
+          class="cursor-pointer hover:text-text-light/80 dark:hover:text-text-dark/70 transition-all"
+        >
+          03 <br />
+          Podnikání
+        </li>
+        <li
+          class="cursor-pointer hover:text-text-light/80 dark:hover:text-text-dark/70 transition-all"
+        >
+          04 <br />
+          O Nás
+        </li>
+        <li
+          class="cursor-pointer hover:text-text-light/80 dark:hover:text-text-dark/70 transition-all"
+        >
+          05 <br />
+          Kontakt
+        </li>
+      </ul>
+      <img src="./../public/Frame 1321315773.png" alt="Frame" />
+      <div class="flex items-center gap-7">
+        <UIcon class="w-8 h-8 cursor-pointer" name="i-heroicons-user" />
+        <UIcon
+          class="w-8 h-8 cursor-pointer"
+          name="i-heroicons-shopping-cart"
+        />
+      </div>
+      <ThemeSwitcher />
+      <button
+        class="cursor-pointer hover:bg-brown/80 transition-all bg-brown py-3 px-6 font-medium text-white rounded-xl"
+      >
+        E-shop
+      </button>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+// function nested object
+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: "top",
+      page_name: "",
+      position_id: 0,
+      updated: "2025-05-09 08:34:06.650Z",
+    },
+  ],
+  page: 1,
+  perPage: 50,
+  totalItems: 14,
+  totalPages: 1,
+};
+</script>

components/ThemeSwitcher.vue

@@ -0,0 +1,28 @@
+<script setup>
+const colorMode = useColorMode();
+
+const isDark = computed({
+  get() {
+    return colorMode.value === "dark";
+  },
+  set(_isDark) {
+    colorMode.preference = _isDark ? "dark" : "light";
+  },
+});
+</script>
+
+<template>
+  <ClientOnly v-if="!colorMode?.forced">
+    <div class="w-8 h-8 flex items-center justify-center cursor-pointer">
+      <UIcon
+        class="w-8 h-8"
+        :name="isDark ? 'i-lucide-moon' : 'i-lucide-sun'"
+        @click="isDark = !isDark"
+      />
+    </div>
+
+    <template #fallback>
+      <div class="size-20" />
+    </template>
+  </ClientOnly>
+</template>