feat: hero effect with dynamic navbar height and inline title

app/components/navigation/MainNavigation.vue

@@ -1,7 +1,8 @@
 <template>
   <header
-    class="h-[100px] shadow-lg"
+    class="shadow-lg"
     :class="glassStyle ? 'bg-black/30 backdrop-blur-md border-b border-white/10' : 'bg-base-100 border-b border-base-300'"
+    :style="{ height: `${height}px` }"
   >
     <!-- Single row: Logo + Search + Icons -->
     <div class="flex items-stretch h-full px-4 lg:px-6 gap-4">
@@ -36,6 +37,9 @@
 
       <!-- Center: Search input (vertically centered) -->
       <div class="flex-1 flex flex-col items-center max-w-2xl mx-auto gap-2 justify-center">
+        <!-- Hero slot for home page title -->
+        <slot name="hero" />
+
         <!-- Quote mode: Simple segmented input with search inside (white glass) -->
         <template v-if="catalogMode === 'quote'">
           <div class="flex items-center w-full rounded-full border border-white/40 bg-white/80 backdrop-blur-md shadow-lg divide-x divide-base-300/30">
@@ -274,7 +278,7 @@ import { entityColors } from '~/composables/useCatalogSearch'
 
 import type { CatalogMode } from '~/composables/useCatalogSearch'
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   sessionChecked?: boolean
   loggedIn?: boolean
   userAvatarSvg?: string
@@ -304,7 +308,11 @@ const props = defineProps<{
   showActiveMode?: boolean  // Whether to show active state on mode toggle
   // Glass style (transparent) for map pages
   glassStyle?: boolean
-}>()
+  // Dynamic height for hero effect
+  height?: number
+}>(), {
+  height: 100
+})
 
 defineEmits([
   'toggle-theme',