@extends('layouts.base')
@section('title', 'About Us')
@section('content')

<style>
    ul.custom-list {
        list-style: none;
        padding-left: 0;
        font-size: 1.25rem;
    }

    ul.custom-list li {
        padding: 5px 0;
    }

    ul.custom-list li::before {
        content: "•";
        /* color: black; */
        display: inline-block;
        width: 1em;
        margin-left: -1em;
    }

    .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 relative overflow-hidden">
    <div class="absolute hidden-xs top-0 left-0 right-0 hidden-xs select-none">
        <img alt="background" src="{{ asset('assets/img/images/bg-hero-2.png') }}" class="w-full" />
    </div>
    <div class="container">
        <div class="row">
            <div class="col-12">
                <h3 class="text-2xl font-semibold md:mb-3 md:text-3xl">Tentang <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>
    <!--end of container-->
</section>

<div class="bg-white p-12 lg:py-24 lg:px-64">
    <div class="text-default">
        <h1 class="text-3xl mb-0 font-bold text-primary-500">Kapasitas</h1>
        <hr class="w-24 h-1 bg-primary-500 mb-4">
        <p class=" md:text-xl font-bold text-default" style="font-size: 24px; margin-bottom: 24px;">50.000 Karton per bulan</p>
    </div>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
        <div class="text-center shadow-lg rounded-xl p-3">
            <div class="flex justify-center">
                <a href="{{  asset('assets/img/images/certificate/sinar-mas.png') }}" data-lightbox="gallery" data-title="Sertifikasi Bahan APP Sinar Mas">
                    <img src="{{  asset('assets/img/images/certificate/sinar-mas.png') }}" alt="Sertifikasi Bahan APP Sinar Mas" class="h-56">
                </a>
            </div>
            <p class="text-xl font-semibold text-black mt-3">
                Sertifikasi Bahan APP Sinar Mas
            </p>
        </div>
        <div class="text-center shadow-lg rounded-xl p-3">
            <div class="flex justify-center gap-3">
                <a href="{{  asset('assets/img/images/certificate/Sertifikat merek DANTE-1.png') }}" data-lightbox="gallery" data-title="Sertifikat merek DANTE">
                    <img src="{{ asset('assets/img/images/certificate/Sertifikat merek DANTE-1.png') }}" alt="Izin Edar Resmi" class="h-56">
                </a>
                <a href="{{  asset('assets/img/images/certificate/Sertifikat merek DANTE-2.png') }}" data-lightbox="gallery" data-title="Sertifikat merek DANTE">
                    <img src="{{ asset('assets/img/images/certificate/Sertifikat merek DANTE-2.png') }}" alt="Izin Edar Resmi" class="h-56">
                </a>
            </div>
            <p class="text-xl font-semibold text-black mt-3">
                Sertifikat Kemenkes RI dan Izin Edar Resmi
            </p>
        </div>
        <div class="text-center rounded-xl p-3 col-span-full">
            <div class="flex justify-center rounded-2xl overflow-hidden">
                <a href="{{  asset('assets/img/images/certificate/management.jpg') }}" data-lightbox="gallery" data-title="Management PT. Carta Niskala Lokeswara">
                    <img src="{{  asset('assets/img/images/certificate/management.jpg') }}" alt="Management PT. Carta Niskala Lokeswara" class="">
                </a>
            </div>
            <p class="text-xl font-semibold text-black mt-3">
                Management PT Carta Niskala Lokeswara
            </p>
        </div>
    </div>
</div>

<div class="bg-primary-50 p-12 lg:py-24 lg:px-64">

    <div class=" grid grid-cols-1 lg:grid-cols-2 gap-6">
        <div class="text-default">
            <div class="mb-12">
                <h1 class="text-3xl mb-0 font-bold text-primary-500">Visi</h1>
                <hr class="w-24 h-1 bg-primary-500 mb-4">
                <p class="md:text-xl font-semibold text-default">Menjadi produsen tissue terbaik di Indonesia khususnya di segment market Mark Alone</p>
            </div>

            <div>
                <h1 class="text-3xl mb-0 font-bold text-primary-500">Misi</h1>
                <hr class="w-24 h-1 bg-primary-500 mb-4">
                <ul class="list-disc list-inside pl-3 text-xl font-semibold">
                    <li class="text-default">Menyediakan bahan dengan kualitas tinggi</li>
                    <li class="text-default">Membina hubungan yang baik kepada mitra bisnis kami</li>
                    <li class="text-default">Memberikan pelayanan terbaik</li>
                </ul>
            </div>
        </div>


        <div class="grid grid-cols-2 gap-4">
            <a href="{{  asset('assets/img/images/about-us/vm-1.jpg') }}" data-lightbox="gallery" data-title="PT. Carta Niskala Lokeswara">
                <img src="{{  asset('assets/img/images/about-us/vm-1.jpg') }}" alt="Description of Image 1" class="w-full h-auto">
            </a>
            <a href="{{  asset('assets/img/images/about-us/vm-2.jpg') }}" data-lightbox="gallery" data-title="PT. Carta Niskala Lokeswara">
                <img src="{{  asset('assets/img/images/about-us/vm-2.jpg') }}" alt="Description of Image 1" class="w-full h-auto">
            </a>
            <a href="{{  asset('assets/img/images/about-us/vm-3.jpg') }}" data-lightbox="gallery" data-title="PT. Carta Niskala Lokeswara">
                <img src="{{  asset('assets/img/images/about-us/vm-3.jpg') }}" alt="Description of Image 1" class="w-full h-auto">
            </a>
            <a href="{{  asset('assets/img/images/about-us/vm-4.jpg') }}" data-lightbox="gallery" data-title="PT. Carta Niskala Lokeswara">
                <img src="{{  asset('assets/img/images/about-us/vm-4.jpg') }}" alt="Description of Image 1" class="w-full h-auto">
            </a>
        </div>


    </div>
</div>
<div class="bg-white p-12 lg:py-24 lg:px-64">
    <div class="grid grid-cols-1 md:grid-cols-2 md:gap-6 items-center">
        <div class="text-left h-full md:flex md:flex-col md:items-end md:justify-center md:pr-24 md:text-5xl md:border-r-2 md:border-r-primary-300 md:gap-3">
            <h3 class="text-2xl font-semibold md:text-5xl md:font-bold md:text-primary-500">Pembangunan Masa Depan</h3>
        </div>
        <div class="mt-12 md:mt-0">
            <div class="flex items-center gap-6">
                <div>
                    <h5 class="m-0 font-normal text-lg md:text-2xl tracking-wide text-default mt-4">2024 - 2025</h5>
                    <h6 class=" text-default text-xl md:text-2xl"><strong>Penambahan mesin produksi</strong> untuk kapasitas yang <span class="text-primary-500">semakin besar</span></h6>
                </div>
            </div>
            <div class="flex items-center gap-6 my-6 md:my-12">
                <div>
                    <h5 class="m-0 font-normal text-lg md:text-2xl tracking-wide text-default">2025 - 2027</h5>
                    <h6 class=" text-default text-xl md:text-2xl">Mendirikan <strong>divisi in-house </strong> paper mill</h6>
                </div>
            </div>

        </div>
    </div>
</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