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/components/navigation/index.blade.php

@@ -85,10 +85,10 @@
         $watch('slideOverOpen', value => { document.documentElement.style.overflow = value ? 'hidden' : '' });
      "
      :class="{ 
-        'shadow-lg shadow-black/5 border-neutral/80': scrolled,
-        'border-neutral': !scrolled 
+        'shadow-elevated border-primary/20 backdrop-blur-xl bg-background-secondary/70': scrolled,
+        'border-neutral bg-background-secondary': !scrolled 
      }"
-     class="w-full px-4 lg:px-8 bg-background-secondary border-b flex flex-col lg:flex-row justify-between fixed top-0 z-20 h-auto transition-all duration-300">
+     class="w-full px-4 lg:px-8 border-b flex flex-col lg:flex-row justify-between fixed top-0 z-20 h-auto transition-all duration-300">
     <div class="relative z-50 w-full h-auto">
 
         <div class="flex flex-row items-center justify-between w-full h-16">
@@ -135,6 +135,16 @@
 
                 <livewire:components.cart />
 
+                <!-- Command palette trigger (Cmd/Ctrl+K) -->
+                <button type="button"
+                        @click="$dispatch('open-command-palette')"
+                        class="hidden md:inline-flex items-center gap-2 h-10 px-3 rounded-lg text-sm text-base/70 hover:text-base hover:bg-neutral/40 border border-neutral/50 hover:border-primary/40 transition-all duration-200"
+                        aria-label="Open command palette">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="size-4" viewBox="0 0 24 24" fill="currentColor"><path d="M18.031 16.617 22.314 20.9l-1.414 1.414-4.283-4.283A8.5 8.5 0 1 1 18.03 16.617Zm-2.006-.742A6.5 6.5 0 1 0 7 9.5a6.5 6.5 0 0 0 9.025 6.375l.885.885Z"/></svg>
+                    <span class="hidden lg:inline text-xs">Search</span>
+                    <kbd class="hidden lg:inline-block text-[10px] font-semibold px-1.5 py-0.5 rounded border border-neutral/50 bg-background/50">⌘K</kbd>
+                </button>
+
                 <!-- Dark/Light mode toggle (left of user icon / login & register) -->
                 <button @click="darkMode = !darkMode" type="button"
                         class="w-10 h-10 flex items-center justify-center rounded-lg hover:bg-neutral/50 transition-colors duration-200"

themes/lucentui/views/components/navigation/sidebar-links.blade.php

@@ -37,8 +37,8 @@
             @else
                 <x-navigation.link :href="route($nav['route'], $nav['params'] ?? [])"
                     :spa="$nav['spa'] ?? true"
-                    class="flex items-center gap-3 p-3 rounded-lg transition-colors duration-200 w-full
-                                {{ $nav['active'] ? 'bg-primary/10 text-primary font-semibold' : 'hover:bg-primary/5 text-color-base' }}">
+                    class="relative flex items-center gap-3 p-3 rounded-lg transition-all duration-200 w-full
+                                {{ $nav['active'] ? 'bg-primary/10 text-primary font-semibold before:absolute before:left-0 before:top-2 before:bottom-2 before:w-[3px] before:rounded-full before:bg-gradient-to-b before:from-primary before:to-secondary' : 'hover:bg-primary/5 text-color-base' }}">
                     @isset($nav['icon'])
                         <x-dynamic-component :component="$nav['icon']"
                             class="size-5 {{ $nav['active'] ? 'text-primary' : 'text-color-muted' }}" />
@@ -98,8 +98,8 @@
             @else
                 <x-navigation.link :href="route($nav['route'], $nav['params'] ?? [])"
                     :spa="$nav['spa'] ?? true"
-                    class="flex items-center gap-3 p-3 rounded-lg transition-colors duration-200 w-full
-                                {{ $nav['active'] ? 'bg-primary/10 text-primary font-semibold' : 'hover:bg-primary/5 text-color-base' }}">
+                    class="relative flex items-center gap-3 p-3 rounded-lg transition-all duration-200 w-full
+                                {{ $nav['active'] ? 'bg-primary/10 text-primary font-semibold before:absolute before:left-0 before:top-2 before:bottom-2 before:w-[3px] before:rounded-full before:bg-gradient-to-b before:from-primary before:to-secondary' : 'hover:bg-primary/5 text-color-base' }}">
                     @isset($nav['icon'])
                         <x-dynamic-component :component="$nav['icon']"
                             class="size-5 {{ $nav['active'] ? 'text-primary' : 'text-color-muted' }}" />