conflicts

assets/main.css

@@ -1,5 +1,6 @@
 @import "@nuxt/ui";
 @import "tailwindcss";
+@import '@iconscout/unicons/css/line.css';
 
 @theme {
   /* fonts */

components/HeaderBlock.vue

@@ -35,11 +35,10 @@
         </button>
       </div>
       <div
-        class="hidden h-[120px] w-full items-center justify-between md:flex xl:hidden"
+        class="hidden h-[116px] w-full items-center justify-between md:flex xl:hidden"
       >
         <img src="/logo.png" alt="Frame" />
-        <div class="flex items-center">
-          <div class="flex items-center gap-7">
+        <div class="flex items-center gap-6">
           <img
             class="h-8 w-8 cursor-pointer"
             src="/icons/Account.svg"
@@ -50,13 +49,50 @@
             src="/icons/Cart.svg"
             alt="Cart"
           />
-          </div>
           <ThemeSwitcher />
-          <button
-            class="hover:bg-button-hover bg-button cursor-pointer rounded-xl px-6 py-3 font-medium text-white transition-all"
+          <img
+            class="h-8 w-8 cursor-pointer"
+            src="/icons/Menu.svg"
+            alt="Cart"
+          />
+        </div>
+      </div>
+      <div
+        class="hidden h-[84px] w-full items-center justify-between sm:flex md:hidden"
       >
-            E-shop
-          </button>
+        <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"
+          />
+        </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"
+          /> -->
+          <UIcon class="uil uil-user h-8 w-8 cursor-pointer"></UIcon>
+          <img
+            class="h-8 w-8 cursor-pointer"
+            src="/icons/Menu.svg"
+            alt="Cart"
+          />
         </div>
       </div>
     </UContainer>

layouts/default.vue

@@ -1,10 +1,10 @@
 <template>
   <div
-    class="bg-bg-light dark:bg-bg-dark font-inter flex min-h-screen flex-col overflow-hidden"
+    class="bg-bg-light dark:bg-bg-dark text-text-light dark:text-text-dark font-inter flex min-h-screen flex-col overflow-hidden"
   >
     <HeaderBlock />
     <div class="flex-1">
-      <HeaderHero />
+      <MainHero />
       <slot />
     </div>
     <!-- <footer-block /> -->
@@ -12,9 +12,12 @@
 </template>
 
 <script setup lang="ts">
-import HeaderHero from "~/components/sections/main-page/HeaderHero.vue";
+import MainHero from "~/components/sections/main-page/MainHero.vue";
 
 useHead({
   link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.png" }],
 });
 </script>
+
+<style>
+</style>

package.json

@@ -10,6 +10,7 @@
     "postinstall": "nuxt prepare"
   },
   "dependencies": {
+    "@iconscout/unicons": "^4.2.0",
     "@nuxt/eslint": "^1.4.1",
     "@nuxt/ui": "^3.1.2",
     "@nuxtjs/i18n": "^9.5.4",