<footer id="footer" class="text-white"
    style="background-image: url('https://media.danielvu.com/payment/bg_footer.gif')">
    <div class="container mx-auto px-16 pt-16">
        <div class="grid grid-cols-1 md:grid-cols-5 xl:grid-cols-7  gap-y-8 gap-x-4">
            <div class="col-span-3 pe-0 md:pe-1">
                <div class="flex">
                    <h3 class="text-2xl mb-4 text-white font-medium">
                        About
                    </h3> &nbsp;
                    <h1 class="text-2xl mb-4 text-white font-medium">
                        SN Check
                    </h1>
                </div>

                <p>
                    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Reiciendis laborum omnis tenetur hic,
                    atque blanditiis iusto similique repellat vero ratione ex numquam alias debitis sint? Veritatis
                    libero harum distinctio totam.
                </p>
                <div class="flex xl:justify-start mt-4 mb-4">
                    <a href = "{{ $cache->value('facebook') ?: '#footer' }}"
                        class="group w-9 h-9 border-2 border-gray-400 rounded-full text-center py-1  hover: hover:bg-blue-700 hover:border-blue-600">
                        <i class="ri-facebook-circle-fill  group-hover:text-white"></i>
                    </a>
                    <a href = "{{ $cache->value('twitter') ?: '#footer' }}"
                        class="group w-9 h-9 border-2 border-gray-400 rounded-full text-center py-1 ml-2  hover: hover:bg-slate-900 hover:border-neutral-900">
                        <i class="ri-twitter-x-line  group-hover:text-white"></i>
                    </a>

                    <a href = "{{ $cache->value('linkedin') ?: '#footer' }}"
                        class="group w-9 h-9 border-2 border-gray-400 rounded-full text-center py-1 ml-2  hover: hover:bg-blue-600 hover:border-blue-600">
                        <i class="ri-linkedin-line group-hover:text-white"></i>
                    </a>
                </div>
                <div class="flex">
                    <h3 class="text-2xl text-white font-medium">
                        Payment
                    </h3> &nbsp;
                    <h1 class="text-2xl text-white font-medium">
                        Accepted
                    </h1>
                </div>

                <div class="flex xl:justify-start">
                    <img src="{{ asset('img/paypal-logo.png') }}" alt="PayPal Logo" width="400px" height="100px"/>
                </div>
            </div>
            <div class="col-span-2 md:col-span-1">
                <h3 class="text-xl font-bold mb-5 text-white">My Account</h3>
                <ul>
                    @foreach (config('client.dropdown') as $route)
                        <li class="mb-3">
                            <a class="hover:underline" href="{{ route($route['route_name']) }}">
                                <span>{{ $route['label'] }}</span>
                            </a>
                        </li>
                    @endforeach
                </ul>
            </div>
            <div class="col-span-2 md:col-span-1">
                <h3 class="text-xl font-bold mb-5 text-white">Site Links</h3>
                <ul>
                    <li class="mb-3"><a href="#banner" class="hover:underline">Banner</a></li>
                    <li class="mb-3"><a href="#package" class="hover:underline">Packages</a></li>
                    <li class="mb-3"><a href="#service" class="hover:underline">Services</a></li>
                    <li class="mb-3"><a href="#contact" class="hover:underline">Contact Us</a></li>
                    <li class="mb-3"><a href="#about" class="hover:underline">About Us</a></li>
                </ul>
            </div>
            <div class="col-span-2">
                <h3 class="text-xl font-bold mb-5 text-white">Contact Us</h3>
                <ul>
                    <li class="mb-3">Email: <a href="mailto:{{ $cache->value('email') }}"
                            class="hover:underline">{{ $cache->value('email') }}</a></li>
                    <li class="mb-3">Phone: <a href="tel:{{ $cache->value('phone') }}"
                            class="hover:underline">{{ $cache->value('phone') }}</a></li>
                    <li class="mb-3">Address: <a href="#" class="hover:underline">{{ $cache->value('address') }}</a></li>
                </ul>
            </div>
        </div>
    </div>
</footer>
