templates/adhesion/adhesion.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Adhésion - Rejoindre WA BENIN{% endblock %}
  5. {% block body %}
  6. <!-- Page Header & Hero -->
  7. <div class="page-header" style="height: 60vh; min-height: 450px; background-image: linear-gradient(rgba(11, 74, 35, 0.85), rgba(31, 31, 31, 0.9)), url('https://images.unsplash.com/photo-1528605248644-14dd04022da1?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80');">
  8. <div class="container fade-up" style="max-width: 800px;">
  9. <h1 class="page-title" style="font-size: 4rem; margin-bottom: 20px;">Devenir Membre</h1>
  10. <p style="font-size: 1.3rem; color: #fff; opacity: 0.9; margin-bottom: 40px;">
  11. Rejoignez la grande famille WA BENIN. En devenant membre, vous ne faites pas que soutenir une association, vous devenez un pilier de la culture et du rayonnement béninois à l'international.
  12. </p>
  13. <a href="#packs" class="btn btn-primary" style="padding: 15px 40px; font-size: 1.2rem; display: inline-flex; align-items: center; gap: 10px;">
  14. Adhérer maintenant <i class="fas fa-arrow-down"></i>
  15. </a>
  16. </div>
  17. </div>
  19. <!-- Section: Avantages & Importance -->
  20. <section class="section-padding bg-light" id="avantages">
  21. <div class="container">
  22. <div class="section-title fade-up">
  23. <span>Pourquoi nous rejoindre ?</span>
  24. <h2>L'importance de votre engagement</h2>
  25. </div>
  27. <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-bottom: 60px;">
  28. <div class="fade-up" style="background: #fff; padding: 40px; border-radius: var(--border-radius-lg); box-shadow: var(--shadow-soft); text-align: center;">
  29. <div style="width: 80px; height: 80px; background: rgba(116, 172, 49, 0.1); color: var(--green); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; margin: 0 auto 20px;">
  30. <i class="fas fa-globe-africa"></i>
  31. </div>
  32. <h3 style="font-size: 1.5rem; margin-bottom: 15px;">Rayonnement Culturel</h3>
  33. <p style="color: #666; font-size: 1.05rem;">Votre adhésion permet de financer des événements internationaux majeurs, comme le Festival WA BENIN, et d'exporter notre patrimoine à travers le monde.</p>
  34. </div>
  36. <div class="fade-up" style="background: #fff; padding: 40px; border-radius: var(--border-radius-lg); box-shadow: var(--shadow-soft); text-align: center; transition-delay: 0.1s;">
  37. <div style="width: 80px; height: 80px; background: rgba(237, 173, 17, 0.1); color: var(--gold); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; margin: 0 auto 20px;">
  38. <i class="fas fa-users"></i>
  39. </div>
  40. <h3 style="font-size: 1.5rem; margin-bottom: 15px;">Communauté Solidaire</h3>
  41. <p style="color: #666; font-size: 1.05rem;">Intégrez un réseau dynamique d'artistes, de professionnels et de passionnés. Participez à nos Assemblées Générales et orientez l'avenir de l'association.</p>
  42. </div>
  44. <div class="fade-up" style="background: #fff; padding: 40px; border-radius: var(--border-radius-lg); box-shadow: var(--shadow-soft); text-align: center; transition-delay: 0.2s;">
  45. <div style="width: 80px; height: 80px; background: rgba(226, 109, 25, 0.1); color: var(--orange); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; margin: 0 auto 20px;">
  46. <i class="fas fa-star"></i>
  47. </div>
  48. <h3 style="font-size: 1.5rem; margin-bottom: 15px;">Avantages Exclusifs</h3>
  49. <p style="color: #666; font-size: 1.05rem;">Bénéficiez de tarifs réduits sur la billetterie, d'invitations à des soirées privées (Gala, vernissages) et d'un accès VIP aux artistes de nos festivals.</p>
  50. </div>
  51. </div>
  52. </div>
  53. </section>
  55. <!-- Section: Packs d'adhésion -->
  56. <section class="section-padding" id="packs" style="background: #fff;">
  57. <div class="container">
  58. <div class="section-title fade-up">
  59. <span>Nos Formules</span>
  60. <h2>Choisissez votre statut</h2>
  61. </div>
  63. <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 50px;">
  64. <!-- Plan Étudiant -->
  65. <div class="fade-up" style="background: var(--white-off); border-radius: var(--border-radius-lg); padding: 40px; text-align: center; box-shadow: var(--shadow-soft); transition: var(--transition);">
  66. <h3 style="font-size: 1.5rem; color: var(--black-dark); margin-bottom: 15px;">Étudiant</h3>
  67. <div style="font-family: var(--font-heading); margin-bottom: 25px;">
  68. <span style="font-size: 3rem; font-weight: 700; color: var(--gold);">20€</span>
  69. <span style="color: #888;">/an</span>
  70. </div>
  71. <ul style="text-align: left; margin-bottom: 30px; color: #555;">
  72. <li style="margin-bottom: 15px;"><i class="fas fa-check" style="color: var(--green); margin-right: 10px;"></i> Carte membre digitale</li>
  73. <li style="margin-bottom: 15px;"><i class="fas fa-check" style="color: var(--green); margin-right: 10px;"></i> Accès Espace Membre</li>
  74. <li style="margin-bottom: 15px;"><i class="fas fa-check" style="color: var(--green); margin-right: 10px;"></i> Tarif réduit festival (-20%)</li>
  75. <li style="margin-bottom: 15px;"><i class="fas fa-check" style="color: var(--green); margin-right: 10px;"></i> Droit de vote AG</li>
  76. </ul>
  77. <button data-plan="etudiant" data-price="20" class="btn btn-outline open-modal" style="width: 100%;">Sélectionner</button>
  78. </div>
  80. <!-- Plan Standard (Highlighted) -->
  81. <div class="fade-up" style="background: var(--black-dark); border-radius: var(--border-radius-lg); padding: 40px; text-align: center; box-shadow: var(--shadow-hover); transform: scale(1.05); position: relative; color: #fff; transition: var(--transition); transition-delay: 0.1s; border-top: 6px solid var(--green);">
  82. <div style="position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); background: var(--green); color: #fff; padding: 5px 20px; border-radius: 20px; font-size: 0.85rem; font-weight: 600; text-transform: uppercase;">Recommandé</div>
  84. <h3 style="font-size: 1.5rem; color: #fff; margin-bottom: 15px; margin-top: 10px;">Standard</h3>
  85. <div style="font-family: var(--font-heading); margin-bottom: 25px;">
  86. <span style="font-size: 3.5rem; font-weight: 700; color: var(--gold);">50€</span>
  87. <span style="color: #aaa;">/an</span>
  88. </div>
  89. <ul style="text-align: left; margin-bottom: 30px; color: #ddd;">
  90. <li style="margin-bottom: 15px;"><i class="fas fa-check" style="color: var(--green); margin-right: 10px;"></i> Carte membre digitale & physique</li>
  91. <li style="margin-bottom: 15px;"><i class="fas fa-check" style="color: var(--green); margin-right: 10px;"></i> Accès Espace Membre VIP</li>
  92. <li style="margin-bottom: 15px;"><i class="fas fa-check" style="color: var(--green); margin-right: 10px;"></i> 1 place Festival offerte</li>
  93. <li style="margin-bottom: 15px;"><i class="fas fa-check" style="color: var(--green); margin-right: 10px;"></i> Invitation événements privés</li>
  94. <li style="margin-bottom: 15px;"><i class="fas fa-check" style="color: var(--green); margin-right: 10px;"></i> Droit de vote AG</li>
  95. </ul>
  96. <button data-plan="standard" data-price="50" class="btn btn-primary open-modal" style="width: 100%;">Adhérer Maintenant</button>
  97. </div>
  99. <!-- Plan Bienfaiteur -->
  100. <div class="fade-up" style="background: var(--white-off); border-radius: var(--border-radius-lg); padding: 40px; text-align: center; box-shadow: var(--shadow-soft); transition: var(--transition); transition-delay: 0.2s;">
  101. <h3 style="font-size: 1.5rem; color: var(--black-dark); margin-bottom: 15px;">Bienfaiteur</h3>
  102. <div style="font-family: var(--font-heading); margin-bottom: 25px;">
  103. <span style="font-size: 3rem; font-weight: 700; color: var(--gold);">150€+</span>
  104. <span style="color: #888;">/an</span>
  105. </div>
  106. <ul style="text-align: left; margin-bottom: 30px; color: #555;">
  107. <li style="margin-bottom: 15px;"><i class="fas fa-check" style="color: var(--gold); margin-right: 10px;"></i> Avantages Standard inclus</li>
  108. <li style="margin-bottom: 15px;"><i class="fas fa-check" style="color: var(--gold); margin-right: 10px;"></i> Pass VIP Festival (2 pers.)</li>
  109. <li style="margin-bottom: 15px;"><i class="fas fa-check" style="color: var(--gold); margin-right: 10px;"></i> Mention dans le rapport annuel</li>
  110. <li style="margin-bottom: 15px;"><i class="fas fa-check" style="color: var(--gold); margin-right: 10px;"></i> Dîner annuel des bienfaiteurs</li>
  111. </ul>
  112. <button data-plan="bienfaiteur" data-price="150" class="btn btn-outline open-modal" style="width: 100%;">Sélectionner</button>
  113. </div>
  114. </div>
  116. <div style="margin-top: 60px; text-align: center; padding: 30px; background: var(--white-off); border-radius: var(--border-radius-lg); display: flex; align-items: center; justify-content: center; gap: 20px;">
  117. <i class="fab fa-stripe fa-3x" style="color: #635bff;"></i>
  118. <div style="text-align: left;">
  119. <h4 style="margin: 0;">Paiement 100% Sécurisé</h4>
  120. <p style="color: #666; font-size: 0.9rem; margin: 0;">Vos transactions sont protégées par le système de cryptage Stripe.</p>
  121. </div>
  122. <div style="display: flex; gap: 10px; font-size: 2rem; color: #999; margin-left: 20px;">
  123. <i class="fab fa-cc-visa"></i>
  124. <i class="fab fa-cc-mastercard"></i>
  125. <i class="fab fa-cc-apple-pay"></i>
  126. </div>
  127. </div>
  128. </div>
  129. </section>
  131. <!-- Modal Adhésion -->
  132. <div id="adhesionModal" class="modal">
  133. <div class="modal-content">
  134. <span class="close-modal">&times;</span>
  135. <div style="text-align: center; margin-bottom: 30px;">
  136. <span id="modalPlanBadge" style="display: inline-block; padding: 5px 15px; background: rgba(116, 172, 49, 0.1); color: var(--green); border-radius: 20px; font-weight: bold; margin-bottom: 10px; text-transform: uppercase; font-size: 0.85rem;"></span>
  137. <h2 style="font-size: 2rem; margin-bottom: 10px;">Finalisez votre adhésion</h2>
  138. <p style="color: #666;">Montant à régler : <strong id="modalPriceText" style="color: var(--black-dark); font-size: 1.2rem;"></strong></p>
  139. </div>
  141. <form action="{{ path('app_checkout_adhesion') }}" method="POST">
  142. <input type="hidden" name="plan" id="modalPlanInput">
  143. <input type="hidden" name="price" id="modalPriceInput">
  145. <div class="form-grid">
  146. <div>
  147. <label>Nom</label>
  148. <input type="text" name="lastname" required>
  149. </div>
  150. <div>
  151. <label>Prénom(s)</label>
  152. <input type="text" name="firstname" required>
  153. </div>
  154. </div>
  156. <div style="margin-bottom: 15px;">
  157. <label>Email (Votre identifiant de connexion)</label>
  158. <input type="email" name="email" required>
  159. </div>
  161. <div style="margin-bottom: 30px;">
  162. <label>Téléphone (Optionnel)</label>
  163. <input type="tel" name="phone">
  164. </div>
  166. <div style="background: rgba(244, 180, 0, 0.05); border: 1px solid rgba(244, 180, 0, 0.2); padding: 15px; border-radius: 8px; margin-bottom: 25px; display: flex; gap: 15px; align-items: flex-start;">
  167. <i class="fas fa-info-circle text-gold" style="margin-top: 3px;"></i>
  168. <p style="color: #666; font-size: 0.9rem; margin: 0;">
  169. Une fois le paiement effectué, vous recevrez un email contenant votre <strong>mot de passe (OTP)</strong> pour accéder immédiatement à votre Espace Membre.
  170. </p>
  171. </div>
  173. <button type="submit" class="btn btn-primary" style="width: 100%; padding: 15px; font-size: 1.1rem; display: flex; justify-content: center; gap: 10px; align-items: center;">
  174. Passer au paiement <i class="fas fa-lock" style="font-size: 0.9rem;"></i>
  175. </button>
  176. </form>
  177. </div>
  178. </div>
  180. <!-- JS for smooth scrolling & Modal -->
  181. <script>
  182. document.addEventListener('DOMContentLoaded', function() {
  183. // Smooth Scroll
  184. document.querySelector('a[href="#packs"]').addEventListener('click', function(e) {
  185. e.preventDefault();
  186. document.querySelector('#packs').scrollIntoView({
  187. behavior: 'smooth'
  188. });
  189. });
  191. // Modal Logic
  192. const modal = document.getElementById('adhesionModal');
  193. const btns = document.querySelectorAll('.open-modal');
  194. const span = document.querySelector('.close-modal');
  196. btns.forEach(btn => {
  197. btn.addEventListener('click', function(e) {
  198. e.preventDefault();
  199. const plan = this.getAttribute('data-plan');
  200. const price = this.getAttribute('data-price');
  202. document.getElementById('modalPlanBadge').innerText = 'Pack ' + plan;
  203. document.getElementById('modalPriceText').innerText = price + '€';
  204. document.getElementById('modalPlanInput').value = plan;
  205. document.getElementById('modalPriceInput').value = price;
  207. modal.style.display = "flex";
  208. });
  209. });
  211. span.onclick = function() {
  212. modal.style.display = "none";
  213. }
  215. window.onclick = function(event) {
  216. if (event.target == modal) {
  217. modal.style.display = "none";
  218. }
  219. }
  220. });
  221. </script>
  222. {% endblock %}