@extends('layouts.main-app')

@section('title', 'Microsite - Tnalak')

@section('content')


@include('layouts.navbar')
<div>
    <img class="w-full" src="{{asset('images/microsite_tnalak/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-2 lg:grid-cols-8">

        <div></div>
        <div></div>
        <div class="lg:col-span-2">
            <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-agribusiness.webp')}}" alt="">
                </div>
                <h1 class="text-sm font-bold text-center">AGRI-BUSINESS</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-agri.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">AGRI-BUSINESS</h1>
                        </div>
                    </div>
                </div>
            </div>
        </div>



        <div class="lg:col-span-2">
            <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></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