app/assets/main.css

@@ -1,7 +1,7 @@
 @import "tailwindcss";
 @import "@nuxt/ui";
 
-@import url('https://fonts.googleapis.com/css2?family=Exo:ital,wght@0,100..900;1,100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Exo:ital,wght@0,100..900;1,100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
 
 body {
   font-family: 'Exo', sans-serif;
@@ -19,6 +19,10 @@ body {
 
 :root {
   --color-primary: #8AAB10;
+}
+
+@theme {
   --font-inter: 'Inter', sans-serif;
+  --font-open-sans: 'Open Sans', sans-serif;
 }
 

app/components/AppHeader.vue

@@ -1,15 +1,15 @@
 <template>
-  <header class="absolute top-0 left-0 w-full z-50 bg-[#0A0B09]/85 backdrop-blur-sm">
-    <nav class="w-full flex items-center justify-center gap-10 h-[52px] px-8">
+  <header class="absolute top-7 center-0 z-50 bg-black/60">
+    <nav class="w-full flex items-center justify-center h-[55px] px-4">
       <NuxtLink
         v-for="item in navItems"
         :key="item.label"
         :to="item.href"
-        class="relative text-xs font-semibold tracking-widest uppercase transition-colors duration-200 pb-1 whitespace-nowrap"
+        class="relative text-xs font-open-sans font-semibold px-3 uppercase transition-colors duration-200 pb-1 leading-7"
         :class="[
           item.active
-            ? 'text-[#E3FA6D] after:absolute after:bottom-0 after:left-0 after:w-full after:h-[2px] after:bg-[#E3FA6D]'
-            : 'text-white/80 hover:text-white'
+            ? 'text-[#E3FA6D] after:absolute after:bottom-0 after:left-0 after:w-full after:h-0.5 after:bg-[#E3FA6D]'
+            : 'text-white hover:text-white/85'
         ]"
       >
         {{ item.label }}

app/components/SectionHero.vue

@@ -1,5 +1,5 @@
 <template>
-  <section class="relative bg-[url('/img/hero_bg.png')] bg-cover h-screen flex justify-center">
+  <section class="relative bg-[url('/img/hero_bg.png')] bg-cover bg-center h-screen flex justify-center">
     <AppHeader />
     <div class="w-[1241px] flex justify-between items-center absolute bottom-20">
       <div class="flex flex-col gap-5 w-1/2">