{% extends 'base.html.twig' %}

{% block title %}Hello HomeController!
{% endblock %}

{% block body %}
    {% include "_nav.html.twig" with { 'navbarClass' : 'fixed-top navbar-dark' } %} 
    <!-- Carousel -->
    <section class="section section-top section-full">
        <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
            <ol class="carousel-indicators">
                <li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"></li>
                <li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"></li>
                <li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"></li>
            </ol>
            <div
                class="carousel-inner">
                <!-- Slide 1 -->
                <div class="carousel-item active align-items-center justify-content-center" style="background-image: url('{{ asset('images/48.jpg') }}');">
                    <div class="overlay"></div>
                    <div class="carousel-caption text-center">
                        <p class="font-weight-medium text-center text-xs text-uppercase text-white">
                            by Edu-coaching
                        </p>
                        <h1>L'ACCOMPAGNEMENT A LA PERSONNE, C'EST ORGANISE COMMENT ?</h1>
                        <p class="lead">EDUCOACHING accueille ses clients en séance individuelle. Les séances de travail sont construites autour et avec les outils de la PNL santé, de la neuro-sémantique et de l'hypnose Ericksonienne.</p>
                        <a href="{{ path('app_contact') }}" class="btn btn-custom">CONTACT RAPIDE</a>
                    </div>
                </div>

                <!-- Slide 2 -->
                <div class="carousel-item align-items-center justify-content-center" style="background-image: url('{{ asset('images/49.jpg') }}');">
                    <div class="overlay"></div>
                    <div class="carousel-caption text-center">
                        <p class="font-weight-medium text-center text-xs text-uppercase text-white">
                            by edu-coaching
                        </p>
                        <h1>L'INSTITUT DE PEDAGOGIE PNL</h1>
                        <p class="lead">L'institut de pédagogie PNL Educoaching, est une structure éducative et thérapeutique dédiée à la prise en charge des enfants et adolescents. L'institut est spécialisé dans les méthodes de pédagogie active, dans la PNL santé et l'hypnose Ericksonienne.</p>
                        <a href="{{ path('app_contact') }}" class="btn btn-custom">CONTACT RAPIDE</a>
                    </div>
                </div>

                <!-- Slide 3 -->
                <div class="carousel-item align-items-center justify-content-center" style="background-image: url('{{ asset('images/50.jpg') }}');">
                    <div class="overlay"></div>
                    <div class="carousel-caption text-center">
                        <p class="font-weight-medium text-center text-xs text-uppercase text-white">by edu-coaching</p>
                        <h1>LE COACHING SCOLAIRE, QU'EST CE QUE C'EST ?</h1>
                        <p class="lead">Le coaching scolaire est une méthode pour renforcer les techniques de compréhension, de mémorisation et d'organisation dans toutes les branches d'études...</p>
                        <a href="{{ path('app_contact') }}" class="btn btn-custom">CONTACT RAPIDE</a>
                    </div>
                </div>
            </div>

            <!-- Controls -->
            <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-bs-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Previous</span>
            </a>
            <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
            </a>
        </div>
    </section>

    <section>
        <div class="album py-5 bg-body-tertiary">
            <div class="container">

                <h2 class="text-center mb-4">
                    Landing page variants
                </h2>
                <p class="text-muted text-center mb-5">
                    Incline comes with several professionally designed landing pages that can be easily adapted for any project.
                </p>


                <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
                    {% for i in 1..5 %}
                    <div class="col">
                        <div class="card shadow-sm">
                            <div class="card-img-top">
                                <img src="{{ asset('images/57.png') }}" alt="App landing" class="img-fluid">
                            </div>
                            <div class="card-body">
                                <h4 class="card-title">
                                    App landing
                                </h4>
                                <p class="card-text text-muted">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                                
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </section>

{% endblock %}