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

resources/css/app.css

@@ -1,3 +1,70 @@
+@import 'alerts.css';
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+/* Custom base styles */
+@layer base {
+    html {
+        scroll-behavior: smooth;
+    }
+
+    body {
+        font-family: 'Poppins', sans-serif;
+    }
+}
+
+/* Custom components */
+@layer components {
+    .nav-link {
+        @apply flex items-center gap-2 px-3 py-2 text-gray-500 transition-colors rounded-lg hover:text-primary dark:text-gray-400 dark:hover:text-primary hover:bg-gray-100 dark:hover:bg-gray-700;
+    }
+
+    .site-logo {
+        @apply text-2xl;
+    }
+
+    .menu-item {
+        @apply flex items-center gap-3 px-4 py-2 text-gray-600 transition-colors dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700;
+    }
+
+    .form-input {
+        @apply w-full px-4 py-2 text-gray-700 transition-colors bg-white border rounded-lg dark:bg-gray-800 dark:text-gray-300 border-gray-200/50 dark:border-gray-700/50 focus:border-primary dark:focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20;
+    }
+
+    .btn {
+        @apply px-4 py-2 font-semibold text-white transition-colors rounded-lg shadow-lg bg-gradient-to-r from-primary to-secondary hover:from-primary/90 hover:to-secondary/90 focus:outline-none focus:ring-2 focus:ring-primary/20;
+    }
+
+    .btn-secondary {
+        @apply text-gray-700 bg-white border dark:bg-gray-800 dark:text-white border-gray-200/50 dark:border-gray-700/50 hover:bg-gray-100 dark:hover:bg-gray-700;
+    }
+
+    .alert {
+        @apply relative px-4 py-3 mb-4 text-white rounded-lg;
+    }
+
+    .alert-success {
+        @apply bg-green-500;
+    }
+
+    .alert-error {
+        @apply bg-red-500;
+    }
+
+    .alert-warning {
+        @apply bg-yellow-500;
+    }
+
+    .alert-info {
+        @apply bg-blue-500;
+    }
+}
+
+/* Custom utilities */
+@layer utilities {
+    .text-gradient {
+        @apply text-transparent bg-clip-text bg-gradient-to-r from-primary to-secondary;
+    }
+}