Add placeholder images, enhance alert styles, and implement theme toggle component with dark mode support

resources/views/livewire/auth-menu-component.blade.php

@@ -0,0 +1,34 @@
+<div class="relative">
+    <div
+        wire:click="toggle"
+        class="flex items-center justify-center w-8 h-8 text-gray-500 transition-transform rounded-full cursor-pointer hover:text-primary dark:text-gray-400 dark:hover:text-primary hover:scale-105"
+    >
+        <i class="text-xl fas fa-user"></i>
+    </div>
+
+    <!-- Auth Menu -->
+    <div
+        wire:model="isOpen"
+        class="bg-white dropdown-menu dark:bg-gray-800"
+        style="display: {{ $isOpen ? 'block' : 'none' }}"
+    >
+        <div
+            hx-get="{{ route('login') }}"
+            hx-target="body"
+            hx-swap="beforeend"
+            class="cursor-pointer menu-item"
+        >
+            <i class="w-5 fas fa-sign-in-alt"></i>
+            <span>Login</span>
+        </div>
+        <div
+            hx-get="{{ route('register') }}"
+            hx-target="body"
+            hx-swap="beforeend"
+            class="cursor-pointer menu-item"
+        >
+            <i class="w-5 fas fa-user-plus"></i>
+            <span>Register</span>
+        </div>
+    </div>
+</div>

resources/views/livewire/counter.blade.php

@@ -1,7 +1,8 @@
-<div>
-    <h1>{{ $count }}</h1>
- 
-    <button wire:click="increment">+</button>
- 
-    <button wire:click="decrement">-</button>
+<div class="flex flex-col items-center justify-center p-6 space-y-4">
+    <h1 class="text-4xl font-bold">{{ $count }}</h1>
+
+    <div class="flex space-x-4">
+        <button wire:click="increment" class="px-4 py-2 text-white bg-blue-500 rounded hover:bg-blue-600">+</button>
+        <button wire:click="decrement" class="px-4 py-2 text-white bg-red-500 rounded hover:bg-red-600">-</button>
+    </div>
 </div>

resources/views/livewire/mobile-menu-component.blade.php

@@ -0,0 +1,39 @@
+<div>
+    <button
+        wire:click="toggle"
+        class="p-2 text-gray-500 rounded-lg lg:hidden hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-gray-400"
+        aria-label="Toggle mobile menu"
+        aria-expanded="{{ $isOpen }}"
+    >
+        <i class="text-2xl fas {{ $isOpen ? 'fa-times' : 'fa-bars' }}"></i>
+    </button>
+
+    <!-- Mobile Menu -->
+    <div
+        wire:model="isOpen"
+        class="absolute left-0 right-0 w-full p-4 mt-2 space-y-4 bg-white border-b dark:bg-gray-800 dark:border-gray-700"
+        style="display: {{ $isOpen ? 'block' : 'none' }}"
+    >
+        <!-- Search (Mobile) -->
+        <form action="{{ route('search') }}" method="get" class="mb-4">
+            <input
+                type="text"
+                name="q"
+                placeholder="Search parks and rides..."
+                class="form-input"
+            />
+        </form>
+
+        <!-- Mobile Navigation Links -->
+        <nav class="space-y-2">
+            <a href="{{ route('parks.index') }}" class="block nav-link">
+                <i class="fas fa-map-marker-alt"></i>
+                <span>Parks</span>
+            </a>
+            <a href="{{ route('rides.index') }}" class="block nav-link">
+                <i class="fas fa-rocket"></i>
+                <span>Rides</span>
+            </a>
+        </nav>
+    </div>
+</div>

resources/views/livewire/theme-toggle-component.blade.php

@@ -0,0 +1,28 @@
+<label for="theme-toggle" class="cursor-pointer">
+    <input 
+        type="checkbox" 
+        id="theme-toggle" 
+        class="hidden" 
+        wire:model.live="isDark"
+        wire:change="toggleTheme"
+    >
+    <div
+        class="inline-flex items-center justify-center p-2 text-gray-500 transition-colors hover:text-primary dark:text-gray-400 dark:hover:text-primary theme-toggle-btn"
+        role="button"
+        aria-label="Toggle dark mode"
+    >
+        <i class="text-xl fas {{ $isDark ? 'fa-sun' : 'fa-moon' }}"></i>
+    </div>
+</label>
+
+<script>
+    document.addEventListener('livewire:init', () => {
+        Livewire.on('theme-changed', ({ theme }) => {
+            if (theme === 'dark') {
+                document.documentElement.classList.add('dark');
+            } else {
+                document.documentElement.classList.remove('dark');
+            }
+        });
+    });
+</script>

resources/views/livewire/user-menu-component.blade.php

@@ -0,0 +1,47 @@
+<div class="relative">
+    <!-- Profile Picture Button -->
+    @if(auth()->user()->profile?->avatar)
+    <img
+        wire:click="toggle"
+        src="{{ auth()->user()->profile->avatar }}"
+        alt="{{ auth()->user()->username }}"
+        class="w-8 h-8 transition-transform rounded-full cursor-pointer ring-2 ring-primary/20 hover:scale-105"
+    />
+    @else
+    <div
+        wire:click="toggle"
+        class="flex items-center justify-center w-8 h-8 text-white transition-transform rounded-full cursor-pointer bg-gradient-to-br from-primary to-secondary hover:scale-105"
+    >
+        {{ ucfirst(auth()->user()->username[0]) }}
+    </div>
+    @endif
+
+    <!-- Dropdown Menu -->
+    <div
+        wire:model="isOpen"
+        class="bg-white dropdown-menu dark:bg-gray-800"
+        style="display: {{ $isOpen ? 'block' : 'none' }}"
+    >
+        <a href="{{ route('profile.show', auth()->user()->username) }}" class="menu-item">
+            <i class="w-5 fas fa-user"></i>
+            <span>Profile</span>
+        </a>
+        <a href="{{ route('settings') }}" class="menu-item">
+            <i class="w-5 fas fa-cog"></i>
+            <span>Settings</span>
+        </a>
+        @if(auth()->user()->can('access-admin'))
+        <a href="{{ route('admin.index') }}" class="menu-item">
+            <i class="w-5 fas fa-shield-alt"></i>
+            <span>Admin</span>
+        </a>
+        @endif
+        <form method="POST" action="{{ route('logout') }}">
+            @csrf
+            <button type="submit" class="w-full menu-item">
+                <i class="w-5 fas fa-sign-out-alt"></i>
+                <span>Logout</span>
+            </button>
+        </form>
+    </div>
+</div>