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/boot-order.blade.php

@@ -35,8 +35,12 @@
             }
         }
     </style>
-    <div class="space-y-4 lg:space-y-6 px-2 sm:px-0 overflow-x-hidden">
-        <div class="bg-info/10 border border-info/30 rounded-lg p-3 lg:p-4"
+    <div class="space-y-4 lg:space-y-6 px-2 sm:px-0 overflow-x-hidden"
+         x-data="{ pageLoaded: false }"
+         x-init="setTimeout(() => pageLoaded = true, 50)">
+        <div class="bg-info/10 border border-info/30 rounded-lg p-3 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('boot-order-notice-collapsed') === 'true',
                  toggle() {
@@ -71,7 +75,9 @@
             </div>
         </div>
 
-        <div class="flex flex-col gap-2">
+        <div class="flex flex-col gap-2"
+             :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 gap-2 min-w-0">
                 <h2 class="text-lg sm:text-xl font-semibold break-words">Boot Order</h2>
                 <div class="relative" x-data="{ open: false }" x-cloak>