@extends('layouts.layout')

@section('title', 'Proyectos')

@section('background', asset('img/proyecto.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">Proyectos</h2>
			<p class="py-5">Nuestros Proyectos</p>
        </div>
		<div class="grid grid-cols-2 md:grid-cols-3 gap-8">
			@foreach ($projects as $project)
				@php
					$pos = $loop->index % 3;
					switch ($pos) {
						case 0: $delay = ''; break;
						case 1: $delay = 'delay-100'; break;
						case 2: $delay = 'delay-200'; break;
						default: $delay = ''; break;
					}
				@endphp
				<div class="project text-white relative {{ $delay }}">
					<a href="{{ route('project', $project) }}">
						<img src="{{ asset($project->urlImage) }}" alt="{{ $project->title }}" title="{{ $project->title }}" />
						<p class="bg-gray-900 p-5 absolute inset-x-0 bottom-0 opacity-70">{{ $project->title }}</p>
					</a>
				</div>
			@endforeach
		</div>
    </div>
@endsection