From 3380e407f376b8a3d7155c3082955539713ce0a0 Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Thu, 12 Mar 2026 15:46:21 +0700
Subject: [PATCH] fix: align landing capsule under hero title

---
 app/components/navigation/MainNavigation.vue | 22 ++++++++++++++------
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/app/components/navigation/MainNavigation.vue b/app/components/navigation/MainNavigation.vue
index 1d0adc3..79ef536 100644
--- a/app/components/navigation/MainNavigation.vue
+++ b/app/components/navigation/MainNavigation.vue
@@ -532,6 +532,8 @@ const getTokenIcon = (type: string) => {
 const isHeroLayout = computed(() => props.isHomePage && !props.isClientArea)
 const topRowHeight = 100
 const LANDING_CAPSULE_TOP_STOP = 2
+const HERO_TITLE_HEIGHT_ESTIMATE = 72
+const HERO_CAPSULE_GAP = 20
 
 const rowStyle = computed(() => {
   if (isHeroLayout.value) {
@@ -540,22 +542,30 @@ const rowStyle = computed(() => {
   return { height: `${props.height}px` }
 })
 
-const heroTitleStyle = computed(() => {
-  if (!isHeroLayout.value) return {}
+const heroTitleTop = computed(() => {
+  if (!isHeroLayout.value) return 0
   const heroHeight = 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))
-  const top = Math.round(maxTop - (maxTop - minTop) * progress)
-  return { marginTop: `${top}px` }
+  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(() => {
+  if (!isFloatingHomeCapsule.value) return LANDING_CAPSULE_TOP_STOP
+  const naturalTop = heroTitleTop.value + HERO_TITLE_HEIGHT_ESTIMATE + HERO_CAPSULE_GAP
+  const minTop = 180
   const base = props.heroBaseHeight || props.height || 0
-  if (!base) return 420
-  return Math.max(300, Math.min(520, Math.round(base * 0.52)))
+  if (!base) return Math.max(minTop, naturalTop)
+  const maxTop = Math.max(260, base - 140)
+  return Math.max(minTop, Math.min(maxTop, naturalTop))
 })
 
 const landingCapsuleTop = computed(() => {