complete story 9.3 with qa tests

resources/views/components/app-logo.blade.php

@@ -1,8 +1,34 @@
-<div class="flex aspect-square size-8 items-center justify-center rounded-md bg-navy text-gold">
-    <svg class="size-5" viewBox="0 0 24 24" fill="currentColor">
-        <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
-    </svg>
-</div>
-<div class="ms-1 grid flex-1 text-start text-sm">
-    <span class="mb-0.5 truncate leading-tight font-semibold">Libra</span>
+@props([
+    'size' => 'default',
+    'variant' => 'full',
+    'showText' => true
+])
+
+@php
+$sizes = [
+    'small' => 'h-8 min-w-[80px]',      // Mobile minimum
+    'default' => 'h-12 min-w-[120px]',  // Desktop default
+    'large' => 'h-16 min-w-[160px]',    // Large displays
+];
+
+$variants = [
+    'full' => 'logo.svg',
+    'reversed' => 'logo-reversed.svg',
+    'mono' => 'logo-mono.svg',
+];
+
+$sizeClass = $sizes[$size] ?? $sizes['default'];
+$logoFile = $variants[$variant] ?? $variants['full'];
+@endphp
+
+<div {{ $attributes->merge(['class' => 'flex items-center gap-2 p-5']) }}>
+    <img
+        src="{{ asset('images/' . $logoFile) }}"
+        alt="{{ __('Libra Law Firm') }}"
+        class="{{ $sizeClass }} w-auto object-contain"
+        onerror="this.onerror=null; this.src='{{ asset('images/logo.png') }}';"
+    />
+    @if($showText)
+        <span class="font-semibold text-sm truncate">{{ __('Libra Law Firm') }}</span>
+    @endif
 </div>