@extends('layouts.home')
@section('search')
<x-job-search />
@include('includes.emailVerificationNotice')
@endsection
@section('content')
<div class="dark:bg-white dark:bg-opacity-5">
    <x-hot-jobs></x-hot-jobs>
</div>
<x-recent-jobs></x-recent-jobs>
<div class="bg-slate-200 dark:bg-opacity-10">
<livewire:sections.jobs-by-cities />
</div>
{{-- @include('includes/about') --}}
<div class="flex justify-center my-3">
    <a href="{{ route('advertise.with.us') }}" class="flex justify-center ">
        <img src="{{ URL::asset('images/advertise-with-us.webp') }}" alt="" class="object-scale-down px-5" loading="lazy">
    </a>
</div>
<x-home-browse-jobs-by-category></x-home-browse-jobs-by-category>
<div class="bg-white dark:bg-opacity-5">
    <x-home-testimonials></x-home-testimonials>
</div>
@include('includes/how-we-work')
<x-home-clients-logo></x-home-clients-logo>
@include('includes/mobile-app')
{{-- <x-home-counters></x-home-counters> --}}
<div class="bg-slate-50 dark:bg-opacity-5">
    @include('includes.counters')
</div>
@endsection
@push('custom-styles')
    <link rel="stylesheet" href="{{ URL::asset('/assets/css/slick.css') }}">
    <style>
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
    </style>
@endpush
@push('custom-scripts')
    <script src="assets/js/slick.min.js" type="module"></script>
    <script type="module">
        // $('body').html('hi')
        $(document).ready(function() {
            $('.customer-logos-2').slick({
                centerMode: true,
                slidesToShow: 4,
                slidesToScroll: 1,
                autoplay: true,
                autoplaySpeed: 3000,
                arrows: false,
                dots: false,
                pauseOnHover: true,
                responsive: [{
                    breakpoint: 768,
                    settings: {
                        slidesToShow: 2
                    }
                }, {
                    breakpoint: 520,
                    settings: {
                        slidesToShow: 1
                    }
                }]
            });
            $('.candidateJob').slick({
                slidesToShow: 3,
                slidesToScroll: 1,
                autoplay: true,
                autoplaySpeed: 4000,
                arrows: false,
                dots: false,
                pauseOnHover: true,
                responsive: [{
                    breakpoint: 768,
                    settings: {
                        slidesToShow: 2
                    }
                }, {
                    breakpoint: 520,
                    settings: {
                        slidesToShow: 1
                    }
                }]
            });
            $('.adv').slick({
                slidesToShow: 4,
                slidesToScroll: 1,
                autoplay: true,
                autoplaySpeed: 4000,
                arrows: false,
                dots: false,
                pauseOnHover: true,
                responsive: [{
                    breakpoint: 768,
                    settings: {
                        slidesToShow: 2
                    }
                }, {
                    breakpoint: 520,
                    settings: {
                        slidesToShow: 1
                    }
                }]
            });
        });
    </script>
@endpush