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

2025-12-22 19:51:09 -05:00 · 2025-02-25 16:49:45 -05:00
parent b4462ba89e
commit 8951e59f49
14 changed files with 511 additions and 233 deletions
--- a/memory-bank/design/DesignMigration.md
+++ b/memory-bank/design/DesignMigration.md
@@ -1,129 +1,72 @@
-# Design Migration from Django to Laravel
+# Design Migration

-## Overview
-This document tracks the migration of design assets and templates from the original Django project to Laravel/Livewire implementation.
+## Header Design
+- Solid background with subtle transparency (bg-gray-900)
+- Increased height for better visibility (h-20)
+- Consistent spacing with px-6
+- Logo uses text gradient effect
+- Navigation links properly spaced with hover effects
+- Search bar integrated into header with proper styling

-## Static Assets Structure (Django)
-```
-static/
-├── css/
-│   ├── alerts.css
-│   ├── tailwind.css
-│   └── src/
-│       └── input.css
-├── images/
-│   ├── default-avatar.png
-│   ├── discord-icon.svg
-│   ├── favicon.png
-│   ├── google-icon.svg
-│   └── placeholders/
-│       ├── dark-ride.jpg
-│       ├── default-park.jpg 
-│       ├── default-ride.jpg
-│       ├── flat-ride.jpg
-│       ├── other-ride.jpg
-│       ├── roller-coaster.jpg
-│       ├── transport.jpg
-│       └── water-ride.jpg
-└── js/
-    ├── alerts.js
-    ├── alpine.min.js
-    ├── cdn.min.js
-    ├── location-autocomplete.js
-    ├── main.js
-    ├── park-map.js
-    ├── photo-gallery.js
-    └── search.js
-```
+## Menu Components

-## Primary Templates (Django)
-1. Base Templates
-   - base/base.html (Main layout template)
-   
-2. Feature-specific Templates
-   - accounts/ - User authentication and profile templates
-   - rides/ - Ride-related templates including listings and details
-   - parks/ - Park management templates
-   - companies/ - Company and manufacturer templates
-   - location/ - Location-related templates
-   - moderation/ - Content moderation templates
-   - media/ - Media management templates
+### Common Features
+- Consistent backdrop blur effect
+- Semi-transparent backgrounds (bg-gray-900/95)
+- Subtle border effects (border-gray-800/50)
+- Smooth transitions and animations
+- Click-away behavior for all dropdowns
+- Proper z-indexing and positioning

-## Migration Plan
+### User Menu
+- Larger profile picture (w-10 h-10)
+- Username display in dropdown
+- Sectioned menu items with borders
+- Consistent hover states
+- Clear visual hierarchy

-### Phase 1: Core Assets
-1. Static Assets Migration
-   - Copy and organize images in Laravel public directory
-   - Set up Tailwind CSS with proper configuration
-   - Migrate JavaScript assets to Laravel Vite setup
+### Mobile Menu
+- Full-width design
+- Proper spacing (p-6)
+- Enhanced search bar visibility
+- Smooth slide-in animation
+- Semi-transparent backdrop
+- Proper touch targets

-### Phase 2: Component Structure
-1. Blade Components
-   - Convert Django templates to Blade components
-   - Implement Livewire components for interactive features
-   - Maintain consistent naming and structure
+### Auth Menu
+- Wider dropdown (w-56)
+- Clear login/register options
+- Consistent styling with other menus
+- Proper icon alignment

-### Phase 3: Layout & Design
-1. Base Layout
-   - Implement base.blade.php mirroring Django base template
-   - Set up layout components and partials
-   - Configure asset compilation and delivery
+### Theme Toggle
+- Improved button states
+- Proper focus indicators
+- Smooth transition effects
+- Clear light/dark mode icons

-### Phase 4: Feature Templates
-1. Systematic migration of feature-specific templates:
-   - Auth & Profile views
-   - Park management views
-   - Ride management views
-   - Company management views
-   - Location components
-   - Moderation interface
-   - Media management views
+## Responsive Design
+- Mobile-first approach
+- Proper breakpoints for navigation
+- Search bar visibility management
+- Menu adaptations for different screen sizes

-## Progress Tracking
+## Color System
+- Primary: Indigo-based gradient
+- Secondary: Gray scale for UI elements
+- Proper dark mode support
+- Consistent hover states
+- Semi-transparent overlays

- [x] Phase 1: Core Assets
-  - [x] Image assets migration
-  - [x] CSS setup and migration
-  - [x] JavaScript migration
+## Typography
+- Poppins font family
+- Clear hierarchy in text sizes
+- Proper line heights
+- Consistent font weights

- [x] Phase 2: Component Structure
-  - [x] Base components
-  - [x] Interactive components
-  - [x] Form components
-
- [x] Phase 3: Layout & Design
-  - [x] Base layout
-  - [x] Navigation
-  - [x] Common elements
-
- [x] Phase 4: Feature Templates
-  - [x] Auth templates
-  - [x] Park templates
-  - [x] Ride templates
-  - [x] Company templates
-  - [x] Location templates
-  - [x] Moderation templates
-  - [x] Media templates
-
-## Technical Decisions
-
-### CSS Strategy
- Using Tailwind CSS for styling consistency
- Maintaining utility-first approach from Django project
- Reusing existing Tailwind configuration where possible
-
-### JavaScript Strategy
- Leveraging Laravel's Vite for asset compilation
- Using Alpine.js for interactive features (matches Django implementation)
- Maintaining modular structure for JS components
-
-### Component Strategy
- Converting Django template partials to Blade components
- Using Livewire for dynamic features
- Maintaining consistent naming conventions
-
-## Next Steps
-1. Begin Phase 1 with static asset migration
-2. Set up base layout structure
-3. Implement core components
-4. Migrate feature-specific templates systematically
+## Accessibility
+- Proper focus states
+- Clear hover indicators
+- Sufficient color contrast
+- Proper ARIA labels
+- Keyboard navigation support