Enhance UI transitions and loading effects across Proxmox views

- Implemented page load animations using Alpine.js for smoother transitions in various views including firewall, help, index, network, overview, reinstall, server, statistics, storage, subdomain, and system.
- Added opacity and translate effects to elements for improved visual feedback during loading.
- Enhanced hover effects on cards and buttons for better user interaction.
- Adjusted transition timings and delays for a more cohesive user experience.

extensions/Servers/Proxmox/views/system.blade.php

@@ -1,6 +1,8 @@
 <x-proxmox::layout :server="$server" view="system" :status="$status" :status-polling="true" :status-polling-interval="'2s'">
-    <div class="space-y-6">
-        <div class="flex flex-col gap-2">
+    <div class="space-y-6" x-data="{ pageLoaded: false }" x-init="setTimeout(() => pageLoaded = true, 50)">
+        <div class="flex flex-col gap-2"
+             :class="pageLoaded ? 'opacity-100 translate-y-0' : 'opacity-0 -translate-y-2'"
+             style="transition: all 0.4s ease-out;">
             <div class="flex items-center gap-2 min-w-0">
                 <h2 class="text-xl font-semibold break-words">System Configuration</h2>
                 <div class="relative" x-data="{ open: false }" x-cloak>
@@ -66,7 +68,9 @@
         </div>
 
         <div class="grid gap-6 xl:grid-cols-2">
-            <div class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl shadow-theme-sm p-5 space-y-4">
+            <div class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl shadow-theme-sm p-5 space-y-4 transition-all duration-300 hover:shadow-md"
+                 :class="pageLoaded ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4'"
+                 style="transition: all 0.4s ease-out 0.1s;">
                 <div class="flex items-center justify-between">
                     <div>
                         <div class="flex items-center gap-2 min-w-0">