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