1.5 KiB

Raw Blame History

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

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

1.5 KiB Raw Blame History