Add page heroes to VPS and dedicated server pages.

Surface server counts, status breakdown, and available plans in heroes consistent with other Ladill apps.

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

resources/views/hosting/server-type.blade.php

@@ -85,20 +85,24 @@
     @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>
-                <h1 class="text-2xl font-semibold tracking-tight text-gray-900">{{ $title }}</h1>
-                <p class="mt-1 text-sm text-gray-500">Manage your {{ strtolower($title) }} orders.</p>
-            </div>
+        <x-servers.page-hero
+            :badge="$type === 'vps' ? 'SSD · Root access · Flexible billing' : 'Bare metal · RAID · Full root'"
+            :title="$type === 'vps' ? 'VPS' : 'Dedicated servers'"
+            :description="$type === 'vps'
+                ? 'Deploy scalable virtual private servers — pick a plan, region, and image.'
+                : 'Maximum performance and isolation for production workloads on dedicated hardware.'"
+            :stats="[
+                ['value' => number_format($heroStats['total']), 'label' => 'Servers'],
+                ['value' => number_format($heroStats['active']), 'label' => 'Active'],
+                ['value' => number_format($heroStats['pending']), 'label' => 'Pending'],
+                ['value' => number_format($heroStats['plans']), 'label' => 'Plans'],
+            ]">
             @if ($serverOrderPayloads !== [])
-                <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>
-                    {{ $orderButtonLabel }}
-                </button>
+                <x-slot name="actions">
+                    <x-btn.create type="button" @click="showOrderModal = true">{{ $orderButtonLabel }}</x-btn.create>
+                </x-slot>
             @endif
-        </div>
+        </x-servers.page-hero>
 
         @if ($hasAnyProducts)
             <div class="space-y-3">