refactor: separate landing hero section from fixed header

app/components/hero/HeroBackground.vue

@@ -1,7 +1,7 @@
 <template>
   <div
-    class="absolute left-0 top-0 w-full overflow-hidden bg-slate-900"
+    class="absolute inset-0 overflow-hidden bg-slate-900"
-    :style="{ height: `${height}px` }"
+    :style="containerStyle"
   >
     <ClientOnly>
       <DotLottieVue
@@ -20,9 +20,16 @@
 <script setup lang="ts">
 import { DotLottieVue } from '@lottiefiles/dotlottie-vue'
 
-withDefaults(defineProps<{
+const props = withDefaults(defineProps<{
   height?: number
+  fill?: boolean
 }>(), {
-  height: 860
+  height: 860,
+  fill: false
+})
+
+const containerStyle = computed(() => {
+  if (props.fill) return undefined
+  return { height: `${props.height ?? 860}px` }
 })
 </script>

app/components/navigation/MainNavigation.vue

@@ -103,11 +103,6 @@
           isHeroLayout ? 'w-full max-w-none justify-start' : 'max-w-2xl justify-center'
         ]"
       >
-        <!-- Hero slot for home page title -->
-        <div :style="heroTitleStyle">
-          <slot name="hero" />
-        </div>
-
         <!-- Client Area tabs -->
         <template v-if="isClientArea">
           <div class="flex items-center gap-1 rounded-full pill-glass p-1">
@@ -541,20 +536,6 @@ const rowStyle = computed(() => {
   return { height: `${props.height}px` }
 })
 
-const heroTitleTop = computed(() => {
-  if (!isHeroLayout.value) return 0
-  const heroHeight = props.heroBaseHeight || props.height || topRowHeight
-  const minTop = 0
-  const maxTop = Math.max(120, Math.round(heroHeight * 0.42))
-  const progress = Math.min(1, Math.max(0, props.collapseProgress || 0))
-  return Math.round(maxTop - (maxTop - minTop) * progress)
-})
-
-const heroTitleStyle = computed(() => {
-  if (!isHeroLayout.value) return {}
-  return { marginTop: `${heroTitleTop.value}px` }
-})
-
 const isFloatingHomeCapsule = computed(() => isHeroLayout.value)
 
 const landingCapsuleTopStart = computed(() => {

app/layouts/topnav.vue

@@ -9,8 +9,6 @@
     <div class="flex-1 flex flex-col" :style="contentStyle">
       <!-- Fixed Header Container -->
       <div class="header-glass fixed inset-x-0 top-0 z-50 border-0" :style="headerContainerStyle">
-      <!-- Static hero background for home page -->
-      <HeroBackground v-if="isHomePage" :height="heroBaseHeight" />
       <div class="header-glass-backdrop" aria-hidden="true" />
 
       <!-- MainNavigation -->
@@ -59,16 +57,7 @@
         @update:search-query="searchQuery = $event"
         @update-quantity="setQuantity"
         @search="onSearch"
-      >
+      />
-        <!-- Hero content for home page -->
-        <template v-if="isHomePage" #hero>
-          <h1
-            class="text-3xl lg:text-5xl font-black tracking-tight text-white mb-4"
-          >
-            {{ $t('hero.tagline', 'Make trade easy') }}
-          </h1>
-        </template>
-      </MainNavigation>
 
       <!-- Sub Navigation (section-specific tabs) - only for non-catalog/non-home/non-clientarea sections -->
       <SubNavigation
@@ -233,7 +222,7 @@ const headerContainerStyle = computed(() => {
 // Main content padding-top to compensate for fixed header
 const mainStyle = computed(() => {
   if (isCatalogSection.value) return { paddingTop: '0' }
-  if (isHomePage.value) return { paddingTop: `${heroBaseHeight.value}px` }
+  if (isHomePage.value) return { paddingTop: '100px' }
   if (isClientArea.value) return { paddingTop: '116px' }  // Header only, no SubNav
   return { paddingTop: '154px' }
 })

app/pages/index.vue

@@ -1,7 +1,23 @@
 <template>
   <div class="pb-0 -mx-3 lg:-mx-6">
+    <!-- Hero -->
+    <section class="relative mb-16 min-h-[calc(100vh-100px)] overflow-hidden">
+      <HeroBackground fill />
+
+      <div class="relative z-10 flex min-h-[calc(100vh-100px)] items-center justify-center px-4 pt-16 pb-28">
+        <div class="mx-auto max-w-4xl text-center text-white">
+          <h1 class="text-4xl font-black leading-tight md:text-6xl">
+            {{ $t('hero.tagline', 'Торговля — это просто') }}
+          </h1>
+          <p class="mx-auto mt-4 max-w-3xl text-base text-white/80 md:text-lg">
+            {{ $t('hero.subtitle', 'Сравнивайте предложения, находите поставщиков и управляйте закупками в одном интерфейсе.') }}
+          </p>
+        </div>
+      </div>
+    </section>
+
     <!-- Section: How it works -->
-    <section class="container mx-auto px-4 mb-20 mt-12">
+    <section class="container mx-auto px-4 mb-20 mt-0">
       <!-- Section header with line -->
       <div class="flex items-center gap-6 mb-10">
         <div class="h-px flex-1 bg-gradient-to-r from-transparent via-base-content/20 to-transparent" />