@extends('client.target.partials.layout')
@section('header')
<title>{{env("APP_NAME")}}</title>
@endsection
@section('content')
@include("client.target.slider")
<section class="section-padding custom-background">
    <div class="container">
        <div class="row g-5 ">
            <div class="col-md-6" uk-scrollspy="cls: uk-animation-slide-right-medium; repeat: true">
            @php $aboutus=MPCMS::getarticle('welcome') @endphp 
                <img src="{{$aboutus->cover_photo}}" class="img-fluid object-fit-cover" alt="">
            </div>
            <div class="col-md-6">
               <p class="medium-text text-uppercase fw-bold">{!!$aboutus->title!!}</p>
                <p class="mt-3">
                    {!!substr($aboutus->text,0,150).'...'!!}
                </p>

                <div class="row g-3 d-flex justify-content-start mt-3 about-us" uk-scrollspy="target: > div; cls: uk-animation-slide-bottom-medium; delay: 300;  repeat: true">
                    <div class="col-4 text-center ">
                        <i class="fa-regular fa-thumbs-up"></i>
                        <p class="fw-bold">Successful Ventures</p>
                    </div>
                    <div class="col-4 text-center ">
                        <i class="fa-regular fa-user"></i>
                        <p class="fw-bold">Business Range </p>

                    </div>
                    <div class="col-4 text-center ">
                        <i class="fa-solid fa-earth-americas"></i>
                        <p class="fw-bold">Countries Affiliation</p>

                    </div>
                </div>
               
                <div class="mt-4" uk-scrollspy="target: > div; cls: uk-animation-slide-bottom-medium; delay: 300;  repeat: true">
                    <a class="custom-btn" aria-current="page" href="about/introduction">Read More <i class="fa-solid fa-arrow-right ms-2"></i></a>
                </div>







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


<section class="bg-light partners section-padding" style="background-image: url('assets/img/bg-dark.jpg'); background-repeat: no-repeat; background-position: center top; background-size: cover;">
    <div class="container">
        <div class="text-center">
            <p class="fw-bold">Our Partners</p>
            <p class="medium-text">Collaborators & Clients</p>
        </div>
        <div class="owl-carousel owl-theme mt-5" id="clients">
            @foreach(MPCMS::getCompanies() as $client)
            <div class="item">
                <img class="img-fluid custom-img-job" src="{{env('APP_URL').'/'.$client->logo}}" alt="">
            </div>
            @endforeach
        </div>

        <div class="mt-5 text-center">
            <a class="learn-more no-underline" href="industries-served">View More <i class="fa-solid fa-arrow-right ms-2"></i></a>
        </div>
    </div>
</section>




<section class="job-category custom-color section-padding" style="background-image: url('assets/img/bg-dark.jpg'); background-repeat: no-repeat; background-position: center top; background-size: cover;">
    <div class="container">
        <div class="text-center">
            <p class="fw-bold">Jobs by Categories</p>
            <p class="medium-text">Choose Your Desire Category</p>
        </div>
        <div class="text-start">
            <button class="customPrevBtn me-2 p-2"><i class="fa-solid fa-arrow-left fs-4"></i></button>
            <button class="customNextBtn p-2"><i class="fa-solid fa-arrow-right fs-4"></i></button>
        </div>
        <div class="owl-carousel owl-theme" id="category">
            @foreach(MPCMS::getjobcategories() as $category)
            <div class="item">
                <div class="graphics-card p-2 position-relative">
                    <div>
                        <div class="uk-inline-clip uk-transition-toggle" tabindex="0">
                            <a href="job-category/{{$category->alias}}">
                                <img class="uk-transition-scale-up uk-transition-opaque" src="{{($category->thumb)}}" width="1800" height="1200" alt="">
                            </a>
                        </div>
                    </div>
                    <div class="contents-card ">
                        <a href="job-category/{{$category->alias}}">
                            <p class="custom-text text-danger fs-5">{{$category->title}}</p>
                        </a>
                        <p class="">
                            {!!substr($category->details,0,120).'...'!!}
                        </p>
                     
                    </div>
                    <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>

            @endforeach
         </div>
         <div class="mt-4" uk-scrollspy="target: > div; cls: uk-animation-slide-bottom-medium; delay: 300;  repeat: true">
                    <a class="custom-btn" aria-current="page" href="job_seekers/job-categories">Explore More <i class="fa-solid fa-arrow-right ms-2"></i></a>
                </div>
        
    </div>
</section>


<section class="section-padding all-job" style="background-image: url(assets/img/ban.jpg); background-size: cover; background-position: 50% 0%;">
    <div class="container">
        <div class="text-center">
            <p class="fw-bold">All Jobs Post</p>
            <p class="medium-text">Find Your Career, You Deserve it</p>
        </div>
        <div class="row d-flex align-items-center">
            @php $counter = 0 @endphp
            @foreach(MPCMS::getPaperDemands() as $PaperDemand)
                @if ($counter < 8)
                    <div class="col-md-3">
                        <a class="no-underline" href="{{ $PaperDemand->thumb }}" data-fancybox="gallery1">
                            <img class="img-fluid rounded" src="{{ $PaperDemand->thumb }}" alt="">
                            <div class="mt-3">
                                <p class="text-center small-text no-underline" style="text-decoration: none !important;">
                                    <i class="fa-solid fa-calendar-check me-2"></i>{{ $PaperDemand->title }}
                                </p>
                                                            </div>
                        </a>
                    </div>
                @endif
                @php $counter++ @endphp
            @endforeach
        </div>
        @if ($counter > 4)
            <div class="mt-5 text-center">
                <a class="learn-more no-underline" href="{{ asset('job_seekers/current-job-demands') }}">View More <i class="fa-solid fa-arrow-right ms-2"></i></a>
            </div>
        @endif
    </div>
</section>



@endsection