feat: Enhance UI components and add command palette

- Updated dropdown component styles and transitions for improved UX.
- Refined checkbox, input, radio, select, and textarea components with consistent error messaging and styling.
- Introduced a new card component for better layout options.
- Added a stat card component for displaying metrics with trends.
- Implemented a command palette for global search and navigation, accessible via Cmd/Ctrl+K.
- Enhanced modal and navigation components with new styles and transitions.
- Improved layout styles for better responsiveness and visual appeal.

themes/lucentui/views/layouts/app.blade.php

@@ -226,10 +226,11 @@
     </style>
 </head>
 
-<body class="w-full bg-background text-base min-h-screen flex flex-col antialiased" 
+<body class="w-full bg-background text-base min-h-screen flex flex-col antialiased {{ theme('background_image_url') ? '' : 'grid-bg noise-overlay' }}" 
       x-cloak 
-      x-data="{darkMode: $persist(window.matchMedia('(prefers-color-scheme: dark)').matches)}" 
-      :class="{'dark': darkMode}">
+      x-data="{darkMode: $persist(window.matchMedia('(prefers-color-scheme: dark)').matches), scrolled: false}" 
+      x-init="window.addEventListener('scroll', () => scrolled = window.scrollY > 20, { passive: true })"
+      :class="{'dark': darkMode, 'is-scrolled': scrolled}">
     
     {!! hook('body') !!}
     
@@ -273,7 +274,13 @@
         
         <div class="{{ (isset($sidebar) && $sidebar) ? 'md:ml-64 rtl:ml-0 rtl:md:mr-64' : '' }} flex min-w-0 flex-col flex-grow overflow-y-auto overflow-x-hidden">
             
-            <main class="w-full mt-24 mx-auto min-w-0 max-w-full px-4 sm:px-6 md:px-16 lg:px-16 relative z-10">
+            <main class="w-full mt-24 mx-auto min-w-0 max-w-full px-4 sm:px-6 md:px-16 lg:px-16 relative z-10 transition-opacity duration-150"
+                  x-data="{ navigating: false }"
+                  x-init="
+                    document.addEventListener('livewire:navigate', () => { navigating = true });
+                    document.addEventListener('livewire:navigated', () => { $nextTick(() => { navigating = false }) });
+                  "
+                  :class="{ 'opacity-60': navigating }">
                 {{ $slot }}
             </main>
             
@@ -287,6 +294,9 @@
         <x-impersonating />
     </div>
     
+    {{-- Global command palette (Cmd/Ctrl+K) --}}
+    <x-command-palette />
+    
     {!! hook('footer') !!}
     
     <!-- Custom JavaScript from theme settings -->
@@ -310,7 +320,6 @@
             if (isLowEnd || isSlowDevice) {
                 document.body.classList.add('low-performance');
             }
-            
             if ('IntersectionObserver' in window) {
                 const observer = new IntersectionObserver((entries) => {
                     entries.forEach(entry => {
@@ -352,5 +361,56 @@
             }
         })();
     </script>
+
+    {{-- Tilt / spotlight directive + scroll-reveal stagger indexing --}}
+    <script>
+        (function() {
+            const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+            function bindTilt(el) {
+                if (el.__tiltBound) return;
+                el.__tiltBound = true;
+                if (prefersReduced) return;
+                let raf = 0;
+                el.addEventListener('pointermove', (e) => {
+                    const r = el.getBoundingClientRect();
+                    const x = (e.clientX - r.left) / r.width;
+                    const y = (e.clientY - r.top) / r.height;
+                    if (raf) cancelAnimationFrame(raf);
+                    raf = requestAnimationFrame(() => {
+                        el.style.setProperty('--tilt-x', x.toFixed(3));
+                        el.style.setProperty('--tilt-y', y.toFixed(3));
+                        const rx = ((y - 0.5) * -4).toFixed(2);
+                        const ry = ((x - 0.5) *  4).toFixed(2);
+                        el.style.transform = `perspective(800px) rotateX(${rx}deg) rotateY(${ry}deg)`;
+                    });
+                });
+                el.addEventListener('pointerleave', () => {
+                    el.style.transform = '';
+                    el.style.setProperty('--tilt-x', '0.5');
+                    el.style.setProperty('--tilt-y', '0.5');
+                });
+            }
+
+            function indexStaggerGroups() {
+                document.querySelectorAll('[data-reveal-stagger]').forEach((group) => {
+                    const items = group.querySelectorAll('.reveal-on-scroll');
+                    items.forEach((el, i) => el.style.setProperty('--reveal-idx', i));
+                });
+            }
+
+            function init() {
+                document.querySelectorAll('[data-tilt]').forEach(bindTilt);
+                indexStaggerGroups();
+            }
+
+            if (document.readyState === 'loading') {
+                document.addEventListener('DOMContentLoaded', init);
+            } else {
+                init();
+            }
+            document.addEventListener('livewire:navigated', init);
+        })();
+    </script>
 </body>
 </html>