libra/docs/stories/story-13.2-auth-split-layout.md

# 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

- [x] Update left panel background to `bg-primary`
- [x] Center logo in left panel (remove quotes)
- [x] Update right panel background to `bg-background`
- [x] Position language toggle correctly
- [x] Test desktop layout (50/50 split)
- [x] Test mobile layout (form only)
- [x] Test RTL mirroring
- [x] Verify logo visibility on dark background
- [x] Remove inspiring quotes code
- [x] 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)

---

## Dev Agent Record

### Status
Ready for Review

### Agent Model Used
Claude Opus 4.5 (claude-opus-4-5-20251101)

### Completion Notes
- Updated auth split layout to use brand colors (bg-primary for left panel, bg-background for right panel)
- Removed inspiring quotes and neutral-900 background overlay
- Centered logo in left panel using flex (items-center justify-center)
- Moved language toggle inside right panel with absolute positioning (end-4 top-4 z-50)
- Mobile layout shows logo above form (lg:hidden), desktop shows 50/50 split (lg:grid-cols-2)
- RTL support maintained via `end-4` positioning and existing HTML dir attribute
- All existing auth tests pass (22 tests)
- Auth split layout accessibility test passes (skip link, main landmark)

### File List
| File | Action |
|------|--------|
| `resources/views/components/layouts/auth/split.blade.php` | Modified |
| `resources/views/components/layouts/auth.blade.php` | Modified |
| `resources/views/components/logo.blade.php` | Modified |

### Change Log
| Change | Reason |
|--------|--------|
| Changed default auth layout from `simple` to `split` | Auth pages should use split layout per story |
| Changed body bg from `bg-white dark:bg-linear-to-b...` to `bg-background` | Match brand Warm Cream background |
| Replaced left panel div with simplified centered logo layout | AC1 - Clean branded appearance |
| Removed `<div class="absolute inset-0 bg-neutral-900">` overlay | AC6 - Clean minimal design |
| Removed `@php [$message, $author]...` quotes code | AC6 - Remove inspiring quotes |
| Removed blockquote quotes section | AC6 - Clean branded appearance |
| Added `bg-primary` to left panel | AC1 - Dark Forest Green background |
| Added `full` size to logo component (`h-[50vh]`) | User request for large half-screen logo |
| Changed left panel logo from `size="xl"` to `size="full"` | User request for large half-screen logo |
| Added `bg-background` to right panel | AC2 - Warm Cream background |
| Moved language toggle inside right panel | AC5 - Correct positioning |
| Added `h-full` and centering classes to form container | AC2 - Form content centered |