@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 w-full h-full" src="{{asset('images/coop-network/banner-coopnetwork.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>Aliquam pelientesque nisi aliquet suspendisse moltis velit fermentum. Augue maecenas nullam fusce finibus fusce imperdiet montes taciti. Vivamus felis potenti sollicitudin efficitur laculis luctus ridiculus adipiscing orci.</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">Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis accusamus explicabo voluptatem delectus enim? Officia necessitatibus autem asperiores facere libero aliquid nulla enim quisquam reprehenderit aperiam. Suscipit dolor magnam reiciendis!</p>
            </div>
            <div class="flex flex-wrap items-center col-span-2 gap-10">
                <div>
                    <img src="{{asset('images/coop-network/asiapro.webp')}}" alt="">
                </div>
                <div>
                    <img src="{{asset('images/coop-network/gak.webp')}}" alt="">
                </div>
                <div>
                    <img src="{{asset('images/coop-network/kaamulan.webp')}}" alt="">
                </div>
                <div>
                    <img src="{{asset('images/coop-network/victory.webp')}}" alt="">
                </div>
                <div>
                    <img src="{{asset('images/coop-network/tnalak.webp')}}" alt="">
                </div>
                <div>
                    <img src="{{asset('images/coop-network/kadayawan.webp')}}" alt="">
                </div>
                <div>
                    <img src="{{asset('images/coop-network/ksk.webp')}}" alt="">
                </div>
                <div>
                    <img src="{{asset('images/coop-network/worklife.webp')}}" alt="">
                </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') }}">
                    <div class="grid items-center 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>
                                <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>
                                <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') }}">
                    <div class="grid items-center 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>
                                <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>
                                <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')}}">
                    <div class="grid items-center 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/coop-network/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>
                                <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>
                                <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')}}">
                    <div class="grid items-center 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">Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore iure quasi saepe, molestiae nisi earum omnis. Ut modi iure, officiis quibusdam itaque eligendi. Porro rem eius hic ullam, quos voluptas!</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>
                                <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>
                                <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')}}">
                    <div class="grid items-center 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>
                                <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>
                                <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')}}">
                    <div class="grid items-center 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>
                                <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>
                                <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_victory')}}">
                    <div class="grid items-center 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>
                                <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>
                                <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_worklife')}}">
                    <div class="grid items-center 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">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quam, deleniti eius itaque obcaecati excepturi praesentium vitae necessitatibus ea est tempore odio dolor enim eveniet</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>
                                <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>
                                <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">Our Clientele</h1>
            <p class="text-sm text-gray-500">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi placeat iste accusantium vero saepe ipsa eum maxime</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 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/obj-map.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