fix: make home hero static and keep capsule scroll motion

app/components/hero/HeroBackground.vue

@@ -1,34 +1,6 @@
 <template>
-  <div class="absolute inset-0 overflow-hidden bg-slate-900">
+  <div class="absolute inset-0 overflow-hidden bg-[#0a1533]">
-    <!-- Lottie animation -->
+    <div class="absolute inset-0 bg-[radial-gradient(70%_50%_at_50%_0%,rgba(36,99,235,0.35),rgba(10,21,51,0)_70%)]" />
-    <ClientOnly>
+    <div class="absolute inset-0 bg-gradient-to-b from-[#0d214f] via-[#0b1b45] to-[#091634]" />
-      <DotLottieVue
-        src="/animations/supply-chain.lottie"
-        autoplay
-        loop
-        :layout="{ fit: 'cover', align: [0.5, 0.5] }"
-        class="absolute top-0 left-0 w-full"
-        :style="{
-          height: '100vh',
-          opacity: 1 - collapseProgress * 0.7,
-          transform: `scale(${1 + collapseProgress * 0.1})`
-        }"
-      />
-    </ClientOnly>
-
-    <!-- Overlay for text readability - only when hero starts collapsing -->
-    <div
-      v-if="collapseProgress > 0.5"
-      class="absolute inset-0 bg-gradient-to-b from-slate-900/60 via-slate-900/40 to-slate-900/70"
-      :style="{ opacity: (collapseProgress - 0.5) * 2 }"
-    />
   </div>
 </template>
-
-<script setup lang="ts">
-import { DotLottieVue } from '@lottiefiles/dotlottie-vue'
-
-defineProps<{
-  collapseProgress: number
-}>()
-</script>

app/composables/useHeroScroll.ts

@@ -6,13 +6,13 @@ export const useHeroScroll = () => {
   const scrollY = ref(0)
 
   // Hero height = viewport height minus some space
-  const heroBaseHeight = ref(0)
+  const heroBaseHeight = ref(860)
   const collapsedHeight = 100 // Fixed header height when collapsed
 
   // Calculate hero height based on viewport
   const updateHeroHeight = () => {
     if (import.meta.client) {
-      heroBaseHeight.value = window.innerHeight - 80
+      heroBaseHeight.value = Math.max(640, window.innerHeight - 80)
     }
   }
 

app/layouts/topnav.vue

@@ -10,14 +10,14 @@
       <!-- Fixed Header Container -->
       <div class="header-glass fixed inset-x-0 top-0 z-50 border-0" :style="headerContainerStyle">
       <div class="header-glass-backdrop" aria-hidden="true" />
-      <!-- Animated background for home page -->
+      <!-- Static hero background for home page -->
-      <HeroBackground v-if="isHomePage" :collapse-progress="collapseProgress" />
+      <HeroBackground v-if="isHomePage" />
 
-      <!-- MainNavigation - dynamic height on home page -->
+      <!-- MainNavigation -->
       <MainNavigation
         class="relative z-10"
-        :height="isHomePage ? heroHeight : 100"
+        :height="isHomePage ? heroBaseHeight : 100"
-        :collapse-progress="isHomePage ? collapseProgress : 1"
+        :collapse-progress="isHomePage ? 0 : 1"
         :hero-scroll-y="isHomePage ? heroScrollY : 0"
         :hero-base-height="isHomePage ? heroBaseHeight : 0"
         :session-checked="sessionChecked"
@@ -41,7 +41,7 @@
         :can-search="canSearch"
         :show-mode-toggle="true"
         :show-active-mode="isCatalogSection"
-        :is-collapsed="isHomePage ? heroIsCollapsed : (isCatalogSection || isClientArea)"
+        :is-collapsed="isHomePage ? false : (isCatalogSection || isClientArea)"
         :is-home-page="isHomePage"
         :is-client-area="isClientArea"
         :chat-open="isChatOpen"
@@ -61,10 +61,9 @@
         @search="onSearch"
       >
         <!-- Hero content for home page -->
-        <template v-if="isHomePage && collapseProgress < 1" #hero>
+        <template v-if="isHomePage" #hero>
           <h1
             class="text-3xl lg:text-5xl font-black tracking-tight text-white mb-4"
-            :style="{ opacity: 1 - collapseProgress }"
           >
             {{ $t('hero.tagline', 'Make trade easy') }}
           </h1>
@@ -129,11 +128,7 @@ const { headerOffset, isCollapsed } = useScrollCollapse(100)
 // Hero scroll for home page
 const {
   scrollY: heroScrollY,
-  heroHeight,
   heroBaseHeight,
-  collapseProgress,
-  isCollapsed: heroIsCollapsed,
-  collapsedHeight
 } = useHeroScroll()
 
 // Theme state