fix navbar

assets/styles/tailwind.css

@@ -101,10 +101,10 @@
   }
   /* Navbar */
   .navbar-links {
-    @apply bg-black-950;
+    background: transparent,
   }
   .nav-link {
     @apply text-black-950 hover:text-gray-500;
-    background: white;
+    background: transparent;
   }
 }

components/TopBar.vue

@@ -70,10 +70,6 @@ watch(
       justify-content: center;
       align-items: center;
     }
-    svg {
-      width: 200px;
-      height: auto;
-    }
   }
   .close-menu-container {
     display: none;

components/sections/BuildSection.vue

@@ -1,5 +1,6 @@
 <template>
   <NuxtLayout
+    id="build"
     name="section"
     :center-left-content="false"
     :content-classes="'grid justify-items-center gap-md'"
@@ -9,7 +10,6 @@
     </template>
     <template #content>
       <i18n-t
-        id="build"
         keypath="build-section.title.key_features"
         class="title-h2 text-center max-w-screen-md"
         tag="h2"

components/sections/BuySection.vue

@@ -1,5 +1,6 @@
 <template>
   <NuxtLayout
+    id="buy"
     name="section"
     :content-classes="'grid justify-items-center h-max gap-md'"
     :height="'h-lg-y-screen sm:h-[max-content]'"

components/sections/CoinSection.vue

@@ -1,5 +1,6 @@
 <template>
   <NuxtLayout
+    id="stake"
     name="section"
     :frame-classes="'bg-black-950'"
     :content-classes="'grid justify-items-center'"
@@ -9,11 +10,12 @@
     </template>
     <template #content>
       <div class="flex flex-col items-center gap-md">
-        <div class="flex justify-center items-center mb-xl flex-row md:flex-col sm:flex-col">
+        <div
+          class="flex justify-center items-center mb-xl flex-row md:flex-col sm:flex-col"
+        >
           <i18n-t
             keypath="coin.title.main"
             class="title-h2-xl sm:text-7xl lg:text-8xl font-bold text-white-50"
-            id="stake"
             tag="h3"
           >
             <span class="text-wit-blue-500">{{ $t('coin.title.mark') }}</span>
@@ -30,11 +32,7 @@
         </div>
 
         <CustomButton :type="ButtonType.dark">
-          <i18n-t
-            keypath="coin.run_in_platform.main"
-            class="flex flex-row"
-            tag="p"
-          >
+          <i18n-t keypath="coin.run_in_platform.main" tag="p">
             <span class="ml-[4px]">{{ release.platform }}</span>
           </i18n-t>
         </CustomButton>

components/sections/HeroSection.vue

@@ -2,6 +2,7 @@
   <NuxtLayout
     name="section"
     :center-left-content="false"
+    :content-classes="'p-[0px_100px_100px_100px] sm:p-[0px_32px_70px_32px] xs:p-[0px_16px_70px_16px]'"
     :height="'h-lg-y-screen sm:h-[max-content] max-h-[900px]'"
   >
     <template #left>

layouts/default.vue

@@ -10,8 +10,16 @@
           </NuxtLink>
         </template>
         <template v-for="link in navLinks" :key="link.key" #[link.key]>
-          <InnerLink :hash="link.key">
-            <span class="slash text-wit-blue-500">/</span>{{ link.locale }}
+          <InnerLink
+            :hash="link.key"
+            class="text font-[500] flex cursor-pointer"
+            @mouseover="activateLink(link)"
+            @mouseleave="clearActiveLinks"
+          >
+            <NavigationCursor v-if="link.active" class="w-sm h-auto" /><span
+              class="slash text-wit-blue-500"
+              >/</span
+            >{{ link.locale }}
           </InnerLink>
         </template>
       </TopBar>
@@ -30,28 +38,38 @@
 <script lang="ts" setup>
 import { useI18n } from 'vue-i18n'
 import WitnetLogo from '@/assets/svg/witnet-logo.svg?component'
+import NavigationCursor from '@/assets/svg/navigation-cursor.svg?component'
 const { t } = useI18n()
 
-const navLinks: Array<{ key: string }> = [
+const navLinks: Array<{ key: string }> = ref([
   {
     key: 'stake',
+    active: false,
     to: '/stake',
     rel: 'stake',
     locale: t('nav_bar.route.stake'),
   },
   {
     key: 'buy',
+    active: false,
     to: '/buy',
     rel: 'buy',
     locale: t('nav_bar.route.buy'),
   },
   {
     key: 'build',
+    active: false,
     to: '/build',
     rel: 'build',
     locale: t('nav_bar.route.build'),
   },
-]
+])
+function activateLink(link) {
+  link.active = true
+}
+function clearActiveLinks() {
+  navLinks.value.forEach((link) => (link.active = false))
+}
 </script>
 
 <style lang="scss">
@@ -63,7 +81,7 @@ const navLinks: Array<{ key: string }> = [
     align-items: center;
   }
   svg {
-    width: 200px;
+    width: 170px;
     height: auto;
   }
 }

layouts/navbar.vue

@@ -30,6 +30,7 @@ export default {
 .section {
   padding: 16px;
   margin: 0 auto;
+  margin-top: 32px;
   max-width: 1300px;
   width: 100%;
 }
@@ -38,8 +39,22 @@ export default {
   width: 100%;
 }
 
+@media (max-width: 1200px) {
+  .section {
+    margin-top: 0px;
+    padding: 32px;
+  }
+}
+
+@media (max-width: 700px) {
+  .section {
+    margin-top: 0px;
+  }
+}
+
 @media (max-width: 300px) {
   .section {
+    margin-top: 0px;
     padding: 32px 16px;
   }
 }