init

components/ButtonArrow.vue

@@ -1,8 +1,43 @@
 <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>
+  <div class="group flex cursor-pointer items-center justify-start gap-2">
+    <button
+      :class="[
+        'text-inter h-[40px] cursor-pointer rounded-[10px] px-[22px] text-lg transition-all sm:h-[50px] md:h-[65px] md:rounded-[15px] md:px-[42px]',
+        type === 'fill'
+          ? 'bg-button text-text-dark group-hover:bg-button-hover'
+          : 'border-button text-button group-hover:border-button-hover group-hover:text-button-hover border',
+      ]"
+    >
+      <slot />
+    </button>
+    <div
+      :class="[
+        'flex h-[40px] w-[40px] items-center justify-center rounded-[10px] p-2.5 transition-all sm:h-[50px] sm:w-[50px] md:h-[65px] md:w-[65px] md:rounded-[15px]',
+        type === 'fill'
+          ? 'bg-button text-text-dark group-hover:bg-button-hover'
+          : 'border-button text-button group-hover:border-button-hover group-hover:text-button-hover border',
+      ]"
+    >
+      <!-- <UIcon
+        class="w-10 h-10 block"
+        name="i-heroicons-arrow-up-right"
+      /> -->
+      <!-- <img src="/icons/ArrowCorner.svg" alt="" class="text-black" /> -->
+      <svg
+        class=""
+        width="26"
+        height="26"
+        viewBox="0 0 26 26"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M25.1274 1.87258C25.1274 1.3203 24.6797 0.872582 24.1274 0.872584L15.1274 0.872583C14.5751 0.872583 14.1274 1.3203 14.1274 1.87258C14.1274 2.42487 14.5751 2.87258 15.1274 2.87258L23.1274 2.87258L23.1274 10.8726C23.1274 11.4249 23.5751 11.8726 24.1274 11.8726C24.6797 11.8726 25.1274 11.4249 25.1274 10.8726L25.1274 1.87258ZM1.5 24.5L2.20711 25.2071L24.8345 2.57969L24.1274 1.87258L23.4203 1.16548L0.792893 23.7929L1.5 24.5Z"
+          fill="currentColor"
+        />
+      </svg>
+    </div>
+  </div>
 </template>
 
 <script lang="ts" setup>

components/HeaderBlock.vue

@@ -1,49 +1,59 @@
 <template>
-  <div class="border-b border-border">
+  <div class="border-border border-b">
     <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"
+      class="mx-auto 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]"
     >
-      <div class="w-full hidden xl:flex items-center justify-between h-[120px]">
+      <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"
             :key="index"
-            class="cursor-pointer hover:text-text-light/80 dark:hover:text-text-dark/70 transition-all text-lg"
+            class="hover:text-text-light/80 dark:hover:text-text-dark/70 cursor-pointer text-lg transition-all"
           >
             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"
+        <img src="/logo.png" alt="Frame" />
+        <div class="flex items-center gap-[30px]">
+          <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"
           />
         </div>
         <ThemeSwitcher />
         <button
-          class="cursor-pointer hover:bg-button-hover transition-all bg-button py-3 px-6 font-medium text-white rounded-xl"
+          class="hover:bg-button-hover bg-button cursor-pointer rounded-xl px-6 py-3 font-medium text-white transition-all"
         >
           E-shop
         </button>
       </div>
       <div
-        class="w-full hidden md:flex xl:hidden items-center justify-between h-[120px]"
+        class="hidden h-[120px] w-full items-center justify-between md:flex xl:hidden"
       >
-        <img src="./../public/logo.png" alt="Frame" />
+        <img src="/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"
+            <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"
             />
           </div>
           <ThemeSwitcher />
           <button
-            class="cursor-pointer hover:bg-button-hover transition-all bg-button py-3 px-6 font-medium text-white rounded-xl"
+            class="hover:bg-button-hover bg-button cursor-pointer rounded-xl px-6 py-3 font-medium text-white transition-all"
           >
             E-shop
           </button>

components/ThemeSwitcher.vue

@@ -13,10 +13,10 @@ const isDark = computed({
 
 <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'"
+    <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"
       />
     </div>

components/sections/main-page/HeaderHero.vue

@@ -1,30 +1,34 @@
 <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"
+    class="mx-auto 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]"
   >
     <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">
+        <h1 class="h1">
           {{ 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]"
+          class="hidden h-[509px] w-full rounded-[20px] bg-cover bg-center transition-transform duration-300 group-hover:scale-105 xl:block"
           :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]"
+          class="h-[465px] w-full rounded-[20px] bg-cover bg-center transition-transform duration-300 group-hover:scale-105 sm:h-[509px] xl:hidden"
           :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
+          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 }}
+          </h3>
+          <div class="flex w-full items-start justify-center sm:justify-end">
+            <ButtonArrow type="fill">Začít investovat</ButtonArrow>
+          </div>
+        </div>
       </div>
     </div>
   </UContainer>