{% extends 'base.html.twig' %}{% block title %}Contact – OTropik Agence de voyage en Guadeloupe{% endblock %}{% block seo %} <meta name="description" content="Contactez OTropik, agence de voyage en Guadeloupe, pour organiser votre séjour, circuit ou voyage sur mesure au départ des Antilles. Notre équipe vous accompagne." > <meta property="og:title" content="Contact – OTropik Agence de voyage en Guadeloupe" /> <meta property="og:type" content="Website" /> <meta property="og:description" content="Besoin d’un conseiller voyage en Guadeloupe ? Contactez OTropik pour organiser votre prochain séjour sur mesure." /> <meta property="og:url" content="{{absolute_url( app.request.uri)}}" /> <meta property="og:image" content="{#{asset('img/asset/cardimg-fb.jpg')}#}" /> <meta name ="twitter:card" content="summary_large_image" /> <meta name="twitter:title" content="Contact – OTropik Agence de voyage en Guadeloupe"> <meta name="twitter:description" content="Besoin d’un conseiller voyage en Guadeloupe ? Contactez OTropik pour organiser votre prochain séjour sur mesure."> <meta name="twitter:image" content="{#{asset('img/asset/cardimg-fb.jpg')}#}">{% endblock %}{% block body %}{% for label, messages in app.flashes %} {% for m in messages %} <div class="alert alert-{{ label }} rounded-3 m-3">{{ m }}</div> {% endfor %}{% endfor %}{# --- Hero Banner --- #}<section class="position-relative text-white"> <div class="ratio ratio-21x9"> {% if banner.img %} <img src="{{ asset('img/banner/')}}{{banner.img}}" alt="Plage paradisiaque" class="w-100 h-100 object-fit-cover"> {% else %} <img src="{{ asset('img/cta-tourist.jpg')}}" alt="Plage paradisiaque" class="w-100 h-100 object-fit-cover"> {% endif %} </div> <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center text-center bg-dark bg-opacity-50"> <div class="p-3"> <h1 class="display-4 fw-bold mb-3">Restons en contact 🌴</h1> <p class="lead">Une question, une envie d’évasion ou besoin d’un devis sur mesure ? L’équipe <span class="fw-bold text-warning">Otropik</span> est à votre écoute.</p> </div> </div></section>{# --- Section principale --- #}<section class="container py-5"> <div class="row g-5"> {# Infos de contact #} <div class="col-12 col-lg-5"> <h2 class="h4 fw-bold mb-4">Nos coordonnées</h2> <p class="text-muted mb-4"> Passez nous voir, appelez-nous ou envoyez un message : nous répondons rapidement. </p> <ul class="list-unstyled"> <li class="mb-3 d-flex align-items-start"> <i class="bi bi-geo-alt txt-ot-green fs-4 me-3"></i> <div> <strong>Adresse</strong><br> {{infos.adress}} <br> {{infos.zip}} {{infos.city}} </div> </li> <li class="mb-3 d-flex align-items-start"> <i class="bi bi-telephone txt-ot-green fs-4 me-3"></i> <div> <strong>Téléphone</strong><br> {% if infos.phone %} Bureau : <a class="link-info" href="tel:{{infos.phone}}">{{infos.phone}}</a> {% endif %} {% if infos.mobile %} <br>Mobile : <a class="link-info" href="tel:{{infos.mobile}}">{{infos.mobile}}</a> {% endif %} {% if infos.mobileTwo %} <br>Mobile : <a class="link-info" href="tel:{{infos.mobileTwo}}">{{infos.mobileTwo}}</a> {% endif %} </div> </li> <li class="mb-3 d-flex align-items-start"> <i class="bi bi-envelope txt-ot-green fs-4 me-3"></i> <div> {% if infos.mail %} <strong>Email</strong><br> <a class="link-info" href="mailto:{{infos.mail}}">{{infos.mail}}</a> {% endif %} </div> </li> </ul> <div class="map-container" style="width: 100%; height: 400px; border-radius: 12px; overflow: hidden;"> <iframe width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.openstreetmap.org/export/embed.html?bbox=-61.5270%2C16.2570%2C-61.5070%2C16.2770&layer=mapnik&marker=16.2669%2C-61.5170" style="border:1px solid #ccc;"> </iframe></div><p class="text-muted small text-center"> <a href="https://www.openstreetmap.org/?mlat=16.2669&mlon=-61.5170#map=15/16.2669/-61.5170" target="_blank"> Voir la carte agrandie </a></p> </div> {# Formulaire de contact #} <div class="col-12 col-lg-7"> <div class="card border-0 shadow-lg rounded-4"> <div class="card-body p-4"> <h2 class="h5 fw-bold mb-4">Envoyez-nous un message</h2> <form method="post" action="{{ path('contact.send') }}"> <div class="row g-3"> <div class="col-md-6"> <label class="form-label">Nom</label> <input type="text" name="name" class="form-control rounded-pill" placeholder="Votre nom complet" required> </div> <div class="col-md-6"> <label class="form-label">Email</label> <input type="email" name="email" class="form-control rounded-pill" placeholder="vous@email.com" required> </div> <div class="col-md-6"> <label class="form-label">Téléphone</label> <input type="tel" name="phone" class="form-control rounded-pill" placeholder="+590 ..." > </div> <div class="col-md-6"> <label class="form-label">Sujet</label> <input type="text" name="subject" class="form-control rounded-pill" placeholder="Ex: Demande de devis"> </div> <div class="col-12"> <label class="form-label">Message</label> <textarea name="message" rows="5" class="form-control rounded-4" placeholder="Votre message..." required></textarea> </div> </div> <div class="mt-4"> <div class="h-captcha mb-3" data-sitekey="{{ hcaptchaSiteKey }}"></div> <div class="text-end"> <button type="submit" class="btn btn-primary rounded-pill px-4"> <i class="bi bi-send me-1"></i> Envoyer </button> </div> </div> </form> <script src="https://js.hcaptcha.com/1/api.js" async defer></script> </div> </div> </div> </div></section>{% endblock %}