@extends('frontend.layouts.partials.app')
@section('title', 'Quick Links')
@section('meta', 'Welcome to Goodwill Finance Pvt. Ltd.')
@section('content')

    <section class="h-[250px] p-10 text-white bg-cover bg-center"
        style="background-image: url('{{ asset('assets/img/business-hours.jpg') }}');">
    </section>

    <section class="-mt-16 mb-10 w-full flex justify-center">
        <div class="p-10 flex flex-col space-y-8 bg-white shadow-xl rounded-md w-[1116px] ">
            <div class=" text-[#004d6e] flex justify-center flex-row p-4 rounded-t-lg">
                <p class="text-4xl font-extrabold text-[#004d6e]">
                    Quick Links </p>
            </div>

            <div class="container mx-auto">
                <div class="flex justify-center">
                    <div class="w-full mx-auto">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 m-1">
                            @if (!empty($quickLinks))
                                @foreach ($quickLinks as $quick_link)
                                    <div
                                        class="h-[60px] border border-gray-300 rounded-t-lg hover:bg-gradient-to-r from-[#004d6e] to-[#00accc]">
                                        <a href="{{ $quick_link->link }}"
                                            class="text-xl font-semibold px-5 py-3 flex items-center h-full text-gray-900 hover:text-white  border-b-4 border-[#005aab] line-clamp-2">
                                            {{ $quick_link->name }}
                                        </a>
                                    </div>
                                @endforeach
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

@endsection