@extends('frontend.layout.navbar')
@section('title', 'Resources')
@section('content')
    <div class="relative w-full h-full -z-10">
        <img src="{{ asset('image/invest/reason to invest Banner.png') }}"
            class="absolute inset-0 object-cover w-full h-full">
        <div class="relative container mx-auto py-[20rem]">
            <div class="flex flex-col justify-center">
                <p class="md:text-6xl text-2xl text-[#3e4424] font-bold p-5">Resources</p>
            </div>
        </div>
    </div>


    <div class="mt-10 text-center">
        <p class="lg:text-5xl text-[#3f4424] font-bold text-2xl dancing-script">Resources for Download</p>
    </div>

    <div class="relative w-full h-full mt-20">
        <div class="absolute inset-0 flex justify-end -z-10">
            <img src="{{ asset('image/home/background 1.png') }}" class="w-full ">
        </div>

        <div class=" relative container mx-auto max-w-screen-xl pb-[10rem] p-2 md:p-0">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10 pb-[20rem]">
                <div>
                    <img src="{{ asset('image/resources/Subdivision Map.png') }}" class="shadow-2xl ">
                    <div class="p-5">
                        <!--<div class=" border-[#649d14] border-l-4 pl-2 text-xl">-->
                        <!--    <p class="border-b-2 border-black w-[3rem]"></p>-->

                        <!--</div>-->
                        <p class="mt-2 text-sm text-[#7b7a7b] leading-8"></p>
                        <div class="mt-2 text-[#7b7a7b] font-semibold "><a
                                href="{{ asset('image/resources/TGSR-Subdivision-Map-1920x1209 (1).jpg') }}" class="flex items-center"
                                target="_blank"><i class='bx bxs-right-arrow-alt'></i> Download
                                Subdivision Map</a></div>

                    </div>
                </div>
                <div>
                    <img src="{{ asset('image/resources/Flyer1.png') }}" class="shadow-2xl ">
                    <div class="p-5">
                        <!--<div class=" border-[#649d14] border-l-4 pl-2 text-xl">-->
                        <!--    <p class="border-b-2 border-black w-[3rem]"></p>-->

                        <!--</div>-->
                        <p class="mt-2 text-sm text-[#7b7a7b] leading-8"></p>
                        <div class="mt-2 text-[#7b7a7b] font-semibold"><a class="flex items-center"
                                href="{{ asset('image/resources/Flyer-01-1100x707 (1).jpg') }}" target="_blank"><i class='bx bxs-right-arrow-alt'></i> Download
                                Flyer 1</a></div>
                    </div>
                </div>
                <div>
                    <img src="{{ asset('image/resources/Flyer2.png') }}" class="shadow-2xl ">
                    <div class="p-5">
                        <!--<div class=" border-[#649d14] border-l-4 pl-2 text-xl">-->
                        <!--    <p class="border-b-2 border-black w-[3rem]"></p>-->

                        <!--</div>-->
                        <p class="mt-2 text-sm text-[#7b7a7b] leading-8"></p>
                        <div class="mt-2 text-[#7b7a7b] font-semibold"><a class="flex items-center"
                                href="{{ asset('image/resources/Flyer-02-1100x707 (1).jpg') }}" target="_blank"><i class='bx bxs-right-arrow-alt'></i> Download
                                Flyer 2</a></div>
                    </div>
                </div>
                <div>
                    <img src="{{ asset('image/resources/Metrobank.png') }}" class="shadow-2xl ">
                    <div class="p-5">
                        <!--<div class=" border-[#649d14] border-l-4 pl-2 text-xl">-->
                        <!--    <p class="border-b-2 border-black w-[3rem]"></p>-->

                        <!--</div>-->
                        <p class="mt-2 text-sm text-[#7b7a7b] leading-8"></p>
                        <div class="mt-2 text-[#7b7a7b] font-semibold"><a class="flex items-center"
                                href="{{ asset('image/resources/Metrobank-Requirements (1).png') }}" target="_blank"><i class='bx bxs-right-arrow-alt'></i>
                                Download Metrobank requirements</a></div>
                    </div>
                </div>
                <div>
                    <img src="{{ asset('image/resources/BDO.png') }}" class="shadow-2xl ">
                    <div class="p-5">
                        <!--<div class=" border-[#649d14] border-l-4 pl-2 text-xl">-->
                        <!--    <p class="border-b-2 border-black w-[3rem]">READ</p>-->

                        <!--</div>-->
                        <p class="mt-2 text-sm text-[#7b7a7b] leading-8"></p>
                        <div class="mt-2 text-[#7b7a7b] font-semibold"><a class="flex items-center"
                                href="{{ asset('image/resources/Home-Loan-App-Form-Rev112012-front-back (1).pdf') }}"
                                target="_blank"><i class='bx bxs-right-arrow-alt'></i>
                                Download Home Loan
                                Form</a></div>
                    </div>
                </div>
                <div>
                    <img src="{{ asset('image/resources/IHF.png') }}" class="shadow-2xl ">
                    <div class="p-5">
                        <!--<div class=" border-[#649d14] border-l-4 pl-2 text-xl">-->
                        <!--    <p class="border-b-2 border-black w-[3rem]"></p>-->

                        <!--</div>-->
                        <p class="mt-2 text-sm text-[#7b7a7b] leading-8"></p>
                        <div class="mt-2 text-[#7b7a7b] font-semibold"><a class="flex items-center"
                                href="{{ asset('image/resources/IHF-requirements (1).pdf') }}" target="_blank"><i class='bx bxs-right-arrow-alt'></i> Download
                                IHF
                                Requirements</a></div>
                    </div>
                </div>
                <div>
                    <img src="{{ asset('image/resources/HDMF Financing.png') }}" class="shadow-2xl ">
                    <div class="p-5">
                        <!--<div class=" border-[#649d14] border-l-4 pl-2 text-xl">-->
                        <!--    <p class="border-b-2 border-black w-[3rem]"></p>-->

                        <!--</div>-->
                        <p class="mt-2 text-sm text-[#7b7a7b] leading-8"></p>
                        <div class="mt-2 text-[#7b7a7b] font-semibold"><a class="flex items-center"
                                href="{{ asset('image/resources/HDMF-Financing-Reqts (1).pdf') }}" target="_blank"><i class='bx bxs-right-arrow-alt'></i>
                                Download HDMF
                                Financing</a></div>
                    </div>
                </div>
                <div>
                    <img src="{{ asset('image/resources/BSBank Requirements.png') }}" class="shadow-2xl ">
                    <div class="p-5">
                        <!--<div class=" border-[#649d14] border-l-4 pl-2 text-xl">-->
                        <!--    <p class="border-b-2 border-black w-[3rem]"></p>-->

                        <!--</div>-->
                        <p class="mt-2 text-sm text-[#7b7a7b] leading-8"></p>
                        <div class="mt-2 text-[#7b7a7b] font-semibold"><a class="flex items-center"
                                href="{{ asset('image/resources/PSBank-Reqs (1).pdf') }}" target="_blank"><i class='bx bxs-right-arrow-alt'></i> Download
                                BSBank
                                Requirements</a></div>

                    </div>
                </div>



            </div>


        </div>
    </div>
@endsection
{{-- <img src="{{ asset('image/invest/Map.png') }}" class="absolute inset-0 "> --}}