# Login Page Design - shadcn-vue Login01 Style

This document describes the new login and registration page design based on the shadcn-vue Login01 block pattern.

## Design Overview

The new login and registration pages are **standalone pages** that appear without any sidebar or header layout. They feature a modern split-screen layout that provides both functionality and visual appeal:

### Layout Structure

1. **Left Side - Form Area**
   - Clean, centered form with proper spacing
   - Consistent with shadcn-vue design patterns
   - Responsive design that stacks on mobile

2. **Right Side - Branding/Information Area**
   - VFX Project Management branding
   - Feature highlights with icons
   - Hidden on mobile devices (lg:block)

## Key Features

### Login Page (`/login`)

- **Split Layout**: Form on left, branding on right
- **Google OAuth Ready**: Placeholder button for future Google integration
- **Forgot Password**: Link placeholder for future implementation
- **Responsive**: Mobile-first design that adapts to screen size
- **Accessibility**: Proper labels, focus states, and keyboard navigation

### Register Page (`/register`)

- **Consistent Design**: Matches login page layout
- **Form Validation**: Password confirmation and form validation
- **Success Messaging**: Clear feedback for successful registration
- **Admin Approval Notice**: Informs users about approval process

## Visual Elements

### Branding Section

- **Logo**: VFX-themed icon in primary color
- **Title**: "VFX Project Management"
- **Tagline**: Descriptive subtitle
- **Feature List**: Key benefits with icons

### Feature Icons

- **Project Management**: Checklist icon
- **Team Collaboration**: Users icon  
- **Progress Tracking**: Bar chart icon
- **File Security**: Lock icon
- **Fast Workflow**: Lightning icon
- **Professional Tools**: Clipboard icon
- **Creative Community**: Heart icon

## Technical Implementation

### Layout Logic

The application uses conditional rendering in `App.vue` to determine when to show the main layout:

- **Authentication Pages**: Login and register pages are shown standalone without sidebar/header
- **Protected Pages**: Dashboard and other pages show the full layout with sidebar and header
- **Route Detection**: Uses `route.meta.requiresGuest` and route names to identify auth pages

### Components Used

- `Button` - Primary and outline variants
- `Input` - Email and password fields
- `Label` - Form field labels
- `Loader2` - Loading spinner from lucide-vue-next

### Responsive Breakpoints

- **Mobile**: Single column, form only, full screen height
- **Large (lg)**: Two-column grid layout, full screen height
- **Full Screen**: Uses `min-h-screen` for complete viewport coverage

### Color Scheme

- Uses CSS custom properties for theming
- `bg-muted` for right panel background
- `text-muted-foreground` for secondary text
- `text-primary` for accent elements

## Future Enhancements

### Planned Features

1. **Google OAuth Integration**
   - Complete OAuth flow implementation
   - Social login buttons functionality

2. **Forgot Password**
   - Password reset email flow
   - Reset password form

3. **Enhanced Validation**
   - Real-time form validation
   - Password strength indicator

4. **Animations**
   - Smooth transitions
   - Loading states
   - Form submission feedback

### Accessibility Improvements

- Screen reader optimization
- High contrast mode support
- Keyboard navigation enhancements
- Focus management

## Usage

The new login pages are automatically used when users navigate to:

- `/login` - Main login page
- `/register` - User registration page

Both pages integrate seamlessly with the existing authentication system and maintain all current functionality while providing an improved user experience.

## Browser Support

- Modern browsers with CSS Grid support
- Responsive design for mobile devices
- Progressive enhancement for older browsers

The design follows modern web standards and provides a professional, trustworthy appearance that reflects the quality of the VFX Project Management System.