@extends('front.master')

@section('title', 'Home')
@section('meta_title', 'Home')
@section('description', 'At LTF Recruitment we understand the importance of choosing the right person for each school and with the 20 years of experience, we intend to do just that.')
{{-- facebook meta tags --}}
@section('fb_meta_title', 'Home')
@section('fb_description',  'At LTF Recruitment we understand the importance of choosing the right person for each school and with the 20 years of experience, we intend to do just that.')
@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',  'Home')
@section('twitter_description', 'At LTF Recruitment we understand the importance of choosing the right person for each school and with the 20 years of experience, we intend to do just that.')
@section('twitter_url',  URL::current())


@section('content')

<div class="page-wrapper">
    <section class="home-top">
        <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>
            <div class="bigger-z-index">
                <div class="row">
                    <div class="col-md-10 offset-md-1 col-xl-12 offset-xl-0 text-start text-md-center text-xl-start">
                        <div class="row gy-4 align-items-center pb-4 pb-md-5">
                            <div class="col-md-7 col-xl-5">
                                <h1 class="mb-4">One step closer<br>to becoming a 
                                    <span class="spinny-words">
                                        <span>Lead Teacher</span>
                                        <span>Academic Adviser</span>
                                        <span>Child Care Assistant</span>
                                        <span>Teacher Assistant</span>        
                                        <span>School Psychologist</span>
                                        <span>Coach</span>
                                        <span>School Librarian</span>
                                    </span>
                                </h1>

                                <p class="mb-0 pt-5 color-darkgray font-medium">Explore hundreds of school job opportunities with all the information you need. It’s your future, come and find it.</p>
                            </div>
                            <div class="col-10 offset-1 col-sm-8 offset-sm-2 col-xl-6 offset-xl-1">
                                <!-- <img src="{{ Vite::asset('resources/images/home-top-bg.svg')}}" alt="#" class="image-auto" width="666" height="425"> -->
                                <img src="{{ Vite::asset('resources/images/top-gif-bg.gif')}}" alt="#" class="image-auto" width="666" height="425">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="search-bar">
                   @livewire('front.index.search-form')
                    {{-- <div class="mb-4 mb-md-2">
                        <ul class="list-inline mb-0">
                            <li class="list-inline-item d-block d-md-inline-block pb-1">Popular categories:</li>
                            <li class="list-inline-item pb-1"><a href="#" class="color-dark"><u>Job title #1</u></a></li>
                            <li class="list-inline-item pb-1"><a href="#" class="color-dark"><u>Job title #2</u></a></li>
                            <li class="list-inline-item pb-1"><a href="#" class="color-dark"><u>Job title #3</u></a></li>
                        </ul>
                    </div> --}}
                    <div class="mb-4 mb-md-2">
                        <ul class="list-inline mb-0 call-us font-medium color-dark">
                            <li class="list-inline-item d-block mb-3 mb-md-0 d-md-inline-block align-middle">Call us:</li>
                            <li class="list-inline-item d-block pb-2 pb-md-0 d-md-inline-block align-middle">London: <a href="tel:02079932461" class="color-pink">020 7993 2461</a></li>
                            <li class="list-inline-item d-block d-md-inline-block align-middle">East Midlands: <a href="tel:01157866244" class="color-pink">0115 7866 244</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="home-specialists">
        <div class="top-shape">
            <svg xmlns:xlink="http://www.w3.org/1999/xlink" width="409.75px" height="30.96px" viewBox="0 0 409.75 30.96" preserveAspectRatio="none">
                <path fill="#FFFFFF" d="M0,30.96L409.75,0H0V30.96z"/>
            </svg>
        </div>

        <div class="container">
            <div class="float-mem-dots">
                <img src="{{ Vite::asset('resources/images/mem_dots_arrow.svg')}}" alt="#" width="244" height="244" loading="lazy">
            </div>
            <div class="row g-5 align-items-center bigger-z-index text-center text-xl-start">
                <div class="col-10 offset-1 col-lg-6 offset-lg-3 col-xl-6 offset-xl-0 order-last order-xl-first text-center">
                    <img src="{{ Vite::asset('resources/images/home-categories-illustration.svg')}}" alt="#" class="image-auto" width="586" height="472" loading="lazy">
                </div>
                <div class="col-lg-10 offset-lg-1 col-xl-6 offset-xl-0 order-first order-xl-last">
                    <h2 class="mb-4 pb-0 pb-md-3">Specialists in long-term and permanent <span class="color-pink">recruitment</span> for schools across the UK</h2>
                    <p class="mb-4 pb-0 pb-md-3">At LTF Recruitment we understand the importance of choosing the right person for each school and that’s why with the 20 years of combined experience amongst our team we intend to do just that.  We want our staff to lead the way with the quality of education delivered in all schools across the whole of the UK. Our staff  play a critical role in supporting and guiding each pupil to reach their full potential. </p>
                    <p class="mb-0"><a href="{{route('vacancies')}}" class="btn invert">View all vacancies</a></p>
                </div>
            </div>
        </div>

        <div class="bottom-shape">
            <svg xmlns:xlink="http://www.w3.org/1999/xlink" width="409.75px" height="13.44px" viewBox="0 0 409.75 13.44" preserveAspectRatio="none">
                <path fill="#FFFFFF" d="M409.75,13.44H0V0L409.75,13.44z"/>
            </svg>
        </div>
    </section>   

    <section class="home-who-we-are">
        <div class="container position-relative">
            <div class="float-bg">
                <img src="{{ Vite::asset('resources/images/float-square-bg.svg')}}" alt="#" width="466" height="389" loading="lazy">
            </div>
            <div class="row gy-4 align-items-center bigger-z-index text-center text-xl-start">
                <div class="col-lg-10 offset-lg-1 col-xl-6 offset-xl-0 col-xxl-5 offset-xxl-0">
                    <h2 class="mb-4 mb-md-5">Who <span class="color-blue">we</span> are</h2>
                    <p>LTF Recruitment works closely with Nursery, Primary, Secondary, Academy and Special Needs schools to place senior leaders, teachers and support staff in schools throughout the UK.
                    <p>We integrate with our school partners and the teachers who work for us to ensure schools maintain their high standards and not only educate, but inspire.
                    <p>Our reason why? We believe in educating the future. Giving children the best possible start in life and supporting our teachers by helping them secure a life long career.</p>
                    <p class="mb-0 pt-2 pt-md-3"><a href="{{route('about')}}" class="btn">About Us</a></p>
                </div>
                <div class="col-sm-10 offset-sm-1 col-lg-8 offset-lg-2 col-xl-6 offset-xl-0 col-xxl-6 offset-xxl-1 text-center">
                    <img src="{{ Vite::asset('resources/images/on-the-office.svg')}}" alt="#" class="image-auto" width="701" height="461" loading="lazy">
                </div>
            </div>
        </div>
    </section>     

    <section class="home-job-offers">
        <div class="top-shape">
            <svg xmlns:xlink="http://www.w3.org/1999/xlink" width="409.75px" height="30.96px" viewBox="0 0 409.75 30.96" preserveAspectRatio="none">
                <path fill="#FFFFFF" d="M0,30.96L409.75,0H0V30.96z"/>
            </svg>
        </div>

        <div class="container position-relative">
            <div class="float-cross">
                <img src="{{ Vite::asset('resources/images/cross-illustration.svg')}}" alt="#" width="357" height="357" loading="lazy">
            </div>
            <div class="bigger-z-index">
                <div class="d-flex flex-column flex-md-row  align-items-md-end  justify-content-center justify-content-md-between mb-4 ">
                    <div class="job-text">
                        <h2 class="mb-4">Job <span class="color-pink">offers</span></h2>
                        <ul class="list-inline mb-0">
                            <li class="list-inline-item align-middle">{{$offers}}<small>offers</small></li>
                            <li class="list-inline-item align-middle"><span class="in">in</span></li>
                            <li class="list-inline-item align-middle">42<small>Cities</small></li>
                        </ul>
                    </div>
                    <div class="d-none d-md-block">
                        <a href="{{route('vacancies')}}" class="all-offers-link">All offers</a>
                    </div>
                </div>
                

                <div class="row g-4 align-items-stretch bigger-z-index">
                    @foreach ($jobs as $job)
                    <div class="col-md-6 col-xl-3">
                        <div class="job-single-box">
                            <div class="time-ago">2 days ago</div>
                            {{-- <p class="color-dark mb-1">School Name</p> --}}
                            <p class="color-blue title">{{$job->title}}</p>
                            <p class="mb-1 desc"> {{Str::limit(strip_tags($job->description),150)}}</p>

                            <div class="lists d-flex flex-row flex-wrap align-items-center justify-content-start pt-3">
                                <div class="item">
                                    
                                    <div class="single pin">@if($job->city_model) {{$job->city_model->title}}, @endif @if($job->region){{$job->region->title}} @endif</div>
                                </div>
                            </div>
                            <div class="lists d-flex flex-row flex-wrap align-items-center justify-content-start">
                                @foreach ($job->job_contract_type as $type)
                                <div class="item">
                                    <div class="single doc">{{$type->title}}</div>
                                </div>
                                @endforeach
                            </div>

                            <div class="view">View</div>
                            <a href="#" class="stretched-link"><span class="visually-hidden">Open Link Here</span></a>
                        </div>
                    </div>

                
                      
                    
                @endforeach
                    {{-- <div class="col-md-6 col-xl-3">

                        <div class="job-single-box">
                            <div class="time-ago">2 days ago</div>
                            <p class="color-dark mb-1">School Name</p>
                            <p class="color-blue title">Lead Teacher</p>
                            <p class="mb-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ultricies commodo aliquet ante in cum ultricies placerat urna. Facilisi ultrices dignissim vestibulum nibh dolor...</p>
                            <div class="bottom">
                                <ul class="list-unstyled m-0">
                                    <li class="pin">England, London</li>
                                    <li class="doc">Temporary Contract</li>
                                </ul>
                            </div>
                            <div class="view">View</div>
                            <a href="#" class="stretched-link"><span class="visually-hidden">Open Link Here</span></a>
                        </div>
                    </div>

                    <div class="col-md-6 col-xl-3">
                        <div class="job-single-box">
                            <div class="time-ago">2 days ago</div>
                            <p class="color-dark mb-1">School Name</p>
                            <p class="color-blue title">Lead Teacher</p>
                            <p class="mb-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ultricies commodo aliquet ante in cum ultricies placerat urna. Facilisi ultrices dignissim vestibulum nibh dolor...</p>
                            <div class="bottom">
                                <ul class="list-unstyled m-0">
                                    <li class="pin">England, London</li>
                                    <li class="doc">Temporary Contract</li>
                                </ul>
                            </div>
                            <div class="view">View</div>
                            <a href="#" class="stretched-link"><span class="visually-hidden">Open Link Here</span></a>
                        </div>
                    </div>

                    <div class="col-md-6 col-xl-3">
                        <div class="job-single-box">
                            <div class="time-ago">2 days ago</div>
                            <p class="color-dark mb-1">School Name</p>
                            <p class="color-blue title">Lead Teacher</p>
                            <p class="mb-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ultricies commodo aliquet ante in cum ultricies placerat urna. Facilisi ultrices dignissim vestibulum nibh dolor...</p>
                            <div class="bottom">
                                <ul class="list-unstyled m-0">
                                    <li class="pin">England, London</li>
                                    <li class="doc">Temporary Contract</li>
                                </ul>
                            </div>
                            <div class="view">View</div>
                            <a href="#" class="stretched-link"><span class="visually-hidden">Open Link Here</span></a>
                        </div>
                    </div>p

                    <div class="col-md-6 col-xl-3">
                        <div class="job-single-box">
                            <div class="time-ago">2 days ago</div>
                            <p class="color-dark mb-1">School Name</p>
                            <p class="color-blue title">Lead Teacher</p>
                            <p class="mb-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ultricies commodo aliquet ante in cum ultricies placerat urna. Facilisi ultrices dignissim vestibulum nibh dolor...</p>
                            <div class="bottom">
                                <ul class="list-unstyled m-0">
                                    <li class="pin">England, London</li>
                                    <li class="doc">Temporary Contract</li>
                                </ul>
                            </div>
                            <div class="view">View</div>
                            <a href="#" class="stretched-link"><span class="visually-hidden">Open Link Here</span></a>
                        </div>
                    </div> --}}
                </div>

                <div class="d-block text-end d-md-none pt-4">
                    <a href="{{route('vacancies')}}" class="all-offers-link">All offers</a>
                </div>
            </div>
        </div>

        <div class="bottom-shape">
            <svg xmlns:xlink="http://www.w3.org/1999/xlink" width="409.75px" height="13.44px" viewBox="0 0 409.75 13.44" preserveAspectRatio="none">
                <path fill="#FFFFFF" d="M409.75,13.44H0V0L409.75,13.44z"/>
            </svg>
        </div>
    </section>   

    <section class="home-testimonials">
        <div class="container position-relative">
            <div class="float-bg">
                <img src="{{ Vite::asset('resources/images/float-square-bg.svg')}}" alt="#" width="466" height="389" loading="lazy">
            </div>
            <div class="illustration-bg">
                <img src="{{ Vite::asset('resources/images/testimonials-illustration-bg.svg')}}" alt="#" width="1325" height="518" loading="lazy">
            </div>

            <div class="bigger-z-index">
                <h2 class="color-blue mb-4 mb-xxl-5">Testimonials</h2>

                <div class="px-0 px-xl-5 px-xxl-0">
                    <div class="slider">
                        @if($testimonials)
                            @foreach ($testimonials as $testimonial )
                            <div class="item">
                                <div class="d-flex h-100 align-items-center">
                                    <div class="box">
                                        <div class="inside">
                                            <p class="title mb-2">{{$testimonial->title}}</p>
                                            <div class="quote">{!!$testimonial->description!!}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @endforeach

                        @endif
                       

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

    <section class="get-in-touch">
        <div class="container">
            <div class="row">
                <div class="col-xxl-10 offset-xxl-1">
                    <div class="box">
                        <div class="d-flex align-items-stretch flex-column flex-md-row flex-wrap">
                            <div class="left">
                                <h2>Get In <span class="color-pink">Touch</span></h2>
                                <p class="color-dark pe-0 pe-xl-5">Email us and one of the dedicated members of our team will get back to you.</p>

                                @livewire('front.forms.contact-form')
                            </div>
                            <div class="right">
                                <div class="d-flex h-100 align-items-center justify-content-center">
                                    <img src="{{ Vite::asset('resources/images/get-in-touch-bg.svg')}}" alt="#" class="image-auto" width="490" height="432" loading="lazy">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
<div id="alertbox"></div>
@endsection

@push('modals')

@endpush
@push('scripts')
   


@endpush