<div data-onscrollclass="translate-y-full" class="fixed inset-x-0 bottom-0 z-20 bg-muted duration-300 lg:hidden">
    <div class="container flex items-center text-sm">
        <div class="w-1/4 border-b-2 border-primary py-1 font-medium text-primary">
            <a href="{{ route('home') }}" class="flex flex-col items-center justify-center">
                <i class="i-solar-home-smile-linear size-6 items-center justify-center"></i>
                <p class="pt-2 text-xs xs:text-sm">
                    {{ __("Home") }}
                </p>
            </a>
        </div>
        <div class="w-1/4 py-1">
            <a href="{{ route('shop') }}" class="flex flex-col items-center justify-center">
                <i class="i-lucide-store size-6"></i>
                <p class="pt-2 text-xs xs:text-sm">{{ __("Shop") }}</p>
            </a>
        </div>
        <div class="w-1/4 py-1">
            <a href="{{ route('cart.index') }}" class="flex flex-col items-center justify-center">
                <i class="i-lucide-shopping-cart size-6"></i>
                <p class="pt-2 text-xs xs:text-sm">
                    {{ __("cart") }}
                </p>
            </a>
        </div>
        <div class="w-1/4 py-1">
            <a href="{{ route('faq.home') }}" class="flex flex-col items-center justify-center">
                <i class="i-solar-question-square-linear size-8"></i>
                <p class="pt-2 text-xs xs:text-sm">
                    {{ __("FAQ") }}
                </p>
            </a>
        </div>
        <div class="w-1/4 py-1">
            <a href="{{ route('user.dashboard') }}" class="flex flex-col items-center justify-center">
                <i class="i-lucide-user-round size-6"></i>
                <p class="pt-2 text-xs xs:text-sm">
                    {{ __("Profile") }}
                </p>
            </a>
        </div>
    </div>
</div>
