chore: Improve header and slow down PageMarquee

nuxt-ui-pro · Feb 11, 2025 · 3046c86 · 3046c86
1 parent b92c325
commit 3046c86
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 7 deletions.
diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue
@@ -1,27 +1,39 @@
 <script setup lang="ts">
 const route = useRoute()
+const nuxtApp = useNuxtApp()
+const { activeHeadings, updateHeadings } = useScrollspy()
 
 const items = computed(() => [{
   label: 'Features',
   to: '#features',
-  active: route.hash === '#features'
+  active: activeHeadings.value.includes('features') && !activeHeadings.value.includes('templates')
 }, {
   label: 'Templates',
   to: '#templates',
-  active: route.hash === '#templates'
+  active: activeHeadings.value.includes('templates') && !activeHeadings.value.includes('pricing')
 }, {
   label: 'Pricing',
   to: '#pricing',
-  active: route.hash === '#pricing'
+  active: activeHeadings.value.includes('pricing') && !activeHeadings.value.includes('testimonials')
 }, {
   label: 'Testimonials',
   to: '#testimonials',
-  active: route.hash === '#testimonials'
+  active: activeHeadings.value.includes('testimonials') && !activeHeadings.value.includes('faq')
 }, {
   label: 'FAQ',
   to: '#faq',
-  active: route.hash === '#faq'
+  active: activeHeadings.value.includes('faq')
 }])
+
+nuxtApp.hooks.hookOnce('page:finish', () => {
+  updateHeadings([
+    document.querySelector('#features'),
+    document.querySelector('#templates'),
+    document.querySelector('#pricing'),
+    document.querySelector('#testimonials'),
+    document.querySelector('#faq')
+  ])
+})
 </script>
 
 <template>

diff --git a/app/pages/index.vue b/app/pages/index.vue
@@ -130,7 +130,10 @@ const isDark = computed(() => useColorMode().value == 'dark')
       id="testimonials"
       v-bind="page.testimonials"
     >
-      <UPageMarquee pause-on-hover>
+      <UPageMarquee
+        pause-on-hover
+        class="[--duration:50s]"
+      >
         <img
           v-for="(logo, index) in page.logos"
           :key="index"

diff --git a/content/index.yml b/content/index.yml
@@ -1,7 +1,7 @@
 title: Nuxt UI Pro - Landing template
 description: Nuxt UI Pro is a collection of premium Vue components built on top of Nuxt UI to create beautiful & responsive Nuxt applications in minutes.
 hero:
-  title: Build you landing with Nuxt UI Pro
+  title: Build your landing with Nuxt UI Pro
   description: Nuxt UI Pro is a collection of premium Vue components built on top of Nuxt UI to create beautiful & responsive Nuxt applications in minutes. It includes all primitives to build landing pages, documentations, blogs, dashboards or entire SaaS products.
   links:
     - label: Get started