# Story 13.2: Auth Layout Split Design Update

## Story

**As a** visitor to the authentication pages
**I want to** see a visually appealing split-screen layout with the LIBRA branding
**So that** the login experience feels professional and aligned with the brand identity

## Acceptance Criteria

### AC1: Left Panel - Brand Side (Desktop)

**Given** the split layout is viewed on desktop (lg+ breakpoint)
**When** the page loads
**Then** the left panel displays:
- Full height (`h-full`)
- Dark Forest Green background (`bg-primary` #2D3624)
- LIBRA logo centered vertically and horizontally
- Logo size: Large (`size="lg"` or `size="xl"`)
- No text below logo (clean, minimal design)

### AC2: Right Panel - Form Side (Desktop)

**Given** the split layout is viewed on desktop
**When** the page loads
**Then** the right panel displays:
- Warm Cream background (`bg-background` #F4F1EA)
- Form content centered
- Language toggle in top-right corner
- Adequate padding for comfortable reading

### AC3: Mobile Layout

**Given** the split layout is viewed on mobile (below lg breakpoint)
**When** the page loads
**Then**:
- Left panel (brand side) is hidden
- Logo appears above the form (centered, size="xl")
- Form takes full width with padding
- Language toggle in top-right corner
- Background uses Warm Cream

### AC4: RTL (Arabic) Support

**Given** the user's locale is Arabic
**When** the split layout renders
**Then**:
- Layout mirrors correctly (brand panel on right, form on left)
- Language toggle appears in top-left (logical `end`)
- All text alignment respects RTL

### AC5: Language Toggle Positioning

**Given** the language toggle component
**When** displayed on the split layout
**Then**:
- Position: Fixed in top corner (`absolute end-4 top-4 z-50`)
- Uses `variant="light"` for visibility on light background
- Accessible via keyboard navigation

### AC6: Remove Inspiring Quotes

**Given** the existing split layout has inspiring quotes
**When** the layout is updated
**Then** the quotes section is removed for a cleaner, branded appearance

### AC7: Responsive Breakpoints

**Given** various screen sizes
**When** the layout responds
**Then**:
- `lg+` (≥1024px): Full split layout (50/50)
- Below `lg`: Mobile layout (form only with logo above)

## Technical Notes

### File to Modify
- `resources/views/components/layouts/auth/split.blade.php`

### Current Structure
```html
<main class="relative grid h-dvh ... lg:grid-cols-2">
    <!-- Left: Brand panel with neutral-900 bg and quotes -->
    <div class="bg-muted relative hidden h-full ... lg:flex">
        <div class="absolute inset-0 bg-neutral-900"></div>
        <!-- Logo and quotes -->
    </div>
    <!-- Right: Form -->
    <div class="w-full lg:p-8">...</div>
</main>
```

### Target Structure
```html
<main class="relative grid h-dvh ... lg:grid-cols-2">
    <!-- Left: Brand panel with primary bg -->
    <div class="relative hidden h-full flex-col items-center justify-center lg:flex bg-primary">
        <x-logo size="xl" />
    </div>
    <!-- Right: Form with pattern bg -->
    <div class="w-full bg-background lg:p-8">
        <!-- Language toggle -->
        <div class="absolute end-4 top-4 z-50">
            <x-language-toggle variant="light" />
        </div>
        <!-- Form content -->
    </div>
</main>
```

### Color Values
| Element | Color | Hex |
|---------|-------|-----|
| Left Panel Background | `bg-primary` | #2D3624 |
| Right Panel Background | `bg-background` | #F4F1EA |
| Logo | Default (adapts to dark bg) | - |

### Logo Visibility Confirmation

The existing `logo.png` asset has a transparent background and renders correctly on dark backgrounds. No additional logo variant is required.

**Verification:** Before implementing, confirm logo visibility by temporarily testing:
```html
<div class="bg-primary p-8 flex justify-center">
    <x-logo size="xl" />
</div>
```

If the logo is not visible or looks poor on Dark Forest Green (#2D3624), escalate to design team for a light variant before proceeding.

## Dev Checklist

- [ ] Update left panel background to `bg-primary`
- [ ] Center logo in left panel (remove quotes)
- [ ] Update right panel background to `bg-background`
- [ ] Position language toggle correctly
- [ ] Test desktop layout (50/50 split)
- [ ] Test mobile layout (form only)
- [ ] Test RTL mirroring
- [ ] Verify logo visibility on dark background
- [ ] Remove inspiring quotes code
- [ ] Ensure z-index layering correct

## Estimation

**Complexity:** Medium
**Risk:** Low - Layout restructuring with existing components

## Dependencies

- Story 13.1 (Language Toggle Visibility) - Can run in parallel
- Epic 12 (Brand colors defined)