@extends('frontend.layouts.partials.app')
@section('title', 'Rate')
@section('meta', 'Welcome to Goodwill Finance Pvt. Ltd.')
@section('content')
    <section>
        <div class="flex top-0">
            <img src="{{ asset('assets/img/year.png') }}"  class="w-full max-h-screen lg:h-[400px] object-cover" alt="" />
        </div>
    </section>

    <section>
        <div class="pt-8 px-12 flex justify-center">
            <div class="flex flex-col space-y-5 items-center">
                <p class="uppercase text-xl text-[#004d6e] font-semibold">
                    what we do
                </p>
                <p class="text-xl md:text-2xl lg:text-4xl font-extrabold text-[#004d6e]">
                    Our Expertize & Rates
                </p>

            </div>
        </div>
        {{--
        <div class="px-12 pt-24 mb-12">
            <div class="grid gap-6 grid-cols-1 lg:grid-cols-3">
                @forelse ($rates as $rate)
                    <div class="w-full flex flex-col space-y-3 items-center">
                        <a href="{{ route('rate.detail', $rate->slug) }}">
                            <div class="m-8 bg-white shadow-lg hover:shadow-2xl hover:scale-105 transition-transform ease-in-out rounded-xl p-6 space-y-3 relative overflow-hidden hover:bg-[#FFFDF7] flex flex-col items-center"
                                style="max-height: 312px;">
                                <div class="w-24 h-24 bg-brandBlue rounded-full absolute -right-5 -top-7">
                                    <div class="absolute bottom-6 left-7 text-white text-2xl">
                                        <img src="{{ asset('assets/img/small-logo.png') }}" class="w-10" alt="">
                                    </div>
                                </div>
                                <div class="fill-violet-500 w-12">
                                    <img src="{{ asset('storage/' . $rate->photo) }}" class="w-16 h-16" alt="Rates" />
                                </div>
                                <h1 class="font-bold text-xl text-center">{{ $rate->name }}</h1>
                                <div class="text-sm text-zinc-500 line-clamp-6 text-ellipsis text-justify"
                                    style="margin: 4px; overflow: hidden;">
                                    {!! $rate->description !!}
                                </div>
                            </div>
                        </a>
                    </div>
                @empty
                    <h3 class="text-center items-center justify-center">No details available</h3>
                @endforelse
            </div>
        </div> --}}

        <div class="px-12 pt-24 mb-12">
            <div class="grid gap-6 grid-cols-1 lg:grid-cols-3">
                <div class="w-full flex flex-col space-y-3 items-center">
                    <a href="/rate-interest-rate">
                        <div class="m-8 bg-white shadow-lg hover:shadow-2xl hover:scale-105 transition-transform ease-in-out rounded-xl p-6 space-y-3 relative overflow-hidden hover:bg-[#FFFDF7] flex flex-col items-center"
                            style="max-height: 312px;">
                            <div class="w-24 h-24 bg-brandBlue rounded-full absolute -right-5 -top-7">
                                <div class="absolute bottom-6 left-7 text-white text-2xl">
                                    <img src="{{ asset('assets/img/small-logo.png') }}" class="w-10" alt="">
                                </div>
                            </div>
                            <div class="fill-violet-500 w-12">
                                <img src="{{ asset('assets/img/rate1.png') }}" class="w-16 h-16" alt="Rates" />
                            </div>
                            <h1 class="font-bold text-xl text-center">Intrest Rate</h1>
                            <div class="text-sm text-zinc-500 line-clamp-6 text-ellipsis text-justify"
                                style="margin: 4px; overflow: hidden;">
                                We, at Goodwill, give utmost priority to our customer’s convenience. Keeping this in mind we
                                have started the Interest Rate to provide our customer with flexibility to transact from any
                                branch of our company. This is applicable to our current branch as well as the array of
                                branches we would be opening in near future.
                            </div>
                        </div>
                    </a>
                </div>
                <div class="w-full flex flex-col space-y-3 items-center">
                    <a href="rate-standard-tarif">
                        <div class="m-8 bg-white shadow-lg hover:shadow-2xl hover:scale-105 transition-transform ease-in-out rounded-xl p-6 space-y-3 relative overflow-hidden hover:bg-[#FFFDF7] flex flex-col items-center"
                            style="max-height: 312px;">
                            <div class="w-24 h-24 bg-brandBlue rounded-full absolute -right-5 -top-7">
                                <div class="absolute bottom-6 left-7 text-white text-2xl">
                                    <img src="{{ asset('assets/img/small-logo.png') }}" class="w-10" alt="">
                                </div>
                            </div>
                            <div class="fill-violet-500 w-12">
                                <img src="{{ asset('assets/img/rate2.png') }}" class="w-16 h-16" alt="Rates" />
                            </div>
                            <h1 class="font-bold text-xl text-center">Standard Tarrif</h1>
                            <div class="text-sm text-zinc-500 line-clamp-6 text-ellipsis text-justify"
                                style="margin: 4px; overflow: hidden;">
                                We, at Goodwill, give utmost priority to our customer’s convenience. Keeping this in mind we
                                have started the Standard Tariff to provide our customer with flexibility to transact from
                                any branch of our company. This is applicable to our current branch as well as the array of
                                branches we would be opening in near future.
                            </div>
                        </div>
                    </a>
                </div>
                <div class="w-full flex flex-col space-y-3 items-center">
                    <a href="rate-base-rate-and-spread-rate">
                        <div class="m-8 bg-white shadow-lg hover:shadow-2xl hover:scale-105 transition-transform ease-in-out rounded-xl p-6 space-y-3 relative overflow-hidden hover:bg-[#FFFDF7] flex flex-col items-center"
                            style="max-height: 312px;">
                            <div class="w-24 h-24 bg-brandBlue rounded-full absolute -right-5 -top-7">
                                <div class="absolute bottom-6 left-7 text-white text-2xl">
                                    <img src="{{ asset('assets/img/small-logo.png') }}" class="w-10" alt="">
                                </div>
                            </div>
                            <div class="fill-violet-500 w-12">
                                <img src="{{ asset('assets/img/rate3.png') }}" class="w-16 h-16" alt="Rates" />
                            </div>
                            <h1 class="font-bold text-xl text-center">Base Rate and Spread Rate</h1>
                            <div class="text-sm text-zinc-500 line-clamp-6 text-ellipsis text-justify"
                                style="margin: 4px; overflow: hidden;">
                                We, at Goodwill, give utmost priority to our customer’s convenience. Keeping this in mind we
                                have started the Base Rate to provide our customer with flexibility to transact from any
                                branch of our company. This is applicable to our current branch as well as the array of
                                branches we would be opening in near future.
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>

        </div>
    </section>

@endsection