    <!-- Header -->
    <header class="bg-white text-gray-800 p-4 flex flex-col md:flex-row justify-between items-center border-b gap-4">
        <div class="text-3xl font-bold">
            <a href="{{ route('home') }}"><img src="{{ asset('frontend/assets/images/newtech.png') }}"
                    alt="NewTech Mobile" class="h-20"></a>
        </div>
        <div class="flex items-center space-x-4 text-sm">
            @auth
                <a href="{{ route('dashboard') }}" class="text-gray-600 hover:text-blue-600"><i
                        class="fas fa-user mr-1"></i>{{ Auth::user()->name }}</a>
                <a href="{{ route('logout') }}" class="text-gray-600 hover:text-blue-600"
                    onclick="event.preventDefault(); document.getElementById('logout-form').submit();"><i
                        class="fas fa-sign-out-alt mr-1"></i>Logout</a>
                <form id="logout-form" action="{{ route('logout') }}" method="POST" class="hidden">
                    @csrf
                </form>
            @else
                <a href="{{ route('login') }}" class="text-gray-600 hover:text-blue-600"><i
                        class="fas fa-user mr-1"></i>Sign in</a>
                <a href="{{ route('register') }}" class="text-gray-600 hover:text-blue-600"><i
                        class="fas fa-user-plus mr-1"></i>Join</a>
            @endauth
        </div>
    </header>
