templates/pages/contact.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  2. {% block title %}Contact - WA BENIN
  3. {% endblock %}
  4. {% block body %}
  5. <div class="page-header" style="height: 35vh; min-height: 250px; background-image: linear-gradient(rgba(31, 31, 31, 0.8), rgba(31, 31, 31, 0.8)), url('https://images.unsplash.com/photo-1516387938699-a93567ec168e?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80'); margin-bottom: 0;">
  6. <div class="container fade-up">
  7. <h1 class="page-title">Contactez-nous</h1>
  8. </div>
  9. </div>
  10. <!-- Contact Info & Map -->
  11. <section
  12. class="section-padding bg-light" style="position: relative; overflow: hidden;">
  13. <!-- Simple background pattern -->
  14. <div style="position: absolute; top: -50px; right: -50px; width: 300px; height: 300px; border-radius: 50%; background: var(--gold); opacity: 0.05;"></div>
  15. <div class="container">
  16. <div
  17. style="display: grid; grid-template-columns: 1fr 2fr; gap: 50px;">
  18. <!-- Info Cards -->
  19. <div style="display: flex; flex-direction: column; gap: 20px;">
  20. <div class="fade-up" style="background: #fff; padding: 30px; border-radius: var(--border-radius); box-shadow: var(--shadow-soft);">
  21. <i class="fas fa-map-marker-alt fa-2x" style="color: var(--gold); margin-bottom: 15px;"></i>
  22. <h3 style="margin-bottom: 10px; font-size: 1.2rem;">Siège Social</h3>
  23. <p style="color: #666; font-size: 0.95rem;">115 boulevard Jourdan<br>75014 Paris 14e, France</p>
  24. </div>
  25. <div class="fade-up" style="background: #fff; padding: 30px; border-radius: var(--border-radius); box-shadow: var(--shadow-soft); transition-delay: 0.1s;">
  26. <i class="fas fa-envelope fa-2x" style="color: var(--red); margin-bottom: 15px;"></i>
  27. <h3 style="margin-bottom: 10px; font-size: 1.2rem;">Email</h3>
  28. <p style="color: #666; font-size: 0.95rem;">contact@wabenin.org</p>
  29. </div>
  30. <div class="fade-up" style="background: #fff; padding: 30px; border-radius: var(--border-radius); box-shadow: var(--shadow-soft); transition-delay: 0.2s;">
  31. <i class="fab fa-whatsapp fa-2x" style="color: var(--green); margin-bottom: 15px;"></i>
  32. <h3 style="margin-bottom: 10px; font-size: 1.2rem;">Téléphone & WhatsApp</h3>
  33. <p style="color: #666; font-size: 0.95rem;">+33 07 56 90 60 34<br>Lun-Ven, 09:00 - 18:00</p>
  34. </div>
  35. </div>
  36. <!-- Form -->
  37. <div class="fade-up" style="background: #fff; padding: 50px; border-radius: var(--border-radius-lg); box-shadow: var(--shadow-hover);">
  38. <h2 style="margin-bottom: 30px; font-size: 2rem;">Envoyez-nous un message</h2>
  39. <form action="{{ path('app_contact_submit') }}" method="POST">
  40. <input type="hidden" name="type" value="contact">
  41. <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px;">
  42. <div>
  43. <label style="display: block; margin-bottom: 8px; color: #555; font-weight: 500;">Prénom</label>
  44. <input type="text" name="name" placeholder="Prénom" required style="width: 100%; padding: 15px; border: 1px solid #ddd; border-radius: 8px; outline: none;">
  45. </div>
  46. <div>
  47. <label style="display: block; margin-bottom: 8px; color: #555; font-weight: 500;">Nom</label>
  48. <input type="text" name="lastname" placeholder="Nom" required style="width: 100%; padding: 15px; border: 1px solid #ddd; border-radius: 8px; outline: none;">
  49. </div>
  50. </div>
  51. <div style="margin-bottom: 20px;">
  52. <label style="display: block; margin-bottom: 8px; color: #555; font-weight: 500;">Adresse Email</label>
  53. <input type="email" name="email" required style="width: 100%; padding: 15px; border: 1px solid #ddd; border-radius: 8px; outline: none;">
  54. </div>
  55. <div style="margin-bottom: 20px;">
  56. <label style="display: block; margin-bottom: 8px; color: #555; font-weight: 500;">Sujet</label>
  57. <select name="subject" required style="width: 100%; padding: 15px; border: 1px solid #ddd; border-radius: 8px; outline: none; background: #fff;">
  58. <option value="Informations générales">Informations générales</option>
  59. <option value="Festival WA BENIN">Festival WA BENIN</option>
  60. <option value="Devenir Sponsor">Devenir Sponsor</option>
  61. <option value="Problème Adhésion/Don">Problème Adhésion/Don</option>
  62. </select>
  63. </div>
  64. <div style="margin-bottom: 30px;">
  65. <label style="display: block; margin-bottom: 8px; color: #555; font-weight: 500;">Votre Message</label>
  66. <textarea name="message" required style="width: 100%; padding: 15px; border: 1px solid #ddd; border-radius: 8px; outline: none; height: 150px; resize: none;"></textarea>
  67. </div>
  68. <button type="submit" class="btn btn-primary" style="width: 100%; padding: 15px; font-size: 1.1rem;">Envoyer le message</button>
  69. </form>
  70. </div>
  71. </div>
  72. <!-- Map Placeholder -->
  73. <div class="fade-up" style="margin-top: 50px; width: 100%; height: 400px; background: #ddd; border-radius: var(--border-radius-lg); overflow: hidden; position: relative;">
  74. <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2626.863903984296!2d2.3245321774593433!3d48.822658103219176!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e671aee97e4f47%3A0x5ba0766c55932ff2!2s115%20Bd%20Jourdan%2C%2075014%20Paris%2C%20France!5e0!3m2!1sfr!2sbj!4v1778768446160!5m2!1sfr!2sbj" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
  75. </div>
  76. </div>
  77. </section>
  78. {% endblock %}