Implement HomeController, update home route, and enhance menu components with close functionality

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

@@ -1,19 +1,19 @@
-<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>
+<button
+    wire:click="toggleTheme"
+    class="p-2 text-gray-300 transition-all duration-200 hover:text-white hover:scale-105 focus:outline-none focus:ring-2 focus:ring-primary/20 rounded-lg"
+    aria-label="Toggle dark mode"
+    title="{{ $isDark ? 'Switch to light mode' : 'Switch to dark mode' }}"
+>
+    <svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        @if($isDark)
+        <!-- Sun icon -->
+        <path d="M12 3v1m0 16v1m-8-9H3m18 0h-1m-2.293-6.293l-.707-.707M6.707 17.707l-.707.707M17.707 17.707l.707.707M6.707 6.707l-.707-.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        @else
+        <!-- Moon icon -->
+        <path d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        @endif
+    </svg>
+</button>
 
 <script>
     document.addEventListener('livewire:init', () => {