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>

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

@@ -0,0 +1,17 @@
+<header class="fixed inset-x-0 top-0 z-50 shrink-0 border-b border-[#e5ded7] bg-[#faf6f3] px-5 pb-4 pt-14 shadow-sm flex items-center justify-between">
+    <div class="flex items-center gap-2.5">
+        <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-[#bb5b3e] shadow-md">
+            <iconify-icon icon="lucide:fuel" class="text-xl text-white"></iconify-icon>
+        </div>
+        <span class="text-2xl font-black tracking-tighter text-[#bb5b3e]">FuelAlert</span>
+    </div>
+    @auth
+        <a href="{{ route('dashboard') }}" class="flex h-10 w-10 items-center justify-center rounded-full border border-[#e5ded7] bg-[#f5ede5]">
+            <iconify-icon icon="lucide:user" class="text-lg text-[#89726c]"></iconify-icon>
+        </a>
+    @else
+        <a href="{{ route('login') }}" class="flex h-10 w-10 items-center justify-center rounded-full border border-[#e5ded7] bg-[#f5ede5]">
+            <iconify-icon icon="lucide:user" class="text-lg text-[#89726c]"></iconify-icon>
+        </a>
+    @endauth
+</header>