@extends('front.master')

@section('title', 'Vacancies')
@section('meta_title', 'Vacancies')
@section('description', 'Pursuing a career in the education industry? From nursery to college and special needs. Browse our selection of potential vacancies today!')
{{-- facebook meta tags --}}
@section('fb_meta_title', 'Vacancies')
@section('fb_description',  'Pursuing a career in the education industry? From nursery to college and special needs. Browse our selection of potential vacancies today!')
@section('fb_route', URL::current()) 
@section('fb_type', 'website')
@section('fb_image', asset('/images/new_design_2022/offer_ca3rd.png'))

{{--twitter meta tags --}}
@section('twitter_meta_title',  'Vacancies')
@section('twitter_description', 'Pursuing a career in the education industry? From nursery to college and special needs. Browse our selection of potential vacancies today!')
@section('twitter_url',  URL::current())


@section('content')
<div class="page-wrapper">
    <section class="home-top vacancies">
        <div class="container position-relative">
            <div class="float-bg">
                <img src="{{ Vite::asset('resources/images/arrows-right-bg.svg')}}" alt="#" width="227" height="106">
            </div>
            <div class="bigger-z-index">
                <div class="row">
                    <div class="col-md-10 offset-md-1 col-xl-12 offset-xl-0 text-center text-xl-start">
                        <div class="row gy-4 align-items-center pb-4 pb-md-5">
                            <div class="col-xl-4 offset-xl-1 col-xxl-3 offset-xxl-1 color-darkgray">
                                <h1 class="mb-4 h2 color-pink">Vacancies</h1>
                                <p class="f-24 font-medium color-darkgray">Browse all the roles we are currently recruiting for...</p>
                            </div>
                            <div class="col-10 offset-1 col-sm-8 offset-sm-2 col-xl-6 offset-xl-0 col-xxl-6 offset-xxl-1">
                                <img src="{{ Vite::asset('resources/images/vacancies-top-bg.svg')}}" alt="#" class="image-auto" width="668" height="448">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            </div>
        </div>
    </section>

    <section class="vacancies-block">
        <div class="container position-relative">
            <div class="float-bg">
                <img src="{{ Vite::asset('resources/images/float-square-bg.svg')}}" alt="#" width="466" height="389">
            </div>
            <h2 class="mb-4 mb-md-5">Latest School <span class="color-blue">Jobs</span></h2>


          @livewire('front.vacancies.vacancies-list')
        </div>
    </section> 
 
</div>

@endsection



@push('modals')

@endpush
@push('scripts')

@endpush