@extends('layouts.main-app')

@section('title', 'Job Description')

@section('content')

    @include('layouts.navbar')
    <div class="relative h-[20rem]">
        <div class="relative z-50 py-20 text-center">
            <h1 class="text-4xl font-bold text-black">JOB DESCRIPTION </h1>
        </div>
    </div>

    <div class="container max-w-screen-xl px-4 mx-auto overflow-hidden py-14">
        <h1 class="mb-8 text-4xl font-bold">{{ $career->position }}</h1>
        <div class="flex flex-col md:flex-row md:gap-x-12 gap-y-4">
            <div data-aos="fade-right" data-aos-duration="1000" class="space-y-4">
                <div class="pb-20 rounded-xl">
                    <div class=" p-4 rounded-t-xl">
                        <h1 class="font-bold text-[#0f1d18]">
                            JOB QUALIFICATIONS
                        </h1>
                    </div>
                    <div class="p-4">
                        <p>{!! $career->qualifications !!}</p>
                    </div>
                </div>
                <div class="pb-20  rounded-xl">
                    <div class=" p-4 rounded-t-xl">
                        <h1 class="font-bold text-[#0f1d18]">
                            JOB RESPONSIBILITIES
                        </h1>
                    </div>
                    <div class="p-4">
                        <p>
                            {!! $career->responsibilities !!}
                        </p>
                    </div>
                </div>
                <div>
                    <a href="{{ url('application_form') }}" class="bg-[#0f1d18] text-white p-4 px-14 rounded-full">Apply</a>
                </div>
            </div>
        </div>
    </div>


    {{-- @include('layouts.newsletter') --}}


    @include('layouts.footer')


@endsection