@extends('layouts.landingPage.master')

@section('title')
    {{ __('message.Detail Company') }}
@endsection

@section('content')
    <section class="relative pb-10 pt-20 lg:pt-48">
        <picture class="pointer-events-none absolute inset-x-0 top-0 -z-10 dark:hidden h-full">
            <img src="{{ asset('uploads/landing-page/home/images/' . Helper::homeSetting('heroBg')) }}" alt="gradient"
                class="w-full h-full object-cover" />
        </picture>
        <div class="container">
            <h2 class="mb-4 mt-2 font-display text-3xl text-jacarta-700 dark:text-white"style="text-align: justify">
                {{ __('message.Detail Anggota') }}
            </h2>
            <hr style="max-width: 10%; color:#BA3C3C; padding:10px;">
        </div>
    </section>

    <section class="relative py-16">
        <div class="container">
            <div class="flex ">
                <div class="w-1/2">
                    <div class="flex justify-center items-center px-10">
                        <div class="flex justify-center items-center bg-white max-w-4xl shadow-2xl rounded-2xl"
                            style="height: 500px; width:400px">
                            <img class="object-cover overflow-hidden px-5 justify-center"
                                src="https://1.bp.blogspot.com/-vfRbSl1WS0w/YRSXeRgO2-I/AAAAAAAAI0w/Z8FaDJQgQPk9CHA2MPvSAIQSRiI-j5x8gCLcBGAsYHQ/s1286/logo-ptba.png"
                                alt="">
                        </div>
                    </div>
                </div>
                <div class="w-1/2">
                    <div class="container px-10">
                        <p class="font-display text-2xl text-jacarta-700 px-2 mb-5">{{ $membershipCompany->name_company }}
                        </p>
                        <div class="flex">
                            <div class="w-1/2">
                                <div class="flex py-2">
                                    <div>
                                        <i class="fas fa-envelope px-2" style="color: #BA3C3C"></i>
                                    </div>
                                    <div>
                                        <p style="color: #BA3C3C">corsec@bukitasam.co.id
                                        </p>
                                    </div>
                                </div>
                                <div class="flex py-2">
                                    <div>
                                        <i class="fas fa-map-marker-alt px-2" style="color: #BA3C3C"></i>
                                    </div>
                                    <div>
                                        <p style="color: #BA3C3C">Jl. Parigi
                                            No.1, Tanjung Enim 31716, Sumatera Selatan
                                        </p>
                                    </div>
                                </div>
                                <div class="flex py-2">
                                    <div>
                                        <i class="fas fa-mobile px-2" style="color: #BA3C3C"></i>
                                    </div>
                                    <div>
                                        <p style="color: #BA3C3C">+(62) 734 451 096
                                        </p>
                                    </div>
                                </div>
                                <div class="flex py-2">
                                    <div>
                                        <i class="fas fa-globe px-2" style="color: #BA3C3C"></i>
                                    </div>
                                    <div>
                                        <p style="color: #BA3C3C">
                                            www.ptba.co.id
                                        </p>
                                    </div>
                                </div>


                            </div>
                            <div class="w-1/2">
                                <div class="flex justify-center items-center max-w-4xl ">
                                    <img class="object-cover overflow-hidden px-5 justify-center"
                                        src="https://seeklogo.com/images/Q/qr-code-logo-27ADB92152-seeklogo.com.png"
                                        alt="">
                                </div>
                            </div>
                        </div>
                        <div class="w-full py-5" style="text-align: justify">
                            <p>
                                {{ __('message.Tidak hanya di sektor batu bara saja, sejalan dengan transformasi bisnis Bukit Asam, perusahaan juga membidik kesempatan bisnis baru yakni dengan memasuki bisnis energi baru dan terbarukan yang menandakan peran penting Bukit Asam dalam mendukung ketahanan energi nasional') }}
                            </p>
                        </div>
                        <a href="#"
                            class="rounded-full bg-accent py-2 px-4 text-center font-semibold text-white  hover:bg-accent-dark">
                            {{ __('message.Selengkapnya') }}
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="relative py-16">
        <div class="container">
            <div class="flex">
                <div class="w-1/2">
                    <div class="container">
                        <div class="border rounded-md px-10">
                            <p class="font-display text-2xl px-5 py-5" style="color: #BA3C3C">
                                {{ __('message.Sertifikasi') }}</p>
                            <div class="flex px-5 py-5">
                                <div class="pt-2 px-2">
                                    <img src="{{ asset('landing/img/arrow.png') }}" alt="">
                                </div>
                                <div style="text-align: justify">
                                    <p class="font-display text-lg text-jacarta-700 pb-2">
                                        {{ __('message.Sertifikat ISPS (International Ship and Port Facility Security) Code') }}
                                    </p>
                                    <p class="py-2 text-jacarta-700">{{ __('message.Oktober 12, 2022') }}</p>
                                    <p>
                                        {{ __('message.PTBA dalam menjamin rantai pasok produknya, memiliki Statement of Compliance of a Port Facility berdasarkan aturan The International Ship and Port Facility Security Code (ISPS Code) di 3 lokasi yakni Tarahan, Kertapati, dan Teluk Bayur.') }}
                                    </p>
                                </div>
                            </div>
                            <div class="flex px-5 py-5">
                                <div class="pt-2 px-2">
                                    <img src="{{ asset('landing/img/arrow.png') }}" alt="">
                                </div>
                                <div style="text-align: justify">
                                    <p class="font-display text-lg text-jacarta-700 pb-2">
                                        {{ __('message.Sertifikat ISPS (International Ship and Port Facility Security) Code') }}
                                    </p>
                                    <p class="py-2 text-jacarta-700">{{ __('message.Oktober 12, 2022') }}</p>
                                    <p>
                                        {{ __('message.PTBA dalam menjamin rantai pasok produknya, memiliki Statement of Compliance of a Port Facility berdasarkan aturan The International Ship and Port Facility Security Code (ISPS Code) di 3 lokasi yakni Tarahan, Kertapati, dan Teluk Bayur.') }}
                                    </p>
                                </div>
                            </div>
                            <div class="flex px-5 py-5">
                                <div class="pt-2 px-2">
                                    <img src="{{ asset('landing/img/arrow.png') }}" alt="">
                                </div>
                                <div style="text-align: justify">
                                    <p class="font-display text-lg text-jacarta-700 pb-2">
                                        {{ __('message.Sertifikat ISPS (International Ship and Port Facility Security) Code') }}
                                    </p>
                                    <p class="py-2 text-jacarta-700">{{ __('message.Oktober 12, 2022') }}</p>
                                    <p>
                                        {{ __('message.PTBA dalam menjamin rantai pasok produknya, memiliki Statement of Compliance of a Port Facility berdasarkan aturan The International Ship and Port Facility Security Code (ISPS Code) di 3 lokasi yakni Tarahan, Kertapati, dan Teluk Bayur.') }}
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="w-1/2">
                    <div class="container">
                        <div class="border rounded-md px-10">
                            <p class="font-display text-2xl px-5 py-5" style="color: #BA3C3C">
                                {{ __('message.Penghargaan') }}</p>
                            <div class="flex px-5 py-5">
                                <div class="pt-2 px-2">
                                    <img src="{{ asset('landing/img/arrow.png') }}" alt="">
                                </div>
                                <div style="text-align: justify">
                                    <p class="font-display text-lg text-jacarta-700 pb-2">
                                        {{ __('message.Sertifikat ISPS (International Ship and Port Facility Security) Code') }}
                                    </p>
                                    <p class="py-2 text-jacarta-700">{{ __('message.Oktober 12, 2022') }}</p>
                                    <p>
                                        {{ __('message.PTBA dalam menjamin rantai pasok produknya, memiliki Statement of Compliance of a Port Facility berdasarkan aturan The International Ship and Port Facility Security Code (ISPS Code) di 3 lokasi yakni Tarahan, Kertapati, dan Teluk Bayur.') }}
                                    </p>
                                </div>
                            </div>
                            <div class="flex px-5 py-5">
                                <div class="pt-2 px-2">
                                    <img src="{{ asset('landing/img/arrow.png') }}" alt="">
                                </div>
                                <div style="text-align: justify">
                                    <p class="font-display text-lg text-jacarta-700 pb-2">
                                        {{ __('message.Sertifikat ISPS (International Ship and Port Facility Security) Code') }}
                                    </p>
                                    <p class="py-2 text-jacarta-700">{{ __('message.Oktober 12, 2022') }}</p>
                                    <p>
                                        {{ __('message.PTBA dalam menjamin rantai pasok produknya, memiliki Statement of Compliance of a Port Facility berdasarkan aturan The International Ship and Port Facility Security Code (ISPS Code) di 3 lokasi yakni Tarahan, Kertapati, dan Teluk Bayur.') }}
                                    </p>
                                </div>
                            </div>
                            <div class="flex px-5 py-5">
                                <div class="pt-2 px-2">
                                    <img src="{{ asset('landing/img/arrow.png') }}" alt="">
                                </div>
                                <div style="text-align: justify">
                                    <p class="font-display text-lg text-jacarta-700 pb-2">
                                        {{ __('message.Sertifikat ISPS (International Ship and Port Facility Security) Code') }}
                                    </p>
                                    <p class="py-2 text-jacarta-700">{{ __('message.Oktober 12, 2022') }}</p>
                                    <p>
                                        {{ __('message.PTBA dalam menjamin rantai pasok produknya, memiliki Statement of Compliance of a Port Facility berdasarkan aturan The International Ship and Port Facility Security Code (ISPS Code) di 3 lokasi yakni Tarahan, Kertapati, dan Teluk Bayur.') }}
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="relative py-16">
        <div class="container">
            <h2 class="mb-4 mt-2 font-display text-3xl text-jacarta-700 dark:text-white"style="text-align: justify">
                {{ __('message.Produk') }}
            </h2>
            <hr style="max-width: 5%; color:#BA3C3C; padding:10px;">
            <div class="flex flex-wrap py-10">
                <div class="w-1/3 py-5">
                    <div class="bg-light-base shadow-xl mx-4 rounded-xl max-w-sm dark:bg-gray-800 dark:border-gray-700">
                        <a href="#">
                            <img class="rounded-t-lg px-10 py-10" src="https://flowbite.com/docs/images/blog/image-1.jpg"
                                alt="">
                        </a>
                        <div class="px-5 pb-2">
                            <a href="#">
                                <h5
                                    class="text-jacarta-700 text-left font-bold text-lg tracking-tight mb-2 dark:text-light-base">
                                    Brown-coal</h5>
                            </a>
                            <p class="font-normal text-gray-700 mb-3 dark:text-gray-400">3-ply, rare deal
                            </p>
                        </div>

                    </div>
                </div>
                <div class="w-1/3 py-5">
                    <div class="bg-light-base shadow-xl mx-4 rounded-xl max-w-sm dark:bg-gray-800 dark:border-gray-700">
                        <a href="#">
                            <img class="rounded-t-lg px-10 py-10" src="https://flowbite.com/docs/images/blog/image-1.jpg"
                                alt="">
                        </a>
                        <div class="px-5 pb-2">
                            <a href="#">
                                <h5
                                    class="text-jacarta-700 text-left font-bold text-lg tracking-tight mb-2 dark:text-light-base">
                                    Brown-coal </h5>
                            </a>
                            <p class="font-normal text-gray-700 mb-3 dark:text-gray-400 text-left">3-ply, rare deal
                            </p>
                        </div>

                    </div>
                </div>
                <div class="w-1/3 py-5">
                    <div class="bg-light-base shadow-xl mx-4 rounded-xl max-w-sm dark:bg-gray-800 dark:border-gray-700">
                        <a href="#">
                            <img class="rounded-t-lg px-10 py-10" src="https://flowbite.com/docs/images/blog/image-1.jpg"
                                alt="">
                        </a>
                        <div class="px-5 pb-2">
                            <a href="#">
                                <h5
                                    class="text-jacarta-700 text-left font-bold text-lg tracking-tight mb-2 dark:text-light-base">
                                    Brown-coal </h5>
                            </a>
                            <p class="font-normal text-gray-700 mb-3 dark:text-gray-400 text-left">3-ply, rare deal
                            </p>
                        </div>

                    </div>
                </div>
                <div class="w-1/3 py-5">
                    <div class="bg-light-base shadow-xl mx-4 rounded-xl max-w-sm dark:bg-gray-800 dark:border-gray-700">
                        <a href="#">
                            <img class="rounded-t-lg px-10 py-10" src="https://flowbite.com/docs/images/blog/image-1.jpg"
                                alt="">
                        </a>
                        <div class="px-5 pb-2">
                            <a href="#">
                                <h5
                                    class="text-jacarta-700 text-left font-bold text-lg tracking-tight mb-2 dark:text-light-base">
                                    Brown-coal </h5>
                            </a>
                            <p class="font-normal text-gray-700 mb-3 dark:text-gray-400 text-left">3-ply, rare deal
                            </p>
                        </div>

                    </div>
                </div>
                <div class="w-1/3 py-5">
                    <div class="bg-light-base shadow-xl mx-4 rounded-xl max-w-sm dark:bg-gray-800 dark:border-gray-700">
                        <a href="#">
                            <img class="rounded-t-lg px-10 py-10" src="https://flowbite.com/docs/images/blog/image-1.jpg"
                                alt="">
                        </a>
                        <div class="px-5 pb-2">
                            <a href="#">
                                <h5
                                    class="text-jacarta-700 text-left font-bold text-lg tracking-tight mb-2 dark:text-light-base">
                                    Brown-coal </h5>
                            </a>
                            <p class="font-normal text-gray-700 mb-3 dark:text-gray-400 text-left">3-ply, rare deal
                            </p>
                        </div>

                    </div>
                </div>
                <div class="w-1/3 py-5">
                    <div class="bg-light-base shadow-xl mx-4 rounded-xl max-w-sm dark:bg-gray-800 dark:border-gray-700">
                        <a href="#">
                            <img class="rounded-t-lg px-10 py-10" src="https://flowbite.com/docs/images/blog/image-1.jpg"
                                alt="">
                        </a>
                        <div class="px-5 pb-2">
                            <a href="#">
                                <h5
                                    class="text-jacarta-700 text-left font-bold text-lg tracking-tight mb-2 dark:text-light-base">
                                    Brown-coal Bukit Asam</h5>
                            </a>
                            <p class="font-normal text-gray-700 mb-3 dark:text-gray-400 text-left">3-ply, rare deal
                            </p>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </section>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
        integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="
        crossorigin="anonymous" />
@endsection