templates/default/contact.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Contact â€” Otropik{% endblock %}
  5. {% block body %}
  6. {# --- Hero Banner --- #}
  7. <section class="position-relative text-white">
  8.   <div class="ratio ratio-21x9">
  9.   {% if banner.img %}
  10.   <img src="{{ asset('img/banner/')}}{{banner.img}}" alt="Plage paradisiaque" class="w-100 h-100 object-fit-cover">
  11.   {% else %}
  12.     <img src="{{ asset('img/cta-tourist.jpg')}}" alt="Plage paradisiaque" class="w-100 h-100 object-fit-cover">
  13.   {% endif %}
  14.   </div>
  15.   <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">
  16.     <div class="p-3">
  17.       <h1 class="display-4 fw-bold mb-3">Restons en contact đźŚ´</h1>
  18.       <p class="lead">Une question, une envie d’évasion ou besoin d’un devis sur mesure ?  
  19.         L’équipe <span class="fw-bold text-warning">Otropik</span> est Ă  votre Ă©coute.</p>
  20.     </div>
  21.   </div>
  22. </section>
  24. {# --- Section principale --- #}
  25. <section class="container py-5">
  26.   <div class="row g-5">
  28.     {# Infos de contact #}
  29.     <div class="col-12 col-lg-5">
  30.       <h2 class="h4 fw-bold mb-4">Nos coordonnĂ©es</h2>
  31.       <p class="text-muted mb-4">
  32.         Passez nous voir, appelez-nous ou envoyez un message : nous rĂ©pondons rapidement.
  33.       </p>
  35.       <ul class="list-unstyled">
  36.         <li class="mb-3 d-flex align-items-start">
  37.           <i class="bi bi-geo-alt txt-ot-green fs-4 me-3"></i>
  38.           <div>
  39.             <strong>Adresse</strong><br>
  40.             {{infos.adress}} <br> {{infos.zip}} {{infos.city}}
  41.           </div>
  42.         </li>
  43.         <li class="mb-3 d-flex align-items-start">
  44.           <i class="bi bi-telephone txt-ot-green fs-4 me-3"></i>
  45.           <div>
  46.             <strong>TĂ©lĂ©phone</strong><br>
  47.             {% if infos.phone %} 
  48.             Bureau : <a class="link-info" href="tel:{{infos.phone}}">{{infos.phone}}</a> {% endif %}
  49.             {% if infos.mobile %} 
  50.             <br>Mobile : <a class="link-info" href="tel:{{infos.mobile}}">{{infos.mobile}}</a> {% endif %}
  51.             {% if infos.mobileTwo %} 
  52.             <br>Mobile : <a class="link-info" href="tel:{{infos.mobileTwo}}">{{infos.mobileTwo}}</a> {% endif %}
  53.           </div>
  54.         </li>
  55.         <li class="mb-3 d-flex align-items-start">
  56.           <i class="bi bi-envelope txt-ot-green fs-4 me-3"></i>
  57.           <div>
  58.           {% if infos.mail %} 
  59.             <strong>Email</strong><br>
  60.             <a class="link-info" href="mailto:{{infos.mail}}">{{infos.mail}}</a>
  61.           {% endif %}
  62.           </div>
  63.         </li>
  64.       </ul>
  66.       <div class="map-container" style="width: 100%; height: 400px; border-radius: 12px; overflow: hidden;">
  67.   <iframe
  68.     width="100%"
  69.     height="100%"
  70.     frameborder="0"
  71.     scrolling="no"
  72.     marginheight="0"
  73.     marginwidth="0"
  74.     src="https://www.openstreetmap.org/export/embed.html?bbox=-61.5270%2C16.2570%2C-61.5070%2C16.2770&amp;layer=mapnik&amp;marker=16.2669%2C-61.5170"
  75.     style="border:1px solid #ccc;">
  76.   </iframe>
  77. </div>
  78. <p class="text-muted small text-center">
  79.   <a href="https://www.openstreetmap.org/?mlat=16.2669&amp;mlon=-61.5170#map=15/16.2669/-61.5170" target="_blank">
  80.     Voir la carte agrandie
  81.   </a>
  82. </p>
  83.     </div>
  85.     {# Formulaire de contact #}
  86.     <div class="col-12 col-lg-7">
  87.       <div class="card border-0 shadow-lg rounded-4">
  88.         <div class="card-body p-4">
  89.           <h2 class="h5 fw-bold mb-4">Envoyez-nous un message</h2>
  90.           <form method="post" action="{#{ path('contact.send') }#}">
  91.             <div class="row g-3">
  92.               <div class="col-md-6">
  93.                 <label class="form-label">Nom</label>
  94.                 <input type="text" name="name" class="form-control rounded-pill" placeholder="Votre nom complet" required>
  95.               </div>
  96.               <div class="col-md-6">
  97.                 <label class="form-label">Email</label>
  98.                 <input type="email" name="email" class="form-control rounded-pill" placeholder="vous@email.com" required>
  99.               </div>
  100.               <div class="col-md-6">
  101.                 <label class="form-label">TĂ©lĂ©phone</label>
  102.                 <input type="tel" name="phone" class="form-control rounded-pill" placeholder="+590 ..." >
  103.               </div>
  104.               <div class="col-md-6">
  105.                 <label class="form-label">Sujet</label>
  106.                 <input type="text" name="subject" class="form-control rounded-pill" placeholder="Ex: Demande de devis">
  107.               </div>
  108.               <div class="col-12">
  109.                 <label class="form-label">Message</label>
  110.                 <textarea name="message" rows="5" class="form-control rounded-4" placeholder="Votre message..." required></textarea>
  111.               </div>
  112.             </div>
  114.             <div class="text-end mt-4">
  115.               <button type="submit" class="btn btn-primary rounded-pill px-4">
  116.                 <i class="bi bi-send me-1"></i> Envoyer
  117.               </button>
  118.             </div>
  119.           </form>
  120.         </div>
  121.       </div>
  122.     </div>
  124.   </div>
  125. </section>
  126. {% endblock %}