templates/pages/contact.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Contact - WA BENIN
  4. {% endblock %}
  6. {% block body %}
  7. <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;">
  8. <div class="container fade-up">
  9. <h1 class="page-title">Contactez-nous</h1>
  10. </div>
  11. </div>
  13. <!-- Contact Info & Map -->
  14. <section
  15. class="section-padding bg-light" style="position: relative; overflow: hidden;">
  16. <!-- Simple background pattern -->
  17. <div style="position: absolute; top: -50px; right: -50px; width: 300px; height: 300px; border-radius: 50%; background: var(--gold); opacity: 0.05;"></div>
  19. <div class="container">
  20. <div
  21. style="display: grid; grid-template-columns: 1fr 2fr; gap: 50px;">
  23. <!-- Info Cards -->
  24. <div style="display: flex; flex-direction: column; gap: 20px;">
  25. <div class="fade-up" style="background: #fff; padding: 30px; border-radius: var(--border-radius); box-shadow: var(--shadow-soft);">
  26. <i class="fas fa-map-marker-alt fa-2x" style="color: var(--gold); margin-bottom: 15px;"></i>
  27. <h3 style="margin-bottom: 10px; font-size: 1.2rem;">Siège Social</h3>
  28. <p style="color: #666; font-size: 0.95rem;">115 boulevard Jourdan<br>75014 Paris 14e, France</p>
  29. </div>
  31. <div class="fade-up" style="background: #fff; padding: 30px; border-radius: var(--border-radius); box-shadow: var(--shadow-soft); transition-delay: 0.1s;">
  32. <i class="fas fa-envelope fa-2x" style="color: var(--red); margin-bottom: 15px;"></i>
  33. <h3 style="margin-bottom: 10px; font-size: 1.2rem;">Email</h3>
  34. <p style="color: #666; font-size: 0.95rem;">contact@wabenin.org</p>
  35. </div>
  37. <div class="fade-up" style="background: #fff; padding: 30px; border-radius: var(--border-radius); box-shadow: var(--shadow-soft); transition-delay: 0.2s;">
  38. <i class="fab fa-whatsapp fa-2x" style="color: var(--green); margin-bottom: 15px;"></i>
  39. <h3 style="margin-bottom: 10px; font-size: 1.2rem;">Téléphone & WhatsApp</h3>
  40. <p style="color: #666; font-size: 0.95rem;">+33 07 56 90 60 34<br>Lun-Ven, 09:00 - 18:00</p>
  41. </div>
  42. </div>
  44. <!-- Form -->
  45. <div class="fade-up" style="background: #fff; padding: 50px; border-radius: var(--border-radius-lg); box-shadow: var(--shadow-hover);">
  46. <h2 style="margin-bottom: 30px; font-size: 2rem;">Envoyez-nous un message</h2>
  47. <form action="{{ path('app_contact_submit') }}" method="POST">
  48. <input type="hidden" name="type" value="contact">
  49. <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px;">
  50. <div>
  51. <label style="display: block; margin-bottom: 8px; color: #555; font-weight: 500;">Prénom</label>
  52. <input type="text" name="name" placeholder="Prénom" required style="width: 100%; padding: 15px; border: 1px solid #ddd; border-radius: 8px; outline: none;">
  53. </div>
  54. <div>
  55. <label style="display: block; margin-bottom: 8px; color: #555; font-weight: 500;">Nom</label>
  56. <input type="text" name="lastname" placeholder="Nom" required style="width: 100%; padding: 15px; border: 1px solid #ddd; border-radius: 8px; outline: none;">
  57. </div>
  58. </div>
  60. <div style="margin-bottom: 20px;">
  61. <label style="display: block; margin-bottom: 8px; color: #555; font-weight: 500;">Adresse Email</label>
  62. <input type="email" name="email" required style="width: 100%; padding: 15px; border: 1px solid #ddd; border-radius: 8px; outline: none;">
  63. </div>
  65. <div style="margin-bottom: 20px;">
  66. <label style="display: block; margin-bottom: 8px; color: #555; font-weight: 500;">Sujet</label>
  67. <select name="subject" required style="width: 100%; padding: 15px; border: 1px solid #ddd; border-radius: 8px; outline: none; background: #fff;">
  68. <option value="Informations générales">Informations générales</option>
  69. <option value="Festival WA BENIN">Festival WA BENIN</option>
  70. <option value="Devenir Sponsor">Devenir Sponsor</option>
  71. <option value="Problème Adhésion/Don">Problème Adhésion/Don</option>
  72. </select>
  73. </div>
  75. <div style="margin-bottom: 30px;">
  76. <label style="display: block; margin-bottom: 8px; color: #555; font-weight: 500;">Votre Message</label>
  77. <textarea name="message" required style="width: 100%; padding: 15px; border: 1px solid #ddd; border-radius: 8px; outline: none; height: 150px; resize: none;"></textarea>
  78. </div>
  80. <button type="submit" class="btn btn-primary" style="width: 100%; padding: 15px; font-size: 1.1rem;">Envoyer le message</button>
  81. </form>
  82. </div>
  83. </div>
  85. <!-- Map Placeholder -->
  86. <div class="fade-up" style="margin-top: 50px; width: 100%; height: 400px; background: #ddd; border-radius: var(--border-radius-lg); overflow: hidden; position: relative;">
  87. <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>
  88. </div>
  89. </div>
  90. </section>
  91. {% endblock %}