@extends('layouts.main-app')

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

@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 OPPORTUNITIES </h1>
        </div>
    </div>

    <div class="relative h-full ">
        <img class="absolute z-0 object-cover w-full h-full -mt-40" src="{{ asset('images/Background.png') }}" alt="">
        <div class="container relative max-w-screen-xl px-4 mx-auto">
            <div data-aos="fade-up" data-aos-duration="1000" class="flex justify-center">
                <div class="flex flex-col  w-[50rem]">
                    <img src="{{ asset('images/Revision-Folders/Resources/job-opp.webp') }}" alt="">
                    <p class="text-center py-8">
                        Whether you're aiming to ascend the corporate ladder, seeking a better job, or transitioning to a
                        career in Information Technology or Data Processing, you've come to the right place. Explore our
                        list of available jobs and click on the specific job opening that piques your interest. We regularly
                        update our job postings, so be sure to check our website frequently for new and exciting
                        opportunities.
                    </p>
                </div>
            </div>

            <div data-aos="fade-up" data-aos-duration="1000"
                class="grid grid-cols-1 py-8 space-y-8 md:grid-cols-2 md:space-y-0 text-center">
                @foreach ($category as $categories)
                    <div class="flex flex-col space-y-12">
                        <label class="font-bold text-3xl" for="">{{ $categories->name }}</label>
                        <a href="{{ url('job_opportunities_single_page', $categories->id) }}">
                            <button class="text-lg font-medium text-white bg-[#06402B] p-4 px-8 rounded-full">
                                View List
                            </button>
                        </a>
                    </div>
                @endforeach

            </div>
        </div>
    </div>



    @include('layouts.footer')


@endsection