@extends('frontend.layout.navbar')
@section('title', 'Board of Trustees')
@section('content')
    <div class="relative w-full h-full">
        <img src="{{ asset('img/banner.webp') }}" 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-[5rem] ">
            <div>
                <div class=" w-auto md:w-[30rem] h-44 p-4 bg-black bg-opacity-60 flex items-center justify-center border-l-4 "
                    style="border-color: #ffbd59;">
                    <div class="">
                        <p class="text-3xl font-bold text-white">About Us</p>
                        <p class="text-sm text-white">Home > About Us > Board of Trustees</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container max-w-screen-xl mx-auto">
        <div class="flex flex-col items-center justify-center mt-10" data-aos="fade-up">
            <img src="{{ asset('img/section-bot.webp') }}">
            <p class="text-xl font-bold lg:text-5xl">The Board of Trustees<br> Asiapro
                Foundation</p>
        </div>
        <div class="grid grid-cols-1 gap-10 my-10 overflow-hidden lg:grid-cols-3">

            <div class="flex flex-col items-center" data-aos="fade-right">
                <img src="{{ asset('img/bot- Rafael Alvaran.webp') }}" class="object-scale-down ">
                <button onclick="toggleModalalvaran(true)">
                    <div
                        class="mt-5 text-center hover:bg-[#febd57] shadow-lg flex justify-center flex-col h-32 rounded-xl  w-[15rem] md:w-[25rem] hover:border-[#9da528] hover:border-2 ">
                        <p class="mb-2 text-xl font-bold">Mr. Rafael T. Alvaran</p>
                        <p>Founding Trustee, 2004</p>
                    </div>
                </button>

            </div>

            <div class="flex flex-col items-center" data-aos="fade-right">
                <img src="{{ asset('img/bot-Abigail Aurelia Belza.webp') }}" class="object-scale-down ">
                <button onclick="toggleModalbelza(true)">

                    <div
                        class="mt-5 text-center hover:bg-[#febd57] shadow-lg flex justify-center flex-col h-32 rounded-xl  w-[15rem] md:w-[25rem] hover:border-[#9da528] hover:border-2 ">
                        <p class="mb-2 text-xl font-bold">Abigail Aurelia B. Belza</p>
                        <p>President and Trustee, <br>October 2004</p>
                    </div>
                </button>
            </div>
            <div class="flex flex-col items-center" data-aos="fade-right">
                <img src="{{ asset('img/bot- Armand Cacacho.webp') }}" class="object-scale-down "> <button
                    onclick="toggleModalcacacho(true)">
                    <div
                        class="mt-5 text-center hover:bg-[#febd57]  shadow-lg flex justify-center flex-col h-32 rounded-xl w-[15rem] md:w-[25rem] hover:border-[#9da528] hover:border-2 ">
                        <p class="mb-2 text-xl font-bold">Armand R. Cacacho</p>
                        <p>Trustee since, 2020</p>
                    </div>
                </button>
            </div>
            <div class="flex flex-col items-center" data-aos="fade-right">
                <img src="{{ asset('img/new/Dr. Corazon PB. Claudio.webp') }}" class="object-scale-down ">
                <button onclick="toggleModalclaudio(true)">
                    <div
                        class="mt-8 text-center hover:bg-[#febd57] shadow-lg flex justify-center flex-col h-32 rounded-xl  w-[15rem] md:w-[25rem] hover:border-[#9da528] hover:border-2 ">
                        <p class="mb-2 text-xl font-bold">Dr. Corazon PB. Claudio, PhD</p>
                        <p>Trustee, 2019</p>
                    </div>
                </button>
            </div>
            <div class="flex flex-col items-center" data-aos="fade-left">
                <img src="{{ asset('img/bot- Lorna Derez.webp') }}" class="object-scale-down ">
                <button onclick="toggleModalderez(true)">
                    <div
                        class="mt-5 text-center hover:bg-[#febd57] shadow-lg flex justify-center flex-col h-32 rounded-xl  w-[15rem] md:w-[25rem] hover:border-[#9da528] hover:border-2 ">
                        <p class="mb-2 text-xl font-bold">Atty. Lorna R. Derez</p>
                        <p>Corporate Secretary<br>Founding Trustee, 2004</p>
                    </div>
                </button>
            </div>
            <div class="flex flex-col items-center justify-end" data-aos="fade-left">
                <!--<img src="{{ asset('img/new/Frame.webp') }}" class="object-scale-down ">-->
                <button onclick="toggleModalgallardo(true)">
                    <div
                        class="mt-5 text-center hover:bg-[#febd57] shadow-lg flex justify-center flex-col h-32 rounded-xl w-[15rem] md:w-[25rem] hover:border-[#9da528] hover:border-2 ">
                        <p class="mb-2 text-xl font-bold">Katherine Joyce J. Gallardo</p>
                        <p>Trustee, since 2019</p>
                    </div>
                </button>
            </div>
            <div class="flex flex-col items-center" data-aos="fade-right">
                <img src="{{ asset('img/bot- Rosario Medalla-Lacson.webp') }}" class="object-scale-down ">
                <button onclick="toggleModallacson(true)">
                    <div
                        class="mt-5 text-center hover:bg-[#febd57] shadow-lg flex justify-center flex-col h-32 rounded-xl w-[15rem] md:w-[25rem] hover:border-[#9da528] hover:border-2 ">
                        <p class="mb-2 text-xl font-bold">Rosario Medalla-Lacson</p>
                        <p>Trustee since, 2024</p>
                    </div>
                </button>
            </div>
            <div class="flex flex-col items-center" data-aos="fade-left">
                <img src="{{ asset('img/new/Mr. Rolando Malana.webp') }}" class="object-scale-down ">
                <button onclick="toggleModalmalana(true)">
                    <div
                        class="mt-5 text-center hover:bg-[#febd57] shadow-lg flex justify-center flex-col h-32 rounded-xl w-[15rem] md:w-[25rem] hover:border-[#9da528] hover:border-2 ">
                        <p class="mb-2 text-xl font-bold">Mr. Rolando B. Malana </p>
                        <p>Treasurer<br>Founding Trustee, 2004</p>
                    </div>
                </button>
            </div>
            <div class="flex flex-col items-center" data-aos="fade-right">
                <img src="{{ asset('img/bot- Gabriel Quemado II.webp') }}" class="object-scale-down ">
                <button onclick="toggleModalquemado(true)">
                    <div
                        class="mt-5 text-center hover:bg-[#febd57] shadow-lg flex justify-center flex-col h-32 rounded-xl  w-[15rem] md:w-[25rem] hover:border-[#9da528] hover:border-2 ">
                        <p class="mb-2 text-xl font-bold">Gabriel U. Quemado, ll</p>
                        <p>Founding Trustee, 2004</p>
                    </div>
                </button>
            </div>
            
            
        </div>
    </div>
    @include('frontend.pages.modal')
@endsection