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

memory-bank/design/BaseLayout.md

@@ -0,0 +1,127 @@
+# Base Layout Implementation
+
+## Overview
+The base layout has been migrated from Django to Laravel while maintaining design parity and functionality. The implementation uses Laravel's Blade templating system and leverages Laravel's built-in features.
+
+## Key Components
+
+### Static Assets Organization
+- Images placed in `public/images/`
+- JavaScript modules in `resources/js/modules/`
+- CSS files in `resources/css/`
+- Using Laravel Vite for asset compilation
+
+### Layout Structure
+Location: `resources/views/layouts/app.blade.php`
+
+### Key Changes from Django Implementation
+
+1. Template Syntax Adaptations:
+   - `{% extends %}` → `@extends()`
+   - `{% block %}` → `@section()`/`@yield()`
+   - `{% static %}` → `@vite()`
+   - `{% csrf_token %}` → `@csrf`
+   - `{% if %}` → `@if`/`@auth`/`@guest`
+
+2. Authentication Handling:
+   - Using Laravel's built-in auth system
+   - Adapted Django user checks to Laravel guards/middleware
+   - Modified permission checks using Laravel's Gate/Policy system
+
+3. Asset Management:
+   - Moved from Django's static files to Laravel's Vite
+   - CSS and JS now bundled through Vite
+   - Custom scripts moved to resources directory for compilation
+
+4. Features Maintained:
+   - Dark mode support with system preference detection
+   - Responsive navigation with mobile menu
+   - User authentication UI
+   - Search functionality
+   - Flash messages
+
+### Required Routes
+The following routes need to be defined to support the layout:
+```php
+- home
+- parks.index
+- rides.index
+- search
+- moderation.dashboard
+- profile.show
+- settings
+- admin.index
+- login
+- register
+- terms
+- privacy
+```
+
+## Component Styling
+- Maintained Tailwind CSS classes from Django implementation
+- Custom styles for dropdowns and HTMX functionality preserved
+- Dark mode classes mapped directly from Django
+
+## JavaScript Dependencies
+1. Core Libraries:
+   - Alpine.js (via Vite)
+   - HTMX (via CDN)
+   - Font Awesome (via CDN)
+
+2. Custom Modules (migrated to resources/js/modules):
+   - alerts.js
+   - location-autocomplete.js
+   - main.js
+   - park-map.js
+   - photo-gallery.js
+   - search.js
+
+## Next Steps
+
+1. Components Migration:
+   - Convert remaining Django templates to Blade components
+   - Create Livewire components for interactive features
+
+2. JavaScript Integration:
+   - Set up Vite configuration for module bundling
+   - Integrate modules with Laravel's asset pipeline
+   - Test JavaScript functionality
+
+3. Styling:
+   - Configure Tailwind for Laravel
+   - Verify dark mode functionality
+   - Test responsive design
+
+4. Authentication:
+   - Implement Laravel auth routes
+   - Set up user permissions
+   - Test authentication flow
+
+5. Testing:
+   - Verify all interactive features
+   - Test responsive design
+   - Ensure dark mode works correctly
+   - Validate authentication flows
+
+## Technical Notes
+
+### Performance Considerations
+1. Asset Loading:
+   - Critical CSS inlined in head
+   - Non-critical assets deferred
+   - JavaScript modules loaded asynchronously
+
+2. Optimization:
+   - Images placed in public directory for direct serving
+   - CSS/JS bundled and minified via Vite
+   - Caching headers maintained
+
+### Browser Compatibility
+- Maintains support for modern browsers
+- Dark mode detection uses modern APIs
+- Fallbacks in place for older browsers
+
+### Security
+- CSRF protection implemented
+- XSS prevention through Laravel's security features
+- Content Security Policy considerations documented