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"
-    :style="{ height: `${height}px` }"
+    class="absolute inset-0 overflow-hidden bg-slate-900"
+    :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(() => {