@extends('client.target.partials.layout')
@section('header')
<title>Job Categories - {{env("APP_NAME")}}</title>
@endsection

@section('content')


<section class="banner-background d-flex align-items-center text-center">
    <div class="container position-relative" uk-scrollspy="cls: uk-animation-slide-top-medium; repeat: true">
        <div class="square" style="left:0%; z-index:2;"></div>
        <p class="text-light">Home / Job Categories</p>
        <p class="medium-text text-light">Job Categories</p>
    </div>
</section>

<section class="job-category section-padding custom-background">
    <div class="container vstack gap-3">
        <div class="row g-3 d-flex align-items-center">

        @foreach(MPCMS::getjobcategories() as $category)
            <div class="col-md-4">
                <div class="graphics-card p-2 position-relative">
                    <div>
                        <div class="uk-inline-clip uk-transition-toggle" tabindex="0">
                                <a href="{{ route('single_job_category', ['alias' => $category->alias]) }}">
                                    <img class="img-fluid custom-img-job" src="{{site_url($category->thumb)}}" alt=""> 
                                     </a>
                        </div>
                    </div>
                    <div class="contents-card ">
                        <a href="{{ route('single_job_category', ['alias' => $category->alias]) }}">
                            <p class="custom-text text-danger fs-5">{{$category->title}}</p>
                        </a>
                        <p class="">
                        {!!substr($category->details,0,120).'...'!!}
                        </p>
                        <a class="learn-more no-underline" href="{{ route('single_job_category', ['alias' => $category->alias]) }}">Learn More <i class="fa-solid fa-arrow-right ms-2"></i></a>
                    </div>

                </div>
            </div>
@endforeach


</section>

@endsection