templates/base.html.twig line 1

Open in your IDE?
  1. <!DOCTYPE html>
  2. <html lang="fr">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>
  7. {% block title %}WA BENIN - Association Culturelle
  8. {% endblock %}
  9. </title>
  11. <!-- SEO Meta Tags -->
  12. <meta name="description" content="WA BENIN est une association culturelle béninoise promouvant l'art, la culture et le Festival WA BENIN à l'international.">
  13. <meta property="og:title" content="WA BENIN - Célébrons la Culture">
  14. <meta property="og:description" content="Découvrez notre association culturelle, nos événements, et participez au Festival WA BENIN.">
  15. <meta
  16. property="og:type" content="website">
  18. <!-- Fonts: Poppins for headings, Inter for body -->
  19. <link rel="preconnect" href="https://fonts.googleapis.com">
  20. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  21. <link
  22. href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Poppins:wght@400;500;600;700;800&display=swap" rel="stylesheet">
  24. <!-- FontAwesome for Icons -->
  25. <link
  26. rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  28. <!-- Custom CSS -->
  29. <link rel="stylesheet" href="{{ asset('css/style.css') }}?v=4"> {% block stylesheets %}{% endblock %}
  30. </head>
  31. <body>
  32. <!-- Navigation -->
  33. <header class="main-header">
  34. <div class="container">
  35. <nav class="navbar">
  36. <a href="{{ path('app_home') }}" class="logo">
  37. <span class="logo-text">WA
  38. <strong>BENIN</strong>
  39. </span>
  40. </a>
  41. {% set current_route = app.request.attributes.get('_route') %}
  42. <ul class="nav-links">
  43. <li>
  44. <a href="{{ path('app_association') }}" class="{{ current_route == 'app_association' ? 'active' : '' }}">Association</a>
  45. </li>
  46. {# <li>
  47. <a href="{{ path('app_festival') }}" class="{{ current_route == 'app_festival' ? 'active' : '' }}">Festival</a>
  48. </li> #}
  49. <li>
  50. <a href="{{ path('app_evenements') }}" class="{{ current_route in ['app_evenements', 'app_event_show'] ? 'active' : '' }}">Événements</a>
  51. </li>
  52. <li>
  53. <a href="{{ path('app_galerie') }}" class="{{ current_route == 'app_galerie' ? 'active' : '' }}">Galerie</a>
  54. </li>
  55. <li>
  56. <a href="{{ path('app_adhesion') }}" class="{{ current_route == 'app_adhesion' ? 'active' : '' }}">Adhésion</a>
  57. </li>
  58. <li>
  59. <a href="{{ path('app_blog') }}" class="{{ current_route in ['app_blog', 'app_article_show'] ? 'active' : '' }}">Actualités</a>
  60. </li>
  61. <li>
  62. <a href="{{ path('app_contact') }}" class="{{ current_route == 'app_contact' ? 'active' : '' }}">Contact</a>
  63. </li>
  64. </ul>
  65. <div class="nav-actions" style="display: flex; gap: 15px; margin-left: 20px;">
  66. <a href="{{ path('app_dons') }}" class="btn btn-outline" style="border-color: var(--green); color: var(--green);">Faire un don</a>
  67. {% if app.session.get('member_id') %}
  68. <a href="{{ path('app_espace_membre') }}" class="btn btn-primary" style="background: var(--green); color: #fff;">Tableau de bord</a>
  69. <a href="{{ path('app_member_logout') }}" class="btn btn-outline" style="border-color: var(--red); color: var(--red);">
  70. <i class="fas fa-sign-out-alt"></i>
  71. </a>
  72. {% else %}
  73. <a href="{{ path('app_espace_membre') }}" class="btn btn-primary" style="background: var(--green); color: #fff;">
  74. <i class="fas fa-user" style="margin-right: 8px;"></i>
  75. Espace Membre</a>
  76. {% endif %}
  77. </div>
  79. <div class="mobile-menu-btn">
  80. <i class="fas fa-bars"></i>
  81. </div>
  82. </nav>
  83. </div>
  85. <!-- Mobile Menu Overlay -->
  86. <div class="mobile-nav-overlay" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: var(--black-dark); z-index: 2000; flex-direction: column; padding: 40px 20px;">
  87. <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px;">
  88. <span class="logo-text" style="color: #fff;">WA
  89. <strong>BENIN</strong>
  90. </span>
  91. <i class="fas fa-times mobile-menu-close" style="color: #fff; font-size: 2rem; cursor: pointer;"></i>
  92. </div>
  93. <ul style="display: flex; flex-direction: column; gap: 20px; font-size: 1.5rem; text-align: center;">
  94. <li>
  95. <a href="{{ path('app_association') }}" style="color: #fff;">Association</a>
  96. </li>
  97. <li>
  98. <a href="{{ path('app_evenements') }}" style="color: #fff;">Événements</a>
  99. </li>
  100. <li>
  101. <a href="{{ path('app_galerie') }}" style="color: #fff;">Galerie</a>
  102. </li>
  103. <li>
  104. <a href="{{ path('app_adhesion') }}" style="color: #fff;">Adhésion</a>
  105. </li>
  106. <li>
  107. <a href="{{ path('app_blog') }}" style="color: #fff;">Actualités</a>
  108. </li>
  109. <li>
  110. <a href="{{ path('app_contact') }}" style="color: #fff;">Contact</a>
  111. </li>
  112. <li style="margin-top: 20px;">
  113. <a href="{{ path('app_dons') }}" class="btn btn-outline" style="border-color: var(--gold); color: var(--gold); width: 100%;">Faire un don</a>
  114. </li>
  115. <li>
  116. <a href="{{ path('app_espace_membre') }}" class="btn btn-primary" style="width: 100%;">Espace Membre</a>
  117. </li>
  118. </ul>
  119. </div>
  120. </header>
  122. <!-- Main Content -->
  123. <main>
  124. {% block body %}{% endblock %}
  125. </main>
  127. <!-- Footer -->
  128. <footer class="main-footer">
  129. <div class="container">
  130. <div class="footer-grid">
  131. <div class="footer-col about">
  132. <h3>WA BENIN</h3>
  133. <p>Association culturelle dédiée à la promotion et au rayonnement de la culture béninoise à travers le monde.</p>
  134. <div class="social-links">
  135. <a href="#">
  136. <i class="fab fa-facebook-f"></i>
  137. </a>
  138. <a href="#">
  139. <i class="fab fa-instagram"></i>
  140. </a>
  141. <a href="#">
  142. <i class="fab fa-twitter"></i>
  143. </a>
  144. <a href="#">
  145. <i class="fab fa-youtube"></i>
  146. </a>
  147. </div>
  148. </div>
  149. <div class="footer-col links">
  150. <h4>Liens Rapides</h4>
  151. <ul>
  152. <li><ahref="{{path('app_association')}}">Notre Histoire</a></li>
  153. <li><ahref="{{path('app_adhesion')}}">Adhésion</a></li>
  154. <li><ahref="{{path('app_sponsoring')}}">Devenir Sponsor</a></li>
  155. <li><ahref="{{path('app_espace_membre')}}">Espace Membre</a></li>
  156. </ul>
  157. </div>
  158. <div class="footer-col contact">
  159. <h4>Contact</h4>
  160. <p>
  161. <i class="fas fa-map-marker-alt"></i>
  162. 115 boulevard Jourdan 75014 Paris 14e</p>
  163. <p>
  164. <i class="fas fa-envelope"></i>
  165. contact@wabenin.org</p>
  166. <p>
  167. <i class="fas fa-phone"></i>
  168. +33 07 56 90 60 34</p>
  169. </div>
  170. <div class="footer-col newsletter">
  171. <h4>Newsletter</h4>
  172. <p>Restez informé de nos actualités.</p>
  173. <form class="newsletter-form">
  174. <input type="email" placeholder="Votre email" required>
  175. <button type="submit">
  176. <i class="fas fa-paper-plane"></i>
  177. </button>
  178. </form>
  179. </div>
  180. </div>
  181. <div class="footer-bottom">
  182. <p>&copy;
  183. {{ 'now'|date('Y') }}
  184. WA BENIN. Tous droits réservés.</p>
  185. <div class="footer-legal">
  186. <a href="{{ path('app_cgu') }}">Mentions Légales & CGU</a>
  187. <a href="{{ path('app_privacy') }}">Confidentialité</a>
  188. <a href="{{ path('app_refund') }}">Remboursement</a>
  189. </div>
  190. </div>
  191. </div>
  192. </footer>
  194. <!-- GSAP for Animations -->
  195. <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
  196. <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
  198. <!-- Custom JS -->
  199. <script src="{{ asset('js/main.js') }}"></script>
  201. {% block javascripts %}{% endblock %}
  203. <script>
  204. document.addEventListener('DOMContentLoaded', function () {
  205. const mobileBtn = document.querySelector('.mobile-menu-btn');
  206. const closeBtn = document.querySelector('.mobile-menu-close');
  207. const overlay = document.querySelector('.mobile-nav-overlay');
  209. if (mobileBtn && overlay) {
  210. mobileBtn.addEventListener('click', () => {
  211. overlay.style.display = 'flex';
  212. document.body.style.overflow = 'hidden';
  213. });
  214. }
  216. if (closeBtn && overlay) {
  217. closeBtn.addEventListener('click', () => {
  218. overlay.style.display = 'none';
  219. document.body.style.overflow = 'auto';
  220. });
  221. }
  222. });
  223. </script>
  224. </body>
  225. </html>