@extends('frontend.layout.navbar')
@section('title', ' Koop Damayan Program')
@section('content')
    <div class="relative w-full h-full">
        <img src="{{ asset('img/banner-koopdamayan.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 > Koop Damayan 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">Koop Damayan Program</p>
                <div class="mt-10"><img src="{{ asset('img/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 " data-aos="fade-up">
            <p class="text-sm">The Koop Damayan Program aims to empower communities through a pool of volunteers who work together to provide essential support and services to underserved populations in communities where we are.
Through collaboration and dedication within and among our Cooperatives in the Tipón Federation, the program seeks to build stronger, healthier communities that thrive on cooperation and shared aspirations.
</p>
            <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/img-feat-1.png') }}" class="w-full h-full">
                <img src="{{ asset('img/img-feat-3.webp') }}" class="w-full h-full">
            </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