templates/index/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Accueil - Journal Officiel de l'Union des Comores{% endblock %}
  5. {% block body %}
  6. <!-- Hero Section avec effet de parallaxe -->
  7. <section class="relative bg-gradient-to-br from-[#006633] via-[#007a3d] to-[#008844] text-white overflow-hidden">
  8. <div class="absolute inset-0 opacity-20">
  9. <div class="absolute top-20 left-10 w-64 h-64 bg-[#00aa55] rounded-full blur-3xl"></div>
  10. <div class="absolute bottom-20 right-10 w-96 h-96 bg-[#00aa55] rounded-full blur-3xl"></div>
  11. </div>
  13. <div class="container mx-auto px-4 py-16 md:py-24 relative z-10">
  14. <div class="max-w-5xl mx-auto text-center">
  15. <!-- Badge officiel -->
  16. <div class="inline-flex items-center bg-white/10 backdrop-blur-sm rounded-full px-4 md:px-5 py-1.5 md:py-2 mb-6 md:mb-8 border border-white/20">
  17. <span class="relative flex h-2 w-2 mr-2">
  18. <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
  19. <span class="relative inline-flex rounded-full h-2 w-2 bg-green-500"></span>
  20. </span>
  21. <span class="text-xs md:text-sm font-medium">Portail officiel de l'Union des Comores</span>
  22. </div>
  24. <h1 class="text-3xl md:text-5xl lg:text-7xl font-bold mb-4 md:mb-6 leading-tight">
  25. Journal Officiel
  26. <span class="block text-transparent bg-clip-text bg-gradient-to-r from-green-200 to-emerald-200 text-2xl md:text-4xl lg:text-5xl">
  27. de l'Union des Comores
  28. </span>
  29. </h1>
  31. <p class="text-base md:text-xl text-green-100 mb-8 md:mb-10 max-w-3xl mx-auto leading-relaxed hidden sm:block">
  32. La plateforme officielle de publication et de consultation des textes juridiques,
  33. des actes administratifs et des annonces légales de la République.
  34. </p>
  36. <!-- Barre de recherche professionnelle -->
  37. <div class="max-w-3xl mx-auto">
  38. <form action="{{ path('app_search') }}" method="GET" class="relative">
  39. <div class="relative">
  40. <i class="fas fa-search absolute left-4 md:left-5 top-1/2 transform -translate-y-1/2 text-gray-400 text-base md:text-lg"></i>
  41. <input type="text"
  42. name="q"
  43. placeholder="Rechercher une loi, un décret, un arrêté..."
  44. class="w-full pl-10 md:pl-14 pr-36 md:pr-44 py-3 md:py-5 text-gray-800 text-sm md:text-lg rounded-full border-none shadow-2xl focus:outline-none focus:ring-4 focus:ring-[#006633]/50 focus:shadow-xl transition-all duration-300"
  45. value="{{ app.request.query.get('q') }}">
  46. <div class="absolute right-1 md:right-2 top-1/2 transform -translate-y-1/2 flex gap-1">
  47. <select name="type" class="hidden sm:block px-2 md:px-3 py-1.5 md:py-2 text-gray-700 text-xs md:text-sm rounded-full border border-gray-200 focus:outline-none focus:ring-2 focus:ring-[#006633] bg-white">
  48. <option value="">Tous</option>
  49. <option value="loi">Lois</option>
  50. <option value="decret">Décrets</option>
  51. <option value="arrete">Arrêtés</option>
  52. <option value="annonce">Annonces</option>
  53. </select>
  54. <button type="submit" class="bg-gradient-to-r from-[#006633] to-[#008844] text-white px-3 md:px-5 py-1.5 md:py-2 rounded-full font-semibold hover:from-[#004d26] hover:to-[#006633] transition-all duration-300 shadow-md hover:shadow-lg text-sm md:text-base">
  55. <i class="fas fa-search md:mr-1"></i>
  56. <span class="hidden md:inline">OK</span>
  57. </button>
  58. </div>
  59. </div>
  60. </form>
  63. </div>
  65. <!-- Liens rapides - BOUTONS VERTS PROFESSIONNELS -->
  66. <div class="mt-8 md:mt-10 flex flex-wrap justify-center gap-3 md:gap-4">
  67. <a href="{{ path('app_journal_officiel') }}" class="bg-gradient-to-r from-[#006633] to-[#008844] hover:from-[#004d26] hover:to-[#006633] transition-all duration-300 px-5 md:px-6 py-2.5 md:py-3 rounded-full font-semibold text-white shadow-lg hover:shadow-xl flex items-center gap-2 text-sm md:text-base">
  68. <i class="fas fa-newspaper text-sm md:text-base"></i>
  69. Derniers numéros
  70. </a>
  71. <a href="{{ path('app_munganyo') }}" class="bg-gradient-to-r from-[#006633] to-[#008844] hover:from-[#004d26] hover:to-[#006633] transition-all duration-300 px-5 md:px-6 py-2.5 md:py-3 rounded-full font-semibold text-white shadow-lg hover:shadow-xl flex items-center gap-2 text-sm md:text-base">
  72. <i class="fas fa-file-alt text-sm md:text-base"></i>
  73. Actes exécutifs
  74. </a>
  75. <a href="{{ path('app_publications') }}" class="bg-gradient-to-r from-[#006633] to-[#008844] hover:from-[#004d26] hover:to-[#006633] transition-all duration-300 px-5 md:px-6 py-2.5 md:py-3 rounded-full font-semibold text-white shadow-lg hover:shadow-xl flex items-center gap-2 text-sm md:text-base">
  76. <i class="fas fa-bullhorn text-sm md:text-base"></i>
  77. Publier une annonce
  78. </a>
  79. </div>
  81. <!-- Informations supplémentaires professionnelles -->
  83. </div>
  84. </div>
  86. <!-- Vague décorative -->
  87. <div class="absolute bottom-0 left-0 right-0">
  88. <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" class="w-full">
  89. <path fill="#f3f4f6" fill-opacity="1" d="M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,122.7C672,117,768,139,864,154.7C960,171,1056,181,1152,170.7C1248,160,1344,128,1392,112L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
  90. </svg>
  91. </div>
  92. </section>
  94. <!-- Section Statistiques -->
  95. <section class="py-12 md:py-16 bg-gray-50">
  96. <div class="container mx-auto px-4">
  97. <div class="grid grid-cols-2 md:grid-cols-2 lg:grid-cols-4 gap-4 md:gap-8">
  98. <div class="bg-white rounded-2xl shadow-lg p-4 md:p-6 text-center transform hover:-translate-y-2 transition-all duration-300">
  99. <div class="w-12 h-12 md:w-16 md:h-16 bg-[#006633]/10 rounded-full flex items-center justify-center mx-auto mb-2 md:mb-4">
  100. <i class="fas fa-file-alt text-xl md:text-2xl text-[#006633]"></i>
  101. </div>
  102. <div class="text-2xl md:text-4xl font-bold text-gray-800 mb-1 md:mb-2">12,5K</div>
  103. <div class="text-gray-600 font-medium text-xs md:text-base">Actes publiés</div>
  104. <div class="text-xs text-gray-400 mt-1 hidden md:block">Lois, décrets, arrêtés</div>
  105. </div>
  107. <div class="bg-white rounded-2xl shadow-lg p-4 md:p-6 text-center transform hover:-translate-y-2 transition-all duration-300">
  108. <div class="w-12 h-12 md:w-16 md:h-16 bg-[#006633]/10 rounded-full flex items-center justify-center mx-auto mb-2 md:mb-4">
  109. <i class="fas fa-calendar-alt text-xl md:text-2xl text-[#006633]"></i>
  110. </div>
  111. <div class="text-2xl md:text-4xl font-bold text-gray-800 mb-1 md:mb-2">245</div>
  112. <div class="text-gray-600 font-medium text-xs md:text-base">Numéros JO</div>
  113. <div class="text-xs text-gray-400 mt-1 hidden md:block">Depuis 1975</div>
  114. </div>
  116. <div class="bg-white rounded-2xl shadow-lg p-4 md:p-6 text-center transform hover:-translate-y-2 transition-all duration-300">
  117. <div class="w-12 h-12 md:w-16 md:h-16 bg-[#006633]/10 rounded-full flex items-center justify-center mx-auto mb-2 md:mb-4">
  118. <i class="fas fa-users text-xl md:text-2xl text-[#006633]"></i>
  119. </div>
  120. <div class="text-2xl md:text-4xl font-bold text-gray-800 mb-1 md:mb-2">1,3K</div>
  121. <div class="text-gray-600 font-medium text-xs md:text-base">Abonnés actifs</div>
  122. <div class="text-xs text-gray-400 mt-1 hidden md:block">Institutions & particuliers</div>
  123. </div>
  125. <div class="bg-white rounded-2xl shadow-lg p-4 md:p-6 text-center transform hover:-translate-y-2 transition-all duration-300">
  126. <div class="w-12 h-12 md:w-16 md:h-16 bg-[#006633]/10 rounded-full flex items-center justify-center mx-auto mb-2 md:mb-4">
  127. <i class="fas fa-chart-line text-xl md:text-2xl text-[#006633]"></i>
  128. </div>
  129. <div class="text-2xl md:text-4xl font-bold text-gray-800 mb-1 md:mb-2">45K</div>
  130. <div class="text-gray-600 font-medium text-xs md:text-base">Consultations/mois</div>
  131. <div class="text-xs text-gray-400 mt-1 hidden md:block">+23% vs mois dernier</div>
  132. </div>
  133. </div>
  134. </div>
  135. </section>
  137. <!-- Derniers numéros du Journal Officiel -->
  138. <section class="py-12 md:py-20">
  139. <div class="container mx-auto px-4">
  140. <div class="text-center mb-8 md:mb-12">
  141. <h2 class="text-2xl md:text-4xl font-bold text-gray-800 mb-4">Derniers numéros publiés</h2>
  142. <div class="w-24 h-1 bg-gradient-to-r from-[#006633] to-[#008844] mx-auto rounded-full"></div>
  143. <p class="text-gray-600 mt-4 max-w-2xl mx-auto text-sm md:text-base hidden md:block">
  144. Consultez les dernières éditions du Journal Officiel avec tous les actes et annonces officielles
  145. </p>
  146. </div>
  148. <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6">
  149. <!-- Carte JO 1 -->
  150. <div class="group bg-white rounded-2xl shadow-lg overflow-hidden transform hover:-translate-y-2 transition-all duration-300" data-jo-number="JO 2026-015" data-jo-date="01 Mars 2026" data-jo-pdf="pdfs/JO_2026_015.pdf">
  151. <div class="bg-gradient-to-r from-[#006633] to-[#008844] p-4 md:p-5">
  152. <div class="flex justify-between items-start text-white">
  153. <div>
  154. <i class="fas fa-gavel text-2xl md:text-3xl opacity-80"></i>
  155. <div class="text-xl md:text-3xl font-bold mt-2 md:mt-3">JO 2026-015</div>
  156. </div>
  157. <div class="text-right">
  158. <div class="text-xs md:text-sm">01 Mars 2026</div>
  159. </div>
  160. </div>
  161. </div>
  162. <div class="p-4 md:p-5">
  163. <div class="space-y-2 mb-3 md:mb-4">
  164. <div class="flex justify-between text-xs md:text-sm">
  165. <span class="text-gray-500"><i class="fas fa-file-alt mr-1"></i> Actes publiés</span>
  166. <span class="font-semibold text-gray-700">12 actes</span>
  167. </div>
  168. <div class="flex justify-between text-xs md:text-sm hidden sm:flex">
  169. <span class="text-gray-500"><i class="fas fa-building mr-1"></i> Institutions</span>
  170. <span class="font-semibold text-gray-700">5 émetteurs</span>
  171. </div>
  172. <div class="flex justify-between text-xs md:text-sm hidden sm:flex">
  173. <span class="text-gray-500"><i class="fas fa-eye mr-1"></i> Consultations</span>
  174. <span class="font-semibold text-gray-700">1,234 vues</span>
  175. </div>
  176. </div>
  177. <div class="flex space-x-2">
  178. <a href="#" class="flex-1 text-center bg-[#006633] text-white px-2 md:px-3 py-2 rounded-xl hover:bg-[#004d26] transition text-xs md:text-sm font-medium btn-consulter">
  179. <i class="fas fa-eye mr-1"></i> Consulter
  180. </a>
  181. <a href="#" class="flex-1 text-center bg-gray-200 text-gray-700 px-2 md:px-3 py-2 rounded-xl hover:bg-gray-300 transition text-xs md:text-sm font-medium btn-pdf">
  182. <i class="fas fa-download mr-1"></i> PDF
  183. </a>
  184. </div>
  185. </div>
  186. </div>
  188. <!-- Carte JO 2 -->
  189. <div class="group bg-white rounded-2xl shadow-lg overflow-hidden transform hover:-translate-y-2 transition-all duration-300" data-jo-number="JO 2026-014" data-jo-date="25 Fév 2026" data-jo-pdf="pdfs/JO_2026_014.pdf">
  190. <div class="bg-gradient-to-r from-[#006633] to-[#008844] p-4 md:p-5">
  191. <div class="flex justify-between items-start text-white">
  192. <div>
  193. <i class="fas fa-gavel text-2xl md:text-3xl opacity-80"></i>
  194. <div class="text-xl md:text-3xl font-bold mt-2 md:mt-3">JO 2026-014</div>
  195. </div>
  196. <div class="text-right">
  197. <div class="text-xs md:text-sm">25 Fév 2026</div>
  198. </div>
  199. </div>
  200. </div>
  201. <div class="p-4 md:p-5">
  202. <div class="space-y-2 mb-3 md:mb-4">
  203. <div class="flex justify-between text-xs md:text-sm">
  204. <span class="text-gray-500"><i class="fas fa-file-alt mr-1"></i> Actes publiés</span>
  205. <span class="font-semibold text-gray-700">8 actes</span>
  206. </div>
  207. <div class="flex justify-between text-xs md:text-sm hidden sm:flex">
  208. <span class="text-gray-500"><i class="fas fa-building mr-1"></i> Institutions</span>
  209. <span class="font-semibold text-gray-700">4 émetteurs</span>
  210. </div>
  211. </div>
  212. <div class="flex space-x-2">
  213. <a href="#" class="flex-1 text-center bg-[#006633] text-white px-2 md:px-3 py-2 rounded-xl hover:bg-[#004d26] transition text-xs md:text-sm font-medium btn-consulter">
  214. <i class="fas fa-eye mr-1"></i> Consulter
  215. </a>
  216. <a href="#" class="flex-1 text-center bg-gray-200 text-gray-700 px-2 md:px-3 py-2 rounded-xl hover:bg-gray-300 transition text-xs md:text-sm font-medium btn-pdf">
  217. <i class="fas fa-download mr-1"></i> PDF
  218. </a>
  219. </div>
  220. </div>
  221. </div>
  223. <!-- Carte JO 3 -->
  224. <div class="group bg-white rounded-2xl shadow-lg overflow-hidden transform hover:-translate-y-2 transition-all duration-300" data-jo-number="JO 2026-013" data-jo-date="20 Fév 2026" data-jo-pdf="pdfs/JO_2026_013.pdf">
  225. <div class="bg-gradient-to-r from-[#006633] to-[#008844] p-4 md:p-5">
  226. <div class="flex justify-between items-start text-white">
  227. <div>
  228. <i class="fas fa-gavel text-2xl md:text-3xl opacity-80"></i>
  229. <div class="text-xl md:text-3xl font-bold mt-2 md:mt-3">JO 2026-013</div>
  230. </div>
  231. <div class="text-right">
  232. <div class="text-xs md:text-sm">20 Fév 2026</div>
  233. </div>
  234. </div>
  235. </div>
  236. <div class="p-4 md:p-5">
  237. <div class="space-y-2 mb-3 md:mb-4">
  238. <div class="flex justify-between text-xs md:text-sm">
  239. <span class="text-gray-500"><i class="fas fa-file-alt mr-1"></i> Actes publiés</span>
  240. <span class="font-semibold text-gray-700">15 actes</span>
  241. </div>
  242. <div class="flex justify-between text-xs md:text-sm hidden sm:flex">
  243. <span class="text-gray-500"><i class="fas fa-building mr-1"></i> Institutions</span>
  244. <span class="font-semibold text-gray-700">6 émetteurs</span>
  245. </div>
  246. </div>
  247. <div class="flex space-x-2">
  248. <a href="#" class="flex-1 text-center bg-[#006633] text-white px-2 md:px-3 py-2 rounded-xl hover:bg-[#004d26] transition text-xs md:text-sm font-medium btn-consulter">
  249. <i class="fas fa-eye mr-1"></i> Consulter
  250. </a>
  251. <a href="#" class="flex-1 text-center bg-gray-200 text-gray-700 px-2 md:px-3 py-2 rounded-xl hover:bg-gray-300 transition text-xs md:text-sm font-medium btn-pdf">
  252. <i class="fas fa-download mr-1"></i> PDF
  253. </a>
  254. </div>
  255. </div>
  256. </div>
  258. <!-- Carte JO 4 -->
  259. <div class="group bg-white rounded-2xl shadow-lg overflow-hidden transform hover:-translate-y-2 transition-all duration-300" data-jo-number="JO 2026-012" data-jo-date="15 Fév 2026" data-jo-pdf="pdfs/JO_2026_012.pdf">
  260. <div class="bg-gradient-to-r from-[#006633] to-[#008844] p-4 md:p-5">
  261. <div class="flex justify-between items-start text-white">
  262. <div>
  263. <i class="fas fa-gavel text-2xl md:text-3xl opacity-80"></i>
  264. <div class="text-xl md:text-3xl font-bold mt-2 md:mt-3">JO 2026-012</div>
  265. </div>
  266. <div class="text-right">
  267. <div class="text-xs md:text-sm">15 Fév 2026</div>
  268. </div>
  269. </div>
  270. </div>
  271. <div class="p-4 md:p-5">
  272. <div class="space-y-2 mb-3 md:mb-4">
  273. <div class="flex justify-between text-xs md:text-sm">
  274. <span class="text-gray-500"><i class="fas fa-file-alt mr-1"></i> Actes publiés</span>
  275. <span class="font-semibold text-gray-700">10 actes</span>
  276. </div>
  277. <div class="flex justify-between text-xs md:text-sm hidden sm:flex">
  278. <span class="text-gray-500"><i class="fas fa-building mr-1"></i> Institutions</span>
  279. <span class="font-semibold text-gray-700">3 émetteurs</span>
  280. </div>
  281. </div>
  282. <div class="flex space-x-2">
  283. <a href="#" class="flex-1 text-center bg-[#006633] text-white px-2 md:px-3 py-2 rounded-xl hover:bg-[#004d26] transition text-xs md:text-sm font-medium btn-consulter">
  284. <i class="fas fa-eye mr-1"></i> Consulter
  285. </a>
  286. <a href="#" class="flex-1 text-center bg-gray-200 text-gray-700 px-2 md:px-3 py-2 rounded-xl hover:bg-gray-300 transition text-xs md:text-sm font-medium btn-pdf">
  287. <i class="fas fa-download mr-1"></i> PDF
  288. </a>
  289. </div>
  290. </div>
  291. </div>
  292. </div>
  294. <div class="text-center mt-8 md:mt-10">
  295. <a href="{{ path('app_journal_officiel') }}" class="inline-flex items-center text-[#006633] font-semibold hover:text-[#004d26] transition group text-sm md:text-base">
  296. Voir tous les numéros
  297. <i class="fas fa-arrow-right ml-2 group-hover:translate-x-1 transition-transform"></i>
  298. </a>
  299. </div>
  300. </div>
  301. </section>
  303. <!-- Accès rapide par catégories -->
  304. <section class="py-12 md:py-20 bg-gradient-to-br from-gray-50 to-gray-100">
  305. <div class="container mx-auto px-4">
  306. <div class="text-center mb-8 md:mb-12">
  307. <h2 class="text-2xl md:text-4xl font-bold text-gray-800 mb-4">Accès par thématique</h2>
  308. <div class="w-24 h-1 bg-gradient-to-r from-[#006633] to-[#008844] mx-auto rounded-full"></div>
  309. <p class="text-gray-600 mt-4 text-sm md:text-base">Retrouvez rapidement les informations selon vos besoins</p>
  310. </div>
  312. <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6">
  313. <div class="group bg-white rounded-2xl shadow-lg p-4 md:p-6 hover:shadow-xl transition-all transform hover:-translate-y-1">
  314. <div class="flex items-start space-x-3 md:space-x-4">
  315. <div class="w-12 h-12 md:w-14 md:h-14 bg-[#006633]/10 rounded-xl flex items-center justify-center group-hover:bg-[#006633]/20 transition">
  316. <i class="fas fa-chart-line text-xl md:text-2xl text-[#006633]"></i>
  317. </div>
  318. <div class="flex-1">
  319. <h3 class="text-lg md:text-xl font-bold text-gray-800 mb-1 md:mb-2">Appels d'offres</h3>
  320. <p class="text-gray-600 text-xs md:text-sm mb-2 md:mb-3">Marchés publics, consultations, délégations</p>
  321. <a href="#" class="text-[#006633] text-xs md:text-sm font-medium inline-flex items-center group-hover:text-[#004d26]">
  322. Voir les annonces
  323. <i class="fas fa-chevron-right ml-1 text-xs"></i>
  324. </a>
  325. </div>
  326. </div>
  327. </div>
  329. <div class="group bg-white rounded-2xl shadow-lg p-4 md:p-6 hover:shadow-xl transition-all transform hover:-translate-y-1">
  330. <div class="flex items-start space-x-3 md:space-x-4">
  331. <div class="w-12 h-12 md:w-14 md:h-14 bg-[#006633]/10 rounded-xl flex items-center justify-center group-hover:bg-[#006633]/20 transition">
  332. <i class="fas fa-home text-xl md:text-2xl text-[#006633]"></i>
  333. </div>
  334. <div class="flex-1">
  335. <h3 class="text-lg md:text-xl font-bold text-gray-800 mb-1 md:mb-2">Actes fonciers</h3>
  336. <p class="text-gray-600 text-xs md:text-sm mb-2 md:mb-3">Réquisitions foncières, transactions immobilières</p>
  337. <a href="#" class="text-[#006633] text-xs md:text-sm font-medium inline-flex items-center group-hover:text-[#004d26]">
  338. Voir les actes
  339. <i class="fas fa-chevron-right ml-1 text-xs"></i>
  340. </a>
  341. </div>
  342. </div>
  343. </div>
  345. <div class="group bg-white rounded-2xl shadow-lg p-4 md:p-6 hover:shadow-xl transition-all transform hover:-translate-y-1">
  346. <div class="flex items-start space-x-3 md:space-x-4">
  347. <div class="w-12 h-12 md:w-14 md:h-14 bg-[#006633]/10 rounded-xl flex items-center justify-center group-hover:bg-[#006633]/20 transition">
  348. <i class="fas fa-building text-xl md:text-2xl text-[#006633]"></i>
  349. </div>
  350. <div class="flex-1">
  351. <h3 class="text-lg md:text-xl font-bold text-gray-800 mb-1 md:mb-2">Actes de sociétés</h3>
  352. <p class="text-gray-600 text-xs md:text-sm mb-2 md:mb-3">Création, modification, dissolution RCCM/OHADA</p>
  353. <a href="#" class="text-[#006633] text-xs md:text-sm font-medium inline-flex items-center group-hover:text-[#004d26]">
  354. Voir les actes
  355. <i class="fas fa-chevron-right ml-1 text-xs"></i>
  356. </a>
  357. </div>
  358. </div>
  359. </div>
  361. <div class="group bg-white rounded-2xl shadow-lg p-4 md:p-6 hover:shadow-xl transition-all transform hover:-translate-y-1">
  362. <div class="flex items-start space-x-3 md:space-x-4">
  363. <div class="w-12 h-12 md:w-14 md:h-14 bg-[#006633]/10 rounded-xl flex items-center justify-center group-hover:bg-[#006633]/20 transition">
  364. <i class="fas fa-handshake text-xl md:text-2xl text-[#006633]"></i>
  365. </div>
  366. <div class="flex-1">
  367. <h3 class="text-lg md:text-xl font-bold text-gray-800 mb-1 md:mb-2">Associations</h3>
  368. <p class="text-gray-600 text-xs md:text-sm mb-2 md:mb-3">Récépissés de déclaration, modifications statuts</p>
  369. <a href="#" class="text-[#006633] text-xs md:text-sm font-medium inline-flex items-center group-hover:text-[#004d26]">
  370. Voir les récépissés
  371. <i class="fas fa-chevron-right ml-1 text-xs"></i>
  372. </a>
  373. </div>
  374. </div>
  375. </div>
  377. <div class="group bg-white rounded-2xl shadow-lg p-4 md:p-6 hover:shadow-xl transition-all transform hover:-translate-y-1">
  378. <div class="flex items-start space-x-3 md:space-x-4">
  379. <div class="w-12 h-12 md:w-14 md:h-14 bg-[#006633]/10 rounded-xl flex items-center justify-center group-hover:bg-[#006633]/20 transition">
  380. <i class="fas fa-gavel text-xl md:text-2xl text-[#006633]"></i>
  381. </div>
  382. <div class="flex-1">
  383. <h3 class="text-lg md:text-xl font-bold text-gray-800 mb-1 md:mb-2">Ventes aux enchères</h3>
  384. <p class="text-gray-600 text-xs md:text-sm mb-2 md:mb-3">Biens immobiliers, mobiliers, véhicules admin</p>
  385. <a href="#" class="text-[#006633] text-xs md:text-sm font-medium inline-flex items-center group-hover:text-[#004d26]">
  386. Voir les enchères
  387. <i class="fas fa-chevron-right ml-1 text-xs"></i>
  388. </a>
  389. </div>
  390. </div>
  391. </div>
  393. <div class="group bg-white rounded-2xl shadow-lg p-4 md:p-6 hover:shadow-xl transition-all transform hover:-translate-y-1">
  394. <div class="flex items-start space-x-3 md:space-x-4">
  395. <div class="w-12 h-12 md:w-14 md:h-14 bg-[#006633]/10 rounded-xl flex items-center justify-center group-hover:bg-[#006633]/20 transition">
  396. <i class="fas fa-balance-scale text-xl md:text-2xl text-[#006633]"></i>
  397. </div>
  398. <div class="flex-1">
  399. <h3 class="text-lg md:text-xl font-bold text-gray-800 mb-1 md:mb-2">Textes réglementaires</h3>
  400. <p class="text-gray-600 text-xs md:text-sm mb-2 md:mb-3">Lois, décrets, arrêtés, circulaires en vigueur</p>
  401. <a href="#" class="text-[#006633] text-xs md:text-sm font-medium inline-flex items-center group-hover:text-[#004d26]">
  402. Voir les textes
  403. <i class="fas fa-chevron-right ml-1 text-xs"></i>
  404. </a>
  405. </div>
  406. </div>
  407. </div>
  408. </div>
  409. </div>
  410. </section>
  412. <!-- Section Munganyo -->
  413. <section class="py-12 md:py-20 bg-white">
  414. <div class="container mx-auto px-4">
  415. <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 md:gap-12 items-center">
  416. <div>
  417. <div class="inline-flex items-center bg-[#006633]/10 rounded-full px-3 md:px-4 py-1.5 md:py-2 mb-4 md:mb-6">
  418. <i class="fas fa-file-alt text-[#006633] mr-1 md:mr-2 text-sm md:text-base"></i>
  419. <span class="text-xs md:text-sm font-medium text-[#006633]">Munganyo</span>
  420. </div>
  421. <h2 class="text-2xl md:text-4xl font-bold text-gray-800 mb-3 md:mb-4">Derniers actes exécutifs</h2>
  422. <p class="text-gray-600 mb-4 md:mb-6 leading-relaxed text-sm md:text-base">
  423. Accédez rapidement aux derniers décrets et arrêtés publiés.
  424. La plateforme Munganyo centralise tous les actes exécutifs en vigueur.
  425. </p>
  426. <ul class="space-y-2 md:space-y-3 mb-6 md:mb-8">
  427. <li class="flex items-center text-gray-600 text-sm md:text-base">
  428. <i class="fas fa-check-circle text-[#006633] mr-2 md:mr-3 text-sm md:text-base"></i>
  429. Décrets présidentiels et gouvernementaux
  430. </li>
  431. <li class="flex items-center text-gray-600 text-sm md:text-base">
  432. <i class="fas fa-check-circle text-[#006633] mr-2 md:mr-3 text-sm md:text-base"></i>
  433. Arrêtés interministériels et ministériels
  434. </li>
  435. <li class="flex items-center text-gray-600 text-sm md:text-base">
  436. <i class="fas fa-check-circle text-[#006633] mr-2 md:mr-3 text-sm md:text-base"></i>
  437. Circulaires et instructions officielles
  438. </li>
  439. </ul>
  440. <a href="{{ path('app_munganyo') }}" class="inline-flex items-center bg-gradient-to-r from-[#006633] to-[#008844] text-white px-5 md:px-6 py-2.5 md:py-3 rounded-xl font-semibold hover:from-[#004d26] hover:to-[#006633] transition shadow-lg text-sm md:text-base">
  441. Accéder à Munganyo
  442. <i class="fas fa-arrow-right ml-2"></i>
  443. </a>
  444. </div>
  446. <div class="bg-gradient-to-br from-gray-50 to-gray-100 rounded-2xl p-4 md:p-6 shadow-lg">
  447. <h3 class="text-lg md:text-xl font-bold text-gray-800 mb-3 md:mb-4">Derniers décrets publiés</h3>
  448. <div class="space-y-3 md:space-y-4">
  449. <div class="bg-white rounded-xl p-3 md:p-4 hover:shadow-md transition cursor-pointer" data-acte-ref="Décret n°2026-045/PR">
  450. <div class="flex items-start justify-between">
  451. <div class="flex-1">
  452. <span class="inline-block px-2 py-0.5 md:py-1 text-xs font-semibold bg-[#006633]/10 text-[#006633] rounded mb-1 md:mb-2">Décret</span>
  453. <h4 class="font-semibold text-gray-800 mb-0.5 md:mb-1 text-sm md:text-base">Décret n°2026-045/PR</h4>
  454. <p class="text-xs md:text-sm text-gray-600">Portant nomination des membres du gouvernement</p>
  455. <p class="text-xs text-gray-400 mt-1 md:mt-2">Publié le 01 mars 2026</p>
  456. </div>
  457. <i class="fas fa-chevron-right text-gray-400 text-xs md:text-sm"></i>
  458. </div>
  459. </div>
  460. <div class="bg-white rounded-xl p-3 md:p-4 hover:shadow-md transition cursor-pointer" data-acte-ref="Arrêté n°2026-089/MF">
  461. <div class="flex items-start justify-between">
  462. <div class="flex-1">
  463. <span class="inline-block px-2 py-0.5 md:py-1 text-xs font-semibold bg-[#006633]/10 text-[#006633] rounded mb-1 md:mb-2">Arrêté</span>
  464. <h4 class="font-semibold text-gray-800 mb-0.5 md:mb-1 text-sm md:text-base">Arrêté n°2026-089/MF</h4>
  465. <p class="text-xs md:text-sm text-gray-600">Fixant les modalités de paiement des impôts 2026</p>
  466. <p class="text-xs text-gray-400 mt-1 md:mt-2">Publié le 25 février 2026</p>
  467. </div>
  468. <i class="fas fa-chevron-right text-gray-400 text-xs md:text-sm"></i>
  469. </div>
  470. </div>
  471. <div class="bg-white rounded-xl p-3 md:p-4 hover:shadow-md transition cursor-pointer" data-acte-ref="Décret n°2026-044/PR">
  472. <div class="flex items-start justify-between">
  473. <div class="flex-1">
  474. <span class="inline-block px-2 py-0.5 md:py-1 text-xs font-semibold bg-[#006633]/10 text-[#006633] rounded mb-1 md:mb-2">Décret</span>
  475. <h4 class="font-semibold text-gray-800 mb-0.5 md:mb-1 text-sm md:text-base">Décret n°2026-044/PR</h4>
  476. <p class="text-xs md:text-sm text-gray-600">Portant création de l'Agence Nationale du Numérique</p>
  477. <p class="text-xs text-gray-400 mt-1 md:mt-2">Publié le 20 février 2026</p>
  478. </div>
  479. <i class="fas fa-chevron-right text-gray-400 text-xs md:text-sm"></i>
  480. </div>
  481. </div>
  482. </div>
  483. </div>
  484. </div>
  485. </div>
  486. </section>
  488. <!-- Section Barème des tarifs -->
  489. <section class="py-12 md:py-20 bg-gray-50">
  490. <div class="container mx-auto px-4">
  491. <div class="text-center mb-8 md:mb-12">
  492. <h2 class="text-2xl md:text-4xl font-bold text-gray-800 mb-4">Barème des publications</h2>
  493. <div class="w-24 h-1 bg-gradient-to-r from-[#006633] to-[#008844] mx-auto rounded-full"></div>
  494. <p class="text-gray-600 mt-4 max-w-2xl mx-auto text-sm md:text-base">
  495. Tarifs progressifs selon le type d'annonce et le nombre de caractères
  496. </p>
  497. </div>
  499. <div class="max-w-4xl mx-auto">
  500. <div class="bg-white rounded-2xl shadow-xl overflow-hidden">
  501. <div class="overflow-x-auto">
  502. <table class="w-full min-w-[500px]">
  503. <thead>
  504. <tr class="bg-gradient-to-r from-[#006633] to-[#008844] text-white">
  505. <th class="px-4 md:px-6 py-3 md:py-4 text-left font-semibold text-sm md:text-base">Type d'annonce</th>
  506. <th class="px-4 md:px-6 py-3 md:py-4 text-left font-semibold text-sm md:text-base">Tarif de base</th>
  507. <th class="px-4 md:px-6 py-3 md:py-4 text-left font-semibold text-sm md:text-base">Tarif par tranche</th>
  508. </tr>
  509. </thead>
  510. <tbody class="divide-y divide-gray-200">
  511. <tr class="hover:bg-gray-50 transition">
  512. <td class="px-4 md:px-6 py-3 md:py-4 font-medium text-gray-800 text-sm md:text-base">Marchés publics & DAO</td>
  513. <td class="px-4 md:px-6 py-3 md:py-4 text-gray-600 text-sm md:text-base">25 000 KMF</td>
  514. <td class="px-4 md:px-6 py-3 md:py-4 text-gray-600 text-sm md:text-base">+5 000 KMF / 500 caractères</td>
  515. </tr>
  516. <tr class="hover:bg-gray-50 transition">
  517. <td class="px-4 md:px-6 py-3 md:py-4 font-medium text-gray-800 text-sm md:text-base">Actes fonciers & réquisitions</td>
  518. <td class="px-4 md:px-6 py-3 md:py-4 text-gray-600 text-sm md:text-base">15 000 KMF</td>
  519. <td class="px-4 md:px-6 py-3 md:py-4 text-gray-600 text-sm md:text-base">+3 000 KMF / 300 caractères</td>
  520. </tr>
  521. <tr class="hover:bg-gray-50 transition">
  522. <td class="px-4 md:px-6 py-3 md:py-4 font-medium text-gray-800 text-sm md:text-base">Actes de sociétés (RCCM/OHADA)</td>
  523. <td class="px-4 md:px-6 py-3 md:py-4 text-gray-600 text-sm md:text-base">20 000 KMF</td>
  524. <td class="px-4 md:px-6 py-3 md:py-4 text-gray-600 text-sm md:text-base">+4 000 KMF / 400 caractères</td>
  525. </tr>
  526. <tr class="hover:bg-gray-50 transition">
  527. <td class="px-4 md:px-6 py-3 md:py-4 font-medium text-gray-800 text-sm md:text-base">Ventes aux enchères publiques</td>
  528. <td class="px-4 md:px-6 py-3 md:py-4 text-gray-600 text-sm md:text-base">18 000 KMF</td>
  529. <td class="px-4 md:px-6 py-3 md:py-4 text-gray-600 text-sm md:text-base">+3 500 KMF / 300 caractères</td>
  530. </tr>
  531. <tr class="hover:bg-gray-50 transition">
  532. <td class="px-4 md:px-6 py-3 md:py-4 font-medium text-gray-800 text-sm md:text-base">Récépissés d'associations</td>
  533. <td class="px-4 md:px-6 py-3 md:py-4 text-gray-600 text-sm md:text-base">12 000 KMF</td>
  534. <td class="px-4 md:px-6 py-3 md:py-4 text-gray-600 text-sm md:text-base">+2 000 KMF / 200 caractères</td>
  535. </tr>
  536. <tr class="bg-[#006633]/5">
  537. <td class="px-4 md:px-6 py-3 md:py-4 font-medium text-[#006633] text-sm md:text-base">⚠️ Réduction 1ère année</td>
  538. <td class="px-4 md:px-6 py-3 md:py-4 text-[#006633] font-semibold text-sm md:text-base" colspan="2">-20% sur tous les tarifs pour la première année</td>
  539. </tr>
  540. </tbody>
  541. </table>
  542. </div>
  543. </div>
  545. <div class="mt-6 md:mt-8 text-center">
  546. <a href="{{ path('app_publications') }}" class="inline-flex items-center bg-gradient-to-r from-[#006633] to-[#008844] text-white px-6 md:px-8 py-3 md:py-4 rounded-xl font-semibold hover:from-[#004d26] hover:to-[#006633] transition shadow-lg text-sm md:text-base">
  547. <i class="fas fa-cloud-upload-alt mr-2"></i>
  548. Publier une annonce maintenant
  549. </a>
  550. <p class="text-xs md:text-sm text-gray-500 mt-3 md:mt-4">
  551. <i class="fas fa-shield-alt mr-1"></i> Publication certifiée avec valeur légale opposable
  552. </p>
  553. </div>
  554. </div>
  555. </div>
  556. </section>
  558. <!-- Section Avantages abonnement -->
  559. <section class="py-12 md:py-20 bg-gradient-to-br from-[#006633] to-[#008844] text-white">
  560. <div class="container mx-auto px-4">
  561. <div class="text-center mb-8 md:mb-12">
  562. <h2 class="text-2xl md:text-4xl font-bold mb-3 md:mb-4">Pourquoi s'abonner ?</h2>
  563. <div class="w-24 h-1 bg-white mx-auto rounded-full"></div>
  564. <p class="text-green-100 mt-4 max-w-2xl mx-auto text-sm md:text-base">
  565. Accédez à tous les contenus et bénéficiez de fonctionnalités exclusives
  566. </p>
  567. </div>
  569. <div class="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-8">
  570. <div class="bg-white/10 backdrop-blur-sm rounded-2xl p-5 md:p-6 text-center transform hover:scale-105 transition-all">
  571. <div class="w-14 h-14 md:w-16 md:h-16 bg-white/20 rounded-full flex items-center justify-center mx-auto mb-3 md:mb-4">
  572. <i class="fas fa-search text-xl md:text-2xl"></i>
  573. </div>
  574. <h3 class="text-lg md:text-xl font-bold mb-2 md:mb-3">Recherche avancée</h3>
  575. <p class="text-green-100 text-xs md:text-sm">Moteur de recherche enrichi par IA avec OCR dans le contenu des actes</p>
  576. </div>
  578. <div class="bg-white/10 backdrop-blur-sm rounded-2xl p-5 md:p-6 text-center transform hover:scale-105 transition-all">
  579. <div class="w-14 h-14 md:w-16 md:h-16 bg-white/20 rounded-full flex items-center justify-center mx-auto mb-3 md:mb-4">
  580. <i class="fas fa-archive text-xl md:text-2xl"></i>
  581. </div>
  582. <h3 class="text-lg md:text-xl font-bold mb-2 md:mb-3">Archives complètes</h3>
  583. <p class="text-green-100 text-xs md:text-sm">Accès à tous les textes archivés depuis 1975 avec version PDF/A</p>
  584. </div>
  586. <div class="bg-white/10 backdrop-blur-sm rounded-2xl p-5 md:p-6 text-center transform hover:scale-105 transition-all">
  587. <div class="w-14 h-14 md:w-16 md:h-16 bg-white/20 rounded-full flex items-center justify-center mx-auto mb-3 md:mb-4">
  588. <i class="fas fa-bell text-xl md:text-2xl"></i>
  589. </div>
  590. <h3 class="text-lg md:text-xl font-bold mb-2 md:mb-3">Alertes personnalisées</h3>
  591. <p class="text-green-100 text-xs md:text-sm">Notifications par email des nouvelles publications selon vos thèmes</p>
  592. </div>
  593. </div>
  595. <div class="mt-8 md:mt-10 bg-white/5 rounded-2xl p-5 md:p-6 max-w-2xl mx-auto">
  596. <div class="grid grid-cols-1 md:grid-cols-2 gap-5 md:gap-6">
  597. <div class="text-center">
  598. <div class="text-xl md:text-2xl font-bold">Standard</div>
  599. <div class="text-2xl md:text-3xl font-bold mt-2">50 000 KMF<span class="text-base font-normal">/an</span></div>
  600. <div class="text-green-200 text-xs md:text-sm mt-1 line-through">62 500 KMF</div>
  601. <div class="text-green-300 text-xs md:text-sm">-20% la première année</div>
  602. <ul class="mt-3 md:mt-4 space-y-1 md:space-y-2 text-left text-xs md:text-sm">
  603. <li class="flex items-center"><i class="fas fa-check-circle text-green-400 mr-2 w-3 md:w-4"></i> Accès numéros complets PDF</li>
  604. <li class="flex items-center"><i class="fas fa-check-circle text-green-400 mr-2 w-3 md:w-4"></i> Moteur de recherche par filtres</li>
  605. <li class="flex items-center"><i class="fas fa-check-circle text-green-400 mr-2 w-3 md:w-4"></i> Textes isolés moins de 5 ans</li>
  606. <li class="flex items-center"><i class="fas fa-check-circle text-green-400 mr-2 w-3 md:w-4"></i> Notifications veille</li>
  607. </ul>
  608. </div>
  609. <div class="text-center border-t md:border-t-0 md:border-l border-white/20 pt-4 md:pt-0 md:pl-6">
  610. <div class="text-xl md:text-2xl font-bold text-yellow-300">Premium</div>
  611. <div class="text-2xl md:text-3xl font-bold mt-2">90 000 KMF<span class="text-base font-normal">/an</span></div>
  612. <div class="text-green-200 text-xs md:text-sm mt-1 line-through">112 500 KMF</div>
  613. <div class="text-green-300 text-xs md:text-sm">-20% la première année</div>
  614. <ul class="mt-3 md:mt-4 space-y-1 md:space-y-2 text-left text-xs md:text-sm">
  615. <li class="flex items-center"><i class="fas fa-check-circle text-green-400 mr-2 w-3 md:w-4"></i> Tout Standard +</li>
  616. <li class="flex items-center"><i class="fas fa-check-circle text-green-400 mr-2 w-3 md:w-4"></i> Textes isolés plus de 5 ans</li>
  617. <li class="flex items-center"><i class="fas fa-check-circle text-green-400 mr-2 w-3 md:w-4"></i> Réquisitions foncières</li>
  618. <li class="flex items-center"><i class="fas fa-check-circle text-green-400 mr-2 w-3 md:w-4"></i> Moteur Ibunas.IA enrichi</li>
  619. <li class="flex items-center"><i class="fas fa-check-circle text-green-400 mr-2 w-3 md:w-4"></i> Alertes personnalisées</li>
  620. </ul>
  621. </div>
  622. </div>
  623. <div class="text-center mt-5 md:mt-6">
  624. <a href="" class="inline-flex items-center bg-white text-[#006633] px-6 md:px-8 py-2.5 md:py-3 rounded-xl font-bold hover:bg-gray-100 transition shadow-lg text-sm md:text-base">
  625. Voir les offres d'abonnement
  626. <i class="fas fa-arrow-right ml-2"></i>
  627. </a>
  628. </div>
  629. </div>
  630. </div>
  631. </section>
  633. <!-- Section Actualités juridiques -->
  634. <section class="py-12 md:py-20 bg-gray-50">
  635. <div class="container mx-auto px-4">
  636. <div class="text-center mb-8 md:mb-12">
  637. <h2 class="text-2xl md:text-4xl font-bold text-gray-800 mb-4">Actualités juridiques</h2>
  638. <div class="w-24 h-1 bg-gradient-to-r from-[#006633] to-[#008844] mx-auto rounded-full"></div>
  639. <p class="text-gray-600 mt-4 text-sm md:text-base">Restez informé des dernières évolutions législatives et réglementaires</p>
  640. </div>
  642. <div class="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8">
  643. <div class="flex bg-white rounded-2xl overflow-hidden hover:shadow-lg transition">
  644. <div class="w-24 md:w-32 bg-gradient-to-br from-[#006633] to-[#008844] flex items-center justify-center">
  645. <i class="fas fa-gavel text-white text-2xl md:text-4xl"></i>
  646. </div>
  647. <div class="flex-1 p-4 md:p-5">
  648. <div class="text-xs md:text-sm text-[#006633] mb-1 md:mb-2">Nouvelle loi</div>
  649. <h3 class="font-bold text-gray-800 mb-1 md:mb-2 text-sm md:text-base">Loi sur la modernisation du Journal Officiel</h3>
  650. <p class="text-gray-600 text-xs md:text-sm">Publication numérique obligatoire, valeur légale renforcée...</p>
  651. <a href="#" class="text-[#006633] text-xs md:text-sm font-medium inline-flex items-center mt-2 md:mt-3">Lire la suite <i class="fas fa-arrow-right ml-1"></i></a>
  652. </div>
  653. </div>
  655. <div class="flex bg-white rounded-2xl overflow-hidden hover:shadow-lg transition">
  656. <div class="w-24 md:w-32 bg-gradient-to-br from-[#006633] to-[#008844] flex items-center justify-center">
  657. <i class="fas fa-chart-line text-white text-2xl md:text-4xl"></i>
  658. </div>
  659. <div class="flex-1 p-4 md:p-5">
  660. <div class="text-xs md:text-sm text-[#006633] mb-1 md:mb-2">Réforme fiscale</div>
  661. <h3 class="font-bold text-gray-800 mb-1 md:mb-2 text-sm md:text-base">Nouveau code général des impôts 2026</h3>
  662. <p class="text-gray-600 text-xs md:text-sm">Modifications des taux et nouvelles exonérations...</p>
  663. <a href="#" class="text-[#006633] text-xs md:text-sm font-medium inline-flex items-center mt-2 md:mt-3">Lire la suite <i class="fas fa-arrow-right ml-1"></i></a>
  664. </div>
  665. </div>
  666. </div>
  667. </div>
  668. </section>
  670. <!-- Section Newsletter -->
  671. <section class="py-12 md:py-16 bg-gradient-to-r from-[#006633] to-[#008844] text-white">
  672. <div class="container mx-auto px-4 text-center">
  673. <div class="max-w-3xl mx-auto">
  674. <i class="fas fa-envelope-open-text text-3xl md:text-5xl mb-4 md:mb-6 opacity-80"></i>
  675. <h2 class="text-xl md:text-3xl font-bold mb-3 md:mb-4">Restez informé</h2>
  676. <p class="text-green-100 mb-6 md:mb-8 text-sm md:text-base hidden md:block">
  677. Recevez chaque semaine les dernières publications et les actualités juridiques
  678. </p>
  679. <div class="flex flex-col sm:flex-row gap-3 md:gap-4 max-w-2xl mx-auto px-4 md:px-0">
  680. <input type="email"
  681. placeholder="Votre adresse email professionnelle"
  682. class="flex-1 px-4 md:px-6 py-2.5 md:py-3 rounded-xl text-gray-800 focus:outline-none focus:ring-2 focus:ring-green-400 text-sm md:text-base">
  683. <button class="bg-white text-[#006633] px-6 md:px-8 py-2.5 md:py-3 rounded-xl font-semibold hover:bg-gray-100 transition shadow-lg text-sm md:text-base">
  684. S'abonner
  685. </button>
  686. </div>
  687. <p class="text-xs text-green-200 mt-4 md:mt-6">
  688. <i class="fas fa-lock mr-1"></i> Votre adresse est sécurisée. Aucun spam.
  689. </p>
  690. </div>
  691. </div>
  692. </section>
  694. <!-- MODAL DE CONSULTATION -->
  695. <div id="consultationModal" class="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 hidden items-center justify-center p-4 transition-all duration-300" style="overflow-y: auto;">
  696. <div class="bg-white rounded-2xl max-w-5xl w-full max-h-[90vh] overflow-hidden shadow-2xl transform transition-all duration-300 scale-95 opacity-0 modal-content my-auto">
  697. <!-- En-tête du modal -->
  698. <div class="bg-gradient-to-r from-[#006633] to-[#008844] text-white px-6 py-4 flex justify-between items-center sticky top-0 z-10">
  699. <div>
  700. <h3 id="modalTitle" class="text-xl md:text-2xl font-bold">Journal Officiel</h3>
  701. <p id="modalDate" class="text-green-100 text-sm mt-1"></p>
  702. </div>
  703. <button id="closeModalBtn" class="text-white hover:text-gray-200 transition-all hover:rotate-90 duration-300">
  704. <i class="fas fa-times text-2xl"></i>
  705. </button>
  706. </div>
  708. <!-- Corps du modal avec onglets -->
  709. <div class="border-b border-gray-200 sticky top-[73px] bg-white z-10">
  710. <div class="flex px-6 gap-2">
  711. <button id="tabSommaire" class="py-3 px-4 font-semibold text-[#006633] border-b-2 border-[#006633] transition">
  712. <i class="fas fa-list mr-2"></i>Sommaire
  713. </button>
  714. <button id="tabTextes" class="py-3 px-4 font-semibold text-gray-500 hover:text-[#006633] transition border-b-2 border-transparent">
  715. <i class="fas fa-file-alt mr-2"></i>Textes officiels
  716. </button>
  717. <button id="tabAnnonces" class="py-3 px-4 font-semibold text-gray-500 hover:text-[#006633] transition border-b-2 border-transparent">
  718. <i class="fas fa-bullhorn mr-2"></i>Annonces
  719. </button>
  720. </div>
  721. </div>
  723. <!-- Contenu du modal -->
  724. <div id="modalContent" class="p-6 overflow-y-auto" style="max-height: calc(90vh - 140px);">
  725. <!-- Le contenu sera chargé dynamiquement -->
  726. <div class="text-center py-8">
  727. <i class="fas fa-spinner fa-spin text-3xl text-[#006633]"></i>
  728. <p class="mt-2 text-gray-600">Chargement du contenu...</p>
  729. </div>
  730. </div>
  732. <!-- Pied du modal -->
  733. <div class="border-t px-6 py-4 bg-gray-50 flex justify-between items-center sticky bottom-0 bg-white z-10">
  734. <div class="text-sm text-gray-500">
  735. <i class="fas fa-certificate text-[#006633] mr-1"></i> Document officiel certifié
  736. </div>
  737. <div class="flex gap-3">
  738. <button id="downloadPdfFromModal" class="bg-[#006633] text-white px-5 py-2 rounded-lg hover:bg-[#004d26] transition flex items-center gap-2">
  739. <i class="fas fa-download"></i> Télécharger PDF
  740. </button>
  741. <button id="closeModalFooterBtn" class="px-5 py-2 border border-gray-300 rounded-lg hover:bg-gray-100 transition">
  742. Fermer
  743. </button>
  744. </div>
  745. </div>
  746. </div>
  747. </div>
  749. {% endblock %}
  751. {% block javascripts %}
  752. {{ parent() }}
  753. <script>
  754. document.addEventListener('DOMContentLoaded', function() {
  755. // Éléments du modal
  756. const modal = document.getElementById('consultationModal');
  757. const modalContent = document.getElementById('modalContent');
  758. const modalTitle = document.getElementById('modalTitle');
  759. const modalDate = document.getElementById('modalDate');
  760. const closeModalBtn = document.getElementById('closeModalBtn');
  761. const closeModalFooterBtn = document.getElementById('closeModalFooterBtn');
  762. const downloadPdfFromModal = document.getElementById('downloadPdfFromModal');
  764. // Onglets
  765. const tabSommaire = document.getElementById('tabSommaire');
  766. const tabTextes = document.getElementById('tabTextes');
  767. const tabAnnonces = document.getElementById('tabAnnonces');
  769. let currentJoNumber = '';
  770. let currentJoDate = '';
  771. let currentJoPdf = '';
  772. let scrollPosition = 0;
  774. // Fonction pour bloquer le scroll du body
  775. function blockBodyScroll() {
  776. scrollPosition = window.pageYOffset;
  777. document.body.style.overflow = 'hidden';
  778. document.body.style.position = 'fixed';
  779. document.body.style.top = `-${scrollPosition}px`;
  780. document.body.style.width = '100%';
  781. }
  783. // Fonction pour restaurer le scroll du body
  784. function restoreBodyScroll() {
  785. document.body.style.overflow = '';
  786. document.body.style.position = '';
  787. document.body.style.top = '';
  788. document.body.style.width = '';
  789. window.scrollTo(0, scrollPosition);
  790. }
  792. // Fonction pour fermer le modal
  793. function closeModal() {
  794. const modalContentDiv = document.querySelector('.modal-content');
  795. modalContentDiv.classList.remove('scale-100', 'opacity-100');
  796. modalContentDiv.classList.add('scale-95', 'opacity-0');
  797. setTimeout(() => {
  798. modal.classList.add('hidden');
  799. modal.classList.remove('flex');
  800. restoreBodyScroll();
  801. }, 300);
  802. }
  804. // Fonction pour ouvrir le modal
  805. function openModal() {
  806. blockBodyScroll();
  807. modal.classList.remove('hidden');
  808. modal.classList.add('flex');
  809. setTimeout(() => {
  810. const modalContentDiv = document.querySelector('.modal-content');
  811. modalContentDiv.classList.remove('scale-95', 'opacity-0');
  812. modalContentDiv.classList.add('scale-100', 'opacity-100');
  813. }, 50);
  814. }
  816. // Fonction pour afficher une notification
  817. function showNotification(message, type = 'info') {
  818. const existingNotif = document.querySelector('.custom-notification');
  819. if (existingNotif) existingNotif.remove();
  821. const notification = document.createElement('div');
  822. notification.className = `custom-notification fixed top-20 right-4 z-[100] px-6 py-3 rounded-lg shadow-lg transform transition-all duration-300 flex items-center gap-3 ${
  823. type === 'success' ? 'bg-green-500 text-white' :
  824. type === 'error' ? 'bg-red-500 text-white' :
  825. 'bg-blue-500 text-white'
  826. }`;
  828. const icon = type === 'success' ? 'fa-check-circle' : type === 'error' ? 'fa-exclamation-circle' : 'fa-info-circle';
  830. notification.innerHTML = `<i class="fas ${icon}"></i><span>${message}</span>`;
  831. document.body.appendChild(notification);
  833. setTimeout(() => {
  834. notification.style.transform = 'translateX(100%)';
  835. setTimeout(() => notification.remove(), 300);
  836. }, 3000);
  837. }
  839. // Fonction pour télécharger le PDF
  840. function telechargerPDF(pdfPath, joNumber) {
  841. if (pdfPath && pdfPath !== '') {
  842. const link = document.createElement('a');
  843. link.href = pdfPath;
  844. link.download = `${joNumber.replace(/\s/g, '_')}.pdf`;
  845. document.body.appendChild(link);
  846. link.click();
  847. document.body.removeChild(link);
  848. showNotification(`Téléchargement de ${joNumber} démarré`, 'success');
  849. } else {
  850. showNotification(`Génération du PDF pour ${joNumber}...`, 'info');
  851. setTimeout(() => {
  852. showNotification(`${joNumber} téléchargé avec succès !`, 'success');
  853. }, 1500);
  854. }
  855. }
  857. // Fonction pour charger le contenu du modal
  858. function chargerContenuJO(joNumber, joDate, joPdf) {
  859. currentJoNumber = joNumber;
  860. currentJoDate = joDate;
  861. currentJoPdf = joPdf;
  863. modalTitle.innerHTML = joNumber;
  864. modalDate.innerHTML = joDate;
  866. const contenuSommaire = `
  867. <div class="space-y-6">
  868. <div class="bg-gradient-to-r from-gray-50 to-white rounded-xl p-5 border border-gray-100">
  869. <h4 class="text-lg font-bold text-[#006633] mb-4 flex items-center">
  870. <i class="fas fa-book-open mr-2"></i> Sommaire détaillé
  871. </h4>
  872. <ul class="space-y-3">
  873. <li class="flex items-start gap-3 p-2 hover:bg-gray-50 rounded-lg transition">
  874. <span class="font-bold text-[#006633] bg-[#006633]/10 w-8 h-8 rounded-full flex items-center justify-center">1</span>
  875. <div class="flex-1">
  876. <span class="font-semibold text-gray-800">Textes législatifs</span>
  877. <span class="text-gray-500 text-sm ml-2">Pages 2-15</span>
  878. <p class="text-xs text-gray-400 mt-1">Lois votées par l'Assemblée nationale</p>
  879. </div>
  880. </li>
  881. <li class="flex items-start gap-3 p-2 hover:bg-gray-50 rounded-lg transition">
  882. <span class="font-bold text-[#006633] bg-[#006633]/10 w-8 h-8 rounded-full flex items-center justify-center">2</span>
  883. <div class="flex-1">
  884. <span class="font-semibold text-gray-800">Décrets et arrêtés</span>
  885. <span class="text-gray-500 text-sm ml-2">Pages 16-28</span>
  886. <p class="text-xs text-gray-400 mt-1">Actes exécutifs et réglementaires</p>
  887. </div>
  888. </li>
  889. <li class="flex items-start gap-3 p-2 hover:bg-gray-50 rounded-lg transition">
  890. <span class="font-bold text-[#006633] bg-[#006633]/10 w-8 h-8 rounded-full flex items-center justify-center">3</span>
  891. <div class="flex-1">
  892. <span class="font-semibold text-gray-800">Annonces officielles</span>
  893. <span class="text-gray-500 text-sm ml-2">Pages 29-35</span>
  894. <p class="text-xs text-gray-400 mt-1">Communications et avis divers</p>
  895. </div>
  896. </li>
  897. <li class="flex items-start gap-3 p-2 hover:bg-gray-50 rounded-lg transition">
  898. <span class="font-bold text-[#006633] bg-[#006633]/10 w-8 h-8 rounded-full flex items-center justify-center">4</span>
  899. <div class="flex-1">
  900. <span class="font-semibold text-gray-800">Avis divers</span>
  901. <span class="text-gray-500 text-sm ml-2">Pages 36-40</span>
  902. <p class="text-xs text-gray-400 mt-1">Informations générales</p>
  903. </div>
  904. </li>
  905. </ul>
  906. </div>
  908. <div class="bg-yellow-50 rounded-xl p-4 border border-yellow-200">
  909. <div class="flex items-start gap-3">
  910. <i class="fas fa-info-circle text-yellow-600 mt-1"></i>
  911. <div>
  912. <p class="text-sm text-gray-700">Ce document officiel est certifié conforme par les services de la Présidence de l'Union des Comores.</p>
  913. <p class="text-xs text-gray-500 mt-2">Date de publication : ${joDate}</p>
  914. </div>
  915. </div>
  916. </div>
  917. </div>
  918. `;
  920. const contenuTextes = `
  921. <div class="space-y-4">
  922. <div class="bg-white rounded-xl p-4 border border-gray-200 hover:shadow-md transition">
  923. <div class="flex items-start justify-between">
  924. <div class="flex-1">
  925. <span class="inline-block px-2 py-1 text-xs font-semibold bg-blue-100 text-blue-700 rounded mb-2">LOI</span>
  926. <h4 class="font-bold text-gray-800">Loi n°2026-001 du 15 janvier 2026</h4>
  927. <p class="text-sm text-gray-600 mt-1">Portant modification du code des investissements</p>
  928. <div class="flex items-center gap-4 mt-2 text-xs text-gray-400">
  929. <span><i class="far fa-file-pdf mr-1"></i> PDF - 245 KB</span>
  930. <span><i class="far fa-eye mr-1"></i> 1,234 vues</span>
  931. </div>
  932. </div>
  933. <button class="text-[#006633] hover:text-[#004d26] transition consulter-texte" data-texte="LOI-2026-001">
  934. <i class="fas fa-chevron-right"></i>
  935. </button>
  936. </div>
  937. </div>
  939. <div class="bg-white rounded-xl p-4 border border-gray-200 hover:shadow-md transition">
  940. <div class="flex items-start justify-between">
  941. <div class="flex-1">
  942. <span class="inline-block px-2 py-1 text-xs font-semibold bg-purple-100 text-purple-700 rounded mb-2">DÉCRET</span>
  943. <h4 class="font-bold text-gray-800">Décret n°2026-045/PR du 20 janvier 2026</h4>
  944. <p class="text-sm text-gray-600 mt-1">Portant nomination des membres du gouvernement</p>
  945. <div class="flex items-center gap-4 mt-2 text-xs text-gray-400">
  946. <span><i class="far fa-file-pdf mr-1"></i> PDF - 156 KB</span>
  947. <span><i class="far fa-eye mr-1"></i> 2,567 vues</span>
  948. </div>
  949. </div>
  950. <button class="text-[#006633] hover:text-[#004d26] transition consulter-texte" data-texte="DECRET-2026-045">
  951. <i class="fas fa-chevron-right"></i>
  952. </button>
  953. </div>
  954. </div>
  956. <div class="bg-white rounded-xl p-4 border border-gray-200 hover:shadow-md transition">
  957. <div class="flex items-start justify-between">
  958. <div class="flex-1">
  959. <span class="inline-block px-2 py-1 text-xs font-semibold bg-green-100 text-green-700 rounded mb-2">ARRÊTÉ</span>
  960. <h4 class="font-bold text-gray-800">Arrêté n°2026-089/MF du 25 janvier 2026</h4>
  961. <p class="text-sm text-gray-600 mt-1">Fixant les modalités de paiement des impôts 2026</p>
  962. <div class="flex items-center gap-4 mt-2 text-xs text-gray-400">
  963. <span><i class="far fa-file-pdf mr-1"></i> PDF - 189 KB</span>
  964. <span><i class="far fa-eye mr-1"></i> 892 vues</span>
  965. </div>
  966. </div>
  967. <button class="text-[#006633] hover:text-[#004d26] transition consulter-texte" data-texte="ARRETE-2026-089">
  968. <i class="fas fa-chevron-right"></i>
  969. </button>
  970. </div>
  971. </div>
  972. </div>
  973. `;
  975. const contenuAnnonces = `
  976. <div class="space-y-4">
  977. <div class="bg-white rounded-xl p-4 border border-gray-200 hover:shadow-md transition">
  978. <div class="flex items-start gap-4">
  979. <div class="w-10 h-10 bg-orange-100 rounded-full flex items-center justify-center">
  980. <i class="fas fa-gavel text-orange-600"></i>
  981. </div>
  982. <div class="flex-1">
  983. <h4 class="font-bold text-gray-800">Appel d'offres n°2026-001/AO</h4>
  984. <p class="text-sm text-gray-600 mt-1">Travaux de construction de la nouvelle Présidence</p>
  985. <div class="flex flex-wrap gap-3 mt-2 text-xs text-gray-500">
  986. <span><i class="far fa-calendar-alt mr-1"></i> Date limite : 30/04/2026</span>
  987. <span><i class="fas fa-map-marker-alt mr-1"></i> Moroni</span>
  988. </div>
  989. </div>
  990. </div>
  991. </div>
  993. <div class="bg-white rounded-xl p-4 border border-gray-200 hover:shadow-md transition">
  994. <div class="flex items-start gap-4">
  995. <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center">
  996. <i class="fas fa-building text-blue-600"></i>
  997. </div>
  998. <div class="flex-1">
  999. <h4 class="font-bold text-gray-800">Avis de recrutement - Fonction publique</h4>
  1000. <p class="text-sm text-gray-600 mt-1">100 postes à pourvoir dans l'administration</p>
  1001. <div class="flex flex-wrap gap-3 mt-2 text-xs text-gray-500">
  1002. <span><i class="far fa-calendar-alt mr-1"></i> Date limite : 15/04/2026</span>
  1003. <span><i class="fas fa-file-alt mr-1"></i> Dossier à déposer en ligne</span>
  1004. </div>
  1005. </div>
  1006. </div>
  1007. </div>
  1009. <div class="bg-white rounded-xl p-4 border border-gray-200 hover:shadow-md transition">
  1010. <div class="flex items-start gap-4">
  1011. <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center">
  1012. <i class="fas fa-handshake text-green-600"></i>
  1013. </div>
  1014. <div class="flex-1">
  1015. <h4 class="font-bold text-gray-800">Consultation publique - Code du travail</h4>
  1016. <p class="text-sm text-gray-600 mt-1">Recueil des observations sur l'avant-projet</p>
  1017. <div class="flex flex-wrap gap-3 mt-2 text-xs text-gray-500">
  1018. <span><i class="far fa-calendar-alt mr-1"></i> Jusqu'au 31/05/2026</span>
  1019. <span><i class="fas fa-users mr-1"></i> Ouvert à tous</span>
  1020. </div>
  1021. </div>
  1022. </div>
  1023. </div>
  1024. </div>
  1025. `;
  1027. modalContent.innerHTML = contenuSommaire;
  1029. tabSommaire.onclick = () => {
  1030. tabSommaire.className = "py-3 px-4 font-semibold text-[#006633] border-b-2 border-[#006633] transition";
  1031. tabTextes.className = "py-3 px-4 font-semibold text-gray-500 hover:text-[#006633] transition border-b-2 border-transparent";
  1032. tabAnnonces.className = "py-3 px-4 font-semibold text-gray-500 hover:text-[#006633] transition border-b-2 border-transparent";
  1033. modalContent.innerHTML = contenuSommaire;
  1034. modalContent.scrollTop = 0;
  1035. };
  1037. tabTextes.onclick = () => {
  1038. tabTextes.className = "py-3 px-4 font-semibold text-[#006633] border-b-2 border-[#006633] transition";
  1039. tabSommaire.className = "py-3 px-4 font-semibold text-gray-500 hover:text-[#006633] transition border-b-2 border-transparent";
  1040. tabAnnonces.className = "py-3 px-4 font-semibold text-gray-500 hover:text-[#006633] transition border-b-2 border-transparent";
  1041. modalContent.innerHTML = contenuTextes;
  1042. modalContent.scrollTop = 0;
  1044. document.querySelectorAll('.consulter-texte').forEach(btn => {
  1045. btn.addEventListener('click', function(e) {
  1046. const texteRef = this.getAttribute('data-texte');
  1047. showNotification(`Consultation du texte ${texteRef}`, 'info');
  1048. });
  1049. });
  1050. };
  1052. tabAnnonces.onclick = () => {
  1053. tabAnnonces.className = "py-3 px-4 font-semibold text-[#006633] border-b-2 border-[#006633] transition";
  1054. tabSommaire.className = "py-3 px-4 font-semibold text-gray-500 hover:text-[#006633] transition border-b-2 border-transparent";
  1055. tabTextes.className = "py-3 px-4 font-semibold text-gray-500 hover:text-[#006633] transition border-b-2 border-transparent";
  1056. modalContent.innerHTML = contenuAnnonces;
  1057. modalContent.scrollTop = 0;
  1058. };
  1059. }
  1061. // Gestionnaire pour les boutons "Consulter"
  1062. document.querySelectorAll('.btn-consulter').forEach(button => {
  1063. button.addEventListener('click', function(e) {
  1064. e.preventDefault();
  1065. const card = this.closest('.group');
  1066. if (!card) return;
  1068. const joNumber = card.getAttribute('data-jo-number');
  1069. const joDate = card.getAttribute('data-jo-date');
  1070. const joPdf = card.getAttribute('data-jo-pdf');
  1072. if (joNumber) {
  1073. chargerContenuJO(joNumber, joDate, joPdf);
  1074. openModal();
  1075. }
  1076. });
  1077. });
  1079. // Gestionnaire pour les boutons "PDF" dans les cartes
  1080. document.querySelectorAll('.btn-pdf').forEach(button => {
  1081. button.addEventListener('click', function(e) {
  1082. e.preventDefault();
  1083. e.stopPropagation();
  1084. const card = this.closest('.group');
  1085. if (!card) return;
  1087. const joNumber = card.getAttribute('data-jo-number');
  1088. const joPdf = card.getAttribute('data-jo-pdf');
  1090. if (joNumber) {
  1091. telechargerPDF(joPdf, joNumber);
  1092. }
  1093. });
  1094. });
  1096. // Télécharger depuis le modal
  1097. downloadPdfFromModal.addEventListener('click', function() {
  1098. if (currentJoNumber) {
  1099. telechargerPDF(currentJoPdf, currentJoNumber);
  1100. }
  1101. });
  1103. // Fermeture du modal
  1104. closeModalBtn.addEventListener('click', closeModal);
  1105. closeModalFooterBtn.addEventListener('click', closeModal);
  1107. // Fermer en cliquant à l'extérieur
  1108. modal.addEventListener('click', function(e) {
  1109. if (e.target === modal) {
  1110. closeModal();
  1111. }
  1112. });
  1114. // Gestionnaire pour les actes exécutifs (Munganyo)
  1115. document.querySelectorAll('[data-acte-ref]').forEach(card => {
  1116. card.addEventListener('click', function() {
  1117. const acteRef = this.getAttribute('data-acte-ref');
  1118. showNotification(`Consultation de ${acteRef}`, 'info');
  1119. });
  1120. });
  1122. // Gestionnaire pour la newsletter
  1123. const newsletterBtn = document.querySelector('.bg-white.text-\\[\\#006633\\]');
  1124. if (newsletterBtn) {
  1125. newsletterBtn.addEventListener('click', function() {
  1126. const emailInput = document.querySelector('input[type="email"]');
  1127. if (emailInput && emailInput.value) {
  1128. if (emailInput.value.includes('@') && emailInput.value.includes('.')) {
  1129. showNotification('Inscription à la newsletter réussie !', 'success');
  1130. emailInput.value = '';
  1131. } else {
  1132. showNotification('Veuillez entrer une adresse email valide', 'error');
  1133. }
  1134. } else {
  1135. showNotification('Veuillez entrer votre adresse email', 'error');
  1136. }
  1137. });
  1138. }
  1139. });
  1140. </script>
  1142. <style>
  1143. @keyframes fadeInUp {
  1144. from {
  1145. opacity: 0;
  1146. transform: translateY(20px);
  1147. }
  1148. to {
  1149. opacity: 1;
  1150. transform: translateY(0);
  1151. }
  1152. }
  1154. .custom-notification {
  1155. animation: fadeInUp 0.3s ease-out;
  1156. z-index: 9999;
  1157. }
  1159. .btn-consulter, .btn-pdf {
  1160. cursor: pointer;
  1161. }
  1163. [data-acte-ref] {
  1164. cursor: pointer;
  1165. }
  1167. .modal-content {
  1168. transition: all 0.3s ease-out;
  1169. }
  1171. /* Scrollbar personnalisée pour le modal */
  1172. #modalContent::-webkit-scrollbar {
  1173. width: 8px;
  1174. }
  1176. #modalContent::-webkit-scrollbar-track {
  1177. background: #f1f1f1;
  1178. border-radius: 4px;
  1179. }
  1181. #modalContent::-webkit-scrollbar-thumb {
  1182. background: #006633;
  1183. border-radius: 4px;
  1184. }
  1186. #modalContent::-webkit-scrollbar-thumb:hover {
  1187. background: #004d26;
  1188. }
  1190. /* Empêcher le scroll du body quand le modal est ouvert */
  1191. body.modal-open {
  1192. overflow: hidden;
  1193. position: fixed;
  1194. width: 100%;
  1195. }
  1196. </style>
  1197. {% endblock %}