Unify section search headers

app/pages/clients/index.vue

@@ -60,35 +60,21 @@ const filteredClients = computed(() => {
 
 <template>
   <section class="space-y-6">
-    <div class="flex flex-col gap-3 md:flex-row md:items-end md:justify-between">
-      <div class="manager-hero">
-        <p class="manager-eyebrow">Клиенты</p>
-        <h1 class="manager-title">Карточки клиентов без лишней нагрузки</h1>
-        <p class="manager-copy">Список заявок и клиентов, с которыми менеджер уже работает.</p>
-      </div>
-
-      <NuxtLink to="/clients/invite" class="btn btn-primary border-0">
-        Пригласить клиента
-      </NuxtLink>
-    </div>
-
-    <div class="surface-card rounded-3xl p-4 md:p-5">
-      <div class="grid gap-3 md:grid-cols-[1fr_auto] md:items-end">
-        <label class="form-control">
-          <span class="label-text">Search</span>
-          <input
-            v-model="search"
-            type="text"
-            class="input manager-field w-full"
-            placeholder="Компания, контакт, email или ИНН"
-          >
-        </label>
-
+    <UiSectionSearchHero
+      v-model="search"
+      title="Клиенты"
+      search-placeholder="Компания, контакт, email или ИНН"
+    >
+      <div class="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
         <div class="manager-mini-card text-sm text-[#123824] md:w-56">
           Всего карточек: <span class="font-semibold">{{ filteredClients.length }}</span>
         </div>
+
+        <NuxtLink to="/clients/invite" class="btn btn-primary border-0">
+          Пригласить клиента
+        </NuxtLink>
       </div>
-    </div>
+    </UiSectionSearchHero>
 
     <div v-if="clientsQuery.loading.value" class="manager-empty-state">
       Загружаем клиентов...