@extends('layouts.layout')

@section('title', 'Servicios')

@section('background', asset('img/servicio.jpg'))

@section('content')
    <div class="container mx-auto px-6 py-5">
        <div class="sec-title text-center mb-5">
            <h2 class="text-gray-900 relative uppercase text-4xl pb-4">Servicios</h2>
			<p class="py-5">Automatización y control tanto a nivel industrial como comercial</p>
        </div>
		<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
			@foreach ($services as $service)
				@php
					$pos = $loop->index % 4;
					switch ($pos) {
						case 0: $delay = ''; break;
						case 1: $delay = 'delay-100'; break;
						case 2: $delay = 'delay-200'; break;
						case 3: $delay = 'delay-300'; break;
						default: $delay = ''; break;
					}
				@endphp
				<div class="service text-center {{ $delay }}">
					<img src="{{ asset($service->urlImage) }}" alt="{{ $service->title }}" title="{{ $service->title }}" class="border-2 border-gray-500 rounded-full inline" />
					<h3 class="text-xl text-gray-900 my-3">{{ $service->title }}</h3>
					<p>{{ $service->description }}</p>
				</div>
			@endforeach
		</div>
    </div>
@endsection