77 lines
1.5 KiB
Markdown
77 lines
1.5 KiB
Markdown
# Story 9.3: Logo Integration
|
|
|
|
## Epic Reference
|
|
**Epic 9:** Design & Branding Implementation
|
|
|
|
## User Story
|
|
As a **visitor**,
|
|
I want **to see the Libra scales logo prominently displayed**,
|
|
So that **I recognize the firm's branding**.
|
|
|
|
## Acceptance Criteria
|
|
|
|
### Logo Placement
|
|
- [ ] Navigation: Top left (desktop), centered (mobile)
|
|
- [ ] Footer: Smaller version
|
|
- [ ] Email templates: Header
|
|
- [ ] PDF exports: Header
|
|
|
|
### Logo Specifications
|
|
- [ ] Minimum size: 120px (desktop), 80px (mobile)
|
|
- [ ] Clear space: 20px padding minimum
|
|
|
|
### Format Support
|
|
- [ ] SVG primary (scalable)
|
|
- [ ] PNG fallback
|
|
|
|
### Color Variations
|
|
- [ ] Full color (gold on navy)
|
|
- [ ] Reversed (navy on light)
|
|
- [ ] Monochrome gold
|
|
|
|
### Features
|
|
- [ ] Responsive sizing
|
|
- [ ] Accessible alt text
|
|
|
|
## Technical Notes
|
|
|
|
```blade
|
|
<!-- resources/views/components/logo.blade.php -->
|
|
@props([
|
|
'size' => 'default',
|
|
'variant' => 'full'
|
|
])
|
|
|
|
@php
|
|
$sizes = [
|
|
'small' => 'h-8',
|
|
'default' => 'h-12',
|
|
'large' => 'h-16',
|
|
];
|
|
|
|
$variants = [
|
|
'full' => 'logo.svg',
|
|
'reversed' => 'logo-reversed.svg',
|
|
'mono' => 'logo-mono.svg',
|
|
];
|
|
@endphp
|
|
|
|
<img
|
|
src="{{ asset('images/' . $variants[$variant]) }}"
|
|
alt="{{ __('Libra Law Firm') }}"
|
|
{{ $attributes->merge(['class' => $sizes[$size]]) }}
|
|
/>
|
|
```
|
|
|
|
## Definition of Done
|
|
- [ ] Logo displays in navigation
|
|
- [ ] Logo displays in footer
|
|
- [ ] Logo in email templates
|
|
- [ ] Responsive sizing works
|
|
- [ ] All color variants available
|
|
- [ ] Alt text correct
|
|
- [ ] Tests pass
|
|
|
|
## Estimation
|
|
**Complexity:** Low | **Effort:** 2 hours
|