Add page heroes to single, multi, and WordPress hosting pages.

Surface account counts, status breakdown, and available plans in heroes consistent with Ladill Servers.

Co-authored-by: Cursor <cursoragent@cursor.com>

resources/views/hosting/type.blade.php

@@ -50,28 +50,48 @@
             || $hostingAccounts->isNotEmpty()
             || $rcHostingOrders->isNotEmpty()
             || $rcServiceOrders->isNotEmpty();
+
+        $heroMeta = match ($type) {
+            \App\Models\HostingProduct::TYPE_SINGLE_DOMAIN => [
+                'badge' => 'One site · SSL · cPanel',
+                'title' => 'Single domain hosting',
+                'description' => 'Reliable hosting for one website — link your domain and go live.',
+            ],
+            \App\Models\HostingProduct::TYPE_MULTI_DOMAIN => [
+                'badge' => 'Multiple sites · Shared resources',
+                'title' => 'Multi domain hosting',
+                'description' => 'Host several websites on one account with separate domains.',
+            ],
+            \App\Models\HostingProduct::TYPE_WORDPRESS => [
+                'badge' => 'Managed · Optimized · One-click install',
+                'title' => 'WordPress hosting',
+                'description' => 'Fast, managed WordPress with automatic updates and easy staging.',
+            ],
+            default => [
+                'badge' => 'Web hosting',
+                'title' => $title,
+                'description' => 'Manage your hosting products and orders.',
+            ],
+        };
     @endphp
 
     <div class="space-y-6" x-data="{ showOrderModal: @js($shouldOpenOrderModal) }">
-        {{-- Page Header --}}
-        <div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
-            <div>
-                <div class="flex items-center gap-3">
-                    @if ($type === \App\Models\HostingProduct::TYPE_WORDPRESS)
-                        @include('partials.wordpress-icon', ['class' => 'h-9 w-9 object-contain'])
-                    @endif
-                    <h1 class="text-2xl font-semibold tracking-tight text-gray-900">{{ $title }}</h1>
-                </div>
-                <p class="mt-1 text-sm text-gray-500">Manage your {{ strtolower($title) }} products and orders.</p>
-            </div>
+        <x-hosting.page-hero
+            :badge="$heroMeta['badge']"
+            :title="$heroMeta['title']"
+            :description="$heroMeta['description']"
+            :stats="[
+                ['value' => number_format($heroStats['accounts']), 'label' => 'Accounts'],
+                ['value' => number_format($heroStats['active']), 'label' => 'Active'],
+                ['value' => number_format($heroStats['pending']), 'label' => 'Pending'],
+                ['value' => number_format($heroStats['plans']), 'label' => 'Plans'],
+            ]">
             @if ($nativeForm && ($nativeForm['has_packages'] ?? false))
-                <button type="button" @click="showOrderModal = true"
-                   class="inline-flex items-center gap-1.5 rounded-lg bg-gray-900 px-3.5 py-2 text-sm font-medium text-white shadow-sm transition hover:bg-gray-800">
-                    <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/></svg>
-                    New Product
-                </button>
+                <x-slot name="actions">
+                    <x-btn.create type="button" @click="showOrderModal = true">New product</x-btn.create>
+                </x-slot>
             @endif
-        </div>
+        </x-hosting.page-hero>
 
         {{-- Products List --}}
         @if ($hasAnyProducts)