@extends('layouts.base')
@section('title', 'Our Clients')
@section('content')

<style>
    .whatsapp-float {
        position: fixed;
        width: 200px;
        height: auto;
        bottom: -30px;
        right: 60px;
        /* background-color: #25d366; */
        color: #fff;
        /* border-radius: 50px; */
        text-align: center;
        font-size: 24px;
        /* box-shadow: 2px 2px 3px #999; */
        z-index: 1000;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: all 0.3s ease-in-out;
    }
</style>

<section class="imagebg image--light cover cover-blocks bg-primary-100 ">
    <div class="background-image-holder hidden-xs">
        <img alt="background" src="{{ asset('assets/img/goto bg.jpg') }}" />
    </div>
    <div class="container">
        <div class="row">
            <div class="col-12">
                <h3 class="text-2xl font-semibold md:mb-3 md:text-3xl">Klien <span class="text-primary-500"> Kami</span></h3>
                <h1 class="text-3xl font-bold text-primary-500 md:text-5xl ">PT. Carta Niskala Lokeswara</h1>
            </div>
        </div>
        <!--end of row-->
    </div>
</section>

<div class="p-12 lg:pt-24 lg:px-64">
    <div class="container my-5">
        <!-- Title and underline -->
        <div class="mb-4 text-left">
            <h1 class="text-3xl font-bold text-primary-500">Our Clients</h1>
            <hr class="w-32 h-1 bg-primary-500">
        </div>

        <!-- Product cards row -->
        <div class="row justify-content-center">
            <div class="col-md-3">
                <div class="overflow-hidden">
                    <div class="text-center">
                        <img src="{{ asset('assets/img/images/coco.png')}}" alt="Product Image" class="img-fluid mb-2" style="height: 200px; object-fit: contain;">
                        <!-- <p class="font-semibold text-2xl text-primary-500">Percayakan pada Kami, Partner terbaik maklun tissue Anda.</p> -->
                    </div>
                </div>
            </div>
            <!-- Added another image card -->
            <div class="col-md-3">
                <div class="overflow-hidden">
                    <div class="text-center">
                        <img src="{{ asset('assets/img/images/dante.png')}}" alt="Another Product Image" class="img-fluid mb-2" style="height: 200px; object-fit: contain;">
                        <!-- <p class="font-semibold text-2xl text-primary-500">Your product description here.</p> -->
                    </div>
                </div>
            </div>

            <div class="col-md-3">
                <div class="overflow-hidden">
                    <div class="text-center">
                        <img src="{{ asset('assets/img/images/goto.png')}}" alt="Another Product Image" class="img-fluid mb-2" style="height: 200px; object-fit: contain;">
                        <!-- <p class="font-semibold text-2xl text-primary-500">Your product description here.</p> -->
                    </div>
                </div>
            </div>

            <div class="col-md-3">
                <div class="overflow-hidden">
                    <div class="text-center">
                        <img src="{{ asset('assets/img/images/imizu.png')}}" alt="Another Product Image" class="img-fluid mb-2" style="height: 200px; object-fit: contain;">
                        <!-- <p class="font-semibold text-2xl text-primary-500">Your product description here.</p> -->
                    </div>
                </div>
            </div>

            <div class="col-md-3">
                <div class="overflow-hidden">
                    <div class="text-center">
                        <img src="{{ asset('assets/img/images/king.png')}}" alt="Another Product Image" class="img-fluid mb-2" style="height: 200px; object-fit: contain;">
                        <!-- <p class="font-semibold text-2xl text-primary-500">Your product description here.</p> -->
                    </div>
                </div>
            </div>

            <div class="col-md-3">
                <div class="overflow-hidden">
                    <div class="text-center">
                        <img src="{{ asset('assets/img/images/momo.png')}}" alt="Another Product Image" class="img-fluid mb-2" style="height: 200px; object-fit: contain;">
                        <!-- <p class="font-semibold text-2xl text-primary-500">Your product description here.</p> -->
                    </div>
                </div>
            </div>

            <div class="col-md-3">
                <div class="overflow-hidden">
                    <div class="text-center">
                        <img src="{{ asset('assets/img/images/nissu.png')}}" alt="Another Product Image" class="img-fluid mb-2" style="height: 200px; object-fit: contain;">
                        <!-- <p class="font-semibold text-2xl text-primary-500">Your product description here.</p> -->
                    </div>
                </div>
            </div>
            <!-- You can add more cards following the same structure -->
        </div>
    </div>
</div>

    <div class="bg-primary-500">
        <h3 class="text-2xl p-12 md:text-3xl text-center text-white font-bold">Percayakan pada Kami, Partner terbaik maklun tissue Anda.</h3>
    </div>

<a href="https://wa.me/6282221009488" target="_blank" class="whatsapp-float">
    <img src="{{ asset('assets/img/images/wa.png') }}" alt="WhatsApp Icon">
</a>
@endsection