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

    <section>
        <div
            class="w-full h-[420px] p-5 pt-8 lg:pt-0 lg:px-10 flex flex-col space-y-8 lg:space-y-0 lg:flex-row lg:justify-between lg:items-center">
            <h1 class="text-4xl font-semibold text-[#004d6e]">Personal Loans</h1>
            <img src="{{asset('assets/img/personalLoanBanner.png')}}" class="lg:w-1/2" alt=""/>
        </div>
    </section>

    <section>
        <div class="mt-4 lg:mx-10 lg:mt-20">
            <div class="flex flex-col lg:flex-row">
                <div class="bg-[#005aab] py-10 px-5 lg:w-[740px] lg:h-[468px] lg:rounded-l-2xl">
                    <div class="flex flex-col space-y-10 text-[#fff]">
                        <div class="flex flex-col space-y-5">
                            <h3 class="text-4xl font-semibold">
                                Accept Credit for Personal Loan
                            </h3>
                            <p>
                                Pulvinar tempus commodo inceptos libero semper nullam velit
                                natoque iaculis, pellentesque aliquam et proin dignissim
                                cubilia senectus conubia eleifend, duis nisi pharetra ad a
                                magna quam dictumst.
                            </p>
                        </div>
                        <div class="flex flex-col space-y-10 pr-8">
                            <div class="flex flex-col space-y-5 lg:space-y-0 lg:flex-row lg:justify-between">
                                <div class="flex space-x-5 items-start">
                                    <!-- circle -->
                                    <div
                                        class="w-[41px] h-[41px] rounded-full p-1 bg-gray-200 flex justify-center items-center">
                                        <div
                                            class="w-[30px] h-[30px] bg-[#fff] rounded-full flex justify-center items-center">
                                            <img src="{{asset('assets/img/check.png')}}" class="w-6 h-6" alt=""/>
                                        </div>
                                    </div>
                                    <!-- end of circle -->
                                    <div class="-mt-2 flex flex-col space-y-2">
                                        <p class="text-2xl">Loan up to</p>
                                        <p class="text-lg">80% and $500,000</p>
                                    </div>
                                </div>
                                <div class="flex space-x-5 items-start">
                                    <!-- circle -->
                                    <div
                                        class="w-[41px] h-[41px] rounded-full p-1 bg-gray-200 flex justify-center items-center">
                                        <div
                                            class="w-[30px] h-[30px] bg-[#fff] rounded-full flex justify-center items-center">
                                            <img src="{{asset('assets/img/check.png')}}" class="w-6 h-6" alt=""/>
                                        </div>
                                    </div>
                                    <!-- end of circle -->
                                    <div class="-mt-2 flex flex-col space-y-2">
                                        <p class="text-2xl">Low rates</p>
                                        <p class="text-lg">Starting 9% 12-60 months</p>
                                    </div>
                                </div>
                            </div>
                            <div class="flex flex-col space-y-5 lg:space-y-0 lg:flex-row lg:space-x-44">
                                <div class="flex space-x-5 items-start">
                                    <!-- circle -->
                                    <div
                                        class="w-[41px] h-[41px] rounded-full p-1 bg-gray-200 flex justify-center items-center">
                                        <div
                                            class="w-[30px] h-[30px] bg-[#fff] rounded-full flex justify-center items-center">
                                            <img src="{{asset('assets/img/check.png')}}" class="w-6 h-6" alt=""/>
                                        </div>
                                    </div>
                                    <!-- end of circle -->
                                    <div class="-mt-2 flex flex-col space-y-2">
                                        <p class="text-2xl">Quick Approval</p>
                                        <p class="text-lg">1-2 days</p>
                                    </div>
                                </div>
                                <div class="flex space-x-5 items-start">
                                    <!-- circle -->
                                    <div
                                        class="w-[41px] h-[41px] rounded-full p-1 bg-gray-200 flex justify-center items-center">
                                        <div
                                            class="w-[30px] h-[30px] bg-[#fff] rounded-full flex justify-center items-center">
                                            <img src="{{asset('assets/img/check.png')}}" class="w-6 h-6" alt=""/>
                                        </div>
                                    </div>
                                    <!-- end of circle -->
                                    <div class="-mt-2 flex flex-col space-y-2">
                                        <p class="text-2xl">Online Funding</p>
                                        <p class="text-lg">Easy processes</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="ameioc"
                     class="hidden lg:w-[640px] lg:h-[468px] lg:rounded-r-2xl lg:flex p-8 lg:justify-center items-center lg:p-0">
                    <div class="flex flex-col space-y-6 items-center">
                        <h3 class="text-3xl">Personal Loan</h3>
                        <button
                            class="text-white py-3 px-5 bg-[#005aab] rounded-md lg:w-[254px] lg:h-[60px] hover:scale-95 transition ease-in-out duration-200">
                            Check for an offer
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section>
        <div class="mx-5 mt-8 lg:mx-10 lg:my-20">
            <h3 class="text-2xl lg:text-4xl capitalize text-[#004d6e] font-semibold">
                Start your credit approval
            </h3>

            <div class="mt-10 flex flex-col-reverse space-y-10 lg:space-y-0 lg:flex-row lg:space-x-32">
                <!--  -->
                <div class="hidden lg:flex lg:flex-col lg:space-y-[1px] pt-6 items-center">
                    <img src="{{asset('assets/img/1.png')}}" alt=""/>
                    <div class="h-20 w-[2px] bg-[#004d6e]"></div>
                    <img src="{{asset('assets/img/2.png')}}" alt=""/>
                    <div class="h-20 w-[2px] bg-[#004d6e]"></div>
                    <img src="{{asset('assets/img/3.png')}}" alt=""/>
                </div>

                <!--  -->
                <div class="flex flex-col space-y-10 pt-10">
                    <div class="flex flex-col space-y-5 items-center">
                        <h5 class="text-2xl text-[#004d6e] font-semibold">
                            Check for an offer
                        </h5>
                        <p class="text-gray-400 text-center">
                            Phasellus dignissim rhoncus sollicitudin molestie erat tincidunt
                        </p>
                    </div>
                    <div class="flex flex-col space-y-5 items-center">
                        <h5 class="text-2xl text-[#004d6e] font-semibold">
                            Check for an offer
                        </h5>
                        <p class="text-gray-400 text-center">
                            Phasellus dignissim rhoncus sollicitudin molestie erat tincidunt
                        </p>
                    </div>
                    <div class="flex flex-col space-y-5 items-center">
                        <h5 class="text-2xl text-[#004d6e] font-semibold">
                            Check for an offer
                        </h5>
                        <p class="text-gray-400 text-center">
                            Phasellus dignissim rhoncus sollicitudin molestie erat tincidunt
                        </p>
                    </div>
                </div>

                <!--  -->
                <div class="relative -mt-40">
                    <img src="{{asset('assets/img/ameioc028.png')}}" class="w-1/2" alt=""/>
                    <img src="{{asset('assets/img/personalLoan2.png')}}" class="absolute top-0 left-1 w-[90%]" alt=""/>
                </div>
            </div>
        </div>
    </section>

@endsection