@extends('layout.master')
@section('title', __('metatags.home.title'))
@section('meta-title', __('metatags.home.title'))
@section('description', __('metatags.home.description'))
@section('image', asset('/images/thumbnail-'.App::getLocale().'.jpg') )
@section('canonical', route(App::getLocale().'.home') )

@section('content')
	@include('layout.nav')


	<header class="home vh-100" data-id="inicio">
	  <div class="container d-flex h-100">
		<div class="row d-flex wh-100 justify-content-center align-self-center text-center text-lg-left">
		  <div class="col-12 col-sm-12 offset-sm-0 col-lg-6 col-xl-6  mr-auto px-md-0">
			<h1 class="mb-0 d-none">Cápita - Right People</strong></h1>
			@mobile()
			<div class="col-12 mb-5">
				<img data-src="{{ asset('/images/backgrounds/header-capita.png') }}" class="lazy w-100">
			</div>
			@endmobile
			@lang('header.title')
			<p class="mt-2 text-white title-paragraph">@lang('header.description')</p>
			<a href="{{ route(App::getLocale().'.quote') }}" class="btn btn-yellow-cta mt-4 btn-medium">@lang('header.quote-now')</a>
		  </div>
		</div> 
	  </div>
	</header>

	<div class="container py-md-5">
		<div class="row py-5">
			<div class="col-md-7 mx-auto text-center mb-5 bottom-line-break centered">
				<p>@lang('offer.description')</p>
			</div>
		</div>
		<div class="row pt-0 pt-md-5 pb-md-5 pb-5" data-id="beneficios">
			<div class="col-md-12 text-center mb-5">
				<h2 class="mx-auto">@lang('offer.title')</h2>
			</div>
			<div class="col-md-12 text-center carousel-values">
				<div class="row owl-carousel mx-auto">
					<div class="col-sm-6 col-md-4 mb-2 mb-md-5 mx-auto offer">
						<div class="offer-icon mx-auto">
							<img src="{{ asset('/images/icons/offers/local-latam.svg') }}">
						</div>
						<h3>@lang('offer.one_title')</h3>
						<p>@lang('offer.one_description')</p>
					</div>
					<div class="col-sm-6 col-md-4 mb-2 mb-md-5 mx-auto offer">
						<div class="offer-icon mx-auto">
							<img src="{{ asset('/images/icons/offers/talent.svg') }}">
						</div>
						<h3>@lang('offer.two_title')</h3>
						<p>@lang('offer.two_description')</p>
					</div>
					<div class="col-sm-6 col-md-4 mb-2 mb-md-5 mx-auto offer">
						<div class="offer-icon mx-auto">
							<img src="{{ asset('/images/icons/offers/office.svg') }}">
						</div>
						<h3>@lang('offer.three_title')</h3>
						<p>@lang('offer.three_description')</p>
					</div>
					<div class="col-sm-6 col-md-4 mb-2 mb-md-5 mx-auto offer">
						<div class="offer-icon mx-auto">
							<img src="{{ asset('/images/icons/offers/law.svg') }}">
						</div>
						<h3>@lang('offer.four_title')</h3>
						<p>@lang('offer.four_description')</p>
					</div>
					<div class="col-sm-6 col-md-4 mb-2 mb-md-5 mx-auto offer">
						<div class="offer-icon mx-auto">
							<img src="{{ asset('/images/icons/offers/rrhh-heart.svg') }}">
						</div>
						<h3>@lang('offer.five_title')</h3>
						<p>@lang('offer.five_description')</p>
					</div>
					<div class="col-sm-6 col-md-4 mb-2 mb-md-5 mx-auto offer">
						<div class="offer-icon mx-auto">
							<img src="{{ asset('/images/icons/offers/remote.svg') }}">
						</div>
						<h3>@lang('offer.six_title')</h3>
						<p>@lang('offer.six_description')</p>
					</div>
					<div class="col-sm-6 col-md-4 mb-2 mb-md-5 mx-auto offer">
						<div class="offer-icon mx-auto">
							<img src="{{ asset('/images/icons/offers/transparency.svg') }}">
						</div>
						<h3>@lang('offer.seven_title')</h3>
						<p>@lang('offer.seven_description')</p>
					</div>
					<div class="col-sm-6 col-md-4 mb-2 mb-md-5 mx-auto offer">
						<div class="offer-icon mx-auto">
							<img src="{{ asset('/images/icons/offers/voip.svg') }}">
						</div>
						<h3>@lang('offer.eight_title')</h3>
						<p>@lang('offer.eight_description')</p>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="capita-map">
		<div class="container py-md-5">
			<div class="row py-5">
				<div class="col-mx-8 mx-auto text-center">
					<h2>@lang('benefits.title')</h2>
				</div>

				@desktop()
				<div class="col-md-11 mx-auto">
					@if(App::getLocale() == 'es')
					<img data-src="{{ asset('/images/mapa-es.svg') }}" alt="Mapa" class="lazy img-fluid">
					@else
					<img data-src="{{ asset('/images/mapa-en.svg') }}" alt="Map" class="lazy img-fluid">
					@endif
				</div>
				@else
				<div class="col-12 mt-3">
					<ul class="expandable accordion" id="accordion">
					  <li>
						<p class="pb-0">@lang('benefits.one')</p>
					  </li>
					  <li>
						<p class="pb-0">@lang('benefits.two')</p>
					  </li>
					  <li>
						<p class="pb-0">@lang('benefits.three')</p>
					  </li>
					  <li>
						<p class="pb-0">@lang('benefits.four')</p>
					  </li>
					  <li>
						<p class="pb-0">@lang('benefits.five')</p>
					  </li>
					  <li>
						<p class="pb-0">@lang('benefits.six')</p>
					  </li>
					  <li>
						<p class="pb-0">@lang('benefits.seven')</p>
					  </li>
					  <li>
						<p class="pb-0">@lang('benefits.eight')</p>
					  </li>
					  <li>
						<p class="pb-0">@lang('benefits.nine')</p>
					  </li>
					</ul>
				</div>
				@enddesktop
			</div>
		</div>
	</div>

<div class="strip-growing">
	<div class="container py-md-5">
		<div class="row py-5">
			<div class="col-md-5">
				<p class="display-2 font-weight-bold text-yellow">@lang('growth.question')</p>
				<p class="text-white text-yellow">@lang('growth.answer')</p>
				<a href="{{ route(App::getLocale().'.quote') }}" class="btn btn-yellow-cta mt-4 btn-medium">@lang('header.quote-now')</a>
			</div>
		</div>
	</div>
</div>

<div class="container py-md-5">
	<div class="row py-4">
		<div class="col-mx-8 mx-auto text-center">
			<h2>@lang('companies.title')</h2>
		</div>
		@desktop()
		<div class="col-12 col-md-11 mx-auto carousel-companies text-center">
			<div class="row owl-carousel mx-auto">
				<div class="col">
					<img data-src="{{ asset('/images/companies/efe-logo.svg') }}" alt="Grupo Consultor EFE" class="lazy img-fluid">
				</div>
				<div class="col">
					<img data-src="{{ asset('/images/companies/leanoutlet.svg') }}" alt="LeanOutlet" class="lazy img-fluid">
				</div>
				<div class="col">
					<img data-src="{{ asset('/images/companies/crisp.svg') }}" alt="CrispEnvironment" class="lazy img-fluid">
				</div>
				<div class="col">
					<img data-src="{{ asset('/images/companies/jensen.svg') }}" alt="Jensen" class="lazy img-fluid">
				</div>
				<div class="col">
					<img data-src="{{ asset('/images/companies/ja.svg') }}" alt="JA" class="lazy img-fluid">
				</div>
			</div>
		</div>
		@else
		<div class="col-12 col-md-11 mx-auto carousel-companies text-center">
			<div class="row owl-carousel mx-auto">
				<div class="col">
					<img data-src="{{ asset('/images/companies/efe-logo.png') }}" alt="Grupo Consultor EFE" class="owl-lazy img-fluid">
				</div>
				<div class="col">
					<img data-src="{{ asset('/images/companies/leanoutlet.png') }}" alt="LeanOutlet" class="owl-lazy img-fluid">
				</div>
				<div class="col">
					<img data-src="{{ asset('/images/companies/crisp.png') }}" alt="CrispEnvironment" class="owl-lazy img-fluid">
				</div>
				<div class="col">
					<img data-src="{{ asset('/images/companies/jensen.png') }}" alt="Jensen" class="owl-lazy img-fluid">
				</div>
				<div class="col">
					<img data-src="{{ asset('/images/companies/ja.png') }}" alt="JA" class="owl-lazy img-fluid">
				</div>
			</div>
		</div>
		@endif
		<div class="py-5 mt-5">
			<div class="col-12 text-center">
				<h2 class="mb-2">@lang('contractor.title')</h2>
				<p>@lang('contractor.description')</p>
			</div>
			<div class="col-12 mt-2 pt-5">
				<div class="strip-whitesmoke p-4 mb-4">
					<div class="row">
						<div class="col-md-8">
							<p class="mb-0">@lang('contractor.question-1')</p>
						</div>
						<div class="col-md-4 ml-auto text-center text-md-right align-self-center pt-3 pt-md-0">
							<label class="container-radio mr-5">@lang('contractor.yes')
							  <input type="radio" name="question-1" value="1">
							  <span class="checkmark"></span>
							</label>
							<label class="container-radio">@lang('contractor.no')
							  <input type="radio" name="question-1" value="0">
							  <span class="checkmark"></span>
							</label>
						</div>
					</div>
				</div>
				<div class="strip-whitesmoke p-4 mb-4">
					<div class="row">
						<div class="col-md-8">
							<p class="mb-0">@lang('contractor.question-2')</p>
						</div>
						<div class="col-md-4 ml-auto text-center text-md-right align-self-center pt-3 pt-md-0">
							<label class="container-radio mr-5">@lang('contractor.yes')
							  <input type="radio" name="question-2" value="1">
							  <span class="checkmark"></span>
							</label>
							<label class="container-radio">@lang('contractor.no')
							  <input type="radio" name="question-2" value="0">
							  <span class="checkmark"></span>
							</label>
						</div>
					</div>
				</div>
				<div class="strip-whitesmoke p-4 mb-4">
					<div class="row">
						<div class="col-md-8">
							<p class="mb-0">@lang('contractor.question-3')</p>
						</div>
						<div class="col-md-4 ml-auto text-center text-md-right align-self-center pt-3 pt-md-0">
							<label class="container-radio mr-5">@lang('contractor.yes')
							  <input type="radio" name="question-3" value="1">
							  <span class="checkmark"></span>
							</label>
							<label class="container-radio">@lang('contractor.no')
							  <input type="radio" name="question-3" value="0">
							  <span class="checkmark"></span>
							</label>
						</div>
					</div>
				</div>
				<div class="strip-whitesmoke p-4 mb-4">
					<div class="row">
						<div class="col-md-8">
							<p class="mb-0">@lang('contractor.question-4')</p>
						</div>
						<div class="col-md-4 ml-auto text-center text-md-right align-self-center pt-3 pt-md-0">
							<label class="container-radio mr-5">@lang('contractor.yes')
							  <input type="radio" name="question-4" value="1">
							  <span class="checkmark"></span>
							</label>
							<label class="container-radio">@lang('contractor.no')
							  <input type="radio" name="question-4" value="0">
							  <span class="checkmark"></span>
							</label>
						</div>
					</div>
				</div>
				<div class="strip-whitesmoke p-4">
					<div class="row">
						<div class="col-md-8">
							<p class="mb-0">@lang('contractor.question-5')</p>
						</div>
						<div class="col-md-4 ml-auto text-center text-md-right align-self-center pt-3 pt-md-0">
							<label class="container-radio mr-5">@lang('contractor.yes')
							  <input type="radio" name="question-5" value="1">
							  <span class="checkmark"></span>
							</label>
							<label class="container-radio">@lang('contractor.no')
							  <input type="radio" name="question-5" value="0">
							  <span class="checkmark"></span>
							</label>
						</div>
					</div>
				</div>

				<div class="bg-green px-2 py-5 p-md-5 mt-5 text-center text-md-left" id="success" style="display:none;">
					<div class="row">
						<div class="col-md-1 offset-md-1 align-self-center">
							<img data-src="{{ asset('/images/icons/like.svg') }}" class="lazy img-fluid">
						</div>
						<div class="col">
							<p class="display-3 mb-0">@lang('contractor.terrific')</p>
							<p class="mb-0">@lang('contractor.terrific-info')</p>
							<a href="{{ route(App::getLocale().'.quote') }}" class="btn btn-white mt-4 btn-medium">@lang('header.quote-now')</a>
						</div>
					</div>
				</div>
				<div class="bg-blue px-2 py-5 p-md-5 mt-5 text-center text-md-left" id="ok" style="display:none;">
					<div class="row">
						<div class="col-md-1 offset-md-1 align-self-center">
							<img data-src="{{ asset('/images/icons/like.svg') }}" class="lazy img-fluid">
						</div>
						<div class="col">
							<p class="display-3 mb-0">@lang('contractor.info')</p>
							<p class="mb-0">@lang('contractor.info-info')</p>
							<a href="{{ route(App::getLocale().'.quote') }}" class="btn btn-white mt-4 btn-medium">@lang('header.quote-now')</a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<div id="most-frequent" data-id="mas-solicitados">
	<div class="container py-4 ">
		<div class="row py-md-5">
			<div class="col-lg-7 ml-auto">
				<h2 class="mb-4">@lang('most-requested.title')</h2>
				
				<ul class="mt-5">
					<li>
						<img data-src="{{ asset('/images/icons/position.svg') }}" class="lazy">
						<p class="mb-0 d-inline-block">@lang('most-requested.graphic-design')</p>
					</li>
					<li>
						<img data-src="{{ asset('/images/icons/position.svg') }}" class="lazy">
						<p class="mb-0 d-inline-block">@lang('most-requested.translators')</p>
					</li>
					<li>
						<img data-src="{{ asset('/images/icons/position.svg') }}" class="lazy">
						<p class="mb-0 d-inline-block">@lang('most-requested.social-networks')</p>
					</li>
					<li>
						<img data-src="{{ asset('/images/icons/position.svg') }}" class="lazy">
						<p class="mb-0 d-inline-block">@lang('most-requested.web-developers')</p>
					</li>
					<li>
						<img data-src="{{ asset('/images/icons/position.svg') }}" class="lazy">
						<p class="mb-0 d-inline-block">@lang('most-requested.tech-support')</p>
					</li>
					<li>
						<img data-src="{{ asset('/images/icons/position.svg') }}" class="lazy">
						<p class="mb-0 d-inline-block">@lang('most-requested.bd')</p>
					</li>
					<li>
						<img data-src="{{ asset('/images/icons/position.svg') }}" class="lazy">
						<p class="mb-0 d-inline-block">@lang('most-requested.social-networks')</p>
					</li>
					<li>
						<img data-src="{{ asset('/images/icons/position.svg') }}" class="lazy">
						<p class="mb-0 d-inline-block">@lang('most-requested.video-producers')</p>
					</li>
					<li>
						<img data-src="{{ asset('/images/icons/position.svg') }}" class="lazy">
						<p class="mb-0 d-inline-block">@lang('most-requested.personal-assistants')</p>
					</li>
					<li>
						<img data-src="{{ asset('/images/icons/position.svg') }}" class="lazy">
						<p class="mb-0 d-inline-block">@lang('most-requested.customer-service-agents')</p>
					</li>
					<li>
						<img data-src="{{ asset('/images/icons/position.svg') }}" class="lazy">
						<p class="mb-0 d-inline-block">@lang('most-requested.receptionists')</p>
					</li>
					<li>
						<img data-src="{{ asset('/images/icons/position.svg') }}" class="lazy">
						<p class="mb-0 d-inline-block">@lang('most-requested.accounting-assistants')</p>
					</li>
				</ul>
			</div>
		</div>
	</div>
</div>

<div id="become-expert">
	<div class="container text-center text-md-left py-md-5">
		<div class="row py-5">
			<div class="col-lg-4 mr-auto">
				<h2 class="mb-2">@lang('wanted.question')</h2>
				<p>@lang('wanted.answer')</p>
				<a href="#" data-anchor="contacto" class="btn btn-yellow-cta btn-white mt-4 btn-medium">@lang('layout.contact-us')</a>
			</div>
		</div>
	</div>
</div>

<div class="container py-md-5">
	<div class="row py-5">
		<div class="col-md-6 mx-auto text-center">
			<img data-src="{{ asset('/images/adrian-romero.png') }}" class="lazy mb-4 ceo-thumbnail">
			<p class="mb-0 display-2 font-weight-bold">@lang('appointment.question')</p>
			<a href="#" data-role="load-modal" data-route="{{ url('/api/program-call/mexico') }}" data-modal="#selfModal" data-maxmodal="modal-lg" href="#"  class="btn btn-yellow mt-4 btn-medium">@lang('appointment.answer-btn')</a>
			<ul class="social mt-5">
				<li>
					<a href="https://api.whatsapp.com/send?phone={{config('settings.adrian-romero.whatsapp')}}" target="_blank" class="whatsapp mask-black">
						<span class="d-none">Facebook</span>
					</a>
				</li>
				<li>
					<a href="mailto:{{config('settings.adrian-romero.email')}}" target="_blank" class="email mask-black">
						<span class="d-none">Email</span>
					</a>
				</li>
				<li>
					<a href="{{config('settings.adrian-romero.linkedin')}}" target="_blank" class="linkedin mask-black">
						<span class="d-none">LinkedIn</span>
					</a>
				</li>
			</ul>
		</div>
	</div>
</div>
<div class="strip-back">
	<div class="container py-5">
		<div class="row py-5">
			<div class="col-md-8 mx-auto text-center mb-5">
				@lang('backup.description')
			</div>
		</div>
	</div>
</div>