@extends('layouts.main-app')

@section('title', 'About Us - Network Coop')

@section('content')

@include('layouts.navbar')
<div class="relative ">
    <img class="absolute inset-0 object-cover object-top w-full h-full" src="{{asset('images/about_us/banner.webp')}}" alt="">
    <div class="container relative max-w-screen-xl mx-auto text-white py-[10rem]">
        <div class="grid grid-cols-1 px-4 md:grid-cols-3">
            <div>
                <h1 class="text-4xl font-bold">Our Network and Clients</h1>
                <p>tipón is a federation of cooperatives that offers diverse and comprehensive manpower and technical solutions to your business needs across multiple industries</p>
            </div>
        </div>
    </div>
</div>
<div class="py-12 bg-gray-100">
    <div class="container max-w-screen-xl mx-auto space-y-8">
        <div class="grid grid-cols-1 gap-4 px-4 lg:grid-cols-3">
            <div>
                <h1 class="text-4xl font-bold">MPC's</h1>
                <p class="text-sm text-gray-500">Our nationwide cooperatives are equipped to provide comprehensive manpower and technical solutions tailored to meet the diverse needs of businesses across various industries.</p>
            </div>
            <div class="flex flex-wrap items-center col-span-2 gap-10">
                <div>
                    <a href="{{ url('/microsite_asiapro') }}">
                        <img src="{{asset('images/coop-network/asiapro.webp')}}" alt="">
                    </a>

                </div>
                <div>
                    <a href="{{ url('/microsite_gak') }}"> <img src="{{asset('images/coop-network/gak.webp')}}" alt=""></a>

                </div>
                <div>
                    <a href="{{url('/microsite_kaamulan')}}"> <img src="{{asset('images/coop-network/kaamulan.webp')}}" alt=""></a>

                </div>
                <div>
                    <a href="{{url('/microsite_victory')}}"> <img src="{{asset('images/coop-network/victory.webp')}}" alt=""></a>

                </div>
                <div>
                    <a href="{{url('/microsite_tnalak')}}"> <img src="{{asset('images/coop-network/tnalak.webp')}}" alt=""></a>

                </div>
                <div>
                    <a href="{{url('/microsite_kadayawan')}}"> <img src="{{asset('images/coop-network/kadayawan.webp')}}" alt=""></a>

                </div>
                <div>
                    <a href="{{url('/microsite_ksk')}}"> <img src="{{asset('images/coop-network/ksk.webp')}}" alt=""></a>

                </div>
                <div>
                    <a href="{{url('/microsite_worklife')}}"> <img src="{{asset('images/coop-network/worklife.webp')}}" alt=""></a>

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


    </div>
</div>


<div class="relative">
    <img class="absolute inset-0 w-full h-full" src="{{asset('images/coop-network/bg-mpc-cards.webp')}}" alt="">
    <div class="container relative max-w-screen-xl py-8 mx-auto">
        <div class="grid grid-cols-1 gap-4 px-4 lg:grid-cols-2">
            <div class="opacity-80 hover:opacity-100">
                <a href="{{ url('/microsite_asiapro') }}" class="h-full">
                    <div class="grid items-center h-full grid-cols-1 gap-2 bg-white md:grid-cols-3 rounded-xl">
                        <div class=" bg-gradient-to-tl from-[#FBAF43] to-transparent h-full w-full p-8 rounded-r-full flex justify-center">
                            <img class="object-contain" src="{{asset('images/coop-network/logo-asiapro.webp')}}" alt="">
                        </div>
                        <div class="col-span-2 p-4 space-y-4">
                            <h1 class="text-xl font-bold">Asiapro</h1>
                            <p class="text-sm">Asiapro is a worker-owned business partner that provides socially responsible and customized solutions to mainstream businesses. Our businesses must be commercially viable and sustainable to create value...</p>
                            <div class="flex items-center space-x-4 text-2xl">
                                <button class="flex items-center justify-center w-10 h-10 bg-blue-500 rounded-full"><i class='text-white bx bx-globe'></i></button>
                                <a href="{{url('https://www.facebook.com/asiapro.coop')}}"><button class="flex items-center justify-center w-10 h-10 bg-blue-500 rounded-full"><i class='text-white bx bxl-facebook'></i></button></a>
                                <button class="flex items-center justify-center w-10 h-10 bg-blue-500 rounded-full"><i class='text-white bx bxl-linkedin'></i></button>
                            </div>
                        </div>
                    </div>
                </a>
            </div>

            <div class="opacity-80 hover:opacity-100">
                <a href="{{ url('/microsite_gak') }}" class="h-full">
                    <div class="grid items-center h-full grid-cols-1 gap-2 bg-white md:grid-cols-3 rounded-2xl">
                        <div class=" bg-gradient-to-tl from-[#FBAF43] h-full w-full to-transparent p-8  rounded-r-full flex justify-center">
                            <img class="object-contain " src="{{asset('images/coop-network/logo-gak.webp')}}" alt="">
                        </div>
                        <div class="col-span-2 p-4 space-y-4">
                            <h1 class="text-xl font-bold">Gawa at Kalinga</h1>
                            <p class="text-sm">Gawa at Kalinga Multi-Purpose Cooperative is an offshoot of CDA's MC 2012-12 which resulted in the disintegration of Asiapro Cooperative into regionalized cooperative. It was mainly formed to service.</p>
                            <div class="flex items-center space-x-4 text-2xl">
                                <button class="flex items-center justify-center w-10 h-10 bg-blue-500 rounded-full"><i class='text-white bx bx-globe'></i></button>
                                <a href="{{url('https://www.facebook.com/profile.php?id=100064200906948')}}"> <button class="flex items-center justify-center w-10 h-10 bg-blue-500 rounded-full"><i class='text-white bx bxl-facebook'></i></button></a>

                                <button class="flex items-center justify-center w-10 h-10 bg-blue-500 rounded-full"><i class='text-white bx bxl-linkedin'></i></button>
                            </div>
                        </div>
                    </div>
                </a>

            </div>
            <div class="opacity-80 hover:opacity-100">
                <a href="{{url('/microsite_ksk')}}" class="h-full">
                    <div class="grid items-center h-full grid-cols-1 gap-2 bg-white md:grid-cols-3 rounded-xl">
                        <div class=" bg-gradient-to-tl from-[#FBAF43] to-transparent p-8 rounded-r-full  h-full w-full flex justify-center">
                            <img class="object-contain" src="{{asset('images/new_ksk/logo-ksk.webp')}}" alt="">
                        </div>
                        <div class="col-span-2 p-4 space-y-4">
                            <h1 class="text-xl font-bold">Kaakbay at Kinabukasan</h1>
                            <p class="text-sm">Kaakbay sa Kinabukasan Multi-Purpose Cooperative is an offshoot of CDA's MC 2012-12 which resulted in the disintegration of Asiapro Cooperative into regionalized cooperative.</p>
                            <div class="flex items-center space-x-4 text-2xl">
                                <button class="flex items-center justify-center w-10 h-10 bg-blue-500 rounded-full"><i class='text-white bx bx-globe'></i></button>
                                <a href="{{url('https://www.facebook.com/KaakbaySaKinabukasan')}}"> <button class="flex items-center justify-center w-10 h-10 bg-blue-500 rounded-full"><i class='text-white bx bxl-facebook'></i></button></a>
                                <button class="flex items-center justify-center w-10 h-10 bg-blue-500 rounded-full"><i class='text-white bx bxl-linkedin'></i></button>
                            </div>
                        </div>
                    </div>
                </a>
            </div>

            <div class="opacity-80 hover:opacity-100">
                <a href="{{url('/microsite_kadayawan')}}" class="h-full">
                    <div class="grid items-center h-full grid-cols-1 gap-2 bg-white md:grid-cols-3 rounded-xl">
                        <div class=" bg-gradient-to-tl h-full w-full from-[#FBAF43] to-transparent p-8 rounded-r-full flex justify-center">
                            <img class="object-contain" src="{{asset('images/coop-network/logo-kadayawan.webp')}}" alt="">
                        </div>
                        <div class="col-span-2 p-4 space-y-4">
                            <h1 class="text-xl font-bold">Kadayawan</h1>
                            <p class="text-sm">Kadayawan Labor Service Cooperative is registered under the Cooperative Development Authority in July 2014. It is located at 345 Sampaguita St., Juna Subd., Matina, Davao City.</p>
                            <div class="flex items-center space-x-4 text-2xl">
                                <button class="flex items-center justify-center w-10 h-10 bg-blue-500 rounded-full"><i class='text-white bx bx-globe'></i></button>
                                <a href="{{url('')}}"> <button class="flex items-center justify-center w-10 h-10 bg-blue-500 rounded-full"><i class='text-white bx bxl-facebook'></i></button></a>

                                <button class="flex items-center justify-center w-10 h-10 bg-blue-500 rounded-full"><i class='text-white bx bxl-linkedin'></i></button>
                            </div>
                        </div>
                    </div>
                </a>
            </div>

            <div class="opacity-80 hover:opacity-100">
                <a href="{{url('/microsite_kaamulan')}}" class="h-full">
                    <div class="grid items-center h-full grid-cols-1 gap-2 bg-white md:grid-cols-3 rounded-xl">
                        <div class=" bg-gradient-to-tl from-[#FBAF43] to-transparent p-8 h-full w-full rounded-r-full flex justify-center">
                            <img class="object-contain" src="{{asset('images/coop-network/logo-kaamulan.webp')}}" alt="">
                        </div>
                        <div class="col-span-2 p-4 space-y-4">
                            <h1 class="text-xl font-bold">Kaamulan</h1>
                            <p class="text-sm">Kaamulan is a Multi-Purpose Cooperative based in North Mindanao commited to providing livelihood opportunities to its community. It is an offshoot of Asiapro Multi-Purpose Cooperative when CDA..</p>
                            <div class="flex items-center space-x-4 text-2xl">
                                <button class="flex items-center justify-center w-10 h-10 bg-blue-500 rounded-full"><i class='text-white bx bx-globe'></i></button>
                                <a href="{{url('https://www.facebook.com/profile.php?id=100063943367075')}}"> <button class="flex items-center justify-center w-10 h-10 bg-blue-500 rounded-full"><i class='text-white bx bxl-facebook'></i></button></a>

                                <button class="flex items-center justify-center w-10 h-10 bg-blue-500 rounded-full"><i class='text-white bx bxl-linkedin'></i></button>
                            </div>
                        </div>
                    </div>
                </a>
            </div>

            <div class="opacity-80 hover:opacity-100">
                <a href="{{url('/microsite_tnalak')}}" class="h-full">
                    <div class="grid items-center h-full grid-cols-1 gap-2 bg-white md:grid-cols-3 rounded-xl">
                        <div class=" bg-gradient-to-tl h-full w-full from-[#FBAF43] to-transparent p-8 rounded-r-full flex justify-center">
                            <img class="object-contain" src="{{asset('images/coop-network/logo-tnalak.webp')}}" alt="">
                        </div>
                        <div class="col-span-2 p-4 space-y-4">
                            <h1 class="text-xl font-bold">Tnalak</h1>
                            <p class="text-sm">tnalak provides customized managed services in the form of undertake, operate, manage and maintain operations with the clients. Large part of these are agricultural services to its clients and executes end ...</p>
                            <div class="flex items-center space-x-4 text-2xl">
                                <button class="flex items-center justify-center w-10 h-10 bg-blue-500 rounded-full"><i class='text-white bx bx-globe'></i></button>
                                <a href="{{url('https://www.facebook.com/profile.php?id=100063928305352')}}"> <button class="flex items-center justify-center w-10 h-10 bg-blue-500 rounded-full"><i class='text-white bx bxl-facebook'></i></button></a>

                                <button class="flex items-center justify-center w-10 h-10 bg-blue-500 rounded-full"><i class='text-white bx bxl-linkedin'></i></button>
                            </div>
                        </div>
                    </div>
                </a>
            </div>

            <div class="h-full opacity-80 hover:opacity-100">
                <a href="{{url('/microsite_victory')}}" class="h-full">
                    <div class="grid items-center h-full grid-cols-1 gap-2 bg-white md:grid-cols-3 rounded-xl">
                        <div class=" bg-gradient-to-tl h-full w-full from-[#FBAF43] to-transparent p-8 rounded-r-full flex justify-center">
                            <img class="object-contain" src="{{asset('images/coop-network/logo-victory.webp')}}" alt="">
                        </div>
                        <div class="col-span-2 p-4 space-y-4">
                            <h1 class="text-xl font-bold">Victory</h1>
                            <p class="text-sm">Victory is a Multi-Purpose Cooperative based in Cebu commited to provide livelihood opportunities to its community. It has also expanded its opertaions in Bacolod and some parts of Visayas in its effort to...</p>
                            <div class="flex items-center space-x-4 text-2xl">
                                <button class="flex items-center justify-center w-10 h-10 bg-blue-500 rounded-full"><i class='text-white bx bx-globe'></i></button>
                                <a href="{{url('https://www.facebook.com/profile.php?id=100064132716270')}}"> <button class="flex items-center justify-center w-10 h-10 bg-blue-500 rounded-full"><i class='text-white bx bxl-facebook'></i></button></a>

                                <button class="flex items-center justify-center w-10 h-10 bg-blue-500 rounded-full"><i class='text-white bx bxl-linkedin'></i></button>
                            </div>
                        </div>
                    </div>
                </a>
            </div>

            <div class="h-full opacity-80 hover:opacity-100">
                <a href="{{url('/microsite_worklife')}}" class="h-full">
                    <div class="grid items-center h-full grid-cols-1 gap-2 bg-white md:grid-cols-3 rounded-xl">
                        <div class=" bg-gradient-to-tl h-full w-full from-[#FBAF43] to-transparent p-8 rounded-r-full flex justify-center">
                            <img class="object-contain" src="{{asset('images/coop-network/logo-worklife.webp')}}" alt="">
                        </div>
                        <div class="col-span-2 p-4 space-y-4">
                            <h1 class="text-xl font-bold">Worklife</h1>
                            <p class="text-sm">Worklife's Construction Group provides customized solutions specific to clients' business requirements. Our Construction Group is backed by our partners with Philippine Contractors Accreditation Board (PCAB) License</p>
                            <div class="flex items-center space-x-4 text-2xl">
                                <button class="flex items-center justify-center w-10 h-10 bg-blue-500 rounded-full"><i class='text-white bx bx-globe'></i></button>
                                <a href="{{url('https://www.facebook.com/WorklifeMultipurposeCooperative2020')}}"><button class="flex items-center justify-center w-10 h-10 bg-blue-500 rounded-full"><i class='text-white bx bxl-facebook'></i></button></a>

                                <button class="flex items-center justify-center w-10 h-10 bg-blue-500 rounded-full"><i class='text-white bx bxl-linkedin'></i></button>
                            </div>
                        </div>
                    </div>
                </a>
            </div>



        </div>
    </div>
</div>
<div class="py-12 space-y-20">
    <div class="container max-w-screen-lg mx-auto">
        <div class="space-y-4 text-center">
            <h1 class="text-4xl font-bold"> Clientele</h1>
            <p class="text-sm text-gray-500">Here are our clients nationwide with varying engagements of our services. </p>
        </div>
    </div>
    <div class="container max-w-screen-xl px-4 mx-auto">
        <img src="{{asset('images/coop-network/client-logo-1.webp')}}" alt="">
        <img src="{{asset('images/coop-network/client-logo-2.webp')}}" alt="">
        <img src="{{asset('images/coop-network/client-logo-3.webp')}}" alt="">
        <img src="{{asset('images/coop-network/client-logo-4.webp')}}" alt="">
        <img src="{{asset('images/coop-network/client-logo-5.webp')}}" alt="">
        <img src="{{asset('images/coop-network/client-logo-6.webp')}}" alt="">
        <img src="{{asset('images/coop-network/client-logo-7.webp')}}" alt="">
        <img src="{{asset('images/coop-network/client-logo-8.webp')}}" alt="">
        <img src="{{asset('images/coop-network/client-logo-9.webp')}}" alt="">
        <img src="{{asset('images/coop-network/client-logo-10.webp')}}" alt="">
    </div>
</div>

<div class="relative">
    <img src="{{ asset('images/bg-map.webp') }}" alt="Banner"
        class="absolute object-cover w-full h-full ">
    <div class="container relative grid max-w-screen-xl grid-cols-1 gap-8 px-4 mx-auto lg:grid-cols-2">
        <div class="py-4">
            <h1 class="text-3xl font-semibold text-center text-white lg:text-start lg:text-6xl py-14">
                Nationwide Capabilities
            </h1>
            <img src="{{ asset('images/map-contact-form.webp') }}" alt="Banner" class="w-full h-auto px-2">
        </div>
        <div class="pb-8">
            @include('layouts.contact')
        </div>
    </div>
</div>


@include('layouts.footer')



@endsection