complete story 9.3 with qa tests

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

@@ -1,8 +1,20 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 42" {{ $attributes }}>
-    <path 
-        fill="currentColor" 
-        fill-rule="evenodd" 
-        clip-rule="evenodd"
-        d="M17.2 5.633 8.6.855 0 5.633v26.51l16.2 9 16.2-9v-8.442l7.6-4.223V9.856l-8.6-4.777-8.6 4.777V18.3l-5.6 3.111V5.633ZM38 18.301l-5.6 3.11v-6.157l5.6-3.11V18.3Zm-1.06-7.856-5.54 3.078-5.54-3.079 5.54-3.078 5.54 3.079ZM24.8 18.3v-6.157l5.6 3.111v6.158L24.8 18.3Zm-1 1.732 5.54 3.078-13.14 7.302-5.54-3.078 13.14-7.3v-.002Zm-16.2 7.89 7.6 4.222V38.3L2 30.966V7.92l5.6 3.111v16.892ZM8.6 9.3 3.06 6.222 8.6 3.143l5.54 3.08L8.6 9.3Zm21.8 15.51-13.2 7.334V38.3l13.2-7.334v-6.156ZM9.6 11.034l5.6-3.11v14.6l-5.6 3.11v-14.6Z"
-    />
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 55" {{ $attributes }}>
+    <!-- Libra Scales of Justice Icon -->
+    <g fill="currentColor">
+        <!-- Center pillar -->
+        <rect x="22" y="15" width="6" height="35" rx="1"/>
+        <!-- Top beam -->
+        <rect x="5" y="10" width="40" height="5" rx="2"/>
+        <!-- Left scale pan -->
+        <path d="M5 18 L15 18 L12 28 Q10 32 8 28 L5 18 Z"/>
+        <ellipse cx="10" cy="28" rx="8" ry="3"/>
+        <!-- Right scale pan -->
+        <path d="M35 18 L45 18 L42 28 Q40 32 38 28 L35 18 Z"/>
+        <ellipse cx="40" cy="28" rx="8" ry="3"/>
+        <!-- Chains -->
+        <line x1="10" y1="12" x2="10" y2="18" stroke="currentColor" stroke-width="1.5"/>
+        <line x1="40" y1="12" x2="40" y2="18" stroke="currentColor" stroke-width="1.5"/>
+        <!-- Base -->
+        <rect x="15" y="48" width="20" height="4" rx="2"/>
+    </g>
 </svg>

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>

resources/views/components/layouts/app/header.blade.php

@@ -8,7 +8,7 @@
             <flux:sidebar.toggle class="lg:hidden" icon="bars-2" inset="left" />
 
             <a href="{{ route('dashboard') }}" class="ms-2 me-5 flex items-center space-x-2 rtl:space-x-reverse lg:ms-0" wire:navigate>
-                <x-app-logo />
+                <x-app-logo :showText="false" class="p-0" />
             </a>
 
             <flux:navbar class="-mb-px max-lg:hidden">
@@ -93,7 +93,7 @@
             <flux:sidebar.toggle class="lg:hidden" icon="x-mark" />
 
             <a href="{{ route('dashboard') }}" class="ms-1 flex items-center space-x-2 rtl:space-x-reverse" wire:navigate>
-                <x-app-logo />
+                <x-app-logo size="small" :showText="false" class="p-0" />
             </a>
 
             <flux:navlist variant="outline">