4.6 KiB

Raw Blame History

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

<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

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

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

4.6 KiB Raw Blame History