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>