templates/publications/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Munganyo - Publications & Annonces Officielles des Comores{% endblock %}
  5. {% block body %}
  6. <!-- Hero Section Munganyo -->
  7. <section class="relative bg-gradient-to-br from-[#006633] via-[#008040] to-[#00994d] 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-[#006633] rounded-full blur-3xl"></div>
  10. <div class="absolute bottom-20 right-10 w-96 h-96 bg-[#008040] rounded-full blur-3xl"></div>
  11. </div>
  13. <div class="container mx-auto px-4 py-20 relative z-10">
  14. <div class="max-w-4xl mx-auto text-center">
  15. <div class="inline-flex items-center bg-white/20 backdrop-blur-sm rounded-full px-5 py-2 mb-6 border border-white/30">
  16. <i class="fas fa-bullhorn mr-2"></i>
  17. <span class="text-sm font-medium text-white">Plateforme des publications officielles</span>
  18. </div>
  19. <h1 class="text-5xl md:text-6xl font-bold mb-6 text-white">
  20. Munganyo
  21. <span class="block text-white">
  22. Publications & Annonces Officielles
  23. </span>
  24. </h1>
  25. <p class="text-xl text-white/90 mb-8 max-w-2xl mx-auto leading-relaxed">
  26. La plateforme officielle de consultation des appels d'offres, actes fonciers,
  27. annonces légales et avis divers de l'Union des Comores
  28. </p>
  30. <!-- Barre de recherche professionnelle - TRÈS ARRONDIE STYLE GOOGLE -->
  31. <div class="max-w-2xl mx-auto">
  32. <form action="{{ path('app_search') }}" method="GET" class="relative">
  33. <div class="relative">
  34. <i class="fas fa-search absolute left-5 top-1/2 transform -translate-y-1/2 text-gray-400 text-lg"></i>
  35. <input type="text"
  36. name="q"
  37. placeholder="Rechercher un appel d'offres, un acte foncier, une annonce..."
  38. class="w-full pl-14 pr-36 py-5 text-gray-800 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"
  39. value="{{ app.request.query.get('q') }}">
  40. <button type="submit" class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-gradient-to-r from-[#006633] to-[#008040] text-white px-6 py-2.5 rounded-full font-semibold hover:from-[#008040] hover:to-[#00994d] transition-all duration-300 shadow-md hover:shadow-lg">
  41. <i class="fas fa-arrow-right mr-1"></i> Rechercher
  42. </button>
  43. </div>
  44. </form>
  46. <!-- Suggestions de recherche -->
  47. <div class="flex flex-wrap justify-center gap-2 mt-4">
  48. <span class="text-white/60 text-xs">Recherches fréquentes :</span>
  49. <a href="{{ path('app_search') }}?q=Appel+d%27offres" class="text-white/80 hover:text-white text-xs transition">Appel d'offres</a>
  50. <span class="text-white/40 text-xs">•</span>
  51. <a href="{{ path('app_search') }}?q=Acte+foncier" class="text-white/80 hover:text-white text-xs transition">Acte foncier</a>
  52. <span class="text-white/40 text-xs">•</span>
  53. <a href="{{ path('app_search') }}?q=Création+société" class="text-white/80 hover:text-white text-xs transition">Création société</a>
  54. <span class="text-white/40 text-xs">•</span>
  55. <a href="{{ path('app_search') }}?q=Association" class="text-white/80 hover:text-white text-xs transition">Association</a>
  56. </div>
  57. </div>
  59. <!-- Filtres rapides - BOUTONS VERTS MODIFIÉS -->
  60. <div class="mt-10 flex flex-wrap justify-center gap-3">
  61. <a href="#" class="filter-btn px-5 py-2.5 bg-gradient-to-r from-[#006633] to-[#008040] hover:from-[#004d26] hover:to-[#006633] rounded-full text-sm font-semibold text-white transition-all duration-200 shadow-md hover:shadow-lg border-none" data-filter="all">Toutes les annonces</a>
  62. <a href="#" class="filter-btn px-5 py-2.5 bg-gradient-to-r from-[#006633] to-[#008040] hover:from-[#004d26] hover:to-[#006633] rounded-full text-sm font-semibold text-white transition-all duration-200 shadow-md hover:shadow-lg border-none" data-filter="appels-offres">
  63. <i class="fas fa-chart-line mr-1"></i> Appels d'offres
  64. </a>
  65. <a href="#" class="filter-btn px-5 py-2.5 bg-gradient-to-r from-[#006633] to-[#008040] hover:from-[#004d26] hover:to-[#006633] rounded-full text-sm font-semibold text-white transition-all duration-200 shadow-md hover:shadow-lg border-none" data-filter="fonciers">
  66. <i class="fas fa-home mr-1"></i> Actes fonciers
  67. </a>
  68. <a href="#" class="filter-btn px-5 py-2.5 bg-gradient-to-r from-[#006633] to-[#008040] hover:from-[#004d26] hover:to-[#006633] rounded-full text-sm font-semibold text-white transition-all duration-200 shadow-md hover:shadow-lg border-none" data-filter="societes">
  69. <i class="fas fa-building mr-1"></i> Actes de sociétés
  70. </a>
  71. <a href="#" class="filter-btn px-5 py-2.5 bg-gradient-to-r from-[#006633] to-[#008040] hover:from-[#004d26] hover:to-[#006633] rounded-full text-sm font-semibold text-white transition-all duration-200 shadow-md hover:shadow-lg border-none" data-filter="associations">
  72. <i class="fas fa-handshake mr-1"></i> Associations
  73. </a>
  74. <a href="#" class="filter-btn px-5 py-2.5 bg-gradient-to-r from-[#006633] to-[#008040] hover:from-[#004d26] hover:to-[#006633] rounded-full text-sm font-semibold text-white transition-all duration-200 shadow-md hover:shadow-lg border-none" data-filter="encheres">
  75. <i class="fas fa-gavel mr-1"></i> Ventes aux enchères
  76. </a>
  77. </div>
  78. </div>
  79. </div>
  81. <div class="absolute bottom-0 left-0 right-0">
  82. <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" class="w-full">
  83. <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>
  84. </svg>
  85. </div>
  86. </section>
  88. <!-- Section Statistiques -->
  89. <section class="py-16 bg-gray-50">
  90. <div class="container mx-auto px-4">
  91. <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
  92. <div class="bg-white rounded-2xl shadow-lg p-6 text-center transform hover:-translate-y-2 transition-all">
  93. <div class="w-14 h-14 bg-[#006633]/10 rounded-full flex items-center justify-center mx-auto mb-4">
  94. <i class="fas fa-chart-line text-2xl text-[#006633]"></i>
  95. </div>
  96. <div class="text-3xl font-bold text-gray-800 mb-1">1,247</div>
  97. <div class="text-gray-600 font-medium">Appels d'offres</div>
  98. <div class="text-xs text-gray-400 mt-1">Publiés en 2025-2026</div>
  99. </div>
  101. <div class="bg-white rounded-2xl shadow-lg p-6 text-center transform hover:-translate-y-2 transition-all">
  102. <div class="w-14 h-14 bg-[#006633]/10 rounded-full flex items-center justify-center mx-auto mb-4">
  103. <i class="fas fa-home text-2xl text-[#006633]"></i>
  104. </div>
  105. <div class="text-3xl font-bold text-gray-800 mb-1">892</div>
  106. <div class="text-gray-600 font-medium">Actes fonciers</div>
  107. <div class="text-xs text-gray-400 mt-1">Réquisitions et transactions</div>
  108. </div>
  110. <div class="bg-white rounded-2xl shadow-lg p-6 text-center transform hover:-translate-y-2 transition-all">
  111. <div class="w-14 h-14 bg-[#006633]/10 rounded-full flex items-center justify-center mx-auto mb-4">
  112. <i class="fas fa-building text-2xl text-[#006633]"></i>
  113. </div>
  114. <div class="text-3xl font-bold text-gray-800 mb-1">1,856</div>
  115. <div class="text-gray-600 font-medium">Actes de sociétés</div>
  116. <div class="text-xs text-gray-400 mt-1">Créations, modifications, dissolutions</div>
  117. </div>
  119. <div class="bg-white rounded-2xl shadow-lg p-6 text-center transform hover:-translate-y-2 transition-all">
  120. <div class="w-14 h-14 bg-[#006633]/10 rounded-full flex items-center justify-center mx-auto mb-4">
  121. <i class="fas fa-handshake text-2xl text-[#006633]"></i>
  122. </div>
  123. <div class="text-3xl font-bold text-gray-800 mb-1">432</div>
  124. <div class="text-gray-600 font-medium">Associations</div>
  125. <div class="text-xs text-gray-400 mt-1">Récépissés déclarés</div>
  126. </div>
  127. </div>
  128. </div>
  129. </section>
  131. <!-- Filtres avancés -->
  132. <section class="py-8 bg-white border-b">
  133. <div class="container mx-auto px-4">
  134. <div class="bg-gray-50 rounded-2xl p-6">
  135. <div class="flex flex-wrap items-center justify-between gap-4">
  136. <div class="flex items-center space-x-3">
  137. <i class="fas fa-filter text-gray-400"></i>
  138. <span class="font-medium text-gray-700">Filtres avancés :</span>
  139. </div>
  140. <div class="flex flex-wrap gap-3">
  141. <select name="type" class="px-4 py-2 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-[#006633] focus:border-[#006633]">
  142. <option value="">Tous les types</option>
  143. <option value="appel_offres">Appels d'offres</option>
  144. <option value="foncier">Actes fonciers</option>
  145. <option value="societe">Actes de sociétés</option>
  146. <option value="association">Associations</option>
  147. <option value="enchere">Ventes aux enchères</option>
  148. </select>
  149. <select name="institution" class="px-4 py-2 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-[#006633] focus:border-[#006633]">
  150. <option value="">Toutes les institutions</option>
  151. <option value="presidence">Présidence</option>
  152. <option value="gouvernement">Gouvernement</option>
  153. <option value="finances">Ministère des Finances</option>
  154. <option value="justice">Ministère de la Justice</option>
  155. <option value="travaux">Ministère des Travaux Publics</option>
  156. </select>
  157. <select name="year" class="px-4 py-2 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-[#006633] focus:border-[#006633]">
  158. <option value="">Toutes les années</option>
  159. <option value="2026">2026</option>
  160. <option value="2025">2025</option>
  161. <option value="2024">2024</option>
  162. <option value="2023">2023</option>
  163. </select>
  164. <select name="status" class="px-4 py-2 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-[#006633] focus:border-[#006633]">
  165. <option value="">Statut publication</option>
  166. <option value="en_cours">En cours</option>
  167. <option value="cloture">Clôturé</option>
  168. <option value="annule">Annulé</option>
  169. </select>
  170. <button class="bg-[#006633] text-white px-6 py-2 rounded-xl hover:bg-[#008040] transition">
  171. <i class="fas fa-search mr-2"></i>Appliquer
  172. </button>
  173. </div>
  174. </div>
  175. </div>
  176. </div>
  177. </section>
  179. <!-- Dernières publications - Appels d'offres -->
  180. <section class="py-16 bg-gray-50">
  181. <div class="container mx-auto px-4">
  182. <div class="flex justify-between items-center mb-8">
  183. <div>
  184. <h2 class="text-3xl font-bold text-gray-800">Appels d'offres</h2>
  185. <p class="text-gray-600 mt-2">Marchés publics, consultations et délégations de service public</p>
  186. </div>
  187. <div class="flex space-x-2">
  188. <button class="px-4 py-2 bg-white rounded-lg shadow-sm hover:bg-gray-50 transition">
  189. <i class="fas fa-list"></i>
  190. </button>
  191. <button class="px-4 py-2 bg-[#006633] text-white rounded-lg shadow-sm">
  192. <i class="fas fa-table"></i>
  193. </button>
  194. </div>
  195. </div>
  197. <div class="bg-white rounded-2xl shadow-lg overflow-hidden">
  198. <div class="overflow-x-auto">
  199. <table class="min-w-full divide-y divide-gray-200">
  200. <thead class="bg-gradient-to-r from-gray-50 to-gray-100">
  201. <tr>
  202. <th class="px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Type</th>
  203. <th class="px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Référence</th>
  204. <th class="px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Objet</th>
  205. <th class="px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Maître d'ouvrage</th>
  206. <th class="px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Date limite</th>
  207. <th class="px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Statut</th>
  208. <th class="px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Actions</th>
  209. </tr>
  210. </thead>
  211. <tbody class="bg-white divide-y divide-gray-100">
  212. <tr class="hover:bg-gray-50 transition cursor-pointer">
  213. <td class="px-6 py-4 whitespace-nowrap">
  214. <span class="px-3 py-1 text-xs font-semibold rounded-full bg-[#006633]/10 text-[#006633]">
  215. <i class="fas fa-chart-line mr-1"></i> Appel d'offres
  216. </span>
  217. </td>
  218. <td class="px-6 py-4 whitespace-nowrap font-mono text-sm font-semibold text-gray-800">
  219. AO-2026-045/MTP
  220. </td>
  221. <td class="px-6 py-4">
  222. <div class="text-sm font-medium text-gray-900">Travaux de réhabilitation des routes nationales</div>
  223. <div class="text-xs text-gray-500 mt-1">Lot 1 : RN1 Moroni - Mitsamiouli | Lot 2 : RN2 Moroni - Fomboni</div>
  224. </td>
  225. <td class="px-6 py-4 whitespace-nowrap">
  226. <div class="text-sm text-gray-700">Ministère des Travaux Publics</div>
  227. <div class="text-xs text-gray-400">Direction des Infrastructures</div>
  228. </td>
  229. <td class="px-6 py-4 whitespace-nowrap">
  230. <div class="text-sm text-red-600 font-medium">15 avril 2026</div>
  231. <div class="text-xs text-gray-400">Publié: 28/03/2026</div>
  232. </td>
  233. <td class="px-6 py-4 whitespace-nowrap">
  234. <span class="px-2 py-1 text-xs font-semibold rounded-full bg-yellow-100 text-yellow-700">
  235. <i class="fas fa-clock mr-1"></i> En cours
  236. </span>
  237. </td>
  238. <td class="px-6 py-4 whitespace-nowrap">
  239. <div class="flex space-x-2">
  240. <a href="#" class="text-[#006633] hover:text-[#008040]" title="Télécharger DAO">
  241. <i class="fas fa-download"></i>
  242. </a>
  243. <a href="#" class="text-gray-600 hover:text-gray-800" title="Voir le détail">
  244. <i class="fas fa-eye"></i>
  245. </a>
  246. </div>
  247. </td>
  248. </tr>
  250. <tr class="hover:bg-gray-50 transition cursor-pointer">
  251. <td class="px-6 py-4 whitespace-nowrap">
  252. <span class="px-3 py-1 text-xs font-semibold rounded-full bg-[#006633]/10 text-[#006633]">
  253. <i class="fas fa-chart-line mr-1"></i> Appel d'offres
  254. </span>
  255. </td>
  256. <td class="px-6 py-4 whitespace-nowrap font-mono text-sm font-semibold text-gray-800">
  257. AO-2026-032/MTN
  258. </td>
  259. <td class="px-6 py-4">
  260. <div class="text-sm font-medium text-gray-900">Fourniture de matériel informatique et logiciels</div>
  261. <div class="text-xs text-gray-500 mt-1">Équipement des administrations publiques - Comores Numérique 2028</div>
  262. </td>
  263. <td class="px-6 py-4 whitespace-nowrap">
  264. <div class="text-sm text-gray-700">Ministère du Numérique</div>
  265. <div class="text-xs text-gray-400">Direction des Systèmes d'Information</div>
  266. </td>
  267. <td class="px-6 py-4 whitespace-nowrap">
  268. <div class="text-sm text-red-600 font-medium">10 avril 2026</div>
  269. <div class="text-xs text-gray-400">Publié: 25/03/2026</div>
  270. </td>
  271. <td class="px-6 py-4 whitespace-nowrap">
  272. <span class="px-2 py-1 text-xs font-semibold rounded-full bg-yellow-100 text-yellow-700">
  273. <i class="fas fa-clock mr-1"></i> En cours
  274. </span>
  275. </td>
  276. <td class="px-6 py-4 whitespace-nowrap">
  277. <div class="flex space-x-2">
  278. <a href="#" class="text-[#006633] hover:text-[#008040]"><i class="fas fa-download"></i></a>
  279. <a href="#" class="text-gray-600 hover:text-gray-800"><i class="fas fa-eye"></i></a>
  280. </div>
  281. </td>
  282. </tr>
  283. </tbody>
  284. </table>
  285. </div>
  286. </div>
  287. </div>
  288. </section>
  290. <!-- Actes fonciers -->
  291. <section class="py-16 bg-white">
  292. <div class="container mx-auto px-4">
  293. <div class="flex justify-between items-center mb-8">
  294. <div>
  295. <h2 class="text-3xl font-bold text-gray-800">Actes fonciers</h2>
  296. <p class="text-gray-600 mt-2">Réquisitions foncières, transactions immobilières et propriétés</p>
  297. </div>
  298. <a href="#" class="text-[#006633] hover:text-[#008040] font-medium">Voir tous →</a>
  299. </div>
  301. <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  302. <div class="bg-gray-50 rounded-2xl shadow-md p-5 hover:shadow-lg transition">
  303. <div class="flex items-start justify-between mb-3">
  304. <span class="inline-block px-3 py-1 text-xs font-semibold bg-[#006633]/10 text-[#006633] rounded-full">Réquisition</span>
  305. <span class="text-xs text-gray-400">N° 2026-089</span>
  306. </div>
  307. <h3 class="font-bold text-gray-800 mb-2">Parcelle 456 - Moroni</h3>
  308. <p class="text-sm text-gray-600 mb-3">Réquisition pour projet de construction du nouveau palais de justice</p>
  309. <div class="border-t pt-3 mt-2">
  310. <div class="flex justify-between text-sm">
  311. <span class="text-gray-500">Superficie :</span>
  312. <span class="font-medium">2 450 m²</span>
  313. </div>
  314. <div class="flex justify-between text-sm mt-1">
  315. <span class="text-gray-500">Propriétaire :</span>
  316. <span class="font-medium">État comorien</span>
  317. </div>
  318. </div>
  319. <a href="#" class="inline-flex items-center text-[#006633] text-sm mt-3 hover:text-[#008040]">
  320. Voir le détail <i class="fas fa-arrow-right ml-1"></i>
  321. </a>
  322. </div>
  324. <div class="bg-gray-50 rounded-2xl shadow-md p-5 hover:shadow-lg transition">
  325. <div class="flex items-start justify-between mb-3">
  326. <span class="inline-block px-3 py-1 text-xs font-semibold bg-[#006633]/10 text-[#006633] rounded-full">Transaction</span>
  327. <span class="text-xs text-gray-400">N° 2026-156</span>
  328. </div>
  329. <h3 class="font-bold text-gray-800 mb-2">Lotissement Les Bambins - Itsandra</h3>
  330. <p class="text-sm text-gray-600 mb-3">Vente de 15 lots résidentiels</p>
  331. <div class="border-t pt-3 mt-2">
  332. <div class="flex justify-between text-sm">
  333. <span class="text-gray-500">Superficie :</span>
  334. <span class="font-medium">350 m² à 600 m²</span>
  335. </div>
  336. <div class="flex justify-between text-sm mt-1">
  337. <span class="text-gray-500">Prix :</span>
  338. <span class="font-medium">À partir de 8 500 000 KMF</span>
  339. </div>
  340. </div>
  341. <a href="#" class="inline-flex items-center text-[#006633] text-sm mt-3 hover:text-[#008040]">
  342. Voir le détail <i class="fas fa-arrow-right ml-1"></i>
  343. </a>
  344. </div>
  346. <div class="bg-gray-50 rounded-2xl shadow-md p-5 hover:shadow-lg transition">
  347. <div class="flex items-start justify-between mb-3">
  348. <span class="inline-block px-3 py-1 text-xs font-semibold bg-[#006633]/10 text-[#006633] rounded-full">Attribution</span>
  349. <span class="text-xs text-gray-400">N° 2026-203</span>
  350. </div>
  351. <h3 class="font-bold text-gray-800 mb-2">Zone industrielle de M'tsapéré</h3>
  352. <p class="text-sm text-gray-600 mb-3">Attribution de parcelles pour implantation d'entreprises</p>
  353. <div class="border-t pt-3 mt-2">
  354. <div class="flex justify-between text-sm">
  355. <span class="text-gray-500">Superficie :</span>
  356. <span class="font-medium">5 000 m² à 20 000 m²</span>
  357. </div>
  358. <div class="flex justify-between text-sm mt-1">
  359. <span class="text-gray-500">Délai :</span>
  360. <span class="font-medium">Candidatures avant 30/04/2026</span>
  361. </div>
  362. </div>
  363. <a href="#" class="inline-flex items-center text-[#006633] text-sm mt-3 hover:text-[#008040]">
  364. Voir le détail <i class="fas fa-arrow-right ml-1"></i>
  365. </a>
  366. </div>
  367. </div>
  368. </div>
  369. </section>
  371. <!-- Actes de sociétés -->
  372. <section class="py-16 bg-gray-50">
  373. <div class="container mx-auto px-4">
  374. <div class="flex justify-between items-center mb-8">
  375. <div>
  376. <h2 class="text-3xl font-bold text-gray-800">Actes de sociétés</h2>
  377. <p class="text-gray-600 mt-2">Créations, modifications, dissolutions RCCM/OHADA</p>
  378. </div>
  379. <a href="#" class="text-[#006633] hover:text-[#008040] font-medium">Voir tous →</a>
  380. </div>
  382. <div class="bg-white rounded-2xl shadow-lg overflow-hidden">
  383. <div class="overflow-x-auto">
  384. <table class="min-w-full divide-y divide-gray-200">
  385. <thead class="bg-gradient-to-r from-gray-50 to-gray-100">
  386. <tr>
  387. <th class="px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Dénomination</th>
  388. <th class="px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Type d'acte</th>
  389. <th class="px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">RCCM</th>
  390. <th class="px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Date publication</th>
  391. <th class="px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Actions</th>
  392. </tr>
  393. </thead>
  394. <tbody class="bg-white divide-y divide-gray-100">
  395. <tr class="hover:bg-gray-50 transition">
  396. <td class="px-6 py-4">
  397. <div class="font-medium text-gray-800">COMORES TELECOM SA</div>
  398. <div class="text-xs text-gray-500">Capital : 5 000 000 000 FCFA</div>
  399. </td>
  400. <td class="px-6 py-4">
  401. <span class="px-2 py-1 text-xs font-semibold bg-green-100 text-green-700 rounded-full">Modification</span>
  402. </td>
  403. <td class="px-6 py-4 text-sm text-gray-600">KM-MOR-2026-00123</td>
  404. <td class="px-6 py-4 text-sm text-gray-500">25/03/2026</td>
  405. <td class="px-6 py-4">
  406. <a href="#" class="text-[#006633] hover:text-[#008040]">
  407. <i class="fas fa-eye"></i>
  408. </a>
  409. </td>
  410. </tr>
  411. <tr class="hover:bg-gray-50 transition">
  412. <td class="px-6 py-4">
  413. <div class="font-medium text-gray-800">ENERGIE NOUVELLE COMORES SARL</div>
  414. <div class="text-xs text-gray-500">Capital : 50 000 000 FCFA</div>
  415. </td>
  416. <td class="px-6 py-4">
  417. <span class="px-2 py-1 text-xs font-semibold bg-blue-100 text-blue-700 rounded-full">Création</span>
  418. </td>
  419. <td class="px-6 py-4 text-sm text-gray-600">KM-MOR-2026-00234</td>
  420. <td class="px-6 py-4 text-sm text-gray-500">20/03/2026</td>
  421. <td class="px-6 py-4">
  422. <a href="#" class="text-[#006633] hover:text-[#008040]">
  423. <i class="fas fa-eye"></i>
  424. </a>
  425. </td>
  426. </tr>
  427. <tr class="hover:bg-gray-50 transition">
  428. <td class="px-6 py-4">
  429. <div class="font-medium text-gray-800">AGRICOMORES SAS</div>
  430. <div class="text-xs text-gray-500">Capital : 25 000 000 FCFA</div>
  431. </td>
  432. <td class="px-6 py-4">
  433. <span class="px-2 py-1 text-xs font-semibold bg-red-100 text-red-700 rounded-full">Dissolution</span>
  434. </td>
  435. <td class="px-6 py-4 text-sm text-gray-600">KM-MOR-2026-00345</td>
  436. <td class="px-6 py-4 text-sm text-gray-500">15/03/2026</td>
  437. <td class="px-6 py-4">
  438. <a href="#" class="text-[#006633] hover:text-[#008040]">
  439. <i class="fas fa-eye"></i>
  440. </a>
  441. </td>
  442. </tr>
  443. </tbody>
  444. </table>
  445. </div>
  446. </div>
  447. </div>
  448. </section>
  450. <!-- Associations et Ventes aux enchères -->
  451. <section class="py-16 bg-white">
  452. <div class="container mx-auto px-4">
  453. <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
  454. <!-- Associations -->
  455. <div>
  456. <div class="flex justify-between items-center mb-6">
  457. <div>
  458. <h2 class="text-2xl font-bold text-gray-800">Associations</h2>
  459. <p class="text-gray-600 mt-1">Récépissés de déclaration et modifications statutaires</p>
  460. </div>
  461. <a href="#" class="text-[#006633] hover:text-[#008040] font-medium text-sm">Voir tous →</a>
  462. </div>
  464. <div class="space-y-4">
  465. <div class="bg-gray-50 rounded-xl shadow-md p-5 flex items-start justify-between">
  466. <div class="flex-1">
  467. <div class="flex items-center mb-2">
  468. <span class="inline-block px-2 py-1 text-xs font-semibold bg-amber-100 text-amber-700 rounded-full mr-2">Récépissé</span>
  469. <span class="text-xs text-gray-400">N° 2026-045/AG</span>
  470. </div>
  471. <h3 class="font-semibold text-gray-800">Association des Femmes Comoriennes pour le Développement</h3>
  472. <p class="text-sm text-gray-600 mt-1">Déclaration le 28 mars 2026 - Récépissé n° 2026-089</p>
  473. </div>
  474. <a href="#" class="text-[#006633] hover:text-[#008040] ml-4">
  475. <i class="fas fa-file-pdf text-xl"></i>
  476. </a>
  477. </div>
  479. <div class="bg-gray-50 rounded-xl shadow-md p-5 flex items-start justify-between">
  480. <div class="flex-1">
  481. <div class="flex items-center mb-2">
  482. <span class="inline-block px-2 py-1 text-xs font-semibold bg-amber-100 text-amber-700 rounded-full mr-2">Modification</span>
  483. <span class="text-xs text-gray-400">N° 2026-067/AG</span>
  484. </div>
  485. <h3 class="font-semibold text-gray-800">Club Sportif de Ngazidja</h3>
  486. <p class="text-sm text-gray-600 mt-1">Modification du bureau directeur - Déclaration le 25 mars 2026</p>
  487. </div>
  488. <a href="#" class="text-[#006633] hover:text-[#008040] ml-4">
  489. <i class="fas fa-file-pdf text-xl"></i>
  490. </a>
  491. </div>
  492. </div>
  493. </div>
  495. <!-- Ventes aux enchères -->
  496. <div>
  497. <div class="flex justify-between items-center mb-6">
  498. <div>
  499. <h2 class="text-2xl font-bold text-gray-800">Ventes aux enchères</h2>
  500. <p class="text-gray-600 mt-1">Biens immobiliers, mobiliers et véhicules administratifs</p>
  501. </div>
  502. <a href="#" class="text-[#006633] hover:text-[#008040] font-medium text-sm">Voir tous →</a>
  503. </div>
  505. <div class="space-y-4">
  506. <div class="bg-gray-50 rounded-xl shadow-md p-5">
  507. <div class="flex items-start justify-between mb-3">
  508. <div>
  509. <span class="inline-block px-2 py-1 text-xs font-semibold bg-orange-100 text-orange-700 rounded-full">Immobilier</span>
  510. <span class="ml-2 text-xs text-gray-400">Enchère n° 2026-012</span>
  511. </div>
  512. <span class="text-sm text-red-600 font-medium">Date limite: 10/04/2026</span>
  513. </div>
  514. <h3 class="font-semibold text-gray-800 mb-2">Villa F3 - Moroni, Quartier Hamramba</h3>
  515. <p class="text-sm text-gray-600 mb-3">Surface : 250 m² | Terrain : 800 m² | Mise à prix : 25 000 000 KMF</p>
  516. <div class="flex justify-between items-center">
  517. <span class="text-sm text-gray-500">Tribunal de Moroni</span>
  518. <a href="#" class="text-[#006633] hover:text-[#008040] text-sm font-medium">Voir le dossier →</a>
  519. </div>
  520. </div>
  522. <div class="bg-gray-50 rounded-xl shadow-md p-5">
  523. <div class="flex items-start justify-between mb-3">
  524. <div>
  525. <span class="inline-block px-2 py-1 text-xs font-semibold bg-orange-100 text-orange-700 rounded-full">Véhicule</span>
  526. <span class="ml-2 text-xs text-gray-400">Enchère n° 2026-018</span>
  527. </div>
  528. <span class="text-sm text-red-600 font-medium">Date limite: 05/04/2026</span>
  529. </div>
  530. <h3 class="font-semibold text-gray-800 mb-2">Lot de 5 véhicules administratifs</h3>
  531. <p class="text-sm text-gray-600 mb-3">Toyota Hilux (2020) x2 | Mitsubishi Pajero (2019) x3</p>
  532. <div class="flex justify-between items-center">
  533. <span class="text-sm text-gray-500">Direction des Domaines</span>
  534. <a href="#" class="text-[#006633] hover:text-[#008040] text-sm font-medium">Voir le dossier →</a>
  535. </div>
  536. </div>
  537. </div>
  538. </div>
  539. </div>
  540. </div>
  541. </section>
  543. <!-- Section Publication - Formulaire de dépôt -->
  544. <section class="py-16 bg-gradient-to-r from-[#006633] to-[#008040] text-white">
  545. <div class="container mx-auto px-4">
  546. <div class="max-w-4xl mx-auto text-center">
  547. <i class="fas fa-upload text-5xl mb-6 opacity-80"></i>
  548. <h2 class="text-3xl font-bold mb-4">Publiez votre annonce légale</h2>
  549. <p class="text-white/90 mb-8 leading-relaxed">
  550. Créez un compte annonceur et déposez votre document en quelques clics.
  551. Notre équipe éditoriale validera votre publication dans les plus brefs délais.
  552. </p>
  554. <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8 text-left">
  555. <div class="bg-white/10 backdrop-blur-sm rounded-xl p-4">
  556. <i class="fas fa-user-plus text-2xl mb-3"></i>
  557. <h3 class="font-semibold mb-2">1. Création de compte</h3>
  558. <p class="text-sm text-white/80">Inscrivez-vous comme annonceur</p>
  559. </div>
  560. <div class="bg-white/10 backdrop-blur-sm rounded-xl p-4">
  561. <i class="fas fa-file-upload text-2xl mb-3"></i>
  562. <h3 class="font-semibold mb-2">2. Dépôt du document</h3>
  563. <p class="text-sm text-white/80">Upload PDF, DOCX ou ODT</p>
  564. </div>
  565. <div class="bg-white/10 backdrop-blur-sm rounded-xl p-4">
  566. <i class="fas fa-credit-card text-2xl mb-3"></i>
  567. <h3 class="font-semibold mb-2">3. Paiement en ligne</h3>
  568. <p class="text-sm text-white/80">Mobile Money ou carte bancaire</p>
  569. </div>
  570. </div>
  572. <div class="flex flex-wrap justify-center gap-4">
  573. <a href="" class="bg-white text-[#006633] px-8 py-3 rounded-xl font-bold hover:bg-gray-100 transition shadow-lg">
  574. <i class="fas fa-user-plus mr-2"></i> Créer un compte annonceur
  575. </a>
  576. <a href="#" class="bg-white/20 backdrop-blur-sm border border-white/30 text-white px-8 py-3 rounded-xl font-semibold hover:bg-white/30 transition">
  577. <i class="fas fa-info-circle mr-2"></i> Voir les tarifs
  578. </a>
  579. </div>
  580. </div>
  581. </div>
  582. </section>
  584. <!-- Tarifs -->
  585. <section class="py-16 bg-gray-50">
  586. <div class="container mx-auto px-4">
  587. <div class="text-center mb-12">
  588. <h2 class="text-3xl font-bold text-gray-800 mb-4">Barème des publications</h2>
  589. <div class="w-20 h-1 bg-gradient-to-r from-[#006633] to-[#008040] mx-auto rounded-full"></div>
  590. <p class="text-gray-600 mt-4">Tarifs progressifs selon le type d'annonce et la longueur du texte</p>
  591. </div>
  593. <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 max-w-5xl mx-auto">
  594. <div class="bg-white rounded-2xl p-6 text-center hover:shadow-lg transition">
  595. <i class="fas fa-chart-line text-3xl text-[#006633] mb-3"></i>
  596. <h3 class="font-bold text-gray-800 mb-2">Appels d'offres</h3>
  597. <p class="text-2xl font-bold text-[#006633]">25 000 KMF</p>
  598. <p class="text-sm text-gray-500 mt-2">Par page ou fraction</p>
  599. </div>
  601. <div class="bg-white rounded-2xl p-6 text-center hover:shadow-lg transition">
  602. <i class="fas fa-home text-3xl text-[#006633] mb-3"></i>
  603. <h3 class="font-bold text-gray-800 mb-2">Actes fonciers</h3>
  604. <p class="text-2xl font-bold text-[#006633]">15 000 KMF</p>
  605. <p class="text-sm text-gray-500 mt-2">Par acte</p>
  606. </div>
  608. <div class="bg-white rounded-2xl p-6 text-center hover:shadow-lg transition">
  609. <i class="fas fa-building text-3xl text-[#006633] mb-3"></i>
  610. <h3 class="font-bold text-gray-800 mb-2">Actes de sociétés</h3>
  611. <p class="text-2xl font-bold text-[#006633]">20 000 KMF</p>
  612. <p class="text-sm text-gray-500 mt-2">Par acte</p>
  613. </div>
  615. <div class="bg-white rounded-2xl p-6 text-center hover:shadow-lg transition">
  616. <i class="fas fa-handshake text-3xl text-[#006633] mb-3"></i>
  617. <h3 class="font-bold text-gray-800 mb-2">Associations</h3>
  618. <p class="text-2xl font-bold text-[#006633]">10 000 KMF</p>
  619. <p class="text-sm text-gray-500 mt-2">Par récépissé</p>
  620. </div>
  621. </div>
  623. <div class="text-center mt-8">
  624. <p class="text-sm text-gray-500">
  625. <i class="fas fa-percent mr-1"></i> Remise de 20% pour les abonnés Premium
  626. </p>
  627. </div>
  628. </div>
  629. </section>
  631. <!-- Section FAQ -->
  632. <section class="py-16 bg-white">
  633. <div class="container mx-auto px-4">
  634. <div class="text-center mb-12">
  635. <h2 class="text-3xl font-bold text-gray-800 mb-4">Questions fréquentes</h2>
  636. <div class="w-20 h-1 bg-gradient-to-r from-[#006633] to-[#008040] mx-auto rounded-full"></div>
  637. </div>
  639. <div class="max-w-3xl mx-auto space-y-4">
  640. <div class="border border-gray-200 rounded-xl overflow-hidden">
  641. <button class="w-full px-6 py-4 text-left font-medium text-gray-800 hover:bg-gray-50 transition flex justify-between items-center">
  642. <span>Quelle est la valeur juridique des annonces publiées sur Munganyo ?</span>
  643. <i class="fas fa-chevron-down text-gray-400"></i>
  644. </button>
  645. <div class="px-6 pb-4 text-gray-600 text-sm border-t border-gray-100 pt-3">
  646. Les annonces publiées sur la plateforme Munganyo ont la même valeur juridique que les versions papier du Journal Officiel. Elles sont certifiées et opposables aux tiers.
  647. </div>
  648. </div>
  650. <div class="border border-gray-200 rounded-xl overflow-hidden">
  651. <button class="w-full px-6 py-4 text-left font-medium text-gray-800 hover:bg-gray-50 transition flex justify-between items-center">
  652. <span>Comment puis-je être informé des nouveaux appels d'offres ?</span>
  653. <i class="fas fa-chevron-down text-gray-400"></i>
  654. </button>
  655. <div class="px-6 pb-4 text-gray-600 text-sm border-t border-gray-100 pt-3">
  656. Vous pouvez vous abonner aux alertes personnalisées via votre espace abonné. Les alertes sont envoyées par email dès la publication d'un nouvel appel d'offres correspondant à vos critères.
  657. </div>
  658. </div>
  660. <div class="border border-gray-200 rounded-xl overflow-hidden">
  661. <button class="w-full px-6 py-4 text-left font-medium text-gray-800 hover:bg-gray-50 transition flex justify-between items-center">
  662. <span>Combien de temps reste une annonce en ligne ?</span>
  663. <i class="fas fa-chevron-down text-gray-400"></i>
  664. </button>
  665. <div class="px-6 pb-4 text-gray-600 text-sm border-t border-gray-100 pt-3">
  666. Les annonces restent consultables indéfiniment dans nos archives numériques, avec mention de leur statut (en cours, clôturé, annulé). Les appels d'offres sont archivés après leur date de clôture.
  667. </div>
  668. </div>
  669. </div>
  670. </div>
  671. </section>
  673. <script>
  674. // Filtrage des catégories
  675. document.addEventListener('DOMContentLoaded', function() {
  676. const filterBtns = document.querySelectorAll('.filter-btn');
  678. filterBtns.forEach(btn => {
  679. btn.addEventListener('click', function(e) {
  680. e.preventDefault();
  681. filterBtns.forEach(b => {
  682. b.classList.remove('bg-white/30');
  683. b.classList.add('bg-white/20');
  684. });
  685. this.classList.remove('bg-white/20');
  686. this.classList.add('bg-white/30');
  688. const filter = this.dataset.filter;
  689. console.log('Filtre sélectionné :', filter);
  690. });
  691. });
  692. });
  693. </script>
  694. {% endblock %}