@extends('layouts.app')

@section('head')
	<title>Servicios | {{ env('APP_NAME') }}</title>
	<meta name="description" content="">

	<meta property="og:type" content="article" />
	<meta property="og:url" content="{{ route(trans('url.services')) }}" />
	<meta property="og:title" content="Servicios | {{ env('APP_NAME') }}" />
	<meta property="og:image" content="{{ url('/img/uploads/quetzal.jpg') }}" />
	<meta property="og:description" content="Investigamos, conceptualizamos y producimos para dar forma a su idea." />
@endsection

@section('content')
	<div class="container" style="margin-top: 20px">
		<div class="row">
			<div class="offset-md-2 col-md-8">
				<div style="font-size: 35px;font-weight: bold; text-align: center;">
					{{ trans('services.we_research') }}
				</div>
			</div>
		</div>
	</div>

	<div class="container-fluid" style="margin-top: 40px;">
		<div class="row row-flex">
			<div class="col-md-6">
				<div class="flex-wrapper">
					<div style="font-size: 35px;font-weight: bold; margin-top: -50px; line-height: 40px">
						{{ trans('services.our_solutions') }} <br>
					</div>
					<div style="font-size: 23px; margin-top: 20px; ">
						{{ trans('services.our_staff') }}
					</div>
				</div>
			</div>
			<div class="col-md-6">
				<div class="row services-alt">
					@foreach ($services_1 as $service)
						<div class="col">
							<a title="{{$service->content->name}}" href="{{ route(trans('url.service'), [$service->content->slug, $service->id]) }}"><img src="/img/uploads/{{$service->thumbnail}}" class="img-fluid"></a>
							<p class="mt-3"><strong>{{$service->content->name}}</strong> <br>
							{{str_limit($service->content->short_description, 50)}}</p>
						</div>
					@endforeach
				</div>
				<div class="row services-alt" style="display: none;">
					@foreach ($services_2 as $service)
						<div class="col">
							<a title="{{$service->content->name}}" href="{{ route(trans('url.service'), [$service->content->slug, $service->id]) }}"><img src="/img/uploads/{{$service->thumbnail}}" class="img-fluid"></a>
							<p class="mt-3"><strong>{{$service->content->name}}</strong> <br>
							{{str_limit($service->content->short_description, 50)}}</p>
						</div>
					@endforeach
				</div>
			</div>
		</div>
	</div>

	<div class="container" style="margin-bottom: 40px">
		<div class="row">
			<div class="col-md-2">
				<img src="/img/services-icon.png" class="img-fluid">
			</div>
			<div class="col-md-10">
				<div style="font-size: 23px; margin-top: 20px; ">
					{{ trans('services.our_passion') }}
				</div>
			</div>
		</div>
	</div>
@endsection