feat: add x-mobile-header and x-mobile-footer components

resources/views/components/mobile-footer.blade.php

@@ -0,0 +1,26 @@
+@php
+    $tabs = [
+        ['label' => 'Prices',      'icon' => 'lucide:fuel',       'route' => 'home'],
+        ['label' => 'Alerts',      'icon' => 'lucide:bell',       'route' => null],
+        ['label' => 'Forecourts',  'icon' => 'lucide:map-pin',    'route' => null],
+        ['label' => 'Trends',      'icon' => 'lucide:trending-up','route' => null],
+    ];
+    $currentRoute = request()->routeIs('home') ? 'home' : null;
+@endphp
+
+<nav class="fixed inset-x-0 bottom-0 z-50 border-t border-[#e5ded7] bg-[#faf6f3] pb-8">
+    <div class="flex">
+        @foreach ($tabs as $tab)
+            @php
+                $isActive = $tab['route'] && $currentRoute === $tab['route'];
+                $colour = $isActive ? 'text-[#bb5b3e]' : 'text-[#89726c]';
+            @endphp
+            <div class="flex flex-1 flex-col items-center gap-1 pt-3">
+                <iconify-icon icon="{{ $tab['icon'] }}" class="text-xl {{ $colour }}"></iconify-icon>
+                <span class="text-[10px] font-bold uppercase tracking-wide {{ $colour }}">
+                    {{ $tab['label'] }}
+                </span>
+            </div>
+        @endforeach
+    </div>
+</nav>