@extends('frontend.layout.navbar')
@section('title', 'Koopreneur Program')
@section('content')
    <div class="relative w-full h-full">
        <img src="{{ asset('img/koop/banner-koopreneur.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 > Koopreneur 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-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 class="">
                <p class="mt-10 text-4xl font-semibold tracking-widest">Koopreneur Program</p>
                <div class="mt-10"><img src="{{ asset('img/koop/img-intro.png') }}"></div>
                <div class="mt-10">
                    <p class="text-sm leading-6">
                        <span class="font-bold">From 2018 to the present, AFl's flagship intervention tagged as
                            Koopreneur
                            Program </span> aims to uplift the economic conditions of cooperative members living below the
                        poverty
                        threshold through the establishment of micro enterprise projects.
                    </p>


                    <ul class="mt-5 ml-10 text-sm leading-6 list-disc list-inside">
                        <li class="[&::marker]:text-green-500"><span class="font-bold"></span>From 2019 to 2020, hog raising
                            livelihood projects were implemented in Calinan, Davao City;
                            Impasugong and Valencia in Bukidnon and Medina and Guingoog City in Misamis Oriental.</li>
                        <li class="[&::marker]:text-green-500 mt-3">Cooperative members from South Mindanao, NCR, and
                            Northern Mindando, in that order, were the poorest and can be considered as primary focus areas.
                        </li>

                    </ul>
                    <p class="mt-5 text-sm leading-6">Aside from technical training on agricultural production, project
                        participants were training on basic entrepreneurship skills. They were also and encouraging
                        cooperative members become more responsible borrowers.</p>
                    <div class="flex flex-col items-end my-20"> <a href="{{ url('join') }}"
                            class="rounded-full py-3 px-10  bg-[#fbb249]">GET
                            INVOLVED</a></div>
                </div>

            </div>
        </div>
        <div class="mt-10" data-aos="fade-up">


            <div class="grid grid-cols-1 gap-5 lg:grid-cols-2">
                <img src="{{ asset('img/koop/img-feat-1.png') }}">
                <img src="{{ asset('img/koop/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