@extends('layouts.app')

@section('title', 'Pagina Principal')

@section('content')
    <main class="container py-5 flex-grow-1 text-center d-flex flex-column align-items-center">
        <section id="servicios" class="mb-5 w-100">
            <h2 class="h4">Servicios</h2>
            <p class="text-muted mb-0">Espacio para describir servicios.</p>
        </section>
        <hr class="my-4 w-50 mx-auto border-2 border-dark opacity-100">

        <section id="quienes-somos" class="mb-5 w-100">
            <h2 class="h4">Quienes Somos</h2>
            <p class="text-muted mb-0">Espacio para la presentacion institucional.</p>
        </section>
        <hr class="my-4 w-50 mx-auto border-2 border-dark opacity-100">

        <section id="equipo" class="mb-5 w-100">
            <h2 class="h4">Equipo</h2>
            <div class="card mx-auto" style="width: 18rem;">
                <img src="..." class="card-img-top" alt="...">
                <div class="card-body">
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card’s content.</p>
                </div>
            </div>
        </section>
        <hr class="my-4 w-50 mx-auto border-2 border-dark opacity-100">

        <section id="ubicacion" class="mb-5 w-100">
            <h2 class="h4">Ubicacion</h2>
            <p class="text-muted mb-3">Pasteur 141</p>
            <div class="ratio ratio-16x9 mx-auto" style="max-width: 900px;">
                <iframe
                    src="https://maps.google.com/maps?q=Pasteur%20141&t=&z=15&ie=UTF8&iwloc=&output=embed"
                    style="border: 0;"
                    allowfullscreen
                    loading="lazy"
                    referrerpolicy="no-referrer-when-downgrade"
                    title="Mapa de ubicacion - Pasteur 141"></iframe>
            </div>
        </section>
        <hr class="my-4 w-50 mx-auto border-2 border-dark opacity-100">

        <section id="formulario" class="w-100">
            <h2 class="h4">Formulario</h2>
            <p class="text-muted mb-0">Espacio para formulario de contacto.</p>
        </section>
    </main>
@endsection