# Design Migration from Django to Laravel

## Overview
This document tracks the migration of design assets and templates from the original Django project to Laravel/Livewire implementation.

## 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
```

## 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

## Migration Plan

### 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

### Phase 2: Component Structure
1. Blade Components
   - Convert Django templates to Blade components
   - Implement Livewire components for interactive features
   - Maintain consistent naming and structure

### 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

### 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

## Progress Tracking

- [x] Phase 1: Core Assets
  - [x] Image assets migration
  - [x] CSS setup and migration
  - [x] JavaScript migration

- [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