templates/pages/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}WA BENIN - Festival et Culture Béninoise
  4. {% endblock %}
  6. {% block body %}
  7. <!-- Hero Section -->
  8. <section class="hero-fullscreen">
  9. <video autoplay muted loop playsinline class="hero-video-bg">
  10. <source src="{{ asset('movies/herowabenin.mp4') }}" type="video/mp4">
  11. </video>
  12. <div class="hero-overlay" style="background: linear-gradient(135deg, rgba(8, 41, 20, 0.9) 0%, rgba(218, 37, 28, 0.7) 100%); mix-blend-mode: multiply;"></div>
  13. <!-- Texture africaine discrète par-dessus -->
  14. <div style="position: absolute; inset: 0; background-image: url('data:image/svg+xml,%3Csvg width=\'60\' height=\'60\' viewBox=\'0 0 60 60\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cpath d=\'M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z\' fill=\'%23edad11\' fill-opacity=\'0.1\' fill-rule=\'evenodd\'/%3E%3C/svg%3E'); opacity: 0.6; pointer-events: none;"></div>
  15. <div class="hero-content">
  16. <span class="hero-subtitle">Culture & Patrimoine</span>
  17. <h1 class="hero-title">Célébrons l'Âme du Bénin à l'International</h1>
  18. <p class="hero-desc">Rejoignez WA BENIN, la plateforme culturelle qui promeut les arts, l'histoire et le Festival WA BENIN. Vivez une expérience immersive et contribuez à notre rayonnement mondial.</p>
  19. <div class="hero-actions">
  20. <a href="{{ path('app_adhesion') }}" class="btn btn-primary">Rejoindre le Mouvement</a>
  21. <a href="{{ path('app_association') }}" class="btn btn-outline">En Savoir Plus</a>
  22. </div>
  23. </div>
  24. </section>
  26. <!-- Presentation Section -->
  27. <section class="section-padding bg-cultural" style="overflow: hidden;">
  28. <div class="floating-icon icon-sun spin-slow" style="top: 10%; right: 5%;"></div>
  29. <div class="floating-icon icon-djembe float-fast" style="bottom: 10%; left: 5%;"></div>
  30. <div class="container">
  31. <div class="about-grid">
  32. <div class="about-image fade-up">
  33. <img src="https://images.unsplash.com/photo-1542300058-849d3b08aa0f?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Culture Africaine">
  34. <div class="about-experience">
  35. <h3>10+</h3>
  36. <span>Ans d'Impact</span>
  37. </div>
  38. </div>
  39. <div class="about-content fade-up">
  40. <div class="section-title" style="text-align: left; margin-bottom: 20px;">
  41. <span>Qui Sommes-Nous</span>
  42. <h2>L'Essence de WA BENIN</h2>
  43. <div class="cultural-divider" style="margin-left: 0;"></div>
  44. </div>
  45. <p>Fondée sur la passion de notre riche patrimoine, WA BENIN est une organisation dédiée à la mise en lumière de la culture béninoise. De la musique aux arts visuels, nous créons des ponts entre notre pays et le monde.</p>
  46. <p>Notre vision est claire : faire du Bénin une destination culturelle incontournable et soutenir nos artistes locaux dans leur développement international.</p>
  48. <div class="features-list">
  49. <div class="feature-item">
  50. <div class="feature-icon">
  51. <i class="fas fa-globe-africa"></i>
  52. </div>
  53. <div>
  54. <h4 style="margin:0; font-size:1.1rem;">Rayonnement</h4>
  55. <small>International</small>
  56. </div>
  57. </div>
  58. <div class="feature-item">
  59. <div class="feature-icon">
  60. <i class="fas fa-drum"></i>
  61. </div>
  62. <div>
  63. <h4 style="margin:0; font-size:1.1rem;">Festival</h4>
  64. <small>Annuel</small>
  65. </div>
  66. </div>
  67. <div class="feature-item">
  68. <div class="feature-icon">
  69. <i class="fas fa-hands-helping"></i>
  70. </div>
  71. <div>
  72. <h4 style="margin:0; font-size:1.1rem;">Solidarité</h4>
  73. <small>Communautaire</small>
  74. </div>
  75. </div>
  76. <div class="feature-item">
  77. <div class="feature-icon">
  78. <i class="fas fa-palette"></i>
  79. </div>
  80. <div>
  81. <h4 style="margin:0; font-size:1.1rem;">Arts</h4>
  82. <small>Visuels & Scène</small>
  83. </div>
  84. </div>
  85. </div>
  87. <a href="{{ path('app_association') }}" class="btn btn-primary" style="margin-top: 30px;">En Savoir Plus</a>
  88. </div>
  89. </div>
  90. </div>
  91. </section>
  93. <!-- Key Figures (Chiffres Clés) avec Parallax -->
  94. <section class="stats-section" style="background: linear-gradient(rgba(31, 31, 31, 0.85), rgba(31, 31, 31, 0.85)), url('https://images.unsplash.com/photo-1528605248644-14dd04022da1?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80') center/cover fixed; padding: 100px 0; color: #fff;">
  95. <div class="container">
  96. <div class="stats-grid" style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; text-align: center;">
  97. <div class="stat-item fade-up">
  98. <i class="fas fa-users" style="font-size: 3rem; color: var(--gold); margin-bottom: 20px;"></i>
  99. <h3 data-target="5000" data-suffix="+" style="font-size: 3rem; margin-bottom: 10px; color: #fff;">0</h3>
  100. <p style="font-size: 1.1rem; text-transform: uppercase; letter-spacing: 1px;">Membres Actifs</p>
  101. </div>
  102. <div class="stat-item fade-up">
  103. <i class="fas fa-calendar-check" style="font-size: 3rem; color: var(--gold); margin-bottom: 20px;"></i>
  104. <h3 data-target="15" style="font-size: 3rem; margin-bottom: 10px; color: #fff;">0</h3>
  105. <p style="font-size: 1.1rem; text-transform: uppercase; letter-spacing: 1px;">Éditions du Festival</p>
  106. </div>
  107. <div class="stat-item fade-up">
  108. <i class="fas fa-palette" style="font-size: 3rem; color: var(--gold); margin-bottom: 20px;"></i>
  109. <h3 data-target="120" data-suffix="+" style="font-size: 3rem; margin-bottom: 10px; color: #fff;">0</h3>
  110. <p style="font-size: 1.1rem; text-transform: uppercase; letter-spacing: 1px;">Artistes Soutenus</p>
  111. </div>
  112. <div class="stat-item fade-up">
  113. <i class="fas fa-handshake" style="font-size: 3rem; color: var(--gold); margin-bottom: 20px;"></i>
  114. <h3 data-target="50" style="font-size: 3rem; margin-bottom: 10px; color: #fff;">0</h3>
  115. <p style="font-size: 1.1rem; text-transform: uppercase; letter-spacing: 1px;">Partenaires</p>
  116. </div>
  117. </div>
  118. </div>
  119. </section>
  121. <!-- Upcoming Events -->
  122. <section class="section-padding bg-light" style="overflow: hidden;">
  123. <div class="floating-icon icon-mask float-slow" style="top: 5%; left: 5%;"></div>
  124. <div class="floating-icon icon-shield spin-slow" style="bottom: 10%; right: 5%;"></div>
  125. <div class="container">
  126. <div class="section-title fade-up">
  127. <span>Agenda</span>
  128. <h2>Événements à Venir</h2>
  129. <div class="cultural-divider"></div>
  130. </div>
  132. <div class="events-grid">
  133. {% for event in events %}
  134. <!-- Event -->
  135. <div class="event-card fade-up">
  136. <div class="event-img">
  137. <img src="{{ event.image }}" alt="{{ event.title }}">
  138. <div class="event-date">
  139. <span>{{ event.date|date('d') }}</span>
  140. <small>{{ event.date|date('M') }}</small>
  141. </div>
  142. </div>
  143. <div class="event-content">
  144. <span class="event-category">{{ event.category }}</span>
  145. <h3 style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">{{ event.title }}</h3>
  146. <div class="event-meta">
  147. <span>
  148. <i class="fas fa-map-marker-alt"></i>
  149. {{ event.location }}</span>
  150. <span>
  151. <i class="far fa-clock"></i>
  152. {{ event.date|date('H:i') }}</span>
  153. </div>
  154. <p style="color: #666; font-size: 0.95rem; margin-bottom: 20px; min-height: 40px;">{{ event.description|slice(0, 80) ~ '...' }}</p>
  155. <a href="{{ path('app_event_show', {id: event.id}) }}" class="btn btn-outline" style="padding: 8px 20px; font-size: 0.85rem;">En savoir plus</a>
  156. </div>
  157. </div>
  158. {% endfor %}
  159. </div>
  161. <div class="text-center" style="margin-top: 50px;">
  162. <a href="{{ path('app_evenements') }}" class="btn btn-primary">Voir tous les événements</a>
  163. </div>
  164. </div>
  165. </section>
  167. <!-- Projets à Sponsoriser -->
  168. {% if projects|length > 0 %}
  169. <section class="section-padding bg-cultural" style="overflow: hidden;">
  170. <div class="floating-icon icon-djembe float-slow" style="top: 15%; right: 8%;"></div>
  171. <div class="floating-icon icon-sun spin-slow" style="bottom: 15%; left: 5%;"></div>
  172. <div class="container">
  173. <div class="section-title fade-up">
  174. <span>Engagez-vous</span>
  175. <h2>Projets à Sponsoriser</h2>
  176. <div class="cultural-divider"></div>
  177. </div>
  178. <div class="events-grid">
  179. {% for project in projects %}
  180. <div class="event-card fade-up" style="display: flex; flex-direction: column; background: #fff; border-radius: var(--border-radius); overflow: hidden; box-shadow: var(--shadow-soft); transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;">
  181. <div style="height: 220px; overflow: hidden; position: relative;">
  182. <img src="{{ project.image }}" alt="{{ project.title }}" style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease;" onmouseover="this.style.transform='scale(1.1)'" onmouseout="this.style.transform='scale(1)'">
  183. <div style="position: absolute; top: 15px; right: 15px; background: var(--gold); color: #fff; padding: 5px 12px; border-radius: 20px; font-size: 0.8rem; font-weight: bold; text-transform: uppercase; box-shadow: 0 4px 10px rgba(0,0,0,0.2);">
  184. Projet
  185. </div>
  186. </div>
  187. <div style="padding: 25px; flex: 1; display: flex; flex-direction: column;">
  188. <h3 style="margin-bottom: 15px; font-size: 1.3rem;">{{ project.title }}</h3>
  189. <p style="color: #666; font-size: 0.95rem; margin-bottom: 20px; flex: 1;">{{ project.description|slice(0, 100) }}...</p>
  191. <!-- Progress Bar -->
  192. <div style="margin-top: auto; margin-bottom: 20px;">
  193. <div style="display: flex; justify-content: space-between; font-size: 0.85rem; font-weight: bold; margin-bottom: 8px;">
  194. <span style="color: var(--green);">{{ project.currentAmount|number_format(0, ',', ' ') }}
  195. €</span>
  196. <span style="color: #888;">Objectif:
  197. {{ project.targetAmount|number_format(0, ',', ' ') }}
  198. €</span>
  199. </div>
  200. <div style="width: 100%; background: #eee; height: 10px; border-radius: 5px; overflow: hidden;">
  201. {% set percent = (project.currentAmount / project.targetAmount) * 100 %}
  202. <div style="width: {{ percent > 100 ? 100 : percent }}%; background: linear-gradient(90deg, var(--green), #2ecc71); height: 100%; border-radius: 5px; transition: width 1s ease-in-out;"></div>
  203. </div>
  204. </div>
  206. <a href="{{ path('app_sponsoring') }}" class="btn btn-outline" style="text-align: center; width: 100%; border-color: var(--gold); color: var(--gold);">Sponsoriser ce projet</a>
  207. </div>
  208. </div>
  209. {% endfor %}
  210. </div>
  211. <div class="text-center" style="margin-top: 50px;">
  212. <a href="{{ path('app_sponsoring') }}" class="btn btn-primary">Voir tous nos besoins</a>
  213. </div>
  214. </div>
  215. </section>
  216. {% endif %}
  218. <!-- CTA Adhésion -->
  219. <section class="section-padding fade-up" style="background: linear-gradient(rgba(192, 57, 43, 0.9), rgba(192, 57, 43, 0.9)), url('https://images.unsplash.com/photo-1511632765486-a01980e01a18?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80') center/cover; color: #fff; padding: 80px 0;">
  220. <div class="container" style="text-align: center;">
  221. <h2 style="color: #fff; margin-bottom: 20px; font-size: 2.5rem;">Rejoignez la Grande Famille WA BENIN</h2>
  222. <p style="font-size: 1.1rem; opacity: 0.9; max-width: 700px; margin: 0 auto 30px auto; line-height: 1.6;">Devenez membre dès aujourd'hui et participez activement à nos projets. Bénéficiez d'avantages exclusifs, participez à nos assemblées et soutenez le rayonnement de la culture béninoise.</p>
  223. <a href="{{ path('app_adhesion') }}" class="btn btn-outline" style="border-color: #fff; color: #fff; padding: 15px 40px; font-size: 1.1rem;">Devenir Membre de l'Association</a>
  224. </div>
  225. </section>
  227. <!-- Articles à la une -->
  228. <section class="section-padding bg-cultural" style="overflow: hidden;">
  229. <div class="floating-icon icon-mask float-fast" style="top: 10%; right: 5%;"></div>
  230. <div class="container">
  231. <div class="section-title fade-up">
  232. <span>Nos Actualités</span>
  233. <h2>À la une du Blog</h2>
  234. <div class="cultural-divider"></div>
  235. </div>
  236. <div class="events-grid">
  237. {% for article in articles %}
  238. <div class="event-card fade-up" style="display: flex; flex-direction: column; background: #fff; border-radius: var(--border-radius); overflow: hidden; box-shadow: var(--shadow-soft);">
  239. <div style="height: 200px; overflow: hidden; position: relative;">
  240. <img src="{{ article.image }}" alt="{{ article.title }}" style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease;">
  241. <div style="position: absolute; bottom: 15px; left: 15px; background: var(--green); color: #fff; padding: 5px 12px; border-radius: 4px; font-size: 0.8rem; font-weight: bold; text-transform: uppercase;">
  242. {{ article.category }}
  243. </div>
  244. </div>
  245. <div style="padding: 25px; flex: 1; display: flex; flex-direction: column;">
  246. <div style="font-size: 0.85rem; color: #888; margin-bottom: 10px;">
  247. <i class="far fa-calendar-alt"></i>
  248. {{ article.createdAt|date('d/m/Y') }}
  249. &nbsp;|&nbsp;
  250. <i class="far fa-user"></i>
  251. {{ article.author }}
  252. </div>
  253. <h3 style="margin-bottom: 15px; font-size: 1.3rem; line-height: 1.4;">{{ article.title }}</h3>
  254. <p style="color: #666; font-size: 0.95rem; margin-bottom: 20px; flex: 1;">{{ article.content|slice(0, 100) ~ '...' }}</p>
  255. <a href="{{ path('app_article_show', {id: article.id}) }}" style="color: var(--gold); font-weight: 600; text-transform: uppercase; font-size: 0.9rem; display: inline-flex; align-items: center; gap: 5px;">
  256. Lire la suite
  257. <i class="fas fa-arrow-right"></i>
  258. </a>
  259. </div>
  260. </div>
  261. {% endfor %}
  262. </div>
  263. <div class="text-center" style="margin-top: 50px;">
  264. <a href="{{ path('app_blog') }}" class="btn btn-outline">Voir tous les articles</a>
  265. </div>
  266. </div>
  267. </section>
  269. <!-- Galerie Récente -->
  270. {% if galleries is defined and galleries|length > 0 %}
  271. <section class="section-padding bg-light" style="overflow: hidden;">
  272. <div class="floating-icon icon-shield float-slow" style="bottom: 10%; left: 5%;"></div>
  273. <div class="container">
  274. <div class="section-title fade-up">
  275. <span>En Images</span>
  276. <h2>Notre Galerie</h2>
  277. <div class="cultural-divider"></div>
  278. </div>
  279. <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px;">
  280. {% for gallery in galleries %}
  281. <div class="fade-up" style="border-radius: var(--border-radius); overflow: hidden; height: 250px; position: relative; cursor: pointer; box-shadow: var(--shadow-soft);">
  282. {% if gallery.isVideo %}
  283. {# Extraire l'ID Youtube pour la miniature #}
  284. {% set videoId = gallery.image|replace({'https://www.youtube.com/watch?v=': '', 'https://youtu.be/': ''}) %}
  285. <img src="https://img.youtube.com/vi/{{ videoId }}/hqdefault.jpg" alt="{{ gallery.title }}" style="width: 100%; height: 100%; object-fit: cover;">
  286. <div style="position: absolute; inset: 0; background: rgba(0,0,0,0.3); display: flex; align-items: center; justify-content: center;">
  287. <i class="fab fa-youtube" style="color: red; font-size: 3rem; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));"></i>
  288. </div>
  289. {% else %}
  290. <img src="{{ gallery.image }}" alt="{{ gallery.title }}" style="width: 100%; height: 100%; object-fit: cover;">
  291. {% endif %}
  292. <div style="position: absolute; bottom: 0; left: 0; right: 0; padding: 15px; background: linear-gradient(transparent, rgba(0,0,0,0.8)); color: #fff;">
  293. <h4 style="margin: 0; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">{{ gallery.title }}</h4>
  294. </div>
  295. </div>
  296. {% endfor %}
  297. </div>
  298. <div class="text-center" style="margin-top: 40px;">
  299. <a href="{{ path('app_galerie') }}" class="btn btn-outline">Explorer la galerie</a>
  300. </div>
  301. </div>
  302. </section>
  303. {% endif %}
  305. <!-- Partenaires (Identique à l'Association) -->
  306. <section class="section-padding" style="padding-bottom: 50px;">
  307. <div class="container fade-up" style="text-align: center;">
  308. <div class="section-title" style="margin-bottom: 40px;">
  309. <span>Ils nous font confiance</span>
  310. </div>
  311. <div style="display: flex; justify-content: center; align-items: center; gap: 50px; flex-wrap: wrap; opacity: 0.6;">
  312. <i class="fab fa-aws" style="font-size: 3rem; color: #555;"></i>
  313. <i class="fab fa-google" style="font-size: 3rem; color: #555;"></i>
  314. <i class="fab fa-spotify" style="font-size: 3rem; color: #555;"></i>
  315. <i class="fab fa-stripe" style="font-size: 3rem; color: #555;"></i>
  316. <i class="fab fa-paypal" style="font-size: 3rem; color: #555;"></i>
  317. </div>
  318. </div>
  320. <!-- Donation Section Parallax -->
  321. <section class="donation-cta fade-up" style="background: linear-gradient(rgba(30, 132, 73, 0.9), rgba(30, 132, 73, 0.9)), url('https://images.unsplash.com/photo-1493225457124-a1a2a5f0a424?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80') center/cover fixed; padding: 120px 0; text-align: center; color: #fff;">
  322. <div class="container">
  323. <i class="fas fa-heart" style="font-size: 4rem; color: var(--gold); margin-bottom: 30px;"></i>
  324. <h2 style="font-size: 3rem; margin-bottom: 25px; color: #fff;">Soutenez la Culture Béninoise</h2>
  325. <p style="font-size: 1.2rem; max-width: 800px; margin: 0 auto 40px auto; line-height: 1.8; opacity: 0.9;">Votre don permet de financer nos événements, d'accompagner de jeunes artistes et de promouvoir notre patrimoine culturel à l'international. Chaque geste compte.</p>
  326. <a href="{{ path('app_dons') }}" class="btn btn-primary" style="font-size: 1.1rem; padding: 15px 40px; box-shadow: 0 4px 15px rgba(0,0,0,0.3);">Faire un Don Sécurisé</a>
  327. </div>
  328. </section>
  330. {% endblock %}