@extends('_layouts.main')

@section('main')
    <div class="-mt-12 md:-mt-[103px]">
        <img class="relative z-[2] mb-10" src="{{ asset('img/banner-header-karir.jpg') }}" alt="">
    </div>
    <div class="mx-[10%] md:mx-[3%] lg:mx-[10%] mb-[10rem]">
        <h1 class="text-[30px] md:text-[70px] text-center text-[#62408F] ConfigRounded-Medium  ">
            Berkembang Bersama Kami
        </h1>
        <h2 class="text-[15px] md:text-[30px] text-center text-[#62408F] mb-[50px]  ">
            Seiring pertumbuhan perusahaan yang lebih pesat dan lebih jauh, kami selalu siap menyambut talenta yang
            bersemangat untuk bergabung dengan kami.
        </h2>

        <div class="flex flex-col md:flex-row">
            <div class="w-full md:w-[26%] lg:w-[30%] text-white mr-0 md:mr-3 mb-4 md:mb-0">
                <button class="bg-[#FF6363] px-4 py-2 md:px-[20px] md:py-3 rounded-xl flex items-center justify-center w-full ">
                    Lowongan yang tersedia
                    <img class="w-[15px] ml-2" src="{{ asset('img/sro6zd1l6hm04s4le1.svg') }}" alt="">
                </button>
                <ul class="list-disc text-[#4f3270] ml-6 mt-2">
                    {{-- <li>Accounting (ACT)</li> --}}
                    {{-- <li>IT Support (ITS)</li> --}}
                </ul>
            </div>
            <div class="w-full md:w-[70%]">
                <input class="border-[1px] border-[#eaeaea] bg-[#fafafa] focus:outline-none focus:border-blue-500 p-[10px] rounded-xl w-full mb-4 text-[#eaeaea] font-normal" placeholder="Application Code" type="text">
                <div class="flex flex-col md:flex-row">
                    <input class="border-[1px] border-[#eaeaea] bg-[#fafafa] focus:outline-none focus:border-blue-500 p-[10px] rounded-xl w-full md:w-[50%] mb-4 md:mb-4 md:mr-2 text-[#eaeaea] font-normal" placeholder="First name" type="text">
                    <input class="border-[1px] border-[#eaeaea] bg-[#fafafa] focus:outline-none focus:border-blue-500 p-[10px] rounded-xl w-full md:w-[50%] mb-4 md:mb-4 md:ml-2 text-[#eaeaea] font-normal" placeholder="Last name" type="text">
                </div>
                <input class="border-[1px] border-[#eaeaea] bg-[#fafafa] focus:outline-none focus:border-blue-500 p-[10px] rounded-xl w-full mb-4 text-[#eaeaea] font-normal" placeholder="Email" type="text">
                <div class="flex flex-col md:flex-row">
                    <input class="border-[1px] border-[#eaeaea] bg-[#fafafa] focus:outline-none focus:border-blue-500 p-[10px] rounded-xl w-full md:w-[50%] mb-4 md:mb-4 md:mr-2 text-[#eaeaea] font-normal" placeholder="Telephone / Cell phone 1"
                        type="text">
                    <input class="border-[1px] border-[#eaeaea] bg-[#fafafa] focus:outline-none focus:border-blue-500 p-[10px] rounded-xl w-full md:w-[50%] mb-4 md:mb-4 md:ml-2 text-[#eaeaea] font-normal" placeholder="Telephone / Cell phone 2"
                        type="text">
                </div>
                <textarea class="border-[1px] border-[#eaeaea] bg-[#fafafa] focus:outline-none focus:border-blue-500 p-[10px] rounded-xl w-full h-[150px] mb-4 text-[#eaeaea] font-normal" placeholder="Message"></textarea>

                <div class="flex flex-col md:flex-row justify-between items-center">
                    <div class="flex flex-col mb-5 md:mb-0 ">
                        <p class="text-[#62408f] font-medium mb-3 text-center md:text-left">
                            Upload CV*<br>File Upload Maximum 5Mb
                        </p>
                        <input class="ml-10 sm:ml-10 md:ml-0 block w-full text-sm text-[#62408f]  cursor-pointer " id="file_input" type="file">
                    </div>
                    <button disabled class="bg-[#62408f] hover:bg-[#4f3270] disabled:bg-[#bda1e3] py-2 px-[100px] h-[40px] md:h-[35px] flex items-center justify-center rounded-2xl shadow-md shadow-blue-200 text-white text-center" type="submit">
                        Submit
                    </button>
                </div>
            </div>
        </div>
    </div>
@endsection