@extends('frontend.layout.navbar')
@section('title', 'Core Programs')
@section('content')
    <div class="relative w-full h-full">
        <img src="{{ asset('img/banner-afi.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 </p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container max-w-screen-xl p-5 mx-auto">
        <div class="mt-20" data-aos="fade-up">
            <p class="text-4xl font-semibold tracking-wide">AFI Core Programs</p>
            <p class="mt-5 leading-6">

            </p>
        </div>
        <div>
            <p class="leading-7">The Foundation's core programs are designed to create lasting impact and support
vulnerable communities. These initiatives aim to enable individuals, improve
overall well-being, provide immediate relief during crises, and foster economic
resilience by offering sustainable livelihood opportunities. Together, these
programs work to enhance quality of life and build stronger, more self-sufficient
communities.</p>
        </div>
        <div class="grid grid-cols-1 gap-20 mt-16 overflow-hidden leading-7 lg:grid-cols-2">
            <div class="" data-aos="fade-right">
                <p class="text-2xl text-[#96c130] font-bold">Koop Damayan Program</p>
                <p class="mt-10 ">AFI continues to reach out to cooperative
members' families and their communities
by way of community outreach projects
focused on the marginalized sectors.
                </p>
                <div class="flex items-center justify-center mt-32"> <a href="{{ url('kadayaman') }}"
                        class="bg-[#fbae42] w-80 md:w-full py-4 text-center rounded-xl font-bold">Read
                        More</a>
                </div>

            </div>
            <div data-aos="fade-right"><img src="{{ asset('img/img-coopdamayan.png') }}" class="object-scale-down "></div>
            <div data-aos="fade-left"><img src="{{ asset('img/img-tsk.png') }}" class="object-scale-down "></div>

            <div class="" data-aos="fade-left">
                <p class="text-2xl text-[#96c130] font-bold">Tulay sa Kinabukasan</p>
                <p class="mt-10">Through the Tulay sa Kinabukasan Program, it envisions that children of impoverished coop
                    members and ther children will be able to break away from their disadvantaged environment. It aims to link
                    these project particiants to available voc-tech trainings, short term certification courses and prepare
                    them for jobs that would guarantee sustainable work and career growth.
                </p>
                <div class="flex items-center justify-center mt-32"> <a href="{{ url('kinabukasan') }}"
                        class="bg-[#fbae42] w-80 md:w-full py-4 text-center rounded-xl font-bold">Read
                        More</a>
                </div>

            </div>
            <div class="" data-aos="fade-right">
                <p class="text-2xl text-[#96c130] font-bold">Kaakbay sa Kalusugan</p>
                <p class="mt-10">AFI implements health programs and services that address health and well-being concerns of
                    members in need. These interventions bring accessible and quality health care services to
                    members and their families in the communities where they are.
                </p>
                <div class="flex items-center justify-center mt-32"> <a href="{{ url('kalusugan') }}"
                        class="bg-[#fbae42] w-80 md:w-full py-4 text-center rounded-xl font-bold">Read
                        More</a>
                </div>

            </div>
            <div data-aos="fade-right"><img src="{{ asset('img/img-ksk.png') }}" class="object-scale-down "></div>

            <div data-aos="fade-left"><img src="{{ asset('img/img-koopreneur.webp') }}" class="object-scale-down "></div>
            <div class="" data-aos="fade-left">
                <p class="text-2xl text-[#96c130] font-bold">Koopreneur Program</p>
                <p class="mt-10">Koopreneur Program is designed as an intervention that aims to provide support to
                    cooperative members and their family members who have an existing side business as a way to augment
                    their regular employment. The program aims to reinforce the capacities of micro or small business owners
                    by linking them to business development seminars, entrepreneurship trainings, financial literacy, and
                    expanding their access to capital for business expansion.
                </p>
                <div class="flex items-center justify-center mt-32"> <a href="{{ url('koopreneur') }}"
                        class="bg-[#fbae42] w-80 md:w-full py-4 text-center rounded-xl font-bold">Read
                        More</a>
                </div>

            </div>

            <div class="" data-aos="fade-right">
                <p class="text-2xl text-[#96c130] font-bold">Kaagapay Program</p>
                <p class="mt-10">Foundation provides to coop members, hard hit calamities and medical catastrophies,
                    through assitance and emergency relief.
                </p>
                <div class="flex items-center justify-center mt-32"> <a href="{{ url('kaagapay') }}"
                        class="bg-[#fbae42] w-80 md:w-full py-4 text-center rounded-xl font-bold">Read
                        More</a>
                </div>

            </div>
            <div data-aos="fade-right"><img src="{{ asset('img/img-kaagapay.png') }}" class="object-scale-down "></div>
        </div>
    </div>

@endsection