@extends('layouts.site')
@section('title', 'Contacto')

@section('content')
    <section class="h-auto my-8">
        <div class="container mx-auto">
            <div class="grid grid-cols-12 gap-8">
                <div class="col-start-1 col-span-12 bg-white rounded-lg shadow-lg p-6">
                    <!-- component -->
                    <div class="max-w-6xl mx-auto sm:px-6 lg:px-8">
                        <div class="mt-8 overflow-hidden">
                            <div class="grid grid-cols-1 md:grid-cols-2 ">
                                <div class="p-6 mr-2 bg-gray-100 dark:bg-gray-800 sm:rounded-lg flex items-center">
                                    <div>
                                        <h1 class="text-4xl sm:text-5xl text-gray-800 dark:text-white font-extrabold tracking-tight">
                                            Contactanos
                                        </h1>
                                        <p class="text-normal text-lg sm:text-2xl font-medium text-gray-600 dark:text-gray-400 mt-2">

                                        </p>
                                        <div class="flex items-center mt-8 text-gray-600 dark:text-gray-400">
                                            <i class="fas fa-user text-xl text-gray-500"></i>
                                            <div class="ml-4 text-md tracking-wide font-semibold w-full">
                                                Alicia Pérez Pimentel
                                            </div>
                                        </div>

                                        <div class="flex items-center mt-4 text-gray-600 dark:text-gray-400">
                                            <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" class="w-8 h-8 text-gray-500">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
                                            </svg>
                                            <div class="ml-4 text-md tracking-wide font-semibold w-40">
                                                722 475 7324
                                            </div>
                                        </div>

                                        <div class="flex items-center mt-2 text-gray-600 dark:text-gray-400">
                                            <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" class="w-8 h-8 text-gray-500">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
                                            </svg>
                                            <div class="ml-4 text-md tracking-wide font-semibold w-40">
                                                masscer.certificacion23@gmail.com
                                            </div>
                                        </div>
                                    </div>
                                </div>

                               <livewire:site.contact />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection