{% extends 'base.html.twig' %}{% block body %}<header class="bg-header text-white d-flex align-items-center"> <div class="container"> <div class="card bg-white bg-opacity-50 text-dark py-2 px-1 p-md-4"> <div class="text-center fade-in"> <h1 class="display-5 fw-bold">Bienvenue sur <span class="text-orange">Halo</span><span class="text-vert">Gari</span> ! </h1> <h3 class="lead fw-semibold text-muted">Trouvez ou proposez un trajet entre les villages de Mayotte.</h3> </div> </div> <form method="GET" action="{{ path('app_chercher') }}" id="form-recherche" class="row g-3 mt-5"> <div class="col-md-6 col-lg-3"> <div class="input-group"> <span class="input-group-text text-vert"><i class="bi bi-geo-fill"></i></span> <div class="form-floating"> <input id="select_departure" class="form-control villages" name="select_departure" placeholder="Village de départ" required> <label for="select_departure">Village de départ</label> </div> </div> </div> <div class="col-md-6 col-lg-3"> <div class="input-group"> <span class="input-group-text text-vert"><i class="bi bi-flag-fill"></i></span> <div class="form-floating"> <input id="select_arrival" name="select_arrival" class="form-control villages" placeholder="Village d'arrivée" required> <label for="select_arrival">Village d'arrivée</label> </div> </div> </div> <div class="col-md-12 col-lg-3"> <div class="input-group"> <span class="input-group-text text-vert"><i class="bi bi-calendar2-event-fill"></i></span> <div class="form-floating"> <input type="text" id="date_trajet" class="form-control dateDepart" name="date_trajet" placeholder="Date du trajet" required> <label for="date_trajet">Date du trajet</label> </div> <span class="input-group-text text-vert"><i class="bi bi-person-fill"></i></span> <div class="form-floating"> <select class="form-select" id="floatingSelectGrid" name="places_min"> <option selected value="1">1</option> {% for i in 2..8 %} <option value="{{ i }}">{{ i }}</option> {% endfor %} </select> <label for="floatingSelectGrid">Passager(s)</label> </div> </div> </div> <div class="col-md-12 col-lg-3 d-grid align-content-end align-self-center"> <button type="submit" class="btn btn-orange btn-lg w-100 mt-md-0 mt-2">Rechercher</button> </div> </form> </div></header><section class="py-5 bg-light text-center"> <div class="container"> <div class="row"> <div class="col-md-4"> <img src="/images/petit-prix.png" class="mb-3" height="40" alt="Taxi Van Mayotte"> <h5 class="fw-bold">Des trajets locaux à petits prix</h5> <p>Voyagez entre les villages de Mayotte (Mamoudzou, Chirongui, Bandrélé…) en toute simplicité grâce au covoiturage local à prix accessible.</p> </div> <div class="col-md-4"> <img src="/images/confiance.png" class="mb-3" height="40" alt="Confiance et communauté"> <h5 class="fw-bold">Confiance & proximité</h5> <p>Notre communauté de conducteurs est vérifiée. Profitez d’un service entre Mahorais où la confiance et le respect sont au cœur de chaque trajet.</p> </div> <div class="col-md-4"> <img src="/images/rapide.png" class="mb-3" height="40" alt="Facile et rapide"> <h5 class="fw-bold">Réservez en quelques clics</h5> <p>Gagnez du temps avec notre plateforme simple et rapide. Réservez votre place en ligne et retrouvez votre conducteur à proximité.</p> </div> </div> </div></section><section class="py-5 bg-white"> <div class="container text-center"> <h2 class="h4 fw-bold mb-4">Trajets les plus réservés</h2> <div class="row"> {% if popularTrajets|length < 1 %} <div class="col-md-4 mb-4"> <div class="card h-100 shadow-sm"> <div class="card-body"> <h5 class="card-title text-orange"> <i class="bi bi-geo-alt text-vert"></i> Koungou → Mamoudzou </h5> <p class="card-text text-muted">4 réservations</p> <a href="{{ path('app_chercher') ~ '?select_departure=Koungou&select_arrival=Mamoudzou&date_trajet=' ~ 'now'|date('Y-m-d') }}" class="btn btn-outline-orange btn-sm mt-2">Voir</a> </div> </div> </div> <div class="col-md-4 mb-4"> <div class="card h-100 shadow-sm"> <div class="card-body"> <h5 class="card-title text-orange"> <i class="bi bi-geo-alt text-vert"></i> Chirongui → Sada </h5> <p class="card-text text-muted">2 réservations</p> <a href="{{ path('app_chercher') ~ '?select_departure=Chirongui&select_arrival=Sada&date_trajet=' ~ 'now'|date('Y-m-d') }}" class="btn btn-outline-orange btn-sm mt-2">Voir</a> </div> </div> </div> <div class="col-md-4 mb-4"> <div class="card h-100 shadow-sm"> <div class="card-body"> <h5 class="card-title text-orange"> <i class="bi bi-geo-alt text-vert"></i> Sada → Mamoudzou </h5> <p class="card-text text-muted">1 réservation</p> <a href="{{ path('app_chercher') ~ '?select_departure=Sada&select_arrival=Mamoudzou&date_trajet=' ~ 'now'|date('Y-m-d') }}" class="btn btn-outline-orange btn-sm mt-2">Voir</a> </div> </div> </div> {% elseif popularTrajets|length < 2 %} <div class="col-md-4 mb-4"> <div class="card h-100 shadow-sm"> <div class="card-body"> <h5 class="card-title text-orange"> <i class="bi bi-geo-alt text-vert"></i> Koungou → Mamoudzou </h5> <p class="card-text text-muted">4 réservations</p> <a href="{{ path('app_chercher') ~ '?select_departure=Koungou&select_arrival=Mamoudzou&date_trajet=' ~ 'now'|date('Y-m-d') }}" class="btn btn-outline-orange btn-sm mt-2">Voir</a> </div> </div> </div> <div class="col-md-4 mb-4"> <div class="card h-100 shadow-sm"> <div class="card-body"> <h5 class="card-title text-orange"> <i class="bi bi-geo-alt text-vert"></i> Chirongui → Sada </h5> <p class="card-text text-muted">2 réservations</p> <a href="{{ path('app_chercher') ~ '?select_departure=Chirongui&select_arrival=Sada&date_trajet=' ~ 'now'|date('Y-m-d') }}" class="btn btn-outline-orange btn-sm mt-2">Voir</a> </div> </div> </div> {% elseif popularTrajets|length < 3 %} <div class="col-md-4 mb-4"> <div class="card h-100 shadow-sm"> <div class="card-body"> <h5 class="card-title text-orange"> <i class="bi bi-geo-alt text-vert"></i> Koungou → Mamoudzou </h5> <p class="card-text text-muted">4 réservations</p> <a href="{{ path('app_chercher') ~ '?select_departure=Koungou&select_arrival=Mamoudzou&date_trajet=' ~ 'now'|date('Y-m-d') }}" class="btn btn-outline-orange btn-sm mt-2">Voir</a> </div> </div> </div> {% endif %} {% for trajet in popularTrajets %} <div class="col-md-4 mb-4"> <div class="card h-100 shadow-sm"> <div class="card-body"> <h5 class="card-title text-orange"> <i class="bi bi-geo-alt text-vert"></i> {{ trajet.depart }} → {{ trajet.arrivee }} </h5> <p class="card-text text-muted">{{ trajet.total }} réservation{{ trajet.total > 1 ? 's':'' }} </p> <a href="{{ path('app_chercher') ~ '?select_departure=' ~ trajet.depart ~ '&select_arrival=' ~ trajet.arrivee ~ '&date_trajet=' ~ 'now'|date('Y-m-d') }}" class="btn btn-outline-orange btn-sm mt-2">Voir</a> </div> </div> </div> {% endfor %} </div> </div></section><section class="py-5 bg-orange-opacity text-white"> <div class="container"> <div class="row align-items-center"> <div class="col-md-6 order-md-2 text-center"> <img src="/images/securite.png" class="img-fluid" alt="Sécurité Covoiturage" style="max-height: 250px;"> </div> <div class="col-md-6 order-md-1 mb-4 mb-md-0"> <h2 class="h4 fw-bold">Votre sécurité est notre priorité</h2> <p class="mb-2">Chez HaloGari, nous nous engageons à créer une communauté de covoiturage fiable et digne de confiance à Mayotte.</p> <p class="mb-4">Découvrez nos engagements et fonctionnalités pour voyager sereinement entre Mahorais.</p> <a href="{{ path('app_securite') }}" class="btn bg-vert text-white fw-bold">En savoir plus</a> </div> </div> </div></section>{% endblock %}