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.     <img src="{{ asset('img/cta-tourist.jpg')}}" alt="Plage paradisiaque" class="w-100 h-100 object-fit-cover">
  10.   </div>
  11.   <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">
  12.     <div class="p-3">
  13.       <h1 class="display-4 fw-bold mb-3">Restons en contact đźŚ´</h1>
  14.       <p class="lead">Une question, une envie d’évasion ou besoin d’un devis sur mesure ?  
  15.         L’équipe <span class="fw-bold text-warning">Otropik</span> est Ă  votre Ă©coute.</p>
  16.     </div>
  17.   </div>
  18. </section>
  20. {# --- Section principale --- #}
  21. <section class="container py-5">
  22.   <div class="row g-5">
  24.     {# Infos de contact #}
  25.     <div class="col-12 col-lg-5">
  26.       <h2 class="h4 fw-bold mb-4">Nos coordonnĂ©es</h2>
  27.       <p class="text-muted mb-4">
  28.         Passez nous voir, appelez-nous ou envoyez un message : nous rĂ©pondons rapidement.
  29.       </p>
  31.       <ul class="list-unstyled">
  32.         <li class="mb-3 d-flex align-items-start">
  33.           <i class="bi bi-geo-alt txt-ot-green fs-4 me-3"></i>
  34.           <div>
  35.             <strong>Adresse</strong><br>
  36.             CENTRE SHOPPING CENTER, RAIZET <br> 97139 LES ABYMES 
  37.           </div>
  38.         </li>
  39.         <li class="mb-3 d-flex align-items-start">
  40.           <i class="bi bi-telephone txt-ot-green fs-4 me-3"></i>
  41.           <div>
  42.             <strong>TĂ©lĂ©phone</strong><br>
  43.             Bureau : <a class="link-info" href="tel:+590590505134">0590 50 51 34</a><br>Mobile : <a class="link-info" href="tel:+590690357030">0690 35 70 30</a>
  44.           </div>
  45.         </li>
  46.         <li class="mb-3 d-flex align-items-start">
  47.           <i class="bi bi-envelope txt-ot-green fs-4 me-3"></i>
  48.           <div>
  49.             <strong>Email</strong><br>
  50.             <a class="link-info" href="mailto:o_tropik@hotmail.com">o_tropik@hotmail.com</a>
  51.           </div>
  52.         </li>
  53.       </ul>
  55.       <div class="ratio ratio-4x3 rounded-4 overflow-hidden shadow-sm mt-4">
  56.         <iframe src="https://www.google.com/maps/embed?pb=!1m18!..." 
  57.                 style="border:0;" allowfullscreen loading="lazy"></iframe>
  58.       </div>
  59.     </div>
  61.     {# Formulaire de contact #}
  62.     <div class="col-12 col-lg-7">
  63.       <div class="card border-0 shadow-lg rounded-4">
  64.         <div class="card-body p-4">
  65.           <h2 class="h5 fw-bold mb-4">Envoyez-nous un message</h2>
  66.           <form method="post" action="{#{ path('contact.send') }#}">
  67.             <div class="row g-3">
  68.               <div class="col-md-6">
  69.                 <label class="form-label">Nom</label>
  70.                 <input type="text" name="name" class="form-control rounded-pill" placeholder="Votre nom complet" required>
  71.               </div>
  72.               <div class="col-md-6">
  73.                 <label class="form-label">Email</label>
  74.                 <input type="email" name="email" class="form-control rounded-pill" placeholder="vous@email.com" required>
  75.               </div>
  76.               <div class="col-md-6">
  77.                 <label class="form-label">TĂ©lĂ©phone</label>
  78.                 <input type="tel" name="phone" class="form-control rounded-pill" placeholder="+590 ..." >
  79.               </div>
  80.               <div class="col-md-6">
  81.                 <label class="form-label">Sujet</label>
  82.                 <input type="text" name="subject" class="form-control rounded-pill" placeholder="Ex: Demande de devis">
  83.               </div>
  84.               <div class="col-12">
  85.                 <label class="form-label">Message</label>
  86.                 <textarea name="message" rows="5" class="form-control rounded-4" placeholder="Votre message..." required></textarea>
  87.               </div>
  88.             </div>
  90.             <div class="text-end mt-4">
  91.               <button type="submit" class="btn btn-primary rounded-pill px-4">
  92.                 <i class="bi bi-send me-1"></i> Envoyer
  93.               </button>
  94.             </div>
  95.           </form>
  96.         </div>
  97.       </div>
  98.     </div>
  100.   </div>
  101. </section>
  102. {% endblock %}