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

@@ -2,7 +2,7 @@
     @once
         <script src="https://cdn.jsdelivr.net/npm/apexcharts" onload="window.apexChartsLoaded = true"></script>
     @endonce
-    <div class="flex flex-col gap-6" wire:init="loadInitialData">
+    <div class="flex flex-col gap-6" wire:init="loadInitialData" x-data="{ pageLoaded: false }" x-init="setTimeout(() => pageLoaded = true, 50)">
         <style>
             .formRight select {
                 background-color: hsl(var(--color-background));
@@ -20,7 +20,9 @@
             }
         </style>
         <!-- Header Section -->
-        <div class="flex flex-col gap-4">
+        <div class="flex flex-col gap-4"
+             :class="pageLoaded ? 'opacity-100 translate-y-0' : 'opacity-0 -translate-y-2'"
+             style="transition: all 0.4s ease-out;">
             <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                 <div class="flex flex-col gap-1">
                     <x-proxmox::ui.section-header 
@@ -59,8 +61,10 @@
             wire:poll.120s="stats"
             x-data="{ chartsLoaded: false }"
             @proxmox-all-stats-loaded.window="chartsLoaded = true"
-            class="relative bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl p-6 space-y-6 shadow-theme-sm overflow-hidden transition-all duration-300 ease-out"
-            :class="chartsLoaded ? 'opacity-100' : 'opacity-80'"
+            class="relative bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl p-6 space-y-6 shadow-theme-sm overflow-hidden
+                   transition-all duration-500 ease-out hover:shadow-md"
+            :class="[chartsLoaded ? 'opacity-100' : 'opacity-80', pageLoaded ? 'translate-y-0' : 'translate-y-4']"
+            style="transition: all 0.4s ease-out 0.15s;"
         >
             <div>
                 <div class="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">