@extends('frontend.layout.navbar')
@section('title', 'Kaagapay Program')
@section('content')
    <div class="relative w-full h-full">
        <img src="{{ asset('img/kaagapay/banner-kaagapay.png') }}" class="absolute inset-0 object-cover w-full h-full">
        <div class="container relative inset-0 z-0 flex items-center mx-auto pt-[25rem] pb-[3rem] ">
            <div>
                <div class=" w-auto md:w-[30rem] h-36 p-4 bg-black bg-opacity-60 flex items-center justify-start border-l-4 "
                    style="border-color: #ffbd59;">
                    <div class="">
                        <p class="mb-3 text-3xl font-bold tracking-wider text-white lg:text-5xl">Our Works</p>
                        <p class="text-xs text-white">Home > Our Works > AFI Core Programs > Kaagapay Program</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container max-w-screen-xl p-5 mx-auto">
        <div class="flex flex-col md:flex-row gap-20 justify-between" data-aos="fade-right">
            <div class="">
                <p class="mt-10 text-3xl font-semibold tracking-wider">Kaagapay Program</p>
                <div class="mt-10"><img src="{{ asset('img/kaagapay/img-intro.png') }}"></div>
            </div>
            <div class="">
                <p class="mt-16 font-bold ">Programs</p>
                <style>
                    .grace-font {
                        font-family: 'Covered By Your Grace', cursive;

                    }
                </style>
                <div class="flex flex-col items-center mt-5 text-white grace-font">
                    <a href="{{ url('kadayaman') }}"
                        class="flex  justify-start pl-10 gap-5  bg-[#85c300] w-full md:w-[27rem] py-3 rounded-xl hover:bg-[#fbae42] border-b-8 border-green-800 mb-3">
                        <img src="{{ asset('img/bullet-icon.webp') }}" class="w-10 mr-2 md:w-16">
                        <span class="text-xl md:text-3xl ">Koop Damayan Program</span>
                    </a>
                    <a href="{{ url('kinabukasan') }}"
                        class="flex justify-start pl-10   gap-5  bg-[#85c300] w-full md:w-[27rem] py-3 rounded-xl hover:bg-[#fbae42] border-b-8 border-green-800 mb-3">
                        <img src="{{ asset('img/bullet-icon.webp') }}" class="w-10 mr-2 md:w-16">
                        <span class="text-xl md:text-3xl ">Tulay sa Kinabukasan</span>
                    </a>
                    <a href="{{ url('kalusugan') }}"
                        class="flex justify-start pl-10 gap-5  bg-[#85c300] w-full md:w-[27rem] py-3 rounded-xl hover:bg-[#fbae42] border-b-8 border-green-800 mb-3">
                        <img src="{{ asset('img/bullet-icon.webp') }}" class="w-10 mr-2 md:w-16">
                        <span class="text-xl md:text-3xl ">Kaakbay sa Kalusugan</span>
                    </a>
                    <a href="{{ url('koopreneur') }}"
                        class="flex  justify-start pl-10 gap-5  bg-[#85c300] w-full md:w-[27rem] py-3 rounded-xl hover:bg-[#fbae42] border-b-8 border-green-800 mb-3">
                        <img src="{{ asset('img/bullet-icon.webp') }}" class="w-10 mr-2 md:w-16">
                        <span class="text-xl md:text-3xl ">Koopreneur Program</span>
                    </a>
                    <a href="{{ url('kaagapay') }}"
                        class="flex  justify-start pl-10 gap-5  bg-[#85c300] w-full md:w-[27rem] py-3 rounded-xl hover:bg-[#fbae42] border-b-8 border-green-800 mb-3">
                        <img src="{{ asset('img/bullet-icon.webp') }}" class="w-10 mr-2 md:w-16">
                        <span class="text-xl md:text-3xl ">Kaagapay Progran</span>
                    </a>
                </div>

            </div>
        </div>

        <div class="mt-10 text-sm leading-6" data-aos="fade-up">
            <p class="font-bold">AFl's Kaagapay Program lends a support line during times of crisis and critical need of
                members <br> and their
                families</p>
            <ul class="mt-5 ml-10 text-sm leading-6 list-disc list-inside">
                <li class="[&::marker]:text-green-500">Pantawid Financial Assistance for members during the Covid-19 pandemic was implemented nationwide. The program began in May 2020 and has ended in December 2022.

                </li>
                <li class="[&::marker]:text-green-500 mt-3">Emergency and Shelter Assistance aims to aid members who are struggling to rebuild their lives and shelter being destroyed by various calamities. The program has been in operation since 2017.

                </li>
                <li class="[&::marker]:text-green-500 mt-3">Since 2018, the medical assistance in the form of financial aid is given to members or to a family member who is afflicted with a catastrophic illness. 

                </li>
            </ul>
            <div class="my-20"> <a href="{{ url('join') }}" class="rounded-full py-3 px-10  bg-[#fbb249]">GET
                    INVOLVED</a></div>
            <div class="grid grid-cols-1 gap-5 lg:grid-cols-2">
                <img src="{{ asset('img/kaagapay/img-feat-1.png') }}">
                <img src="{{ asset('img/kaagapay/img-feat-2.png') }}">
            </div>

        </div>
        <div class="mt-20 " data-aos="fade-down">
            <p class="mb-5 text-2xl font-bold">Recent Article</p>
            <hr class="border-2 border-gray-300">

            <div class="grid grid-cols-1 gap-5 mt-5 lg:grid-cols-2">
                @foreach ($latestpost as $post)
                    <a href="{{ route('NewsEvent_singlepage.get', ['id' => $post->id]) }}">

                        <div class="bg-[#85c300] w-full h-auto rounded-xl text-white  p-5 ">
                            <div class="flex flex-col items-center gap-2 md:flex-row"><i
                                    class='bx text-md bx-calendar-alt'></i>
                                <p class="text-md">{{ \Carbon\Carbon::parse($post->date)->format('F j, Y') }}</p>
                            </div>
                            <div class="mt-2 text-xl font-semibold">
                                <p>{{ $post->title }}</p>
                            </div>
                        </div>
                    </a>
                @endforeach

            </div>
        </div>
    </div>

@endsection