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/cloud-init.blade.php

@@ -17,8 +17,10 @@
             width: 100%;
         }
     </style>
-    <div class="space-y-6">
-        <div class="bg-info/10 border border-info/30 rounded-lg p-4"
+    <div class="space-y-6" x-data="{ pageLoaded: false }" x-init="setTimeout(() => pageLoaded = true, 50)">
+        <div class="bg-info/10 border border-info/30 rounded-lg p-4 transition-all duration-300"
+             :class="pageLoaded ? 'opacity-100 translate-y-0' : 'opacity-0 -translate-y-2'"
+             style="transition: all 0.4s ease-out;"
              x-data="{
                  isCollapsed: localStorage.getItem('cloud-init-notice-collapsed') === 'true',
                  toggle() {
@@ -92,7 +94,9 @@
         </div>
 
         <div class="grid grid-cols-1 xl:grid-cols-2 gap-6">
-            <div class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl shadow-theme-sm p-4 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-4 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.15s;"
                  x-data="{ showNetworkModal: @entangle('showNetworkModal') }">
                 <div class="flex items-center justify-between">
                     <div>