feat(ui): redesign GlobalSearchBar, split layouts, and remove hero section

- Make GlobalSearchBar functional with searchStore integration
- Add destination search using hubs/nodes GraphQL query
- Navigate to /request page instead of /catalog/offers
- Remove hero section from index.vue (search is now in header)
- Add padding (px-3 lg:px-6) to topnav layout
- Implement split layout for catalog pages (offers, hubs, suppliers)
  - Left side: filters + scrollable card list (40%)
  - Right side: map (60%, hidden on mobile)

app/pages/catalog/offers/index.vue

@@ -1,6 +1,7 @@
 <template>
-  <Stack gap="6">
-    <Section variant="plain" paddingY="md">
+  <div class="flex flex-col h-[calc(100vh-200px)]">
+    <!-- Header -->
+    <div class="py-4">
       <PageHeader :title="pageTitle">
         <template v-if="selectedProduct" #actions>
           <NuxtLink :to="localePath('/catalog/offers')" class="btn btn-ghost btn-sm">
@@ -9,20 +10,20 @@
           </NuxtLink>
         </template>
       </PageHeader>
-    </Section>
+    </div>
 
     <!-- Loading state -->
-    <Section v-if="isLoading || productsLoading" variant="plain" paddingY="md">
+    <div v-if="isLoading || productsLoading" class="flex-1 flex items-center justify-center">
       <Card padding="lg">
         <Stack align="center" justify="center" gap="3">
           <Spinner />
           <Text tone="muted">{{ t('catalogLanding.states.loading') }}</Text>
         </Stack>
       </Card>
-    </Section>
+    </div>
 
     <!-- Products catalog (when no product selected) -->
-    <Section v-else-if="!selectedProductUuid" variant="plain" paddingY="md">
+    <div v-else-if="!selectedProductUuid" class="flex-1 overflow-y-auto py-4">
       <Stack gap="4">
         <Grid :cols="1" :md="2" :lg="3" :gap="4">
           <Card
@@ -43,45 +44,49 @@
           <Text tone="muted">{{ t('catalogOffersSection.empty.no_products') }}</Text>
         </Stack>
       </Stack>
-    </Section>
+    </div>
 
-    <!-- Offers for selected product -->
-    <Section v-else variant="plain" paddingY="md">
-      <Stack gap="4">
-        <NuxtLink :to="offersMapLink" class="block h-48 rounded-lg overflow-hidden cursor-pointer">
-          <ClientOnly>
-            <MapboxGlobe
-              map-id="offers-map"
-              :locations="itemsWithCoords"
-              :height="192"
+    <!-- Offers for selected product - Split Layout -->
+    <div v-else class="flex-1 flex gap-4 min-h-0">
+      <!-- Left side: Filters + Cards (scrollable) -->
+      <div class="w-full lg:w-2/5 overflow-y-auto pr-2">
+        <Stack gap="4">
+          <CatalogFilters :filters="filters" v-model="selectedFilter" />
+
+          <Stack gap="3">
+            <OfferCard
+              v-for="offer in items"
+              :key="offer.uuid"
+              :offer="offer"
             />
-          </ClientOnly>
-        </NuxtLink>
+          </Stack>
 
-        <CatalogFilters :filters="filters" v-model="selectedFilter" />
-
-        <Grid :cols="1" :md="2" :lg="3" :gap="4">
-          <OfferCard
-            v-for="offer in items"
-            :key="offer.uuid"
-            :offer="offer"
+          <PaginationLoadMore
+            :shown="items.length"
+            :total="total"
+            :can-load-more="canLoadMore"
+            :loading="isLoadingMore"
+            @load-more="loadMore"
           />
-        </Grid>
 
-        <PaginationLoadMore
-          :shown="items.length"
-          :total="total"
-          :can-load-more="canLoadMore"
-          :loading="isLoadingMore"
-          @load-more="loadMore"
-        />
-
-        <Stack v-if="total === 0" align="center" gap="2">
-          <Text tone="muted">{{ t('catalogOffersSection.empty.no_offers') }}</Text>
+          <Stack v-if="total === 0" align="center" gap="2">
+            <Text tone="muted">{{ t('catalogOffersSection.empty.no_offers') }}</Text>
+          </Stack>
         </Stack>
-      </Stack>
-    </Section>
-  </Stack>
+      </div>
+
+      <!-- Right side: Map (sticky, hidden on mobile) -->
+      <div class="hidden lg:block lg:w-3/5 rounded-lg overflow-hidden">
+        <ClientOnly>
+          <MapboxGlobe
+            map-id="offers-map"
+            :locations="itemsWithCoords"
+            class="h-full w-full"
+          />
+        </ClientOnly>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -132,13 +137,6 @@ const pageTitle = computed(() => {
   return t('catalogOffersSection.header.select_product')
 })
 
-const offersMapLink = computed(() => {
-  if (selectedProductUuid.value) {
-    return localePath(`/catalog/offers/map?product=${selectedProductUuid.value}`)
-  }
-  return localePath('/catalog/offers/map')
-})
-
 const selectProduct = (product: any) => {
   router.push({
     path: route.path,