@extends('layouts.main-app')

@section('title', 'Microsite - Kaakbay sa Kinabukasan')

@section('content')


@include('layouts.navbar')
<div>
    <img class="w-full" src="{{asset('images/microsite_ksk/banner.webp')}}" alt="">
</div>

@include('layouts.services')

<div class="container max-w-screen-xl mx-auto">
    <hr class="h-1 my-4 border-0 bg-gradient-to-r from-blue-500 via-red-500 via-orange-500 to-yellow-500">
    <div class="grid grid-cols-1 gap-4 px-4 md:grid-cols-3 lg:grid-cols-4">

        <div class="relative flex flex-col items-center justify-center h-[12rem] p-4 space-y-4 shadow-xl group rounded-2xl">
            <!-- Default content -->
            <div>
                <img src="{{asset('images/microsite_asiapro/icon-construction.webp')}}" alt="">
            </div>
            <h1 class="text-sm font-bold text-center">CONSTRUCTION</h1>

            <!-- Hover content -->
            <div class="absolute inset-0 transition-opacity duration-300 opacity-0 group-hover:opacity-100">
                <img class="absolute object-cover w-full h-full rounded-2xl" src="{{asset('images/microsite_asiapro/indu-sq-construction.webp')}}" alt="">

                <div class="relative flex justify-center w-full h-full">
                    <div class="absolute bottom-0 p-2">
                        <h1 class="text-sm text-center text-white">CONSTRUCTION</h1>
                    </div>
                </div>
            </div>
        </div>


        <div class="relative flex flex-col items-center justify-center h-[12rem] p-4 space-y-4 shadow-xl group rounded-2xl">
            <!-- Default content -->
            <div>
                <img src="{{asset('images/microsite_asiapro/icon-retail.webp')}}" alt="">
            </div>
            <h1 class="text-sm font-bold text-center">RETAIL & STORE MERCHANDISING</h1>

            <!-- Hover content -->
            <div class="absolute inset-0 transition-opacity duration-300 opacity-0 group-hover:opacity-100">
                <img class="absolute object-cover w-full h-full rounded-2xl" src="{{asset('images/microsite_asiapro/indu-sq-retail.webp')}}" alt="">

                <div class="relative flex justify-center w-full h-full">
                    <div class="absolute bottom-0 p-2">
                        <h1 class="text-sm text-center text-white">RETAIL & STORE MERCHANDISING</h1>
                    </div>
                </div>
            </div>
        </div>


        <div class="relative flex flex-col items-center justify-center h-[12rem] p-4 space-y-4 shadow-xl group rounded-2xl">
            <!-- Default content -->
            <div>
                <img src="{{asset('images/microsite_asiapro/icon-resto.webp')}}" alt="">
            </div>
            <h1 class="text-sm font-bold text-center">QUICK-SERVICE RESTAURANTS(QSR) RESTAURANT SUPPORT (FAST-FOOD)</h1>

            <!-- Hover content -->
            <div class="absolute inset-0 transition-opacity duration-300 opacity-0 group-hover:opacity-100">
                <img class="absolute object-cover w-full h-full rounded-2xl" src="{{asset('images/microsite_asiapro/indu-sq-qsr.webp')}}" alt="">

                <div class="relative flex justify-center w-full h-full">
                    <div class="absolute bottom-0 p-2">
                        <h1 class="text-sm text-center text-white">QUICK-SERVICE RESTAURANTS(QSR) RESTAURANT SUPPORT (FAST-FOOD)</h1>
                    </div>
                </div>
            </div>
        </div>




        <div class="relative flex flex-col items-center justify-center h-[12rem] p-4 space-y-4 shadow-xl group rounded-2xl">
            <!-- Default content -->
            <div>
                <img src="{{asset('images/microsite_gak/icon-tollmanu.webp')}}" alt="">
            </div>
            <h1 class="text-sm font-bold text-center">TOLL MANUFACTURING</h1>

            <!-- Hover content -->
            <div class="absolute inset-0 transition-opacity duration-300 opacity-0 group-hover:opacity-100">
                <img class="absolute object-cover w-full h-full rounded-2xl" src="{{asset('images/microsite_asiapro/indu-sq-tollmanu.webp')}}" alt="">

                <div class="relative flex justify-center w-full h-full">
                    <div class="absolute bottom-0 p-2">
                        <h1 class="text-sm text-center text-white">TOLL MANUFACTURING</h1>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

@include('layouts.partner_with_us')


@include('layouts.mpc')


@include('layouts.valued_clients')


<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 overflow-hidden lg:grid-cols-2">
        <div data-aos="fade-right"
            data-aos-duration="1500" 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 data-aos="fade-left"
            data-aos-duration="1500" class="pb-8">
            @include('layouts.contact')
        </div>
    </div>
</div>


<script>
    var swiper = new Swiper(".default-carousel", {
        loop: true,
        pagination: {
            el: ".swiper-pagination",
            clickable: true,
        },
        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
    });
</script>




@include('layouts.footer')


@endsection