templates/blog/blog.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Actualités & Blog - WA BENIN{% endblock %}
  5. {% block body %}
  6. <div class="page-header" style="height: 35vh; min-height: 250px; margin-bottom: 40px;">
  7. <div class="container fade-up">
  8. <h1 class="page-title">Actualités</h1>
  9. </div>
  10. </div>
  12. <section class="section-padding" style="padding-top: 0;">
  13. <div class="container">
  14. <div style="display: flex; gap: 40px; align-items: flex-start;">
  15. <!-- Main Content (Articles) -->
  16. <div style="flex: 2;">
  17. {% if featured_article %}
  18. <!-- Article à la une -->
  19. <div class="fade-up" style="background: #fff; border-radius: var(--border-radius); overflow: hidden; box-shadow: var(--shadow-soft); margin-bottom: 40px;">
  20. <div style="height: 400px; overflow: hidden;">
  21. <img src="{{ featured_article.image }}" alt="{{ featured_article.title }}" style="width: 100%; height: 100%; object-fit: cover; transition: var(--transition);">
  22. </div>
  23. <div style="padding: 30px;">
  24. <span style="background: var(--gold); color: #fff; padding: 5px 12px; border-radius: 20px; font-size: 0.8rem; font-weight: bold; text-transform: uppercase;">À la une</span>
  25. <h2 style="margin: 15px 0; font-size: 2rem;">{{ featured_article.title }}</h2>
  26. <div style="color: #888; font-size: 0.9rem; margin-bottom: 20px; display: flex; gap: 15px;">
  27. <span><i class="far fa-calendar-alt"></i> {{ featured_article.createdAt|date('d M Y') }}</span>
  28. <span><i class="far fa-user"></i> Par {{ featured_article.author }}</span>
  29. </div>
  30. <p style="color: #555; margin-bottom: 20px; font-size: 1.1rem;">{{ featured_article.content|slice(0, 200) ~ '...' }}</p>
  31. <a href="{{ path('app_article_show', {id: featured_article.id}) }}" class="btn btn-outline">Lire la suite</a>
  32. </div>
  33. </div>
  34. {% endif %}
  36. <!-- Grille d'articles -->
  37. <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 30px;">
  38. {% for article in articles %}
  39. <!-- Article -->
  40. <div class="fade-up" style="background: #fff; border-radius: var(--border-radius); overflow: hidden; box-shadow: var(--shadow-soft);">
  41. <div style="height: 200px; overflow: hidden;">
  42. <img src="{{ article.image }}" alt="{{ article.title }}" style="width: 100%; height: 100%; object-fit: cover;">
  43. </div>
  44. <div style="padding: 20px;">
  45. <span style="color: var(--green); font-size: 0.8rem; font-weight: bold; text-transform: uppercase;">{{ article.category }}</span>
  46. <h3 style="margin: 10px 0; font-size: 1.3rem; line-height: 1.3;">{{ article.title }}</h3>
  47. <p style="color: #666; font-size: 0.95rem; margin-bottom: 15px;">{{ article.content|slice(0, 100) ~ '...' }}</p>
  48. <a href="{{ path('app_article_show', {id: article.id}) }}" style="color: var(--gold); font-weight: 600;">Lire l'article <i class="fas fa-arrow-right" style="font-size: 0.8rem; margin-left: 5px;"></i></a>
  49. </div>
  50. </div>
  51. {% else %}
  52. <p>Aucun article trouvé.</p>
  53. {% endfor %}
  54. </div>
  56. <!-- Pagination -->
  57. {% if total_pages > 1 %}
  58. <div style="margin-top: 40px; display: flex; justify-content: center; gap: 10px;">
  59. {% for i in 1..total_pages %}
  60. <a href="{{ path('app_blog', {page: i, category: current_category}) }}" style="width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; {% if current_page == i %}background: var(--gold); color: #fff; border: none;{% else %}background: #fff; border: 1px solid #ddd; color: var(--black-dark);{% endif %} border-radius: 8px; font-weight: bold;">
  61. {{ i }}
  62. </a>
  63. {% endfor %}
  64. </div>
  65. {% endif %}
  66. </div>
  68. <!-- Sidebar -->
  69. <div style="flex: 1; max-width: 350px;">
  70. <!-- Recherche -->
  71. <div style="background: #fff; padding: 25px; border-radius: var(--border-radius); box-shadow: var(--shadow-soft); margin-bottom: 30px;">
  72. <h4 style="margin-bottom: 15px; font-size: 1.2rem;">Recherche</h4>
  73. <div style="position: relative;">
  74. <input type="text" placeholder="Mots-clés..." style="width: 100%; padding: 12px 15px; padding-right: 40px; border: 1px solid #ddd; border-radius: 8px; outline: none;">
  75. <i class="fas fa-search" style="position: absolute; right: 15px; top: 50%; transform: translateY(-50%); color: #888;"></i>
  76. </div>
  77. </div>
  79. <!-- Catégories -->
  80. <div style="background: #fff; padding: 25px; border-radius: var(--border-radius); box-shadow: var(--shadow-soft);">
  81. <h4 style="margin-bottom: 15px; font-size: 1.2rem;">Catégories</h4>
  82. <ul style="list-style: none; padding: 0; margin: 0;">
  83. <li style="padding: 10px 0; border-bottom: 1px solid #eee;">
  84. <a href="{{ path('app_blog') }}" style="color: {% if not current_category %}var(--gold){% else %}#555{% endif %}; display: flex; justify-content: space-between; font-weight: {% if not current_category %}bold{% else %}normal{% endif %};">
  85. Toutes les catégories
  86. </a>
  87. </li>
  88. {% for cat in categories %}
  89. <li style="padding: 10px 0; border-bottom: 1px solid #eee;">
  90. <a href="{{ path('app_blog', {category: cat}) }}" style="color: {% if current_category == cat %}var(--gold){% else %}#555{% endif %}; display: flex; justify-content: space-between; font-weight: {% if current_category == cat %}bold{% else %}normal{% endif %};">
  91. {{ cat }}
  92. </a>
  93. </li>
  94. {% endfor %}
  95. </ul>
  96. </div>
  97. </div>
  98. </div>
  99. </div>
  100. </section>
  101. {% endblock %}