created epic 13 make a better login page design

2026-01-04 02:20:00 +02:00
parent 082545032a
commit e557fb1104
8 changed files with 973 additions and 1 deletions
@@ -0,0 +1,148 @@
+# Story 13.3: Subtle Background Pattern Implementation
+
+## Story
+
+**As a** visitor to the authentication pages
+**I want to** see a subtle, elegant background pattern on the form side
+**So that** the page feels polished and professionally designed
+
+## Acceptance Criteria
+
+### AC1: Create SVG Pattern Asset
+
+**Given** the need for a subtle background pattern
+**When** the pattern is created
+**Then**:
+- SVG format for scalability and performance
+- Uses brand color (Warm Gold #A68966) at 5-8% opacity
+- Pattern type: Geometric or botanical (wheat/leaf motif)
+- Seamlessly tileable
+- File size under 5KB for performance
+
+### AC2: Pattern Placement
+
+**Given** the SVG pattern is created
+**When** applied to the auth layout
+**Then**:
+- Pattern appears on the form side (right panel desktop, full background mobile)
+- Pattern overlays the Warm Cream background
+- Pattern is fixed/static (doesn't scroll with content)
+- Pattern doesn't interfere with form readability
+
+### AC3: Pattern Opacity
+
+**Given** readability requirements
+**When** the pattern is displayed
+**Then**:
+- Opacity is subtle (5-8%)
+- Text remains clearly readable
+- Pattern adds visual interest without distraction
+
+### AC4: CSS Implementation
+
+**Given** the pattern asset
+**When** integrated into CSS
+**Then**:
+- Applied via `background-image` or pseudo-element
+- Uses `background-repeat: repeat` for tiling
+- Background is fixed or positioned appropriately
+- Can be easily disabled if needed
+
+### AC5: Performance Consideration
+
+**Given** page load performance
+**When** the pattern loads
+**Then**:
+- Pattern is inlined or loaded efficiently
+- No noticeable delay in page rendering
+- Pattern works without JavaScript
+
+### AC6: Mobile Compatibility
+
+**Given** mobile viewport
+**When** pattern is displayed
+**Then**:
+- Pattern scales appropriately
+- No horizontal scrolling caused by pattern
+- Pattern remains subtle on smaller screens
+
+## Technical Notes
+
+### Pattern Options
+
+**Option A: Geometric (Recommended)**
+- Simple diagonal lines or dots
+- Clean, modern aesthetic
+- Easier to create and maintain
+
+**Option B: Botanical**
+- Wheat/leaf silhouettes
+- Aligns with LIBRA brand identity
+- More complex but more unique
+
+### SVG Pattern Example (Geometric)
+```svg
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20">
+  <circle cx="2" cy="2" r="1" fill="#A68966" fill-opacity="0.06"/>
+</svg>
+```
+
+### CSS Implementation Options
+
+**Option 1: Inline SVG in CSS**
+```css
+.auth-pattern {
+    background-image: url("data:image/svg+xml,...");
+    background-repeat: repeat;
+}
+```
+
+**Option 2: Pseudo-element Overlay**
+```css
+.auth-form-side::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background-image: url('/images/pattern.svg');
+    background-repeat: repeat;
+    opacity: 0.06;
+    pointer-events: none;
+}
+```
+
+**Option 3: Tailwind Arbitrary Value**
+```html
+<div class="bg-[url('/images/pattern.svg')]">
+```
+
+### Files to Create/Modify
+- `public/images/auth-pattern.svg` (new) OR inline in CSS
+- `resources/css/app.css` (if adding pattern class)
+- `resources/views/components/layouts/auth/split.blade.php` (apply pattern)
+
+### Pattern Design Guidelines
+- Color: Warm Gold (#A68966)
+- Opacity: 5-8% (0.05-0.08)
+- Size: 20-40px tiles for subtle effect
+- Style: Minimalist, professional
+
+## Dev Checklist
+
+- [ ] Design/select pattern style (geometric vs botanical)
+- [ ] Create SVG pattern file
+- [ ] Optimize SVG for file size
+- [ ] Add pattern to auth layout CSS
+- [ ] Test pattern visibility at various screen sizes
+- [ ] Verify text readability over pattern
+- [ ] Test in both Arabic and English
+- [ ] Verify no horizontal scroll issues
+- [ ] Check pattern on high-DPI displays
+
+## Estimation
+
+**Complexity:** Medium
+**Risk:** Low - Decorative enhancement only
+
+## Dependencies
+
+- Story 13.2 (Auth Split Layout) - Must be completed first