init

app.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-bg-light text-text-light dark:text-text-dark dark:bg-bg-dark">
+  <div class="main bg-bg-light text-text-light dark:text-text-dark dark:bg-bg-dark">
     <UApp>
       <NuxtLayout>
         <NuxtPage />

assets/fonts.css

@@ -0,0 +1,7 @@
+@font-face {
+    font-family: 'Bounded';
+    src: url('/fonts/Bounded/Bounded-Variable.ttf') format('truetype');
+    font-weight: 100 900;
+    font-style: normal;
+    font-display: swap;
+}

assets/main.css

@@ -0,0 +1,47 @@
+@import "@nuxt/ui";
+@import "tailwindcss";
+
+
+@theme {
+  /* fonts */
+  --font-inter: "Inter", sans-serif;
+  --font-bounded: "Bounded", sans-serif;
+
+  /* colors */
+  --color-bg-light: #FFFEFB;
+  --color-bg-dark: #1A1A1A;
+
+  --color-border: #D3E0DE;
+
+  --color-text-light: #1A1A1A;
+  --color-text-dark: #FFFEFB;
+
+  /* button */
+  --color-button: #9A7F62;
+  --color-button-hover: #B7946D;
+  --color-button-disabled: #C5C5C5;
+}
+
+/* h1 */
+.h1 {
+  font-family: var(--font-bounded);
+  font-weight: 700;
+  line-height: 140%;
+}
+
+.text-inter {
+  font-family: var(--font-inter);
+  line-height: 150%;
+}
+
+.h4-uppercase {
+  font-family: var(--font-inter);
+  font-weight: 700;
+  line-height: 150%;
+  text-transform: uppercase;
+}
+
+.main {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}

components/ButtonArrow.vue

@@ -0,0 +1,14 @@
+<template>
+  <button :class="['text-inter text-lg h-[65px] px-[42px] rounded-[15px]', type === 'fill' ? 'bg-button text-text-dark' : 'border border-button text-button']">
+    <slot />
+  </button>
+  <div class=""></div>
+</template>
+
+<script lang="ts" setup>
+defineProps({
+  type: {
+    type: String,
+  },
+});
+</script>

components/HeaderBlock.vue

@@ -1,57 +1,58 @@
 <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"
+  <div class="border-b border-border">
+    <UContainer
+      class="w-full max-w-[360px] px-[16px] sm:max-w-[768px] sm:px-[17px] md:max-w-[1000px] md:px-[24px] xl:max-w-[1920px] xl:px-[80px] mx-auto"
+    >
+      <div class="w-full hidden xl:flex items-center justify-between h-[120px]">
+        <ul class="flex items-center gap-20 whitespace-nowrap">
+          <li
+            v-for="(item, index) in menu.items"
+            :key="index"
+            class="cursor-pointer hover:text-text-light/80 dark:hover:text-text-dark/70 transition-all text-lg"
+          >
+            0{{ index + 1 }} <br />
+            {{ item.name }}
+          </li>
+        </ul>
+        <img src="./../public/logo.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-button-hover transition-all bg-button py-3 px-6 font-medium text-white rounded-xl"
         >
-          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"
-        />
+          E-shop
+        </button>
       </div>
-      <ThemeSwitcher />
-      <button
-        class="cursor-pointer hover:bg-brown/80 transition-all bg-brown py-3 px-6 font-medium text-white rounded-xl"
+      <div
+        class="w-full hidden md:flex xl:hidden items-center justify-between h-[120px]"
       >
-        E-shop
-      </button>
-    </div>
+        <img src="./../public/logo.png" alt="Frame" />
+        <div class="flex items-center">
+          <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-button-hover transition-all bg-button py-3 px-6 font-medium text-white rounded-xl"
+          >
+            E-shop
+          </button>
+        </div>
+      </div>
+    </UContainer>
   </div>
 </template>
 <script lang="ts" setup>
-// function nested object
 const menu = {
   items: [
     {
@@ -67,7 +68,79 @@ const menu = {
       link_title: "",
       meta_description: "",
       meta_title: "",
-      name: "top",
+      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",

components/sections/main-page/HeaderHero.vue

@@ -0,0 +1,40 @@
+<template>
+  <UContainer
+    class="w-full max-w-[360px] px-[16px] sm:max-w-[768px] sm:px-[17px] md:max-w-[1000px] md:px-[24px] xl:max-w-[1920px] xl:px-[80px] mx-auto"
+  >
+    <div class="">
+      <div class="mt-[75px] space-y-[30px] sm:space-y-[53px]">
+        <h1 class="h1 text-[24px] md:text-[48px] xl:text-[64px] uppercase">
+          {{ data.title }}
+        </h1>
+        <div
+          class="hidden xl:block h-[509px] w-full bg-cover bg-center transition-transform duration-300 group-hover:scale-105 rounded-[20px]"
+          :style="{
+            backgroundImage: `url('/header-hero-desc.png')`,
+          }"
+        />
+        <div
+          class="xl:hidden h-[465px] sm:h-[509px] w-full bg-cover bg-center transition-transform duration-300 group-hover:scale-105 rounded-[20px]"
+          :style="{
+            backgroundImage: `url('/header-hero.png')`,
+          }"
+        />
+      </div>
+      <div class="">
+        <h3 class="h4-uppercase text-[24px]">
+          {{ data.title_second }}
+        </h3>
+        <ButtonArrow type="fill">Začít investovat</ButtonArrow>
+      </div>
+    </div>
+  </UContainer>
+</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",
+};
+</script>

layouts/default.vue

@@ -4,6 +4,7 @@
   >
     <HeaderBlock />
     <div class="flex-1">
+      <HeaderHero />
       <slot />
     </div>
     <!-- <footer-block /> -->
@@ -11,7 +12,7 @@
 </template>
 
 <script setup lang="ts">
-import HeaderBlock from "~/components/HeaderBlock.vue";
+import HeaderHero from "~/components/sections/main-page/HeaderHero.vue";
 
 useHead({
   link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.png" }],

main.css

@@ -1,18 +0,0 @@
-@import "tailwindcss";
-@import "@nuxt/ui";
-
-@theme {
-  /* fonts */
-  --font-inter: "Inter", sans-serif;
-
-  /* colors */
-  --color-bg-light: #FFFEFB;
-  --color-bg-dark: #1A1A1A;
-  
-  --color-border: #D3E0DE;
-
-  --color-text-light: #1A1A1A;
-  --color-text-dark: #FFFEFB;
-
-  --color-brown: #9A7F62
-}

nuxt.config.ts

@@ -31,7 +31,7 @@ export default defineNuxtConfig({
   //     optimizeTranslationDirective: false,
   //   },
   // },
-  css: ["~/main.css"],
+  css: ["@/assets/fonts.css", "@/assets/main.css"],
   vite: {
     plugins: [tailwindcss()],
     build: {